usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(#10923): avoid computed class name

This commit is contained in:
Acid Chicken (硫酸鶏) 2023-05-31 21:31:20 +09:00
parent 843586d468
commit f9d84a4217
No known key found for this signature in database
GPG Key ID: 3E87B98A3F6BAB99
12 changed files with 140 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/frontend/src/components/MkAchievements.vue
View File

@ -3,7 +3,14 @@
<div v-if="achievements" :class="$style.root"> <div v-if="achievements" :class="$style.root">
<div v-for="achievement in achievements" :key="achievement" :class="$style.achievement" class="_panel"> <div v-for="achievement in achievements" :key="achievement" :class="$style.achievement" class="_panel">
<div :class="$style.icon"> <div :class="$style.icon">
<div :class="[$style.iconFrame, $style['iconFrame_' + ACHIEVEMENT_BADGES[achievement.name].frame]]"> <div
:class="[$style.iconFrame, {
[$style.iconFrame_bronze]: ACHIEVEMENT_BADGES[achievement.name].frame === 'bronze',
[$style.iconFrame_silver]: ACHIEVEMENT_BADGES[achievement.name].frame === 'silver',
[$style.iconFrame_gold]: ACHIEVEMENT_BADGES[achievement.name].frame === 'gold',
[$style.iconFrame_platinum]: ACHIEVEMENT_BADGES[achievement.name].frame === 'platinum',
}]"
>
<div :class="[$style.iconInner]" :style="{ background: ACHIEVEMENT_BADGES[achievement.name].bg }"> <div :class="[$style.iconInner]" :style="{ background: ACHIEVEMENT_BADGES[achievement.name].bg }">
<img :class="$style.iconImg" :src="ACHIEVEMENT_BADGES[achievement.name].img"> <img :class="$style.iconImg" :src="ACHIEVEMENT_BADGES[achievement.name].img">
</div> </div>

10
packages/frontend/src/components/MkDialog.vue
View File

@ -4,7 +4,15 @@
<div v-if="icon" :class="$style.icon"> <div v-if="icon" :class="$style.icon">
<i :class="icon"></i> <i :class="icon"></i>
</div> </div>
<div v-else-if="!input && !select" :class="[$style.icon, $style['type_' + type]]"> <div
v-else-if="!input && !select"
:class="[$style.icon, {
[$style.type_success]: type === 'success',
[$style.type_error]: type === 'error',
[$style.type_warning]: type === 'warning',
[$style.type_info]: type === 'info',
}]"
>
<i v-if="type === 'success'" :class="$style.iconInner" class="ti ti-check"></i> <i v-if="type === 'success'" :class="$style.iconInner" class="ti ti-check"></i>
<i v-else-if="type === 'error'" :class="$style.iconInner" class="ti ti-circle-x"></i> <i v-else-if="type === 'error'" :class="$style.iconInner" class="ti ti-circle-x"></i>
<i v-else-if="type === 'warning'" :class="$style.iconInner" class="ti ti-alert-triangle"></i> <i v-else-if="type === 'warning'" :class="$style.iconInner" class="ti ti-alert-triangle"></i>

2
packages/frontend/src/components/MkImgWithBlurhash.vue
View File

@ -3,7 +3,7 @@
<TransitionGroup <TransitionGroup
:duration="defaultStore.state.animation && props.transition?.duration || undefined" :duration="defaultStore.state.animation && props.transition?.duration || undefined"
:enterActiveClass="defaultStore.state.animation && props.transition?.enterActiveClass || undefined" :enterActiveClass="defaultStore.state.animation && props.transition?.enterActiveClass || undefined"
:leaveActiveClass="defaultStore.state.animation && (props.transition?.leaveActiveClass ?? $style['transition_leaveActive']) || undefined" :leaveActiveClass="defaultStore.state.animation && (props.transition?.leaveActiveClass ?? $style.transition_leaveActive) || undefined"
:enterFromClass="defaultStore.state.animation && props.transition?.enterFromClass || undefined" :enterFromClass="defaultStore.state.animation && props.transition?.enterFromClass || undefined"
:leaveToClass="defaultStore.state.animation && props.transition?.leaveToClass || undefined" :leaveToClass="defaultStore.state.animation && props.transition?.leaveToClass || undefined"
:enterToClass="defaultStore.state.animation && props.transition?.enterToClass || undefined" :enterToClass="defaultStore.state.animation && props.transition?.enterToClass || undefined"

