From ab1e5732d7f669bb530d9490fe0f6508a6c0a2d4 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 4 Oct 2018 15:47:14 -0400
Subject: [PATCH] UX: Category colorpicker restyle

---
 app/assets/images/chosen-sprite.png           | Bin 716 -> 0 bytes
 .../components/edit-category-general.hbs      |  14 ++-
 .../stylesheets/common/base/colorpicker.scss  |  50 ++++++---
 .../stylesheets/common/base/discourse.scss    |  46 +++++++++
 app/assets/stylesheets/common/base/modal.scss |   1 +
 app/assets/stylesheets/desktop/discourse.scss |  95 ------------------
 6 files changed, 91 insertions(+), 115 deletions(-)
 delete mode 100644 app/assets/images/chosen-sprite.png

diff --git a/app/assets/images/chosen-sprite.png b/app/assets/images/chosen-sprite.png
deleted file mode 100644
index ea5f706b20b18d755ce5d28b9430364f1da0a9dc..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 716
zcmV;-0yF)IP)<h;3K|Lk000e1NJLTq002Ay001Zm1^@s6qPv;@0007$Nkl<Zc-rll
zO=}ZT6o$u8sf$vZHYJpTMnv2we$kzq7I9O=g(y`Jp;|%eSF0NfN}x#TqI6Lj`jND?
zUAUI~0(Y)-?K=Bxl0_gS@jc`nI9w8&nM`VWodXYZ=L~Z*Pwu(*GUGU5gmGMA20RD-
zDmMsb!DHKGBVZ0B!5d18>^yU`HjZ#q3Ci(3+pmpLw@%s>72et`D-kn<rOZ#;EIY5}
zv2I%@trxAAEaRxk9r>bl3XFI7H>SBY^%-;e1$gwg8!v%RY944lf^!}p<Ro~)`)_q?
ziHtRnl|SLKk5YSR^mDUYrN@m29rMx0WRps{(yh{yZIt3f6Ir)fE(ZLpD_|82soV%i
zfkiJRdG(mA(mNmv(v%k2J?2t2?!$2<xC{2#-ZDnrI_U$73K^SaB}UcAW?AOLHp{vt
zy{+158>RK4wZSrutDKdK)-t!Is4=J4xDAF8Mi^m)5k?31U3r6B0PElb&m*?Vz5`R>
zEa(9Vp3ilqbTXMd(Z=n!Dc2~bc>VCG)oLqX6%47|2uOj&pk&MC^0jKU`lC{*O#AHO
zvs3>h+bCkZeyD5&?0_sti!^2Tm`epH`xE{B7K+8<ppS0WS;mc`hu2#g;kXjq1^aAo
z=}~VbN~O{nh`q|?a=l9Sx|YQVKmBJTY)BtaRLFRh&FAxd5c@7tIA%l|vNzEF6@aY7
zU2w0-wfnr@vhb)H*(}T4)4QYyLhhR@hxS)P_F0=VqnF#!1E>Do%HdJYm%s%tvTjLl
zt9II}bfHif(9!|Q>bZKyseb|8<WbJgQ##>g(c0jm6<0aWi<T)3*_k8S^%AX0FLP^(
y8gqIL_<Dh+^p`fapw3EL7Or&cf07<B6Mq1loy!C0`zrGQ0000<MNUMnLSTYbMp+R6

diff --git a/app/assets/javascripts/discourse/templates/components/edit-category-general.hbs b/app/assets/javascripts/discourse/templates/components/edit-category-general.hbs
index 2e498f77c3f..96c88d76a2e 100644
--- a/app/assets/javascripts/discourse/templates/components/edit-category-general.hbs
+++ b/app/assets/javascripts/discourse/templates/components/edit-category-general.hbs
@@ -44,15 +44,19 @@
 
         <div class='input-prepend input-append' style="margin-top: 10px;">
           <span class='color-title'>{{i18n 'category.background_color'}}:</span>
-          <span class='add-on'>#</span>{{text-field value=category.color placeholderKey="category.color_placeholder" maxlength="6"}}
-          {{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=category.color}}
+          <div class="colorpicker-wrapper">
+            <span class='add-on'>#</span>{{text-field value=category.color placeholderKey="category.color_placeholder" maxlength="6"}}
+            {{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=category.color}}
+          </div>
         </div>
 
         <div class='input-prepend input-append'>
           <span class='color-title'>{{i18n 'category.foreground_color'}}:</span>
-          <span class='add-on'>#</span>{{text-field value=category.text_color placeholderKey="category.color_placeholder" maxlength="6"}}
-          {{color-picker colors=foregroundColors value=category.text_color id='edit-text-color'}}
-        </div>
+          <div class="colorpicker-wrapper">
+            <span class='add-on'>#</span>{{text-field value=category.text_color placeholderKey="category.color_placeholder" maxlength="6"}}
+            {{color-picker colors=foregroundColors value=category.text_color id='edit-text-color'}}
+          </div>
+        </div>        
       </div>
     </section>
   {{/unless}}
diff --git a/app/assets/stylesheets/common/base/colorpicker.scss b/app/assets/stylesheets/common/base/colorpicker.scss
index 76771e6873c..788111d5743 100644
--- a/app/assets/stylesheets/common/base/colorpicker.scss
+++ b/app/assets/stylesheets/common/base/colorpicker.scss
@@ -2,29 +2,49 @@
 
 .category-color-editor {
   input {
-    width: 70px;
-    margin-right: 10px;
+    width: 5.5em;
+    margin-right: 1em;
   }
 
   .color-title {
-    display: inline-block;
-    width: 120px;
+    display: block;
+    margin: 1em 0 0.25em;
+  }
+
+  .colorpicker-wrapper {
+    display: flex;
+    align-items: center;
+    input,
+    .add-on {
+      align-self: flex-start;
+      margin-bottom: 0.125em;
+    }
   }
 
   .colors-container {
-    display: inline-block;
-    vertical-align: middle;
-    padding-top: 4px;
-    max-width: 240px;
+    display: inline-flex;
+    flex-wrap: wrap;
 
     .colorpicker {
-      border: 1px solid $primary-low;
-      margin-right: 2px;
-      width: 16px;
-      height: 16px;
-      font-size: 0.286em;
-      &.used-color {
-        background: image-url("chosen-sprite.png") -19px 13px;
+      position: relative;
+      margin: 0 0.125em 0.25em;
+      border: 1px solid $primary-medium;
+      width: 1.25em;
+      height: 1.2em;
+      padding: 0;
+      flex: 0 0 auto;
+      &.used-color:before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: fontawesome;
+        content: "\f00c";
+        height: 100%;
+        width: calc(1.25em - 2px);
+        color: rgba($secondary, 0.75);
       }
     }
   }
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 9e7b68b84cb..f49a959d000 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -211,6 +211,52 @@ input {
   }
 }
 
+.input {
+  &-prepend,
+  &-append {
+    margin-bottom: 5px;
+    input[class*="span"] {
+      display: inline-block;
+    }
+    input,
+    select {
+      position: relative;
+      margin-bottom: 0;
+      vertical-align: middle;
+      border-radius: 0;
+      &:focus {
+        z-index: z("base") + 1;
+      }
+    }
+    .add-on {
+      display: inline-flex;
+      align-items: center;
+      width: auto;
+      padding: 0 0.5em;
+      height: 28px;
+      background-color: $primary-low;
+      border: 1px solid $primary-medium;
+    }
+    .add-on,
+    .btn {
+      &:first-child {
+        margin-right: -1px;
+      }
+      &:last-child {
+        margin-left: -1px;
+        border-radius: 0 3px 3px 0;
+      }
+    }
+  }
+
+  &-prepend {
+    .add-on,
+    .btn {
+      margin-right: -1px;
+    }
+  }
+}
+
 textarea {
   height: auto;
   background-color: $secondary;
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index a0c884c7667..1831f6f054c 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -103,6 +103,7 @@
   background-color: $secondary;
   background-clip: padding-box;
   box-shadow: shadow("modal");
+  padding: 1px;
 
   @media screen and (min-width: 475px) {
     min-width: 475px;
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index e116ad76703..df19506ad8e 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -124,101 +124,6 @@ input {
   &-xxlarge {
     width: 530px;
   }
-
-  &-prepend,
-  &-append {
-    margin-bottom: 5px;
-
-    input[class*="span"] {
-      display: inline-block;
-    }
-
-    input,
-    select {
-      position: relative;
-      margin-bottom: 0;
-      vertical-align: middle;
-
-      &:focus {
-        z-index: z("base") + 1;
-      }
-    }
-
-    .add-on {
-      display: inline-block;
-      width: auto;
-      height: 18px;
-      min-width: 16px;
-      padding: 4px 5px;
-      font-weight: normal;
-      line-height: $line-height-medium;
-      text-align: center;
-      vertical-align: middle;
-      background-color: $secondary;
-      border: 1px solid $primary-low;
-    }
-
-    .add-on,
-    .btn {
-      margin-left: -1px;
-      border-radius: 0;
-    }
-
-    .active {
-      background-color: $danger-medium;
-      border-color: $danger;
-    }
-  }
-
-  &-prepend {
-    .add-on,
-    .btn {
-      margin-right: -1px;
-
-      &:first-child {
-        border-radius: 3px 0 0 3px;
-      }
-    }
-  }
-
-  &-append {
-    input,
-    select {
-      border-radius: 3px 0 0 3px;
-    }
-
-    .add-on,
-    .btn {
-      &:last-child {
-        border-radius: 0 3px 3px 0;
-      }
-    }
-  }
-}
-
-.input-prepend.input-append {
-  input,
-  select {
-    border-radius: 0;
-    background-color: $primary-low;
-    border-color: $primary-low;
-  }
-
-  .add-on,
-  .btn {
-    &:first-child {
-      margin-right: -1px;
-      border-radius: 3px 0 0 3px;
-    }
-  }
-
-  .add-on,
-  .btn {
-    &:last-child {
-      margin-left: -1px;
-      border-radius: 0 3px 3px 0;
-    }
-  }
 }
 
 .controls-dropdown {