From 7446b859f3c2d016014c83ab4a737742237022fb Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Fri, 26 Aug 2016 15:51:34 +0300 Subject: [PATCH] fix #95 group chat color settings Former-commit-id: 406e0f4357701ca6bd011a3c261e0ffbe7ff1fae --- src/status_im/group_settings/handlers.cljs | 20 +++-- src/status_im/group_settings/screen.cljs | 43 ++-------- .../group_settings/styles/color_settings.cljs | 78 +++++++++++++++++++ .../group_settings/views/color_settings.cljs | 48 ++++++++++++ 4 files changed, 146 insertions(+), 43 deletions(-) create mode 100644 src/status_im/group_settings/styles/color_settings.cljs create mode 100644 src/status_im/group_settings/views/color_settings.cljs diff --git a/src/status_im/group_settings/handlers.cljs b/src/status_im/group_settings/handlers.cljs index a1cf3d9013..dcb8ed141a 100644 --- a/src/status_im/group_settings/handlers.cljs +++ b/src/status_im/group_settings/handlers.cljs @@ -16,15 +16,19 @@ [db _] (assoc db :selected-participants #{})) +(defn save-property! + [current-chat-id property-name value] + (r/write :account + (fn [] + (-> (r/get-by-field :account :chat :chat-id current-chat-id) + (r/single) + (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)] - (r/write :account - (fn [] - (-> (r/get-by-field :account :chat :chat-id current-chat-id) - (r/single) - (aset (name property-name) property))))))) + (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)) - (update-chat-property :new-chat-color :color)) + (after (fn [{:keys [current-chat-id]} [_ 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} _] diff --git a/src/status_im/group_settings/screen.cljs b/src/status_im/group_settings/screen.cljs index 488ba1831c..f8b221ab54 100644 --- a/src/status_im/group_settings/screen.cljs +++ b/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)}]) @@ -125,10 +98,10 @@ ^{:key setting} [setting-view setting])])) (defview chat-icon [] - [chat-id [:chat :chat-id] + [chat-id [:chat :chat-id] group-chat [:chat :group-chat] - name [:chat :name] - color [:chat :color]] + name [:chat :name] + color [:chat :color]] [view st/action [chat-icon-view-action chat-id group-chat name color false]]) @@ -172,15 +145,14 @@ (when (pos? (count validation-messages)) [text {:style st/chat-name-validation-message} (first validation-messages)])]) -(defview group-settings [{platform-specific :platform-specific}] - [show-color-picker [:group-settings :show-color-picker]] +(defn group-settings [{platform-specific :platform-specific}] [view st/group-settings [new-group-toolbar platform-specific] [scroll-view st/body [chat-name] [text {:style st/members-text} (label :t/members-title)] [touchable-highlight {:on-press #(dispatch [:navigate-to :add-participants])} - ;; TODO add participants view is not in design + ;; TODO add participants view is not in design [view st/add-members-container [icon :add-gray st/add-members-icon] [text {:style st/add-members-text} @@ -189,6 +161,5 @@ [text {:style st/settings-text} (label :t/settings)] [settings-view]] - (when show-color-picker - [chat-color-picker]) + [color-settings] [member-menu]]) diff --git a/src/status_im/group_settings/styles/color_settings.cljs b/src/status_im/group_settings/styles/color_settings.cljs new file mode 100644 index 0000000000..1180edfe55 --- /dev/null +++ b/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}) diff --git a/src/status_im/group_settings/views/color_settings.cljs b/src/status_im/group_settings/views/color_settings.cljs new file mode 100644 index 0000000000..7c305f8b87 --- /dev/null +++ b/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])])]]))