7
packages/frontend/src/components/MkMediaList.vue
View File

@ -6,8 +6,11 @@
ref="gallery" ref="gallery"
:class="[ :class="[
$style.medias, $style.medias,
count <= 4 ? $style['n' + count] : $style.nMany, count === 1 ? [$style.n1, {
$style[`n1${defaultStore.reactiveState.mediaListWithOneImageAppearance.value}`] [$style.n116_9]: defaultStore.reactiveState.mediaListWithOneImageAppearance.value === '16_9',
[$style.n1_1]: defaultStore.reactiveState.mediaListWithOneImageAppearance.value === '1_1',
[$style.n12_3]: defaultStore.reactiveState.mediaListWithOneImageAppearance.value === '2_3',
}] : count === 2 ? $style.n2 : count === 3 ? $style.n3 : count === 4 ? $style.n4 : $style.nMany,
]" ]"
> >
<template v-for="media in mediaList.filter(media => previewable(media))"> <template v-for="media in mediaList.filter(media => previewable(media))">

40
packages/frontend/src/components/MkModal.vue
View File

@ -1,10 +1,30 @@
<template> <template>
<Transition <Transition
:name="transitionName" :name="transitionName"
:enterActiveClass="$style['transition_' + transitionName + '_enterActive']" :enterActiveClass="{
:leaveActiveClass="$style['transition_' + transitionName + '_leaveActive']" [$style.transition_modalDrawer_enterActive]: transitionName === 'modal-drawer',
:enterFromClass="$style['transition_' + transitionName + '_enterFrom']" [$style.transition_modalPopup_enterActive]: transitionName === 'modal-popup',
:leaveToClass="$style['transition_' + transitionName + '_leaveTo']" [$style.transition_modal_enterActive]: transitionName === 'modal',
[$style.transition_send_enterActive]: transitionName === 'send',
}"
:leaveActiveClass="{
[$style.transition_modalDrawer_leaveActive]: transitionName === 'modal-drawer',
[$style.transition_modalPopup_leaveActive]: transitionName === 'modal-popup',
[$style.transition_modal_leaveActive]: transitionName === 'modal',
[$style.transition_send_leaveActive]: transitionName === 'send',
}"
:enterFromClass="{
[$style.transition_modalDrawer_enterFrom]: transitionName === 'modal-drawer',
[$style.transition_modalPopup_enterFrom]: transitionName === 'modal-popup',
[$style.transition_modal_enterFrom]: transitionName === 'modal',
[$style.transition_send_enterFrom]: transitionName === 'send',
}"
:leaveToClass="{
[$style.transition_modalPopup_leaveTo]: transitionName === 'modal-popup',
[$style.transition_modalPopup_leaveTo]: transitionName === 'modal-popup',
[$style.transition_modal_leaveTo]: transitionName === 'modal',
[$style.transition_send_leaveTo]: transitionName === 'send',
}"
:duration="transitionDuration" appear @afterLeave="emit('closed')" @enter="emit('opening')" @afterEnter="onOpened" :duration="transitionDuration" appear @afterLeave="emit('closed')" @enter="emit('opening')" @afterEnter="onOpened"
> >
<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> <div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
@ -339,8 +359,8 @@ defineExpose({
} }
} }
.transition_modal-popup_enterActive, .transition_modalPopup_enterActive,
.transition_modal-popup_leaveActive { .transition_modalPopup_leaveActive {
> .bg { > .bg {
transition: opacity 0.1s !important; transition: opacity 0.1s !important;
} }
@ -350,8 +370,8 @@ defineExpose({
transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1), transform 0.1s cubic-bezier(0, 0, 0.2, 1) !important; transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1), transform 0.1s cubic-bezier(0, 0, 0.2, 1) !important;
} }
} }
.transition_modal-popup_enterFrom, .transition_modalPopup_enterFrom,
.transition_modal-popup_leaveTo { .transition_modalPopup_leaveTo {
> .bg { > .bg {
opacity: 0; opacity: 0;
} }
@ -364,7 +384,7 @@ defineExpose({
} }
} }
.transition_modal-drawer_enterActive { .transition_modalDrawer_enterActive {
> .bg { > .bg {
transition: opacity 0.2s !important; transition: opacity 0.2s !important;
} }
@ -373,7 +393,7 @@ defineExpose({
transition: transform 0.2s cubic-bezier(0,.5,0,1) !important; transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
} }
} }
.transition_modal-drawer_leaveActive { .transition_modalDrawer_leaveActive {
> .bg { > .bg {
transition: opacity 0.2s !important; transition: opacity 0.2s !important;
} }

14
packages/frontend/src/components/MkNotification.vue
View File

@ -5,7 +5,19 @@
<MkAvatar v-else-if="notification.type === 'achievementEarned'" :class="$style.icon" :user="$i" link preview/> <MkAvatar v-else-if="notification.type === 'achievementEarned'" :class="$style.icon" :user="$i" link preview/>
<MkAvatar v-else-if="notification.user" :class="$style.icon" :user="notification.user" link preview/> <MkAvatar v-else-if="notification.user" :class="$style.icon" :user="notification.user" link preview/>
<img v-else-if="notification.icon" :class="$style.icon" :src="notification.icon" alt=""/> <img v-else-if="notification.icon" :class="$style.icon" :src="notification.icon" alt=""/>
<div :class="[$style.subIcon, $style['t_' + notification.type]]"> <div
:class="[$style.subIcon, {
[$style.t_follow]: notification.type === 'follow',
[$style.t_followRequestAccepted]: notification.type === 'followRequestAccepted',
[$style.t_receiveFollowRequest]: notification.type === 'receiveFollowRequest',
[$style.t_renote]: notification.type === 'renote',
[$style.t_reply]: notification.type === 'reply',
[$style.t_mention]: notification.type === 'mention',
[$style.t_quote]: notification.type === 'quote',
[$style.t_pollEnded]: notification.type === 'pollEnded',
[$style.t_achievementEarned]: notification.type === 'achievementEarned',
}]"
>
<i v-if="notification.type === 'follow'" class="ti ti-plus"></i> <i v-if="notification.type === 'follow'" class="ti ti-plus"></i>
<i v-else-if="notification.type === 'receiveFollowRequest'" class="ti ti-clock"></i> <i v-else-if="notification.type === 'receiveFollowRequest'" class="ti ti-clock"></i>
<i v-else-if="notification.type === 'followRequestAccepted'" class="ti ti-check"></i> <i v-else-if="notification.type === 'followRequestAccepted'" class="ti ti-check"></i>

