From bf6c419c5d3c5bef7f4a56daaf325fded95d6c2d Mon Sep 17 00:00:00 2001 From: virvar Date: Fri, 13 May 2016 18:03:45 +0300 Subject: [PATCH] Chat name edit form. Fix styles. --- src/syng_im/android/core.cljs | 2 + src/syng_im/components/styles.cljs | 3 +- .../group_settings/group_settings.cljs | 23 +++++------ .../group_settings/styles/chat_name_edit.cljs | 19 ++++++++++ .../group_settings/styles/group_settings.cljs | 38 ++++++++++++++----- .../group_settings/views/chat_name_edit.cljs | 33 ++++++++++++++++ src/syng_im/group_settings/views/member.cljs | 2 +- src/syng_im/subs.cljs | 2 +- 8 files changed, 99 insertions(+), 23 deletions(-) create mode 100644 src/syng_im/group_settings/styles/chat_name_edit.cljs create mode 100644 src/syng_im/group_settings/views/chat_name_edit.cljs diff --git a/src/syng_im/android/core.cljs b/src/syng_im/android/core.cljs index 38b031cf7d..8bee230a48 100644 --- a/src/syng_im/android/core.cljs +++ b/src/syng_im/android/core.cljs @@ -16,6 +16,7 @@ [syng-im.components.chat.new-participants :refer [new-participants]] [syng-im.components.chat.remove-participants :refer [remove-participants]] [syng-im.group-settings.group-settings :refer [group-settings]] + [syng-im.group-settings.views.chat-name-edit :refer [chat-name-edit]] [syng-im.components.profile :refer [profile my-profile]] [syng-im.utils.logging :as log] [syng-im.utils.utils :refer [toast]] @@ -48,6 +49,7 @@ :chat-list [chats-list] :new-group [new-group] :group-settings [group-settings] + :chat-name-edit [chat-name-edit] :contact-list [contact-list] :chat [chat] :profile [profile] diff --git a/src/syng_im/components/styles.cljs b/src/syng_im/components/styles.cljs index 1f02586a7f..326f223cda 100644 --- a/src/syng_im/components/styles.cljs +++ b/src/syng_im/components/styles.cljs @@ -2,7 +2,8 @@ (def font "sans-serif") ;; (def font "Avenir-Roman") -(def title-font "sans-serif-medium") +(def font-medium "sans-serif-medium") +(def title-font font-medium) (def color-blue "#7099e6") (def color-blue-transparent "#7099e632") diff --git a/src/syng_im/group_settings/group_settings.cljs b/src/syng_im/group_settings/group_settings.cljs index 2c50beb9a9..13b5346f73 100644 --- a/src/syng_im/group_settings/group_settings.cljs +++ b/src/syng_im/group_settings/group_settings.cljs @@ -14,7 +14,7 @@ text2-color]] [syng-im.group-settings.styles.group-settings :as st] [syng-im.utils.listview :refer [to-realm-datasource]] - [syng-im.group-settings.views.member :refer [contact-inner-view]] + [syng-im.group-settings.views.member :refer [member-view]] [reagent.core :as r])) (defn remove-member [{:keys [whisper-identity]}] @@ -36,13 +36,13 @@ [text {:style st/modal-remove-text} "Remove"]]]]]) -(defn set-group-chat-name [chat-name] - (dispatch [:set-group-chat-name chat-name])) - (defn chat-members [members] [view st/chat-members-container (for [member members] - ^{:key member} [contact-inner-view member])]) + ^{:key member} [member-view member])]) + +(defn show-chat-name-edit [] + (dispatch [:navigate-to :chat-name-edit])) (defn chat-icon [] (let [chat-name (subscribe [:get-current-chat-name])] @@ -63,12 +63,13 @@ [new-group-toolbar] [text {:style st/chat-name-text} "Chat name"] - [text-input {:style st/chat-name-input - :underlineColorAndroid color-purple - :autoFocus true - :placeholderTextColor text2-color - :onChangeText set-group-chat-name} - @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 [] diff --git a/src/syng_im/group_settings/styles/chat_name_edit.cljs b/src/syng_im/group_settings/styles/chat_name_edit.cljs new file mode 100644 index 0000000000..0a5afb59d3 --- /dev/null +++ b/src/syng_im/group_settings/styles/chat_name_edit.cljs @@ -0,0 +1,19 @@ +(ns syng-im.group-settings.styles.chat-name-edit + (:require [syng-im.components.styles :refer [font + color-white + text1-color]])) + +(def save-action-icon + {:width 18 + :height 14}) + +(def chat-name-container + {:flex 1 + :flexDirection :column + :backgroundColor color-white}) + +(def chat-name-input + {:marginLeft 12 + :fontSize 14 + :fontFamily font + :color text1-color}) diff --git a/src/syng_im/group_settings/styles/group_settings.cljs b/src/syng_im/group_settings/styles/group_settings.cljs index 490e0e5c1f..53b975b3c6 100644 --- a/src/syng_im/group_settings/styles/group_settings.cljs +++ b/src/syng_im/group_settings/styles/group_settings.cljs @@ -1,5 +1,6 @@ (ns syng-im.group-settings.styles.group-settings (:require [syng-im.components.styles :refer [font + font-medium title-font color-white color-purple @@ -63,22 +64,42 @@ :marginLeft 16 :marginBottom 16 :color text2-color - :fontFamily font + :fontFamily font-medium :fontSize 14 :lineHeight 20}) -(def chat-name-input - {:marginLeft 12 - :fontSize 14 +(def chat-name-value-container + {:flexDirection :row + :marginLeft 16 + :height 56 + :alignItems :center + :justifyContent :center + :borderBottomWidth 1 + :borderBottomColor separator-color}) + +(def chat-name-value + {:flex 1 + :fontSize 16 :fontFamily font :color text1-color}) +(def chat-name-btn-edit-container + {:padding 16 + :justifyContent :center}) + +(def chat-name-btn-edit-text + {:marginTop -1 + :color text2-color + :fontFamily font + :fontSize 16 + :lineHeight 20}) + (def members-text {:marginTop 24 :marginLeft 16 :marginBottom 16 :color text2-color - :fontFamily font + :fontFamily font-medium :fontSize 14 :lineHeight 20}) @@ -90,15 +111,14 @@ :height 17}) (def add-members-container - {:flexDirection :row - :marginBottom 16}) + {:flexDirection :row}) (def add-members-text {:marginTop 18 :marginLeft 32 :color text2-color :fontFamily font - :fontSize 14 + :fontSize 16 :lineHeight 20}) (def settings-text @@ -106,6 +126,6 @@ :marginLeft 16 :marginBottom 16 :color text2-color - :fontFamily font + :fontFamily font-medium :fontSize 14 :lineHeight 20}) diff --git a/src/syng_im/group_settings/views/chat_name_edit.cljs b/src/syng_im/group_settings/views/chat_name_edit.cljs new file mode 100644 index 0000000000..d283177af1 --- /dev/null +++ b/src/syng_im/group_settings/views/chat_name_edit.cljs @@ -0,0 +1,33 @@ +(ns syng-im.group-settings.views.chat-name-edit + (:require [reagent.core :as r] + [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.components.react :refer [view text-input]] + [syng-im.components.toolbar :refer [toolbar]] + [syng-im.group-settings.styles.chat-name-edit :as st] + [syng-im.components.styles :refer [toolbar-background2 + text2-color]])) + +(defn save-group-chat-name [chat-name] + (dispatch [:set-group-chat-name chat-name]) + (dispatch [:navigate-back])) + +(defn chat-name-edit-toolbar [chat-name] + [toolbar {:background-color toolbar-background2 + :title "Edit chat name" + ;; TODO change to dark 'ok' icon + :action {:image {:source {:uri :icon_ok} + :style st/save-action-icon} + :handler #(save-group-chat-name chat-name)}}]) + +(defn chat-name-edit [] + (let [current-chat-name (subscribe [:get-current-chat-name]) + chat-name (r/atom @current-chat-name)] + (fn [] + [view st/chat-name-container + [chat-name-edit-toolbar @chat-name] + [text-input {:style st/chat-name-input + :autoFocus true + :placeholderTextColor text2-color + :onChangeText (fn [text] + (reset! chat-name text))} + @chat-name]]))) diff --git a/src/syng_im/group_settings/views/member.cljs b/src/syng_im/group_settings/views/member.cljs index 6e5349162d..6584724755 100644 --- a/src/syng_im/group_settings/views/member.cljs +++ b/src/syng_im/group_settings/views/member.cljs @@ -22,7 +22,7 @@ [view st/online-dot-left] [view st/online-dot-right]])) -(defn contact-inner-view [{:keys [whisper-identity name photo-path online role]}] +(defn member-view [{:keys [whisper-identity name photo-path online role]}] [view st/contact-container [view st/photo-container [contact-photo {:photo-path photo-path}] diff --git a/src/syng_im/subs.cljs b/src/syng_im/subs.cljs index c06ddfd17f..254a883466 100644 --- a/src/syng_im/subs.cljs +++ b/src/syng_im/subs.cljs @@ -94,7 +94,7 @@ (register-sub :get-current-chat-name (fn [db _] (let [current-chat-id (current-chat-id @db)] - (reaction (get-in @db (db/chat-name-path current-chat-id :name)))))) + (reaction (get-in @db (db/chat-name-path current-chat-id)))))) ;; -- User data --------------------------------------------------------------