Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 92x 92x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <!--
WikiLambda Vue component for a status icon
@copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
@license MIT
-->
<template>
<cdx-icon
class="ext-wikilambda-app-status-icon"
:size="size"
:icon="statusIcon"
:class="statusIconClass"
data-testid="status-icon"
></cdx-icon>
</template>
<script>
const { CdxIcon } = require( '@wikimedia/codex' );
const { defineComponent } = require( 'vue' ),
icons = require( '../../../lib/icons.json' );
module.exports = exports = defineComponent( {
name: 'wl-status-icon',
components: {
'cdx-icon': CdxIcon
},
props: {
size: {
type: String,
default: 'medium'
},
statusIcon: {
type: [ String, Object ],
default: icons.cdxIconInfo
},
status: {
type: String,
required: true
}
},
computed: {
/**
* Returns the class for the icon depending on the status
*
* @return {string}
*/
statusIconClass() {
return `ext-wikilambda-app-status-icon--${ this.status }`;
}
}
} );
</script>
<style lang="less">
@import '../../ext.wikilambda.app.variables.less';
.ext-wikilambda-app-status-icon.cdx-icon {
&.ext-wikilambda-app-status-icon--info {
cursor: pointer;
}
&.ext-wikilambda-app-status-icon--ready {
color: @color-disabled;
}
&.ext-wikilambda-app-status-icon--canceled {
color: @color-subtle;
}
&.ext-wikilambda-app-status-icon--passed {
color: @color-success;
}
&.ext-wikilambda-app-status-icon--failed {
color: @color-error;
}
&.ext-wikilambda-app-status-icon--running {
color: @color-warning;
}
}
</style>
|