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

Chat header text & arrow alignment (#301)

This commit is contained in:
Alexander Pantyuhov 2016-10-10 14:42:21 +03:00
parent a9a1c7244f
commit c6d2923d05
8 changed files with 118 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,23 +3,33 @@
[status-im.utils.utils :as u]))
(def component-styles
{:status-bar {:default {:height 0
:bar-style "default"
:color styles/color-gray}
:main {:height 0
:bar-style "default"
:color styles/color-gray}
:transparent {:height 20
:bar-style "default"
:translucent? true
:color styles/color-transparent}}
:bottom-gradient {:height 3}
:input-label {:left 4}
:input-error-text {:margin-left 4}})
{:status-bar {:default {:height 0
:bar-style "default"
:color styles/color-gray}
:main {:height 0
:bar-style "default"
:color styles/color-gray}
:transparent {:height 20
:bar-style "default"
:translucent? true
:color styles/color-transparent}}
:bottom-gradient {:height 3}
:input-label {:left 4}
:input-error-text {:margin-left 4}
:toolbar-nav-action {:width 56
:height 56
:align-items :center
:justify-content :center}
:toolbar-last-activity {:color styles/text2-color
:background-color :transparent
:top 0
:font-size 12}})
(def fonts
{:default {:font-family "sans-serif"}
:medium {:font-family "sans-serif-medium"}})
{:default {:font-family "sans-serif"}
:medium {:font-family "sans-serif-medium"}
:toolbar-title {:font-family "sans-serif"}})
;; Dialogs

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

