From 9f7af191e8a77a0c5620c8698cc7b26dde02868b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Jan 2020 22:19:19 +0200
Subject: tabs & toggled (ex pressed) buttons

---
 src/components/follow_button/follow_button.vue     |  2 +-
 .../moderation_tools/moderation_tools.vue          |  2 +-
 src/components/style_switcher/style_switcher.vue   | 23 ++++++++++++++++++++++
 src/components/tab_switcher/tab_switcher.scss      |  7 +++++++
 src/components/user_card/user_card.vue             | 10 ++--------
 5 files changed, 34 insertions(+), 10 deletions(-)

(limited to 'src/components')

diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index f0cbb94b..bfdc137b 100644
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     class="btn btn-default follow-button"
-    :class="{ pressed: isPressed }"
+    :class="{ toggled: isPressed }"
     :disabled="inProgress"
     :title="title"
     @click="onClick"
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 006d6373..e78e05f1 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -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>
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 3921c953..2fca5570 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -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
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 3e5eacd5..df585faa 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -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 {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 93d55fff..e286ceea 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -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);
-      }
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2