From a85929e72df0d6a09cacd5e682fdb3151e4a0455 Mon Sep 17 00:00:00 2001 From: Julien Eluard Date: Tue, 12 Sep 2017 18:02:33 +0200 Subject: [PATCH] [FIX #1802] Make sure wallet buttons have proper width --- src/status_im/components/button/styles.cljs | 26 ++++++++------- src/status_im/components/button/view.cljs | 32 ++++++++++--------- src/status_im/components/tabs/styles.cljs | 9 ++++-- src/status_im/components/tabs/views.cljs | 18 +++++------ .../components/toolbar_new/styles.cljs | 2 +- .../components/toolbar_new/view.cljs | 8 +++-- .../ui/screens/wallet/main/styles.cljs | 26 +++++++-------- .../ui/screens/wallet/main/views.cljs | 14 ++++---- .../ui/screens/wallet/send/styles.cljs | 17 +++------- 9 files changed, 76 insertions(+), 76 deletions(-) diff --git a/src/status_im/components/button/styles.cljs b/src/status_im/components/button/styles.cljs index 8dc15bf855..b680130257 100644 --- a/src/status_im/components/button/styles.cljs +++ b/src/status_im/components/button/styles.cljs @@ -1,12 +1,11 @@ (ns status-im.components.button.styles (:require-macros [status-im.utils.styles :refer [defstyle]]) - (:require [status-im.components.styles :as st])) + (:require [status-im.components.styles :as styles])) -(def border-color st/color-white-transparent-2) +(def border-color styles/color-white-transparent-2) (defstyle button-borders {:background-color border-color - :margin-horizontal 5 :android {:border-radius 4} :ios {:border-radius 8}}) @@ -15,6 +14,8 @@ button-borders {:flex-direction :row})) +(def button-container styles/flex) + (def action-button {:flex-direction :row :justify-content :center @@ -26,34 +27,35 @@ :border-left-width 1 :border-right-width 1})) -(def action-button-text +(defstyle action-button-text {:font-size 15 :font-weight "normal" - :color st/color-white + :color styles/color-white :padding-horizontal 16 - :padding-vertical 9}) + :android {:padding-vertical 10 + :letter-spacing 0.2} + :ios {:padding-vertical 9}}) (def primary-button (merge action-button button-borders - {:background-color st/color-blue4})) + {:background-color styles/color-blue4})) (def primary-button-text (merge action-button-text - {:color st/color-white})) + {:color styles/color-white})) (def secondary-button (merge action-button button-borders - {:background-color st/color-blue4-transparent})) + {:background-color styles/color-blue4-transparent})) (def secondary-button-text (merge action-button-text - {:color st/color-blue4})) + {:color styles/color-blue4})) -(def action-button-text-disabled - (merge action-button-text {:opacity 0.4})) \ No newline at end of file +(def action-button-text-disabled {:opacity 0.4}) \ No newline at end of file diff --git a/src/status_im/components/button/view.cljs b/src/status_im/components/button/view.cljs index 1930dded0e..32e35a5649 100644 --- a/src/status_im/components/button/view.cljs +++ b/src/status_im/components/button/view.cljs @@ -1,34 +1,36 @@ (ns status-im.components.button.view - (:require [cljs.spec.alpha :as s] - [status-im.components.button.styles :as cst] + (:require [status-im.components.button.styles :as button.styles] [status-im.components.react :as rn] [status-im.utils.platform :as p])) -(defn button [{:keys [on-press style text text-style disabled?] - :or {style cst/action-button}}] - [rn/touchable-highlight (when (and on-press (not disabled?)) {:on-press on-press}) - [rn/view {:style style} - [rn/text {:style (or text-style - (if disabled? cst/action-button-text-disabled cst/action-button-text)) +(defn- button [{:keys [on-press style text text-style disabled?]}] + [rn/touchable-highlight (merge {:style button.styles/button-container} (when (and on-press (not disabled?)) {:on-press on-press})) + [rn/view {:style (merge style button.styles/action-button)} + [rn/text {:style (merge button.styles/action-button-text + text-style + (if disabled? button.styles/action-button-text-disabled)) :font :medium :uppercase? p/android?} text]]]) (defn primary-button [m] - (button (merge {:style cst/primary-button :text-style cst/primary-button-text} m))) + (button (merge {:style button.styles/primary-button :text-style button.styles/primary-button-text} m))) (defn secondary-button [m] - (button (merge {:style cst/secondary-button :text-style cst/secondary-button-text} m))) + (button (merge {:style button.styles/secondary-button :text-style button.styles/secondary-button-text} m))) (defn- first-or-last [i v] (or (zero? i) (= i (dec (count v))))) -(defn- button-style [i v] (if (first-or-last i v) cst/action-button cst/action-button-center)) +(defn- button-style [i v] + (if (first-or-last i v) + button.styles/action-button + button.styles/action-button-center)) (defn buttons - ([v] (buttons {} v)) - ([m v] - [rn/view {:style (merge cst/action-buttons-container m)} + ([v] (buttons nil v)) + ([{:keys [style button-text-style]} v] + [rn/view {:style (merge button.styles/action-buttons-container style)} (doall (map-indexed - (fn [i m] ^{:key i} [button (merge m {:style (button-style i v)})]) + (fn [i m] ^{:key i} [button (merge m {:style (button-style i v) :text-style button-text-style})]) v))])) \ No newline at end of file diff --git a/src/status_im/components/tabs/styles.cljs b/src/status_im/components/tabs/styles.cljs index f505d1a151..a3569c6a66 100644 --- a/src/status_im/components/tabs/styles.cljs +++ b/src/status_im/components/tabs/styles.cljs @@ -1,10 +1,10 @@ (ns status-im.components.tabs.styles (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) (:require [status-im.components.styles :as styles] - [status-im.utils.platform :as p])) + [status-im.utils.platform :as platform])) -(def tabs-height (if p/ios? 52 56)) +(def tabs-height (if platform/ios? 52 56)) (def tab-height (dec tabs-height)) (defn tabs-container [hidden?] @@ -41,7 +41,10 @@ :margin-top 3 :min-width 60 :text-align :center - :color (if active? styles/color-blue4 styles/color-black)}) + :color (cond + active? styles/color-blue4 + text-only? styles/color-black + :else styles/color-gray4)}) (defn tab-icon [active?] {:color (if active? styles/color-blue4 styles/color-gray4)}) diff --git a/src/status_im/components/tabs/views.cljs b/src/status_im/components/tabs/views.cljs index 8ae4eb8f9c..2d064dea65 100644 --- a/src/status_im/components/tabs/views.cljs +++ b/src/status_im/components/tabs/views.cljs @@ -6,22 +6,22 @@ [re-frame.core :refer [subscribe dispatch]] [status-im.components.react :as react] [status-im.components.icons.vector-icons :as vi] - [status-im.components.tabs.styles :as styles] - [status-im.utils.platform :as p])) + [status-im.components.tabs.styles :as tabs.styles] + [status-im.utils.platform :as platform])) (defn- tab [{:keys [view-id title icon-active icon-inactive style-active selected-view-id on-press]}] (let [active? (= view-id selected-view-id) text-only? (nil? icon-active)] - [react/touchable-highlight {:style (merge styles/tab (if (and active? style-active) style-active)) + [react/touchable-highlight {:style (merge tabs.styles/tab (if (and active? style-active) style-active)) :disabled active? :on-press #(if on-press (on-press view-id) (dispatch [:navigate-to-tab view-id]))} - [react/view {:style styles/tab-container} + [react/view {:style tabs.styles/tab-container} (when-let [icon (if active? icon-active icon-inactive)] [react/view - [vi/icon icon (styles/tab-icon active?)]]) + [vi/icon icon (tabs.styles/tab-icon active?)]]) [react/view - [react/text (merge (if text-only? {:uppercase? (get-in p/platform-specific [:uppercase?])}) - {:style (styles/tab-title active? text-only?)}) + [react/text (merge (if text-only? {:uppercase? (get-in platform/platform-specific [:uppercase?])}) + {:style (tabs.styles/tab-title active? text-only?)}) title]]]])) (defn- create-tab [index data selected-view-id on-press style-active] @@ -41,7 +41,7 @@ (defn tabs [{:keys [style style-tab-active tab-list selected-view-id on-press]}] [tabs-container style (into - [react/view styles/tabs-inner-container] + [react/view tabs.styles/tabs-inner-container] (map-indexed #(create-tab %1 %2 selected-view-id on-press style-tab-active) tab-list))]) ;; Swipable tabs @@ -107,7 +107,7 @@ :style style-tabs :style-tab-active style-tab-active :on-press on-view-change}] - [react/swiper (merge styles/swiper + [react/swiper (merge tabs.styles/swiper {:index (get-tab-index tab-list @view-id) :ref #(reset! main-swiper %) :loop false diff --git a/src/status_im/components/toolbar_new/styles.cljs b/src/status_im/components/toolbar_new/styles.cljs index 6a483b4a23..2a49e2fd4a 100644 --- a/src/status_im/components/toolbar_new/styles.cljs +++ b/src/status_im/components/toolbar_new/styles.cljs @@ -25,7 +25,7 @@ {:flex-direction :row :margin-left 4}) -(defstyle toolbar-title-container +(defstyle toolbar-container {:flex 1 :android {:padding-left 18} :ios {:align-items :center}}) diff --git a/src/status_im/components/toolbar_new/view.cljs b/src/status_im/components/toolbar_new/view.cljs index d3f00fcc29..890c517184 100644 --- a/src/status_im/components/toolbar_new/view.cljs +++ b/src/status_im/components/toolbar_new/view.cljs @@ -41,10 +41,14 @@ ;; Content +(defn content-wrapper [content] + [rn/view {:style tst/toolbar-container} + content]) + (defn content-title ([title] (content-title nil title)) ([title-style title] - [rn/view {:style tst/toolbar-title-container} + [content-wrapper [rn/text {:style (merge tst/toolbar-title-text title-style) :font :toolbar-title} title]])) @@ -124,7 +128,7 @@ [rn/view (tst/toolbar-nav-actions-container actions) [nav-button (or nav-action act/default-back)]]) (or custom-content - [rn/view {:style tst/toolbar-title-container} + [rn/view {:style tst/toolbar-container} [rn/text {:style (merge tst/toolbar-title-text title-style) :font :toolbar-title} title]]) diff --git a/src/status_im/ui/screens/wallet/main/styles.cljs b/src/status_im/ui/screens/wallet/main/styles.cljs index 5d4d7f7e28..0c6b51b011 100644 --- a/src/status_im/ui/screens/wallet/main/styles.cljs +++ b/src/status_im/ui/screens/wallet/main/styles.cljs @@ -1,4 +1,5 @@ (ns status-im.ui.screens.wallet.main.styles + (:require-macros [status-im.utils.styles :refer [defstyle]]) (:require [status-im.components.styles :as styles] [status-im.utils.platform :as platform])) @@ -23,11 +24,6 @@ :elevation 0}) (def toolbar-title-container - {:flex 1 - :flex-direction :row - :margin-left 6}) - -(def toolbar-title-inner-container {:flex-direction :row}) (def toolbar-title-text @@ -42,19 +38,12 @@ (def toolbar-title-icon (merge toolbar-icon {:opacity 0.4})) -(def toolbar-buttons-container - {:flex-direction :row - :flex-shrink 1 - :justify-content :space-between - :width 68 - :padding 12}) - ;;;;;;;;;;;;;;;;;; ;; Main section ;; ;;;;;;;;;;;;;;;;;; (def main-section - {:padding 16 + {:padding-vertical 24 :background-color styles/color-blue4}) (def total-balance-container @@ -109,8 +98,15 @@ (merge today-variation {:color styles/color-red-4})) -(def buttons - {:margin-top 34}) +(defstyle buttons + {:margin-top 34 + :android {:margin-horizontal 21} + :ios {:margin-horizontal 29}}) + +(defstyle main-button-text + {:padding-vertical 13 + :padding-horizontal nil + :android {:letter-spacing 0.46}}) ;;;;;;;;;;;;;;;;;;;; ;; Assets section ;; diff --git a/src/status_im/ui/screens/wallet/main/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs index d142542ea4..4403c76595 100644 --- a/src/status_im/ui/screens/wallet/main/views.cljs +++ b/src/status_im/ui/screens/wallet/main/views.cljs @@ -21,16 +21,15 @@ (utils/show-popup "TODO" "Not implemented yet!")) (defn toolbar-title [] - [react/touchable-highlight {:on-press #(rf/dispatch [:navigate-to :wallet-list]) - :style wallet.styles/toolbar-title-container} - [react/view {:style wallet.styles/toolbar-title-inner-container} + [react/touchable-highlight {:on-press #(rf/dispatch [:navigate-to :wallet-list])} + [react/view {:style wallet.styles/toolbar-title-container} [react/text {:style wallet.styles/toolbar-title-text - :font :toolbar-title} + :font :toolbar-title} (i18n/label :t/main-wallet)] [vi/icon :icons/dropdown {:container-style wallet.styles/toolbar-title-icon - :color :white}]]]) + :color :white}]]]) (def transaction-history-action {:icon :icons/transaction-history @@ -40,7 +39,8 @@ (defn toolbar-view [] [toolbar/toolbar2 {:style wallet.styles/toolbar} [toolbar/nav-button (act/hamburger-white drawer/open-drawer!)] - [toolbar-title] + [toolbar/content-wrapper + [toolbar-title]] [toolbar/actions [(assoc (act/opts [{:text (i18n/label :t/wallet-settings) :value show-not-implemented!}]) :icon-opts {:color :white}) transaction-history-action]]]) @@ -68,7 +68,7 @@ [react/text {:style wallet.styles/value-variation-title} (i18n/label :t/wallet-total-value)] [change-display change]] - [btn/buttons wallet.styles/buttons + [btn/buttons {:style wallet.styles/buttons :button-text-style wallet.styles/main-button-text} [{:text (i18n/label :t/wallet-send) :on-press show-not-implemented! ;; #(rf/dispatch [:navigate-to :wallet-send-transaction]) :disabled? (not config/wallet-wip-enabled?)} diff --git a/src/status_im/ui/screens/wallet/send/styles.cljs b/src/status_im/ui/screens/wallet/send/styles.cljs index 1701702757..69bd8531b7 100644 --- a/src/status_im/ui/screens/wallet/send/styles.cljs +++ b/src/status_im/ui/screens/wallet/send/styles.cljs @@ -1,12 +1,12 @@ (ns status-im.ui.screens.wallet.send.styles - (:require [status-im.components.styles :as st])) + (:require [status-im.components.styles :as styles])) (def wallet-container {:flex 1 - :background-color st/color-white}) + :background-color styles/color-white}) (def toolbar - {:background-color st/color-blue5 + {:background-color styles/color-blue5 :elevation 0}) (def toolbar-title-container @@ -15,7 +15,7 @@ :margin-left 6}) (def toolbar-title-text - {:color st/color-white + {:color styles/color-white :font-size 17 :margin-right 4}) @@ -24,11 +24,4 @@ :height 24}) (def toolbar-title-icon - (merge toolbar-icon {:opacity 0.4})) - -(def toolbar-buttons-container - {:flex-direction :row - :flex-shrink 1 - :justify-content :space-between - :width 68 - :margin-right 12}) \ No newline at end of file + (merge toolbar-icon {:opacity 0.4})) \ No newline at end of file