diff --git a/android/app/src/main/res/drawable-hdpi/icon_bin.png b/android/app/src/main/res/drawable-hdpi/icon_bin.png new file mode 100644 index 0000000000..a968627384 Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/icon_bin.png differ diff --git a/android/app/src/main/res/drawable-hdpi/icon_notifications_on.png b/android/app/src/main/res/drawable-hdpi/icon_notifications_on.png new file mode 100644 index 0000000000..207cb4c16f Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/icon_notifications_on.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_bin.png b/android/app/src/main/res/drawable-mdpi/icon_bin.png new file mode 100644 index 0000000000..d26fff597d Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/icon_bin.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_notifications_on.png b/android/app/src/main/res/drawable-mdpi/icon_notifications_on.png new file mode 100644 index 0000000000..89a9ca8f15 Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/icon_notifications_on.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/icon_bin.png b/android/app/src/main/res/drawable-xhdpi/icon_bin.png new file mode 100644 index 0000000000..beed3a3490 Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/icon_bin.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/icon_notifications_on.png b/android/app/src/main/res/drawable-xhdpi/icon_notifications_on.png new file mode 100644 index 0000000000..9322a10bec Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/icon_notifications_on.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_bin.png b/android/app/src/main/res/drawable-xxhdpi/icon_bin.png new file mode 100644 index 0000000000..fa960dbf1d Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/icon_bin.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_notifications_on.png b/android/app/src/main/res/drawable-xxhdpi/icon_notifications_on.png new file mode 100644 index 0000000000..a0ee3c3fd5 Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/icon_notifications_on.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_bin.png b/android/app/src/main/res/drawable-xxxhdpi/icon_bin.png new file mode 100644 index 0000000000..ac64c38731 Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/icon_bin.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_notifications_on.png b/android/app/src/main/res/drawable-xxxhdpi/icon_notifications_on.png new file mode 100644 index 0000000000..cc4a37280a Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/icon_notifications_on.png differ diff --git a/src/syng_im/components/react.cljs b/src/syng_im/components/react.cljs index 4b926e7b51..87ea94c177 100644 --- a/src/syng_im/components/react.cljs +++ b/src/syng_im/components/react.cljs @@ -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] diff --git a/src/syng_im/db.cljs b/src/syng_im/db.cljs index c80a77c8bf..70ec6a6e3f 100644 --- a/src/syng_im/db.cljs +++ b/src/syng_im/db.cljs @@ -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]) diff --git a/src/syng_im/group_settings/group_settings.cljs b/src/syng_im/group_settings/group_settings.cljs index 13b5346f73..7153ce6207 100644 --- a/src/syng_im/group_settings/group_settings.cljs +++ b/src/syng_im/group_settings/group_settings.cljs @@ -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])]))) diff --git a/src/syng_im/group_settings/styles/group_settings.cljs b/src/syng_im/group_settings/styles/group_settings.cljs index 53b975b3c6..092ab7387e 100644 --- a/src/syng_im/group_settings/styles/group_settings.cljs +++ b/src/syng_im/group_settings/styles/group_settings.cljs @@ -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}) diff --git a/src/syng_im/handlers.cljs b/src/syng_im/handlers.cljs index 536227289b..f73a56a23c 100644 --- a/src/syng_im/handlers.cljs +++ b/src/syng_im/handlers.cljs @@ -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) diff --git a/src/syng_im/models/chats.cljs b/src/syng_im/models/chats.cljs index 56af4b1c96..861d4635da 100644 --- a/src/syng_im/models/chats.cljs +++ b/src/syng_im/models/chats.cljs @@ -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) diff --git a/src/syng_im/persistence/realm.cljs b/src/syng_im/persistence/realm.cljs index 83faef94a4..dcc7cd7043 100644 --- a/src/syng_im/persistence/realm.cljs +++ b/src/syng_im/persistence/realm.cljs @@ -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" diff --git a/src/syng_im/subs.cljs b/src/syng_im/subs.cljs index 254a883466..3f8cf88a12 100644 --- a/src/syng_im/subs.cljs +++ b/src/syng_im/subs.cljs @@ -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))))