fix #95 group chat color settings
This commit is contained in:
parent
e73de0a86d
commit
406e0f4357
|
@ -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} _]
|
||||
|
|
|
@ -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]])
|
||||
|
|
|
@ -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})
|
|
@ -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])])]]))
|
Loading…
Reference in New Issue