darkkirb/akkoma-fe
1
0
Fork 0
Code Pull requests Activity

update button toggled state, apply it to emoji reactions

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.scss
View file

@ -117,7 +117,9 @@ button {
color: $fallback--text;
color: var(--btnToggledText, $fallback--text);
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 {

8
src/components/emoji_reactions/emoji_reactions.vue
View file

@ -4,7 +4,7 @@
v-for="(reaction) in emojiReactions"
:key="reaction.emoji"
class="emoji-reaction btn btn-default"
:class="{ 'picked-reaction': reactedWith(reaction.emoji) }"
:class="{ 'toggled': reactedWith(reaction.emoji) }"
@click="emojiOnClick(reaction.emoji, $event)"
>
<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>

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

@ -460,6 +460,19 @@
:label="$t('settings.text')"
/>
<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 class="color-item">
<h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4>

2
static/themes/redmond-xx-se.json
View file

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

2
static/themes/redmond-xx.json
View file

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

2
static/themes/redmond-xxi.json
View file

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