s.esmaeili
f441ca8289
Applies to both user-app and user-app-v2. Logic and structure are shared; each app keeps its own look. Appearance settings - New "تنظیمات ظاهری" page (/settings/appearance), opened from the dashboard and available without login. It offers a light/dark/system theme and a "fast & light" motion switch. - appearanceStore saves the choice to localStorage. A small inline boot script in index.html applies it before first paint so there is no white flash. The "system" option follows OS changes live. - New ToggleSwitch component. Dark mode - Theme LESS tokens now compile to CSS custom properties. Light/dark values come from a generated virtual:palette.css (themeConfig/ appearance.ts, with colors.json + new colors.dark.json). - New LESS alpha() plugin replaces fade() on theme tokens. - New semantic tokens: page, onInk, heroSurface, hairlineStrong, photoMat, photoStage. - The dark palette is layered (page < card < panel < border) so surfaces separate without shadows. - Hard-coded colors were replaced by tokens according to their role. - antd inputs/text get dark overrides; vant uses its own .van-theme-dark. - Light mode looks the same as before. Reduced motion - With html.motion-reduced, transitions are capped at 120ms, keyframe loops stop, and backdrop blurs and permanent will-change are dropped. - Spinners and the toast progress bar (which closes the toast) are exempt via .keep-motion. - Carousel autoplay, the v1 Lottie and the product morph honor the setting. Product detail - Opening a product is now a container-transform morph from the tapped card (ProductMorph). It replaces the bottom Drawer and uses composited transform/opacity only. - The detail view is seeded with the card's data, so it no longer opens blank and jumps. Filters and sheets - Filters are now a full-width bottom sheet. Selections stay a draft until applied, so the result list no longer re-renders while dragging the slider. - DropDown collapse animates grid-template-rows instead of a capped max-height. - v2 IslandSheet is restyled to the v2 design language (API unchanged). Fixes - filtersStore.reset() shallow-copied shared arrays, so clearing the filters never cleared the selected brands.
118 lines
2.3 KiB
Vue
118 lines
2.3 KiB
Vue
<!-- Ported from legacy henza_pwa/src/components/spinner.vue -->
|
|
<template>
|
|
<Spin :spinning="spinning" :tip="tip" :size="(size as 'small' | 'default' | 'large')" :delay="delay" :class="fixed ? '!max-h-screen !fixed' : ''">
|
|
<template #indicator>
|
|
<img v-if="!indicator" src="/img/montzar-logo.png" alt="Montzar" class="spinner-brand" width="48" height="48" />
|
|
<!-- keep-motion: a working spinner, exempt from reduced motion. -->
|
|
<div class="loading keep-motion" v-else>
|
|
<div class="effect-1 effects"></div>
|
|
<div class="effect-2 effects"></div>
|
|
<div class="effect-3 effects"></div>
|
|
</div>
|
|
</template>
|
|
<div :class="cls">
|
|
<slot />
|
|
</div>
|
|
</Spin>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Spin } from 'ant-design-vue'
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
tip?: string
|
|
size?: string
|
|
cls?: string
|
|
delay?: number
|
|
spinning: boolean
|
|
indicator?: boolean
|
|
fixed?: boolean
|
|
}>(),
|
|
{ size: 'large', fixed: true },
|
|
)
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.loading * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.loading {
|
|
position: relative;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
border: 3px solid transparent;
|
|
}
|
|
|
|
.loading .effect-1,
|
|
.loading .effect-2 {
|
|
position: absolute;
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 3px solid transparent;
|
|
border-left: 3px solid @secondary;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.loading .effect-1 {
|
|
animation: rotate 1s ease infinite;
|
|
}
|
|
|
|
.loading .effect-2 {
|
|
animation: rotateOpacity 1s ease infinite 0.1s;
|
|
}
|
|
|
|
.loading .effect-3 {
|
|
position: absolute;
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 3px solid transparent;
|
|
border-left: 3px solid @secondary;
|
|
animation: rotateOpacity 1s ease infinite 0.2s;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.loading .effects {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(1turn);
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOpacity {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
opacity: 0.1;
|
|
}
|
|
100% {
|
|
transform: rotate(1turn);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.spinner-brand {
|
|
display: block;
|
|
width: 48px;
|
|
height: 48px;
|
|
object-fit: contain;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.ant-spin-text {
|
|
color: @primary;
|
|
}
|
|
.loading + .ant-spin-text {
|
|
margin-top: 24px;
|
|
}
|
|
</style>
|