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 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | 25x 25x 25x 25x 30x 15x 36x 25x 25x 25x 25x 25x 36x 25x | <!--
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"
>{{ labelLanguageIso }}</span>{{ labelText }}
</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( [
'getLabel',
'getLanguageIsoCodeOfZLang',
'getUserLangZid'
] ),
{
/**
* Returns the string value of this label
*
* @return {string}
*/
labelText: function () {
return this.labelData.label;
},
/**
* Returns the ISO code of the language of this label
*
* @return {string}
*/
labelLanguageIso: function () {
return this.getLanguageIsoCodeOfZLang( this.labelData.lang );
},
/**
* Returns the name of the language of this label
*
* TODO (T329103): This is currently not used, but are we showing the
* language name when we hover over the language ISO code chip? If so,
* this is the string that should be shown
*
* @return {string}
*/
labelLanguageName: function () {
return this.getLabel( this.labelData.lang );
},
/**
* 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>
|