Merge branch 'theme-edit-color-fields' into 'develop'

HTML5  <input type="color"> for theme editing

See merge request pleroma/pleroma-fe!172

1 files changed, 53 insertions, 26 deletions

diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index f92f7299..31bf546d 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -7,20 +7,24 @@
     <p>{{$t('settings.theme_help')}}</p>
     <div class="color-container">
       <div class="color-item">
-        <label for="bgcolor" class="base04">{{$t('settings.background')}}</label>
-        <input id="bgcolor" class="theme-color-in" type="text" v-model="bgColorLocal">
+        <label for="bgcolor" class="base04 theme-color-lb">{{$t('settings.background')}}</label>
+        <input id="bgcolor" class="theme-color-cl" type="color" v-model="bgColorLocal">
+        <input id="bgcolor-t" class="theme-color-in" type="text" v-model="bgColorLocal">
       </div>
       <div class="color-item">
-        <label for="fgcolor" class="base04">{{$t('settings.foreground')}}</label>
-        <input id="fgcolor" class="theme-color-in" type="text" v-model="fgColorLocal">
+        <label for="fgcolor" class="base04 theme-color-lb">{{$t('settings.foreground')}}</label>
+        <input id="fgcolor" class="theme-color-cl" type="color" v-model="fgColorLocal">
+        <input id="fgcolor-t" class="theme-color-in" type="text" v-model="fgColorLocal">
       </div>
       <div class="color-item">
-        <label for="textcolor" class="base04">{{$t('settings.text')}}</label>
-        <input id="textcolor" class="theme-color-in" type="text" v-model="textColorLocal">
+        <label for="textcolor" class="base04 theme-color-lb">{{$t('settings.text')}}</label>
+        <input id="textcolor" class="theme-color-cl" type="color" v-model="textColorLocal">
+        <input id="textcolor-t" class="theme-color-in" type="text" v-model="textColorLocal">
       </div>
       <div class="color-item">
-        <label for="linkcolor" class="base04">{{$t('settings.links')}}</label>
-        <input id="linkcolor" class="theme-color-in" type="text" v-model="linkColorLocal">
+        <label for="linkcolor" class="base04 theme-color-lb">{{$t('settings.links')}}</label>
+        <input id="linkcolor" class="theme-color-cl" type="color" v-model="linkColorLocal">
+        <input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal">
       </div>
     </div>
     <div>
@@ -43,27 +47,50 @@
 <script src="./style_switcher.js"></script>
 
 <style lang="scss">
- .style-switcher {
-   margin-right: 1em;
- }
+.style-switcher {
+    margin-right: 1em;
+}
 
- .color-container {
-   display: flex;
-   flex-wrap: wrap;
- }
+.color-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
 
- .color-item {
-   max-width: 9em;
-   display:flex;
-   flex-wrap:wrap;
- }
+.color-item {
+    min-width: 20em;
+    display:flex;
+    flex: 1 1 0;
+    align-items: baseline;
+    margin: 5px 6px 5px 0;
+}
+.theme-color-cl,
+.theme-color-in {
+    margin-left: 4px;
+    border-radius: 2px;
+    border: 0;
+}
+
+.theme-color-in {
+    padding: 5px;
+    min-width: 4em;
+    max-width: 7em;
+    flex: 1;
+}
+.theme-color-lb {
+    flex: 2;
+    min-width: 7em;
+    max-width: 10em;
+}
 
- .theme-color-in {
-   max-width: 8em;
-   border-radius: 2px;
-   border: 0;
-   padding: 5px;
-   margin: 5px 0 5px 0;
+.theme-color-cl {
+    padding: 1px;
+    max-width: 8em;
+    align-self: stretch;
+    height: 100%;
+    flex: 0;
+    min-width: 2em;
+    cursor: pointer;
  }
 
  .theme-preview-content {