tabs & toggled (ex pressed) buttons

This commit is contained in:
Henry Jameson 2020-01-13 22:19:19 +02:00
parent 4b8e0f0afa
commit 9f7af191e8
7 changed files with 90 additions and 15 deletions

View file

@ -113,11 +113,11 @@ button {
background-color: var(--btnDisabled, $fallback--fg)
}
&.pressed {
color: $fallback--faint;
color: var(--faint, $fallback--faint);
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg)
&.toggled {
color: $fallback--text;
color: var(--btnToggledText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnToggled, $fallback--fg)
}
&.danger {
@ -385,6 +385,13 @@ i[class*=icon-] {
color: $fallback--text;
color: var(--btnTopBarDisabledText, $fallback--text);
}
&.toggled {
color: $fallback--text;
color: var(--btnTopBarToggledText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnTopBarToggled, $fallback--fg)
}
}
@ -565,6 +572,11 @@ main-router {
color: $fallback--text;
color: var(--btnPanelDisabledText, $fallback--text);
}
&.toggled {
color: $fallback--text;
color: var(--btnPanelToggledText, $fallback--text);
}
}
a {

View file

@ -1,7 +1,7 @@
<template>
<button
class="btn btn-default follow-button"
:class="{ pressed: isPressed }"
:class="{ toggled: isPressed }"
:disabled="inProgress"
:title="title"
@click="onClick"

View file

@ -123,7 +123,7 @@
</div>
<button
class="btn btn-default btn-block"
:class="{ pressed: showDropDown }"
:class="{ toggled: showDropDown }"
>
{{ $t('user_card.admin_menu.moderation') }}
</button>

View file

@ -376,6 +376,29 @@
/>
<ContrastRatio :contrast="previewContrast.btnDisabledText" />
</div>
<div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4>
<ColorInput
v-model="tabColorLocal"
name="tabColor"
:fallback="previewTheme.colors.tab"
:label="$t('settings.background')"
/>
<ColorInput
v-model="tabTextColorLocal"
name="tabTextColor"
:fallback="previewTheme.colors.tabText"
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.tabText" />
<ColorInput
v-model="tabActiveTextColorLocal"
name="tabActiveTextColor"
:fallback="previewTheme.colors.tabActiveText"
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.tabActiveText" />
</div>
<div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
<ColorInput

View file

@ -52,6 +52,11 @@
margin-bottom: 6px - 99px;
white-space: nowrap;
color: $fallback--text;
color: var(--tabText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--tab, $fallback--fg);
&:not(.active) {
z-index: 4;
@ -63,6 +68,8 @@
&.active {
background: transparent;
z-index: 5;
color: $fallback--text;
color: var(--tabActiveText, $fallback--text);
}
img {

View file

@ -151,7 +151,7 @@
</ProgressButton>
<ProgressButton
v-else
class="btn btn-default pressed"
class="btn btn-default toggled"
:click="unsubscribeUser"
:title="$t('user_card.unsubscribe')"
>
@ -162,7 +162,7 @@
<div>
<button
v-if="user.muted"
class="btn btn-default btn-block pressed"
class="btn btn-default btn-block toggled"
@click="unmuteUser"
>
{{ $t('user_card.muted') }}
@ -538,12 +538,6 @@
button {
margin: 0;
&.pressed {
// TODO: This should be themed.
border-bottom-color: rgba(255, 255, 255, 0.2);
border-top-color: rgba(0, 0, 0, 0.2);
}
}
}
}

View file

@ -219,6 +219,19 @@ export const SLOT_INHERITANCE = {
textColor: 'preserve'
},
// Tabs
tab: '--btn',
tabText: {
depends: ['btnText'],
layer: 'btn',
textColor: true
},
tabActiveText: {
depends: ['text'],
layer: 'bg',
textColor: true
},
// Buttons
btn: '--fg',
btnText: {
@ -239,6 +252,7 @@ export const SLOT_INHERITANCE = {
textColor: true
},
// Buttons: pressed
btnPressed: '--btn',
btnPressedText: {
depends: ['btnText'],
@ -259,6 +273,31 @@ export const SLOT_INHERITANCE = {
textColor: true
},
// Buttons: toggled
btnToggled: {
depends: ['btn'],
color: (mod, btn) => brightness(mod * 20, btn).rgb
},
btnToggledText: {
depends: ['btnText'],
layer: 'btn',
variant: 'btnToggled',
textColor: true
},
btnToggledPanelText: {
depends: ['btnPanelText'],
layer: 'btnPanel',
variant: 'btnToggled',
textColor: true
},
btnToggledTopBarText: {
depends: ['btnTopBarText'],
layer: 'btnTopBar',
variant: 'btnToggled',
textColor: true
},
// Buttons: disabled
btnDisabled: {
depends: ['btn', 'bg'],
color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg)