mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
Merge branch 'master' into update-frontend-packages-2024-05-12
This commit is contained in:
Hannes Heine
GitHub
commit
56cc8479d3
@ -1,11 +1,41 @@
|
||||
// eslint-disable-next-line import/no-unassigned-import
|
||||
import 'vuetify/styles'
|
||||
import { I18n, useI18n } from 'vue-i18n'
|
||||
import { createVuetify } from 'vuetify'
|
||||
import { createVuetify, ThemeDefinition } from 'vuetify'
|
||||
import { mdi } from 'vuetify/iconsets/mdi-svg'
|
||||
import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
|
||||
|
||||
import { aliases, set } from '#assets/icons'
|
||||
import tokens from '#assets/sass/tokens.module.scss'
|
||||
|
||||
const lightTheme: ThemeDefinition = {
|
||||
dark: false,
|
||||
colors: {
|
||||
background: tokens.backgroundColorBase,
|
||||
surface: tokens.backgroundColorSoft,
|
||||
primary: tokens.colorPrimary,
|
||||
secondary: tokens.colorSecondary,
|
||||
success: tokens.colorSuccess,
|
||||
info: tokens.colorInfo,
|
||||
warning: tokens.colorWarning,
|
||||
error: tokens.colorError,
|
||||
},
|
||||
variables: {
|
||||
'border-color': '#000000',
|
||||
},
|
||||
}
|
||||
|
||||
const darkTheme: ThemeDefinition = {
|
||||
dark: true,
|
||||
colors: {
|
||||
...lightTheme.colors,
|
||||
background: tokens.backgroundColorInverse,
|
||||
surface: tokens.backgroundColorInverseSoft,
|
||||
},
|
||||
variables: {
|
||||
'border-color': '#000000',
|
||||
},
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export default (i18n: I18n<any, NonNullable<unknown>, NonNullable<unknown>, string, false>) =>
|
||||
@ -22,4 +52,11 @@ export default (i18n: I18n<any, NonNullable<unknown>, NonNullable<unknown>, stri
|
||||
mdi,
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
defaultTheme: 'light',
|
||||
themes: {
|
||||
light: lightTheme,
|
||||
dark: darkTheme,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
469
frontend/src/assets/sass/tokens.module.scss
Normal file
469
frontend/src/assets/sass/tokens.module.scss
Normal file
@ -0,0 +1,469 @@
|
||||
/* stylelint-disable color-function-notation */
|
||||
|
||||
/**
|
||||
* @tokens Color Brand
|
||||
* @presenter Color
|
||||
*/
|
||||
|
||||
$color-primary: rgb(23, 181, 63);
|
||||
$color-primary-light: rgb(96, 214, 98);
|
||||
$color-primary-dark: rgb(25, 122, 49);
|
||||
$color-primary-active: rgb(25, 194, 67);
|
||||
$color-primary-inverse: rgb(241, 253, 244);
|
||||
$color-secondary: rgb(0, 142, 230);
|
||||
$color-secondary-active: rgb(10, 161, 255);
|
||||
$color-secondary-inverse: rgb(240, 249, 255);
|
||||
$color-success: rgb(23, 181, 63);
|
||||
$color-success-active: rgb(26, 203, 71);
|
||||
$color-success-inverse: rgb(241, 253, 244);
|
||||
$color-danger: rgb(219, 57, 36);
|
||||
$color-danger-light: rgb(242, 97, 65);
|
||||
$color-danger-dark: rgb(158, 43, 28);
|
||||
$color-danger-active: rgb(224, 81, 62);
|
||||
$color-danger-inverse: rgb(253, 243, 242);
|
||||
$color-warning: rgb(230, 121, 25);
|
||||
$color-warning-active: rgb(233, 137, 53);
|
||||
$color-warning-inverse: rgb(253, 247, 241);
|
||||
$color-yellow: rgb(245, 196, 0);
|
||||
$color-yellow-active: rgb(255, 206, 10);
|
||||
$color-yellow-inverse: rgb(255, 252, 240);
|
||||
|
||||
/**
|
||||
* @tokens Color Neutral
|
||||
* @presenter Color
|
||||
*/
|
||||
|
||||
$color-neutral-0: rgb(25, 23, 28);
|
||||
$color-neutral-10: rgb(40, 37, 45);
|
||||
$color-neutral-20: rgb(75, 69, 84);
|
||||
$color-neutral-30: rgb(100, 92, 112);
|
||||
$color-neutral-40: rgb(112, 103, 126);
|
||||
$color-neutral-50: rgb(151, 143, 163);
|
||||
$color-neutral-60: rgb(177, 171, 186);
|
||||
$color-neutral-70: rgb(203, 199, 209);
|
||||
$color-neutral-80: rgb(229, 227, 232);
|
||||
$color-neutral-85: rgb(239, 238, 241);
|
||||
$color-neutral-90: rgb(245, 244, 246);
|
||||
$color-neutral-95: rgb(250, 249, 250);
|
||||
$color-neutral-100: rgb(255, 255, 255);
|
||||
|
||||
/**
|
||||
* @tokens Color Text
|
||||
* @presenter Color
|
||||
*/
|
||||
|
||||
$text-color-base: rgb(75, 69, 84);
|
||||
$text-color-soft: rgb(112, 103, 126);
|
||||
$text-color-softer: rgb(177, 171, 186);
|
||||
$text-color-disabled: rgb(177, 171, 186);
|
||||
$text-color-inverse: rgb(250, 249, 250);
|
||||
$text-color-link: rgb(23, 181, 63);
|
||||
$text-color-link-active: rgb(25, 194, 67);
|
||||
$text-color-primary: rgb(23, 181, 63);
|
||||
$text-color-primary-inverse: rgb(241, 253, 244);
|
||||
$text-color-secondary: rgb(0, 142, 230);
|
||||
$text-color-secondary-inverse: rgb(240, 249, 255);
|
||||
$text-color-success: rgb(23, 181, 63);
|
||||
$text-color-success-inverse: rgb(241, 253, 244);
|
||||
$text-color-warning: rgb(230, 121, 25);
|
||||
$text-color-warning-inverse: rgb(253, 247, 241);
|
||||
$text-color-danger: rgb(219, 57, 36);
|
||||
$text-color-danger-inverse: rgb(253, 243, 242);
|
||||
|
||||
/**
|
||||
* @tokens Color Background
|
||||
* @presenter Color
|
||||
*/
|
||||
|
||||
$background-color-base: rgb(255, 255, 255);
|
||||
$background-color-soft: rgb(250, 249, 250);
|
||||
$background-color-softer: rgb(245, 244, 246);
|
||||
$background-color-softer-active: rgb(250, 249, 250);
|
||||
$background-color-softest: rgb(239, 238, 241);
|
||||
$background-color-softest-active: rgb(245, 244, 246);
|
||||
$background-color-inverse: rgb(25, 23, 28);
|
||||
$background-color-inverse-soft: rgb(40, 37, 45);
|
||||
$background-color-inverse-softer: rgb(75, 69, 84);
|
||||
$background-color-inverse-softer-active: rgb(100, 92, 112);
|
||||
$background-color-disabled: rgb(245, 244, 246);
|
||||
$background-color-primary: rgb(23, 181, 63);
|
||||
$background-color-primary-active: rgb(25, 194, 67);
|
||||
$background-color-primary-inverse: rgb(241, 253, 244);
|
||||
$background-color-secondary: rgb(0, 142, 230);
|
||||
$background-color-secondary-active: rgb(10, 161, 255);
|
||||
$background-color-secondary-inverse: rgb(240, 249, 255);
|
||||
$background-color-third: rgb(126, 82, 204);
|
||||
$background-color-third-active: rgb(160, 103, 255);
|
||||
$background-color-third-inverse: rgb(239, 230, 255);
|
||||
$background-color-success: rgb(23, 181, 63);
|
||||
$background-color-success-active: rgb(26, 203, 71);
|
||||
$background-color-success-inverse: rgb(241, 253, 244);
|
||||
$background-color-warning: rgb(230, 121, 25);
|
||||
$background-color-warning-active: rgb(233, 137, 53);
|
||||
$background-color-warning-inverse: rgb(253, 247, 241);
|
||||
$background-color-danger: rgb(219, 57, 36);
|
||||
$background-color-danger-active: rgb(224, 81, 62);
|
||||
$background-color-danger-inverse: rgb(253, 243, 242);
|
||||
|
||||
/**
|
||||
* @tokens Color Border
|
||||
* @presenter Color
|
||||
*/
|
||||
|
||||
$border-color-base: rgb(177, 171, 186);
|
||||
$border-color-soft: rgb(203, 199, 209);
|
||||
$border-color-softer: rgb(229, 227, 232);
|
||||
$border-color-softest: rgb(245, 244, 246);
|
||||
$border-color-active: rgb(23, 181, 63);
|
||||
$border-color-primary: rgb(23, 181, 63);
|
||||
$border-color-success: rgb(23, 181, 63);
|
||||
$border-color-warning: rgb(230, 121, 25);
|
||||
$border-color-danger: rgb(219, 57, 36);
|
||||
|
||||
/**
|
||||
* @tokens Border Size
|
||||
* @presenter Border
|
||||
*/
|
||||
|
||||
$border-size-base: 1px;
|
||||
$border-size-large: 3px;
|
||||
$border-size-x-large: 6px;
|
||||
|
||||
/**
|
||||
* @tokens Border Radius
|
||||
* @presenter BorderRadius
|
||||
*/
|
||||
|
||||
$border-radius-x-large: 5px;
|
||||
$border-radius-large: 4px;
|
||||
$border-radius-base: 4px;
|
||||
$border-radius-small: 2px;
|
||||
$border-radius-rounded: 2em;
|
||||
$border-radius-circle: 50%;
|
||||
|
||||
/**
|
||||
* @tokens Font Size
|
||||
* @presenter FontSize
|
||||
*/
|
||||
|
||||
$font-size-xxxx-large: 3rem;
|
||||
$font-size-xxx-large: 2.5rem;
|
||||
$font-size-xx-large: 2rem;
|
||||
$font-size-x-large: 1.5rem;
|
||||
$font-size-large: 1.25rem;
|
||||
$font-size-base: 1rem;
|
||||
$font-size-body: 15px;
|
||||
$font-size-small: 0.8rem;
|
||||
$font-size-x-small: 0.7rem;
|
||||
$font-size-xx-small: 0.6rem;
|
||||
|
||||
/**
|
||||
* @tokens Font Space
|
||||
* @presenter Spacing
|
||||
*/
|
||||
|
||||
$font-space-xxxx-large: 2em;
|
||||
$font-space-xxx-large: 1.5em;
|
||||
$font-space-xx-large: 1.2em;
|
||||
$font-space-x-large: 1em;
|
||||
$font-space-large: 0.6em;
|
||||
$font-space-base: 0.5em;
|
||||
$font-space-small: 0.4em;
|
||||
$font-space-x-small: 0.3em;
|
||||
$font-space-xx-small: 0.2em;
|
||||
$font-space-xxx-small: 0.1em;
|
||||
|
||||
/**
|
||||
* @tokens Font Family
|
||||
* @presenter FontFamily
|
||||
*/
|
||||
|
||||
$font-family-heading: 'LatoWeb', sans-serif;
|
||||
$font-family-text: 'LatoWeb', sans-serif;
|
||||
$font-family-serif: 'Gentium Basic', serif;
|
||||
$font-family-code: inconsolata, monospace;
|
||||
|
||||
/**
|
||||
* @tokens Font Weight
|
||||
* @presenter FontWeight
|
||||
*/
|
||||
|
||||
$font-weight-regular: normal;
|
||||
$font-weight-bold: 600;
|
||||
|
||||
/**
|
||||
* @tokens Line Height
|
||||
* @presenter LineHeight
|
||||
*/
|
||||
|
||||
$line-height-large: 1.5rem;
|
||||
$line-height-base: 1.3rem;
|
||||
$line-height-small: 1.1rem;
|
||||
$line-height-smaller: 1.0rem;
|
||||
|
||||
/**
|
||||
* @tokens Letter Spacing
|
||||
* @presenter Spacing
|
||||
*/
|
||||
|
||||
$letter-spacing-x-large: 0.1em;
|
||||
$letter-spacing-large: 0.05em;
|
||||
$letter-spacing-base: 0;
|
||||
$letter-spacing-small: -0.01em;
|
||||
$letter-spacing-x-small: -0.015em;
|
||||
|
||||
/**
|
||||
* @tokens Opacity
|
||||
* @presenter Opacity
|
||||
*/
|
||||
|
||||
$opacity-base: 1;
|
||||
$opacity-soft: 0.7;
|
||||
$opacity-disabled: 0.5;
|
||||
|
||||
/**
|
||||
* @tokens Space
|
||||
* @presenter Spacing
|
||||
*/
|
||||
|
||||
$space-xxx-large: 128px;
|
||||
$space-xx-large: 64px;
|
||||
$space-x-large: 48px;
|
||||
$space-large: 32px;
|
||||
$space-base: 24px;
|
||||
$space-small: 16px;
|
||||
$space-x-small: 8px;
|
||||
$space-xx-small: 4px;
|
||||
$space-xxx-small: 2px;
|
||||
$space-none: 0;
|
||||
|
||||
/**
|
||||
* @tokens Size Height
|
||||
* @presenter Spacing
|
||||
*/
|
||||
|
||||
$size-height-base: 42px;
|
||||
$size-height-large: 50px;
|
||||
$size-height-xlarge: 60px;
|
||||
$size-height-footer: 64px;
|
||||
$size-height-connections: 315px;
|
||||
$size-tappable-square: 44px;
|
||||
$size-ribbon: 6px;
|
||||
|
||||
/**
|
||||
* @tokens Size Width
|
||||
* @presenter Spacing
|
||||
*/
|
||||
|
||||
$size-width-filter-sidebar: 85px;
|
||||
$size-width-paginate: 200px;
|
||||
$size-max-width-filter-menu: 1026px;
|
||||
|
||||
/**
|
||||
* @tokens Size Avatar
|
||||
* @presenter Spacing
|
||||
*/
|
||||
|
||||
$size-avatar-small: 34px;
|
||||
$size-avatar-base: 44px;
|
||||
$size-avatar-large: 114px;
|
||||
|
||||
/**
|
||||
* @tokens Size Buttons
|
||||
* @presenter Spacing
|
||||
*/
|
||||
|
||||
$size-button-large: 50px;
|
||||
$size-button-base: 36px;
|
||||
$size-button-small: 26px;
|
||||
|
||||
/**
|
||||
* @tokens Size Images
|
||||
* @presenter Spacing
|
||||
*/
|
||||
|
||||
$size-image-max-height: 2000px;
|
||||
$size-image-cropper-max-height: 600px;
|
||||
$size-image-cropper-min-height: 400px;
|
||||
$size-image-uploader-min-height: 250px;
|
||||
|
||||
/**
|
||||
* @tokens Size Icons
|
||||
* @presenter Spacing
|
||||
*/
|
||||
|
||||
$size-icon-base: 16px;
|
||||
$size-icon-large: 60px;
|
||||
|
||||
/**
|
||||
* @tokens Shadow
|
||||
* @presenter Shadow
|
||||
*/
|
||||
|
||||
$box-shadow-x-large: 0 15px 30px 0 rgba(0, 0, 0, 11%), 0 5px 15px 0 rgba(0, 0, 0, 8%);
|
||||
$box-shadow-large: 0 10px 20px 0 rgba(0, 0, 0, 11%), 0 3px 10px 0 rgba(0, 0, 0, 8%);
|
||||
$box-shadow-base: 0 12px 26px -4px rgba(0, 0, 0, 10%);
|
||||
$box-shadow-small: 0 8px 18px -2px rgba(0, 0, 0, 10%);
|
||||
$box-shadow-x-small: 0 0 3px 0 rgba(0, 0, 0, 10%);
|
||||
$box-shadow-active: 0 0 6px 1px rgba(20, 100, 160, 50%);
|
||||
$box-shadow-inset: inset 0 0 20px 1px rgba(0, 0, 0, 15%);
|
||||
$box-shadow-small-inset: inset 0 0 0 1px rgba(0, 0, 0, 5%);
|
||||
|
||||
/**
|
||||
* @tokens Effects
|
||||
*/
|
||||
|
||||
$blur-radius: 22px;
|
||||
|
||||
/**
|
||||
* @tokens Animation Duration
|
||||
*/
|
||||
|
||||
$duration-short: 0.08s;
|
||||
$duration-base: 0.5s;
|
||||
$duration-long: 0.75s;
|
||||
$duration-x-long: 1s;
|
||||
$duration-xx-long: 2s;
|
||||
|
||||
/**
|
||||
* @tokens Animation Ease
|
||||
* @presenter Easing
|
||||
*/
|
||||
|
||||
$ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
$ease-out-sharp: cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
$ease-out-bounce: cubic-bezier(.87, -.41, .19, 1.44);
|
||||
$ease-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
|
||||
$ease-in-sharp: cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
|
||||
/**
|
||||
* @tokens Z-Index
|
||||
*/
|
||||
|
||||
$z-index-modal: 9999;
|
||||
$z-index-overlay: 9000;
|
||||
$z-index-dropdown: 8888;
|
||||
$z-index-page-submenu: 2500;
|
||||
$z-index-page-header: 2000;
|
||||
$z-index-page-sidebar: 1500;
|
||||
$z-index-sticky-float: 150;
|
||||
$z-index-sticky: 100;
|
||||
$z-index-post-teaser-link: 5;
|
||||
$z-index-surface: 1;
|
||||
|
||||
/**
|
||||
* @tokens Media Query
|
||||
*/
|
||||
|
||||
$media-query-x-small: (
|
||||
min-width: 480px
|
||||
);
|
||||
$media-query-small: (
|
||||
min-width: 600px
|
||||
);
|
||||
$media-query-medium: (
|
||||
min-width: 768px
|
||||
);
|
||||
$media-query-large: (
|
||||
min-width: 1024px
|
||||
);
|
||||
$media-query-x-large: (
|
||||
min-width: 1200px
|
||||
);
|
||||
|
||||
/**
|
||||
* @tokens Background Images
|
||||
*/
|
||||
|
||||
/**
|
||||
* @tokens Header Color
|
||||
*/
|
||||
|
||||
$color-header-background: $color-neutral-100;
|
||||
|
||||
/**
|
||||
* @tokens Footer Color
|
||||
*/
|
||||
|
||||
$color-footer-background: $color-neutral-100;
|
||||
$color-footer-link: $color-primary;
|
||||
|
||||
/**
|
||||
* @tokens Locale Menu Color
|
||||
*/
|
||||
|
||||
$color-locale-menu: $text-color-soft;
|
||||
|
||||
/**
|
||||
* @tokens Donation Bar Color
|
||||
*/
|
||||
|
||||
$color-donation-bar: $color-primary;
|
||||
$color-donation-bar-light: $color-primary-light;
|
||||
|
||||
/**
|
||||
* @tokens Toast Color
|
||||
*/
|
||||
|
||||
$color-toast-red: $color-danger;
|
||||
$color-toast-orange: $color-warning;
|
||||
$color-toast-yellow: $color-yellow;
|
||||
$color-toast-blue: $color-secondary;
|
||||
$color-toast-green: $color-success;
|
||||
|
||||
/**
|
||||
* @tokens Ribbon Color
|
||||
*/
|
||||
|
||||
$color-ribbon-event: $background-color-third;
|
||||
$color-ribbon-event-active: $background-color-third-active;
|
||||
$color-ribbon-article: $background-color-secondary;
|
||||
$color-ribbon-article-active: $background-color-secondary-active;
|
||||
|
||||
/**
|
||||
* @tokens Chat Color
|
||||
*/
|
||||
|
||||
$chat-message-bg-me: $color-primary-light;
|
||||
$chat-message-color: $text-color-base;
|
||||
$chat-message-bg-others: $color-neutral-80;
|
||||
$chat-sidemenu-bg: $color-secondary-active;
|
||||
$chat-new-message-color: $color-secondary-active;
|
||||
$chat-message-timestamp: $text-color-soft;
|
||||
$chat-message-checkmark-seen: $text-color-secondary;
|
||||
$chat-message-checkmark: $text-color-soft;
|
||||
$chat-room-color-counter-badge: $text-color-inverse;
|
||||
$chat-room-background-counter-badge: $color-secondary;
|
||||
|
||||
:export {
|
||||
colorPrimary: $color-primary;
|
||||
colorSecondary: $color-secondary;
|
||||
colorPrimaryActive: $color-primary-active;
|
||||
colorPrimaryLight: $color-primary-light;
|
||||
colorSuccess: $color-success;
|
||||
colorInfo: $color-secondary;
|
||||
colorWarning: $color-warning;
|
||||
colorError: $color-danger;
|
||||
backgroundColorBase: $background-color-base;
|
||||
backgroundColorSoft: $background-color-soft;
|
||||
backgroundColorSoftest: $background-color-softest;
|
||||
backgroundColorPrimary: $background-color-primary;
|
||||
backgroundColorInverse: $background-color-inverse;
|
||||
backgroundColorInverseSoft: $background-color-inverse-soft;
|
||||
borderColorSoft: $border-color-soft;
|
||||
borderRadiusBase: $border-radius-base;
|
||||
textColorBase: $text-color-base;
|
||||
textColorSoft: $text-color-soft;
|
||||
textColorInverse: $text-color-inverse;
|
||||
boxShadowBase: $box-shadow-base;
|
||||
colorNeutral30: $color-neutral-30;
|
||||
chatMessageColor: $chat-message-color;
|
||||
chatMessageBgMe: $chat-message-bg-me;
|
||||
chatMessageBgOthers: $chat-message-bg-others;
|
||||
chatNewMessageColor: $chat-new-message-color;
|
||||
chatMessageTimestamp: $chat-message-timestamp;
|
||||
chatMessageCheckmarkSeen: $chat-message-checkmark-seen;
|
||||
chatMessageCheckmark: $chat-message-checkmark;
|
||||
chatRoomBackgroundCounterBadge: $chat-room-background-counter-badge;
|
||||
chatRoomColorCounterBadge: $chat-room-color-counter-badge;
|
||||
}
|
||||
@ -164,6 +164,36 @@ exports[`PageShell > renders 1`] = `
|
||||
<!---->
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="v-col d-flex align-center justify-center grow"
|
||||
>
|
||||
<button
|
||||
class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text"
|
||||
type="button"
|
||||
>
|
||||
|
||||
<span
|
||||
class="v-btn__overlay"
|
||||
/>
|
||||
<span
|
||||
class="v-btn__underlay"
|
||||
/>
|
||||
|
||||
<!---->
|
||||
<span
|
||||
class="v-btn__content"
|
||||
data-no-activator=""
|
||||
>
|
||||
|
||||
|
||||
$t('menu.theme.switchToDark')
|
||||
|
||||
|
||||
</span>
|
||||
<!---->
|
||||
<!---->
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="v-col"
|
||||
>
|
||||
@ -195,10 +225,10 @@ exports[`PageShell > renders 1`] = `
|
||||
|
||||
|
||||
<input
|
||||
aria-describedby="switch-4-messages"
|
||||
aria-describedby="switch-5-messages"
|
||||
aria-disabled="false"
|
||||
aria-label="$t('language.german')"
|
||||
id="switch-4"
|
||||
id="switch-5"
|
||||
type="checkbox"
|
||||
value="true"
|
||||
/>
|
||||
@ -220,7 +250,7 @@ exports[`PageShell > renders 1`] = `
|
||||
</div>
|
||||
<label
|
||||
class="v-label v-label--clickable"
|
||||
for="switch-4"
|
||||
for="switch-5"
|
||||
>
|
||||
<!---->
|
||||
|
||||
@ -239,7 +269,7 @@ exports[`PageShell > renders 1`] = `
|
||||
aria-live="polite"
|
||||
class="v-messages"
|
||||
css="true"
|
||||
id="switch-4-messages"
|
||||
id="switch-5-messages"
|
||||
name="slide-y-transition"
|
||||
persisted="false"
|
||||
role="alert"
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
<!-- eslint-disable prettier/prettier -->
|
||||
<template>
|
||||
<v-app-bar flat>
|
||||
<v-row>
|
||||
@ -9,6 +10,13 @@
|
||||
<VikeBtn href="/app">{{ $t('menu.app') }}</VikeBtn>
|
||||
<VikeBtn href="/about">{{ $t('menu.about') }}</VikeBtn>
|
||||
</v-col>
|
||||
<v-col class="d-flex align-center justify-center grow">
|
||||
<v-btn @click="toggleTheme">{{
|
||||
theme.global.current.value.dark
|
||||
? $t('menu.theme.switchToLight')
|
||||
: $t('menu.theme.switchToDark')
|
||||
}}</v-btn>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-switch
|
||||
v-model="isEnabled"
|
||||
@ -24,12 +32,17 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { useLocale } from 'vuetify'
|
||||
import { useLocale, useTheme } from 'vuetify'
|
||||
|
||||
import VikeBtn from '#components/VikeBtn.vue'
|
||||
|
||||
import LogoAvatar from './LogoAvatar.vue'
|
||||
|
||||
const theme = useTheme()
|
||||
function toggleTheme() {
|
||||
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
|
||||
}
|
||||
|
||||
const { current: locale } = useLocale()
|
||||
const isEnabled = ref(locale.value === 'de')
|
||||
const onChange = () => {
|
||||
|
||||
@ -164,6 +164,36 @@ exports[`TopMenu > renders 1`] = `
|
||||
<!---->
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="v-col d-flex align-center justify-center grow"
|
||||
>
|
||||
<button
|
||||
class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text"
|
||||
type="button"
|
||||
>
|
||||
|
||||
<span
|
||||
class="v-btn__overlay"
|
||||
/>
|
||||
<span
|
||||
class="v-btn__underlay"
|
||||
/>
|
||||
|
||||
<!---->
|
||||
<span
|
||||
class="v-btn__content"
|
||||
data-no-activator=""
|
||||
>
|
||||
|
||||
|
||||
$t('menu.theme.switchToDark')
|
||||
|
||||
|
||||
</span>
|
||||
<!---->
|
||||
<!---->
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="v-col"
|
||||
>
|
||||
@ -195,10 +225,10 @@ exports[`TopMenu > renders 1`] = `
|
||||
|
||||
|
||||
<input
|
||||
aria-describedby="switch-4-messages"
|
||||
aria-describedby="switch-5-messages"
|
||||
aria-disabled="false"
|
||||
aria-label="$t('language.german')"
|
||||
id="switch-4"
|
||||
id="switch-5"
|
||||
type="checkbox"
|
||||
value="true"
|
||||
/>
|
||||
@ -220,7 +250,7 @@ exports[`TopMenu > renders 1`] = `
|
||||
</div>
|
||||
<label
|
||||
class="v-label v-label--clickable"
|
||||
for="switch-4"
|
||||
for="switch-5"
|
||||
>
|
||||
<!---->
|
||||
|
||||
@ -239,7 +269,7 @@ exports[`TopMenu > renders 1`] = `
|
||||
aria-live="polite"
|
||||
class="v-messages"
|
||||
css="true"
|
||||
id="switch-4-messages"
|
||||
id="switch-5-messages"
|
||||
name="slide-y-transition"
|
||||
persisted="false"
|
||||
role="alert"
|
||||
|
||||
@ -48,6 +48,10 @@
|
||||
"menu": {
|
||||
"about": "Über",
|
||||
"app": "Anwendung",
|
||||
"home": "Daheim"
|
||||
"home": "Daheim",
|
||||
"theme": {
|
||||
"switchToDark": "Dunkel",
|
||||
"switchToLight": "Hell"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,6 +48,10 @@
|
||||
"menu": {
|
||||
"about": "About",
|
||||
"app": "App",
|
||||
"home": "Home"
|
||||
"home": "Home",
|
||||
"theme": {
|
||||
"switchToDark": "Dark",
|
||||
"switchToLight": "Light"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<br />
|
||||
<p>{{ $t('home.text3') }}</p>
|
||||
<br />
|
||||
<p>{{ $t('home.text4') }} <v-icon icon="$heart" color="red" /></p>
|
||||
<p>{{ $t('home.text4') }} <v-icon icon="$heart" color="error" /></p>
|
||||
<br />
|
||||
<p>{{ $t('home.greet1') }}</p>
|
||||
<p>{{ $t('home.greet2') }}</p>
|
||||
|
||||
@ -46,7 +46,7 @@ exports[`IndexPage > renders 1`] = `
|
||||
$t('home.text4')
|
||||
<i
|
||||
aria-hidden="true"
|
||||
class="v-icon notranslate v-theme--light v-icon--size-default text-red"
|
||||
class="v-icon notranslate v-theme--light v-icon--size-default text-error"
|
||||
>
|
||||
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
|
||||
@ -6,6 +6,7 @@ export default mergeConfig(
|
||||
viteConfig,
|
||||
defineConfig({
|
||||
test: {
|
||||
css: true,
|
||||
globals: true,
|
||||
environment: 'happy-dom',
|
||||
setupFiles: [
|
||||
@ -28,7 +29,7 @@ export default mergeConfig(
|
||||
thresholds: {
|
||||
lines: 84,
|
||||
// functions: 20, // has problems see https://github.com/vitest-dev/vitest/issues/3607
|
||||
branches: 92,
|
||||
branches: 89,
|
||||
statements: 84,
|
||||
},
|
||||
},
|
||||
|
||||
@ -101,7 +101,7 @@
|
||||
"eslint-plugin-prettier": "^5.1.3",
|
||||
"eslint-plugin-promise": "~4.3.1",
|
||||
"eslint-plugin-standard": "~5.0.0",
|
||||
"eslint-plugin-vue": "~9.25.0",
|
||||
"eslint-plugin-vue": "~9.26.0",
|
||||
"flush-promises": "^1.0.2",
|
||||
"identity-obj-proxy": "^3.0.0",
|
||||
"jest": "29.7",
|
||||
|
||||
@ -9031,10 +9031,10 @@ eslint-plugin-standard@~5.0.0:
|
||||
resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-5.0.0.tgz#c43f6925d669f177db46f095ea30be95476b1ee4"
|
||||
integrity sha512-eSIXPc9wBM4BrniMzJRBm2uoVuXz2EPa+NXPk2+itrVt+r5SbKFERx/IgrK/HmfjddyKVz2f+j+7gBRvu19xLg==
|
||||
|
||||
eslint-plugin-vue@~9.25.0:
|
||||
version "9.25.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.25.0.tgz#615cb7bb6d0e2140d21840b9aa51dce69e803e7a"
|
||||
integrity sha512-tDWlx14bVe6Bs+Nnh3IGrD+hb11kf2nukfm6jLsmJIhmiRQ1SUaksvwY9U5MvPB0pcrg0QK0xapQkfITs3RKOA==
|
||||
eslint-plugin-vue@~9.26.0:
|
||||
version "9.26.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.26.0.tgz#bf7f5cce62c8f878059b91edae44d22974133af5"
|
||||
integrity sha512-eTvlxXgd4ijE1cdur850G6KalZqk65k1JKoOI2d1kT3hr8sPD07j1q98FRFdNnpxBELGPWxZmInxeHGF/GxtqQ==
|
||||
dependencies:
|
||||
"@eslint-community/eslint-utils" "^4.4.0"
|
||||
globals "^13.24.0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user