From fc6926cbfda428a9dde87faee29bee46f6b3c2ec Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Wed, 11 May 2016 14:47:40 +0300 Subject: [PATCH] chats-list & new-group views/styles Former-commit-id: 0b3469cd649b822520317ac473ac1ccc7f154ae4 --- src/syng_im/android/core.cljs | 6 +- .../styles/{input_styles.cljs => input.cljs} | 0 .../screen.cljs} | 54 ++++---- src/syng_im/chats_list/styles.cljs | 122 ++++++++++++++++ .../chats_list/views/chat_list_item.cljs | 21 +++ src/syng_im/chats_list/views/inner_item.cljs | 52 +++++++ .../components/chats/chat_list_item.cljs | 37 ----- .../chats/chat_list_item_inner.cljs | 131 ------------------ src/syng_im/components/chats/new_group.cljs | 89 ------------ .../components/chats/new_group_contact.cljs | 20 --- .../discovery/discovery_popular_list.cljs | 1 - .../discovery/discovery_recent.cljs | 12 +- .../components/discovery/discovery_tag.cljs | 38 +++-- src/syng_im/components/realm.cljs | 5 +- src/syng_im/components/toolbar.cljs | 12 +- src/syng_im/contacts/views/contact.cljs | 15 +- src/syng_im/contacts/views/contact_inner.cljs | 3 +- src/syng_im/db.cljs | 4 +- src/syng_im/handlers.cljs | 5 + src/syng_im/models/discoveries.cljs | 5 +- src/syng_im/models/protocol.cljs | 4 +- src/syng_im/navigation/handlers.cljs | 11 +- src/syng_im/new_group/screen.cljs | 52 +++++++ src/syng_im/new_group/styles.cljs | 67 +++++++++ src/syng_im/new_group/views/contact.cljs | 19 +++ src/syng_im/participants/views/contact.cljs | 2 +- src/syng_im/participants/views/create.cljs | 7 +- src/syng_im/participants/views/remove.cljs | 7 +- src/syng_im/subs.cljs | 4 + 29 files changed, 424 insertions(+), 381 deletions(-) rename src/syng_im/chat/styles/{input_styles.cljs => input.cljs} (100%) rename src/syng_im/{components/chats/chats_list.cljs => chats_list/screen.cljs} (56%) create mode 100644 src/syng_im/chats_list/styles.cljs create mode 100644 src/syng_im/chats_list/views/chat_list_item.cljs create mode 100644 src/syng_im/chats_list/views/inner_item.cljs delete mode 100644 src/syng_im/components/chats/chat_list_item.cljs delete mode 100644 src/syng_im/components/chats/chat_list_item_inner.cljs delete mode 100644 src/syng_im/components/chats/new_group.cljs delete mode 100644 src/syng_im/components/chats/new_group_contact.cljs create mode 100644 src/syng_im/new_group/screen.cljs create mode 100644 src/syng_im/new_group/styles.cljs create mode 100644 src/syng_im/new_group/views/contact.cljs diff --git a/src/syng_im/android/core.cljs b/src/syng_im/android/core.cljs index 56c654bfd2..fb82b1b085 100644 --- a/src/syng_im/android/core.cljs +++ b/src/syng_im/android/core.cljs @@ -11,13 +11,11 @@ [syng-im.components.discovery.discovery :refer [discovery]] [syng-im.components.discovery.discovery-tag :refer [discovery-tag]] [syng-im.chat.screen :refer [chat]] - [syng-im.components.chats.chats-list :refer [chats-list]] - [syng-im.components.chats.new-group :refer [new-group]] + [syng-im.chats-list.screen :refer [chats-list]] + [syng-im.new-group.screen :refer [new-group]] [syng-im.participants.views.create :refer [new-participants]] [syng-im.participants.views.remove :refer [remove-participants]] - [syng-im.utils.logging :as log] [syng-im.utils.utils :refer [toast]] - [syng-im.navigation :as nav] [syng-im.utils.encryption])) (def back-button-handler (cljs/atom {:nav nil diff --git a/src/syng_im/chat/styles/input_styles.cljs b/src/syng_im/chat/styles/input.cljs similarity index 100% rename from src/syng_im/chat/styles/input_styles.cljs rename to src/syng_im/chat/styles/input.cljs diff --git a/src/syng_im/components/chats/chats_list.cljs b/src/syng_im/chats_list/screen.cljs similarity index 56% rename from src/syng_im/components/chats/chats_list.cljs rename to src/syng_im/chats_list/screen.cljs index 9083be800d..a9e238288f 100644 --- a/src/syng_im/components/chats/chats_list.cljs +++ b/src/syng_im/chats_list/screen.cljs @@ -1,4 +1,4 @@ -(ns syng-im.components.chats.chats-list +(ns syng-im.chats-list.screen (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [syng-im.components.react :refer [android? view @@ -9,10 +9,9 @@ [syng-im.components.realm :refer [list-view]] [syng-im.utils.logging :as log] [syng-im.navigation :refer [nav-pop]] - [syng-im.resources :as res] [syng-im.utils.listview :refer [to-realm-datasource]] [reagent.core :as r] - [syng-im.components.chats.chat-list-item :refer [chat-list-item]] + [syng-im.chats-list.views.chat-list-item :refer [chat-list-item]] [syng-im.components.action-button :refer [action-button action-button-item]] [syng-im.components.styles :refer [font @@ -26,43 +25,42 @@ [syng-im.components.icons.ionicons :refer [icon]])) (defn chats-list-toolbar [] - [toolbar {:nav-action {:image {:source {:uri "icon_hamburger"} - :style {:width 16 - :height 12}} + [toolbar {:nav-action {:image {:source {:uri "icon_hamburger"} + :style {:width 16 + :height 12}} :handler (fn [])} :title "Chats" - :action {:image {:source {:uri "icon_search"} - :style {:width 17 - :height 17}} + :action {:image {:source {:uri "icon_search"} + :style {:width 17 + :height 17}} :handler (fn [])}}]) -(defn chats-list [{:keys [navigator]}] +(defn chats-list [] (let [chats (subscribe [:get-chats])] (fn [] (let [chats @chats - _ (log/debug "chats=" chats) datasource (to-realm-datasource chats)] - [view {:style {:flex 1 - :backgroundColor "white"}} + [view {:flex 1 + :backgroundColor :white} [chats-list-toolbar] [list-view {:dataSource datasource - :enableEmptySections true - :renderRow (fn [row section-id row-id] - (r/as-element [chat-list-item row navigator])) - :style {:backgroundColor "white"}}] + :renderRow (fn [row _ _] + (r/as-element [chat-list-item row])) + :style {:backgroundColor :white}}] [action-button {:buttonColor color-blue} - [action-button-item {:title "New Chat" - :buttonColor "#9b59b6" - :onPress #(dispatch [:navigate-to - :contact-list])} - [icon {:name "android-create" + [action-button-item + {:title "New Chat" + :buttonColor :#9b59b6 + :onPress #(dispatch [:navigate-to :contact-list])} + [icon {:name :android-create :style {:fontSize 20 :height 22 - :color "white"}}]] - [action-button-item {:title "New Group Chat" - :buttonColor "#1abc9c" - :onPress #(dispatch [:show-group-new])} - [icon {:name "person-stalker" + :color :white}}]] + [action-button-item + {:title "New Group Chat" + :buttonColor :#1abc9c + :onPress #(dispatch [:show-group-new])} + [icon {:name :person-stalker :style {:fontSize 20 :height 22 - :color "white"}}]]]])))) + :color :white}}]]]])))) diff --git a/src/syng_im/chats_list/styles.cljs b/src/syng_im/chats_list/styles.cljs new file mode 100644 index 0000000000..14594cc72c --- /dev/null +++ b/src/syng_im/chats_list/styles.cljs @@ -0,0 +1,122 @@ +(ns syng-im.chats-list.styles + (:require [syng-im.components.styles :refer [font + title-font + color-white + color-blue + online-color + text1-color + text2-color + new-messages-count-color]])) + +(def contact-photo-container + {:borderRadius 50}) + +(def contact-photo-image + {:borderRadius 50 + :width 40 + :height 40}) + +(def online-container + {:position :absolute + :top 24 + :left 24 + :width 20 + :height 20 + :borderRadius 50 + :backgroundColor online-color + :borderWidth 2 + :borderColor color-white}) + +(def online-dot + {:position :absolute + :top 6 + :width 4 + :height 4 + :borderRadius 50 + :backgroundColor color-white}) + +(def online-dot-left + (assoc online-dot :left 3)) + +(def online-dot-right + (assoc online-dot :left 9)) + +(def chat-container + {:flexDirection :row + :paddingVertical 15 + :paddingHorizontal 16 + :height 90}) + +(def photo-container + {:marginTop 2 + :width 44 + :height 44}) + +(def item-container + {:flexDirection :column + :marginLeft 12 + :flex 1}) + +(def name-view + {:flexDirection :row}) + +(def name-text + {:marginTop -2.5 + :color text1-color + :fontSize 14 + :fontFamily title-font}) + +(def group-icon + {:marginTop 4 + :marginLeft 8 + :width 14 + :height 9}) + +(def memebers-text + {:marginTop -0.5 + :marginLeft 4 + :fontFamily font + :fontSize 12 + :color text2-color}) + +(def last-message-text + {:marginTop 7 + :marginRight 40 + :color text1-color + :fontFamily font + :fontSize 14 + :lineHeight 20}) + +(def status-container + {:flexDirection :row + :position :absolute + :top 0 + :right 0}) + +(def status-image + {:marginTop 6 + :width 9 + :height 7}) + +(def datetime-text + {:fontFamily font + :fontSize 12 + :color text2-color + :marginLeft 5}) + +(def new-messages-container + {:position :absolute + :top 36 + :right 0 + :width 24 + :height 24 + :backgroundColor new-messages-count-color + :borderRadius 50}) + +(def new-messages-text + {:top 4 + :left 0 + :fontFamily title-font + :fontSize 10 + :color color-blue + :textAlign :center}) diff --git a/src/syng_im/chats_list/views/chat_list_item.cljs b/src/syng_im/chats_list/views/chat_list_item.cljs new file mode 100644 index 0000000000..9f91eb7bdb --- /dev/null +++ b/src/syng_im/chats_list/views/chat_list_item.cljs @@ -0,0 +1,21 @@ +(ns syng-im.chats-list.views.chat-list-item + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.components.react :refer [view + text + image + touchable-highlight]] + [syng-im.components.styles :refer [font]] + [syng-im.chats-list.views.inner-item :refer + [chat-list-item-inner-view]])) + +(defn chat-list-item [chat-obj] + [touchable-highlight + {:on-press #(dispatch [:show-chat (aget chat-obj "chat-id") :push])} + ;; TODO add [photo-path delivery-status new-messages-count online] values to chat-obj + ;; TODO should chat-obj be clj-map? + [view [chat-list-item-inner-view (merge (js->clj chat-obj :keywordize-keys true) + {:photo-path nil + :delivery-status :seen + :new-messages-count 3 + :timestamp "13:54" + :online true})]]]) diff --git a/src/syng_im/chats_list/views/inner_item.cljs b/src/syng_im/chats_list/views/inner_item.cljs new file mode 100644 index 0000000000..0e43c75426 --- /dev/null +++ b/src/syng_im/chats_list/views/inner_item.cljs @@ -0,0 +1,52 @@ +(ns syng-im.chats-list.views.inner-item + (:require [clojure.string :as s] + [syng-im.components.react :refer [view image icon text]] + [syng-im.chats-list.styles :as st] + [syng-im.resources :as res])) + + +(defn contact-photo [photo-path] + [view st/contact-photo-container + [image {:source (if (s/blank? photo-path) + res/user-no-photo + {:uri photo-path}) + :style st/contact-photo-image}]]) + +(defn contact-online [online] + (when online + [view st/online-container + [view st/online-dot-left] + [view st/online-dot-right]])) + +(defn chat-list-item-inner-view + [{:keys [name photo-path delivery-status timestamp new-messages-count online + group-chat contacts]}] + [view st/chat-container + [view st/photo-container + [contact-photo photo-path] + [contact-online online]] + [view st/item-container + [view st/name-view + [text {:style st/name-text} name] + (when group-chat + [icon :group st/group-icon]) + (when group-chat + [text {:style st/memebers-text} + (if (< 1 (count contacts)) + (str (count contacts) " members") + "1 member")])] + [text {:style st/last-message-text + :numberOfLines 2} + (repeatedly 5 #(str "Hi, I'm " name "! "))]] + [view + [view st/status-container + (when delivery-status + [image {:source (if (= (keyword delivery-status) :seen) + {:uri :icon_ok_small} + ;; todo change icon + {:uri :icon_ok_small}) + :style st/status-image}]) + [text {:style st/datetime-text} timestamp]] + (when (pos? new-messages-count) + [view st/new-messages-container + [text {:style st/new-messages-text} new-messages-count]])]]) diff --git a/src/syng_im/components/chats/chat_list_item.cljs b/src/syng_im/components/chats/chat_list_item.cljs deleted file mode 100644 index 574af6fc87..0000000000 --- a/src/syng_im/components/chats/chat_list_item.cljs +++ /dev/null @@ -1,37 +0,0 @@ -(ns syng-im.components.chats.chat-list-item - (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [syng-im.components.react :refer [view - text - image - touchable-highlight]] - [syng-im.components.styles :refer [font]] - [syng-im.components.chats.chat-list-item-inner :refer [chat-list-item-inner-view]] - [syng-im.utils.logging :as log] - [syng-im.resources :as res])) - -(defn chat-list-item [chat-obj navigator] - [touchable-highlight - {:on-press #(dispatch [:show-chat (aget chat-obj "chat-id") :push])} - ;; TODO add [photo-path delivery-status new-messages-count online] values to chat-obj - ;; TODO should chat-obj be clj-map? - [view {} [chat-list-item-inner-view (merge (js->clj chat-obj :keywordize-keys true) - {:photo-path nil - :delivery-status :seen - :new-messages-count 3 - :timestamp "13:54" - :online true})]]]) - -(comment [view {:style {:flexDirection "row" - :width 260 - :marginVertical 5}} - [image {:source res/chat-icon - :style {:borderWidth 2 - :borderColor "#FFFFFF" - :width 32 - :height 30 - :marginRight 5 - :marginLeft 5}}] - [text {:style {:fontSize 14 - :fontFamily font - :color "#4A5258"}} - (subs (aget chat-obj "name") 0 30)]]) diff --git a/src/syng_im/components/chats/chat_list_item_inner.cljs b/src/syng_im/components/chats/chat_list_item_inner.cljs deleted file mode 100644 index 2c59897bfc..0000000000 --- a/src/syng_im/components/chats/chat_list_item_inner.cljs +++ /dev/null @@ -1,131 +0,0 @@ -(ns syng-im.components.chats.chat-list-item-inner - (:require [clojure.string :as s] - [syng-im.components.react :refer [view image text]] - [syng-im.components.styles :refer [font - title-font - color-white - color-blue - online-color - text1-color - text2-color - new-messages-count-color]] - [syng-im.resources :as res])) - -(defn contact-photo [{:keys [photo-path]}] - [view {:borderRadius 50} - [image {:source (if (s/blank? photo-path) - res/user-no-photo - {:uri photo-path}) - :style {:borderRadius 50 - :width 40 - :height 40}}]]) - -(defn contact-online [{:keys [online]}] - (when online - [view {:position "absolute" - :top 24 - :left 24 - :width 20 - :height 20 - :borderRadius 50 - :backgroundColor online-color - :borderWidth 2 - :borderColor color-white} - [view {:position "absolute" - :top 6 - :left 3 - :width 4 - :height 4 - :borderRadius 50 - :backgroundColor color-white}] - [view {:position "absolute" - :top 6 - :left 9 - :width 4 - :height 4 - :borderRadius 50 - :backgroundColor color-white}]])) - -(defn chat-list-item-inner-view - [{:keys [name photo-path delivery-status timestamp new-messages-count online - group-chat contacts]}] - [view {:style {:flexDirection "row" - :paddingVertical 15 - :paddingHorizontal 16 - :height 90}} - [view {:marginTop 2 - :width 44 - :height 44} -;;; photo - [contact-photo {:photo-path photo-path}] -;;; online - [contact-online {:online online}]] - [view {:style {:flexDirection "column" - :marginLeft 12 - :flex 1}} -;;; name - [view {:style {:flexDirection "row"}} - [text {:style {:marginTop -2.5 - :color text1-color - :fontSize 14 - :fontFamily title-font}} name] -;;; group size - (when group-chat - [image {:source {:uri "icon_group"} - :style {:marginTop 4 - :marginLeft 8 - :width 14 - :height 9}}]) - (when group-chat - [text {:style {:marginTop -0.5 - :marginLeft 4 - :fontFamily font - :fontSize 12 - :color text2-color}} - (if (< 1 (count contacts)) - (str (count contacts) " members") - "1 member")])] -;;; last message - [text {:style {:marginTop 7 - :marginRight 40 - :color text1-color - :fontFamily font - :fontSize 14 - :lineHeight 20} - :numberOfLines 2} - (repeatedly 5 #(str "Hi, I'm " name "! "))]] - [view {} -;;; delivery status - [view {:style {:flexDirection "row" - :position "absolute" - :top 0 - :right 0}} - (when delivery-status - [image {:source (if (= (keyword delivery-status) :seen) - {:uri "icon_ok_small"} - {:uri "icon_ok_small"}) - :style {:marginTop 6 - :width 9 - :height 7}}]) -;;; datetime - [text {:style {:fontFamily font - :fontSize 12 - :color text2-color - :marginLeft 5}} - timestamp]] -;;; new messages count - (when (pos? new-messages-count) - [view {:style {:position "absolute" - :top 36 - :right 0 - :width 24 - :height 24 - :backgroundColor new-messages-count-color - :borderRadius 50}} - [text {:style {:top 4 - :left 0 - :fontFamily title-font - :fontSize 10 - :color color-blue - :textAlign "center"}} - new-messages-count]])]]) diff --git a/src/syng_im/components/chats/new_group.cljs b/src/syng_im/components/chats/new_group.cljs deleted file mode 100644 index 7f9c852b71..0000000000 --- a/src/syng_im/components/chats/new_group.cljs +++ /dev/null @@ -1,89 +0,0 @@ -(ns syng-im.components.chats.new-group - (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [syng-im.resources :as res] - [syng-im.components.react :refer [view - text-input - text - image - touchable-highlight]] - [syng-im.components.styles :refer [font - title-font - color-white - color-purple - text1-color - text2-color - toolbar-background1]] - [syng-im.components.toolbar :refer [toolbar]] - [syng-im.components.realm :refer [list-view]] - [syng-im.utils.listview :refer [to-realm-datasource]] - [syng-im.components.chats.new-group-contact :refer [new-group-contact]] - [reagent.core :as r] - [syng-im.navigation :refer [nav-pop]])) - -(defn new-group-toolbar [navigator group-name] - [toolbar {:navigator navigator - :title "New group chat" - :action {:image {:source res/v ;; {:uri "icon_search"} - :style {:width 20 - :height 18}} - :handler #(dispatch [:create-new-group group-name])}}]) - -(defn new-group [{:keys [navigator]}] - (let [contacts (subscribe [:all-contacts]) - group-name (r/atom nil)] - (fn [{:keys [navigator]}] - (let [contacts-ds (to-realm-datasource @contacts)] - [view {:style {:flex 1 - :flexDirection "column" - :backgroundColor color-white}} - [new-group-toolbar navigator @group-name] - [view {:style {:marginHorizontal 16}} - [text {:style {:marginTop 24 - :marginBottom 16 - :color text2-color - :fontFamily font - :fontSize 14 - :lineHeight 20}} - "Chat name"] - [text-input {:underlineColorAndroid color-purple - :style {:marginLeft -4 - :fontSize 14 - :fontFamily font - :color text1-color} - :autoFocus true - :placeholder "Group Name" - :placeholderTextColor text2-color - :onChangeText (fn [new-text] - (reset! group-name new-text) - (r/flush)) - :onSubmitEditing (fn [e] - ;(dispatch [:send-chat-msg @chat-id @text]) - (reset! group-name nil))} - @group-name] - [text {:style {:marginTop 24 - :marginBottom 16 - :color text2-color - :fontFamily font - :fontSize 14 - :lineHeight 20}} - "Members"] - [touchable-highlight {:on-press (fn [])} - [view {:style {:flexDirection "row" - :marginBottom 16}} - [image {:source {:uri "icon_add_gray"} - :style {:marginVertical 19 - :marginHorizontal 3 - :width 17 - :height 17}}] - [text {:style {:marginTop 18 - :marginLeft 32 - :color text2-color - :fontFamily font - :fontSize 14 - :lineHeight 20}} - "Add members"]]] - [list-view {:dataSource contacts-ds - :enableEmptySections true - :renderRow (fn [row section-id row-id] - (r/as-element [new-group-contact (js->clj row :keywordize-keys true) navigator])) - :style {:backgroundColor "white"}}]]])))) diff --git a/src/syng_im/components/chats/new_group_contact.cljs b/src/syng_im/components/chats/new_group_contact.cljs deleted file mode 100644 index 79153d775b..0000000000 --- a/src/syng_im/components/chats/new_group_contact.cljs +++ /dev/null @@ -1,20 +0,0 @@ -(ns syng-im.components.chats.new-group-contact - (:require [syng-im.resources :as res] - [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [syng-im.components.react :refer [view]] - [syng-im.components.contact-list.contact-inner :refer [contact-inner-view]] - [syng-im.components.item-checkbox :refer [item-checkbox]] - [syng-im.utils.logging :as log] - [reagent.core :as r])) - -(defn new-group-contact [{:keys [whisper-identity] :as contact} navigator] - (let [checked (r/atom false)] - (fn [] - [view {:style {:flexDirection "row" - :height 56}} - [item-checkbox {:onToggle (fn [checked?] - (reset! checked checked?) - (dispatch [:select-for-new-group whisper-identity checked?])) - :checked @checked - :size 30}] - [contact-inner-view contact]]))) diff --git a/src/syng_im/components/discovery/discovery_popular_list.cljs b/src/syng_im/components/discovery/discovery_popular_list.cljs index 0291a1bb82..55a4b94c83 100644 --- a/src/syng_im/components/discovery/discovery_popular_list.cljs +++ b/src/syng_im/components/discovery/discovery_popular_list.cljs @@ -9,7 +9,6 @@ text image]] [reagent.core :as r] - [syng-im.components.realm :refer [list-view]] [syng-im.components.discovery.styles :as st] [syng-im.utils.listview :refer [to-realm-datasource]] [syng-im.components.discovery.discovery-popular-list-item :refer [discovery-popular-list-item] ]) diff --git a/src/syng_im/components/discovery/discovery_recent.cljs b/src/syng_im/components/discovery/discovery_recent.cljs index 4b1a650322..c253ca02b4 100644 --- a/src/syng_im/components/discovery/discovery_recent.cljs +++ b/src/syng_im/components/discovery/discovery_recent.cljs @@ -21,15 +21,13 @@ (defn render-separator [sectionID, rowID, adjacentRowHighlighted] (let [elem (r/as-element [view {:style st/row-separator - :key rowID}])] + :key rowID}])] elem)) (defn discovery-recent [] (let [discoveries (subscribe [:get-discoveries]) - datasource (to-realm-datasource @discoveries)] - [list-view {:dataSource datasource - :enableEmptySections true - :renderRow render-row + datasource (to-realm-datasource @discoveries)] + [list-view {:dataSource datasource + :renderRow render-row :renderSeparator render-separator - :style st/recent-list}] - )) \ No newline at end of file + :style st/recent-list}])) diff --git a/src/syng_im/components/discovery/discovery_tag.cljs b/src/syng_im/components/discovery/discovery_tag.cljs index f8a7fa88a8..70cffe6d23 100644 --- a/src/syng_im/components/discovery/discovery_tag.cljs +++ b/src/syng_im/components/discovery/discovery_tag.cljs @@ -20,7 +20,7 @@ (let [elem (discovery-popular-list-item row)] elem) (r/as-element [text "null"]) - )) + )) (defn render-separator [sectionID, rowID, adjacentRowHighlighted] (let [elem (r/as-element [view {:style st/row-separator @@ -33,27 +33,25 @@ (str " #" tag)]]) (defn discovery-tag [{:keys [tag navigator]}] - (let [tag (subscribe [:get-current-tag]) + (let [tag (subscribe [:get-current-tag]) discoveries (subscribe [:get-discoveries-by-tag @tag 0])] (log/debug "Got discoveries: " @discoveries) (fn [] - (let [items @discoveries + (let [items @discoveries datasource (to-realm-datasource items)] - [view {:style st/discovery-tag-container} - [toolbar {:navigator navigator - :nav-action {:image {:source {:uri "icon_back"} - :style st/icon-back} - :handler (fn [] (nav-pop navigator))} - :title "Add Participants" - :content (title-content @tag) - :action {:image {:source {:uri "icon_search"} - :style st/icon-search} - :handler (fn [] - ())}}] + [view {:style st/discovery-tag-container} + [toolbar {:navigator navigator + :nav-action {:image {:source {:uri "icon_back"} + :style st/icon-back} + :handler (fn [] (nav-pop navigator))} + :title "Add Participants" + :content (title-content @tag) + :action {:image {:source {:uri "icon_search"} + :style st/icon-search} + :handler (fn [] + ())}}] - [list-view {:dataSource datasource - :enableEmptySections true - :renderRow render-row - :renderSeparator render-separator - :style st/recent-list}] - ])))) \ No newline at end of file + [list-view {:dataSource datasource + :renderRow render-row + :renderSeparator render-separator + :style st/recent-list}]])))) diff --git a/src/syng_im/components/realm.cljs b/src/syng_im/components/realm.cljs index 524c2f6909..93f8d84ccc 100644 --- a/src/syng_im/components/realm.cljs +++ b/src/syng_im/components/realm.cljs @@ -3,7 +3,10 @@ (set! js/window.RealmReactNative (js/require "realm/react-native")) -(def list-view (r/adapt-react-class (.-ListView js/RealmReactNative))) +(def list-view-class (r/adapt-react-class (.-ListView js/RealmReactNative))) + +(defn list-view [props] + [list-view-class (merge {:enableEmptySections true} props)]) (comment diff --git a/src/syng_im/components/toolbar.cljs b/src/syng_im/components/toolbar.cljs index 4e9a38fd0c..6bc93a9aa7 100644 --- a/src/syng_im/components/toolbar.cljs +++ b/src/syng_im/components/toolbar.cljs @@ -1,6 +1,5 @@ (ns syng-im.components.toolbar - (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [syng-im.resources :as res] + (:require [re-frame.core :refer [subscribe dispatch]] [syng-im.components.react :refer [view text-input text @@ -13,12 +12,9 @@ text1-color text2-color toolbar-background1]] - [syng-im.components.realm :refer [list-view]] - [syng-im.utils.listview :refer [to-realm-datasource]] - [reagent.core :as r] - [syng-im.navigation :refer [nav-pop]])) + [syng-im.utils.listview :refer [to-realm-datasource]])) -(defn toolbar [{:keys [navigator title nav-action action background-color content style]}] +(defn toolbar [{:keys [title nav-action action background-color content style]}] (let [style (merge {:flexDirection "row" :backgroundColor (or background-color toolbar-background1) :height 56 @@ -31,7 +27,7 @@ :alignItems "center" :justifyContent "center"} [image (:image nav-action)]]] - [touchable-highlight {:on-press #(nav-pop navigator)} + [touchable-highlight {:on-press #(dispatch [:navigate-back])} [view {:width 56 :height 56} [image {:source {:uri "icon_back"} diff --git a/src/syng_im/contacts/views/contact.cljs b/src/syng_im/contacts/views/contact.cljs index 6bbbdc7938..41df1c47d8 100644 --- a/src/syng_im/contacts/views/contact.cljs +++ b/src/syng_im/contacts/views/contact.cljs @@ -1,13 +1,8 @@ (ns syng-im.contacts.views.contact - (:require [syng-im.components.react :refer [view text image touchable-highlight]] - [syng-im.resources :as res] - [syng-im.navigation :as nav] + (:require [syng-im.components.react :refer [view touchable-highlight]] + [re-frame.core :refer [dispatch]] [syng-im.contacts.views.contact-inner :refer [contact-inner-view]])) -(defn show-chat [navigator whisper-identity] - (nav/nav-push navigator {:view-id :chat})) - -(defn contact-view [{:keys [navigator contact]}] - (let [{:keys [whisper-identity]} contact] - [touchable-highlight {:onPress #(show-chat navigator whisper-identity)} - [view {} [contact-inner-view contact]]])) +(defn contact-view [{:keys [contact]}] + [touchable-highlight {:onPress #(dispatch [:navigate-to :chat])} + [view {} [contact-inner-view contact]]]) diff --git a/src/syng_im/contacts/views/contact_inner.cljs b/src/syng_im/contacts/views/contact_inner.cljs index 3dd46f458f..9e47992a18 100644 --- a/src/syng_im/contacts/views/contact_inner.cljs +++ b/src/syng_im/contacts/views/contact_inner.cljs @@ -43,8 +43,7 @@ :borderRadius 50 :backgroundColor color-white}]])) -(defn contact-inner-view [{:keys [name photo-path delivery-status datetime new-messages-count - online whisper-identity]}] +(defn contact-inner-view [{:keys [name photo-path online]}] [view {:style {:flexDirection "row" :height 56}} [view {:style {:marginTop 8 diff --git a/src/syng_im/db.cljs b/src/syng_im/db.cljs index 71274d6a97..d7b452a0f3 100644 --- a/src/syng_im/db.cljs +++ b/src/syng_im/db.cljs @@ -19,15 +19,13 @@ :show-actions false :new-group #{} :new-participants #{} - :signed-up false + :signed-up true :view-id default-view :navigation-stack (list default-view) :name "My Name" :current-tag nil}) (def protocol-initialized-path [:protocol-initialized]) -(def identity-password-path [:identity-password]) -(def updated-chats-signal-path [:chats-updated-signal]) (defn chat-input-text-path [chat-id] [:chats chat-id :input-text]) (defn chat-staged-commands-path [chat-id] diff --git a/src/syng_im/handlers.cljs b/src/syng_im/handlers.cljs index 6c42200632..3aa7e8aa63 100644 --- a/src/syng_im/handlers.cljs +++ b/src/syng_im/handlers.cljs @@ -57,6 +57,11 @@ ;; -- Common -------------------------------------------------------------- +(register-handler :set + (debug + (fn [db [_ k v]] + (assoc db k v)))) + (register-handler :initialize-db (fn [_ _] app-db)) diff --git a/src/syng_im/models/discoveries.cljs b/src/syng_im/models/discoveries.cljs index 5a568a11c9..03f7a623ad 100644 --- a/src/syng_im/models/discoveries.cljs +++ b/src/syng_im/models/discoveries.cljs @@ -7,10 +7,7 @@ [syng-im.db :as db])) (defn signal-discoveries-updated [db] - (update-in db db/updated-discoveries-signal-path (fn [current] - (if current - (inc current) - 0)))) + (update-in db db/updated-discoveries-signal-path #(if % (inc %) 0))) (defn discoveries-updated? [db] (get-in db db/updated-discoveries-signal-path)) diff --git a/src/syng_im/models/protocol.cljs b/src/syng_im/models/protocol.cljs index 301876a0d7..176cab7047 100644 --- a/src/syng_im/models/protocol.cljs +++ b/src/syng_im/models/protocol.cljs @@ -13,14 +13,14 @@ (assoc-in db db/protocol-initialized-path initialized?)) (defn update-identity [db identity] - (let [password (get-in db db/identity-password-path) + (let [password (:identity-password db) encrypted (password-encrypt password (to-edn-string identity))] (s/put kv/kv-store :identity encrypted) (assoc db :user-identity identity))) (defn stored-identity [db] (let [encrypted (s/get kv/kv-store :identity) - password (get-in db db/identity-password-path)] + password (:identity-password db)] (when encrypted (read-string (password-decrypt password encrypted))))) diff --git a/src/syng_im/navigation/handlers.cljs b/src/syng_im/navigation/handlers.cljs index f45b66a934..d15d29bf0d 100644 --- a/src/syng_im/navigation/handlers.cljs +++ b/src/syng_im/navigation/handlers.cljs @@ -1,5 +1,5 @@ (ns syng-im.navigation.handlers - (:require [re-frame.core :refer [register-handler dispatch]])) + (:require [re-frame.core :refer [register-handler dispatch debug]])) (defn push-view [db view-id] (-> db @@ -35,10 +35,11 @@ (assoc :navigation-stack navigation-stack')))))) (register-handler :show-group-new - (fn [db _] - (-> db - (push-view :new-group) - (assoc-in :new-group #{})))) + (debug + (fn [db _] + (-> db + (push-view :new-group) + (assoc :new-group #{}))))) (register-handler :show-chat (fn [db [_ chat-id nav-type]] diff --git a/src/syng_im/new_group/screen.cljs b/src/syng_im/new_group/screen.cljs new file mode 100644 index 0000000000..695aa37040 --- /dev/null +++ b/src/syng_im/new_group/screen.cljs @@ -0,0 +1,52 @@ +(ns syng-im.new-group.screen + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.resources :as res] + [syng-im.components.react :refer [view + text-input + text + image + icon + touchable-highlight]] + [syng-im.components.styles :refer [color-purple]] + [syng-im.components.toolbar :refer [toolbar]] + [syng-im.components.realm :refer [list-view]] + [syng-im.utils.listview :refer [to-realm-datasource]] + [syng-im.new-group.views.contact :refer [new-group-contact]] + [reagent.core :as r] + [syng-im.new-group.styles :as st])) + + +(defn new-group-toolbar [group-name] + [toolbar {:title "New group chat" + :action {:image {:source res/v ;; {:uri "icon_search"} + :style st/toolbar-icon} + :handler #(dispatch [:create-new-group group-name])}}]) + +(defn new-group [] + (let [contacts (subscribe [:all-contacts]) + group-name (subscribe [:get ::group-name])] + (fn [] + (let [contacts-ds (to-realm-datasource @contacts)] + [view st/new-group-container + [new-group-toolbar @group-name] + [view st/chat-name-container + [text {:style st/chat-name-text} "Chat name"] + [text-input + {:underlineColorAndroid color-purple + :style st/group-name-input + :autoFocus true + :placeholder "Group Name" + :onChangeText #(dispatch [:set ::group-name %]) + :onSubmitEditing #(dispatch [:set ::group-name nil])} + @group-name] + [text {:style st/members-text} "Members"] + [touchable-highlight {:on-press (fn [])} + [view st/add-container + [icon :add_gray st/add-icon] + [text {:style st/add-text} "Add members"]]] + [list-view + {:dataSource contacts-ds + :renderRow (fn [row _ _] + (let [row' (js->clj row :keywordize-keys true)] + (r/as-element [new-group-contact row']))) + :style st/contacts-list}]]])))) diff --git a/src/syng_im/new_group/styles.cljs b/src/syng_im/new_group/styles.cljs new file mode 100644 index 0000000000..695c616ea9 --- /dev/null +++ b/src/syng_im/new_group/styles.cljs @@ -0,0 +1,67 @@ +(ns syng-im.new-group.styles + (:require [syng-im.components.styles :refer [font + title-font + color-white + color-purple + text1-color + text2-color + toolbar-background1]])) + +(def toolbar-icon + {:width 20 + :height 18}) + +(def new-group-container + {:flex 1 + :flexDirection :column + :backgroundColor color-white}) + +(def chat-name-container + {:marginHorizontal 16}) + +(def chat-name-text + {:marginTop 24 + :marginBottom 16 + :color text2-color + :fontFamily font + :fontSize 14 + :lineHeight 20}) + +(def group-name-input + {:marginLeft -4 + :fontSize 14 + :fontFamily font + :color text1-color}) + +(def members-text + {:marginTop 24 + :marginBottom 16 + :color text2-color + :fontFamily font + :fontSize 14 + :lineHeight 20}) + +(def add-container + {:flexDirection :row + :marginBottom 16}) + +(def add-icon + {:marginVertical 19 + :marginHorizontal 3 + :width 17 + :height 17}) + +(def add-text + {:marginTop 18 + :marginLeft 32 + :color text2-color + :fontFamily font + :fontSize 14 + :lineHeight 20}) + +(def contacts-list + {:backgroundColor :white}) + +(def contact-container + {:flexDirection :row + :height 56}) diff --git a/src/syng_im/new_group/views/contact.cljs b/src/syng_im/new_group/views/contact.cljs new file mode 100644 index 0000000000..2a12eb2bc5 --- /dev/null +++ b/src/syng_im/new_group/views/contact.cljs @@ -0,0 +1,19 @@ +(ns syng-im.new-group.views.contact + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.components.react :refer [view]] + [syng-im.contacts.views.contact-inner :refer [contact-inner-view]] + [syng-im.components.item-checkbox :refer [item-checkbox]] + [reagent.core :as r] + [syng-im.new-group.styles :as st])) + +(defn new-group-contact [{:keys [whisper-identity] :as contact}] + (let [checked (r/atom false)] + (fn [] + [view st/contact-container + [item-checkbox + {:onToggle (fn [checked?] + (reset! checked checked?) + (dispatch [:select-for-new-group whisper-identity checked?])) + :checked @checked + :size 30}] + [contact-inner-view contact]]))) diff --git a/src/syng_im/participants/views/contact.cljs b/src/syng_im/participants/views/contact.cljs index 0309fee299..f193f24deb 100644 --- a/src/syng_im/participants/views/contact.cljs +++ b/src/syng_im/participants/views/contact.cljs @@ -1,7 +1,7 @@ (ns syng-im.participants.views.contact (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [syng-im.components.react :refer [view]] - [syng-im.components.contact-list.contact-inner :refer [contact-inner-view]] + [syng-im.contacts.views.contact-inner :refer [contact-inner-view]] [syng-im.components.item-checkbox :refer [item-checkbox]] [reagent.core :as r] [syng-im.participants.styles :as st])) diff --git a/src/syng_im/participants/views/create.cljs b/src/syng_im/participants/views/create.cljs index 38729add4b..7e2c522295 100644 --- a/src/syng_im/participants/views/create.cljs +++ b/src/syng_im/participants/views/create.cljs @@ -29,7 +29,6 @@ (let [contacts-ds (to-realm-datasource @contacts)] [view st/participants-container [new-participants-toolbar navigator] - [list-view {:dataSource contacts-ds - :enableEmptySections true - :renderRow new-participants-row - :style st/participants-list}]])))) + [list-view {:dataSource contacts-ds + :renderRow new-participants-row + :style st/participants-list}]])))) diff --git a/src/syng_im/participants/views/remove.cljs b/src/syng_im/participants/views/remove.cljs index d475406c8a..306d91084d 100644 --- a/src/syng_im/participants/views/remove.cljs +++ b/src/syng_im/participants/views/remove.cljs @@ -30,7 +30,6 @@ (let [contacts-ds (to-realm-datasource @contacts)] [view st/participants-container [remove-participants-toolbar navigator] - [list-view {:dataSource contacts-ds - :enableEmptySections true - :renderRow remove-participants-row - :style st/participants-list}]])))) + [list-view {:dataSource contacts-ds + :renderRow remove-participants-row + :style st/participants-list}]])))) diff --git a/src/syng_im/subs.cljs b/src/syng_im/subs.cljs index 39e1250f42..e20b7561c6 100644 --- a/src/syng_im/subs.cljs +++ b/src/syng_im/subs.cljs @@ -15,6 +15,10 @@ (fn [db _] (reaction (:chats @db)))) +(register-sub :get + (fn [db [_ k]] + (reaction (k @db)))) + ;; -- User data -------------------------------------------------------------- ;; (register-sub