Merge pull request #206 from status-im/feature/group-colour-picker-#95

Group chat color settings

src/status_im/group_settings/handlers.cljs

@@ -16,15 +16,19 @@
   [db _]
   (assoc db :selected-participants #{}))
 
-(defn save-chat-property!
+(defn save-property!
-  [db-name property-name]
+  [current-chat-id property-name value]
-  (fn [{:keys [current-chat-id] :as db} _]
-    (let [property (db-name db)]
   (r/write :account
            (fn []
              (-> (r/get-by-field :account :chat :chat-id current-chat-id)
                  (r/single)
-                     (aset (name property-name) property)))))))
+                 (aset (name property-name) value)))))
+
+(defn save-chat-property!
+  [db-name property-name]
+  (fn [{:keys [current-chat-id] :as db} _]
+    (let [property (db-name db)]
+      (save-property! current-chat-id property-name property))))
 
 (defn update-chat-property
   [db-name property-name]
@@ -51,8 +55,10 @@
   (update-chat-property :new-chat-name :name))
 
 (register-handler :set-chat-color
-  (after (save-chat-property! :new-chat-color :color))
+  (after (fn [{:keys [current-chat-id]} [_ color]]
-  (update-chat-property :new-chat-color :color))
+           (save-property! current-chat-id :color (name color))))
+  (fn [{:keys [current-chat-id] :as db} [_ color]]
+    (assoc-in db [:chats current-chat-id :color] color)))
 
 (defn clear-messages
   [{:keys [current-chat-id] :as db} _]

src/status_im/group_settings/screen.cljs

@@ -17,7 +17,7 @@
             [status-im.group-settings.styles.group-settings :as st]
             [status-im.group-settings.views.member :refer [member-view]]
             [status-im.i18n :refer [label]]
-            [status-im.components.styles :as cst]))
+            [status-im.group-settings.views.color-settings :refer [color-settings]]))
 
 (defn remove-member []
   (dispatch [:remove-participants]))
@@ -59,33 +59,6 @@
        [text {:style st/setting-subtitle}
         subtitle])]]])
 
-(defn close-chat-color-picker []
-  (dispatch [:group-settings :show-color-picker false]))
-
-(defn set-chat-color []
-  (close-chat-color-picker)
-  (dispatch [:set-chat-color]))
-
-;; TODO not in design
-(defview chat-color-picker []
-  [show-color-picker [:group-settings :show-color-picker]
-   new-color [:get :new-chat-color]]
-  [modal {:animated       false
-          :transparent    false
-          :onRequestClose close-chat-color-picker}
-   [touchable-highlight {:style    st/modal-container
-                         :on-press close-chat-color-picker}
-    [view st/modal-color-picker-inner-container
-     [picker {:selectedValue new-color
-              :onValueChange #(dispatch [:set :new-chat-color %])}
-      [picker-item {:label (label :t/blue) :value "#7099e6"}]
-      [picker-item {:label (label :t/purple) :value "#a187d5"}]
-      [picker-item {:label (label :t/green) :value "green"}]
-      [picker-item {:label (label :t/red) :value "red"}]]
-     [touchable-highlight {:on-press set-chat-color}
-      [text {:style st/modal-color-picker-save-btn-text}
-       (label :t/save)]]]]])
-
 (defview chat-color-icon []
   [chat-color [:chat :color]]
   [view {:style (st/chat-color-icon chat-color)}])
@@ -172,8 +145,7 @@
    (when (pos? (count validation-messages))
      [text {:style st/chat-name-validation-message} (first validation-messages)])])
 
-(defview group-settings [{platform-specific :platform-specific}]
+(defn group-settings [{platform-specific :platform-specific}]
-  [show-color-picker [:group-settings :show-color-picker]]
   [view st/group-settings
    [new-group-toolbar platform-specific]
    [scroll-view st/body
@@ -189,6 +161,5 @@
     [text {:style st/settings-text}
      (label :t/settings)]
     [settings-view]]
-   (when show-color-picker
+   [color-settings]
-     [chat-color-picker])
    [member-menu]])

src/status_im/group_settings/styles/color_settings.cljs

@@ -0,0 +1,78 @@
+(ns status-im.group-settings.styles.color-settings)
+
+(def color-highlight
+  {:flex 0.25})
+
+(def color-icon-comtainer
+  {:justify-content :center
+   :align-items     :center})
+
+(defn color-item [color]
+  {:width            70
+   :height           70
+   :border-radius    70
+   :background-color color
+   :justify-content  :center
+   :align-items      :center})
+
+(def icon-ok
+  {:width  17.5
+   :height 13.5})
+
+(def container-height 225)
+
+(def label-container-top-margin 16)
+(def label-container-bottom-margin 8)
+(def font-size 16)
+
+(def color-settings-container
+  {:position         :absolute
+   :right            0
+   :left             0
+   :bottom           0
+   :height           container-height
+   :background-color :white
+   :border-top-color :#0000001f
+   :border-top-width 1
+   :align-items      :stretch})
+
+(def label-container
+  {:margin-top    label-container-top-margin
+   :align-items   :center
+   :margin-bottom 8})
+
+(def label
+  {:font-size 16
+   :color     :black})
+
+(def close-highlight
+  {:position :absolute
+   :bottom   (- container-height 15
+                label-container-top-margin
+                label-container-bottom-margin)
+   :right    18})
+
+(def close-container-size 24)
+(def close-settings-container
+  {:width           close-container-size
+   :height          close-container-size
+   :justify-content :center
+   :align-items     :center})
+
+(def close-icon
+  {:width  12
+   :height 12})
+
+(def all-colors-container
+  {:flex-direction :column
+   :align-items    :stretch
+   :height         (- container-height
+                      label-container-top-margin
+                      font-size
+                      close-container-size)})
+
+(def color-container
+  {:flex            0.5
+   :flex-direction  :row
+   :align-items     :center
+   :justify-content :center})

src/status_im/group_settings/views/color_settings.cljs

@@ -0,0 +1,48 @@
+(ns status-im.group-settings.views.color-settings
+  (:require-macros [status-im.utils.views :refer [defview]])
+  (:require [re-frame.core :refer [dispatch]]
+            [status-im.components.react :refer [view
+                                                text
+                                                icon
+                                                touchable-highlight]]
+            [status-im.i18n :refer [label]]
+            [status-im.group-settings.styles.color-settings :as st]))
+
+(defn close-chat-color-picker []
+  (dispatch [:group-settings :show-color-picker false]))
+
+(def all-colors
+  (->> [:#a187d5 :#7099e6 :#424874 :#96c0b7
+        :#d3b99f :#eb6464 :#6d98ba :#c17767]
+       (partition 4)
+       (map-indexed vector)))
+
+(defn color-icon [current-color color]
+  (let [selected-color? (= (keyword current-color) color)]
+    [touchable-highlight
+     {:on-press #(dispatch [:set-chat-color color])
+      :style    st/color-highlight}
+     [view st/color-icon-comtainer
+      [view (st/color-item color)
+       (when selected-color?
+         [icon :ok st/icon-ok])]]]))
+
+(defview color-settings []
+  [show-color-picker [:group-settings :show-color-picker]
+   current-color [:chat :color]]
+  (when show-color-picker
+    [view st/color-settings-container
+     [view st/label-container
+      [text st/label (label :t/change-color)]]
+     [touchable-highlight
+      {:on-press close-chat-color-picker
+       :style st/close-highlight}
+      [view st/close-settings-container
+       [icon :close_gray st/close-icon]]]
+     [view st/all-colors-container
+      (for [[idx colors] all-colors]
+        ^{:key idx}
+        [view st/color-container
+         (for [color (take-last 4 colors)]
+           ^{:key color}
+           [color-icon current-color color])])]]))