status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Group chat color settings
This commit is contained in:
adrian-tiberius 2016-08-27 15:08:56 +03:00 committed by GitHub
parent 995622307f 406e0f4357
commit 5413197a73
4 changed files with 146 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/status_im/group_settings/handlers.cljs
View File

@ -16,15 +16,19 @@
[db _]
(assoc db :selected-participants #{}))
(defn save-chat-property!
[db-name property-name]
(fn [{:keys [current-chat-id] :as db} _]
(let [property (db-name db)]
(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) 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))
(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} _]

35
src/status_im/group_settings/screen.cljs
View File

@ -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}]
[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
@ -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]])

78
src/status_im/group_settings/styles/color_settings.cljs Normal file
View File

@ -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})

48
src/status_im/group_settings/views/color_settings.cljs Normal file
View File

@ -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])])]]))