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

Chat color 

Former-commit-id: 14e69f9369
This commit is contained in:
virvar 2016-05-16 13:47:34 +03:00
parent b4e8adc951
commit 8919410735
18 changed files with 205 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
android/app/src/main/res/drawable-hdpi/icon_bin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 358 B

BIN
android/app/src/main/res/drawable-hdpi/icon_notifications_on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 823 B

BIN
android/app/src/main/res/drawable-mdpi/icon_bin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 217 B

BIN
android/app/src/main/res/drawable-mdpi/icon_notifications_on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 585 B

BIN
android/app/src/main/res/drawable-xhdpi/icon_bin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 412 B

BIN
android/app/src/main/res/drawable-xhdpi/icon_notifications_on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
android/app/src/main/res/drawable-xxhdpi/icon_bin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 616 B

BIN
android/app/src/main/res/drawable-xxhdpi/icon_notifications_on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
android/app/src/main/res/drawable-xxxhdpi/icon_bin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 889 B

BIN
android/app/src/main/res/drawable-xxxhdpi/icon_notifications_on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

2
src/syng_im/components/react.cljs
View File

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

5
src/syng_im/db.cljs
View File

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

139
src/syng_im/group_settings/group_settings.cljs
View File

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

58
src/syng_im/group_settings/styles/group_settings.cljs
View File

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

11
src/syng_im/handlers.cljs
View File

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

8
src/syng_im/models/chats.cljs
View File

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

2
src/syng_im/persistence/realm.cljs
View File

@ -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"

10
src/syng_im/subs.cljs
View File

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