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/select/select.vue | 67 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 src/components/select/select.vue

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

diff --git a/src/components/select/select.vue b/src/components/select/select.vue
new file mode 100644
index 00000000..a27a2541
--- /dev/null
+++ b/src/components/select/select.vue
@@ -0,0 +1,67 @@
+
+<template>
+  <label
+    class="Select input"
+    :class="{ disabled }"
+  >
+    <select
+      :disabled="disabled"
+      :value="value"
+      @change="$emit('change', $event.target.value)"
+    >
+      <slot />
+    </select>
+    <FAIcon
+      class="select-down-icon"
+      icon="chevron-down"
+    />
+  </label>
+</template>
+
+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
+export default {
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: [
+    'value',
+    'disabled'
+  ]
+}
+</script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.Select {
+  padding: 0;
+
+  select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: transparent;
+    border: none;
+    color: $fallback--text;
+    color: var(--inputText, --text, $fallback--text);
+    margin: 0;
+    padding: 0 2em 0 .2em;
+    font-family: sans-serif;
+    font-family: var(--inputFont, sans-serif);
+    font-size: 14px;
+    width: 100%;
+    z-index: 1;
+    height: 28px;
+    line-height: 16px;
+  }
+}
+</style>
-- 
cgit v1.2.3-70-g09d2


From 5d3bf43fdc83efb0294229df63201877032a85ff Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Mar 2021 16:19:11 +0200
Subject: ghost styles for poll form

---
 src/components/poll/poll_form.vue | 14 ++------------
 src/components/select/select.js   | 21 +++++++++++++++++++++
 src/components/select/select.vue  | 31 ++++++++++---------------------
 3 files changed, 33 insertions(+), 33 deletions(-)
 create mode 100644 src/components/select/select.js

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

diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index f10d1550..f2459e45 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -47,6 +47,7 @@
         :title="$t('polls.type')"
       >
         <Select
+          kind="ghost"
           v-model="pollType"
           @change="updatePollToParent"
         >
@@ -68,6 +69,7 @@
         >
         <Select
           v-model="expiryUnit"
+          kind="ghost"
           class="expiry-unit"
           @change="expiryAmountChange"
         >
@@ -132,12 +134,6 @@
   .poll-type {
     margin-right: 0.75em;
     flex: 1 1 60%;
-    .select {
-      border: none;
-      box-shadow: none;
-      background-color: transparent;
-      padding-right: 0.75em;
-    }
   }
 
   .poll-expiry {
@@ -147,12 +143,6 @@
       width: 3em;
       text-align: right;
     }
-
-    .expiry-unit {
-      border: none;
-      box-shadow: none;
-      background-color: transparent;
-    }
   }
 }
 </style>
diff --git a/src/components/select/select.js b/src/components/select/select.js
new file mode 100644
index 00000000..49535d07
--- /dev/null
+++ b/src/components/select/select.js
@@ -0,0 +1,21 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
+
+export default {
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: [
+    'value',
+    'disabled',
+    'unstyled',
+    'kind'
+  ]
+}
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index a27a2541..55474e1a 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -2,7 +2,7 @@
 <template>
   <label
     class="Select input"
-    :class="{ disabled }"
+    :class="[ kindClass, { disabled } ]"
   >
     <select
       :disabled="disabled"
@@ -18,26 +18,7 @@
   </label>
 </template>
 
-<script>
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
-export default {
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  props: [
-    'value',
-    'disabled'
-  ]
-}
-</script>
+<script src="./select.js"> </script>
 
 <style lang="scss">
 @import '../../_variables.scss';
@@ -45,6 +26,14 @@ export default {
 .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;
-- 
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/select/select.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