* perf(#10923): unwind css module class name
* perf(#10923): support multiple components
* refactor: clean up
* refactor(#10923): avoid `useCssModule()`
* fix(#10923): allow direct literal class name
* fix(#10923): avoid computed class name
* fix(#10923): allow literal keys
* fix(#10923): typo
* fix(#10923): invalid class names
* chore: test
* revert: test
This reverts commit 5c7ef366ec.
* fix(#10923): hidden tale
* perf(#10923): also unwind scoped css contained components
* perf(#10923): `normalizeClass` AOT compilation
---------
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
Acid Chicken (硫酸鶏)
committed by
GitHub
GitHub
parent
146e89edd0
commit
337dd97b49
@@ -10,7 +10,15 @@
|
||||
<XUpload v-if="uploads.length > 0"/>
|
||||
|
||||
<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 : ''"
|
||||
:enterActiveClass="defaultStore.state.animation ? $style.transition_notification_enterActive : ''"
|
||||
:leaveActiveClass="defaultStore.state.animation ? $style.transition_notification_leaveActive : ''"
|
||||
@@ -103,31 +111,31 @@ if ($i) {
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
|
||||
&.notificationsPosition-leftTop {
|
||||
&.notificationsPosition_leftTop {
|
||||
top: var(--margin);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.notificationsPosition-rightTop {
|
||||
&.notificationsPosition_rightTop {
|
||||
top: var(--margin);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.notificationsPosition-leftBottom {
|
||||
&.notificationsPosition_leftBottom {
|
||||
bottom: calc(var(--minBottomSpacing) + var(--margin));
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.notificationsPosition-rightBottom {
|
||||
&.notificationsPosition_rightBottom {
|
||||
bottom: calc(var(--minBottomSpacing) + var(--margin));
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.notificationsStackAxis-vertical {
|
||||
&.notificationsStackAxis_vertical {
|
||||
width: 250px;
|
||||
|
||||
&.notificationsPosition-leftTop,
|
||||
&.notificationsPosition-rightTop {
|
||||
&.notificationsPosition_leftTop,
|
||||
&.notificationsPosition_rightTop {
|
||||
flex-direction: column;
|
||||
|
||||
.notification {
|
||||
@@ -137,8 +145,8 @@ if ($i) {
|
||||
}
|
||||
}
|
||||
|
||||
&.notificationsPosition-leftBottom,
|
||||
&.notificationsPosition-rightBottom {
|
||||
&.notificationsPosition_leftBottom,
|
||||
&.notificationsPosition_rightBottom {
|
||||
flex-direction: column-reverse;
|
||||
|
||||
.notification {
|
||||
@@ -149,11 +157,11 @@ if ($i) {
|
||||
}
|
||||
}
|
||||
|
||||
&.notificationsStackAxis-horizontal {
|
||||
&.notificationsStackAxis_horizontal {
|
||||
width: 100%;
|
||||
|
||||
&.notificationsPosition-leftTop,
|
||||
&.notificationsPosition-leftBottom {
|
||||
&.notificationsPosition_leftTop,
|
||||
&.notificationsPosition_leftBottom {
|
||||
flex-direction: row;
|
||||
|
||||
.notification {
|
||||
@@ -163,8 +171,8 @@ if ($i) {
|
||||
}
|
||||
}
|
||||
|
||||
&.notificationsPosition-rightTop,
|
||||
&.notificationsPosition-rightBottom {
|
||||
&.notificationsPosition_rightTop,
|
||||
&.notificationsPosition_rightBottom {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.notification {
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<MkA :to="`/instance-info/${instance.host}`" :class="$style.host" class="_monospace">
|
||||
{{ instance.host }}
|
||||
</MkA>
|
||||
<span :class="$style.divider"></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</MarqueeText>
|
||||
</Transition>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" :class="[$style.item, { [$style.black]: x.black,
|
||||
[$style.verySmall]: x.size === 'verySmall',
|
||||
[$style.small]: x.size === 'small',
|
||||
[$style.medium]: x.size === 'medium',
|
||||
[$style.large]: x.size === 'large',
|
||||
[$style.veryLarge]: x.size === 'veryLarge',
|
||||
}]"
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<div v-if="hasDisconnected && defaultStore.state.serverDisconnectedBehavior === 'quiet'" :class="$style.root" class="_panel _shadow" @click="resetDisconnected">
|
||||
<div><i class="ti ti-alert-triangle"></i> {{ i18n.ts.disconnectedFromServer }}</div>
|
||||
<div :class="$style.command" class="_buttons">
|
||||
<MkButton :class="$style.commandButton" small primary @click="reload">{{ i18n.ts.reload }}</MkButton>
|
||||
<MkButton :class="$style.commandButton" small>{{ i18n.ts.doNothing }}</MkButton>
|
||||
<MkButton small primary @click="reload">{{ i18n.ts.reload }}</MkButton>
|
||||
<MkButton small>{{ i18n.ts.doNothing }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -54,7 +54,4 @@ onUnmounted(() => {
|
||||
.command {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.commandButton {
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[$style.root, { [$style.paged]: isMainColumn, [$style.naked]: naked, [$style.active]: active, [$style.isStacked]: isStacked, [$style.draghover]: draghover, [$style.dragging]: dragging, [$style.dropready]: dropready }]"
|
||||
:class="[$style.root, { [$style.paged]: isMainColumn, [$style.naked]: naked, [$style.active]: active, [$style.draghover]: draghover, [$style.dragging]: dragging, [$style.dropready]: dropready }]"
|
||||
@dragover.prevent.stop="onDragover"
|
||||
@dragleave="onDragleave"
|
||||
@drop.prevent.stop="onDrop"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div :class="$style.root">
|
||||
<XWidgets :class="$style.widgets" :edit="editMode" :widgets="widgets" @addWidget="addWidget" @removeWidget="removeWidget" @updateWidget="updateWidget" @updateWidgets="updateWidgets" @exit="editMode = false"/>
|
||||
<div>
|
||||
<XWidgets :edit="editMode" :widgets="widgets" @addWidget="addWidget" @removeWidget="removeWidget" @updateWidget="updateWidget" @updateWidgets="updateWidgets" @exit="editMode = false"/>
|
||||
|
||||
<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
|
||||
<button v-else class="_textButton" data-cy-widget-edit :class="$style.edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ i18n.ts.editWidgets }}</button>
|
||||
@@ -70,9 +70,6 @@ function updateWidgets(thisWidgets) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
}
|
||||
|
||||
.edit {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user