status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

desktop popup 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2018-11-26 10:48:27 +01:00
parent 73cbfd4cd9
commit 22167db7a2
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
11 changed files with 191 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/icons/newchat.svg
View File

@ -1,5 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path fill="" fill-rule="nonzero" d="M16.0909091,19.7272727 L16.0909091,18.0909091 C16.0909091,15.731147 14.1779439,13.8181818 11.8181818,13.8181818 L5.27272727,13.8181818 C2.91296516,13.8181818 1,15.731147 1,18.0909091 L1,19.7272727 C1,20.2795575 1.44771525,20.7272727 2,20.7272727 C2.55228475,20.7272727 3,20.2795575 3,19.7272727 L3,18.0909091 C3,16.8357165 4.01753466,15.8181818 5.27272727,15.8181818 L11.8181818,15.8181818 C13.0733744,15.8181818 14.0909091,16.8357165 14.0909091,18.0909091 L14.0909091,19.7272727 C14.0909091,20.2795575 14.5386243,20.7272727 15.0909091,20.7272727 C15.6431938,20.7272727 16.0909091,20.2795575 16.0909091,19.7272727 Z M8.54545455,10.5454545 C9.80064716,10.5454545 10.8181818,9.52791989 10.8181818,8.27272727 C10.8181818,7.01753466 9.80064716,6 8.54545455,6 C7.29026193,6 6.27272727,7.01753466 6.27272727,8.27272727 C6.27272727,9.52791989 7.29026193,10.5454545 8.54545455,10.5454545 Z M18,11 L18,9.00292933 C18,8.44902676 18.6474695,8 18.9255371,8 C19.2016795,8 19.9146729,8.43788135 19.9146729,9.00292933 L19.9146729,11 L21.6942142,11 C22.2481168,11 22.6971436,11.4438648 22.6971436,12 C22.6971436,12.5522847 22.2592622,13 21.6942142,13 L19.9146729,13 L19.9146729,15 C19.9146729,15.5539026 19.2036047,16.0029293 18.9255371,16.0029293 C18.6493947,16.0029293 18,15.565048 18,15 L18,13 L16.0029293,13 C15.4490268,13 15,12.5561352 15,12 C15,11.4477153 15.4378814,11 16.0029293,11 L18,11 Z M8.54545455,12.5454545 C6.18569243,12.5454545 4.27272727,10.6324894 4.27272727,8.27272727 C4.27272727,5.91296516 6.18569243,4 8.54545455,4 C10.9052167,4 12.8181818,5.91296516 12.8181818,8.27272727 C12.8181818,10.6324894 10.9052167,12.5454545 8.54545455,12.5454545 Z"/>
</g>
<path fill="" fill-rule="nonzero" d="M16.0909091,19.7272727 L16.0909091,18.0909091 C16.0909091,15.731147 14.1779439,13.8181818 11.8181818,13.8181818 L5.27272727,13.8181818 C2.91296516,13.8181818 1,15.731147 1,18.0909091 L1,19.7272727 C1,20.2795575 1.44771525,20.7272727 2,20.7272727 C2.55228475,20.7272727 3,20.2795575 3,19.7272727 L3,18.0909091 C3,16.8357165 4.01753466,15.8181818 5.27272727,15.8181818 L11.8181818,15.8181818 C13.0733744,15.8181818 14.0909091,16.8357165 14.0909091,18.0909091 L14.0909091,19.7272727 C14.0909091,20.2795575 14.5386243,20.7272727 15.0909091,20.7272727 C15.6431938,20.7272727 16.0909091,20.2795575 16.0909091,19.7272727 Z M8.54545455,10.5454545 C9.80064716,10.5454545 10.8181818,9.52791989 10.8181818,8.27272727 C10.8181818,7.01753466 9.80064716,6 8.54545455,6 C7.29026193,6 6.27272727,7.01753466 6.27272727,8.27272727 C6.27272727,9.52791989 7.29026193,10.5454545 8.54545455,10.5454545 Z M18,11 L18,9.00292933 C18,8.44902676 18.6474695,8 18.9255371,8 C19.2016795,8 19.9146729,8.43788135 19.9146729,9.00292933 L19.9146729,11 L21.6942142,11 C22.2481168,11 22.6971436,11.4438648 22.6971436,12 C22.6971436,12.5522847 22.2592622,13 21.6942142,13 L19.9146729,13 L19.9146729,15 C19.9146729,15.5539026 19.2036047,16.0029293 18.9255371,16.0029293 C18.6493947,16.0029293 18,15.565048 18,15 L18,13 L16.0029293,13 C15.4490268,13 15,12.5561352 15,12 C15,11.4477153 15.4378814,11 16.0029293,11 L18,11 Z M8.54545455,12.5454545 C6.18569243,12.5454545 4.27272727,10.6324894 4.27272727,8.27272727 C4.27272727,5.91296516 6.18569243,4 8.54545455,4 C10.9052167,4 12.8181818,5.91296516 12.8181818,8.27272727 C12.8181818,10.6324894 10.9052167,12.5454545 8.54545455,12.5454545 Z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

4
src/status_im/ui/components/action_button/action_button.cljs
View File

@ -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)}

1
src/status_im/ui/components/action_button/styles.cljs
View File

@ -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]

14
src/status_im/ui/screens/desktop/main/add_new/styles.cljs
View File

@ -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}

196
src/status_im/ui/screens/desktop/main/add_new/views.cljs
View File

@ -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]

8
src/status_im/ui/screens/desktop/main/styles.cljs
View File

@ -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})

16
src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs
View File

@ -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})

43
src/status_im/ui/screens/desktop/main/tabs/home/views.cljs
View File

@ -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

17
src/status_im/ui/screens/desktop/main/views.cljs
View File

@ -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

11
src/status_im/ui/screens/desktop/views.cljs
View File

@ -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]])))

1
translations/en.json
View File

@ -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",