From 0e3a39d7fbbfd68f2dda9dde238ddc27b4709632 Mon Sep 17 00:00:00 2001 From: Alexander Pantyuhov Date: Mon, 10 Oct 2016 14:42:21 +0300 Subject: [PATCH] Chat header text & arrow alignment (#301) Former-commit-id: c6d2923d05030c74765d686b2c9201140dccdca5 --- src/status_im/android/platform.cljs | 40 ++++++++----- src/status_im/chat/styles/screen.cljs | 12 ++-- src/status_im/chat/views/toolbar_content.cljs | 6 +- .../components/chat_icon/screen.cljs | 13 +++-- .../components/chat_icon/styles.cljs | 56 +++++++++++++------ src/status_im/components/toolbar/styles.cljs | 3 +- src/status_im/components/toolbar/view.cljs | 10 ++-- src/status_im/ios/platform.cljs | 52 ++++++++++------- 8 files changed, 118 insertions(+), 74 deletions(-) diff --git a/src/status_im/android/platform.cljs b/src/status_im/android/platform.cljs index 08dcdaa03c..810332b002 100644 --- a/src/status_im/android/platform.cljs +++ b/src/status_im/android/platform.cljs @@ -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 diff --git a/src/status_im/chat/styles/screen.cljs b/src/status_im/chat/styles/screen.cljs index a82ed76d30..6d604b21d4 100644 --- a/src/status_im/chat/styles/screen.cljs +++ b/src/status_im/chat/styles/screen.cljs @@ -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 diff --git a/src/status_im/chat/views/toolbar_content.cljs b/src/status_im/chat/views/toolbar_content.cljs index 4d5209c1a0..cac831a0e8 100644 --- a/src/status_im/chat/views/toolbar_content.cljs +++ b/src/status_im/chat/views/toolbar_content.cljs @@ -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)))] diff --git a/src/status_im/components/chat_icon/screen.cljs b/src/status_im/components/chat_icon/screen.cljs index 069e9b641c..450bc29ca0 100644 --- a/src/status_im/components/chat_icon/screen.cljs +++ b/src/status_im/components/chat_icon/screen.cljs @@ -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] diff --git a/src/status_im/components/chat_icon/styles.cljs b/src/status_im/components/chat_icon/styles.cljs index 9b51a4a582..1a87a9ab88 100644 --- a/src/status_im/components/chat_icon/styles.cljs +++ b/src/status_im/components/chat_icon/styles.cljs @@ -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 diff --git a/src/status_im/components/toolbar/styles.cljs b/src/status_im/components/toolbar/styles.cljs index 904055785e..eb1ce94b89 100644 --- a/src/status_im/components/toolbar/styles.cljs +++ b/src/status_im/components/toolbar/styles.cljs @@ -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 diff --git a/src/status_im/components/toolbar/view.cljs b/src/status_im/components/toolbar/view.cljs index 3d57200ddb..200726d866 100644 --- a/src/status_im/components/toolbar/view.cljs +++ b/src/status_im/components/toolbar/view.cljs @@ -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 diff --git a/src/status_im/ios/platform.cljs b/src/status_im/ios/platform.cljs index 69385cf29e..696e96b33a 100644 --- a/src/status_im/ios/platform.cljs +++ b/src/status_im/ios/platform.cljs @@ -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