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

[FIX #3921] Align avatar, name and status in top toolbar to the left (1x1, group and public) 

Signed-off-by: Julien Eluard <julien.eluard@gmail.com>
This commit is contained in:
Daniel Regeci 2018-05-10 20:54:39 +07:00 committed by Julien Eluard
parent a0a79595ce
commit a57b0e6136
No known key found for this signature in database
GPG Key ID: 6FD7DB5437FCBEF6
4 changed files with 34 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/status_im/chat/styles/screen.cljs
View File

@ -11,8 +11,10 @@
:background-color component.styles/chat-background}) :background-color component.styles/chat-background})
(def toolbar-container (def toolbar-container
{:flex 1 {:flex 1
:flex-direction :row}) :flex-direction :row
:align-items :stretch
:margin-left 3})
(def messages-container (def messages-container
{:flex 1 {:flex 1
@ -46,9 +48,10 @@
{:flex-direction :row {:flex-direction :row
:flex 1}) :flex 1})
(defnstyle chat-name-view [has-subtitle?] (def chat-name-view
{:flex 1 {:flex 1
:margin-top (if has-subtitle? 0 6)}) :justify-content :center
:margin-bottom 2})
(def chat-name-text (def chat-name-text
{:color component.styles/color-gray6 {:color component.styles/color-gray6
@ -64,7 +67,7 @@
{:width 14 {:width 14
:height 8}) :height 8})
(defstyle members (defstyle toolbar-subtitle
{:color component.styles/text4-color {:color component.styles/text4-color
:ios {:font-size 14 :ios {:font-size 14
:margin-top 4} :margin-top 4}

15
src/status_im/chat/views/toolbar_content.cljs
View File

@ -11,6 +11,7 @@
[status-im.utils.platform :refer [platform-specific]] [status-im.utils.platform :refer [platform-specific]]
[status-im.utils.gfycat.core :refer [generate-gfy]] [status-im.utils.gfycat.core :refer [generate-gfy]]
[status-im.constants :refer [console-chat-id]] [status-im.constants :refer [console-chat-id]]
[status-im.ui.components.chat-icon.screen :as chat-icon.screen]
[status-im.ui.components.common.common :as components.common] [status-im.ui.components.common.common :as components.common]
[status-im.ui.components.styles :as common.styles])) [status-im.ui.components.styles :as common.styles]))
@ -51,16 +52,17 @@
[last-activity {:sync-state sync-state}] [last-activity {:sync-state sync-state}]
(if public? (if public?
[react/view {:flex-direction :row} [react/view {:flex-direction :row}
[react/text (i18n/label :t/public-group-status)]] [react/text {:style st/toolbar-subtitle}
(i18n/label :t/public-group-status)]]
[react/view {:flex-direction :row} [react/view {:flex-direction :row}
[react/text {:style st/members} [react/text {:style st/toolbar-subtitle}
(if public? (if public?
(i18n/label :t/public-group-status) (i18n/label :t/public-group-status)
(let [cnt (inc (count contacts))] (let [cnt (inc (count contacts))]
(i18n/label-pluralize cnt :t/members-active)))]]))) (i18n/label-pluralize cnt :t/members-active)))]])))
(defview toolbar-content-view [] (defview toolbar-content-view []
(letsubs [{:keys [group-chat name contacts (letsubs [{:keys [group-chat name color online contacts
public? chat-id]} [:get-current-chat] public? chat-id]} [:get-current-chat]
show-actions? [:get-current-chat-ui-prop :show-actions?] show-actions? [:get-current-chat-ui-prop :show-actions?]
accounts [:get-accounts] accounts [:get-accounts]
@ -68,10 +70,9 @@
sync-state [:sync-state]] sync-state [:sync-state]]
(let [has-subtitle? (or group-chat (not= :done sync-state))] (let [has-subtitle? (or group-chat (not= :done sync-state))]
[react/view {:style st/toolbar-container} [react/view {:style st/toolbar-container}
(when-not group-chat [react/view {:margin-right 8}
[react/view {:margin-right 5} [chat-icon.screen/chat-icon-view-toolbar chat-id group-chat name color online]]
[photos/member-photo chat-id]]) [react/view {:style st/chat-name-view}
[react/view (st/chat-name-view has-subtitle?)
(let [chat-name (if (string/blank? name) (let [chat-name (if (string/blank? name)
(generate-gfy chat-id) (generate-gfy chat-id)
(or (i18n/get-contact-translated chat-id :name name) (or (i18n/get-contact-translated chat-id :name name)

15
src/status_im/ui/components/chat_icon/screen.cljs
View File

@ -49,6 +49,21 @@
[dapp-badge styles]) [dapp-badge styles])
[pending-contact-badge chat-id styles]])) [pending-contact-badge chat-id styles]]))
(defn chat-icon-view-toolbar [chat-id group-chat name color online]
[chat-icon-view chat-id group-chat name online
{:container styles/container-chat-list
:online-view-wrapper styles/online-view-wrapper
:online-view styles/online-view
:online-dot-left styles/online-dot-left
:online-dot-right styles/online-dot-right
:pending-wrapper styles/pending-wrapper
:pending-outer-circle styles/pending-outer-circle
:pending-inner-circle styles/pending-inner-circle
:size 40
:chat-icon styles/chat-icon-chat-list
:default-chat-icon (styles/default-chat-icon-chat-list color)
:default-chat-icon-text styles/default-chat-icon-text}])
(defn chat-icon-view-chat-list [chat-id group-chat name color online & [hide-dapp?]] (defn chat-icon-view-chat-list [chat-id group-chat name color online & [hide-dapp?]]
[chat-icon-view chat-id group-chat name online [chat-icon-view chat-id group-chat name online
{:container styles/container-chat-list {:container styles/container-chat-list

4
src/status_im/ui/components/toolbar/styles.cljs
View File

@ -61,7 +61,7 @@
(def nav-item-button (def nav-item-button
{:padding-vertical 16 {:padding-vertical 16
:padding-horizontal 12}) :padding-horizontal 13})
(defstyle item (defstyle item
{:ios {:padding-horizontal 12 {:ios {:padding-horizontal 12
@ -90,4 +90,4 @@
(def counter-container (def counter-container
{:position :absolute {:position :absolute
:top 19 :top 19
:right 2}) :right 0})