From b58e7d6fffc8f77f2ef1a4f4b66de2f07ea01ec4 Mon Sep 17 00:00:00 2001 From: ibrahem Date: Mon, 21 Nov 2022 15:18:28 +0200 Subject: [PATCH] Revert changes to quo --- src/quo/components/list/item.cljs | 56 +++++------ src/quo/components/text_input.cljs | 23 ++--- .../ui/components/search_input/view.cljs | 2 +- src/status_im/ui/components/toolbar.cljs | 2 - src/status_im/ui/components/topbar.cljs | 4 +- src/status_im/ui/screens/group/views.cljs | 54 +++++------ .../ui2/screens/chat/components/new_chat.cljs | 95 +++++++++---------- 7 files changed, 113 insertions(+), 123 deletions(-) diff --git a/src/quo/components/list/item.cljs b/src/quo/components/list/item.cljs index 0c586bff42..b8d43d6104 100644 --- a/src/quo/components/list/item.cljs +++ b/src/quo/components/list/item.cljs @@ -4,7 +4,7 @@ [quo.haptic :as haptic] [quo.gesture-handler :as gh] [quo.design-system.spacing :as spacing] - [quo.design-system.colors :as quo.colors] + [quo.design-system.colors :as colors] [quo.components.text :as text] [quo.components.controls.view :as controls] [quo.components.tooltip :as tooltip] @@ -13,31 +13,31 @@ (defn themes [theme] (case theme - :main {:icon-color (:icon-04 @quo.colors/theme) - :icon-bg-color (:interactive-02 @quo.colors/theme) - :active-background (:interactive-02 @quo.colors/theme) - :passive-background (:ui-background @quo.colors/theme) - :text-color (:text-01 @quo.colors/theme)} - :accent {:icon-color (:icon-04 @quo.colors/theme) - :icon-bg-color (:interactive-02 @quo.colors/theme) - :active-background (:interactive-02 @quo.colors/theme) - :passive-background (:ui-background @quo.colors/theme) - :text-color (:text-04 @quo.colors/theme)} - :negative {:icon-color (:negative-01 @quo.colors/theme) - :icon-bg-color (:negative-02 @quo.colors/theme) - :active-background (:negative-02 @quo.colors/theme) - :passive-background (:ui-background @quo.colors/theme) - :text-color (:negative-01 @quo.colors/theme)} - :positive {:icon-color (:positive-01 @quo.colors/theme) - :icon-bg-color (:positive-02 @quo.colors/theme) - :active-background (:positive-02 @quo.colors/theme) - :passive-background (:ui-background @quo.colors/theme) - :text-color (:positive-01 @quo.colors/theme)} - :disabled {:icon-color (:icon-02 @quo.colors/theme) - :icon-bg-color (:ui-01 @quo.colors/theme) - :active-background (:ui-01 @quo.colors/theme) - :passive-background (:ui-background @quo.colors/theme) - :text-color (:text-02 @quo.colors/theme)})) + :main {:icon-color (:icon-04 @colors/theme) + :icon-bg-color (:interactive-02 @colors/theme) + :active-background (:interactive-02 @colors/theme) + :passive-background (:ui-background @colors/theme) + :text-color (:text-01 @colors/theme)} + :accent {:icon-color (:icon-04 @colors/theme) + :icon-bg-color (:interactive-02 @colors/theme) + :active-background (:interactive-02 @colors/theme) + :passive-background (:ui-background @colors/theme) + :text-color (:text-04 @colors/theme)} + :negative {:icon-color (:negative-01 @colors/theme) + :icon-bg-color (:negative-02 @colors/theme) + :active-background (:negative-02 @colors/theme) + :passive-background (:ui-background @colors/theme) + :text-color (:negative-01 @colors/theme)} + :positive {:icon-color (:positive-01 @colors/theme) + :icon-bg-color (:positive-02 @colors/theme) + :active-background (:positive-02 @colors/theme) + :passive-background (:ui-background @colors/theme) + :text-color (:positive-01 @colors/theme)} + :disabled {:icon-color (:icon-02 @colors/theme) + :icon-bg-color (:ui-01 @colors/theme) + :active-background (:ui-01 @colors/theme) + :passive-background (:ui-background @colors/theme) + :text-color (:text-02 @colors/theme)})) (defn size->icon-size [size] (case size @@ -184,11 +184,11 @@ accessory)] (when (and chevron platform/ios?) [rn/view {:style {:padding-right (:tiny spacing/spacing)}} - [icons/icon :i/next {:container-style {:opacity 0.4 + [icons/icon :main-icons/next {:container-style {:opacity 0.4 :align-items :center :justify-content :center} :resize-mode :center - :color (:icon-02 @quo.colors/theme)}]])])) + :color (:icon-02 @colors/theme)}]])])) (defn list-item [{:keys [theme accessory disabled subtitle-max-lines icon icon-container-style diff --git a/src/quo/components/text_input.cljs b/src/quo/components/text_input.cljs index f3f05a722a..8af35f6291 100644 --- a/src/quo/components/text_input.cljs +++ b/src/quo/components/text_input.cljs @@ -10,9 +10,7 @@ [quo.design-system.typography :as typography] [quo.design-system.spacing :as spacing] [quo.design-system.colors :as colors] - [quo.components.text :as text] - [quo2.components.icon :as quo2.icons] - [status-im.i18n.i18n :as i18n])) + [quo.components.text :as text])) ;; NOTE(Ferossgp): Refactor with hooks when available ;; We track all currently mounted text input refs @@ -87,7 +85,7 @@ :background-color (:ui-01 @colors/theme)} style)) -(defn text-input-style [multiline text-padding-left input-style monospace before after] +(defn text-input-style [multiline input-style monospace before after] (merge (if monospace typography/monospace typography/font-regular) @@ -100,7 +98,7 @@ :color (:text-01 @colors/theme) :height height} (when-not before - {:padding-left (or text-padding-left (:base spacing/spacing))}) + {:padding-left (:base spacing/spacing)}) (when-not after {:padding-right (:base spacing/spacing)}) (when multiline @@ -148,9 +146,10 @@ blur (fn [] (some-> @ref (ocall "blur")))] (fn [{:keys [label multiline error style input-style keyboard-type before after - on-focus text-padding-left placeholder-text-color on-blur show-cancel accessibility-label + cancel-label on-focus on-blur show-cancel accessibility-label bottom-value secure-text-entry container-style get-ref on-cancel monospace auto-complete-type auto-correct] + :or {cancel-label "Cancel"} :as props}] {:pre [(check-spec ::text-input props)]} (let [show-cancel (if (nil? show-cancel) @@ -206,11 +205,11 @@ (when before [accessory-element before]) [rn/text-input - (merge {:style (text-input-style multiline text-padding-left input-style monospace before after) + (merge {:style (text-input-style multiline input-style monospace before after) :ref (fn [r] (reset! ref r) (when get-ref (get-ref r))) - :placeholder-text-color (or placeholder-text-color (:text-02 @colors/theme)) + :placeholder-text-color (:text-02 @colors/theme) :underline-color-android :transparent :auto-capitalize :none :secure-text-entry secure @@ -237,11 +236,9 @@ (when (and show-cancel (not multiline) @focused) - [rn/touchable-opacity {:style (cancel-style) - :on-press on-cancel - :accessibility-label (i18n/label :t/close-contact-search)} - [quo2.icons/icon :i/clear {:size 20 - :no-color true}]]) + [rn/touchable-opacity {:style (cancel-style) + :on-press on-cancel} + [text/text {:color :link} cancel-label]]) (when error [tooltip/tooltip (merge {:bottom-value (if bottom-value bottom-value 0)} (when accessibility-label diff --git a/src/status_im/ui/components/search_input/view.cljs b/src/status_im/ui/components/search_input/view.cljs index c4f9647bb1..578b478e7d 100644 --- a/src/status_im/ui/components/search_input/view.cljs +++ b/src/status_im/ui/components/search_input/view.cljs @@ -82,4 +82,4 @@ (let [^js native-event (.-nativeEvent ^js e) text (.-text native-event)] (when on-change - (on-change text))))}]))) + (on-change text))))}]))) \ No newline at end of file diff --git a/src/status_im/ui/components/toolbar.cljs b/src/status_im/ui/components/toolbar.cljs index d187cbf68e..8b27f93406 100644 --- a/src/status_im/ui/components/toolbar.cljs +++ b/src/status_im/ui/components/toolbar.cljs @@ -6,8 +6,6 @@ :or {size :default}}] (merge {:align-items :center :padding-horizontal 8 - :position :absolute - :bottom 10 :width "100%" :flex-direction :row :justify-content :space-between} diff --git a/src/status_im/ui/components/topbar.cljs b/src/status_im/ui/components/topbar.cljs index 203e638ee8..bffe2d5279 100644 --- a/src/status_im/ui/components/topbar.cljs +++ b/src/status_im/ui/components/topbar.cljs @@ -5,10 +5,10 @@ (def default-button-width 48) -(defn default-navigation [modal? {:keys [on-press label icon sheet?]}] +(defn default-navigation [modal? {:keys [on-press label icon]}] (cond-> {:icon (if modal? :main-icons/close :main-icons/arrow-left) :accessibility-label :back-button - :on-press #(re-frame/dispatch [(if sheet? :bottom-sheet/hide :navigate-back)])} + :on-press #(re-frame/dispatch [:navigate-back])} on-press (assoc :on-press on-press) diff --git a/src/status_im/ui/screens/group/views.cljs b/src/status_im/ui/screens/group/views.cljs index ab8d039bbb..b28b31bea4 100644 --- a/src/status_im/ui/screens/group/views.cljs +++ b/src/status_im/ui/screens/group/views.cljs @@ -17,7 +17,6 @@ [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.group.styles :as styles] [quo.core :as quo] - [status-im.utils.re-frame :as rf] [status-im.utils.debounce :as debounce]) (:require-macros [status-im.utils.views :as views])) @@ -31,6 +30,7 @@ (defn- on-toggle [allow-new-users? checked? public-key] (cond + checked? (re-frame/dispatch [:deselect-contact public-key allow-new-users?]) @@ -41,6 +41,7 @@ (defn- on-toggle-participant [allow-new-users? checked? public-key] (cond + checked? (re-frame/dispatch [:deselect-participant public-key allow-new-users?]) @@ -57,7 +58,7 @@ {:title first-name :subtitle second-name :icon [chat-icon/contact-icon-contacts-tab - (multiaccounts/displayed-photo contact)] + (multiaccounts/displayed-photo contact)] :on-press #(on-toggle allow-new-users? contact-selected? public-key) :active contact-selected? :accessory :checkbox}]))) @@ -158,11 +159,10 @@ [no-contacts {:no-contacts no-contacts-label}])]]))) ;; Start group chat -(defn contact-toggle-list [] - (let [contacts (rf/sub [:contacts/active]) - selected-contacts-count (rf/sub [:selected-contacts-count]) - one-contact-pub-key (-> contacts first :public-key)] - [react/keyboard-avoiding-view {:style styles/group-container +(views/defview contact-toggle-list [] + (views/letsubs [contacts [:contacts/active] + selected-contacts-count [:selected-contacts-count]] + [react/keyboard-avoiding-view {:style styles/group-container :ignore-offset true} [topbar/topbar {:use-insets false :border-bottom false @@ -178,13 +178,12 @@ (dec constants/max-group-chat-participants))}] [toolbar/toolbar {:show-border? true - :right [quo/button {:type :secondary - :after :main-icon/next - :accessibility-label :next-button - :on-press #(if (= 1 selected-contacts-count) - (re-frame/dispatch [:chat.ui/start-chat one-contact-pub-key]) - (re-frame/dispatch [:navigate-to :new-group]))} - (i18n/label :t/next)]}]])) + :right + [quo/button {:type :secondary + :after :main-icon/next + :accessibility-label :next-button + :on-press #(re-frame/dispatch [:navigate-to :new-group])} + (i18n/label :t/next)]}]])) ;; Add participants to existing group chat (views/defview add-participants-toggle-list [] @@ -215,9 +214,9 @@ :on-press #(re-frame/dispatch [:group-chats.ui/add-members-pressed])} (i18n/label :t/add)]}]]))) -(defn edit-group-chat-name [] - (let [{:keys [name chat-id]} (rf/sub [:chats/current-chat]) - new-group-chat-name (reagent/atom nil)] +(views/defview edit-group-chat-name [] + (views/letsubs [{:keys [name chat-id]} [:chats/current-chat] + new-group-chat-name (reagent/atom nil)] [kb-presentation/keyboard-avoiding-view {:style styles/group-container} [react/scroll-view {:style {:padding 16 :flex 1}} @@ -232,14 +231,15 @@ [react/view {:style {:flex 1}}] [toolbar/toolbar {:show-border? true - :center [quo/button {:type :secondary - :accessibility-label :done - :disabled (and (<= (count @new-group-chat-name) 1) - (not (nil? @new-group-chat-name))) - :on-press #(cond - (< 1 (count @new-group-chat-name)) - (re-frame/dispatch [:group-chats.ui/name-changed chat-id @new-group-chat-name]) + :center + [quo/button {:type :secondary + :accessibility-label :done + :disabled (and (<= (count @new-group-chat-name) 1) + (not (nil? @new-group-chat-name))) + :on-press #(cond + (< 1 (count @new-group-chat-name)) + (re-frame/dispatch [:group-chats.ui/name-changed chat-id @new-group-chat-name]) - (nil? @new-group-chat-name) - (re-frame/dispatch [:navigate-back]))} - (i18n/label :t/done)]}]])) + (nil? @new-group-chat-name) + (re-frame/dispatch [:navigate-back]))} + (i18n/label :t/done)]}]])) diff --git a/src/status_im/ui2/screens/chat/components/new_chat.cljs b/src/status_im/ui2/screens/chat/components/new_chat.cljs index 1593e36d55..99bc552092 100644 --- a/src/status_im/ui2/screens/chat/components/new_chat.cljs +++ b/src/status_im/ui2/screens/chat/components/new_chat.cljs @@ -7,9 +7,7 @@ [status-im.i18n.i18n :as i18n] [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.multiaccounts.core :as multiaccounts] - [status-im.ui.components.keyboard-avoid-presentation - :as - kb-presentation] + [status-im.ui.components.keyboard-avoid-presentation :as kb-presentation] [status-im.ui.components.invite.views :as invite] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] @@ -45,7 +43,6 @@ (defn- on-toggle-participant [allow-new-users? checked? public-key] (cond - checked? (rf/dispatch [:deselect-participant public-key allow-new-users?]) @@ -106,52 +103,50 @@ contacts))) ;; Set name of new group-chat -(views/defview new-group [] - (views/letsubs [contacts [:selected-group-contacts] - group-name [:new-chat-name]] - (let [group-name-empty? (not (spec/valid? :global/not-empty-string group-name))] - [react/keyboard-avoiding-view {:style styles/group-container - :ignore-offset true} - [react/view {:flex 1} - [topbar/topbar {:use-insets false - :title (i18n/label :t/new-group-chat) - :subtitle (i18n/label :t/group-chat-members-count - {:selected (inc (count contacts)) - :max constants/max-group-chat-participants})}] - [react/view {:style {:padding-top 16 - :flex 1}} - [react/view {:style {:padding-horizontal 16}} - [quo/text-input - {:auto-focus true - :on-change-text #(rf/dispatch [:set :new-chat-name %]) - :default-value group-name - :placeholder (i18n/label :t/set-a-topic) - :accessibility-label :chat-name-input}] - [react/text {:style (styles/members-title)} - (i18n/label :t/members-title)]] - [react/view {:style {:margin-top 8 - :flex 1}} - [list/flat-list {:data contacts - :key-fn :address - :render-fn render-contact - :bounces false - :keyboard-should-persist-taps :always - :enable-empty-sections true}]]] - [toolbar/toolbar - {:show-border? true - :left - [quo/button {:type :secondary - :before :main-icon/back - :accessibility-label :previous-button - :on-press #(rf/dispatch [:navigate-back])} - (i18n/label :t/back)] - :right - [quo/button {:type :secondary - :accessibility-label :create-group-chat-button - :disabled group-name-empty? - :on-press #(debounce/dispatch-and-chill [:group-chats.ui/create-pressed group-name] - 300)} - (i18n/label :t/create-group-chat)]}]]]))) +(defn new-group [] + (let [contacts (rf/sub [:selected-group-contacts]) + group-name (rf/sub [:new-chat-name]) + group-name-empty? (not (spec/valid? :global/not-empty-string group-name))] + [react/keyboard-avoiding-view {:style styles/group-container + :ignore-offset true} + [react/view {:flex 1} + [topbar/topbar {:use-insets false + :title (i18n/label :t/new-group-chat) + :subtitle (i18n/label :t/group-chat-members-count + {:selected (inc (count contacts)) + :max constants/max-group-chat-participants})}] + [react/view {:style {:padding-top 16 + :flex 1}} + [react/view {:style {:padding-horizontal 16}} + [quo/text-input + {:auto-focus true + :on-change-text #(rf/dispatch [:set :new-chat-name %]) + :default-value group-name + :placeholder (i18n/label :t/set-a-topic) + :accessibility-label :chat-name-input}] + [react/text {:style (styles/members-title)} + (i18n/label :t/members-title)]] + [react/view {:style {:margin-top 8 + :flex 1}} + [list/flat-list {:data contacts + :key-fn :address + :render-fn render-contact + :bounces false + :keyboard-should-persist-taps :always + :enable-empty-sections true}]]] + [toolbar/toolbar + {:show-border? true + :left [quo/button {:type :secondary + :before :main-icon/back + :accessibility-label :previous-button + :on-press #(rf/dispatch [:navigate-back])} + (i18n/label :t/back)] + :right [quo/button {:type :secondary + :accessibility-label :create-group-chat-button + :disabled group-name-empty? + :on-press #(debounce/dispatch-and-chill [:group-chats.ui/create-pressed group-name] + 300)} + (i18n/label :t/create-group-chat)]}]]])) (defn searchable-contact-list [] (let [search-value (reagent/atom nil)]