update button toggled state, apply it to emoji reactions

This commit is contained in:
Henry Jameson 2020-01-28 22:40:15 +02:00
parent f0c4bb1193
commit 8462853269
6 changed files with 23 additions and 8 deletions

View file

@ -117,7 +117,9 @@ button {
color: $fallback--text; color: $fallback--text;
color: var(--btnToggledText, $fallback--text); color: var(--btnToggledText, $fallback--text);
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--btnToggled, $fallback--fg) background-color: var(--btnToggled, $fallback--fg);
box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
box-shadow: var(--buttonPressedShadow);
} }
&.danger { &.danger {

View file

@ -4,7 +4,7 @@
v-for="(reaction) in emojiReactions" v-for="(reaction) in emojiReactions"
:key="reaction.emoji" :key="reaction.emoji"
class="emoji-reaction btn btn-default" class="emoji-reaction btn btn-default"
:class="{ 'picked-reaction': reactedWith(reaction.emoji) }" :class="{ 'toggled': reactedWith(reaction.emoji) }"
@click="emojiOnClick(reaction.emoji, $event)" @click="emojiOnClick(reaction.emoji, $event)"
> >
<span class="reaction-emoji">{{ reaction.emoji }}</span> <span class="reaction-emoji">{{ reaction.emoji }}</span>
@ -40,10 +40,4 @@
} }
} }
.picked-reaction {
border: 1px solid var(--link, $fallback--link);
margin-left: -1px; // offset the border, can't use inset shadows either
margin-right: calc(0.5em - 1px);
}
</style> </style>

View file

@ -460,6 +460,19 @@
:label="$t('settings.text')" :label="$t('settings.text')"
/> />
<ContrastRatio :contrast="previewContrast.btnDisabledText" /> <ContrastRatio :contrast="previewContrast.btnDisabledText" />
<h4>{{ $t('settings.style.advanced_colors.toggled') }}</h4>
<ColorInput
v-model="btnToggledColorLocal"
name="btnToggledColor"
:fallback="previewTheme.colors.btnToggled"
:label="$t('settings.background')"
/>
<ColorInput
v-model="btnToggledTextColorLocal"
name="btnToggledTextColor"
:fallback="previewTheme.colors.btnToggledText"
:label="$t('settings.text')"
/>
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4> <h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4>

View file

@ -2,6 +2,7 @@
"_pleroma_theme_version": 2, "_pleroma_theme_version": 2,
"name": "Redmond XX SE", "name": "Redmond XX SE",
"source": { "source": {
"themeEngineVersion": 3,
"shadows": { "shadows": {
"panel": [ "panel": [
{ {
@ -276,6 +277,7 @@
"topBar": "#000080", "topBar": "#000080",
"topBarLink": "#ffffff", "topBarLink": "#ffffff",
"btn": "#c0c0c0", "btn": "#c0c0c0",
"btnToggled": "--btn",
"faint": "#3f3f3f", "faint": "#3f3f3f",
"faintLink": "#404080", "faintLink": "#404080",
"border": "#808080", "border": "#808080",

View file

@ -2,6 +2,7 @@
"_pleroma_theme_version": 2, "_pleroma_theme_version": 2,
"name": "Redmond XX", "name": "Redmond XX",
"source": { "source": {
"themeEngineVersion": 3,
"shadows": { "shadows": {
"panel": [ "panel": [
{ {
@ -267,6 +268,7 @@
"topBar": "#000080", "topBar": "#000080",
"topBarLink": "#ffffff", "topBarLink": "#ffffff",
"btn": "#c0c0c0", "btn": "#c0c0c0",
"btnToggled": "--btn",
"faint": "#3f3f3f", "faint": "#3f3f3f",
"faintLink": "#404080", "faintLink": "#404080",
"border": "#808080", "border": "#808080",

View file

@ -2,6 +2,7 @@
"_pleroma_theme_version": 2, "_pleroma_theme_version": 2,
"name": "Redmond XXI", "name": "Redmond XXI",
"source": { "source": {
"themeEngineVersion": 3,
"shadows": { "shadows": {
"panel": [ "panel": [
{ {
@ -249,6 +250,7 @@
"topBar": "#042967", "topBar": "#042967",
"topBarLink": "#ffffff", "topBarLink": "#ffffff",
"btn": "#d6d6ce", "btn": "#d6d6ce",
"btnToggled": "--btn",
"faint": "#3f3f3f", "faint": "#3f3f3f",
"faintLink": "#404080", "faintLink": "#404080",
"border": "#808080", "border": "#808080",