|
@@ -6,34 +6,33 @@
|
|
class="flow-node__activity-background"
|
|
class="flow-node__activity-background"
|
|
rx="0"
|
|
rx="0"
|
|
ry="0"
|
|
ry="0"
|
|
- r="14"/>
|
|
|
|
- >
|
|
|
|
-
|
|
|
|
|
|
+ r="17"/>
|
|
<icon-refresh v-if="status=='running'" v-bind="iconProps" class="flow-node__activity-icon" />
|
|
<icon-refresh v-if="status=='running'" v-bind="iconProps" class="flow-node__activity-icon" />
|
|
<icon-wait v-else-if="status=='waiting'" v-bind="iconProps" class="flow-node__activity-icon"/>
|
|
<icon-wait v-else-if="status=='waiting'" v-bind="iconProps" class="flow-node__activity-icon"/>
|
|
<icon-ok v-else-if="status=='finish'" v-bind="iconProps"class="flow-node__activity-icon"/>
|
|
<icon-ok v-else-if="status=='finish'" v-bind="iconProps"class="flow-node__activity-icon"/>
|
|
|
|
+ <icon-fail v-else-if="status=='error'" v-bind="iconProps"class="flow-node__activity-icon"/>
|
|
<icon-question v-else v-bind="iconProps" class="flow-node__activity-icon" />
|
|
<icon-question v-else v-bind="iconProps" class="flow-node__activity-icon" />
|
|
-
|
|
|
|
</g>
|
|
</g>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
import IconWait from '@/assets/icons/wait.svg'
|
|
import IconWait from '@/assets/icons/wait.svg'
|
|
|
|
+import IconFail from '@/assets/icons/fail.svg'
|
|
import IconOk from '@/assets/icons/ok.svg'
|
|
import IconOk from '@/assets/icons/ok.svg'
|
|
import IconQuestion from '@/assets/icons/question.svg'
|
|
import IconQuestion from '@/assets/icons/question.svg'
|
|
import IconRefresh from '@/assets/icons/refresh.svg'
|
|
import IconRefresh from '@/assets/icons/refresh.svg'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
name: 'FlowNodeStatus',
|
|
name: 'FlowNodeStatus',
|
|
- components: {IconWait, IconOk, IconQuestion, IconRefresh},
|
|
|
|
|
|
+ components: {IconWait, IconFail, IconOk, IconQuestion, IconRefresh},
|
|
props: { status: {type: String, default: ''} },
|
|
props: { status: {type: String, default: ''} },
|
|
computed: {
|
|
computed: {
|
|
iconProps () {
|
|
iconProps () {
|
|
return {
|
|
return {
|
|
- x: -10,
|
|
|
|
- y: -10,
|
|
|
|
|
|
+ x: -12,
|
|
|
|
+ y: -12,
|
|
viewBox: '-4 -4 72 72',
|
|
viewBox: '-4 -4 72 72',
|
|
- width: 20,
|
|
|
|
- height: 20
|
|
|
|
|
|
+ width: 24,
|
|
|
|
+ height: 24
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -47,12 +46,14 @@ export default {
|
|
|
|
|
|
.flow-node__activity-background {
|
|
.flow-node__activity-background {
|
|
fill: inherits;
|
|
fill: inherits;
|
|
- transition: all .3s;
|
|
|
|
|
|
+ transition: all 0.3s;
|
|
}
|
|
}
|
|
|
|
+
|
|
.flow-node__activity-icon{
|
|
.flow-node__activity-icon{
|
|
width:20px;
|
|
width:20px;
|
|
height:20px;
|
|
height:20px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.flow-node__activity-icon >* {
|
|
.flow-node__activity-icon >* {
|
|
transform-origin: 50% 50%;
|
|
transform-origin: 50% 50%;
|
|
stroke-width: 8px;
|
|
stroke-width: 8px;
|
|
@@ -60,33 +61,41 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
.flow-node__activity[status=running] .flow-node__activity-icon >* {
|
|
.flow-node__activity[status=running] .flow-node__activity-icon >* {
|
|
- -webkit-animation: spin 1s infinite linear;
|
|
|
|
- -moz-animation: spin 1s infinite linear;
|
|
|
|
- animation: spin 1s infinite linear;
|
|
|
|
- stroke: #00C;
|
|
|
|
|
|
+ -webkit-animation: spin 1s infinite linear;
|
|
|
|
+ -moz-animation: spin 1s infinite linear;
|
|
|
|
+ animation: spin 1s infinite linear;
|
|
|
|
+ stroke: #00c !default;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+.flow-node__activity[status=error] .flow-node__activity-icon > * {
|
|
|
|
+ stroke: #f22;
|
|
|
|
+}
|
|
|
|
+
|
|
.flow-node__activity[status=waiting] .flow-node__activity-icon >* {
|
|
.flow-node__activity[status=waiting] .flow-node__activity-icon >* {
|
|
- -webkit-animation: shake 1s infinite linear;
|
|
|
|
- -moz-animation: shake 1s infinite linear;
|
|
|
|
- animation: shake 1s infinite linear;
|
|
|
|
|
|
+ -webkit-animation: shake 1s infinite linear;
|
|
|
|
+ -moz-animation: shake 1s infinite linear;
|
|
|
|
+ animation: shake 1s infinite linear;
|
|
}
|
|
}
|
|
|
|
+
|
|
.flow-node__activity[status=finish] .flow-node__activity-icon >* {
|
|
.flow-node__activity[status=finish] .flow-node__activity-icon >* {
|
|
- stroke: #2C2;
|
|
|
|
|
|
+ stroke: #2c2;
|
|
}
|
|
}
|
|
|
|
|
|
/*** ANIMATIONS ***/
|
|
/*** ANIMATIONS ***/
|
|
@-moz-keyframes spin {
|
|
@-moz-keyframes spin {
|
|
- from { -moz-transform: rotate(0deg); }
|
|
|
|
- to { -moz-transform: rotate(-360deg); }
|
|
|
|
|
|
+ from { -moz-transform: rotate(0deg); }
|
|
|
|
+ to { -moz-transform: rotate(-360deg); }
|
|
}
|
|
}
|
|
|
|
+
|
|
@-webkit-keyframes spin {
|
|
@-webkit-keyframes spin {
|
|
- from { -webkit-transform: rotate(0deg); }
|
|
|
|
- to { -webkit-transform: rotate(-360deg); }
|
|
|
|
|
|
+ from { -webkit-transform: rotate(0deg); }
|
|
|
|
+ to { -webkit-transform: rotate(-360deg); }
|
|
}
|
|
}
|
|
|
|
+
|
|
@keyframes spin {
|
|
@keyframes spin {
|
|
- from {transform:rotate(0deg);}
|
|
|
|
- to {transform:rotate(-360deg);}
|
|
|
|
- }
|
|
|
|
|
|
+ from {transform:rotate(0deg);}
|
|
|
|
+ to {transform:rotate(-360deg);}
|
|
|
|
+}
|
|
|
|
|
|
@keyframes shake {
|
|
@keyframes shake {
|
|
10%, 90% {
|
|
10%, 90% {
|
|
@@ -100,6 +109,7 @@ export default {
|
|
30%, 50%, 70% {
|
|
30%, 50%, 70% {
|
|
transform: rotate(-7deg);
|
|
transform: rotate(-7deg);
|
|
}
|
|
}
|
|
|
|
+
|
|
40%, 60% {
|
|
40%, 60% {
|
|
transform: rotate(7deg);
|
|
transform: rotate(7deg);
|
|
}
|
|
}
|