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 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 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 23x 23x 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 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <!--
WikiLambda Vue component for Localized Label
@copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
@license MIT
-->
<template>
<label>
<span
v-if="!isUserLang"
class="ext-wikilambda-lang-chip"
>{{ labelData.langCode }}</span><span
:lang="labelData.langCode"
:dir="labelData.langDir"
>{{ labelData.label }}</span>
</label>
</template>
<script>
const { defineComponent } = require( 'vue' );
const LabelData = require( '../../store/classes/LabelData.js' ),
mapGetters = require( 'vuex' ).mapGetters;
module.exports = exports = defineComponent( {
name: 'wl-localized-label',
props: {
labelData: {
type: LabelData,
required: true
}
},
computed: Object.assign( mapGetters( [
'getUserLangZid'
] ), {
/**
* Returns whether the label is in the user preferred language
*
* @return {boolean}
*/
isUserLang: function () {
return this.getUserLangZid === this.labelData.lang;
}
} )
} );
</script>
<style lang="less">
@import '../../ext.wikilambda.edit.variables.less';
.ext-wikilambda-text-toggle-truncate {
display: flex;
align-items: center;
justify-content: end;
margin-top: @spacing-100;
color: @color-base;
font-weight: @font-weight-bold;
&__icon {
margin-left: @spacing-50;
svg {
width: @size-100;
height: @size-100;
}
&__inverted {
transform: rotate( 180deg );
}
}
}
/* stylelint-disable declaration-property-unit-disallowed-list */
span.ext-wikilambda-lang-chip {
font-size: 1em;
font-weight: @font-weight-normal;
line-height: calc( 22.4px - 2px );
color: @color-base;
border: 1px solid @border-color-base;
border-radius: @border-radius-pill;
min-width: 36px;
padding: 0 5px;
text-align: center;
display: inline-block;
box-sizing: border-box;
height: 22px;
min-height: 22px;
margin-right: @spacing-25;
&:empty {
width: 36px;
height: 22px;
min-width: 36px;
border: 1px dashed @border-color-base;
}
@media screen and ( max-width: @max-width-breakpoint-mobile ) {
font-size: 0.875em;
}
}
</style>
|