diff --git a/.re-natal b/.re-natal index 7c0d7e5cca..98d4f13f0d 100644 --- a/.re-natal +++ b/.re-natal @@ -29,7 +29,6 @@ "identicon.js", "react-native-fs", "react-native-dialogs", - "react-native-sortable-listview", "react-native-image-resizer", "react-native-image-crop-picker", "react-native-webview-bridge", diff --git a/package-lock.json b/package-lock.json index 92bbc831c3..6c9904f20e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7064,11 +7064,6 @@ "resolved": "https://registry.npmjs.org/react-native-scrollable-mixin/-/react-native-scrollable-mixin-1.0.1.tgz", "integrity": "sha1-NKMhZ7ZCSFlBVP0NaosD8idAVI4=" }, - "react-native-sortable-listview": { - "version": "0.2.6", - "resolved": "https://registry.npmjs.org/react-native-sortable-listview/-/react-native-sortable-listview-0.2.6.tgz", - "integrity": "sha1-0e1rtVL6UZCZTlB8A95aKSFojKY=" - }, "react-native-splash-screen": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.0.6.tgz", diff --git a/package.json b/package.json index 42bfe57560..93c9a7de83 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,6 @@ "react-native-os": "1.1.0", "react-native-qrcode": "0.2.6", "react-native-randombytes": "3.0.0", - "react-native-sortable-listview": "0.2.6", "react-native-splash-screen": "3.0.6", "react-native-svg": "6.0.1-rc.3", "react-native-tcp": "3.3.0", diff --git a/react-native/src/status_im/react_native/js_dependencies.cljs b/react-native/src/status_im/react_native/js_dependencies.cljs index 3441e95f30..4167e84a3f 100644 --- a/react-native/src/status_im/react_native/js_dependencies.cljs +++ b/react-native/src/status_im/react_native/js_dependencies.cljs @@ -21,7 +21,6 @@ (def random-bytes (js/require "react-native-randombytes")) (def react-native (js/require "react-native")) (def realm (js/require "realm")) -(def sortable-listview (js/require "react-native-sortable-listview")) (def vector-icons (js/require "react-native-vector-icons/Ionicons")) (def webview-bridge (js/require "react-native-webview-bridge")) (def svg (js/require "react-native-svg")) diff --git a/src/status_im/chat/styles/input/input.cljs b/src/status_im/chat/styles/input/input.cljs index 691a82d921..530d34d7f3 100644 --- a/src/status_im/chat/styles/input/input.cljs +++ b/src/status_im/chat/styles/input/input.cljs @@ -14,7 +14,7 @@ :margin-bottom margin-bottom :flex-direction :column :border-top-width border-height - :border-top-color colors/light-gray + :border-top-color colors/gray-light :elevation 2}) (def input-container diff --git a/src/status_im/chat/styles/input/parameter_box.cljs b/src/status_im/chat/styles/input/parameter_box.cljs index e3c7d6c6d6..db9578c8da 100644 --- a/src/status_im/chat/styles/input/parameter_box.cljs +++ b/src/status_im/chat/styles/input/parameter_box.cljs @@ -4,6 +4,6 @@ (def root {:background-color common/color-white - :border-top-color colors/light-gray + :border-top-color colors/gray-light :border-top-width 1}) diff --git a/src/status_im/chat/styles/input/result_box.cljs b/src/status_im/chat/styles/input/result_box.cljs index 4165a5366d..0ec535af1e 100644 --- a/src/status_im/chat/styles/input/result_box.cljs +++ b/src/status_im/chat/styles/input/result_box.cljs @@ -4,7 +4,7 @@ (defn root [height bottom] {:background-color common/color-white - :border-top-color colors/light-gray + :border-top-color colors/gray-light :border-top-width 1 :flex-direction :column :height height diff --git a/src/status_im/chat/styles/input/suggestions.cljs b/src/status_im/chat/styles/input/suggestions.cljs index e34438d35a..fb6a314713 100644 --- a/src/status_im/chat/styles/input/suggestions.cljs +++ b/src/status_im/chat/styles/input/suggestions.cljs @@ -9,7 +9,7 @@ (def root {:background-color common/color-white - :border-top-color colors/light-gray + :border-top-color colors/gray-light :border-top-width 1}) (defn item-suggestion-container [last?] @@ -18,7 +18,7 @@ :height item-height :margin-left 14 :padding-right 14 - :border-bottom-color colors/light-gray + :border-bottom-color colors/gray-light :border-bottom-width (if last? 0 border-height)}) (def item-suggestion-name diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 72d70f21a5..52670662f1 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -150,6 +150,7 @@ :invite-friends "Invite friends" :chats "Chats" :delete-chat "Delete chat" + :group-chat "Group chat" :new-group-chat "New group chat" :new-public-group-chat "Join public chat" :edit-chats "Edit chats" @@ -157,6 +158,7 @@ :empty-topic "Empty topic" :topic-format "Wrong format [a-z0-9\\-]+" :public-group-topic "Topic" + :set-a-topic "Set a topic" ;;discover :discover "Discover" @@ -200,6 +202,7 @@ ;;group-settings :remove "Remove" :save "Save" + :create "Create" :delete "Delete" :clear-history "Clear history" :mute-notifications "Mute notifications" diff --git a/src/status_im/ui/components/checkbox/styles.cljs b/src/status_im/ui/components/checkbox/styles.cljs index 39ec2d0f16..24ae856046 100644 --- a/src/status_im/ui/components/checkbox/styles.cljs +++ b/src/status_im/ui/components/checkbox/styles.cljs @@ -1,21 +1,17 @@ (ns status-im.ui.components.checkbox.styles - (:require-macros [status-im.utils.styles :refer [defnstyle]]) - (:require [status-im.ui.components.styles :as styles])) + (:require [status-im.ui.components.colors :as colors])) (def wrapper {:padding 16}) -(defnstyle icon-check-container [checked?] - {:background-color (if checked? styles/color-light-blue styles/color-gray5) +(defn icon-check-container [checked?] + {:background-color (if checked? colors/blue colors/gray-lighter) :alignItems :center :justifyContent :center - :android {:border-radius 2 - :width 17 - :height 17} - :ios {:border-radius 50 - :width 24 - :height 24}}) + :border-radius 2 + :width 24 + :height 24}) (def check-icon {:width 12 - :height 12}) \ No newline at end of file + :height 12}) diff --git a/src/status_im/ui/components/checkbox/view.cljs b/src/status_im/ui/components/checkbox/view.cljs index 979442f1d8..d41fb13cd7 100644 --- a/src/status_im/ui/components/checkbox/view.cljs +++ b/src/status_im/ui/components/checkbox/view.cljs @@ -6,7 +6,8 @@ ;; https://facebook.github.io/react-native/docs/checkbox.html (defn checkbox [{:keys [on-value-change checked?]}] - [react/touchable-highlight {:style styles/wrapper :on-press #(do (when on-value-change (on-value-change (not checked?))))} + [react/touchable-highlight (merge {:style styles/wrapper} + (when on-value-change {:on-press #(on-value-change (not checked?))})) [react/view (styles/icon-check-container checked?) (when checked? - [react/icon :check_on styles/check-icon])]]) \ No newline at end of file + [react/icon :check_on styles/check-icon])]]) diff --git a/src/status_im/ui/components/colors.cljs b/src/status_im/ui/components/colors.cljs index cb41b5a66c..4d536b38ce 100644 --- a/src/status_im/ui/components/colors.cljs +++ b/src/status_im/ui/components/colors.cljs @@ -7,9 +7,8 @@ (def black "#000000") ;; Used as the default text color (def black-transparent "#00000020") ;; Used as background color for rounded button on dark background (def gray "#939ba1") ;; Used as a background for a light foreground and as section header and secondary text color -(def gray-light "#d9dae1") ;; Used as divider color +(def gray-light "#e8ebec") ;; Used as divider color (def gray-lighter "#eef2f5") ;; Used as a background or shadow (def blue "#4360df") ;; Used as main wallet color (def red "#ff2d55") ;; Used to highlight errors or "dangerous" actions -(def light-gray "#e8ebec") ;; Used as a background or shadow (def text-light-gray "#212121") ;; Used for labels (home items) diff --git a/src/status_im/ui/components/contact/contact.cljs b/src/status_im/ui/components/contact/contact.cljs index 386435219b..8193555bd3 100644 --- a/src/status_im/ui/components/contact/contact.cljs +++ b/src/status_im/ui/components/contact/contact.cljs @@ -4,6 +4,7 @@ [status-im.ui.components.react :as react] [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.chat-icon.screen :as chat-icon] + [status-im.ui.components.checkbox.view :as checkbox] [status-im.ui.components.contact.styles :as styles] [status-im.ui.components.list-selection :as list-selection] [status-im.utils.gfycat.core :as gfycat])) @@ -24,11 +25,11 @@ [react/text {:style styles/info-text} info])]])) -(defn contact-view [{:keys [contact extended? on-press extend-options info show-forward?]}] +(defn contact-view [{:keys [style contact extended? on-press extend-options info show-forward?]}] [react/touchable-highlight (when-not extended? {:on-press (when on-press #(on-press contact))}) [react/view styles/contact-container - [contact-inner-view {:contact contact :info info}] + [contact-inner-view {:contact contact :info info :style style}] (when show-forward? [react/view styles/forward-btn [vector-icons/icon :icons/forward]]) @@ -40,10 +41,7 @@ (views/defview toogle-contact-view [{:keys [whisper-identity] :as contact} selected-key on-toggle-handler] (views/letsubs [checked [selected-key whisper-identity]] - [react/touchable-highlight {:on-press #(on-toggle-handler checked whisper-identity)} - [react/view (merge styles/contact-container (when checked {:style styles/selected-contact})) - [contact-inner-view (merge {:contact contact} - (when checked {:style styles/selected-contact}))] - [react/view (styles/icon-check-container checked) - (when checked - [vector-icons/icon :icons/ok {:style styles/check-icon}])]]])) + [react/view styles/contact-container + [contact-inner-view {:contact contact}] + [checkbox/checkbox {:checked? checked + :on-value-change #(on-toggle-handler checked whisper-identity)}]])) diff --git a/src/status_im/ui/components/contact/styles.cljs b/src/status_im/ui/components/contact/styles.cljs index 55f6a8f2f0..54b5ea982f 100644 --- a/src/status_im/ui/components/contact/styles.cljs +++ b/src/status_im/ui/components/contact/styles.cljs @@ -1,6 +1,7 @@ (ns status-im.ui.components.contact.styles - (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) - (:require [status-im.ui.components.styles :as common] + (:require-macros [status-im.utils.styles :refer [defstyle]]) + (:require [status-im.ui.components.colors :as colors] + [status-im.ui.components.styles :as common] [status-im.utils.platform])) (defstyle contact-inner-container @@ -8,7 +9,7 @@ :flex-direction :row :align-items :center :padding-left 16 - :background-color common/color-white + :background-color colors/white :android {:height 56} :ios {:height 63}}) @@ -33,7 +34,7 @@ (def contact-container {:flex-direction :row :align-items :center - :background-color common/color-white}) + :background-color colors/white}) (def forward-btn {:opacity 0.4 @@ -47,28 +48,3 @@ (def more-btn {:padding 16}) - -(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 - :margin-right 16 - :android {:border-radius 2 - :width 17 - :height 17} - :ios {:border-radius 50 - :width 24 - :height 24}}) - -(def check-icon - {:width 12 - :height 12}) diff --git a/src/status_im/ui/components/list/styles.cljs b/src/status_im/ui/components/list/styles.cljs index 60c685fe32..cf6e482470 100644 --- a/src/status_im/ui/components/list/styles.cljs +++ b/src/status_im/ui/components/list/styles.cljs @@ -96,3 +96,10 @@ :margin-bottom 3} :ios {:margin-top 10 :margin-bottom 2}}) + +(def list-with-label-wrapper + {:margin-top 26 + :margin-horizontal 16}) + +(def label + {:color colors/gray}) diff --git a/src/status_im/ui/components/list/views.cljs b/src/status_im/ui/components/list/views.cljs index b486bcc4d2..7503e04656 100644 --- a/src/status_im/ui/components/list/views.cljs +++ b/src/status_im/ui/components/list/views.cljs @@ -170,3 +170,9 @@ {:sections (clj->js (map wrap-per-section-render-fn sections)) :renderSectionHeader (wrap-render-section-header-fn render-section-header-fn)} (when platform/ios? {:SectionSeparatorComponent (fn [] (reagent/as-element section-separator))}))]) + +(defn list-with-label [{:keys [style]} label list] + [react/view (merge styles/list-with-label-wrapper style) + [react/text {:style styles/label} + label] + list]) diff --git a/src/status_im/ui/components/react.cljs b/src/status_im/ui/components/react.cljs index ddcffd33f3..fd0027030c 100644 --- a/src/status_im/ui/components/react.cljs +++ b/src/status_im/ui/components/react.cljs @@ -189,9 +189,8 @@ (if (or (nil? timeout) (> 100 timeout)) (reset! loading false) - (utils/set-timeout (fn [] - (reset! loading false)) - timeout)))} + (utils/set-timeout #(reset! loading false) + timeout)))} (if (and (not enabled?) @loading) (or preview [view {:style (or style {:justify-content :center diff --git a/src/status_im/ui/components/sortable_list_view.cljs b/src/status_im/ui/components/sortable_list_view.cljs deleted file mode 100644 index 4846fa29e7..0000000000 --- a/src/status_im/ui/components/sortable_list_view.cljs +++ /dev/null @@ -1,20 +0,0 @@ -(ns status-im.ui.components.sortable-list-view - (:require [reagent.core :as reagent] - [status-im.ui.components.react :as react] - [status-im.react-native.js-dependencies :as js-dependencies])) - -(def sortable-listview-class - (reagent/adapt-react-class js-dependencies/sortable-listview)) - -(defn sortable-list-view [{:keys [on-row-moved render-row] :as props}] - [sortable-listview-class - (assoc props :on-row-moved #(on-row-moved (js->clj % :keywordize-keys true)) - :render-row #(render-row (js->clj % :keywordize-keys true)))]) - -(defn- touchable [inner] - [react/touchable-highlight (js->clj (.-props (reagent/current-component))) - [react/view - inner]]) - -(defn sortable-item [inner] - (react/list-item [touchable inner])) diff --git a/src/status_im/ui/components/styles.cljs b/src/status_im/ui/components/styles.cljs index 0a895b19df..fab79655cd 100644 --- a/src/status_im/ui/components/styles.cljs +++ b/src/status_im/ui/components/styles.cljs @@ -10,7 +10,6 @@ (def color-blue4 "#4360df") ; colors/blue (def color-blue4-faded "rgba(67,96,222,0.87)") (def color-blue4-transparent "rgba(67, 96, 223, 0.10)") -(def color-blue5 "#3c56c8") (def color-blue6 "#3745AF") (def color-blue-transparent "#7099e632") (def color-black "#000000") @@ -27,7 +26,6 @@ (def color-gray5 "#d9dae1") (def color-gray6 "#212121") (def color-gray7 "#9fa3b4") -(def color-gray8 "#6E777E") (def color-gray9 "#E9EBEC") (def color-gray10 "#9BA3A8") (def color-gray11 "#EEF1F5") @@ -43,12 +41,7 @@ (def color-white-transparent-6 "rgba(255, 255, 255, 0.6)") (def color-light-blue "#628fe3") (def color-light-blue-transparent "#628fe333") -(def color-light-blue2 "#eff3fc") -(def color-light-blue3 "#a0bcf0") -(def color-light-blue4 "#f1f4f5") -(def color-light-blue5 "#d9dff9") (def color-light-blue6 "#e3ebfa") -(def color-light-blue7 "#dcd6fb") (def color-dark-blue-1 "#252c4a") (def color-dark-blue-2 "#1f253f") (def color-dark-blue-3 "#191f37") @@ -64,7 +57,6 @@ (def color-red-3 "#FFC1BD") (def color-red-4 "#8A3832") (def color-light-red "#e86363") -(def color-light-red2 "#f47979") (def color-green-1 "#a8f4d4") (def color-green-2 "#448469") (def color-green-3 "#44d058") @@ -75,9 +67,7 @@ (def color-separator "#D6D6D6") (def text1-color color-black) -(def text1-disabled-color "#555555") (def text2-color color-gray) -(def text3-color color-blue) (def text4-color color-gray4) (def icon-dark-color color-dark) (def icon-gray-color color-gray7) @@ -86,7 +76,6 @@ (def new-messages-count-color color-blue-transparent) (def chat-background color-light-gray) (def selected-message-color "#E4E9ED") -(def selected-contact-color color-light-blue2) (def separator-color "#0000001f") (def default-chat-color color-purple) diff --git a/src/status_im/ui/components/toolbar/view.cljs b/src/status_im/ui/components/toolbar/view.cljs index 56e78ce7b8..52c559e421 100644 --- a/src/status_im/ui/components/toolbar/view.cljs +++ b/src/status_im/ui/components/toolbar/view.cljs @@ -109,19 +109,19 @@ (defn toolbar ([props nav-item content-item] (toolbar props nav-item content-item [actions [{:image :blank}]])) - ([{:keys [background-color style flat?]} + ([{:keys [background-color style flat? title-centered?]} nav-item content-item action-items] [react/view {:style (merge (styles/toolbar background-color flat?) style)} ;; On iOS title must be centered. Current solution is a workaround and eventually this will be sorted out using flex - (when platform/ios? + (when (or title-centered? platform/ios?) [react/view styles/ios-content-item content-item]) (when nav-item [react/view {:style (styles/toolbar-nav-actions-container 0)} nav-item]) - (if platform/ios? + (if (or title-centered? platform/ios?) [react/view components.styles/flex] content-item) action-items])) @@ -129,4 +129,4 @@ (defn simple-toolbar "A simple toolbar composed of a nav-back item and a single line title." ([] (simple-toolbar nil)) - ([title] (toolbar nil default-nav-back [content-title title]))) \ No newline at end of file + ([title] (toolbar nil default-nav-back [content-title title]))) diff --git a/src/status_im/ui/screens/add_new/new_chat/views.cljs b/src/status_im/ui/screens/add_new/new_chat/views.cljs index 1cc0e23a8d..7cf21b0631 100644 --- a/src/status_im/ui/screens/add_new/new_chat/views.cljs +++ b/src/status_im/ui/screens/add_new/new_chat/views.cljs @@ -1,36 +1,35 @@ (ns status-im.ui.screens.add-new.new-chat.views (:require-macros [status-im.utils.views :as views]) - (:require [status-im.ui.components.react :as react] - [status-im.ui.components.list.views :as list] + (:require [re-frame.core :as re-frame] + [status-im.i18n :as i18n] + [status-im.ui.components.colors :as colors] [status-im.ui.components.contact.contact :as contact-view] - [re-frame.core :as re-frame] + [status-im.ui.components.icons.vector-icons :as vector-icons] + [status-im.ui.components.list.views :as list] + [status-im.ui.components.react :as react] [status-im.ui.components.status-bar.view :as status-bar] [status-im.ui.components.toolbar.view :as toolbar.view] - [status-im.i18n :as i18n] - [status-im.ui.components.common.common :as components] - [status-im.ui.screens.add-new.open-dapp.styles :as open-dapp.styles] - [status-im.ui.components.icons.vector-icons :as vector-icons] + [status-im.ui.screens.add-new.styles :as add-new.styles] [status-im.ui.screens.add-new.new-chat.styles :as styles] - [status-im.ui.components.colors :as colors])) + [status-im.ui.screens.add-new.open-dapp.styles :as open-dapp.styles])) -(defn render-row [row _ _] +(defn- render-row [row _ _] [contact-view/contact-view {:contact row - :on-press #(re-frame/dispatch [:open-chat-with-contact %]) + :on-press #(re-frame/dispatch [:show-profile (:whisper-identity %)]) :show-forward? true}]) (views/defview new-chat [] - (views/letsubs [contacts [:all-added-people-contacts] + (views/letsubs [contacts [:all-added-people-contacts] error-message [:new-contact-error-message]] [react/keyboard-avoiding-view open-dapp.styles/main-container [status-bar/status-bar] [toolbar.view/simple-toolbar (i18n/label :t/new-chat)] - [components/separator] - [react/view open-dapp.styles/enter-url + [react/view add-new.styles/input-container [react/text-input {:on-change-text #(re-frame/dispatch [:set :contacts/new-identity %]) :on-submit-editing #(when-not error-message (re-frame/dispatch [:add-contact-handler])) :placeholder (i18n/label :t/enter-contact-code) - :style open-dapp.styles/url-input}] + :style add-new.styles/input}] [react/touchable-highlight {:on-press #(re-frame/dispatch [:scan-qr-code {:toolbar-title (i18n/label :t/new-contact)} :set-contact-identity-from-qr]) @@ -45,4 +44,4 @@ :render-fn render-row :default-separator? true :enableEmptySections true - :keyboardShouldPersistTaps :always}]])) \ No newline at end of file + :keyboardShouldPersistTaps :always}]])) diff --git a/src/status_im/ui/screens/add_new/open_dapp/events.cljs b/src/status_im/ui/screens/add_new/open_dapp/events.cljs deleted file mode 100644 index 6b5ab97514..0000000000 --- a/src/status_im/ui/screens/add_new/open_dapp/events.cljs +++ /dev/null @@ -1,2 +0,0 @@ -(ns status-im.ui.screens.add-new.open-dapp.events - (:require status-im.ui.screens.add-new.open-dapp.navigation)) \ No newline at end of file diff --git a/src/status_im/ui/screens/add_new/open_dapp/navigation.cljs b/src/status_im/ui/screens/add_new/open_dapp/navigation.cljs deleted file mode 100644 index 95f252659f..0000000000 --- a/src/status_im/ui/screens/add_new/open_dapp/navigation.cljs +++ /dev/null @@ -1,6 +0,0 @@ -(ns status-im.ui.screens.add-new.open-dapp.navigation - (:require [status-im.ui.screens.navigation :as navigation])) - -(defmethod navigation/preload-data! :dapp-description - [db [_ _ {:keys [dapp]}]] - (assoc db :new/open-dapp dapp)) diff --git a/src/status_im/ui/screens/add_new/open_dapp/styles.cljs b/src/status_im/ui/screens/add_new/open_dapp/styles.cljs index 8d944e858a..2ee5c4f3c5 100644 --- a/src/status_im/ui/screens/add_new/open_dapp/styles.cljs +++ b/src/status_im/ui/screens/add_new/open_dapp/styles.cljs @@ -1,24 +1,9 @@ (ns status-im.ui.screens.add-new.open-dapp.styles - (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) (:require [status-im.ui.components.colors :as colors])) -(def main-container {:flex 1}) - -(def enter-url - {:flex-direction :row - :align-items :center - :border-radius 8 - :height 52 - :background-color colors/light-gray - :margin-horizontal 14 - :margin-top 24}) - -(defstyle url-input - {:flex 1 - :font-size 15 - :letter-spacing -0.2 - :padding-horizontal 14 - :android {:padding 0}}) +(def main-container + {:flex 1 + :background-color colors/white}) (def gray-label {:font-size 14 @@ -46,4 +31,4 @@ (def description-container {:margin-top 26 - :margin-horizontal 16}) \ No newline at end of file + :margin-horizontal 16}) diff --git a/src/status_im/ui/screens/add_new/open_dapp/views.cljs b/src/status_im/ui/screens/add_new/open_dapp/views.cljs index 04e8e6dd88..9d7ec43a88 100644 --- a/src/status_im/ui/screens/add_new/open_dapp/views.cljs +++ b/src/status_im/ui/screens/add_new/open_dapp/views.cljs @@ -1,20 +1,21 @@ (ns status-im.ui.screens.add-new.open-dapp.views (:require-macros [status-im.utils.views :as views]) - (:require [status-im.ui.components.react :as react] - [status-im.ui.screens.add-new.open-dapp.styles :as styles] - [status-im.ui.components.status-bar.view :as status-bar] - [status-im.ui.components.toolbar.view :as toolbar.view] + (:require [re-frame.core :as re-frame] [status-im.i18n :as i18n] - [re-frame.core :as re-frame] + [status-im.ui.components.react :as react] [status-im.ui.components.action-button.action-button :as action-button] [status-im.ui.components.common.common :as components] + [status-im.ui.components.status-bar.view :as status-bar] + [status-im.ui.components.toolbar.view :as toolbar.view] [status-im.ui.components.list.views :as list] [status-im.ui.components.contact.contact :as contact-view] - [status-im.ui.components.chat-icon.screen :as chat-icon.screen])) + [status-im.ui.components.chat-icon.screen :as chat-icon.screen] + [status-im.ui.screens.add-new.styles :as add-new.styles] + [status-im.ui.screens.add-new.open-dapp.styles :as styles])) (defn render-row [row _ _] [contact-view/contact-view {:contact row - :on-press #(re-frame/dispatch [:navigate-to :dapp-description {:dapp row}]) + :on-press #(re-frame/dispatch [:navigate-to :dapp-description row]) :show-forward? true}]) (views/defview open-dapp [] @@ -24,7 +25,7 @@ [status-bar/status-bar] [toolbar.view/simple-toolbar (i18n/label :t/open-dapp)] [components/separator] - [react/view styles/enter-url + [react/view add-new.styles/input-container [react/text-input {:on-change-text #(reset! url-text %) :on-submit-editing #(do (re-frame/dispatch [:navigate-to-clean :home]) @@ -32,7 +33,7 @@ :placeholder (i18n/label :t/enter-url) :auto-capitalize :none :auto-correct false - :style styles/url-input}]] + :style add-new.styles/input}]] [react/text {:style styles/list-title} (i18n/label :t/selected-dapps)] [list/flat-list {:data dapps @@ -42,7 +43,7 @@ :keyboardShouldPersistTaps :always}]])) (views/defview dapp-description [] - (views/letsubs [{:keys [name dapp-url] :as dapp} [:get :new/open-dapp]] + (views/letsubs [{:keys [name dapp-url] :as dapp} [:get-screen-params]] [react/keyboard-avoiding-view styles/main-container [status-bar/status-bar] [toolbar.view/simple-toolbar] diff --git a/src/status_im/ui/screens/add_new/styles.cljs b/src/status_im/ui/screens/add_new/styles.cljs new file mode 100644 index 0000000000..ceda374f00 --- /dev/null +++ b/src/status_im/ui/screens/add_new/styles.cljs @@ -0,0 +1,20 @@ +(ns status-im.ui.screens.add-new.styles + (:require-macros [status-im.utils.styles :refer [defstyle]]) + (:require [status-im.ui.components.colors :as colors] + [status-im.ui.components.styles :as styles])) + +(def input-container + {:flex-direction :row + :align-items :center + :border-radius styles/border-radius + :height 52 + :background-color colors/gray-lighter + :margin-horizontal 14 + :margin-top 24}) + +(defstyle input + {:flex 1 + :font-size 15 + :letter-spacing -0.2 + :padding-horizontal 14 + :android {:padding 0}}) diff --git a/src/status_im/ui/screens/browser/styles.cljs b/src/status_im/ui/screens/browser/styles.cljs index 349dee95c5..6711202632 100644 --- a/src/status_im/ui/screens/browser/styles.cljs +++ b/src/status_im/ui/screens/browser/styles.cljs @@ -32,7 +32,7 @@ (def background {:flex 1 - :background-color colors/light-gray + :background-color colors/gray-lighter :align-items :center :justify-content :center}) @@ -51,7 +51,7 @@ :flex 1 :border-radius 4 :height 36 - :background-color colors/light-gray + :background-color colors/gray-lighter :padding-horizontal 12 :android {:align-items :flex-start :margin-left (if show-actions 66 18) @@ -67,4 +67,4 @@ (def toolbar-content-dapp {:flex-direction :row - :margin-horizontal 10}) \ No newline at end of file + :margin-horizontal 10}) diff --git a/src/status_im/ui/screens/db.cljs b/src/status_im/ui/screens/db.cljs index ead5806e16..9a78f177b2 100644 --- a/src/status_im/ui/screens/db.cljs +++ b/src/status_im/ui/screens/db.cljs @@ -103,7 +103,7 @@ (spec/def :navigation.screen-params/edit-contact-group (allowed-keys :opt-un [:navigation.screen-params.edit-contact-group/group :navigation.screen-params.edit-contact-group/group-type])) (spec/def :navigation.screen-params.dapp-description/dapp :new/open-dapp) -(spec/def :navigation.screen-params/dapp-description (allowed-keys :opt-un [:navigation.screen-params.dapp-description/dapp])) +(spec/def :navigation.screen-params/dapp-description map?) (spec/def :navigation/screen-params (spec/nilable (allowed-keys :opt-un [:navigation.screen-params/network-details :navigation.screen-params/browser diff --git a/src/status_im/ui/screens/discover/components/views.cljs b/src/status_im/ui/screens/discover/components/views.cljs index 2a7c4a160b..9efe3ce523 100644 --- a/src/status_im/ui/screens/discover/components/views.cljs +++ b/src/status_im/ui/screens/discover/components/views.cljs @@ -83,8 +83,8 @@ (when-not me? (chat-button whisper-id))]] - (when show-separator? - [react/view styles/separator])]])) + (when show-separator? + [react/view styles/separator])]])) ;; NOTE(oskarth): Should possibly be merged with discover-list-item-full, but ;; there are too many differences between preview item (main screen) and full diff --git a/src/status_im/ui/screens/events.cljs b/src/status_im/ui/screens/events.cljs index 3371705f4b..5c7acce225 100644 --- a/src/status_im/ui/screens/events.cljs +++ b/src/status_im/ui/screens/events.cljs @@ -23,7 +23,6 @@ status-im.ui.screens.wallet.transactions.events status-im.ui.screens.wallet.choose-recipient.events status-im.ui.screens.browser.events - status-im.ui.screens.add-new.open-dapp.events status-im.ui.screens.offline-messaging-settings.events [re-frame.core :as re-frame] [status-im.native-module.core :as status] diff --git a/src/status_im/ui/screens/group/add_contacts/views.cljs b/src/status_im/ui/screens/group/add_contacts/views.cljs index 013f064f9c..c74dd90c8e 100644 --- a/src/status_im/ui/screens/group/add_contacts/views.cljs +++ b/src/status_im/ui/screens/group/add_contacts/views.cljs @@ -1,70 +1,57 @@ (ns status-im.ui.screens.group.add-contacts.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [re-frame.core :as re-frame] + [status-im.i18n :as i18n] [status-im.ui.components.contact.contact :refer [toogle-contact-view]] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] - [status-im.ui.components.sticky-button :refer [sticky-button]] [status-im.ui.components.status-bar.view :refer [status-bar]] [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.screens.group.styles :as styles] - [status-im.ui.screens.contacts.styles :as contacts.styles] - [status-im.i18n :as i18n] - [status-im.ui.screens.contacts.styles :as cstyles] - [status-im.i18n :refer [label]] - [status-im.ui.components.contact.contact :refer [toogle-contact-view]])) + [status-im.ui.screens.contacts.styles :as contacts.styles])) -(defn on-toggle [checked? whisper-identity] +(defn- on-toggle [checked? whisper-identity] (let [action (if checked? :deselect-contact :select-contact)] (re-frame/dispatch [action whisper-identity]))) -(defn on-toggle-participant [checked? whisper-identity] +(defn- on-toggle-participant [checked? whisper-identity] (let [action (if checked? :deselect-participant :select-participant)] (re-frame/dispatch [action whisper-identity]))) -(defn group-toggle-contact [{:keys [whisper-identity] :as contact}] +(defn- group-toggle-contact [contact] [toogle-contact-view contact :is-contact-selected? on-toggle]) -(defn group-toggle-participant [{:keys [whisper-identity] :as contact}] +(defn- group-toggle-participant [contact] [toogle-contact-view contact :is-participant-selected? on-toggle-participant]) -(defn toggle-list-toolbar [title contacts-count] +(defn- toggle-list-toolbar [{:keys [handler count label]} title] [toolbar/toolbar {} toolbar/default-nav-back - [react/view styles/toolbar-container - [react/view styles/toolbar-title-with-count - [react/text {:style styles/toolbar-title-with-count-text - :font :toolbar-title} - title] - (when (pos? contacts-count) - [react/view styles/toolbar-title-with-count-container - [react/text {:style styles/toolbar-title-with-count-text-count - :font :toolbar-title} - contacts-count]])]]]) + [toolbar/content-title title] + (when (pos? count) + [toolbar/text-action {:handler handler} + label])]) (defn toggle-list [contacts render-function] [react/view {:flex 1} [list/flat-list {:style contacts.styles/contacts-list :data contacts - :render-fn (fn [contact] [render-function contact]) - :footer list/default-footer - :header list/default-header + :render-fn render-function :keyboardShouldPersistTaps :always}]]) (defview contact-toggle-list [] - (letsubs [contacts [:all-added-contacts] + (letsubs [contacts [:all-added-people-contacts] selected-contacts-count [:selected-contacts-count] group-type [:get-group-type]] [react/keyboard-avoiding-view {:style styles/group-container} [status-bar] - [toggle-list-toolbar + [toggle-list-toolbar {:handler #(re-frame/dispatch [:navigate-to :new-group]) + :label (i18n/label :t/next) + :count (pos? selected-contacts-count)} (i18n/label (if (= group-type :contact-group) :t/new-group - :t/new-group-chat)) - selected-contacts-count] - [toggle-list contacts group-toggle-contact] - (when (pos? selected-contacts-count) - [sticky-button (i18n/label :t/next) #(re-frame/dispatch [:navigate-to :new-group])])])) + :t/group-chat))] + [toggle-list contacts group-toggle-contact]])) (defview add-contacts-toggle-list [] (letsubs [contacts [:all-group-not-added-contacts] @@ -72,12 +59,13 @@ selected-contacts-count [:selected-contacts-count]] [react/keyboard-avoiding-view {:style styles/group-container} [status-bar] - [toggle-list-toolbar (:name group) selected-contacts-count] - [toggle-list contacts group-toggle-contact] - (when (pos? selected-contacts-count) - [sticky-button (i18n/label :t/save) #(do - (re-frame/dispatch [:add-selected-contacts-to-group]) - (re-frame/dispatch [:navigate-back]))])])) + [toggle-list-toolbar {:count selected-contacts-count + :handler #(do + (re-frame/dispatch [:add-selected-contacts-to-group]) + (re-frame/dispatch [:navigate-back])) + :label (i18n/label :t/save)} + (:name group)] + [toggle-list contacts group-toggle-contact]])) (defview add-participants-toggle-list [] (letsubs [contacts [:all-new-contacts] @@ -85,9 +73,10 @@ selected-contacts-count [:selected-participants-count]] [react/keyboard-avoiding-view {:style styles/group-container} [status-bar] - [toggle-list-toolbar chat-name selected-contacts-count] - [toggle-list contacts group-toggle-participant] - (when (pos? selected-contacts-count) - [sticky-button (i18n/label :t/save) #(do - (re-frame/dispatch [:add-new-group-chat-participants]) - (re-frame/dispatch [:navigate-back]))])])) + [toggle-list-toolbar {:count selected-contacts-count + :handler #(do + (re-frame/dispatch [:add-new-group-chat-participants]) + (re-frame/dispatch [:navigate-back])) + :label (i18n/label :t/save)} + chat-name] + [toggle-list contacts group-toggle-participant]])) diff --git a/src/status_im/ui/screens/group/navigation.cljs b/src/status_im/ui/screens/group/navigation.cljs index 2460be28f7..39a49721ef 100644 --- a/src/status_im/ui/screens/group/navigation.cljs +++ b/src/status_im/ui/screens/group/navigation.cljs @@ -12,10 +12,3 @@ (defmethod nav/preload-data! :new-public-chat [db] (dissoc db :public-group-topic)) - -(defmethod nav/preload-data! :reorder-groups - [db [_ _]] - (assoc db :group/groups-order (->> (vals (:group/contact-groups db)) - (remove :pending?) - (sort-by :order >) - (map :group-id)))) diff --git a/src/status_im/ui/screens/group/reorder/views.cljs b/src/status_im/ui/screens/group/reorder/views.cljs deleted file mode 100644 index a9969fca52..0000000000 --- a/src/status_im/ui/screens/group/reorder/views.cljs +++ /dev/null @@ -1,61 +0,0 @@ -(ns status-im.ui.screens.group.reorder.views - (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [reagent.core :as reagent] - [re-frame.core :refer [dispatch dispatch-sync]] - [status-im.ui.components.react :refer [view text list-item]] - [status-im.ui.components.icons.vector-icons :as vi] - [status-im.ui.components.sticky-button :refer [sticky-button]] - [status-im.ui.components.status-bar.view :refer [status-bar]] - [status-im.ui.components.toolbar.view :as toolbar] - [status-im.ui.components.sortable-list-view :refer [sortable-list-view sortable-item]] - [status-im.ui.components.common.common :as common] - [status-im.ui.screens.group.styles :as styles] - [status-im.i18n :refer [label label-pluralize]])) - - -(defn toolbar-view [] - [toolbar/simple-toolbar - (label :t/reorder-groups)]) - -(defn group-item [{:keys [name contacts] :as group}] - (let [cnt (count contacts)] - [view styles/order-item-container - [view styles/order-item-inner-container - [text {:style styles/order-item-label} - name] - [text {:style styles/order-item-contacts} - (str cnt " " (label-pluralize cnt :t/contact-s))] - [view {:flex 1}] - [view styles/order-item-icon - [vi/icon :icons/grab]]]])) - -(defn render-separator [last] - (fn [_ row-id _] - (list-item - (if (= row-id last) - ^{:key "bottom-shadow"} - [common/bottom-shadow] - ^{:key row-id} - [view styles/order-item-separator-wrapper - [view styles/order-item-separator]])))) - -(defview reorder-groups [] - (letsubs [groups [:get-contact-groups] - order [:get :group/groups-order]] - (let [this (reagent/current-component)] - [view styles/reorder-groups-container - [status-bar] - [toolbar-view] - [view styles/reorder-list-container - [common/top-shadow] - [sortable-list-view - {:data groups - :order order - :on-row-moved #(do (dispatch-sync [:change-contact-group-order (:from %) (:to %)]) - (.forceUpdate this)) - :render-row (fn [row] - (sortable-item [group-item row])) - :render-separator (render-separator (last order))}]] - [sticky-button (label :t/save) #(do - (dispatch [:save-contact-group-order]) - (dispatch [:navigate-to-clean :contact-list]))]]))) diff --git a/src/status_im/ui/screens/group/styles.cljs b/src/status_im/ui/screens/group/styles.cljs index bbaa671514..dcc071b8d3 100644 --- a/src/status_im/ui/screens/group/styles.cljs +++ b/src/status_im/ui/screens/group/styles.cljs @@ -12,18 +12,10 @@ :flex-direction :column :background-color common/color-white}) -(def reorder-groups-container - {:flex 1 - :flex-direction :column - :background-color common/color-light-gray}) - (defstyle reorder-list-container {:flex 1 :android {:padding-top 16}}) -(def group-name-container - {:margin-top 10}) - (def add-button-container {:margin-left 16}) @@ -98,6 +90,9 @@ :ios {:height 63} :android {:height 56}}) +(def contact + {:padding-left 0}) + (defstyle settings-group-container {:ios {:margin-top 25} :android {:margin-top 23}}) @@ -167,21 +162,6 @@ :android {:padding-left 18} :ios {:align-items :center}}) -(def toolbar-title-with-count-text - {:color common/text1-color - :letter-spacing -0.2 - :font-size 17}) - -(def toolbar-title-with-count-text-count - (merge toolbar-title-with-count-text - {:color common/color-light-blue})) - -(def toolbar-title-with-count - {:flex-direction :row}) - -(def toolbar-title-with-count-container - {:padding-left 6}) - (def separator {:background-color common/color-gray5 :height 1 @@ -190,7 +170,3 @@ (def list-view-container {:flex 1 :margin-top 10}) - - - - diff --git a/src/status_im/ui/screens/group/views.cljs b/src/status_im/ui/screens/group/views.cljs index f518c9c0ec..499c9fe28c 100644 --- a/src/status_im/ui/screens/group/views.cljs +++ b/src/status_im/ui/screens/group/views.cljs @@ -1,166 +1,173 @@ (ns status-im.ui.screens.group.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [re-frame.core :refer [dispatch]] + (:require [cljs.spec.alpha :as spec] + [re-frame.core :as re-frame] + [status-im.i18n :as i18n] [status-im.ui.screens.contacts.styles :as cstyles] [status-im.ui.components.common.common :as common] [status-im.ui.components.action-button.action-button :refer [action-button action-separator]] - [status-im.ui.components.react :refer [view text touchable-highlight - keyboard-avoiding-view]] + [status-im.ui.components.react :as react] [status-im.ui.components.icons.vector-icons :as vi] [status-im.ui.components.list.views :as list] [status-im.ui.components.text-input-with-label.view :refer [text-input-with-label]] - [status-im.ui.components.status-bar.view :refer [status-bar]] + [status-im.ui.components.status-bar.view :as status-bar] + [status-im.ui.components.styles :as components.styles] [status-im.ui.components.toolbar.view :as toolbar] - [status-im.utils.platform :refer [platform-specific ios?]] + [status-im.utils.platform :as platform :refer [platform-specific ios?]] [status-im.ui.components.sticky-button :refer [sticky-button]] [status-im.ui.components.contact.contact :refer [contact-view]] + [status-im.ui.screens.add-new.styles :as add-new.styles] [status-im.ui.screens.group.styles :as styles] - [status-im.i18n :refer [label]] - [cljs.spec.alpha :as spec] [status-im.ui.screens.group.db :as v] [status-im.utils.utils :as utils])) (defn group-toolbar [group-type edit?] - [view - [status-bar] + [react/view + [status-bar/status-bar] [toolbar/simple-toolbar - (label + (i18n/label (if (= group-type :contact-group) (if edit? :t/edit-group :t/new-group) - (if edit? :t/chat-settings :t/new-group-chat)))]]) + (if edit? :t/chat-settings :t/group-chat)))]]) (defview group-name-view [] (letsubs [new-group-name [:get :new-chat-name]] - [view styles/group-name-container - [text-input-with-label - {:auto-focus true - :label (label :t/name) - :on-change-text #(dispatch [:set :new-chat-name %]) - :default-value new-group-name}]])) + [react/view add-new.styles/input-container + [react/text-input + {:auto-focus true + :on-change-text #(re-frame/dispatch [:set :new-chat-name %]) + :default-value new-group-name + :placeholder (i18n/label :t/set-a-topic) + :style add-new.styles/input}]])) (defn add-btn [on-press] - [action-button {:label (label :t/add-members) + [action-button {:label (i18n/label :t/add-members) :icon :icons/add :icon-opts {:color :blue} :on-press on-press}]) (defn delete-btn [on-press] - [view styles/settings-group-container - [touchable-highlight {:on-press on-press} - [view styles/settings-group-item - [view styles/delete-icon-container + [react/view styles/settings-group-container + [react/touchable-highlight {:on-press on-press} + [react/view styles/settings-group-item + [react/view styles/delete-icon-container [vi/icon :icons/close {:color :red}]] - [view styles/settings-group-text-container - [text {:style styles/delete-group-text} - (label :t/delete-group)] - [text {:style styles/delete-group-prompt-text} - (label :t/delete-group-prompt)]]]]]) + [react/view styles/settings-group-text-container + [react/text {:style styles/delete-group-text} + (i18n/label :t/delete-group)] + [react/text {:style styles/delete-group-prompt-text} + (i18n/label :t/delete-group-prompt)]]]]]) (defn group-chat-settings-btns [] - [view styles/settings-group-container - [view {:opacity 0.4} - [touchable-highlight {:on-press #()} - [view styles/settings-group-item - [view styles/settings-icon-container + [react/view styles/settings-group-container + [react/view {:opacity 0.4} + [react/touchable-highlight {:on-press #()} + [react/view styles/settings-group-item + [react/view styles/settings-icon-container [vi/icon :icons/speaker {:color :blue}]] - [view styles/settings-group-text-container - [text {:style styles/settings-group-text} - (label :t/mute-notifications)]]]]] + [react/view styles/settings-group-text-container + [react/text {:style styles/settings-group-text} + (i18n/label :t/mute-notifications)]]]]] [action-separator] - [action-button {:label (label :t/clear-history) + [action-button {:label (i18n/label :t/clear-history) :icon :icons/close :icon-opts {:color :blue} - :on-press #(dispatch [:clear-history])}] + :on-press #(re-frame/dispatch [:clear-history])}] [action-separator] - [touchable-highlight {:on-press #(dispatch [:leave-group-chat])} - [view styles/settings-group-item - [view styles/delete-icon-container + [react/touchable-highlight {:on-press #(re-frame/dispatch [:leave-group-chat])} + [react/view styles/settings-group-item + [react/view styles/delete-icon-container [vi/icon :icons/arrow-right {:color :red}]] - [view styles/settings-group-text-container - [text {:style styles/delete-group-text} - (label :t/leave-chat)]]]]]) + [react/view styles/settings-group-text-container + [react/text {:style styles/delete-group-text} + (i18n/label :t/leave-chat)]]]]]) (defn more-btn [contacts-limit contacts-count on-press] - [view + [react/view [common/list-separator] - [view cstyles/show-all - [touchable-highlight {:on-press on-press} - [view - [text {:style cstyles/show-all-text - :uppercase? (get-in platform-specific [:uppercase?]) - :font (if ios? :default :medium)} - (str (- contacts-count contacts-limit) " " (label :t/more))]]]]]) + [react/view cstyles/show-all + [react/touchable-highlight {:on-press on-press} + [react/view + [react/text {:style cstyles/show-all-text + :uppercase? (components.styles/uppercase?) + :font (if ios? :default :medium)} + (str (- contacts-count contacts-limit) " " (i18n/label :t/more))]]]]]) (def ^:const contacts-limit 3) (defview group-contacts-view [group] (letsubs [contacts [:all-added-group-contacts-with-limit (:group-id group) contacts-limit] contacts-count [:all-added-group-contacts-count (:group-id group)]] - [view + [react/view (when (pos? contacts-count) [common/list-separator]) - [view + [react/view (doall (map (fn [row] ^{:key row} - [view + [react/view [contact-view {:contact row - :extend-options [{:action #(dispatch [:remove-contact-from-group - (:whisper-identity row) - (:group-id group)]) - :label (label :t/remove-from-group)}] + :extend-options [{:action #(re-frame/dispatch [:remove-contact-from-group + (:whisper-identity row) + (:group-id group)]) + :label (i18n/label :t/remove-from-group)}] :extended? true}] (when-not (= row (last contacts)) [common/list-separator])]) contacts))] (when (< contacts-limit contacts-count) - [more-btn contacts-limit contacts-count #(dispatch [:navigate-to :edit-group-contact-list])])])) + [more-btn contacts-limit contacts-count #(re-frame/dispatch [:navigate-to :edit-group-contact-list])])])) (defview edit-contact-group [] (letsubs [{:keys [group group-type]} [:get-screen-params]] (let [group-name (:name group) save-btn-enabled? (and (spec/valid? ::v/name group-name) (not= group-name (:name group)))] - [keyboard-avoiding-view {:style styles/group-container} + [react/keyboard-avoiding-view {:style styles/group-container} [group-toolbar group-type true] [group-name-view] - [view styles/list-view-container - [add-btn #(dispatch [:navigate-to :add-contacts-toggle-list])] + [react/view styles/list-view-container + [add-btn #(re-frame/dispatch [:navigate-to :add-contacts-toggle-list])] [group-contacts-view group] - [view styles/separator] + [react/view styles/separator] [delete-btn #(utils/show-confirmation - (str (label :t/delete-group) "?") (label :t/delete-group-confirmation) (label :t/delete) + (str (i18n/label :t/delete-group) "?") (i18n/label :t/delete-group-confirmation) (i18n/label :t/delete) (fn[] - (dispatch [:delete-contact-group]) - (dispatch [:navigate-to-clean :contact-list])))]] + (re-frame/dispatch [:delete-contact-group]) + (re-frame/dispatch [:navigate-to-clean :contact-list])))]] (when save-btn-enabled? - [sticky-button (label :t/save) #(dispatch [:set-contact-group-name])])]))) + [sticky-button (i18n/label :t/save) #(re-frame/dispatch [:set-contact-group-name])])]))) (defn- render-contact [contact] - [contact-view {:contact contact}]) + [contact-view {:contact contact :style styles/contact}]) +(defn- toolbar [group-name save-btn-enabled?] + [toolbar/toolbar {} + toolbar/default-nav-back + [toolbar/content-title (i18n/label :t/group-chat)] + (when save-btn-enabled? + (let [handler #(re-frame/dispatch [:create-new-group-chat-and-open group-name])] + (if platform/android? + [toolbar/actions [{:icon :icons/ok + :icon-opts {:color :blue} + :handler handler}]] + [toolbar/text-action {:handler handler} + (i18n/label :t/create)])))]) (defview new-group [] - (letsubs [contacts [:selected-group-contacts] - group-name [:get :new-chat-name] - group-type [:get-group-type]] + (letsubs [contacts [:selected-group-contacts] + group-name [:get :new-chat-name]] (let [save-btn-enabled? (and (spec/valid? ::v/name group-name) (pos? (count contacts)))] - [keyboard-avoiding-view (merge {:behavior :padding} - styles/group-container) - [group-toolbar group-type false] + [react/keyboard-avoiding-view (merge {:behavior :padding} + styles/group-container) + [status-bar/status-bar] + [toolbar group-name save-btn-enabled?] [group-name-view] - [view styles/list-view-container - [list/flat-list {:data contacts + [list/list-with-label {:flex 1} + (i18n/label :t/members-title) + [list/flat-list {:data contacts :render-fn render-contact :bounces false :keyboardShouldPersistTaps :always - :enableEmptySections true}]] - (when save-btn-enabled? - [sticky-button (label :t/save) - (if (= group-type :contact-group) - #(do - (dispatch [:create-new-contact-group group-name]) - (dispatch [:navigate-to-clean :contact-list])) - #(dispatch [:create-new-group-chat-and-open group-name])) - true])]))) + :enableEmptySections true}]]]))) diff --git a/src/status_im/ui/screens/home/styles.cljs b/src/status_im/ui/screens/home/styles.cljs index b03c9e0365..071264c28f 100644 --- a/src/status_im/ui/screens/home/styles.cljs +++ b/src/status_im/ui/screens/home/styles.cljs @@ -15,7 +15,7 @@ :background-color colors/white :android {:height 76} :ios {:height 74} - :overflow "hidden"}) + :overflow :hidden}) (defstyle chat-icon-container {:padding-top 18 @@ -30,7 +30,7 @@ {:width 40 :height 40 :border-radius 20 - :background-color colors/light-gray + :background-color colors/gray-lighter :align-items :center :justify-content :center}) @@ -135,24 +135,15 @@ :android {:top 2} :ios {:top 3}}) -(def chats-container +(def container {:flex 1}) -(defstyle list-container - {:android {:background-color colors/light-gray} - :ios {:background-color colors/white}}) +(def native-button-offset 16) (def toolbar-actions {:flex-direction :row :padding-right 14}) -(def opts-btn-container - {:align-items :center - :justify-content :center}) - -(def opts-btn - {:padding 16}) - (def create-icon {:fontSize 20 :height 22 diff --git a/src/status_im/ui/screens/home/views.cljs b/src/status_im/ui/screens/home/views.cljs index b34a67c0af..3f706e0257 100644 --- a/src/status_im/ui/screens/home/views.cljs +++ b/src/status_im/ui/screens/home/views.cljs @@ -1,37 +1,35 @@ (ns status-im.ui.screens.home.views (:require-macros [status-im.utils.views :as views]) (:require [re-frame.core :as re-frame] + [status-im.i18n :as i18n] + [status-im.ui.components.colors :as colors] [status-im.ui.components.common.common :as components.common] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.components.native-action-button :refer [native-action-button]] - [status-im.ui.components.styles :as components.styles] [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.actions :as toolbar.actions] [status-im.ui.components.sync-state.offline :refer [offline-view]] [status-im.ui.screens.home.views.inner-item :as inner-item] [status-im.ui.screens.home.styles :as styles] - [status-im.i18n :as i18n] [status-im.utils.platform :as platform])) -(defn toolbar-view [] - [toolbar/toolbar {} +(defn- toolbar [] + [toolbar/toolbar {:title-centered? true} nil [toolbar/content-title (i18n/label :t/status)] [toolbar/actions (when platform/ios? [(toolbar.actions/add #(re-frame/dispatch [:navigate-to :new]))])]]) -(defn home-action-button [] - [native-action-button {:button-color components.styles/color-blue - :offset-x 16 - :offset-y 40 - :spacing 13 - :hide-shadow true +(defn- home-action-button [] + [native-action-button {:button-color colors/blue + :offset-x styles/native-button-offset + :offset-y styles/native-button-offset :accessibility-label :plus-button :on-press #(re-frame/dispatch [:navigate-to :new])}]) -(defn home-list-item [[home-item-id home-item]] +(defn- home-list-item [[home-item-id home-item]] (if (:chat-id home-item) [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to-chat home-item-id])} [react/view @@ -42,17 +40,11 @@ (views/defview home [] (views/letsubs [home-items [:home-items]] - [react/view styles/chats-container - [toolbar-view] - [list/flat-list {:style styles/list-container - :data home-items + [react/view styles/container + [toolbar] + [list/flat-list {:data home-items :render-fn (fn [[home-item-id :as home-item]] - ^{:key home-item-id} [home-list-item home-item]) - :header (when-not (empty? home-items) list/default-header) - :footer (when-not (empty? home-items) - [react/view - [components.common/list-footer] - [components.common/bottom-shadow]])}] + ^{:key home-item-id} [home-list-item home-item])}] (when platform/android? [home-action-button]) - [offline-view]])) \ No newline at end of file + [offline-view]])) diff --git a/src/status_im/ui/screens/home/views/inner_item.cljs b/src/status_im/ui/screens/home/views/inner_item.cljs index bb73836121..46c91767b5 100644 --- a/src/status_im/ui/screens/home/views/inner_item.cljs +++ b/src/status_im/ui/screens/home/views/inner_item.cljs @@ -1,8 +1,6 @@ (ns status-im.ui.screens.home.views.inner-item (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [re-frame.core :as re-frame] - [reagent.core :as reagent] - [clojure.string :as str] + (:require [clojure.string :as str] [status-im.ui.components.react :as react] [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.screens.home.styles :as styles] @@ -13,7 +11,6 @@ [status-im.utils.datetime :as time] [status-im.utils.gfycat.core :as gfycat] [status-im.constants :as const] - [taoensso.timbre :as log] [status-im.ui.components.chat-icon.screen :as chat-icon.screen])) (defn message-content-text [{:keys [content] :as message}] diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index e59e2d49d6..396be0f4af 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -26,7 +26,6 @@ [status-im.ui.screens.group.add-contacts.views :refer [contact-toggle-list add-contacts-toggle-list add-participants-toggle-list]] - [status-im.ui.screens.group.reorder.views :refer [reorder-groups]] [status-im.ui.screens.profile.views :as profile] [status-im.ui.screens.profile.photo-capture.views :refer [profile-photo-capture]] @@ -153,7 +152,6 @@ :edit-chat-group-contact-list edit-chat-group-contact-list :new-public-chat new-public-chat :contact-toggle-list contact-toggle-list - :reorder-groups reorder-groups :new-chat new-chat :qr-scanner qr-scanner :chat chat diff --git a/test/cljs/status_im/react_native/js_dependencies.cljs b/test/cljs/status_im/react_native/js_dependencies.cljs index 6928c9763b..da79a59db4 100644 --- a/test/cljs/status_im/react_native/js_dependencies.cljs +++ b/test/cljs/status_im/react_native/js_dependencies.cljs @@ -27,7 +27,6 @@ :Dimensions #js {:get (fn [])}}) (def realm #js {:schemaVersion (fn []) :close (fn [])}) -(def sortable-listview #js {}) (def vector-icons #js {:default #js {}}) (def webview-bridge #js {:default #js {}}) (def svg #js {:default #js {}})