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

start-new-chat screen UI changes

This commit is contained in:
Gustavo Nunes 2017-02-20 21:31:32 -03:00 committed by Roman Volosovskyi
parent 9f2af87393
commit 8c126e0779
8 changed files with 222 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/status_im/android/core.cljs
View File

@ -24,6 +24,7 @@
[status-im.accounts.screen :refer [accounts]]
[status-im.transactions.screen :refer [confirm]]
[status-im.chats-list.screen :refer [chats-list]]
[status-im.new-chat.screen :refer [new-chat]]
[status-im.new-group.screen-public :refer [new-public-group]]
[status-im.new-group.screen-private :refer [new-group
edit-group]]
@ -113,6 +114,7 @@
:add-participants new-participants
:remove-participants remove-participants
:chat-list main-tabs
:new-chat new-chat
:new-group new-group
:edit-group edit-group
:chat-group-settings chat-group-settings

11
src/status_im/android/platform.cljs
View File

@ -56,6 +56,17 @@
:item {:status-text {:color styles/color-black
:line-height 22
:font-size 14}}}
:new-chat {:option-inner-container {:height 56}
:option-icon-container {:background-color styles/color-white
:margin-top 8}
:option-name-text {:font-size 16
:color styles/text1-color}
:contact-list-title-container {:background-color styles/color-light-gray
:padding-top 28
:padding-bottom 20
:margin-top 0}
:contact-list-title {:color styles/text4-color
:font-size 14}}
:contacts {:subtitle {:color styles/color-gray4
:font-size 14}
:subtitle-count {:color styles/color-gray4

4
src/status_im/chats_list/screen.cljs
View File

@ -41,7 +41,7 @@
(defn ios-toolbar-actions []
[(act/opts ios-toolbar-popup-options)
(act/add #(dispatch [:navigate-to :group-contacts :people]))])
(act/add #(dispatch [:navigate-to :new-chat]))])
(defn toolbar-view []
[toolbar {:title (label :t/chats)
@ -67,7 +67,7 @@
:offset-y 22
:hide-shadow true
:spacing 13
:on-press #(dispatch [:navigate-to :group-contacts :people])}])
:on-press #(dispatch [:navigate-to :new-chat])}])
(defn chat-list-padding []
[view {:height (if ios? 0 8)

2
src/status_im/ios/core.cljs
View File

@ -22,6 +22,7 @@
[status-im.accounts.screen :refer [accounts]]
[status-im.transactions.screen :refer [confirm]]
[status-im.chats-list.screen :refer [chats-list]]
[status-im.new-chat.screen :refer [new-chat]]
[status-im.new-group.screen-private :refer [new-group
edit-group]]
[status-im.new-group.views.chat-group-settings :refer [chat-group-settings]]
@ -94,6 +95,7 @@
:add-participants new-participants
:remove-participants remove-participants
:chat-list main-tabs
:new-chat new-chat
:new-group new-group
:edit-group edit-group
:chat-group-settings chat-group-settings

11
src/status_im/ios/platform.cljs
View File

@ -61,6 +61,17 @@
:icon {:padding-top 0
:bottom -4
:justify-content :flex-end}}}
:new-chat {:option-inner-container {:height 64}
:option-icon-container {:background-color styles/color-blue-transparent
:margin-top 12}
:option-name-text {:font-size 17
:color styles/color-light-blue}
:contact-list-title-container {:background-color styles/color-white
:padding-top 19
:padding-bottom 15
:margin-top 16}
:contact-list-title {:color styles/text1-color
:font-size 16}}
:contacts {:subtitle {:color styles/text1-color
:font-size 16
:letter-spacing -0.2}

108
src/status_im/new_chat/screen.cljs Normal file
View File

@ -0,0 +1,108 @@
(ns status-im.new-chat.screen
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]]
[status-im.components.react :refer [view text
linear-gradient
image
touchable-highlight
list-view
list-item]]
[status-im.contacts.views.contact :refer [contact-view]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar-new.view :refer [toolbar-with-search]]
[status-im.components.drawer.view :refer [drawer-view]]
[status-im.new-chat.styles :as st]
[status-im.utils.listview :as lw]
[status-im.i18n :refer [label]]
[status-im.utils.platform :refer [ios?]]))
(defn list-bottom-shadow []
[linear-gradient {:style {:height 4}
:colors st/list-bottom-shadow}])
(defn list-top-shadow []
[linear-gradient {:style {:height 3}
:colors st/list-top-shadow}])
(defn list-separator []
(when ios?
[view st/list-separator-wrapper
[view st/list-separator]]))
(defn options-list-item [{:keys [on-press icon-uri label-key]}]
[touchable-highlight {:on-press on-press}
[view st/option-container
[view st/option-inner-container
[view st/option-icon-container
[image {:source {:uri icon-uri}
:style st/option-icon}]]
[view st/option-info-container
[text {:style st/option-name-text}
(label label-key)]]]]])
(defn options-list []
[view
[view (st/options-list)
[options-list-item {:on-press #(dispatch [:open-contact-toggle-list :chat-group])
:icon-uri :icon_private_group_big
:label-key :t/new-group-chat}]
[list-separator]
[options-list-item {:on-press #(dispatch [:navigate-to :new-public-group])
:icon-uri :icon_public_group_big
:label-key :t/new-public-group-chat}]
[list-separator]
[options-list-item {:on-press #(dispatch [:navigate-to :new-contact])
:icon-uri :icon_add_blue
:label-key :t/add-new-contact}]]
(when-not ios? [list-bottom-shadow])])
(defn contact-list-row []
(fn [row _ _]
(list-item ^{:key row} [contact-view {:contact row}])))
(defn contact-list-title [contact-count]
[view
[view st/contact-list-title-container
[text {:style st/contact-list-title
:font :medium}
(label :t/choose-from-contacts)
(when ios? [text {:style st/contact-list-title-count
:font :medium}
" " contact-count])]]
(when-not ios? [list-top-shadow])])
(defn contact-list-separator [_ row-id _]
(when ios? (list-item ^{:key row-id} [list-separator])))
(defview new-chat-toolbar []
[show-search [:get-in [:toolbar-search :show]]]
[view
[status-bar]
(toolbar-with-search
{:show-search? (= show-search :contact-list)
:search-key :contact-list
:title (label :t/contacts-group-new-chat)
:search-placeholder (label :t/search-for)})])
(defview new-chat []
[contacts [:all-added-group-contacts-filtered]
params [:get :contacts-click-params]]
[drawer-view
[view st/contacts-list-container
[new-chat-toolbar]
(when contacts
[list-view {:dataSource (lw/to-datasource contacts)
:enableEmptySections true
:renderRow (contact-list-row)
:bounces false
:keyboardShouldPersistTaps true
:renderHeader #(list-item
[view
[options-list]
[contact-list-title (count contacts)]
(when-not ios? [view st/spacing-top])])
:renderSeparator contact-list-separator
:renderFooter #(list-item (when-not ios? [view
[view st/spacing-bottom]
[list-bottom-shadow]]))
:style st/contacts-list}])]])

85
src/status_im/new_chat/styles.cljs Normal file
View File

@ -0,0 +1,85 @@
(ns status-im.new-chat.styles
(:require [status-im.components.styles :as st]
[status-im.utils.platform :as p]))
(def list-bottom-shadow
["rgba(24, 52, 76, 0.165)"
"rgba(24, 52, 76, 0.03)"
"rgba(24, 52, 76, 0.01)"])
(def list-top-shadow
["rgba(24, 52, 76, 0.01)"
"rgba(24, 52, 76, 0.03)"])
(def list-separator
{:border-bottom-width 1
:border-bottom-color st/color-gray5
:margin-left 72
:opacity 0.5})
(def list-separator-wrapper
{:background-color st/color-white
:height 1})
(defn options-list []
{:padding-top (if p/ios? 0 8)
:padding-bottom (if p/ios? 0 8)
:background-color st/color-white})
(def option-container
{:flex-direction :row
:background-color st/color-white})
(def option-inner-container
(merge {:flex 1
:flex-direction :row
:background-color st/color-white}
(get-in p/platform-specific [:component-styles :new-chat :option-inner-container])))
(def option-icon-container
(merge {:width 40
:height 40
:border-radius 50
:margin-left 16}
(get-in p/platform-specific [:component-styles :new-chat :option-icon-container])))
(def option-icon
{:width 24
:height 24
:top 8
:left 8})
(def option-info-container
{:flex 1
:flexDirection :column
:margin-left 16
:justifyContent :center})
(def option-name-text
(get-in p/platform-specific [:component-styles :new-chat :option-name-text]))
(def contact-list-title-container
(merge {:padding-left 16}
(get-in p/platform-specific [:component-styles :new-chat :contact-list-title-container])))
(def contact-list-title
(get-in p/platform-specific [:component-styles :new-chat :contact-list-title]))
(def contact-list-title-count
{:color st/text4-color
:opacity 0.5})
(def contacts-list-container
{:flex 1
:margin-bottom 0})
(def contacts-list
{:backgroundColor st/color-light-gray})
(def spacing-top
{:background-color st/color-white
:height 8})
(def spacing-bottom
{:background-color st/color-white
:height 8})

1
src/status_im/translations/en.cljs
View File

@ -154,6 +154,7 @@
:contacts-group-dapps "ÐApps"
:contacts-group-people "People"
:contacts-group-new-chat "Start new chat"
:choose-from-contacts "Choose from contacts"
:no-contacts "No contacts yet"
:show-qr "Show QR"
:enter-address "Enter address"