From 74380bf3bbaef636cee191fb04ac601dd8a1cd76 Mon Sep 17 00:00:00 2001 From: Andrey Shovkoplyas Date: Wed, 29 Mar 2017 15:10:30 +0300 Subject: [PATCH] common components in chats list (+3 squashed commits) Squashed commits: [aecb167] removed old group settings screen [2fec747] common components in new chat screen [718e445] small fixes (+1 squashed commit) Squashed commits: [4a9be3c] rebase (+1 squashed commit) Squashed commits: [ef4f140] clear code, refactored groups using common components, moved styles from platform using defstyle macro (+1 squashed commit) Squashed commits: [b1ddb03] ns fixes (+2 squashed commits) Squashed commits: [236ec35] moved toggle contact item to components [42e0aa9] implemented list-separator, list-footer, list-header, renderers, contact-list-item, removed unused code --- src/status_im/android/core.cljs | 4 - src/status_im/android/platform.cljs | 64 +------ src/status_im/chats_list/screen.cljs | 34 +--- src/status_im/chats_list/styles.cljs | 19 -- .../components/action_button/styles.cljs | 3 +- src/status_im/components/common/common.cljs | 34 +++- src/status_im/components/common/styles.cljs | 55 ++++-- src/status_im/components/confirm_button.cljs | 13 -- src/status_im/components/contact/contact.cljs | 50 +++++ src/status_im/components/contact/styles.cljs | 69 +++++++ src/status_im/components/context_menu.cljs | 26 ++- .../components/renderers/renderers.cljs | 14 ++ src/status_im/components/sticky_button.cljs | 29 +++ src/status_im/components/styles.cljs | 27 --- src/status_im/contacts/default_contacts.cljs | 17 -- src/status_im/contacts/handlers.cljs | 7 + src/status_im/contacts/screen.cljs | 86 ++++----- src/status_im/contacts/search_results.cljs | 36 ---- src/status_im/contacts/styles.cljs | 136 +++----------- src/status_im/contacts/views/contact.cljs | 44 ----- .../contacts/views/contact_inner.cljs | 25 --- .../contacts/views/contact_list.cljs | 27 +-- .../contacts/views/contact_list_modal.cljs | 33 ++-- src/status_im/group_settings/screen.cljs | 174 ------------------ .../group_settings/styles/color_settings.cljs | 78 -------- .../group_settings/styles/group_settings.cljs | 163 ---------------- .../group_settings/views/color_settings.cljs | 48 ----- .../group_settings/views/member.cljs | 12 -- src/status_im/ios/core.cljs | 4 - src/status_im/ios/platform.cljs | 77 +------- src/status_im/new_chat/screen.cljs | 98 ++++------ src/status_im/new_chat/styles.cljs | 79 +------- src/status_im/new_group/screen_private.cljs | 29 ++- src/status_im/new_group/styles.cljs | 157 ++++++++-------- .../new_group/views/chat_group_settings.cljs | 50 +++-- .../new_group/views/contact_list.cljs | 111 +++++------ .../new_group/views/contact_toggle_list.cljs | 92 ++++----- src/status_im/new_group/views/group.cljs | 35 ++-- .../new_group/views/reorder_groups.cljs | 10 +- .../new_group/views/toggle_contact.cljs | 27 +-- src/status_im/participants/views/contact.cljs | 2 +- src/status_im/profile/edit/screen.cljs | 4 +- 42 files changed, 598 insertions(+), 1504 deletions(-) delete mode 100644 src/status_im/components/confirm_button.cljs create mode 100644 src/status_im/components/contact/contact.cljs create mode 100644 src/status_im/components/contact/styles.cljs create mode 100644 src/status_im/components/renderers/renderers.cljs create mode 100644 src/status_im/components/sticky_button.cljs delete mode 100644 src/status_im/contacts/default_contacts.cljs delete mode 100644 src/status_im/contacts/search_results.cljs delete mode 100644 src/status_im/contacts/views/contact.cljs delete mode 100644 src/status_im/contacts/views/contact_inner.cljs delete mode 100644 src/status_im/group_settings/screen.cljs delete mode 100644 src/status_im/group_settings/styles/color_settings.cljs delete mode 100644 src/status_im/group_settings/styles/group_settings.cljs delete mode 100644 src/status_im/group_settings/views/color_settings.cljs delete mode 100644 src/status_im/group_settings/views/member.cljs diff --git a/src/status_im/android/core.cljs b/src/status_im/android/core.cljs index 2caed63d27..16125f6bcd 100644 --- a/src/status_im/android/core.cljs +++ b/src/status_im/android/core.cljs @@ -13,7 +13,6 @@ http-bridge]] [status-im.components.main-tabs :refer [main-tabs]] [status-im.components.context-menu :refer [menu-context]] - [status-im.contacts.search-results :refer [contacts-search-results]] [status-im.contacts.views.contact-list :refer [contact-list]] [status-im.contacts.views.contact-list-modal :refer [contact-list-modal]] [status-im.contacts.views.new-contact :refer [new-contact]] @@ -38,7 +37,6 @@ [status-im.new-group.views.reorder-groups :refer [reorder-groups]] [status-im.participants.views.add :refer [new-participants]] [status-im.participants.views.remove :refer [remove-participants]] - [status-im.group-settings.screen :refer [group-settings]] [status-im.profile.screen :refer [profile my-profile]] [status-im.profile.edit.screen :refer [edit-my-profile]] [status-im.profile.photo-capture.screen :refer [profile-photo-capture]] @@ -125,10 +123,8 @@ :edit-group-contact-list edit-group-contact-list :edit-chat-group-contact-list edit-chat-group-contact-list :new-public-group new-public-group - :group-settings group-settings :contact-list main-tabs :contact-toggle-list contact-toggle-list - :contact-list-search-results contacts-search-results :group-contacts contact-list :reorder-groups reorder-groups :new-contact new-contact diff --git a/src/status_im/android/platform.cljs b/src/status_im/android/platform.cljs index a1eb6c5dec..0a60fb17fd 100644 --- a/src/status_im/android/platform.cljs +++ b/src/status_im/android/platform.cljs @@ -55,69 +55,7 @@ :item {:status-text {:color styles/color-black :line-height 22 :font-size 14}}} - :new-chat {:option-inner-container {:height 56} - :option-icon-container {:background-color styles/color-white - :margin-top 8} - :option-name-text {:font-size 16 - :color styles/text1-color} - :contact-list-title-container {:background-color styles/color-light-gray - :padding-top 28 - :padding-bottom 20 - :margin-top 0} - :contact-list-title {:color styles/text4-color - :font-size 14}} - :contacts {:subtitle {:color styles/color-gray4 - :font-size 14 - :flex-shrink 1} - :subtitle-count {:color styles/color-gray4 - :font-size 14} - :info-container {:margin-left 16} - :contact-inner-container {:height 56} - :contact-list-spacing {:background-color styles/color-white - :height 8} - :icon-check {:border-radius 2 - :width 17 - :height 17} - :group-header {:flexDirection :row - :alignItems :center - :padding-top 28 - :padding-bottom 20 - :padding-left 16 - :padding-right 14 - :backgroundColor styles/color-light-gray} - :show-all {:padding-left 72 - :height 56} - :show-all-text {:fontSize 14 - :color styles/color-blue - :letter-spacing 0.5} - :show-all-text-font :medium - :contact-container {:padding-right 16} - :name-text {:fontSize 16 - :line-height 24 - :color styles/text1-color}} - :new-group {:group-name-text {:font-size 12} - :members-text {:font-size 14} - :members-text-count {:font-size 14} - :add-text {:margin-left 16 - :line-height 24 - :font-size 16} - :contact-container {:height 56} - :settings-group-text {:letter-spacing 0.5 - :font-size 16} - :delete-group-prompt-text {:font-size 12} - :settings-group-item {:padding-left 16 - :height 56 - :flex-direction :row - :align-items :center} - :settings-group-container {:margin-top 23}} - :reorder-groups {:reorder-list-container {:padding-top 16} - :order-item-contacts {:font-size 16 - :line-height 24} - :add-to-contacts-text {:font-size 14 - :letter-spacing 0.5}} - :confirm-button-label {:color styles/color-white - :font-size 14 - :letter-spacing 0.5} + :contacts {:show-all-text-font :medium} :bottom-gradient {:height 3} :input-label {:left 4} :input-error-text {:margin-left 4} diff --git a/src/status_im/chats_list/screen.cljs b/src/status_im/chats_list/screen.cljs index 45ede3f8a3..f65eb93b86 100644 --- a/src/status_im/chats_list/screen.cljs +++ b/src/status_im/chats_list/screen.cljs @@ -1,6 +1,8 @@ (ns status-im.chats-list.screen (:require-macros [status-im.utils.views :refer [defview]]) - (:require [re-frame.core :refer [subscribe dispatch]] + (:require [re-frame.core :refer [dispatch]] + [status-im.components.common.common :as common] + [status-im.components.renderers.renderers :as renderers] [status-im.components.react :refer [list-view list-item view @@ -8,6 +10,7 @@ text icon image + linear-gradient touchable-highlight]] [status-im.components.native-action-button :refer [native-action-button]] [status-im.components.drawer.view :refer [open-drawer]] @@ -17,7 +20,6 @@ [status-im.components.toolbar-new.actions :as act] [status-im.components.toolbar-new.styles :as tst] [status-im.components.icons.custom-icons :refer [ion-icon]] - [status-im.components.react :refer [linear-gradient]] [status-im.components.sync-state.offline :refer [offline-view]] [status-im.components.context-menu :refer [context-menu]] [status-im.components.tabs.styles :refer [tabs-height]] @@ -70,25 +72,6 @@ :spacing 13 :on-press #(dispatch [:navigate-to :new-chat])}]) -(defn chat-list-padding [] - [view {:height (if ios? 0 8) - :background-color :white}]) - -(defn chat-shadow-item [] - (when-not ios? - [view {:height 12} - [chat-list-padding] - [linear-gradient {:style {:height 4} - :colors st/gradient-top-bottom-shadow}]])) - -(defn render-separator-fn [chats] - (fn [_ row-id _] - (list-item - (when (< row-id (dec (count chats))) - ^{:key (str "separator-" row-id)} - [view st/chat-separator-wrapper - [view st/chat-separator-item]])))) - (defview chats-list [] [chats [:filtered-chats] edit? [:get-in [:chat-list-ui-props :edit?]] @@ -102,10 +85,11 @@ [list-view {:dataSource (to-datasource chats) :renderRow (fn [[id :as row] _ _] (list-item ^{:key id} [chat-list-item row edit?])) - :renderHeader #(when (seq chats) (list-item [chat-list-padding])) - :renderFooter #(when (seq chats) (list-item [chat-shadow-item])) - :renderSeparator (when (get-in platform-specific [:chats :render-separator?]) - (render-separator-fn chats)) + :renderHeader renderers/list-header-renderer + :renderFooter #(list-item [view + [common/list-footer] + [common/bottom-shaddow]]) + :renderSeparator renderers/list-separator-renderer :style (st/list-container tabs-hidden?)}] (when (and (not edit?) (not search?) diff --git a/src/status_im/chats_list/styles.cljs b/src/status_im/chats_list/styles.cljs index 39cffe5d49..8524db3fcb 100644 --- a/src/status_im/chats_list/styles.cljs +++ b/src/status_im/chats_list/styles.cljs @@ -18,18 +18,6 @@ (merge {:background-color toolbar-background1} (get-in p/platform-specific [:component-styles :toolbar]))) - -(def gradient-top-bottom-shadow - ["rgba(24, 52, 76, 0.165)" - "rgba(24, 52, 76, 0.03)" - "rgba(24, 52, 76, 0.01)"]) - -(def chat-separator-wrapper - {:background-color color-white - :opacity 0.5 - :height 1 - :padding-left 72}) - (def chat-separator-item {:border-bottom-width 1 :border-bottom-color color-gray5}) @@ -153,13 +141,6 @@ {:flex-direction :row :padding-right 14}) -(def toolbar-btn - {:width 24 - :height 56 - :margin-left 24 - :alignItems :center - :justifyContent :center}) - (def opts-btn {:width 24 :height 24 diff --git a/src/status_im/components/action_button/styles.cljs b/src/status_im/components/action_button/styles.cljs index 9ffee17d9c..fd1cd4c17a 100644 --- a/src/status_im/components/action_button/styles.cljs +++ b/src/status_im/components/action_button/styles.cljs @@ -32,8 +32,7 @@ :font-size 17 :line-height 20} :android {:color color-black - :font-size 16 - :line-height 24}}) + :font-size 16}}) (defstyle actions-list {:background-color color-white diff --git a/src/status_im/components/common/common.cljs b/src/status_im/components/common/common.cljs index e89cc8fb2e..6b1ba9e108 100644 --- a/src/status_im/components/common/common.cljs +++ b/src/status_im/components/common/common.cljs @@ -1,5 +1,6 @@ (ns status-im.components.common.common - (:require [status-im.components.react :refer [view text linear-gradient]] + (:require [status-im.components.react :refer [view text icon linear-gradient]] + [status-im.components.context-menu :refer [context-menu]] [status-im.utils.platform :as p] [status-im.components.common.styles :as st])) @@ -28,14 +29,29 @@ (defn list-separator [] [separator st/list-separator]) -(defn form-title [label & [count-value]] +(defn list-footer [] + [view st/list-header-footer-spacing]) + +(defn list-header [] + [view st/list-header-footer-spacing]) + +(defn form-title [label & [{:keys [count-value extended? options]}]] [view [view st/form-title-container - [text {:style st/form-title - :font :medium} - label] - (when-not (nil? count-value) - [text {:style st/form-title-count - :font :medium} - count-value])] + [view st/form-title-inner-container + [text {:style st/form-title + :font :medium} + label] + (when-not (nil? count-value) + [text {:style st/form-title-count + :font :medium} + count-value])] + (when extended? + [view + [view {:flex 1}]]) + (when extended? + [view st/form-title-extend-container + [context-menu + [icon :options_gray] + options]])] [top-shaddow]]) diff --git a/src/status_im/components/common/styles.cljs b/src/status_im/components/common/styles.cljs index fc1801151a..e5921f45df 100644 --- a/src/status_im/components/common/styles.cljs +++ b/src/status_im/components/common/styles.cljs @@ -39,31 +39,50 @@ {:margin-left 72}) (defstyle form-title-container - {:padding-left 16 - :flex 1 + {:flex-direction :row}) + +(defstyle form-title-inner-container + {:padding-left 16 + :padding-right 16 + :flex 1 :flex-direction :row - :ios {:background-color color-white - :padding-top 19 - :padding-bottom 15 - :margin-top 16} - :android {:background-color color-light-gray - :padding-top 25 - :padding-bottom 18 - :margin-top 0}}) + :ios {:background-color color-white + :padding-top 19 + :padding-bottom 15 + :margin-top 16} + :android {:background-color color-light-gray + :padding-top 20 + :padding-bottom 17 + :margin-top 8}}) + +(defstyle form-title-extend-container + {:padding-right 16 + :ios {:margin-top 16 + :padding-top 16 + :background-color color-white} + :android {:margin-top 24 + :background-color color-light-gray}}) (defstyle form-title - {:ios {:color text1-color - :font-size 16} - :android {:color text4-color - :font-size 14}}) + {:flex-shrink 1 + :ios {:color text1-color + :letter-spacing -0.2 + :font-size 16} + :android {:color text4-color + :font-size 14}}) (def form-title-count (merge form-title - {:opacity 0.6 - :padding-left 8 - :color text4-color})) - + {:flex-shrink 0 + :opacity 0.6 + :padding-left 8 + :padding-right 5 + :color text4-color})) (defstyle form-spacer {:ios {:height 16} :android {:height 11}}) + +(defstyle list-header-footer-spacing + {:android {:background-color color-white + :height 8}}) \ No newline at end of file diff --git a/src/status_im/components/confirm_button.cljs b/src/status_im/components/confirm_button.cljs deleted file mode 100644 index 1becdba24d..0000000000 --- a/src/status_im/components/confirm_button.cljs +++ /dev/null @@ -1,13 +0,0 @@ -(ns status-im.components.confirm-button - (:require [status-im.components.styles :as st] - [status-im.utils.platform :refer [platform-specific]] - [status-im.components.react :refer [view - text - touchable-highlight]])) - -(defn confirm-button [label on-press] - [touchable-highlight {:on-press on-press} - [view st/confirm-button - [text {:style (get-in platform-specific [:component-styles :confirm-button-label]) - :uppercase? (get-in platform-specific [:uppercase?])} - label]]]) \ No newline at end of file diff --git a/src/status_im/components/contact/contact.cljs b/src/status_im/components/contact/contact.cljs new file mode 100644 index 0000000000..91bbf181a3 --- /dev/null +++ b/src/status_im/components/contact/contact.cljs @@ -0,0 +1,50 @@ +(ns status-im.components.contact.contact + (:require-macros [status-im.utils.views :refer [defview]]) + (:require [status-im.components.react :refer [view icon touchable-highlight text]] + [status-im.components.chat-icon.screen :refer [contact-icon-contacts-tab]] + [status-im.components.context-menu :refer [context-menu]] + [status-im.components.contact.styles :as st] + [status-im.utils.gfycat.core :refer [generate-gfy]] + [status-im.i18n :refer [get-contact-translated label]])) + +(defn contact-photo [contact] + [view + [contact-icon-contacts-tab contact]]) + +(defn contact-inner-view + ([{:keys [info style] {:keys [whisper-identity name] :as contact} :contact}] + [view (merge st/contact-inner-container style) + [contact-photo contact] + [view st/info-container + [text {:style st/name-text + :number-of-lines 1} + (if (pos? (count (:name contact))) + (get-contact-translated whisper-identity :name name) + ;;TODO is this correct behaviour? + (generate-gfy))] + (when info + [text {:style st/info-text} + info])]])) + +(defn contact-view [{:keys [contact extended? on-press extend-options info]}] + [touchable-highlight (when-not extended? + {:on-press (when on-press #(on-press contact))}) + [view + [view st/contact-container + [contact-inner-view {:contact contact :info info}] + (when extended? + [view st/more-btn + [context-menu + [icon :options_gray] + extend-options]])]]]) + +(defview toogle-contact-view [{:keys [whisper-identity] :as contact} selected-key on-toggle-handler] + [checked [selected-key whisper-identity]] + [touchable-highlight {:on-press #(on-toggle-handler checked whisper-identity)} + [view + [view (merge st/contact-container (when checked {:style st/selected-contact})) + [contact-inner-view (merge {:contact contact} + (when checked {:style st/selected-contact}))] + [view (st/icon-check-container checked) + (when checked + [icon :check_on st/check-icon])]]]]) \ No newline at end of file diff --git a/src/status_im/components/contact/styles.cljs b/src/status_im/components/contact/styles.cljs new file mode 100644 index 0000000000..ed2aa3cfea --- /dev/null +++ b/src/status_im/components/contact/styles.cljs @@ -0,0 +1,69 @@ +(ns status-im.components.contact.styles + (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) + (:require [status-im.components.styles :as common] + [status-im.utils.platform])) + +(defstyle contact-inner-container + {:flex 1 + :flexDirection :row + :align-items :center + :padding-left 16 + :backgroundColor common/color-white + :android {:height 56} + :ios {:height 63}}) + +(def info-container + {:flex 1 + :flexDirection :column + :margin-left 16 + :margin-right 5 + :justify-content :center}) + +(defstyle name-text + {:color common/text1-color + :android {:fontSize 16 + :line-height 24} + :ios {:fontSize 17 + :line-height 20 + :letter-spacing -0.2}}) + +(def info-text + {:marginTop 1 + :fontSize 12 + :color common/text2-color}) + +(def contact-container + {:flex-direction :row + :align-items :center + :background-color common/color-white + :padding-right 16}) + +(def more-btn + {:width 24 + :height 24 + :alignItems :center + :justifyContent :center}) + +(def selected-contact + {:background-color common/selected-contact-color}) + +(def toggle-container + {:width 56 + :height 56 + :alignItems :center + :justifyContent :center}) + +(defnstyle icon-check-container [checked] + {:background-color (if checked common/color-light-blue common/color-gray5) + :alignItems :center + :justifyContent :center + :android {:border-radius 2 + :width 17 + :height 17} + :ios {:border-radius 50 + :width 24 + :height 24}}) + +(def check-icon + {:width 12 + :height 12}) \ No newline at end of file diff --git a/src/status_im/components/context_menu.cljs b/src/status_im/components/context_menu.cljs index aea5ccbf64..0248bdf18f 100644 --- a/src/status_im/components/context_menu.cljs +++ b/src/status_im/components/context_menu.cljs @@ -1,6 +1,6 @@ (ns status-im.components.context-menu (:require [reagent.core :as r] - [status-im.components.styles :as st] + [status-im.components.styles :as common] [status-im.i18n :refer [label]] [status-im.utils.platform :refer [platform-specific ios?]] [re-frame.core :refer [dispatch]] @@ -24,6 +24,26 @@ (def menu-options (get-class "MenuOptions")) (def menu-option (get-class "MenuOption")) +(defn context-menu-options [custom-styles] + {:customStyles {:optionsContainer + (merge {:elevation 2 + :margin-top 30 + :padding-top 8 + :width 164 + :padding-bottom 8} + (:optionsContainer custom-styles)) + :optionWrapper + (merge {:padding-left 16 + :padding-right 16 + :justify-content :center + :height 48} + (:optionWrapper custom-styles))}}) + +(defn context-menu-text [destructive?] + {:font-size 15 + :line-height 20 + :color (if destructive? common/color-light-red common/text1-color)}) + (def list-selection-fn (:list-selection-fn platform-specific)) (defn open-ios-menu [options] @@ -42,9 +62,9 @@ trigger]] [menu {:onSelect #(when % (do (%) nil))} [menu-trigger trigger] - [menu-options (st/context-menu-options customStyles) + [menu-options (context-menu-options customStyles) (for [{:keys [style value destructive?] :as option} options] ^{:key option} [menu-option {:value value} - [text {:style (merge (st/context-menu-text destructive?) style)} + [text {:style (merge (context-menu-text destructive?) style)} (:text option)]])]])) diff --git a/src/status_im/components/renderers/renderers.cljs b/src/status_im/components/renderers/renderers.cljs new file mode 100644 index 0000000000..ddf3c8d650 --- /dev/null +++ b/src/status_im/components/renderers/renderers.cljs @@ -0,0 +1,14 @@ +(ns status-im.components.renderers.renderers + (:require [status-im.components.react :refer [list-item]] + [status-im.components.common.common :as common])) + +(defn list-separator-renderer [_ row-id _] + (list-item + ^{:key row-id} + [common/list-separator])) + +(defn list-header-renderer [& _] + (list-item [common/list-header])) + +(defn list-footer-renderer [& _] + (list-item [common/list-footer])) diff --git a/src/status_im/components/sticky_button.cljs b/src/status_im/components/sticky_button.cljs new file mode 100644 index 0000000000..85c53ac5fd --- /dev/null +++ b/src/status_im/components/sticky_button.cljs @@ -0,0 +1,29 @@ +(ns status-im.components.sticky-button + (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) + (:require [status-im.components.styles :as common] + [status-im.utils.platform :refer [platform-specific]] + [status-im.components.react :refer [view + text + touchable-highlight]])) + +(def sticky-button-style + {:flex-direction :row + :height 52 + :justify-content :center + :align-items :center + :background-color common/color-light-blue}) + +(defstyle sticky-button-label-style + {:color common/color-white + :ios {:font-size 17 + :line-height 20 + :letter-spacing -0.2} + :android {:font-size 14 + :letter-spacing 0.5}}) + +(defn sticky-button [label on-press] + [touchable-highlight {:on-press on-press} + [view sticky-button-style + [text {:style sticky-button-label-style + :uppercase? (get-in platform-specific [:uppercase?])} + label]]]) \ No newline at end of file diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs index 142b2d7d28..972d71c7ef 100644 --- a/src/status_im/components/styles.cljs +++ b/src/status_im/components/styles.cljs @@ -91,30 +91,3 @@ (def button-input {:flex 1 :flexDirection :column}) - -(def confirm-button - {:flex-direction :row - :height 52 - :justify-content :center - :align-items :center - :background-color color-light-blue}) - -(defn context-menu-options [custom-styles] - {:customStyles {:optionsContainer - (merge {:elevation 2 - :margin-top 30 - :padding-top 8 - :width 164 - :padding-bottom 8} - (:optionsContainer custom-styles)) - :optionWrapper - (merge {:padding-left 16 - :padding-right 16 - :justify-content :center - :height 48} - (:optionWrapper custom-styles))}}) - -(defn context-menu-text [destructive?] - {:font-size 15 - :line-height 20 - :color (if destructive? color-light-red text1-color)}) diff --git a/src/status_im/contacts/default_contacts.cljs b/src/status_im/contacts/default_contacts.cljs deleted file mode 100644 index dc6e976f9d..0000000000 --- a/src/status_im/contacts/default_contacts.cljs +++ /dev/null @@ -1,17 +0,0 @@ -(ns status-im.contacts.default-contacts - (:require [status-im.constants :refer [wallet-chat-id]] - [clojure.string :as s])) - -(def contacts - [{:whisper-identity wallet-chat-id - :name (s/capitalize wallet-chat-id) - :photo-path :icon_wallet_avatar - :dapp? true - :add-chat? true} - - {:whisper-identity "dapp-auction" - :name "Auction House" - :photo-path "http://auctionhouse.dappbench.com/images/auctionhouse.png" - :dapp? true - :dapp-url "http://auctionhouse.dappbench.com"} - ]) diff --git a/src/status_im/contacts/handlers.cljs b/src/status_im/contacts/handlers.cljs index c75e4a09c4..37ffa5b52f 100644 --- a/src/status_im/contacts/handlers.cljs +++ b/src/status_im/contacts/handlers.cljs @@ -380,3 +380,10 @@ :new-chat-name "") (assoc-in [:toolbar-search :show] nil) (assoc-in [:toolbar-search :text] "")))) + +(register-handler :open-chat-with-contact + (u/side-effect! + (fn [_ [_ {:keys [whisper-identity] :as contact}]] + (dispatch [:send-contact-request! contact]) + (dispatch [:navigate-to-clean :chat-list]) + (dispatch [:start-chat whisper-identity {}])))) \ No newline at end of file diff --git a/src/status_im/contacts/screen.cljs b/src/status_im/contacts/screen.cljs index a8ef755d26..1c7993c11a 100644 --- a/src/status_im/contacts/screen.cljs +++ b/src/status_im/contacts/screen.cljs @@ -1,9 +1,7 @@ (ns status-im.contacts.screen (:require-macros [status-im.utils.views :refer [defview]]) - (:require [reagent.core :as r] - [clojure.string :as str] - [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [status-im.components.common.common :refer [separator top-shaddow bottom-shaddow]] + (:require [re-frame.core :refer [dispatch]] + [status-im.components.common.common :as common] [status-im.components.react :refer [view text image @@ -11,18 +9,17 @@ touchable-highlight scroll-view list-view - list-item] :as react] + list-item]] [status-im.components.native-action-button :refer [native-action-button native-action-button-item]] [status-im.components.status-bar :refer [status-bar]] [status-im.components.toolbar-new.view :refer [toolbar]] [status-im.components.toolbar-new.actions :as act] - [status-im.components.toolbar-new.styles :as tst] [status-im.components.drawer.view :refer [open-drawer]] [status-im.components.icons.custom-icons :refer [ion-icon]] [status-im.components.context-menu :refer [context-menu]] - [status-im.contacts.views.contact :refer [contact-view]] - [status-im.utils.platform :refer [platform-specific]] + [status-im.components.contact.contact :refer [contact-view]] + [status-im.utils.platform :refer [platform-specific ios? android?]] [status-im.i18n :refer [label]] [status-im.contacts.styles :as st] [status-im.components.styles :refer [color-blue @@ -37,9 +34,8 @@ {:text (label :t/reorder-groups) :value #(dispatch [:navigate-to :reorder-groups])}]) (defn toolbar-actions [] - (let [new-contact? (get-in platform-specific [:contacts :new-contact-in-toolbar?])] - [(act/search #(dispatch [:navigate-to :group-contacts nil :show-search])) - (act/opts (if new-contact? toolbar-options (rest toolbar-options)))])) + [(act/search #(dispatch [:navigate-to :group-contacts nil :show-search])) + (act/opts (if ios? toolbar-options (rest toolbar-options)))]) (defn toolbar-view [] [toolbar {:title (label :t/contacts) @@ -51,37 +47,29 @@ :actions [{:image :blank}] :title (label :t/edit-contacts)}]) -(defn options-btn [group] - (let [options [{:value #(dispatch [:navigate-to :edit-group group :contact-group]) - :text (label :t/edit-group)}]] - [view st/more-btn - [context-menu - [icon :options_gray] - options]])) +(defn contact-options [contact group] + (let [options [{:value #(dispatch [:hide-contact contact]) + :text (label :t/delete-contact) + :destructive? true}]] + (if group + (conj options + {:value #(dispatch [:remove-contact-from-group + (:whisper-identity contact) + (:group-id group)]) + :text (label :t/remove-from-group)}) + options))) -(defn subtitle-view [subtitle contacts-count group extended?] - [view (get-in platform-specific [:component-styles :contacts :group-header]) - [text {:style (get-in platform-specific [:component-styles :contacts :subtitle]) - :font :medium} - subtitle] - [text {:style (merge st/contact-group-count - (get-in platform-specific [:component-styles :contacts :subtitle-count])) - :uppercase? (get-in platform-specific [:contacts :uppercase-subtitles?]) - :font :medium} - (str contacts-count)] - [view {:flex 1}] - (when extended? - [options-btn group])]) - -(defn contact-group-form [{:keys [contacts contacts-count group edit?]}] +(defn contact-group-form [{:keys [contacts contacts-count group edit? click-handler]}] (let [subtitle (:name group)] - [view st/contact-group + [view (when subtitle - [subtitle-view subtitle contacts-count group edit?]) - (when subtitle - [top-shaddow]) + [common/form-title subtitle + {:count-value contacts-count + :extended? edit? + :options [{:value #(dispatch [:navigate-to :edit-group group :contact-group]) + :text (label :t/edit-group)}]}]) [view st/contacts-list - [view st/contact-list-spacing] + [common/list-footer] (doall (map (fn [contact] ^{:key contact} @@ -89,20 +77,14 @@ [contact-view {:contact contact :extended? edit? - :extend-options (when group - [{:value #(dispatch [:hide-contact contact]) - :text (label :t/delete-contact) - :destructive? true} - {:value #(dispatch [:remove-contact-from-group - (:whisper-identity contact) - (:group-id group)]) - :text (label :t/remove-from-group)}])}] + :on-press #(dispatch [:open-chat-with-contact %]) + :extend-options (contact-options contact group)}] (when-not (= contact (last contacts)) - [separator st/contact-item-separator])]) + [common/list-separator])]) contacts))] (when (< contacts-limit contacts-count) [view - [separator st/contact-item-separator] + [common/list-separator] [view st/show-all [touchable-highlight {:on-press #(do (when edit? @@ -113,7 +95,7 @@ :uppercase? (get-in platform-specific [:uppercase?]) :font (get-in platform-specific [:component-styles :contacts :show-all-text-font])} (str (- contacts-count contacts-limit) " " (label :t/more))]]]]]) - [bottom-shaddow]])) + [common/bottom-shaddow]])) (defview contact-group-view [{:keys [group] :as params}] [contacts [:all-added-group-contacts-with-limit (:group-id group) contacts-limit] @@ -134,7 +116,7 @@ [ion-icon {:name :md-create :style create-icon}]]]) -(defview contact-list [current-view?] +(defview contact-list [_] [contacts [:get-added-contacts-with-limit contacts-limit] contacts-count [:added-contacts-count] edit? [:get-in [:contacts-ui-props :edit?]] @@ -156,7 +138,7 @@ [contact-group-view {:group group :edit? edit?}])] [view st/empty-contact-groups - [react/icon :group_big st/empty-contacts-icon] + [icon :group_big st/empty-contacts-icon] [text {:style st/empty-contacts-text} (label :t/no-contacts)]])] - (when (and (not edit?) (get-in platform-specific [:contacts :action-button?])) + (when (and android? (not edit?)) [contacts-action-button])]) diff --git a/src/status_im/contacts/search_results.cljs b/src/status_im/contacts/search_results.cljs deleted file mode 100644 index 55e47fb96d..0000000000 --- a/src/status_im/contacts/search_results.cljs +++ /dev/null @@ -1,36 +0,0 @@ -(ns status-im.contacts.search-results - (:require-macros [status-im.utils.views :refer [defview]]) - (:require [re-frame.core :refer [subscribe dispatch]] - [status-im.components.status-bar :refer [status-bar]] - [status-im.components.react :refer [view - text - icon - list-view - list-item]] - [status-im.components.toolbar.view :refer [toolbar]] - [status-im.components.toolbar.actions :as act] - [status-im.contacts.views.contact :refer [contact-view]] - [status-im.utils.listview :refer [to-datasource]] - [status-im.utils.platform :refer [platform-specific]] - [status-im.i18n :refer [label]] - [status-im.contacts.styles :as st])) - -(defview contacts-search-results [] - [search-text [:get :contact-list-search-text] - contacts [:contacts-with-letters]] - [view st/search-container - [status-bar] - [toolbar {:nav-action (act/back #(dispatch [:navigate-back])) - :title search-text - :style (get-in platform-specific [:component-styles :toolbar])}] - (if (empty? contacts) - [view st/search-empty-view - ;; todo change icon - [icon :group_big st/empty-contacts-icon] - [text {:style st/empty-contacts-text} - "No contacts found"]] - [list-view {:dataSource (to-datasource contacts) - :renderRow (fn [row _ _] - (list-item [contact-view {:contact row - :letter? true - :extended? true}]))}])]) diff --git a/src/status_im/contacts/styles.cljs b/src/status_im/contacts/styles.cljs index 8552a93ec8..a0b2faeb42 100644 --- a/src/status_im/contacts/styles.cljs +++ b/src/status_im/contacts/styles.cljs @@ -1,18 +1,7 @@ (ns status-im.contacts.styles - (:require-macros [status-im.utils.styles :refer [defnstyle]]) - (:require [status-im.components.styles :refer [text1-color - text2-color - text3-color - color-white - color-separator - color-gray2 - color-gray4 - color-blue - color-light-red - color-gray]] - [status-im.components.toolbar.styles :refer [toolbar-background1 toolbar-background2]] - [status-im.components.tabs.styles :as tabs-st] - [status-im.utils.platform :as p])) + (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) + (:require [status-im.components.styles :as common] + [status-im.components.tabs.styles :as tabs-st])) ;; Contacts list @@ -21,7 +10,7 @@ (def contact-groups {:flex 1 - :background-color toolbar-background2}) + :background-color common/color-light-gray}) (defnstyle contacts-list-container [tabs-hidden?] {:flex 1 @@ -29,10 +18,10 @@ :ios {:margin-bottom (if tabs-hidden? 20 (+ 16 tabs-st/tabs-height))}}) (def contacts-list - {:background-color color-white}) + {:background-color common/color-white}) (def contacts-list-modal - {:background-color toolbar-background2}) + {:background-color common/color-light-gray}) (def empty-contact-groups (merge contact-groups @@ -46,55 +35,27 @@ (def empty-contacts-text {:margin-top 12 :font-size 16 - :color color-gray2}) - -(def contact-group - {:flex-direction :column}) + :color common/color-gray2}) (def contact-group-count {:margin-left 8 :opacity 0.6}) -(def show-all - (merge (get-in p/platform-specific [:component-styles :contacts :show-all]) - {:flexDirection :row - :alignItems :center - :backgroundColor color-white})) +(defstyle show-all + {:flexDirection :row + :alignItems :center + :backgroundColor common/color-white + :padding-left 72 + :android {:height 56} + :ios {:height 64}}) -(def show-all-text - (get-in p/platform-specific [:component-styles :contacts :show-all-text])) - -(def contact-item-separator - {:margin-left 72}) - -(def contact-container - (merge (get-in p/platform-specific [:component-styles :contacts :contact-container]) - {:flex-direction :row - :align-items :center - :background-color color-white})) - -(def letter-container - {:paddingTop 11 - :paddingLeft 20 - :width 56}) - -(def letter-text - {:fontSize 24 - :color text3-color}) - -(def option-inner-container - {:flex 1 - :flex-direction :row - :height 56 - :background-color color-white - :border-bottom-color color-separator - :border-bottom-width 0.5}) - -(def option-inner - {:width 48 - :height 48 - :margin-top 4 - :margin-left 12}) +(defstyle show-all-text + {:android {:fontSize 14 + :color common/color-blue + :letter-spacing 0.5} + :ios {:fontSize 16 + :color common/color-gray4 + :letter-spacing -0.2}}) (def option-inner-image {:width 24 @@ -104,38 +65,7 @@ (def group-icon (assoc option-inner-image - :tint-color color-gray)) - -(def contact-list-spacing - (get-in p/platform-specific [:component-styles :contacts :contact-list-spacing])) - -(def contact-inner-container - (merge (get-in p/platform-specific [:component-styles :contacts :contact-inner-container]) - {:flex 1 - :flexDirection :row - :align-items :center - :padding-left 16 - :backgroundColor color-white})) - -(def info-container - (merge (get-in p/platform-specific [:component-styles :contacts :info-container]) - {:flex 1 - :flexDirection :column})) - -(def name-text - (get-in p/platform-specific [:component-styles :contacts :name-text])) - -(def info-text - {:marginTop 1 - :fontSize 12 - :color text2-color}) - -(def more-btn - {:width 24 - :height 24 - :margin-left 16 - :alignItems :center - :justifyContent :center}) + :tint-color common/color-gray)) ; New contact @@ -164,33 +94,17 @@ (def address-explication {:textAlign :center - :color color-gray}) + :color common/color-gray}) (def qr-input {:margin-right 42}) -(def enter-address-icon - {:margin-left 21 - :margin-right 21 - :margin-top 19 - :width 20 - :height 18}) - -(def scan-qr-icon - {:margin-left 21 - :margin-right 20 - :margin-top 18 - :width 20 - :height 20}) - -;; Contacts search - (def search-container {:flex 1 - :background-color color-white}) + :background-color common/color-white}) (def search-empty-view {:flex 1 - :background-color color-white + :background-color common/color-white :align-items :center :justify-content :center}) diff --git a/src/status_im/contacts/views/contact.cljs b/src/status_im/contacts/views/contact.cljs deleted file mode 100644 index c8bd2af14c..0000000000 --- a/src/status_im/contacts/views/contact.cljs +++ /dev/null @@ -1,44 +0,0 @@ -(ns status-im.contacts.views.contact - (:require-macros [status-im.utils.views :refer [defview]]) - (:require [status-im.components.react :refer [view text icon touchable-highlight]] - [re-frame.core :refer [dispatch]] - [status-im.contacts.styles :as st] - [status-im.contacts.views.contact-inner :refer [contact-inner-view]] - [status-im.components.context-menu :refer [context-menu]] - [status-im.i18n :refer [label]] - [status-im.utils.platform :refer [platform-specific]])) - -(defn- on-press [{:keys [whisper-identity] :as contact}] - (dispatch [:send-contact-request! contact]) - (dispatch [:navigate-to-clean :chat-list]) - (dispatch [:start-chat whisper-identity {}])) - -(defn letter-view [letter] - [view st/letter-container - (when letter - [text {:style st/letter-text} letter])]) - -(defn options-btn [contact more-options] - (let [options [{:value #(dispatch [:hide-contact contact]) - :text (label :t/delete-contact) - :destructive? true}]] - [view st/more-btn - [context-menu - [icon :options_gray] - (or more-options options)]])) - -;;TODO: maybe it's better to have only one global component contact-view with the types: default, extended and toggle -;;TODO: at the moment toggle in the other component new-group-contact -(defview contact-view [{{:keys [whisper-identity letter] :as contact} :contact - :keys [extended? letter? on-click extend-options info]}] - [chat [:get-chat whisper-identity]] - [touchable-highlight - (when-not extended? - {:on-press #((or on-click on-press) contact)}) - [view - [view st/contact-container - (when letter? - [letter-view letter]) - [contact-inner-view {:contact contact :info info}] - (when extended? - [options-btn contact extend-options])]]]) diff --git a/src/status_im/contacts/views/contact_inner.cljs b/src/status_im/contacts/views/contact_inner.cljs deleted file mode 100644 index 752c7a3752..0000000000 --- a/src/status_im/contacts/views/contact_inner.cljs +++ /dev/null @@ -1,25 +0,0 @@ -(ns status-im.contacts.views.contact-inner - (:require [status-im.components.react :refer [view image text]] - [status-im.components.chat-icon.screen :refer [contact-icon-contacts-tab]] - [status-im.contacts.styles :as st] - [status-im.utils.gfycat.core :refer [generate-gfy]] - [status-im.i18n :refer [get-contact-translated label]])) - -(defn contact-photo [contact] - [view - [contact-icon-contacts-tab contact]]) - -(defn contact-inner-view - ([{:keys [info style] {:keys [whisper-identity name] :as contact} :contact}] - [view (merge st/contact-inner-container style) - [contact-photo contact] - [view st/info-container - [text {:style st/name-text - :number-of-lines 1} - (if (pos? (count (:name contact))) - (get-contact-translated whisper-identity :name name) - ;; todo is this correct behaviour? - (generate-gfy))] - (when info - [text {:style st/info-text} - info])]])) diff --git a/src/status_im/contacts/views/contact_list.cljs b/src/status_im/contacts/views/contact_list.cljs index 9883d5b500..af0e02e44c 100644 --- a/src/status_im/contacts/views/contact_list.cljs +++ b/src/status_im/contacts/views/contact_list.cljs @@ -1,14 +1,16 @@ (ns status-im.contacts.views.contact-list (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [status-im.components.common.common :refer [separator]] + [status-im.components.common.common :as common] + [status-im.components.renderers.renderers :as renderers] + [status-im.components.contact.contact :refer [contact-view]] + [status-im.contacts.screen :refer [contact-options]] [status-im.components.react :refer [view text image icon touchable-highlight list-view list-item]] - [status-im.contacts.views.contact :refer [contact-view]] [status-im.components.text-field.view :refer [text-field]] [status-im.components.status-bar :refer [status-bar]] [status-im.components.toolbar-new.view :refer [toolbar-with-search toolbar]] @@ -26,15 +28,9 @@ (list-item ^{:key row} [contact-view {:contact row + :on-press #(dispatch [:open-chat-with-contact %]) :extended? edit? - :extend-options (when group - [{:value #(dispatch [:hide-contact row]) - :text (label :t/delete-contact) - :destructive? true} - {:value #(dispatch [:remove-contact-from-group - (:whisper-identity row) - (:group-id group)]) - :text (label :t/remove-from-group)}])}]))) + :extend-options (contact-options row group)}]))) (defview contact-list-toolbar-edit [group] [toolbar {:nav-action (act/back #(dispatch [:set-in [:contact-list-ui-props :edit?] false])) @@ -57,20 +53,15 @@ :actions [(act/opts [{:text (label :t/edit) :value #(dispatch [:set-in [:contact-list-ui-props :edit?] true])}])]})) -(defn render-separator [_ row-id _] - (list-item ^{:key row-id} - [separator st/contact-item-separator])) - (defview contacts-list-view [group edit?] [contacts [:all-added-group-contacts-filtered (:group-id group)]] [list-view {:dataSource (lw/to-datasource contacts) :enableEmptySections true :renderRow (render-row group edit?) - :bounces false :keyboardShouldPersistTaps true - :renderHeader #(list-item [view st/contact-list-spacing]) - :renderFooter #(list-item [view st/contact-list-spacing]) - :renderSeparator render-separator + :renderHeader renderers/list-header-renderer + :renderFooter renderers/list-footer-renderer + :renderSeparator renderers/list-separator-renderer :style st/contacts-list}]) (defview contact-list [] diff --git a/src/status_im/contacts/views/contact_list_modal.cljs b/src/status_im/contacts/views/contact_list_modal.cljs index be52833d56..c1ceec9a8b 100644 --- a/src/status_im/contacts/views/contact_list_modal.cljs +++ b/src/status_im/contacts/views/contact_list_modal.cljs @@ -1,14 +1,15 @@ (ns status-im.contacts.views.contact-list-modal (:require-macros [status-im.utils.views :refer [defview]]) - (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [status-im.components.common.common :refer [list-separator form-title bottom-shaddow]] + (:require [re-frame.core :refer [dispatch]] + [status-im.components.common.common :as common] + [status-im.components.renderers.renderers :as renderers] [status-im.components.react :refer [view text image icon touchable-highlight list-view list-item]] - [status-im.contacts.views.contact :refer [contact-view]] + [status-im.components.contact.contact :refer [contact-view]] [status-im.components.action-button.action-button :refer [action-button action-separator]] [status-im.components.action-button.styles :refer [actions-list]] @@ -16,17 +17,10 @@ [status-im.components.status-bar :refer [status-bar]] [status-im.components.toolbar-new.view :refer [toolbar-with-search toolbar]] [status-im.components.toolbar-new.actions :as act] - [status-im.components.toolbar-new.styles :refer [toolbar-background1]] - [status-im.components.drawer.view :refer [drawer-view open-drawer]] - [status-im.components.image-button.view :refer [scan-button]] + [status-im.components.drawer.view :refer [drawer-view]] [status-im.contacts.styles :as st] [status-im.utils.listview :as lw] - [status-im.i18n :refer [label]] - [status-im.utils.platform :refer [platform-specific]])) - -(defn render-separator [_ row-id _] - (list-item ^{:key row-id} - [list-separator])) + [status-im.i18n :refer [label]])) (defview contact-list-modal-toolbar [] [show-search [:get-in [:toolbar-search :show]] @@ -60,7 +54,7 @@ (list-item ^{:key row} [contact-view {:contact row - :on-click #(when click-handler + :on-press #(when click-handler (click-handler row action params))}]))) (defview contact-list-modal [] @@ -80,11 +74,12 @@ :renderHeader #(list-item [view [actions-view action click-handler] - [bottom-shaddow] - [form-title (label :t/choose-from-contacts) (count contacts)] - [view st/contact-list-spacing]]) + [common/bottom-shaddow] + [common/form-title (label :t/choose-from-contacts) + {:count-value (count contacts)}] + [common/list-header]]) :renderFooter #(list-item [view - [view st/contact-list-spacing] - [bottom-shaddow]]) - :renderSeparator render-separator + [common/list-footer] + [common/bottom-shaddow]]) + :renderSeparator renderers/list-separator-renderer :style st/contacts-list-modal}]]]) diff --git a/src/status_im/group_settings/screen.cljs b/src/status_im/group_settings/screen.cljs deleted file mode 100644 index 0bb40c0c44..0000000000 --- a/src/status_im/group_settings/screen.cljs +++ /dev/null @@ -1,174 +0,0 @@ -(ns status-im.group-settings.screen - (:require-macros [status-im.utils.views :refer [defview]]) - (:require [re-frame.core :refer [subscribe dispatch]] - [status-im.components.react :refer [view - text-input - text - image - icon - modal - picker - picker-item - scroll-view - touchable-highlight]] - [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar.view :refer [toolbar]] - [status-im.components.chat-icon.screen :refer [chat-icon-view-action]] - [status-im.group-settings.styles.group-settings :as st] - [status-im.group-settings.views.member :refer [member-view]] - [status-im.i18n :refer [label]] - [status-im.group-settings.views.color-settings :refer [color-settings]])) - -(defn remove-member [] - (dispatch [:remove-participants])) - -(defn close-member-menu [] - (dispatch [:set :selected-participants #{}])) - -;; TODO not in design -(defview member-menu [] - [{:keys [name] :as participant} [:selected-participant]] - (when participant - [modal {:animationType :none - :transparent false - :onRequestClose close-member-menu} - [touchable-highlight {:style st/modal-container - :on-press close-member-menu} - [view st/modal-inner-container - [text {:style st/modal-member-name} name] - [touchable-highlight {:on-press remove-member} - [view - [text {:style st/modal-remove-text} - (label :t/remove)]]]]]])) - -(defview chat-members [] - [members [:current-chat-contacts]] - [view st/chat-members-container - (for [member members] - ^{:key member} [member-view member])]) - -(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])]]]) - -(defview chat-color-icon [] - [chat-color [:chat :color]] - [view {:style (st/chat-color-icon chat-color)}]) - -(defn show-chat-color-picker [] - (dispatch [:group-settings :show-color-picker true])) - -(defn settings-view [] - (let [settings [{:custom-icon [chat-color-icon] - :title (label :t/change-color) - :handler show-chat-color-picker} - ;; TODO not implemented: Notifications - (merge {:title (label :t/notifications-title) - :subtitle (label :t/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 (label :t/clear-history) - ;; TODO show confirmation dialog? - :handler #(dispatch [:clear-history])} - {:icon :bin - :icon-style {:width 12 - :height 18} - :title (label :t/delete-and-leave) - ;; TODO show confirmation dialog? - :handler #(dispatch [:leave-group-chat])}]] - [view st/settings-container - (for [setting settings] - ^{:key setting} [setting-view setting])])) - -(defview chat-icon [] - [chat-id [:chat :chat-id] - group-chat [:chat :group-chat] - name [:chat :name] - color [:chat :color]] - [view st/action - [chat-icon-view-action chat-id group-chat name color false]]) - -(defn new-group-toolbar [] - [view - [status-bar] - [toolbar {:title (label :t/chat-settings) - :custom-action [chat-icon]}]]) - -(defn focus [] - (dispatch [:set ::name-input-focused true])) - -(defn blur [] - (dispatch [:set ::name-input-focused false])) - -(defn save [] - (dispatch [:set-chat-name])) - -(defview chat-name [] - [name [:chat :name] - new-name [:get :new-chat-name] - validation-messages [:new-chat-name-validation-messages] - focused? [:get ::name-input-focused] - valid? [:new-chat-name-valid?]] - [view - [text {:style st/chat-name-text} (label :t/chat-name)] - [view (st/chat-name-value-container focused?) - [text-input {:style st/chat-name-value - :ref #(when (and % focused?) (.focus %)) - :on-change-text #(dispatch [:set :new-chat-name %]) - :on-focus focus - :on-blur blur} - name] - (if (or focused? (not= name new-name)) - [touchable-highlight {:style (st/chat-name-btn-edit-container valid?) - :on-press save} - [view [icon :ok_purple st/add-members-icon]]] - [touchable-highlight {:style (st/chat-name-btn-edit-container true) - :on-press focus} - [view [text {:style st/chat-name-btn-edit-text} (label :t/edit)]]])] - (when (pos? (count validation-messages)) - [text {:style st/chat-name-validation-message} (first validation-messages)])]) - -(defview members [] - [current-pk [:get :current-public-key] - group-admin [:chat :group-admin]] - (when (= current-pk group-admin) - [view - [text {:style st/members-text} (label :t/members-title)] - [touchable-highlight {:on-press #(dispatch [:navigate-to :add-participants])} - ;; TODO add participants view is not in design - [view st/add-members-container - [icon :add_gray st/add-members-icon] - [text {:style st/add-members-text} - (label :t/add-members)]]] - [chat-members]])) - -(defview group-settings [] - [public? [:chat :public?]] - [view st/group-settings - [new-group-toolbar] - [scroll-view st/body - (when-not public? [chat-name]) - [members] - [text {:style st/settings-text} - (label :t/settings)] - [settings-view]] - [color-settings] - [member-menu]]) diff --git a/src/status_im/group_settings/styles/color_settings.cljs b/src/status_im/group_settings/styles/color_settings.cljs deleted file mode 100644 index 1180edfe55..0000000000 --- a/src/status_im/group_settings/styles/color_settings.cljs +++ /dev/null @@ -1,78 +0,0 @@ -(ns status-im.group-settings.styles.color-settings) - -(def color-highlight - {:flex 0.25}) - -(def color-icon-comtainer - {:justify-content :center - :align-items :center}) - -(defn color-item [color] - {:width 70 - :height 70 - :border-radius 70 - :background-color color - :justify-content :center - :align-items :center}) - -(def icon-ok - {:width 17.5 - :height 13.5}) - -(def container-height 225) - -(def label-container-top-margin 16) -(def label-container-bottom-margin 8) -(def font-size 16) - -(def color-settings-container - {:position :absolute - :right 0 - :left 0 - :bottom 0 - :height container-height - :background-color :white - :border-top-color :#0000001f - :border-top-width 1 - :align-items :stretch}) - -(def label-container - {:margin-top label-container-top-margin - :align-items :center - :margin-bottom 8}) - -(def label - {:font-size 16 - :color :black}) - -(def close-highlight - {:position :absolute - :bottom (- container-height 15 - label-container-top-margin - label-container-bottom-margin) - :right 18}) - -(def close-container-size 24) -(def close-settings-container - {:width close-container-size - :height close-container-size - :justify-content :center - :align-items :center}) - -(def close-icon - {:width 12 - :height 12}) - -(def all-colors-container - {:flex-direction :column - :align-items :stretch - :height (- container-height - label-container-top-margin - font-size - close-container-size)}) - -(def color-container - {:flex 0.5 - :flex-direction :row - :align-items :center - :justify-content :center}) diff --git a/src/status_im/group_settings/styles/group_settings.cljs b/src/status_im/group_settings/styles/group_settings.cljs deleted file mode 100644 index 3e98cf9547..0000000000 --- a/src/status_im/group_settings/styles/group_settings.cljs +++ /dev/null @@ -1,163 +0,0 @@ -(ns status-im.group-settings.styles.group-settings - (:require [status-im.components.styles :refer [color-white - color-purple - separator-color - text1-color - text2-color]])) - -(def modal-container - {:flex 1 - :justifyContent :center - :padding 20}) - -(def modal-inner-container - {:borderRadius 10 - :alignItems :center - :padding 5 - :backgroundColor color-white}) - -(def modal-member-name - {:color text2-color - :fontSize 14 - :lineHeight 20}) - -(def modal-remove-text - {:margin 10 - :color text1-color - :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 - :fontSize 14 - :lineHeight 20}) - -(def chat-members-container - {:marginBottom 10}) - -(def action - {:width 56 - :height 56 - :alignItems :center - :justifyContent :center}) - -(def group-settings - {:flex 1 - :flexDirection :column - :backgroundColor color-white}) - -(def body - {:flex 1 - :flexDirection :column}) - -(def chat-name-text - {:marginTop 24 - :marginLeft 16 - :marginBottom 16 - :color text2-color - :fontSize 14 - :lineHeight 20}) - -(defn chat-name-value-container [focused?] - {:flexDirection :row - :marginLeft 16 - :height 56 - :alignItems :center - :justifyContent :center - :borderBottomWidth 2 - :borderBottomColor (if focused? color-purple separator-color)}) - -(def chat-name-value - {:flex 1 - :fontSize 16 - :color text1-color}) - -(def chat-name-validation-message - {:marginTop 8 - :marginLeft 16 - :color :red}) - -(defn chat-name-btn-edit-container [enabled?] - {:padding 16 - :justifyContent :center - :opacity (if enabled? 1 0.3)}) - -(def chat-name-btn-edit-text - {:color text2-color - :fontSize 16 - :lineHeight 20}) - -(def members-text - {:marginTop 24 - :marginLeft 16 - :marginBottom 16 - :color text2-color - :fontSize 14 - :lineHeight 20}) - -(def add-members-icon - {:marginVertical -1 - :marginLeft 19 - :marginHorizontal 3 - :width 17 - :height 17}) - -(def add-members-container - {:flexDirection :row}) - -(def add-members-text - {:marginTop 18 - :marginLeft 32 - :color text2-color - :fontSize 16 - :lineHeight 20}) - -(def settings-text - {:marginTop 24 - :marginLeft 16 - :marginBottom 16 - :color text2-color - :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}) - -(def setting-subtitle - {:marginTop 1 - :color text2-color - :fontSize 12}) - -(defn chat-color-icon [color] - {:borderRadius 12 - :width 24 - :height 24 - :backgroundColor color}) diff --git a/src/status_im/group_settings/views/color_settings.cljs b/src/status_im/group_settings/views/color_settings.cljs deleted file mode 100644 index 7c305f8b87..0000000000 --- a/src/status_im/group_settings/views/color_settings.cljs +++ /dev/null @@ -1,48 +0,0 @@ -(ns status-im.group-settings.views.color-settings - (:require-macros [status-im.utils.views :refer [defview]]) - (:require [re-frame.core :refer [dispatch]] - [status-im.components.react :refer [view - text - icon - touchable-highlight]] - [status-im.i18n :refer [label]] - [status-im.group-settings.styles.color-settings :as st])) - -(defn close-chat-color-picker [] - (dispatch [:group-settings :show-color-picker false])) - -(def all-colors - (->> [:#a187d5 :#7099e6 :#424874 :#96c0b7 - :#d3b99f :#eb6464 :#6d98ba :#c17767] - (partition 4) - (map-indexed vector))) - -(defn color-icon [current-color color] - (let [selected-color? (= (keyword current-color) color)] - [touchable-highlight - {:on-press #(dispatch [:set-chat-color color]) - :style st/color-highlight} - [view st/color-icon-comtainer - [view (st/color-item color) - (when selected-color? - [icon :ok st/icon-ok])]]])) - -(defview color-settings [] - [show-color-picker [:group-settings :show-color-picker] - current-color [:chat :color]] - (when show-color-picker - [view st/color-settings-container - [view st/label-container - [text st/label (label :t/change-color)]] - [touchable-highlight - {:on-press close-chat-color-picker - :style st/close-highlight} - [view st/close-settings-container - [icon :close_gray st/close-icon]]] - [view st/all-colors-container - (for [[idx colors] all-colors] - ^{:key idx} - [view st/color-container - (for [color (take-last 4 colors)] - ^{:key color} - [color-icon current-color color])])]])) diff --git a/src/status_im/group_settings/views/member.cljs b/src/status_im/group_settings/views/member.cljs deleted file mode 100644 index e2edc020d7..0000000000 --- a/src/status_im/group_settings/views/member.cljs +++ /dev/null @@ -1,12 +0,0 @@ -(ns status-im.group-settings.views.member - (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [status-im.contacts.views.contact :refer [contact-view]] - [status-im.i18n :refer [label]])) - -(defn member-view [{:keys [whisper-identity role] :as contact}] - ;; TODO implement :role property for group chat contact - [contact-view - {:contact contact - :extended? true - :info role - :on-click #(dispatch [:set :selected-participants #{whisper-identity}])}]) diff --git a/src/status_im/ios/core.cljs b/src/status_im/ios/core.cljs index b7c68a94bb..9e7652a71b 100644 --- a/src/status_im/ios/core.cljs +++ b/src/status_im/ios/core.cljs @@ -11,7 +11,6 @@ splash-screen http-bridge]] [status-im.components.main-tabs :refer [main-tabs]] - [status-im.contacts.search-results :refer [contacts-search-results]] [status-im.contacts.views.contact-list :refer [contact-list]] [status-im.contacts.views.contact-list-modal :refer [contact-list-modal]] [status-im.contacts.views.new-contact :refer [new-contact]] @@ -36,7 +35,6 @@ [status-im.new-group.screen-public :refer [new-public-group]] [status-im.participants.views.add :refer [new-participants]] [status-im.participants.views.remove :refer [remove-participants]] - [status-im.group-settings.screen :refer [group-settings]] [status-im.profile.screen :refer [profile my-profile]] [status-im.profile.edit.screen :refer [edit-my-profile]] [status-im.profile.photo-capture.screen :refer [profile-photo-capture]] @@ -107,10 +105,8 @@ :add-participants-toggle-list add-participants-toggle-list :reorder-groups reorder-groups :new-public-group new-public-group - :group-settings group-settings :contact-list main-tabs :contact-toggle-list contact-toggle-list - :contact-list-search-results contacts-search-results :group-contacts contact-list :new-contact new-contact :qr-scanner qr-scanner diff --git a/src/status_im/ios/platform.cljs b/src/status_im/ios/platform.cljs index edb43e9fcf..473c7f4caa 100644 --- a/src/status_im/ios/platform.cljs +++ b/src/status_im/ios/platform.cljs @@ -61,82 +61,7 @@ :icon {:padding-top 0 :bottom -4 :justify-content :flex-end}}} - :new-chat {:option-inner-container {:height 64} - :option-icon-container {:background-color styles/color-blue-transparent - :margin-top 12} - :option-name-text {:font-size 17 - :color styles/color-light-blue} - :contact-list-title-container {:background-color styles/color-white - :padding-top 19 - :padding-bottom 15 - :margin-top 16} - :contact-list-title {:color styles/text1-color - :font-size 16}} - :contacts {:subtitle {:color styles/text1-color - :font-size 16 - :letter-spacing -0.2 - :flex-shrink 1} - :subtitle-count {:color styles/color-gray4 - :font-size 16 - :letter-spacing -0.2} - :info-container {:margin-left 16} - :contact-inner-container {:height 63} - :icon-check {:border-radius 50 - :width 24 - :height 24} - :group-header {:flexDirection :row - :alignItems :center - :margin-top 24 - :padding-top 19 - :padding-bottom 15 - :padding-left 16 - :padding-right 16 - :backgroundColor styles/color-white} - :show-all {:padding-left 72 - :height 64} - :show-all-text {:fontSize 16 - :color styles/color-gray4 - :letter-spacing -0.2} - :show-all-text-font :default - :contact-container {:padding-right 16} - :name-text {:fontSize 17 - :line-height 20 - :letter-spacing -0.2 - :color styles/text1-color}} - :new-group {:group-name-text {:font-size 13} - :members-text {:letter-spacing -0.2 - :font-size 16} - :members-text-count {:letter-spacing -0.2 - :font-size 16} - :add-text {:margin-left 14 - :letter-spacing -0.2 - :font-size 17 - :line-height 20} - :contact-container {:height 63} - :settings-group-text {:color styles/color-light-blue - :letter-spacing -0.2 - :font-size 17 - :line-height 20} - :settings-group-item {:padding-left 16 - :height 64 - :flex-direction :row - :align-items :center} - :settings-group-container {:margin-top 25} - :settings-icon-container {:background-color "#628fe333" - :border-radius 50} - :delete-group-prompt-text {:font-size 14 - :letter-spacing -0.2} - :delete-icon-container {:background-color "#d84b4b33" - :border-radius 50}} - :reorder-groups {:order-item-separator {:margin-left 16 - :opacity 0.5} - :order-item-contacts {:font-size 17 - :line-height 20 - :letter-spacing -0.2}} - :confirm-button-label {:color styles/color-white - :font-size 17 - :line-height 20 - :letter-spacing -0.2} + :contacts {:show-all-text-font :default} :bottom-gradient {:height 1} :input-label {:left 0} :input-error-text {:margin-left 0} diff --git a/src/status_im/new_chat/screen.cljs b/src/status_im/new_chat/screen.cljs index 90902a1889..35df0908e9 100644 --- a/src/status_im/new_chat/screen.cljs +++ b/src/status_im/new_chat/screen.cljs @@ -1,85 +1,53 @@ (ns status-im.new-chat.screen (:require-macros [status-im.utils.views :refer [defview]]) - (:require [re-frame.core :refer [subscribe dispatch]] + (:require [re-frame.core :refer [dispatch]] + [status-im.components.common.common :as common] + [status-im.components.renderers.renderers :as renderers] + [status-im.components.action-button.action-button :refer [action-button + action-separator]] + [status-im.components.action-button.styles :refer [actions-list]] [status-im.components.react :refer [view text linear-gradient image touchable-highlight list-view list-item]] - [status-im.contacts.views.contact :refer [contact-view]] + [status-im.components.contact.contact :refer [contact-view]] [status-im.components.status-bar :refer [status-bar]] [status-im.components.toolbar-new.view :refer [toolbar-with-search]] [status-im.components.drawer.view :refer [drawer-view]] [status-im.new-chat.styles :as st] [status-im.utils.listview :as lw] - [status-im.i18n :refer [label]] - [status-im.utils.platform :refer [ios?]])) - -(defn list-bottom-shadow [] - [linear-gradient {:style {:height 4} - :colors st/list-bottom-shadow}]) - -(defn list-top-shadow [] - [linear-gradient {:style {:height 3} - :colors st/list-top-shadow}]) - -(defn list-separator [] - (when ios? - [view st/list-separator-wrapper - [view st/list-separator]])) - -(defn options-list-item [{:keys [on-press icon-uri label-key]}] - [touchable-highlight {:on-press on-press} - [view st/option-container - [view st/option-inner-container - [view st/option-icon-container - [image {:source {:uri icon-uri} - :style st/option-icon}]] - [view st/option-info-container - [text {:style st/option-name-text} - (label label-key)]]]]]) + [status-im.i18n :refer [label]])) (defn options-list [] - [view - [view (st/options-list) - [options-list-item {:on-press #(dispatch [:open-contact-toggle-list :chat-group]) - :icon-uri :icon_private_group_big - :label-key :t/new-group-chat}] - [list-separator] - [options-list-item {:on-press #(dispatch [:navigate-to :new-public-group]) - :icon-uri :icon_public_group_big - :label-key :t/new-public-group-chat}] - [list-separator] - [options-list-item {:on-press #(dispatch [:navigate-to :new-contact]) - :icon-uri :icon_add_blue - :label-key :t/add-new-contact}]] - (when-not ios? [list-bottom-shadow])]) + [view actions-list + [action-button (label :t/new-group-chat) + :private_group_big + #(dispatch [:open-contact-toggle-list :chat-group])] + [action-separator] + [action-button (label :t/new-public-group-chat) + :public_group_big + #(dispatch [:navigate-to :new-public-group])] + [action-separator] + [action-button (label :t/add-new-contact) + :add_blue + #(dispatch [:navigate-to :new-contact])]]) (defn contact-list-row [] (fn [row _ _] - (list-item ^{:key row} [contact-view {:contact row}]))) - -(defn contact-list-title [contact-count] - [view - [view st/contact-list-title-container - [text {:style st/contact-list-title - :font :medium} - (label :t/choose-from-contacts) - (when ios? [text {:style st/contact-list-title-count - :font :medium} - " " contact-count])]] - (when-not ios? [list-top-shadow])]) - -(defn contact-list-separator [_ row-id _] - (when ios? (list-item ^{:key row-id} [list-separator]))) + (list-item ^{:key row} + [contact-view {:contact row + :on-press #(dispatch [:open-chat-with-contact %])}]))) (defview new-chat-toolbar [] - [show-search [:get-in [:toolbar-search :show]]] + [show-search [:get-in [:toolbar-search :show]] + search-text [:get-in [:toolbar-search :text]]] [view [status-bar] (toolbar-with-search {:show-search? (= show-search :contact-list) + :search-text search-text :search-key :contact-list :title (label :t/contacts-group-new-chat) :search-placeholder (label :t/search-for)})]) @@ -99,10 +67,12 @@ :renderHeader #(list-item [view [options-list] - [contact-list-title (count contacts)] - (when-not ios? [view st/spacing-top])]) - :renderSeparator contact-list-separator - :renderFooter #(list-item (when-not ios? [view - [view st/spacing-bottom] - [list-bottom-shadow]])) + [common/bottom-shaddow] + [common/form-title (label :t/choose-from-contacts) + {:count-value (count contacts)}] + [common/list-header]]) + :renderSeparator renderers/list-separator-renderer + :renderFooter #(list-item [view + [common/list-footer] + [common/bottom-shaddow]]) :style st/contacts-list}])]]) diff --git a/src/status_im/new_chat/styles.cljs b/src/status_im/new_chat/styles.cljs index 982858336d..41d4d6e69a 100644 --- a/src/status_im/new_chat/styles.cljs +++ b/src/status_im/new_chat/styles.cljs @@ -1,85 +1,10 @@ (ns status-im.new-chat.styles - (:require [status-im.components.styles :as st] - [status-im.utils.platform :as p])) - -(def list-bottom-shadow - ["rgba(24, 52, 76, 0.165)" - "rgba(24, 52, 76, 0.03)" - "rgba(24, 52, 76, 0.01)"]) - -(def list-top-shadow - ["rgba(24, 52, 76, 0.01)" - "rgba(24, 52, 76, 0.03)"]) - -(def list-separator - {:border-bottom-width 1 - :border-bottom-color st/color-gray5 - :margin-left 72 - :opacity 0.5}) - -(def list-separator-wrapper - {:background-color st/color-white - :height 1}) - -(defn options-list [] - {:padding-top (if p/ios? 0 8) - :padding-bottom (if p/ios? 0 8) - :background-color st/color-white}) - -(def option-container - {:flex-direction :row - :background-color st/color-white}) - -(def option-inner-container - (merge {:flex 1 - :flex-direction :row - :background-color st/color-white} - (get-in p/platform-specific [:component-styles :new-chat :option-inner-container]))) - -(def option-icon-container - (merge {:width 40 - :height 40 - :border-radius 50 - :margin-left 16} - (get-in p/platform-specific [:component-styles :new-chat :option-icon-container]))) - -(def option-icon - {:width 24 - :height 24 - :top 8 - :left 8}) - -(def option-info-container - {:flex 1 - :flexDirection :column - :margin-left 16 - :justifyContent :center}) - -(def option-name-text - (get-in p/platform-specific [:component-styles :new-chat :option-name-text])) - -(def contact-list-title-container - (merge {:padding-left 16} - (get-in p/platform-specific [:component-styles :new-chat :contact-list-title-container]))) - -(def contact-list-title - (get-in p/platform-specific [:component-styles :new-chat :contact-list-title])) - -(def contact-list-title-count - {:color st/text4-color - :opacity 0.5}) + (:require [status-im.components.styles :as common])) (def contacts-list-container {:flex 1 :margin-bottom 0}) (def contacts-list - {:backgroundColor st/color-light-gray}) + {:backgroundColor common/color-light-gray}) -(def spacing-top - {:background-color st/color-white - :height 8}) - -(def spacing-bottom - {:background-color st/color-white - :height 8}) diff --git a/src/status_im/new_group/screen_private.cljs b/src/status_im/new_group/screen_private.cljs index 9f13d72832..0140c117dd 100644 --- a/src/status_im/new_group/screen_private.cljs +++ b/src/status_im/new_group/screen_private.cljs @@ -1,13 +1,15 @@ (ns status-im.new-group.screen-private (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :refer [dispatch]] - [status-im.contacts.views.contact :refer [contact-view]] + [status-im.components.contact.contact :refer [contact-view]] + [status-im.components.common.common :as common] [status-im.components.react :refer [view scroll-view keyboard-avoiding-view list-view list-item]] - [status-im.components.confirm-button :refer [confirm-button]] + [status-im.components.renderers.renderers :as renderers] + [status-im.components.sticky-button :refer [sticky-button]] [status-im.utils.listview :refer [to-datasource]] [status-im.new-group.styles :as st] [status-im.new-group.views.group :refer [group-toolbar @@ -15,8 +17,7 @@ group-name-view add-btn more-btn - delete-btn - separator]] + delete-btn]] [status-im.new-group.validations :as v] [status-im.i18n :refer [label]] [status-im.utils.platform :refer [ios?]] @@ -29,7 +30,7 @@ contacts-count [:all-added-group-contacts-count (:group-id group)]] [view (when (pos? contacts-count) - [separator]) + [common/list-separator]) [view (doall (map (fn [row] @@ -43,14 +44,11 @@ :text (label :t/remove-from-group)}] :extended? true}] (when-not (= row (last contacts)) - [separator])]) + [common/list-separator])]) contacts))] (when (< contacts-limit contacts-count) [more-btn contacts-limit contacts-count #(dispatch [:navigate-to :edit-group-contact-list])])]) -(defn save [] - (dispatch [:set-group-name])) - (defview edit-group [] [group-name [:get :new-chat-name] group [:get-contact-group] @@ -69,17 +67,12 @@ (dispatch [:delete-group]) (dispatch [:navigate-to-clean :contact-list]))]] (when save-btn-enabled? - [confirm-button (label :t/save) save])])) - -(defn render-separator [_ row-id _] - (list-item ^{:key row-id} - [separator])) + [sticky-button (label :t/save) #(dispatch [:set-group-name])])])) (defn render-row [row _ _] (list-item ^{:key row} - [contact-view {:contact row - :on-click #()}])) + [contact-view {:contact row}])) (defview new-group [] [contacts [:selected-group-contacts] @@ -96,9 +89,9 @@ :renderRow render-row :bounces false :keyboardShouldPersistTaps true - :renderSeparator render-separator}]] + :renderSeparator renderers/list-separator-renderer}]] (when save-btn-enabled? - [confirm-button (label :t/save) + [sticky-button (label :t/save) (if (= group-type :contact-group) #(dispatch [:create-new-group group-name]) #(dispatch [:create-new-group-chat group-name]))])])) diff --git a/src/status_im/new_group/styles.cljs b/src/status_im/new_group/styles.cljs index 591a677fb0..f3ef2edc43 100644 --- a/src/status_im/new_group/styles.cljs +++ b/src/status_im/new_group/styles.cljs @@ -13,12 +13,6 @@ color-gray5]] [status-im.utils.platform :refer [platform-specific] :as p])) -(defn ps-reorder [item] - (get-in platform-specific [:component-styles :reorder-groups item])) - -(defn ps-new-group [item] - (get-in platform-specific [:component-styles :new-group item])) - (defn toolbar-icon [enabled?] {:width 20 :height 18 @@ -34,9 +28,9 @@ :flex-direction :column :background-color color-light-gray}) -(def reorder-list-container - (merge {:flex 1} - (ps-reorder :reorder-list-container))) +(defstyle reorder-list-container + {:flex 1 + :android {:padding-top 16}}) (def chat-name-container {:margin-top 21 @@ -71,24 +65,25 @@ :height 40 :padding-bottom 0}) -(def group-name-text - (merge (ps-new-group :group-name-text) - {:letter-spacing -0.1 - :color color-gray4})) +(defstyle group-name-text + {:letter-spacing -0.1 + :color color-gray4 + :ios {:font-size 13} + :android {:font-size 12}}) -(def members-container - {:flex-direction :row - :padding-top 20}) +(defstyle members-text + {:color color-gray4 + :ios {:letter-spacing -0.2 + :font-size 16} + :android {:font-size 14}}) -(def members-text - (merge (ps-new-group :members-text) - {:color color-gray4})) - -(def members-text-count - (merge (ps-new-group :members-text-count) - {:margin-left 8 - :color color-gray4 - :opacity 0.6})) +(defstyle members-text-count + {:margin-left 8 + :color color-gray4 + :opacity 0.6 + :ios {:letter-spacing -0.2 + :font-size 16} + :android {:font-size 14}}) (def add-container {:flex-direction :row @@ -96,73 +91,70 @@ :height 64 :margin-top 12}) -(def settings-icon-container - (merge (ps-new-group :settings-icon-container) - {:width 40 - :height 40 - :align-items :center - :justify-content :center})) +(defstyle settings-icon-container + {:width 40 + :height 40 + :align-items :center + :justify-content :center + :ios {:background-color "#628fe333" + :border-radius 50}}) (def add-icon {:align-items :center :width 24 :height 24}) -(def add-group-text - (merge (ps-new-group :settings-group-text) - {:color color-light-blue})) +(defstyle add-group-text + {:color color-light-blue + :ios {:color color-light-blue + :letter-spacing -0.2 + :font-size 17 + :line-height 20} + :android {:letter-spacing 0.5 + :font-size 16}}) (def settings-group-text - (merge (ps-new-group :settings-group-text))) + add-group-text) (def settings-group-text-container {:padding-left 16}) (def delete-group-text - (merge (ps-new-group :settings-group-text) + (merge add-group-text {:color color-light-red})) -(def delete-group-prompt-text - (merge (ps-new-group :delete-group-prompt-text) - {:color color-gray4 - :padding-top 5})) +(defstyle delete-group-prompt-text + {:color color-gray4 + :padding-top 5 + :ios {:font-size 14 + :letter-spacing -0.2} + :android {:font-size 12}}) -(def contact-container - (merge (ps-new-group :contact-container) - {:flex-direction :row - :justify-content :center - :align-items :center})) +(defstyle contact-container + {:flex-direction :row + :justify-content :center + :align-items :center + :ios {:height 63} + :android {:height 56}}) -(def selected-contact - {:background-color selected-contact-color}) +(defstyle settings-group-container + {:ios {:margin-top 25} + :android {:margin-top 23}}) -(def icon-check-container - (merge (get-in platform-specific [:component-styles :contacts :icon-check]) - {:alignItems :center - :justifyContent :center})) +(defstyle settings-group-item + {:padding-left 16 + :flex-direction :row + :align-items :center + :ios {:height 64} + :android {:height 56}}) -(def toggle-container - {:width 56 - :height 56 - :alignItems :center - :justifyContent :center}) - -(def check-icon - {:width 12 - :height 12}) - -(def settings-group-container - (ps-new-group :settings-group-container)) - -(def settings-group-item - (ps-new-group :settings-group-item)) - -(def delete-icon-container - (merge (ps-new-group :delete-icon-container) - {:width 40 - :height 40 - :align-items :center - :justify-content :center})) +(defstyle delete-icon-container + {:width 40 + :height 40 + :align-items :center + :justify-content :center + :ios {:background-color "#d84b4b33" + :border-radius 50}}) (def order-item-container {:background-color color-white}) @@ -187,10 +179,14 @@ :line-height 20 :letter-spacing -0.2}}) -(def order-item-contacts - (merge (ps-reorder :order-item-contacts) - {:padding-left 8 - :color color-gray4})) +(defstyle order-item-contacts + {:padding-left 8 + :color color-gray4 + :ios {:font-size 17 + :line-height 20 + :letter-spacing -0.2} + :android {:font-size 16 + :line-height 24}}) (defstyle order-item-icon {:android {:padding-horizontal 16} @@ -200,9 +196,10 @@ {:background-color color-white}) (def order-item-separator - (merge {:height 1 - :background-color color-gray5} - (ps-reorder :order-item-separator))) + {:height 1 + :background-color color-gray5 + :ios {:margin-left 16 + :opacity 0.5}}) (def toolbar-title-with-count-text {:color text1-color diff --git a/src/status_im/new_group/views/chat_group_settings.cljs b/src/status_im/new_group/views/chat_group_settings.cljs index 1c5b304393..962f33ab7d 100644 --- a/src/status_im/new_group/views/chat_group_settings.cljs +++ b/src/status_im/new_group/views/chat_group_settings.cljs @@ -1,38 +1,35 @@ (ns status-im.new-group.views.chat-group-settings (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :refer [dispatch]] - [status-im.contacts.views.contact :refer [contact-view]] - [status-im.components.react :refer [view - scroll-view - keyboard-avoiding-view - icon - touchable-highlight]] - [status-im.components.confirm-button :refer [confirm-button]] - [status-im.new-group.styles :as st] - [status-im.new-group.views.group :refer [group-toolbar - group-chat-settings-btns - group-name-view - add-btn - more-btn - delete-btn - separator]] - [status-im.new-group.validations :as v] - [status-im.i18n :refer [label]] - [status-im.utils.platform :refer [ios?]] - [cljs.spec :as s])) + [status-im.components.contact.contact :refer [contact-view]] + [status-im.components.common.common :as common] + [status-im.components.react :refer [view + scroll-view + keyboard-avoiding-view + icon + touchable-highlight]] + [status-im.components.sticky-button :refer [sticky-button]] + [status-im.new-group.styles :as st] + [status-im.new-group.views.group :refer [group-toolbar + group-chat-settings-btns + group-name-view + add-btn + more-btn + delete-btn]] + [status-im.new-group.validations :as v] + [status-im.i18n :refer [label]] + [status-im.utils.platform :refer [ios?]] + [cljs.spec :as s])) (def contacts-limit 3) -(defn save-chat-name [] - (dispatch [:set-chat-name])) - (defview chat-group-contacts-view [admin?] [contacts [:current-chat-contacts]] (let [limited-contacts (take contacts-limit contacts) contacts-count (count contacts)] [view (when (and admin? (pos? contacts-count)) - [separator]) + [common/list-separator]) [view (doall (map (fn [row] @@ -40,14 +37,13 @@ [view [contact-view {:contact row - :on-click #() :extend-options [{:value #(do (dispatch [:set :selected-participants #{(:whisper-identity row)}]) (dispatch [:remove-participants])) - :text (label :t/remove)}] + :text (label :t/remove)}] :extended? admin?}] (when-not (= row (last limited-contacts)) - [separator])]) + [common/list-separator])]) limited-contacts))] (when (< contacts-limit contacts-count) [more-btn contacts-limit contacts-count #(dispatch [:navigate-to :edit-chat-group-contact-list])])])) @@ -77,4 +73,4 @@ [view st/separator] [group-chat-settings-btns]]] (when save-btn-enabled? - [confirm-button (label :t/save) save-chat-name])])) + [sticky-button (label :t/save) #(dispatch [:set-chat-name])])])) diff --git a/src/status_im/new_group/views/contact_list.cljs b/src/status_im/new_group/views/contact_list.cljs index c4a1a60d2c..3aad6fd504 100644 --- a/src/status_im/new_group/views/contact_list.cljs +++ b/src/status_im/new_group/views/contact_list.cljs @@ -1,20 +1,17 @@ (ns status-im.new-group.views.contact-list (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :refer [dispatch]] - [status-im.contacts.views.contact :refer [contact-view]] + [status-im.components.contact.contact :refer [contact-view]] + [status-im.components.renderers.renderers :as renderers] [status-im.components.react :refer [view text list-view list-item]] - [status-im.components.confirm-button :refer [confirm-button]] [status-im.components.status-bar :refer [status-bar]] [status-im.components.toolbar-new.view :refer [toolbar-with-search]] [status-im.utils.listview :refer [to-datasource]] - [status-im.new-group.views.group :refer [separator]] [status-im.new-group.styles :as st] - [status-im.contacts.styles :as cst] - [status-im.i18n :refer [label]] - [status-im.components.toolbar-new.actions :as act])) + [status-im.i18n :refer [label]])) (defview contact-list-toolbar [title] [show-search [:get-in [:toolbar-search :show]] @@ -26,37 +23,51 @@ :title title :search-placeholder (label :t/search-contacts)})) -(defn render-separator [_ row-id _] - (list-item ^{:key row-id} - [separator])) - -(defn render-spacing [] - #(list-item [view cst/contact-list-spacing])) - -(defn render-row [group] - (fn [row _ _] - (list-item - ^{:key row} - [contact-view {:contact row - :extended? true - :extend-options (when group - [{:value #(dispatch [:remove-contact-from-group - (:whisper-identity row) - (:group-id group)]) - :text (label :t/remove-from-group)}]) - :on-click nil}]))) - -(defview contacts-list-view [group] - [contacts [:all-added-group-contacts-filtered (:group-id group)]] +(defn contacts-list [contacts renderer-function] [view {:flex 1} [list-view {:dataSource (to-datasource contacts) :enableEmptySections true - :renderRow (render-row group) + :renderRow renderer-function :bounces false :keyboardShouldPersistTaps true - :renderSeparator render-separator - :renderFooter (render-spacing) - :renderHeader (render-spacing)}]]) + :renderSeparator renderers/list-separator-renderer + :renderFooter renderers/list-footer-renderer + :renderHeader renderers/list-header-renderer}]]) + +(defview chat-contacts-list-view [] + [contacts [:contacts-filtered :current-chat-contacts] + current-pk [:get :current-public-key] + group-admin [:chat :group-admin]] + (let [admin? (= current-pk group-admin)] + [contacts-list contacts (fn [row _ _] + (list-item + ^{:key row} + [contact-view {:contact row + :extended? admin? + :extend-options [{:value #(do + (dispatch [:set :selected-participants + #{(:whisper-identity row)}]) + (dispatch [:remove-participants])) + :text (label :t/remove)}]}]))])) + +(defview contacts-list-view [group] + [contacts [:all-added-group-contacts-filtered (:group-id group)]] + [contacts-list contacts (fn [row _ _] + (list-item + ^{:key row} + [contact-view {:contact row + :extended? true + :extend-options [{:value #(dispatch [:remove-contact-from-group + (:whisper-identity row) + (:group-id group)]) + :text (label :t/remove-from-group)}]}]))]) + +(defview edit-chat-group-contact-list [] + [chat-name [:chat :name]] + [view st/group-container + [status-bar] + [contact-list-toolbar chat-name] + [chat-contacts-list-view]]) (defview edit-group-contact-list [] [group [:get-contact-group] @@ -64,38 +75,4 @@ [view st/group-container [status-bar] [contact-list-toolbar (:name group)] - [contacts-list-view group]]) - -(defn render-chat-row [admin?] - (fn [row _ _] - (list-item - ^{:key row} - [contact-view {:contact row - :extended? admin? - :extend-options [{:value #(do - (dispatch [:set :selected-participants #{(:whisper-identity row)}]) - (dispatch [:remove-participants])) - :text (label :t/remove)}] - :on-click #()}]))) - -(defview chat-contacts-list-view [] - [contacts [:contacts-filtered :current-chat-contacts] - current-pk [:get :current-public-key] - group-admin [:chat :group-admin]] - (let [admin? (= current-pk group-admin)] - [view {:flex 1} - [list-view {:dataSource (to-datasource contacts) - :enableEmptySections true - :renderRow (render-chat-row admin?) - :bounces false - :keyboardShouldPersistTaps true - :renderSeparator render-separator - :renderFooter (render-spacing) - :renderHeader (render-spacing)}]])) - -(defview edit-chat-group-contact-list [] - [chat-name [:chat :name]] - [view st/group-container - [status-bar] - [contact-list-toolbar chat-name] - [chat-contacts-list-view]]) \ No newline at end of file + [contacts-list-view group]]) \ No newline at end of file diff --git a/src/status_im/new_group/views/contact_toggle_list.cljs b/src/status_im/new_group/views/contact_toggle_list.cljs index b3fbdc9345..607099cd75 100644 --- a/src/status_im/new_group/views/contact_toggle_list.cljs +++ b/src/status_im/new_group/views/contact_toggle_list.cljs @@ -1,24 +1,24 @@ (ns status-im.new-group.views.contact-toggle-list (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :refer [dispatch]] - [status-im.contacts.views.contact :refer [contact-view]] - [status-im.components.react :refer [view - keyboard-avoiding-view - text - list-view - list-item]] - [status-im.components.confirm-button :refer [confirm-button]] - [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar-new.view :refer [toolbar-with-search]] - [status-im.utils.listview :refer [to-datasource]] - [status-im.utils.platform :refer [ios?]] - [status-im.new-group.views.toggle-contact :refer [group-toggle-contact - group-toggle-participant]] - [status-im.components.common.common :refer [separator]] - [status-im.new-group.styles :as st] - [status-im.contacts.styles :as cst] - [status-im.i18n :refer [label]] - [status-im.components.toolbar-new.actions :as act])) + [status-im.components.contact.contact :refer [contact-view]] + [status-im.components.renderers.renderers :as renderers] + [status-im.components.react :refer [view + keyboard-avoiding-view + text + list-view + list-item]] + [status-im.components.sticky-button :refer [sticky-button]] + [status-im.components.status-bar :refer [status-bar]] + [status-im.components.toolbar-new.view :refer [toolbar-with-search]] + [status-im.utils.listview :refer [to-datasource]] + [status-im.utils.platform :refer [ios?]] + [status-im.new-group.views.toggle-contact :refer [group-toggle-contact + group-toggle-participant]] + [status-im.new-group.styles :as st] + [status-im.contacts.styles :as cst] + [status-im.i18n :refer [label]] + [status-im.components.toolbar-new.actions :as act])) (defn title-with-count [title count-value] [view st/toolbar-title-with-count @@ -41,12 +41,17 @@ :custom-title (title-with-count title contacts-count) :search-placeholder (label :t/search-contacts)})) -(defn render-separator [_ row-id _] - (list-item ^{:key row-id} - [separator cst/contact-item-separator])) - -(defn render-spacing [] - #(list-item [view cst/contact-list-spacing])) +(defn toggle-list [contacts render-function] + [view {:flex 1} + [list-view + {:dataSource (to-datasource contacts) + :renderRow (fn [row _ _] + (list-item ^{:key row} [render-function row])) + :renderSeparator renderers/list-separator-renderer + :renderFooter renderers/list-footer-renderer + :renderHeader renderers/list-header-renderer + :style cst/contacts-list + :keyboardShouldPersistTaps true}]]) (defview contact-toggle-list [] [contacts [:all-added-group-contacts-filtered] @@ -60,18 +65,9 @@ :t/new-group :t/new-group-chat)) selected-contacts-count] - [view {:flex 1} - [list-view - {:dataSource (to-datasource contacts) - :renderRow (fn [row _ _] - (list-item ^{:key row} [group-toggle-contact row])) - :renderSeparator render-separator - :renderFooter (render-spacing) - :renderHeader (render-spacing) - :style cst/contacts-list - :keyboardShouldPersistTaps true}]] + [toggle-list contacts group-toggle-contact] (when (pos? selected-contacts-count) - [confirm-button (label :t/next) #(dispatch [:navigate-to :new-group])])]) + [sticky-button (label :t/next) #(dispatch [:navigate-to :new-group])])]) (defview add-contacts-toggle-list [] [contacts [:all-group-not-added-contacts-filtered] @@ -81,18 +77,9 @@ st/group-container) [status-bar] [toggle-list-toolbar (:name group) selected-contacts-count] - [view {:flex 1} - [list-view - {:dataSource (to-datasource contacts) - :renderRow (fn [row _ _] - (list-item ^{:key row} [group-toggle-contact row])) - :renderSeparator render-separator - :renderFooter (render-spacing) - :renderHeader (render-spacing) - :style cst/contacts-list - :keyboardShouldPersistTaps true}]] + [toggle-list contacts group-toggle-contact] (when (pos? selected-contacts-count) - [confirm-button (label :t/save) #(do + [sticky-button (label :t/save) #(do (dispatch [:add-selected-contacts-to-group]) (dispatch [:navigate-back]))])]) @@ -104,18 +91,9 @@ st/group-container) [status-bar] [toggle-list-toolbar chat-name selected-contacts-count] - [view {:flex 1} - [list-view - {:dataSource (to-datasource contacts) - :renderRow (fn [row _ _] - (list-item ^{:key row} [group-toggle-participant row])) - :renderSeparator render-separator - :renderFooter (render-spacing) - :renderHeader (render-spacing) - :style cst/contacts-list - :keyboardShouldPersistTaps true}]] + [toggle-list contacts group-toggle-participant] (when (pos? selected-contacts-count) - [confirm-button (label :t/save) #(do + [sticky-button (label :t/save) #(do (dispatch [:add-new-participants]) (dispatch [:navigate-back]))])]) diff --git a/src/status_im/new_group/views/group.cljs b/src/status_im/new_group/views/group.cljs index b8a8f8cd80..fb9b25c081 100644 --- a/src/status_im/new_group/views/group.cljs +++ b/src/status_im/new_group/views/group.cljs @@ -2,7 +2,10 @@ (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :refer [dispatch]] [status-im.contacts.styles :as cst] - [status-im.components.common.common :as cmn] + [status-im.components.common.common :as common] + [status-im.components.action-button.action-button :refer [action-button + action-button-disabled + action-separator]] [status-im.components.react :refer [view text icon @@ -15,9 +18,6 @@ [status-im.new-group.styles :as st] [status-im.i18n :refer [label]])) -(defn separator [] - [cmn/separator cst/contact-item-separator]) - (defview group-name-input [] [new-group-name [:get :new-chat-name]] [view @@ -49,14 +49,9 @@ [group-name-input]]) (defn add-btn [on-press] - [view st/add-button-container - [touchable-highlight {:on-press on-press} - [view st/add-container - [view st/settings-icon-container - [icon :add_blue st/add-icon]] - [view st/settings-group-text-container - [text {:style st/add-group-text} - (label :t/add-members)]]]]]) + [action-button (label :t/add-members) + :add_blue + on-press]) (defn delete-btn [on-press] [view st/settings-group-container @@ -80,15 +75,11 @@ [view st/settings-group-text-container [text {:style st/settings-group-text} (label :t/mute-notifications)]]]]] - [separator] - [touchable-highlight {:on-press #(dispatch [:clear-history])} - [view st/settings-group-item - [view st/settings-icon-container - [icon :close_blue st/add-icon]] - [view st/settings-group-text-container - [text {:style st/settings-group-text} - (label :t/clear-history)]]]] - [separator] + [action-separator] + [action-button (label :t/clear-history) + :close_blue + #(dispatch [:clear-history])] + [action-separator] [touchable-highlight {:on-press #(dispatch [:leave-group-chat])} [view st/settings-group-item [view st/delete-icon-container @@ -99,7 +90,7 @@ (defn more-btn [contacts-limit contacts-count on-press] [view - [separator] + [common/list-separator] [view cst/show-all [touchable-highlight {:on-press on-press} [view diff --git a/src/status_im/new_group/views/reorder_groups.cljs b/src/status_im/new_group/views/reorder_groups.cljs index d12970325a..169b6cccb6 100644 --- a/src/status_im/new_group/views/reorder_groups.cljs +++ b/src/status_im/new_group/views/reorder_groups.cljs @@ -6,11 +6,11 @@ icon touchable-highlight list-item]] - [status-im.components.confirm-button :refer [confirm-button]] + [status-im.components.sticky-button :refer [sticky-button]] [status-im.components.status-bar :refer [status-bar]] [status-im.components.toolbar-new.view :refer [toolbar]] [status-im.components.sortable-list-view :refer [sortable-list-view sortable-item]] - [status-im.components.common.common :refer [top-shaddow bottom-shaddow]] + [status-im.components.common.common :as common] [status-im.utils.listview :refer [to-datasource]] [status-im.utils.platform :refer [android?]] [status-im.new-group.styles :as st] @@ -39,7 +39,7 @@ (list-item (if (= row-id last) ^{:key "bottom-shaddow"} - [bottom-shaddow] + [common/bottom-shaddow] ^{:key row-id} [view st/order-item-separator-wrapper [view st/order-item-separator]])))) @@ -52,7 +52,7 @@ [status-bar] [toolbar-view] [view st/reorder-list-container - [top-shaddow] + [common/top-shaddow] [sortable-list-view {:data groups :order order @@ -61,4 +61,4 @@ :render-row (fn [row] (sortable-item [group-item row])) :render-separator (render-separator (last order))}]] - [confirm-button (label :t/save) #(dispatch [:save-group-order])]])) + [sticky-button (label :t/save) #(dispatch [:save-group-order])]])) diff --git a/src/status_im/new_group/views/toggle_contact.cljs b/src/status_im/new_group/views/toggle_contact.cljs index da751c36b9..968ab69921 100644 --- a/src/status_im/new_group/views/toggle_contact.cljs +++ b/src/status_im/new_group/views/toggle_contact.cljs @@ -1,12 +1,6 @@ (ns status-im.new-group.views.toggle-contact - (:require-macros [status-im.utils.views :refer [defview]]) - (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [status-im.components.react :refer [view icon touchable-highlight]] - [status-im.contacts.views.contact-inner :refer [contact-inner-view]] - [status-im.new-group.styles :as st] - [status-im.contacts.styles :as cst] - [status-im.components.styles :refer [color-light-blue color-gray5]] - [status-im.utils.platform :refer [platform-specific]])) + (:require [re-frame.core :refer [dispatch]] + [status-im.components.contact.contact :refer [toogle-contact-view]])) (defn on-toggle [checked? whisper-identity] (let [action (if checked? :deselect-contact :select-contact)] @@ -16,23 +10,8 @@ (let [action (if checked? :deselect-participant :select-participant)] (dispatch [action whisper-identity]))) -;;TODO: maybe it's better to have only one global component contact-view (with the types: default, extended and toggle) -(defview toogle-contact-view [{:keys [whisper-identity] :as contact} selected-key on-toggle-handler] - [checked [selected-key whisper-identity]] - [touchable-highlight {:on-press #(on-toggle-handler checked whisper-identity)} - [view - [view (merge st/contact-container (when checked {:style st/selected-contact})) - [contact-inner-view (merge {:contact contact} - (when checked {:style st/selected-contact}))] - [view st/toggle-container - [view (merge st/icon-check-container - {:background-color (if checked color-light-blue color-gray5)}) - (when checked - [icon :check_on st/check-icon])]]]]]) - (defn group-toggle-contact [{:keys [whisper-identity] :as contact}] [toogle-contact-view contact :is-contact-selected? on-toggle]) (defn group-toggle-participant [{:keys [whisper-identity] :as contact}] - [toogle-contact-view contact :is-participant-selected? on-toggle-participant]) - + [toogle-contact-view contact :is-participant-selected? on-toggle-participant]) \ No newline at end of file diff --git a/src/status_im/participants/views/contact.cljs b/src/status_im/participants/views/contact.cljs index 1b3829b835..6c09db37e8 100644 --- a/src/status_im/participants/views/contact.cljs +++ b/src/status_im/participants/views/contact.cljs @@ -2,7 +2,7 @@ (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [status-im.components.react :refer [view]] - [status-im.contacts.views.contact-inner :refer [contact-inner-view]] + [status-im.components.contact.contact :refer [contact-inner-view]] [status-im.components.item-checkbox :refer [item-checkbox]] [status-im.participants.styles :as st])) diff --git a/src/status_im/profile/edit/screen.cljs b/src/status_im/profile/edit/screen.cljs index 921fc0d3c1..7af773ffd4 100644 --- a/src/status_im/profile/edit/screen.cljs +++ b/src/status_im/profile/edit/screen.cljs @@ -9,7 +9,7 @@ [status-im.components.text-field.view :refer [text-field]] [status-im.i18n :refer [label]] [status-im.profile.screen :refer [colorize-status-hashtags]] - [status-im.components.confirm-button :refer [confirm-button]] + [status-im.components.sticky-button :refer [sticky-button]] [status-im.components.chat-icon.screen :refer [my-profile-icon]] [status-im.components.context-menu :refer [context-menu]] [status-im.profile.validations :as v] @@ -104,6 +104,6 @@ [edit-profile-status changed-account] [status-prompt changed-account]] (when (and profile-edit-data-changed? profile-edit-data-valid?) - [confirm-button (label :t/save) #(do + [sticky-button (label :t/save) #(do (dispatch [:check-status-change (:status changed-account)]) (dispatch [:account-update changed-account]))])]))