From 851eff897ef03e337f8770eee39a37603868b9fe Mon Sep 17 00:00:00 2001
From: Juan de la Cruz <juan.delacruz@kaleidos.net>
Date: Tue, 12 Jan 2016 15:04:51 +0100
Subject: [PATCH] add fill element color-picker

---
 frontend/uxbox/ui/workspace/options.cljs      |   8 ++++--
 resources/public/images/color-bar.png         | Bin 0 -> 256 bytes
 resources/public/images/color-gamma.png       | Bin 0 -> 3306 bytes
 .../styles/partials/element-options.scss      |  23 ++++++++++++++++++
 4 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 resources/public/images/color-bar.png
 create mode 100644 resources/public/images/color-gamma.png

diff --git a/frontend/uxbox/ui/workspace/options.cljs b/frontend/uxbox/ui/workspace/options.cljs
index c61106c14..9194c62e2 100644
--- a/frontend/uxbox/ui/workspace/options.cljs
+++ b/frontend/uxbox/ui/workspace/options.cljs
@@ -64,6 +64,12 @@
       [:div.element-set-content
        ;; SLIDEBAR FOR ROTATION AND OPACITY
        [:span "Color"]
+       [:div.element-color-picker
+        [:div.color-picker-body
+          [:img {:src "images/color-gamma.png", :border "none"}]]
+        [:div.color-picker-bar
+          [:div.color-bar-select]
+          [:img {:src "images/color-bar.png", :border "none"}]]]
        [:div.row-flex
         [:input#width.input-text
          {:placeholder "#"
@@ -184,5 +190,3 @@
    {:render element-opts-render
     :name "element-opts"
     :mixins [rum/reactive (mx/local {})]}))
-
-
diff --git a/resources/public/images/color-bar.png b/resources/public/images/color-bar.png
new file mode 100644
index 0000000000000000000000000000000000000000..70dad5429f1c1ebf23373bedc19d1adce365386a
GIT binary patch
literal 256
zcmeAS@N?(olHy`uVBq!ia0vp^{6Kt$g9%6~pU7heQk(@Ik;M!Q+`=Ht$S`Y;1W=H@
z#M9T6{Q)BnFF)6z&5kR8Li0Uc978hhy`ApJ#carP<XA$+zyDGCmOJ8KI4~Qop3^$9
z$guC4yZ!ztp6i=8zc*Ys$;)TOo_$79w-;=`WuPgkKfk$zcdoDMe_z$9%sx)n@(QL+
z@zvjZu*FMj<&h`<PF=`rfA@CA3Y}k;9@j72oDtxuI`#VOmf{qRxvEbudFLAd&C@cJ
z43IoGabZCp&(h78rkwNI{8GwFT3Bo4l27(u#3#Qm`pp#0w*%-@22WQ%mvv4FO#qXE
BVch@#

literal 0
HcmV?d00001

diff --git a/resources/public/images/color-gamma.png b/resources/public/images/color-gamma.png
new file mode 100644
index 0000000000000000000000000000000000000000..f0132e1fe8ffeb9f6c505c321fe84663850a101d
GIT binary patch
literal 3306
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

literal 0
HcmV?d00001

diff --git a/resources/public/styles/partials/element-options.scss b/resources/public/styles/partials/element-options.scss
index 24a7ce051..5eb453c77 100644
--- a/resources/public/styles/partials/element-options.scss
+++ b/resources/public/styles/partials/element-options.scss
@@ -204,3 +204,26 @@
     }
   }
 }
+
+.element-color-picker {
+  align-items: center;
+  display: flex;
+  height: 160px;
+  margin: 0 4px;
+  .color-picker-body {
+    height: 100%;
+    margin-right: 15px;
+  }
+  .color-picker-bar {
+    height: 100%;
+    padding: relative;
+    width: 15px;
+    .color-bar-select {
+      background-color: $color-white;
+      height: 3px;
+      position: absolute;
+      width: 15px;
+      top: 30%;
+    }
+  }
+}