status-im
/
status-react
mirror of https://github.com/status-im/status-react.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})
(def toolbar-container
{:flex 1
:flex-direction :row})
{:flex 1
:flex-direction :row
:align-items :stretch
:margin-left 3})
(def messages-container
{:flex 1
@ -46,9 +48,10 @@
{:flex-direction :row
:flex 1})
(defnstyle chat-name-view [has-subtitle?]
{:flex 1
:margin-top (if has-subtitle? 0 6)})
(def chat-name-view
{:flex 1
:justify-content :center
:margin-bottom 2})
(def chat-name-text
{:color component.styles/color-gray6
@ -64,7 +67,7 @@
{:width 14
:height 8})
(defstyle members
(defstyle toolbar-subtitle
{:color component.styles/text4-color
:ios {:font-size 14
: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.gfycat.core :refer [generate-gfy]]
[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.styles :as common.styles]))
@ -51,16 +52,17 @@
[last-activity {:sync-state sync-state}]
(if public?
[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/text {:style st/members}
[react/text {:style st/toolbar-subtitle}
(if public?
(i18n/label :t/public-group-status)
(let [cnt (inc (count contacts))]
(i18n/label-pluralize cnt :t/members-active)))]])))
(defview toolbar-content-view []
(letsubs [{:keys [group-chat name contacts
(letsubs [{:keys [group-chat name color online contacts
public? chat-id]} [:get-current-chat]
show-actions? [:get-current-chat-ui-prop :show-actions?]
accounts [:get-accounts]
@ -68,10 +70,9 @@
sync-state [:sync-state]]
(let [has-subtitle? (or group-chat (not= :done sync-state))]
[react/view {:style st/toolbar-container}
(when-not group-chat
[react/view {:margin-right 5}
[photos/member-photo chat-id]])
[react/view (st/chat-name-view has-subtitle?)
[react/view {:margin-right 8}
[chat-icon.screen/chat-icon-view-toolbar chat-id group-chat name color online]]
[react/view {:style st/chat-name-view}
(let [chat-name (if (string/blank? name)
(generate-gfy chat-id)
(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])
[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?]]
[chat-icon-view chat-id group-chat name online
{:container styles/container-chat-list

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

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