diff --git a/resources/icons/newchat.svg b/resources/icons/newchat.svg index 296b02065f..6872c7b4de 100644 --- a/resources/icons/newchat.svg +++ b/resources/icons/newchat.svg @@ -1,5 +1,3 @@ - - - + diff --git a/src/status_im/ui/components/action_button/action_button.cljs b/src/status_im/ui/components/action_button/action_button.cljs index 4b095bcb5e..c522156459 100644 --- a/src/status_im/ui/components/action_button/action_button.cljs +++ b/src/status_im/ui/components/action_button/action_button.cljs @@ -8,8 +8,8 @@ [rn/touchable-highlight (merge {:on-press on-press} (when accessibility-label {:accessibility-label accessibility-label})) - [rn/view st/action-button - [rn/view (st/action-button-icon-container cyrcle-color) + [rn/view {:style st/action-button} + [rn/view {:style (st/action-button-icon-container cyrcle-color)} [vi/icon icon icon-opts]] [rn/view st/action-button-label-container [rn/text {:style (merge st/action-button-label label-style)} diff --git a/src/status_im/ui/components/action_button/styles.cljs b/src/status_im/ui/components/action_button/styles.cljs index 329dea63e1..d50e943dc6 100644 --- a/src/status_im/ui/components/action_button/styles.cljs +++ b/src/status_im/ui/components/action_button/styles.cljs @@ -8,6 +8,7 @@ :flex-direction :row :align-items :center :ios {:height 63} + :desktop {:height 50} :android {:height 56}}) (defnstyle action-button-icon-container [circle-color] diff --git a/src/status_im/ui/screens/desktop/main/add_new/styles.cljs b/src/status_im/ui/screens/desktop/main/add_new/styles.cljs index 2aecd032e1..b436d0f7ed 100644 --- a/src/status_im/ui/screens/desktop/main/add_new/styles.cljs +++ b/src/status_im/ui/screens/desktop/main/add_new/styles.cljs @@ -1,11 +1,11 @@ (ns status-im.ui.screens.desktop.main.add-new.styles (:require [status-im.ui.components.colors :as colors])) -(def new-contact-view +(def new-view {:flex 1 :background-color colors/white - :margin-left 24 - :margin-right 37}) + :margin-left 16 + :margin-right 24}) (def new-contact-title {:height 64 @@ -14,15 +14,12 @@ (def new-contact-title-text {:font-size 20 + :font-weight :bold :color :black}) (def new-contact-subtitle {:font-size 14}) -(def new-contact-separator - {:height 1 - :background-color colors/gray-light}) - (def add-contact-edit-view {:height 45 :margin-bottom 32 @@ -32,7 +29,8 @@ :margin-top 16}) (defn add-contact-input [error?] - (cond-> {:font-size 14 + (cond-> {:flex 1 + :font-size 14 :background-color colors/gray-lighter :margin-right 12 :border-radius 8} diff --git a/src/status_im/ui/screens/desktop/main/add_new/views.cljs b/src/status_im/ui/screens/desktop/main/add_new/views.cljs index be54e3f241..13a31772f8 100644 --- a/src/status_im/ui/screens/desktop/main/add_new/views.cljs +++ b/src/status_im/ui/screens/desktop/main/add_new/views.cljs @@ -14,19 +14,6 @@ [status-im.ui.components.react :as react] [status-im.ui.components.colors :as colors])) -(def group-chat-section - ^{:key "groupchat"} - [react/view {:style styles/new-contact-title} - [react/text {:style styles/new-contact-title-text - :font :medium} - (i18n/label :new-group-chat)] - [react/touchable-highlight {:on-press #(re-frame/dispatch [:contact.ui/start-group-chat-pressed])} - [react/view - {:style (styles/add-contact-button nil)} - [react/text - {:style (styles/add-contact-button-text nil)} - (i18n/label :start-chat)]]]]) - (defn topic-input-placeholder [] [react/text {:style styles/topic-placeholder} "#"]) @@ -37,97 +24,106 @@ text]] [react/view {:style styles/tooltip-triangle}]]) -(views/defview new-contact [] +(views/defview new-one-to-one [] (views/letsubs [new-contact-identity [:get :contacts/new-identity] contacts [:contacts/all-added-people-contacts] - chat-error [:new-identity-error] - topic [:get :public-group-topic] - topic-error [:public-chat.new/topic-error-message]] + chat-error [:new-identity-error]] {:component-will-unmount #(re-frame/dispatch [:new-chat/set-new-identity nil])} - [react/scroll-view - [react/view {:style styles/new-contact-view} - ^{:key "newcontact"} - [react/view {:style styles/new-contact-title} - [react/text {:style styles/new-contact-title-text - :font :medium} - (i18n/label :new-chat)]] - [react/text {:style styles/new-contact-subtitle} (i18n/label :contact-code)] - [react/view {:style styles/new-contact-separator}] - (let [disable? (or (not (string/blank? chat-error)) - (string/blank? new-contact-identity)) - show-error-tooltip? (and chat-error - (not (string/blank? new-contact-identity))) - create-1to1-chat #(re-frame/dispatch [:contact.ui/contact-code-submitted new-contact-identity])] - [react/view {:style styles/add-contact-edit-view} - [react/view {:flex 1 - :style (styles/add-contact-input show-error-tooltip?)} - (when show-error-tooltip? - [error-tooltip chat-error]) - [react/text-input {:placeholder "0x..." - :flex 1 - :selection-color colors/blue - :font :default - :on-change (fn [e] - (let [native-event (.-nativeEvent e) - text (.-text native-event)] - (re-frame/dispatch [:new-chat/set-new-identity text]))) - :on-submit-editing (when-not disable? create-1to1-chat)}]] - [react/touchable-highlight {:disabled disable? :on-press create-1to1-chat} - [react/view - {:style (styles/add-contact-button disable?)} - [react/text - {:style (styles/add-contact-button-text disable?)} - (i18n/label :start-chat)]]]]) - ^{:key "choosecontact"} - [react/view - (when (seq contacts) [react/text {:style styles/new-contact-subtitle} (i18n/label :or-choose-a-contact)]) - [react/view {:style styles/suggested-contacts} - (doall - (for [c contacts] - ^{:key (:public-key c)} - [react/touchable-highlight {:on-press #(do - (re-frame/dispatch [:set :contacts/new-identity (:public-key c)]) - (re-frame/dispatch [:contact.ui/contact-code-submitted (:public-key c)]))} - [react/view {:style styles/suggested-contact-view} - [react/image {:style styles/suggested-contact-image - :source {:uri (:photo-path c)}}] - [react/text {:style styles/new-contact-subtitle} (:name c)]]]))]] - (when config/group-chats-enabled? group-chat-section) - ^{:key "publicchat"} - [react/view {:style styles/new-contact-title} - [react/text {:style styles/new-contact-title-text - :font :medium} - (i18n/label :new-public-group-chat)]] - [react/text {:style styles/new-contact-subtitle} (i18n/label :public-group-topic)] - [react/view {:style styles/new-contact-separator}] - (let [disable? (or topic-error - (string/blank? topic)) - show-error-tooltip? topic-error - create-public-chat #(when (public-chat.db/valid-topic? topic) - (re-frame/dispatch [:set :public-group-topic nil]) - (re-frame/dispatch [:chat.ui/start-public-chat topic {:navigation-reset? true}]))] - [react/view {:style styles/add-contact-edit-view} - [react/view {:flex 1 - :style (styles/add-pub-chat-input show-error-tooltip?)} - (when show-error-tooltip? - [error-tooltip topic-error]) + [react/view {:style styles/new-view} + [react/view {:style styles/new-contact-title} + [react/text {:style styles/new-contact-title-text + :font :medium} + (i18n/label :new-chat)]] + [react/text {:style styles/new-contact-subtitle} (i18n/label :enter-ens-or-contact-code)] + (let [disable? (or (not (string/blank? chat-error)) + (string/blank? new-contact-identity)) + show-error-tooltip? (and chat-error + (not (string/blank? new-contact-identity))) + create-1to1-chat #(re-frame/dispatch [:contact.ui/contact-code-submitted new-contact-identity])] + [react/view {:style styles/add-contact-edit-view} + [react/view {:style (styles/add-contact-input show-error-tooltip?)} + (when show-error-tooltip? + [error-tooltip chat-error]) + [react/text-input {:placeholder "name.stateofus.eth" + :flex 1 + :selection-color colors/blue + :font :default + :on-change (fn [e] + (let [native-event (.-nativeEvent e) + text (.-text native-event)] + (re-frame/dispatch [:new-chat/set-new-identity text]))) + :on-submit-editing (when-not disable? create-1to1-chat)}]] + [react/touchable-highlight {:disabled disable? :on-press create-1to1-chat} + [react/view + {:style (styles/add-contact-button disable?)} + [react/text + {:style (styles/add-contact-button-text disable?)} + (i18n/label :start-chat)]]]]) + (when (seq contacts) [react/text {:style styles/new-contact-subtitle} (i18n/label :or-choose-a-contact)]) + [react/scroll-view + [react/view {:style styles/suggested-contacts} + (doall + (for [c contacts] + ^{:key (:public-key c)} + [react/touchable-highlight {:on-press #(do + (re-frame/dispatch [:set :contacts/new-identity (:public-key c)]) + (re-frame/dispatch [:contact.ui/contact-code-submitted (:public-key c)]))} + [react/view {:style styles/suggested-contact-view} + [react/image {:style styles/suggested-contact-image + :source {:uri (:photo-path c)}}] + [react/text {:style styles/new-contact-subtitle} (:name c)]]]))]]])) - [react/text-input {:flex 1 - :font :default - :selection-color colors/blue - :placeholder "" - :on-change (fn [e] - (let [text (.. e -nativeEvent -text)] - (re-frame/dispatch [:set :public-group-topic text]))) - :on-submit-editing (when-not disable? - create-public-chat)}]] - [react/touchable-highlight {:disabled disable? - :on-press create-public-chat} - [react/view {:style (styles/add-contact-button disable?)} - [react/text {:style (styles/add-contact-button-text disable?)} - (i18n/label :new-public-group-chat)]]]]) - [topic-input-placeholder] - [react/text {:style styles/new-contact-subtitle} (i18n/label :selected-for-you)] +(views/defview new-group-chat [] + [react/view {:style styles/new-view} + [react/view {:style styles/new-contact-title} + [react/text {:style styles/new-contact-title-text + :font :medium} + (i18n/label :new-group-chat)]] + [react/touchable-highlight {:on-press #(re-frame/dispatch [:contact.ui/start-group-chat-pressed])} + [react/view + {:style (styles/add-contact-button nil)} + [react/text + {:style (styles/add-contact-button-text nil)} + (i18n/label :start-chat)]]]]) + +(views/defview new-public-chat [] + (views/letsubs [topic [:get :public-group-topic] + topic-error [:public-chat.new/topic-error-message]] + [react/view {:style styles/new-view} + [react/view {:style styles/new-contact-title} + [react/text {:style styles/new-contact-title-text + :font :medium} + (i18n/label :new-public-group-chat)]] + [react/text {:style styles/new-contact-subtitle} (i18n/label :public-group-topic)] + (let [disable? (or topic-error + (string/blank? topic)) + show-error-tooltip? topic-error + create-public-chat #(when (public-chat.db/valid-topic? topic) + (re-frame/dispatch [:set :public-group-topic nil]) + (re-frame/dispatch [:chat.ui/start-public-chat topic {:navigation-reset? true}]))] + [react/view {:style styles/add-contact-edit-view} + [react/view {:flex 1 + :style (styles/add-pub-chat-input show-error-tooltip?)} + (when show-error-tooltip? + [error-tooltip topic-error]) + + [react/text-input {:flex 1 + :font :default + :selection-color colors/blue + :placeholder "" + :on-change (fn [e] + (let [text (.. e -nativeEvent -text)] + (re-frame/dispatch [:set :public-group-topic text]))) + :on-submit-editing (when-not disable? + create-public-chat)}]] + [react/touchable-highlight {:disabled disable? + :on-press create-public-chat} + [react/view {:style (styles/add-contact-button disable?)} + [react/text {:style (styles/add-contact-button-text disable?)} + (i18n/label :new-public-group-chat)]]]]) + [topic-input-placeholder] + [react/text {:style styles/new-contact-subtitle} (i18n/label :selected-for-you)] + [react/scroll-view [react/view {:style styles/suggested-contacts} (doall (for [topic public-chat/default-public-chats] diff --git a/src/status_im/ui/screens/desktop/main/styles.cljs b/src/status_im/ui/screens/desktop/main/styles.cljs index c37c33dc9e..a360cfded2 100644 --- a/src/status_im/ui/screens/desktop/main/styles.cljs +++ b/src/status_im/ui/screens/desktop/main/styles.cljs @@ -12,3 +12,11 @@ (def pane-separator {:width 1 :background-color colors/gray-light}) + +(def absolute + {:position :absolute + :top 0 + :right 0 + :left 0 + :bottom 0 + :flex 1}) diff --git a/src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs b/src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs index 086e7728ca..cf8c8b3764 100644 --- a/src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs +++ b/src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs @@ -90,3 +90,19 @@ (def topic-text {:font-size 25.6 :color colors/white}) + +(def popup-shaddow + {:background-color colors/black-transparent + :border-radius 10 + :margin-top 60 + :margin-left 120}) + +(def popup + {:background-color colors/white + :padding-right 15 + :padding-vertical 10 + :margin-top 1 + :margin-bottom 4 + :margin-left 3 + :margin-right 3 + :border-radius 10}) diff --git a/src/status_im/ui/screens/desktop/main/tabs/home/views.cljs b/src/status_im/ui/screens/desktop/main/tabs/home/views.cljs index 3a672ed509..b2438ecf9e 100644 --- a/src/status_im/ui/screens/desktop/main/tabs/home/views.cljs +++ b/src/status_im/ui/screens/desktop/main/tabs/home/views.cljs @@ -13,7 +13,11 @@ [status-im.ui.components.react :as react] [status-im.constants :as constants] [status-im.utils.utils :as utils] - [status-im.ui.components.react :as components])) + [status-im.ui.components.react :as components] + [reagent.core :as reagent] + [status-im.ui.components.action-button.styles :as action-button.styles] + [status-im.ui.components.action-button.action-button :as action-button] + [status-im.utils.config :as config])) (views/defview chat-list-item-inner-view [{:keys [chat-id name group-chat color public? public-key] :as chat-item}] (views/letsubs [photo-path [:contacts/chat-photo chat-id] @@ -102,6 +106,35 @@ text (.-text native-event)] (re-frame/dispatch [:search/filter-changed text])))}]]) +(defn popup [] + [react/view {:style {:flex-direction :row}} + [react/view {:style styles/popup-shaddow} + [react/view {:style styles/popup} + [action-button/action-button + {:label (i18n/label :t/start-new-chat) + :accessibility-label :start-1-1-chat-button + :icon :icons/newchat + :icon-opts {:color colors/blue} + :on-press #(do + (re-frame/dispatch [:set-in [:desktop :popup] nil]) + (re-frame/dispatch [:navigate-to :desktop/new-one-to-one]))}] + [action-button/action-button + {:label (i18n/label :t/start-group-chat) + :accessibility-label :start-group-chat-button + :icon :icons/contacts + :icon-opts {:color colors/blue} + :on-press #(do + (re-frame/dispatch [:set-in [:desktop :popup] nil]) + (re-frame/dispatch [:navigate-to :desktop/new-group-chat]))}] + [action-button/action-button + {:label (i18n/label :t/new-public-group-chat) + :accessibility-label :join-public-chat-button + :icon :icons/public + :icon-opts {:color colors/blue} + :on-press #(do + (re-frame/dispatch [:set-in [:desktop :popup] nil]) + (re-frame/dispatch [:navigate-to :desktop/new-public-chat]))}]]]]) + (views/defview chat-list-view [loading?] (views/letsubs [search-filter [:search/filter] filtered-home-items [:search/filtered-home-items]] @@ -120,10 +153,10 @@ [react/view {:style styles/chat-list-view} [react/view {:style styles/chat-list-header} [search-input search-filter] - [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :new-contact])} - [react/view {:style styles/add-new} - [icons/icon :icons/add {:style {:tint-color :white}}]]]] - [react/view {:style styles/chat-list-separator}] + [react/view + [react/touchable-highlight {:on-press #(re-frame/dispatch [:set-in [:desktop :popup] popup])} + [react/view {:style styles/add-new} + [icons/icon :icons/add {:style {:tint-color :white}}]]]]] (if loading? [react/view {:style {:flex 1 :justify-content :center diff --git a/src/status_im/ui/screens/desktop/main/views.cljs b/src/status_im/ui/screens/desktop/main/views.cljs index 9cce11e5d4..98613d4b29 100644 --- a/src/status_im/ui/screens/desktop/main/views.cljs +++ b/src/status_im/ui/screens/desktop/main/views.cljs @@ -6,7 +6,8 @@ [status-im.ui.screens.desktop.main.chat.views :as chat.views] [status-im.ui.screens.desktop.main.add-new.views :as add-new.views] [status-im.ui.components.desktop.tabs :as tabs] - [status-im.ui.components.react :as react])) + [status-im.ui.components.react :as react] + [re-frame.core :as re-frame])) (views/defview status-view [] [react/view {:style {:flex 1 :background-color "#eef2f5" :align-items :center :justify-content :center}} @@ -22,11 +23,23 @@ [react/view {:style {:flex 1}} [component]]))) +(views/defview popup-view [] + (views/letsubs [popup [:get-in [:desktop :popup]]] + (when popup + [react/view {:style styles/absolute} + [react/touchable-highlight {:on-press #(re-frame/dispatch [:set-in [:desktop :popup] nil]) + :style {:flex 1}} + [react/view]] + [react/view {:style styles/absolute} + [popup]]]))) + (views/defview main-view [] (views/letsubs [view-id [:get :view-id]] (let [component (case view-id :chat chat.views/chat-view - :new-contact add-new.views/new-contact + :desktop/new-one-to-one add-new.views/new-one-to-one + :desktop/new-public-chat add-new.views/new-public-chat + :desktop/new-group-chat add-new.views/new-group-chat :qr-code profile.views/qr-code :advanced-settings profile.views/advanced-settings :chat-profile chat.views/chat-profile diff --git a/src/status_im/ui/screens/desktop/views.cljs b/src/status_im/ui/screens/desktop/views.cljs index 1c7b1b0508..bced610dcb 100644 --- a/src/status_im/ui/screens/desktop/views.cljs +++ b/src/status_im/ui/screens/desktop/views.cljs @@ -3,10 +3,10 @@ (:require [status-im.ui.screens.desktop.main.views :as main.views] [status-im.ui.components.react :as react] [status-im.ui.screens.intro.views :as intro.views] - [status-im.ui.screens.group.add-contacts.views :refer [contact-toggle-list]] + [status-im.ui.screens.group.add-contacts.views :refer [contact-toggle-list + add-participants-toggle-list]] [status-im.ui.screens.group.views :refer [new-group]] [status-im.ui.screens.profile.group-chat.views :refer [group-chat-profile]] - [status-im.ui.screens.group.add-contacts.views :refer [add-participants-toggle-list]] [status-im.ui.screens.accounts.create.views :as create.views] [status-im.ui.screens.accounts.login.views :as login.views] [status-im.ui.screens.accounts.recover.views :as recover.views] @@ -26,7 +26,9 @@ :group-chat-profile group-chat-profile :add-participants-toggle-list add-participants-toggle-list - (:new-contact + (:desktop/new-one-to-one + :desktop/new-group-chat + :desktop/new-public-chat :advanced-settings :chat :home @@ -36,4 +38,5 @@ :login login.views/login react/view)] [react/view {:style {:flex 1}} - [component]]))) + [component] + [main.views/popup-view]]))) \ No newline at end of file diff --git a/translations/en.json b/translations/en.json index a8d4c5f94b..80d8729ff8 100644 --- a/translations/en.json +++ b/translations/en.json @@ -92,6 +92,7 @@ "network-id": "Network ID", "connection-problem": "Messages connection problem", "contact-code": "Contact code", + "enter-ens-or-contact-code": "Enter ENS username or contact code", "transactions-delete-content": "Transaction will be removed from 'Unsigned' list", "home": "Home", "transactions-unsigned-empty": "You don't have any unsigned transactions",