Chat color
After Width: | Height: | Size: 358 B |
After Width: | Height: | Size: 823 B |
After Width: | Height: | Size: 217 B |
After Width: | Height: | Size: 585 B |
After Width: | Height: | Size: 412 B |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 616 B |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 889 B |
After Width: | Height: | Size: 1.7 KiB |
|
@ -29,6 +29,8 @@
|
|||
(def drawer-layout-android (r/adapt-react-class (.-DrawerLayoutAndroid js/React)))
|
||||
(def touchable-opacity (r/adapt-react-class (.-TouchableOpacity js/React)))
|
||||
(def modal (r/adapt-react-class (.-Modal js/React)))
|
||||
(def picker (r/adapt-react-class (.-Picker js/React)))
|
||||
(def picker-item (r/adapt-react-class (.-Item (.-Picker js/React))))
|
||||
|
||||
|
||||
(defn icon [n style]
|
||||
|
|
|
@ -37,6 +37,8 @@
|
|||
[:chats chat-id :chat-updated-signal])
|
||||
(defn chat-name-path [chat-id]
|
||||
[:chats chat-id :name])
|
||||
(defn chat-color-path [chat-id]
|
||||
[:chats chat-id :color])
|
||||
(defn chat-input-text-path [chat-id]
|
||||
[:chats chat-id :input-text])
|
||||
(defn chat-staged-commands-path [chat-id]
|
||||
|
@ -52,7 +54,8 @@
|
|||
(defn chat-command-request-path [chat-id msg-id]
|
||||
[:chats chat-id :command-requests msg-id])
|
||||
(def show-actions-path [:show-actions])
|
||||
(def group-settings-selected-member-path [:selected-member])
|
||||
(def group-settings-selected-member-path [:group-settings-selected-member])
|
||||
(def group-settings-show-color-picker [:group-settings-show-color-picker])
|
||||
(def new-group-path [:new-group])
|
||||
(def new-participants-path [:new-participants])
|
||||
(def updated-discoveries-signal-path [:discovery-updated-signal])
|
||||
|
|
|
@ -7,6 +7,9 @@
|
|||
image
|
||||
icon
|
||||
modal
|
||||
picker
|
||||
picker-item
|
||||
scroll-view
|
||||
touchable-highlight]]
|
||||
[syng-im.components.toolbar :refer [toolbar]]
|
||||
[syng-im.components.realm :refer [list-view]]
|
||||
|
@ -15,6 +18,7 @@
|
|||
[syng-im.group-settings.styles.group-settings :as st]
|
||||
[syng-im.utils.listview :refer [to-realm-datasource]]
|
||||
[syng-im.group-settings.views.member :refer [member-view]]
|
||||
[syng-im.utils.logging :as log]
|
||||
[reagent.core :as r]))
|
||||
|
||||
(defn remove-member [{:keys [whisper-identity]}]
|
||||
|
@ -44,10 +48,88 @@
|
|||
(defn show-chat-name-edit []
|
||||
(dispatch [:navigate-to :chat-name-edit]))
|
||||
|
||||
(defn chat-icon []
|
||||
(let [chat-name (subscribe [:get-current-chat-name])]
|
||||
(defn setting-view [{:keys [icon-style custom-icon handler title subtitle]
|
||||
icon-name :icon}]
|
||||
[touchable-highlight {:on-press handler}
|
||||
[view st/setting-row
|
||||
[view st/setting-icon-view
|
||||
(or custom-icon
|
||||
[icon icon-name icon-style])]
|
||||
[view st/setting-view
|
||||
[text {:style st/setting-title} title]
|
||||
(when-let [subtitle subtitle]
|
||||
[text {:style st/setting-subtitle}
|
||||
subtitle])]]])
|
||||
|
||||
(defn close-chat-color-picker []
|
||||
(dispatch [:show-group-settings-color-picker false]))
|
||||
|
||||
(defn set-chat-color [color]
|
||||
(close-chat-color-picker)
|
||||
(dispatch [:set-chat-color color]))
|
||||
|
||||
(defn chat-color-picker []
|
||||
(let [show-color-picker (subscribe [:group-settings-show-color-picker])
|
||||
chat-color (subscribe [:get-current-chat-color])
|
||||
selected-color (r/atom @chat-color)]
|
||||
(fn []
|
||||
[view st/chat-icon
|
||||
[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 @selected-color
|
||||
:onValueChange #(reset! selected-color %)}
|
||||
[picker-item {:label "Blue" :value "#7099e6"}]
|
||||
[picker-item {:label "Purple" :value "#a187d5"}]
|
||||
[picker-item {:label "Green" :value "green"}]
|
||||
[picker-item {:label "Red" :value "red"}]]
|
||||
[touchable-highlight {:on-press #(set-chat-color @selected-color)}
|
||||
[text {:style st/modal-color-picker-save-btn-text}
|
||||
"Save"]]]]])))
|
||||
|
||||
(defn chat-color-icon []
|
||||
(let [chat-color (subscribe [:get-current-chat-color])]
|
||||
(fn []
|
||||
[view {:style (st/chat-color-icon @chat-color)}])))
|
||||
|
||||
(defn settings-view []
|
||||
;; TODO implement settings handlers
|
||||
(let [settings [{:custom-icon [chat-color-icon]
|
||||
:title "Change color"
|
||||
:handler #(dispatch [:show-group-settings-color-picker true])}
|
||||
(merge {:title "Notifications and sounds"
|
||||
:subtitle "!not implemented"
|
||||
:handler nil}
|
||||
(if true
|
||||
{:icon :notifications-on
|
||||
:icon-style {:width 16
|
||||
:height 21}}
|
||||
{:icon :muted
|
||||
:icon-style {:width 18
|
||||
:height 21}}))
|
||||
{:icon :close-gray
|
||||
:icon-style {:width 12
|
||||
:height 12}
|
||||
:title "Clear history"
|
||||
:subtitle "!not implemented"
|
||||
:handler nil}
|
||||
{:icon :bin
|
||||
:icon-style {:width 12
|
||||
:height 18}
|
||||
:title "Delete and leave"
|
||||
:subtitle "!not implemented"
|
||||
:handler nil}]]
|
||||
[view st/settings-container
|
||||
(for [setting settings]
|
||||
^{:key setting} [setting-view setting])]))
|
||||
|
||||
(defn chat-icon []
|
||||
(let [chat-name (subscribe [:get-current-chat-name])
|
||||
chat-color (subscribe [:get-current-chat-color])]
|
||||
(fn []
|
||||
[view (st/chat-icon @chat-color)
|
||||
[text {:style st/chat-icon-text} (nth @chat-name 0)]])))
|
||||
|
||||
(defn new-group-toolbar []
|
||||
|
@ -55,31 +137,36 @@
|
|||
:custom-action [chat-icon]}])
|
||||
|
||||
(defn group-settings []
|
||||
(let [chat-name (subscribe [:get-current-chat-name])
|
||||
members (subscribe [:current-chat-contacts])
|
||||
selected-member (subscribe [:selected-group-chat-member])]
|
||||
(let [chat-name (subscribe [:get-current-chat-name])
|
||||
members (subscribe [:current-chat-contacts])
|
||||
selected-member (subscribe [:selected-group-chat-member])
|
||||
show-color-picker (subscribe [:group-settings-show-color-picker])]
|
||||
(fn []
|
||||
[view st/group-settings
|
||||
[new-group-toolbar]
|
||||
[text {:style st/chat-name-text}
|
||||
"Chat name"]
|
||||
[view st/chat-name-value-container
|
||||
[text {:style st/chat-name-value}
|
||||
@chat-name]
|
||||
[touchable-highlight {:style st/chat-name-btn-edit-container
|
||||
:on-press show-chat-name-edit}
|
||||
[text {:style st/chat-name-btn-edit-text}
|
||||
"Edit"]]]
|
||||
[text {:style st/members-text}
|
||||
"Members"]
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(dispatch [:show-add-participants]))}
|
||||
[view st/add-members-container
|
||||
[icon :add-gray st/add-members-icon]
|
||||
[text {:style st/add-members-text}
|
||||
"Add members"]]]
|
||||
[chat-members (vals (js->clj @members :keywordize-keys true))]
|
||||
[text {:style st/settings-text}
|
||||
"Settings"]
|
||||
[scroll-view st/body
|
||||
[text {:style st/chat-name-text}
|
||||
"Chat name"]
|
||||
[view st/chat-name-value-container
|
||||
[text {:style st/chat-name-value}
|
||||
@chat-name]
|
||||
[touchable-highlight {:style st/chat-name-btn-edit-container
|
||||
:on-press show-chat-name-edit}
|
||||
[text {:style st/chat-name-btn-edit-text}
|
||||
"Edit"]]]
|
||||
[text {:style st/members-text}
|
||||
"Members"]
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(dispatch [:show-add-participants]))}
|
||||
[view st/add-members-container
|
||||
[icon :add-gray st/add-members-icon]
|
||||
[text {:style st/add-members-text}
|
||||
"Add members"]]]
|
||||
[chat-members (vals (js->clj @members :keywordize-keys true))]
|
||||
[text {:style st/settings-text}
|
||||
"Settings"]
|
||||
[settings-view]]
|
||||
(when @show-color-picker
|
||||
[chat-color-picker])
|
||||
(when @selected-member
|
||||
[member-menu @selected-member])])))
|
||||
|
|
|
@ -36,15 +36,28 @@
|
|||
:fontSize 14
|
||||
:lineHeight 20})
|
||||
|
||||
(def modal-color-picker-inner-container
|
||||
{:borderRadius 10
|
||||
:padding 5
|
||||
:backgroundColor color-white})
|
||||
|
||||
(def modal-color-picker-save-btn-text
|
||||
{:margin 10
|
||||
:alignSelf :center
|
||||
:color text1-color
|
||||
:fontFamily font
|
||||
:fontSize 14
|
||||
:lineHeight 20})
|
||||
|
||||
(def chat-members-container
|
||||
{:marginBottom 10})
|
||||
|
||||
(def chat-icon
|
||||
(defn chat-icon [color]
|
||||
{:margin 10
|
||||
:width 36
|
||||
:height 36
|
||||
:borderRadius 50
|
||||
:backgroundColor color-purple})
|
||||
:backgroundColor color})
|
||||
|
||||
(def chat-icon-text
|
||||
{:marginTop 7
|
||||
|
@ -59,6 +72,10 @@
|
|||
:flexDirection :column
|
||||
:backgroundColor color-white})
|
||||
|
||||
(def body
|
||||
{:flex 1
|
||||
:flexDirection :column})
|
||||
|
||||
(def chat-name-text
|
||||
{:marginTop 24
|
||||
:marginLeft 16
|
||||
|
@ -129,3 +146,40 @@
|
|||
:fontFamily font-medium
|
||||
:fontSize 14
|
||||
:lineHeight 20})
|
||||
|
||||
(def settings-container
|
||||
{:flexDirection :column})
|
||||
|
||||
(def setting-row
|
||||
{:flexDirection :row
|
||||
:height 56})
|
||||
|
||||
(def setting-icon-view
|
||||
{:width 56
|
||||
:height 56
|
||||
:alignItems :center
|
||||
:justifyContent :center})
|
||||
|
||||
(def setting-view
|
||||
{:flex 1
|
||||
:marginLeft 16
|
||||
:alignItems :flex-start
|
||||
:justifyContent :center})
|
||||
|
||||
(def setting-title
|
||||
{:marginTop -2.5
|
||||
:color text1-color
|
||||
:fontSize 16
|
||||
:fontFamily font})
|
||||
|
||||
(def setting-subtitle
|
||||
{:marginTop 1
|
||||
:color text2-color
|
||||
:fontSize 12
|
||||
:fontFamily font})
|
||||
|
||||
(defn chat-color-icon [color]
|
||||
{:borderRadius 50
|
||||
:width 24
|
||||
:height 24
|
||||
:backgroundColor color})
|
||||
|
|
|
@ -36,6 +36,7 @@
|
|||
[syng-im.models.chats :refer [chat-exists?
|
||||
create-chat
|
||||
set-group-chat-name
|
||||
set-chat-color
|
||||
chat-remove-member
|
||||
chat-add-participants
|
||||
chat-remove-participants
|
||||
|
@ -609,11 +610,21 @@
|
|||
(log/debug action)
|
||||
(set-group-chat-name db chat-name)))
|
||||
|
||||
(register-handler :set-chat-color
|
||||
(fn [db [action color]]
|
||||
(log/debug action)
|
||||
(set-chat-color db color)))
|
||||
|
||||
(register-handler :select-group-chat-member
|
||||
(fn [db [action identity]]
|
||||
(log/debug action)
|
||||
(assoc-in db db/group-settings-selected-member-path identity)))
|
||||
|
||||
(register-handler :show-group-settings-color-picker
|
||||
(fn [db [action show?]]
|
||||
(log/debug action)
|
||||
(assoc-in db db/group-settings-show-color-picker show?)))
|
||||
|
||||
(register-handler :chat-remove-member
|
||||
(fn [db [action identity]]
|
||||
(log/debug action)
|
||||
|
|
|
@ -86,6 +86,14 @@
|
|||
(aset "name" name))))
|
||||
(assoc-in db (db/chat-name-path chat-id) name)))
|
||||
|
||||
(defn set-chat-color [db color]
|
||||
(let [chat-id (current-chat-id db)]
|
||||
(r/write (fn []
|
||||
(-> (r/get-by-field :chats :chat-id chat-id)
|
||||
(r/single)
|
||||
(aset "color" color))))
|
||||
(assoc-in db (db/chat-color-path chat-id) color)))
|
||||
|
||||
(defn chat-contacts [chat-id]
|
||||
(-> (r/get-by-field :chats :chat-id chat-id)
|
||||
(r/single)
|
||||
|
|
|
@ -43,6 +43,8 @@
|
|||
:primaryKey :chat-id
|
||||
:properties {:chat-id "string"
|
||||
:name "string"
|
||||
:color {:type "string"
|
||||
:default "#a187d5"}
|
||||
:group-chat {:type "bool"
|
||||
:indexed true}
|
||||
:is-active "bool"
|
||||
|
|
|
@ -96,6 +96,10 @@
|
|||
(let [current-chat-id (current-chat-id @db)]
|
||||
(reaction (get-in @db (db/chat-name-path current-chat-id))))))
|
||||
|
||||
(register-sub :get-current-chat-color
|
||||
(fn [db _]
|
||||
(let [current-chat-id (current-chat-id @db)]
|
||||
(reaction (get-in @db (db/chat-color-path current-chat-id))))))
|
||||
|
||||
;; -- User data --------------------------------------------------------------
|
||||
|
||||
|
@ -181,11 +185,15 @@
|
|||
(contacts-list-include current-participants)))))))
|
||||
|
||||
(register-sub :selected-group-chat-member
|
||||
(fn [db [_]]
|
||||
(fn [db [_]]
|
||||
(reaction
|
||||
(let [identity (get-in @db db/group-settings-selected-member-path)]
|
||||
(contact-by-identity identity)))))
|
||||
|
||||
(register-sub :group-settings-show-color-picker
|
||||
(fn [db [_]]
|
||||
(reaction (get-in @db db/group-settings-show-color-picker))))
|
||||
|
||||
(register-sub :view-id
|
||||
(fn [db _]
|
||||
(reaction (@db :view-id))))
|
||||
|
|