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) 

Former-commit-id: c6d2923d05
This commit is contained in:
Alexander Pantyuhov 2016-10-10 14:42:21 +03:00
parent 48030d6ac3
commit 0e3a39d7fb
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])) [status-im.utils.utils :as u]))
(def component-styles (def component-styles
{:status-bar {:default {:height 0 {:status-bar {:default {:height 0
:bar-style "default" :bar-style "default"
:color styles/color-gray} :color styles/color-gray}
:main {:height 0 :main {:height 0
:bar-style "default" :bar-style "default"
:color styles/color-gray} :color styles/color-gray}
:transparent {:height 20 :transparent {:height 20
:bar-style "default" :bar-style "default"
:translucent? true :translucent? true
:color styles/color-transparent}} :color styles/color-transparent}}
:bottom-gradient {:height 3} :bottom-gradient {:height 3}
:input-label {:left 4} :input-label {:left 4}
:input-error-text {:margin-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 (def fonts
{:default {:font-family "sans-serif"} {:default {:font-family "sans-serif"}
:medium {:font-family "sans-serif-medium"}}) :medium {:font-family "sans-serif-medium"}
:toolbar-title {:font-family "sans-serif"}})
;; Dialogs ;; Dialogs

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

@ -29,7 +29,7 @@
(def action (def action
{:width 56 {:width 56
:height 56 :height 56
:margin-top -2 :top 0
:alignItems :center :alignItems :center
:justifyContent :center}) :justifyContent :center})
@ -45,12 +45,14 @@
(defn chat-name-view [show-actions] (defn chat-name-view [show-actions]
{:flex 1 {:flex 1
:margin-bottom 2
:margin-left (if show-actions 16 0) :margin-left (if show-actions 16 0)
:align-items :flex-start :align-items :flex-start
:justify-content :center}) :justify-content :center})
(def chat-name-text (def chat-name-text
{:color text1-color {:color text1-color
:margin-top 2
:fontSize 16}) :fontSize 16})
(def group-icon (def group-icon
@ -69,13 +71,7 @@
:color text2-color}) :color text2-color})
(def last-activity (def last-activity
{:margin-top 3 {:height 18})
:height 18})
(def last-activity-text
{:color text2-color
:background-color :transparent
:font-size 12})
(defn actions-wrapper [status-bar-height] (defn actions-wrapper [status-bar-height]
{:backgroundColor toolbar-background1 {: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.chat.styles.screen :as st]
[status-im.components.refreshable-text.view :refer [refreshable-text]] [status-im.components.refreshable-text.view :refer [refreshable-text]]
[status-im.utils.datetime :as time] [status-im.utils.datetime :as time]
[status-im.utils.platform :refer [platform-specific]]
[status-im.constants :refer [console-chat-id]])) [status-im.constants :refer [console-chat-id]]))
(defn online-text [contact chat-id] (defn online-text [contact chat-id]
@ -25,7 +26,7 @@
(defn last-activity [{:keys [online-text sync-state]}] (defn last-activity [{:keys [online-text sync-state]}]
[refreshable-text {:style st/last-activity [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 :font :default
:value (case sync-state :value (case sync-state
:in-progress (label :t/sync-in-progress) :in-progress (label :t/sync-in-progress)
@ -54,7 +55,8 @@
(fn [] (fn []
[view (st/chat-name-view @show-actions) [view (st/chat-name-view @show-actions)
[text {:style st/chat-name-text [text {:style st/chat-name-text
:number-of-lines 1} :number-of-lines 1
:font :toolbar-title}
(if (str/blank? @name) (if (str/blank? @name)
(label :t/user-anonymous) (label :t/user-anonymous)
(or @name (label :t/chat-name)))] (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)}]) :style (:chat-icon styles)}])
(defn dapp-badge [styles] (defn dapp-badge [styles]
[view (:online-view styles) [view st/online-view-wrapper
[view [view (:online-view styles)
[view (:online-dot-left styles)] [view
[view (:online-dot-right styles)]]]) [view (:online-dot-left styles)]
[view (:online-dot-right styles)]]]])
(defn contact-badge [type styles] (defn contact-badge [type styles]
(when (= type :edit) (when (= type :edit)
@ -63,8 +64,8 @@
:online-view st/online-view :online-view st/online-view
:online-dot-left st/online-dot-left :online-dot-left st/online-dot-left
:online-dot-right st/online-dot-right :online-dot-right st/online-dot-right
:chat-icon st/chat-icon :chat-icon st/chat-icon-view-action
:default-chat-icon (st/default-chat-icon color) :default-chat-icon (st/default-chat-icon-view-action color)
:default-chat-icon-text st/default-chat-icon-text}]) :default-chat-icon-text st/default-chat-icon-text}])
(defn chat-icon-view-menu-item [chat-id group-chat name color online] (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] (defn default-chat-icon-chat-list [color]
(merge (default-chat-icon color) (merge (default-chat-icon color)
{:width 40 {:width 40
:height 40})) :height 40
:border-radius 20}))
(defn default-chat-icon-menu-item [color] (defn default-chat-icon-menu-item [color]
(merge (default-chat-icon color) (merge (default-chat-icon color)
{:width 24 {:width 24
:height 24})) :height 24
:border-radius 12}))
(defn default-chat-icon-profile [color] (defn default-chat-icon-profile [color]
(merge (default-chat-icon color) (merge (default-chat-icon color)
{:width 64 {:width 64
:height 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 (def default-chat-icon-text
{:marginTop -2 {:marginTop -2
@ -55,16 +64,29 @@
:height 64 :height 64
:border-radius 32})) :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 (def online-view
{:position :absolute {:position :absolute
:bottom 0 :bottom 2
:right 0 :right 2
:width 20 :width 18
:height 20 :height 18
:border-radius 10 :border-radius 9
:background-color online-color :background-color online-color})
:border-width 2
:border-color color-white})
(def online-view-menu-item (def online-view-menu-item
(merge online-view (merge online-view
@ -80,13 +102,13 @@
(def online-dot (def online-dot
{:position :absolute {:position :absolute
:top 6 :top 7
:width 4 :width 4
:height 4 :height 4
:border-radius 2 :border-radius 2
:background-color color-white}) :background-color color-white})
(def online-dot-left (merge online-dot {:left 3})) (def online-dot-left (merge online-dot {:left 4}))
(def online-dot-right (merge online-dot {:left 9})) (def online-dot-right (merge online-dot {:left 10}))
(def photo-pencil (def photo-pencil
{:margin-left 5 {:margin-left 5

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

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

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

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

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

@ -4,29 +4,39 @@
[status-im.components.toolbar.styles :refer [toolbar-background2]])) [status-im.components.toolbar.styles :refer [toolbar-background2]]))
(def component-styles (def component-styles
{:status-bar {:default {:height 20 {:status-bar {:default {:height 20
:bar-style "default" :bar-style "default"
:color styles/color-white} :color styles/color-white}
:main {:height 20 :main {:height 20
:bar-style "default" :bar-style "default"
:color toolbar-background2} :color toolbar-background2}
:transparent {:height 20 :transparent {:height 20
:bar-style "light-content" :bar-style "light-content"
:color styles/color-transparent}} :color styles/color-transparent}}
:toolbar {:border-bottom-color styles/color-gray3 :toolbar {:border-bottom-color styles/color-gray3
:border-bottom-width 0.5} :border-bottom-width 0.5}
:actions-list-view {:border-bottom-color styles/color-gray3 :actions-list-view {:border-bottom-color styles/color-gray3
:border-bottom-width 0.5} :border-bottom-width 0.5}
:chat {:new-message {:border-top-color styles/color-gray3 :chat {:new-message {:border-top-color styles/color-gray3
:border-top-width 0.5}} :border-top-width 0.5}}
:bottom-gradient {:height 1} :bottom-gradient {:height 1}
:input-label {:left 0} :input-label {:left 0}
:input-error-text {:margin-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 (def fonts
{:default {:font-family "SFUIText-Regular"} {:default {:font-family "SFUIText-Regular"}
:medium {:font-family "SFUIText-Medium"} :medium {:font-family "SFUIText-Medium"}
:bold {:font-family "SFUIText-Bold"}}) :bold {:font-family "SFUIText-Bold"}
:toolbar-title {:font-family "SFUIText-Medium"}})
;; Dialogs ;; Dialogs