10
packages/frontend/src/components/MkUserOnlineIndicator.vue
View File

@ -1,5 +1,13 @@
<template> <template>
<div v-tooltip="text" :class="[$style.root, $style['status_' + user.onlineStatus]]"></div> <div
v-tooltip="text"
:class="[$style.root, {
[$style.status_online]: user.onlineStatus === 'online',
[$style.status_active]: user.onlineStatus === 'active',
[$style.status_offline]: user.onlineStatus === 'offline',
[$style.status_unknown]: user.onlineStatus === 'unknown',
}]"
></div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

30
packages/frontend/src/components/MkWidgets.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div :class="$style.root"> <div :class="$style.root">
<template v-if="edit"> <template v-if="edit">
<header :class="$style['edit-header']"> <header :class="$style.editHeader">
<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" data-cy-widget-select> <MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" data-cy-widget-select>
<template #label>{{ i18n.ts.selectWidget }}</template> <template #label>{{ i18n.ts.selectWidget }}</template>
<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option> <option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
@ -15,15 +15,15 @@
handle=".handle" handle=".handle"
:animation="150" :animation="150"
:group="{ name: 'SortableMkWidgets' }" :group="{ name: 'SortableMkWidgets' }"
:class="$style['edit-editing']" :class="$style.editEditing"
@update:modelValue="v => emit('updateWidgets', v)" @update:modelValue="v => emit('updateWidgets', v)"
> >
<template #item="{element}"> <template #item="{element}">
<div :class="[$style.widget, $style['customize-container']]" data-cy-customize-container> <div :class="[$style.widget, $style.customizeContainer]" data-cy-customize-container>
<button :class="$style['customize-container-config']" class="_button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button> <button :class="$style.customizeContainerConfig" class="_button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button>
<button :class="$style['customize-container-remove']" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(element)"><i class="ti ti-x"></i></button> <button :class="$style.customizeContainerRemove" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(element)"><i class="ti ti-x"></i></button>
<div class="handle"> <div class="handle">
<component :is="`widget-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :class="$style['customize-container-handle-widget']" :widget="element" @updateProps="updateWidget(element.id, $event)"/> <component :is="`widget-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :class="$style.customizeContainerHandleWidget" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
</div> </div>
</div> </div>
</template> </template>
@ -130,7 +130,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
} }
.edit { .edit {
&-header { &Header {
margin: 16px 0; margin: 16px 0;
> * { > * {
@ -139,17 +139,17 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
} }
} }
&-editing { &Editing {
min-height: 100px; min-height: 100px;
} }
} }
.customize-container { .customizeContainer {
position: relative; position: relative;
cursor: move; cursor: move;
&-config, &Config,
&-remove { &Remove {
position: absolute; position: absolute;
z-index: 10000; z-index: 10000;
top: 8px; top: 8px;
@ -160,17 +160,17 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
border-radius: 4px; border-radius: 4px;
} }
&-config { &Config {
right: 8px + 8px + 32px; right: 8px + 8px + 32px;
} }
&-remove { &Remove {
right: 8px; right: 8px;
} }
&-handle { &Handle {
&-widget { &Widget {
pointer-events: none; pointer-events: none;
} }
} }

12
packages/frontend/src/components/global/MkAd.vue
View File

@ -1,6 +1,14 @@
<template> <template>
<div v-if="chosen && !shouldHide" :class="$style.root"> <div v-if="chosen && !shouldHide" :class="$style.root">
<div v-if="!showMenu" :class="[$style.main, $style['form_' + chosen.place]]"> <div
v-if="!showMenu"
:class="[$style.main, {
[$style.form_square]: chosen.place === 'square',
[$style.form_horizontal]: chosen.place === 'horizontal',
[$style.form_horizontalBig]: chosen.place === 'horizontal-big',
[$style.form_vertical]: chosen.place === 'vertical',
}]"
>
<a :href="chosen.url" target="_blank" :class="$style.link"> <a :href="chosen.url" target="_blank" :class="$style.link">
<img :src="chosen.imageUrl" :class="$style.img"> <img :src="chosen.imageUrl" :class="$style.img">
<button class="_button" :class="$style.i" @click.prevent.stop="toggleMenu"><i :class="$style.iIcon" class="ti ti-info-circle"></i></button> <button class="_button" :class="$style.i" @click.prevent.stop="toggleMenu"><i :class="$style.iIcon" class="ti ti-info-circle"></i></button>
@ -122,7 +130,7 @@ function reduceFrequency(): void {
} }
} }
&.form_horizontal-big { &.form_horizontalBig {
padding: 8px; padding: 8px;
> .link, > .link,

11
packages/frontend/src/components/page/page.section.vue
View File

@ -1,6 +1,15 @@
<template> <template>
<section> <section>
<component :is="'h' + h" :class="h < 5 ? $style['h' + h] : null">{{ block.title }}</component> <component
:is="'h' + h"
:class="{
'h2': h === 2,
'h3': h === 3,
'h4': h === 4,
}"
>
{{ block.title }}
</component>
<div class="_gaps"> <div class="_gaps">
<XBlock v-for="child in block.children" :key="child.id" :page="page" :block="child" :h="h + 1"/> <XBlock v-for="child in block.children" :key="child.id" :page="page" :block="child" :h="h + 1"/>

38
packages/frontend/src/ui/_common_/common.vue
View File

@ -10,7 +10,15 @@
<XUpload v-if="uploads.length > 0"/> <XUpload v-if="uploads.length > 0"/>
<TransitionGroup <TransitionGroup
tag="div" :class="[$style.notifications, $style[`notificationsPosition-${defaultStore.state.notificationPosition}`], $style[`notificationsStackAxis-${defaultStore.state.notificationStackAxis}`]]" tag="div"
:class="[$style.notifications, {
[$style.notificationsPosition_leftTop]: defaultStore.state.notificationPosition === 'leftTop',
[$style.notificationsPosition_leftBottom]: defaultStore.state.notificationPosition === 'leftBottom',
[$style.notificationsPosition_rightTop]: defaultStore.state.notificationPosition === 'rightTop',
[$style.notificationsPosition_rightBottom]: defaultStore.state.notificationPosition === 'rightBottom',
[$style.notificationsStackAxis_vertical]: defaultStore.state.notificationStackAxis === 'vertical',
[$style.notificationsStackAxis_horizontal]: defaultStore.state.notificationStackAxis === 'horizontal',
}]"
:moveClass="defaultStore.state.animation ? $style.transition_notification_move : ''" :moveClass="defaultStore.state.animation ? $style.transition_notification_move : ''"
:enterActiveClass="defaultStore.state.animation ? $style.transition_notification_enterActive : ''" :enterActiveClass="defaultStore.state.animation ? $style.transition_notification_enterActive : ''"
:leaveActiveClass="defaultStore.state.animation ? $style.transition_notification_leaveActive : ''" :leaveActiveClass="defaultStore.state.animation ? $style.transition_notification_leaveActive : ''"
@ -103,31 +111,31 @@ if ($i) {
pointer-events: none; pointer-events: none;
display: flex; display: flex;
&.notificationsPosition-leftTop { &.notificationsPosition_leftTop {
top: var(--margin); top: var(--margin);
left: 0; left: 0;
} }
&.notificationsPosition-rightTop { &.notificationsPosition_rightTop {
top: var(--margin); top: var(--margin);
right: 0; right: 0;
} }
&.notificationsPosition-leftBottom { &.notificationsPosition_leftBottom {
bottom: calc(var(--minBottomSpacing) + var(--margin)); bottom: calc(var(--minBottomSpacing) + var(--margin));
left: 0; left: 0;
} }
&.notificationsPosition-rightBottom { &.notificationsPosition_rightBottom {
bottom: calc(var(--minBottomSpacing) + var(--margin)); bottom: calc(var(--minBottomSpacing) + var(--margin));
right: 0; right: 0;
} }
&.notificationsStackAxis-vertical { &.notificationsStackAxis_vertical {
width: 250px; width: 250px;
&.notificationsPosition-leftTop, &.notificationsPosition_leftTop,
&.notificationsPosition-rightTop { &.notificationsPosition_rightTop {
flex-direction: column; flex-direction: column;
.notification { .notification {
@ -137,8 +145,8 @@ if ($i) {
} }
} }
&.notificationsPosition-leftBottom, &.notificationsPosition_leftBottom,
&.notificationsPosition-rightBottom { &.notificationsPosition_rightBottom {
flex-direction: column-reverse; flex-direction: column-reverse;
.notification { .notification {
@ -149,11 +157,11 @@ if ($i) {
} }
} }
&.notificationsStackAxis-horizontal { &.notificationsStackAxis_horizontal {
width: 100%; width: 100%;
&.notificationsPosition-leftTop, &.notificationsPosition_leftTop,
&.notificationsPosition-leftBottom { &.notificationsPosition_leftBottom {
flex-direction: row; flex-direction: row;
.notification { .notification {
@ -163,8 +171,8 @@ if ($i) {
} }
} }
&.notificationsPosition-rightTop, &.notificationsPosition_rightTop,
&.notificationsPosition-rightBottom { &.notificationsPosition_rightBottom {
flex-direction: row-reverse; flex-direction: row-reverse;
.notification { .notification {

8
packages/frontend/src/widgets/WidgetClock.vue
View File

@ -1,6 +1,12 @@
<template> <template>
<MkContainer :naked="widgetProps.transparent" :showHeader="false" data-cy-mkw-clock> <MkContainer :naked="widgetProps.transparent" :showHeader="false" data-cy-mkw-clock>
<div :class="[$style.root, $style[widgetProps.size]]"> <div
:class="[$style.root, {
[$style.small]: widgetProps.size === 'small',
[$style.medium]: widgetProps.size === 'medium',
[$style.large]: widgetProps.size === 'large',
}]"
>
<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace" :class="[$style.label, $style.a]">{{ tzAbbrev }}</div> <div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace" :class="[$style.label, $style.a]">{{ tzAbbrev }}</div>
<MkAnalogClock <MkAnalogClock
:class="$style.clock" :class="$style.clock"