@ -29,7 +29,7 @@
(def action
{:width 56
:height 56
:margin-top -2
:top 0
:alignItems :center
:justifyContent :center})
@ -45,12 +45,14 @@
(defn chat-name-view [show-actions]
{:flex 1
:margin-bottom 2
:margin-left (if show-actions 16 0)
:align-items :flex-start
:justify-content :center})
(def chat-name-text
{:color text1-color
:margin-top 2
:fontSize 16})
(def group-icon
@ -69,13 +71,7 @@
:color text2-color})
(def last-activity
{:margin-top 3
:height 18})
(def last-activity-text
{:color text2-color
:background-color :transparent
:font-size 12})
{:height 18})
(defn actions-wrapper [status-bar-height]
{:backgroundColor toolbar-background1

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

@ -9,6 +9,7 @@
[status-im.chat.styles.screen :as st]
[status-im.components.refreshable-text.view :refer [refreshable-text]]
[status-im.utils.datetime :as time]
[status-im.utils.platform :refer [platform-specific]]
[status-im.constants :refer [console-chat-id]]))
(defn online-text [contact chat-id]
@ -25,7 +26,7 @@
(defn last-activity [{:keys [online-text sync-state]}]
[refreshable-text {:style st/last-activity
:text-style st/last-activity-text
:text-style (get-in platform-specific [:component-styles :toolbar-last-activity])
:font :default
:value (case sync-state
:in-progress (label :t/sync-in-progress)
@ -54,7 +55,8 @@
(fn []
[view (st/chat-name-view @show-actions)
[text {:style st/chat-name-text
:number-of-lines 1}
:number-of-lines 1
:font :toolbar-title}
(if (str/blank? @name)
(label :t/user-anonymous)
(or @name (label :t/chat-name)))]

13
src/status_im/components/chat_icon/screen.cljs
View File

@ -21,10 +21,11 @@
:style (:chat-icon styles)}])
(defn dapp-badge [styles]
[view (:online-view styles)
[view
[view (:online-dot-left styles)]
[view (:online-dot-right styles)]]])
[view st/online-view-wrapper
[view (:online-view styles)
[view
[view (:online-dot-left styles)]
[view (:online-dot-right styles)]]]])
(defn contact-badge [type styles]
(when (= type :edit)
@ -63,8 +64,8 @@
:online-view st/online-view
:online-dot-left st/online-dot-left
:online-dot-right st/online-dot-right
:chat-icon st/chat-icon
:default-chat-icon (st/default-chat-icon color)
:chat-icon st/chat-icon-view-action
:default-chat-icon (st/default-chat-icon-view-action color)
:default-chat-icon-text st/default-chat-icon-text}])
(defn chat-icon-view-menu-item [chat-id group-chat name color online]

56
src/status_im/components/chat_icon/styles.cljs
View File

@ -13,18 +13,27 @@
(defn default-chat-icon-chat-list [color]
(merge (default-chat-icon color)
{:width 40
:height 40}))
{:width 40
:height 40
:border-radius 20}))
(defn default-chat-icon-menu-item [color]
(merge (default-chat-icon color)
{:width 24
:height 24}))
{:width 24
:height 24
:border-radius 12}))
(defn default-chat-icon-profile [color]
(merge (default-chat-icon color)
{:width 64
:height 64}))
{:width 64
:height 64
:border-radius 32}))
(defn default-chat-icon-view-action [color]
(merge (default-chat-icon color)
{:width 36
:height 36
:border-radius 18}))
(def default-chat-icon-text
{:marginTop -2
@ -55,16 +64,29 @@
:height 64
:border-radius 32}))
(def chat-icon-view-action
(merge chat-icon
{:width 36
:height 36
:border-radius 1}))
(def online-view-wrapper
{:position :absolute
:bottom -1
:right 0
:width 22
:height 22
:border-radius 11
:background-color :white})
(def online-view
{:position :absolute
:bottom 0
:right 0
:width 20
:height 20
:border-radius 10
:background-color online-color
:border-width 2
:border-color color-white})
:bottom 2
:right 2
:width 18
:height 18
:border-radius 9
:background-color online-color})
(def online-view-menu-item
(merge online-view
@ -80,13 +102,13 @@
(def online-dot
{:position :absolute
:top 6
:top 7
:width 4
:height 4
:border-radius 2
:background-color color-white})
(def online-dot-left (merge online-dot {:left 3}))
(def online-dot-right (merge online-dot {:left 9}))
(def online-dot-left (merge online-dot {:left 4}))
(def online-dot-right (merge online-dot {:left 10}))
(def photo-pencil
{:margin-left 5

3
src/status_im/components/toolbar/styles.cljs
View File

@ -32,7 +32,8 @@
{:width toolbar-height
:height toolbar-height
:align-items :center
:justify-content :center})
:justify-content :center
:padding-right 12})
(def toolbar-title-container
{:flex 1

10
src/status_im/components/toolbar/view.cljs
View File

@ -8,7 +8,8 @@
touchable-highlight]]
[status-im.components.sync-state.gradient :refer [sync-state-gradient-view]]
[status-im.components.styles :refer [icon-back]]
[status-im.components.toolbar.styles :as st]))
[status-im.components.toolbar.styles :as st]
[status-im.utils.platform :refer [platform-specific]]))
(defn toolbar [{title :title
nav-action :nav-action
@ -25,16 +26,17 @@
(when (not hide-nav?)
(if nav-action
[touchable-highlight {:on-press (:handler nav-action)}
[view st/toolbar-nav-action
[view (get-in platform-specific [:component-styles :toolbar-nav-action])
[image (:image nav-action)]]]
[touchable-highlight {:on-press #(dispatch [:navigate-back])
:accessibility-label :navigate-back}
[view st/toolbar-nav-action
[view (get-in platform-specific [:component-styles :toolbar-nav-action])
[image {:source {:uri :icon_back}
:style icon-back}]]]))]
(or custom-content
[view {:style st/toolbar-title-container}
[text {:style st/toolbar-title-text}
[text {:style st/toolbar-title-text
:font :toolbar-title}
title]])
[view st/toolbar-actions-container
(if actions

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

@ -4,29 +4,39 @@
[status-im.components.toolbar.styles :refer [toolbar-background2]]))
(def component-styles
{:status-bar {:default {:height 20
:bar-style "default"
:color styles/color-white}
:main {:height 20
:bar-style "default"
:color toolbar-background2}
:transparent {:height 20
:bar-style "light-content"
:color styles/color-transparent}}
:toolbar {:border-bottom-color styles/color-gray3
:border-bottom-width 0.5}
:actions-list-view {:border-bottom-color styles/color-gray3
:border-bottom-width 0.5}
:chat {:new-message {:border-top-color styles/color-gray3
:border-top-width 0.5}}
:bottom-gradient {:height 1}
:input-label {:left 0}
:input-error-text {:margin-left 0}})
{:status-bar {:default {:height 20
:bar-style "default"
:color styles/color-white}
:main {:height 20
:bar-style "default"
:color toolbar-background2}
:transparent {:height 20
:bar-style "light-content"
:color styles/color-transparent}}
:toolbar {:border-bottom-color styles/color-gray3
:border-bottom-width 0.5}
:actions-list-view {:border-bottom-color styles/color-gray3
:border-bottom-width 0.5}
:chat {:new-message {:border-top-color styles/color-gray3
:border-top-width 0.5}}
:bottom-gradient {:height 1}
:input-label {:left 0}
:input-error-text {:margin-left 0}
:toolbar-nav-action {:width 46
:height 56
:align-items :center
:justify-content :center}
:toolbar-last-activity {:color styles/text2-color
:background-color :transparent
:top 0
:font-size 14}})
(def fonts
{:default {:font-family "SFUIText-Regular"}
:medium {:font-family "SFUIText-Medium"}
:bold {:font-family "SFUIText-Bold"}})
{:default {:font-family "SFUIText-Regular"}
:medium {:font-family "SFUIText-Medium"}
:bold {:font-family "SFUIText-Bold"}
:toolbar-title {:font-family "SFUIText-Medium"}})
;; Dialogs