emma/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

selectedPost and selectedMenu support

Browse source
This commit is contained in:
Henry Jameson 2020-01-13 20:40:16 +02:00
parent 29a0b4a593
commit 8a7f3fc16a
7 changed files with 128 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/emoji_input/emoji_input.vue
View file

@ -157,11 +157,11 @@
&.highlighted { &.highlighted {
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--lightBg, $fallback--fg); background-color: var(--selectedMenu, $fallback--fg);
color: var(--lightBgText, $fallback--text); color: var(--selectedMenuText, $fallback--text);
--faint: var(--lightBgFaintText, $fallback--faint); --faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--lightBgFaintLink, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--icon: var(--lightBgIcon, $fallback--icon); --icon: var(--selectedMenuIcon, $fallback--icon);
} }
} }
} }

20
src/components/nav_panel/nav_panel.vue
View file

@ -100,23 +100,23 @@
&:hover { &:hover {
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--link; color: $fallback--link;
color: var(--lightBgText, $fallback--link); color: var(--selectedMenuText, $fallback--link);
--faint: var(--lightBgFaintText, $fallback--faint); --faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--lightBgFaintLink, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--icon: var(--lightBgIcon, $fallback--icon); --icon: var(--selectedMenuIcon, $fallback--icon);
} }
&.router-link-active { &.router-link-active {
font-weight: bolder; font-weight: bolder;
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--text; color: $fallback--text;
color: var(--lightBgText, $fallback--text); color: var(--selectedMenuText, $fallback--text);
--faint: var(--lightBgFaintText, $fallback--faint); --faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--lightBgFaintLink, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--icon: var(--lightBgIcon, $fallback--icon); --icon: var(--selectedMenuIcon, $fallback--icon);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;

10
src/components/selectable_list/selectable_list.vue
View file

@ -68,11 +68,11 @@
&-item-selected-inner { &-item-selected-inner {
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--selectedMenu, $fallback--lightBg);
color: var(--lightBgText, $fallback--text); color: var(--selectedMenuText, $fallback--text);
--faint: var(--lightBgFaintText, $fallback--faint); --faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--lightBgFaintLink, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--icon: var(--lightBgIcon, $fallback--icon); --icon: var(--selectedMenuIcon, $fallback--icon);
} }
&-header { &-header {

10
src/components/side_drawer/side_drawer.vue
View file

@ -289,12 +289,12 @@
&:hover { &:hover {
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--text; color: $fallback--text;
color: var(--lightBgText, $fallback--text); color: var(--selectedMenuText, $fallback--text);
--faint: var(--lightBgFaintText, $fallback--faint); --faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--lightBgFaintLink, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--icon: var(--lightBgIcon, $fallback--icon); --icon: var(--selectedMenuIcon, $fallback--icon);
} }
} }
} }

10
src/components/status/status.vue
View file

@ -445,12 +445,12 @@ $status-margin: 0.75em;
&_focused { &_focused {
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--selectedPost, $fallback--lightBg);
color: $fallback--text; color: $fallback--text;
color: var(--lightBgText, $fallback--text); color: var(--selectedPostText, $fallback--text);
--faint: var(--lightBgFaintText, $fallback--faint); --faint: var(--selectedPostFaintText, $fallback--faint);
--faintLink: var(--lightBgFaintLink, $fallback--faint); --faintLink: var(--selectedPostFaintLink, $fallback--faint);
--icon: var(--lightBgIcon, $fallback--icon); --icon: var(--selectedPostIcon, $fallback--icon);
} }
.timeline & { .timeline & {

46
src/components/style_switcher/style_switcher.vue
View file

@ -465,6 +465,52 @@
/> />
<ContrastRatio :contrast="previewContrast.lightBgLink" /> <ContrastRatio :contrast="previewContrast.lightBgLink" />
</div> </div>
<div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4>
<ColorInput
v-model="selectedPostColorLocal"
name="selectedPost"
:label="$t('settings.background')"
:fallback="previewTheme.colors.selectedPost"
/>
<ColorInput
v-model="selectedPostTextColorLocal"
name="selectedPostText"
:label="$t('settings.text')"
:fallback="previewTheme.colors.selectedPostText"
/>
<ContrastRatio :contrast="previewContrast.selectedPostText" />
<ColorInput
v-model="selectedPostLinkColorLocal"
name="selectedPostLink"
:label="$t('settings.links')"
:fallback="previewTheme.colors.selectedPostLink"
/>
<ContrastRatio :contrast="previewContrast.selectedPostLink" />
</div>
<div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.selectedMenu') }}</h4>
<ColorInput
v-model="selectedMenuColorLocal"
name="selectedMenu"
:label="$t('settings.background')"
:fallback="previewTheme.colors.selectedMenu"
/>
<ColorInput
v-model="selectedMenuTextColorLocal"
name="selectedMenuText"
:label="$t('settings.text')"
:fallback="previewTheme.colors.selectedMenuText"
/>
<ContrastRatio :contrast="previewContrast.selectedMenuText" />
<ColorInput
v-model="selectedMenuLinkColorLocal"
name="selectedMenuLink"
:label="$t('settings.links')"
:fallback="previewTheme.colors.selectedMenuLink"
/>
<ContrastRatio :contrast="previewContrast.selectedMenuLink" />
</div>
</div> </div>
<div <div

52
src/services/theme_data/theme_data.service.js
View file

@ -98,6 +98,58 @@ export const SLOT_INHERITANCE = {
color: (mod, bg, text) => mixrgb(bg, text) color: (mod, bg, text) => mixrgb(bg, text)
}, },
selectedPost: '--lightBg',
selectedPostFaintText: {
depends: ['lightBgFaintText'],
layer: 'lightBg',
textColor: true
},
selectedPostFaintLink: {
depends: ['lightBgFaintLink'],
layer: 'lightBg',
textColor: 'preserve'
},
selectedPostText: {
depends: ['lightBgText'],
layer: 'lightBg',
textColor: true
},
selectedPostLink: {
depends: ['lightBgLink'],
layer: 'lightBg',
textColor: 'preserve'
},
selectedPostIcon: {
depends: ['selectedPost', 'selectedPostText'],
color: (mod, bg, text) => mixrgb(bg, text)
},
selectedMenu: '--lightBg',
selectedMenuFaintText: {
depends: ['lightBgFaintText'],
layer: 'lightBg',
textColor: true
},
selectedMenuFaintLink: {
depends: ['lightBgFaintLink'],
layer: 'lightBg',
textColor: 'preserve'
},
selectedMenuText: {
depends: ['lightBgText'],
layer: 'lightBg',
textColor: true
},
selectedMenuLink: {
depends: ['lightBgLink'],
layer: 'lightBg',
textColor: 'preserve'
},
selectedMenuIcon: {
depends: ['selectedMenu', 'selectedMenuText'],
color: (mod, bg, text) => mixrgb(bg, text)
},
lightText: { lightText: {
depends: ['text'], depends: ['text'],
color: (mod, text) => brightness(20 * mod, text).rgb color: (mod, text) => brightness(20 * mod, text).rgb