From c6d4c20982261b55b16dda59c3e657eb1feb0041 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Mar 2021 16:11:44 +0200
Subject: Made Select component to make using styled selects easier

---
 src/components/font_control/font_control.vue | 32 ++++++++++------------------
 1 file changed, 11 insertions(+), 21 deletions(-)

(limited to 'src/components/font_control/font_control.vue')

diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index dd117ec0..996ff92c 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -22,30 +22,20 @@
       class="opt-l"
       :for="name + '-o'"
     />
-    <label
-      :for="name + '-font-switcher'"
-      class="select"
+    <Select
+      :id="name + '-font-switcher'"
+      v-model="preset"
       :disabled="!present"
+      class="font-switcher"
     >
-      <select
-        :id="name + '-font-switcher'"
-        v-model="preset"
-        :disabled="!present"
-        class="font-switcher"
+      <option
+        v-for="option in availableOptions"
+        :key="option"
+        :value="option"
       >
-        <option
-          v-for="option in availableOptions"
-          :key="option"
-          :value="option"
-        >
-          {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
-        </option>
-      </select>
-      <FAIcon
-        class="select-down-icon"
-        icon="chevron-down"
-      />
-    </label>
+        {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
+      </option>
+    </Select>
     <input
       v-if="isCustom"
       :id="name"
-- 
cgit v1.2.3-70-g09d2


From 3870a30aeaeb9ed89e69610f2fc4ca6838fb1558 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Mar 2021 16:31:15 +0200
Subject: cleanup, fixes

---
 src/App.scss                                     | 13 -------------
 src/components/font_control/font_control.vue     |  3 ++-
 src/components/poll/poll_form.vue                |  9 +++++++--
 src/components/select/select.vue                 | 24 +++++++++++++++---------
 src/components/shadow_control/shadow_control.vue | 14 +++++++-------
 src/components/user_card/user_card.vue           | 10 ++--------
 6 files changed, 33 insertions(+), 40 deletions(-)

(limited to 'src/components/font_control/font_control.vue')

diff --git a/src/App.scss b/src/App.scss
index 77f2ea79..a537baed 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -222,19 +222,6 @@ input, textarea, .input {
     opacity: 0.5;
   }
 
-  .select-down-icon {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 5px;
-    height: 100%;
-    color: $fallback--text;
-    color: var(--inputText, $fallback--text);
-    line-height: 28px;
-    z-index: 0;
-    pointer-events: none;
-  }
-
   &[type=range] {
     background: none;
     border: none;
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 996ff92c..29605084 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -55,7 +55,8 @@
     min-width: 10em;
   }
   &.custom {
-    .select {
+    /* TODO Should make proper joiners... */
+    .font-switcher {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index f2459e45..ecbfdf41 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -47,7 +47,8 @@
         :title="$t('polls.type')"
       >
         <Select
-          kind="ghost"
+          class="poll-type-select"
+          unstyled="true"
           v-model="pollType"
           @change="updatePollToParent"
         >
@@ -69,7 +70,7 @@
         >
         <Select
           v-model="expiryUnit"
-          kind="ghost"
+          unstyled="true"
           class="expiry-unit"
           @change="expiryAmountChange"
         >
@@ -134,6 +135,10 @@
   .poll-type {
     margin-right: 0.75em;
     flex: 1 1 60%;
+
+    .poll-type-select {
+      padding-right: 0.75em;
+    }
   }
 
   .poll-expiry {
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 55474e1a..5ade1fa6 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -2,7 +2,7 @@
 <template>
   <label
     class="Select input"
-    :class="[ kindClass, { disabled } ]"
+    :class="{ disabled, unstyled }"
   >
     <select
       :disabled="disabled"
@@ -26,14 +26,6 @@
 .Select {
   padding: 0;
 
-  /* Overriding input styles, probably should make proper Input component? */
-  &.-kind_ghost {
-    border: none;
-    box-shadow: none;
-    background-color: transparent;
-    padding-right: 0.75em;
-  }
-
   select {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -52,5 +44,19 @@
     height: 28px;
     line-height: 16px;
   }
+
+  .select-down-icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 5px;
+    height: 100%;
+    color: $fallback--text;
+    color: var(--inputText, $fallback--text);
+    line-height: 28px;
+    z-index: 0;
+    pointer-events: none;
+  }
+
 }
 </style>
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 6b5acbdb..511e07f3 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -306,20 +306,20 @@
 
     .id-control {
       align-items: stretch;
-      .select, .btn {
+
+      .shadow-switcher {
+        flex: 1;
+      }
+
+      .shadow-switcher, .btn {
         min-width: 1px;
         margin-right: 5px;
       }
+
       .btn {
         padding: 0 .4em;
         margin: 0 .1em;
       }
-      .select {
-        flex: 1;
-        select {
-          align-self: initial;
-        }
-      }
     }
   }
 }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index c5b73fde..75c08f47 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -532,15 +532,11 @@
         flex: 1 0 auto;
       }
 
-      .userHighlightSel,
-      .userHighlightSel.select {
+      .userHighlightSel {
         padding-top: 0;
         padding-bottom: 0;
         flex: 1 0 auto;
       }
-      .userHighlightSel.select svg {
-        line-height: 22px;
-      }
 
       .userHighlightText {
         width: 70px;
@@ -549,9 +545,7 @@
 
       .userHighlightCl,
       .userHighlightText,
-      .userHighlightSel,
-      .userHighlightSel.select {
-        height: 22px;
+      .userHighlightSel {
         vertical-align: top;
         margin-right: .5em;
         margin-bottom: .25em;
-- 
cgit v1.2.3-70-g09d2