sjw
/
pleroma-fe
mirror of https://git.pleroma.social/sjw/pleroma-fe.git
1
0
Fork 0
Code Issues Releases Wiki Activity

selectedPost and selectedMenu support

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 {
background-color: $fallback--fg;
background-color: var(--lightBg, $fallback--fg);
color: var(--lightBgText, $fallback--text);
--faint: var(--lightBgFaintText, $fallback--faint);
--faintLink: var(--lightBgFaintLink, $fallback--faint);
--icon: var(--lightBgIcon, $fallback--icon);
background-color: var(--selectedMenu, $fallback--fg);
color: var(--selectedMenuText, $fallback--text);
--faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--icon: var(--selectedMenuIcon, $fallback--icon);
}
}
}

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

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

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

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

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

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

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

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

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

@ -465,6 +465,52 @@
/>
<ContrastRatio :contrast="previewContrast.lightBgLink" />
</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

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)
},
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: {
depends: ['text'],
color: (mod, text) => brightness(20 * mod, text).rgb