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 #1802] Make sure wallet buttons have proper width

This commit is contained in:
Julien Eluard 2017-09-12 18:02:33 +02:00 committed by Roman Volosovskyi
parent 0618ef1aa7
commit a85929e72d
9 changed files with 76 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/status_im/components/button/styles.cljs
View File

@ -1,12 +1,11 @@
(ns status-im.components.button.styles (ns status-im.components.button.styles
(:require-macros [status-im.utils.styles :refer [defstyle]]) (: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 (defstyle button-borders
{:background-color border-color {:background-color border-color
:margin-horizontal 5
:android {:border-radius 4} :android {:border-radius 4}
:ios {:border-radius 8}}) :ios {:border-radius 8}})
@ -15,6 +14,8 @@
button-borders button-borders
{:flex-direction :row})) {:flex-direction :row}))
(def button-container styles/flex)
(def action-button (def action-button
{:flex-direction :row {:flex-direction :row
:justify-content :center :justify-content :center
@ -26,34 +27,35 @@
:border-left-width 1 :border-left-width 1
:border-right-width 1})) :border-right-width 1}))
(def action-button-text (defstyle action-button-text
{:font-size 15 {:font-size 15
:font-weight "normal" :font-weight "normal"
:color st/color-white :color styles/color-white
:padding-horizontal 16 :padding-horizontal 16
:padding-vertical 9}) :android {:padding-vertical 10
:letter-spacing 0.2}
:ios {:padding-vertical 9}})
(def primary-button (def primary-button
(merge (merge
action-button action-button
button-borders button-borders
{:background-color st/color-blue4})) {:background-color styles/color-blue4}))
(def primary-button-text (def primary-button-text
(merge (merge
action-button-text action-button-text
{:color st/color-white})) {:color styles/color-white}))
(def secondary-button (def secondary-button
(merge (merge
action-button action-button
button-borders button-borders
{:background-color st/color-blue4-transparent})) {:background-color styles/color-blue4-transparent}))
(def secondary-button-text (def secondary-button-text
(merge (merge
action-button-text action-button-text
{:color st/color-blue4})) {:color styles/color-blue4}))
(def action-button-text-disabled (def action-button-text-disabled {:opacity 0.4})
(merge action-button-text {:opacity 0.4}))

32
src/status_im/components/button/view.cljs
View File

@ -1,34 +1,36 @@
(ns status-im.components.button.view (ns status-im.components.button.view
(:require [cljs.spec.alpha :as s] (:require [status-im.components.button.styles :as button.styles]
[status-im.components.button.styles :as cst]
[status-im.components.react :as rn] [status-im.components.react :as rn]
[status-im.utils.platform :as p])) [status-im.utils.platform :as p]))
(defn button [{:keys [on-press style text text-style disabled?] (defn- button [{:keys [on-press style text text-style disabled?]}]
:or {style cst/action-button}}] [rn/touchable-highlight (merge {:style button.styles/button-container} (when (and on-press (not disabled?)) {:on-press on-press}))
[rn/touchable-highlight (when (and on-press (not disabled?)) {:on-press on-press}) [rn/view {:style (merge style button.styles/action-button)}
[rn/view {:style style} [rn/text {:style (merge button.styles/action-button-text
[rn/text {:style (or text-style text-style
(if disabled? cst/action-button-text-disabled cst/action-button-text)) (if disabled? button.styles/action-button-text-disabled))
:font :medium :font :medium
:uppercase? p/android?} :uppercase? p/android?}
text]]]) text]]])
(defn primary-button [m] (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] (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- 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 (defn buttons
([v] (buttons {} v)) ([v] (buttons nil v))
([m v] ([{:keys [style button-text-style]} v]
[rn/view {:style (merge cst/action-buttons-container m)} [rn/view {:style (merge button.styles/action-buttons-container style)}
(doall (doall
(map-indexed (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))])) v))]))

9
src/status_im/components/tabs/styles.cljs
View File

@ -1,10 +1,10 @@
(ns status-im.components.tabs.styles (ns status-im.components.tabs.styles
(:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
(:require [status-im.components.styles :as styles] (: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)) (def tab-height (dec tabs-height))
(defn tabs-container [hidden?] (defn tabs-container [hidden?]
@ -41,7 +41,10 @@
:margin-top 3 :margin-top 3
:min-width 60 :min-width 60
:text-align :center :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?] (defn tab-icon [active?]
{:color (if active? styles/color-blue4 styles/color-gray4)}) {:color (if active? styles/color-blue4 styles/color-gray4)})

18
src/status_im/components/tabs/views.cljs
View File

@ -6,22 +6,22 @@
[re-frame.core :refer [subscribe dispatch]] [re-frame.core :refer [subscribe dispatch]]
[status-im.components.react :as react] [status-im.components.react :as react]
[status-im.components.icons.vector-icons :as vi] [status-im.components.icons.vector-icons :as vi]
[status-im.components.tabs.styles :as styles] [status-im.components.tabs.styles :as tabs.styles]
[status-im.utils.platform :as p])) [status-im.utils.platform :as platform]))
(defn- tab [{:keys [view-id title icon-active icon-inactive style-active selected-view-id on-press]}] (defn- tab [{:keys [view-id title icon-active icon-inactive style-active selected-view-id on-press]}]
(let [active? (= view-id selected-view-id) (let [active? (= view-id selected-view-id)
text-only? (nil? icon-active)] 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? :disabled active?
:on-press #(if on-press (on-press view-id) (dispatch [:navigate-to-tab view-id]))} :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)] (when-let [icon (if active? icon-active icon-inactive)]
[react/view [react/view
[vi/icon icon (styles/tab-icon active?)]]) [vi/icon icon (tabs.styles/tab-icon active?)]])
[react/view [react/view
[react/text (merge (if text-only? {:uppercase? (get-in p/platform-specific [:uppercase?])}) [react/text (merge (if text-only? {:uppercase? (get-in platform/platform-specific [:uppercase?])})
{:style (styles/tab-title active? text-only?)}) {:style (tabs.styles/tab-title active? text-only?)})
title]]]])) title]]]]))
(defn- create-tab [index data selected-view-id on-press style-active] (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]}] (defn tabs [{:keys [style style-tab-active tab-list selected-view-id on-press]}]
[tabs-container style [tabs-container style
(into (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))]) (map-indexed #(create-tab %1 %2 selected-view-id on-press style-tab-active) tab-list))])
;; Swipable tabs ;; Swipable tabs
@ -107,7 +107,7 @@
:style style-tabs :style style-tabs
:style-tab-active style-tab-active :style-tab-active style-tab-active
:on-press on-view-change}] :on-press on-view-change}]
[react/swiper (merge styles/swiper [react/swiper (merge tabs.styles/swiper
{:index (get-tab-index tab-list @view-id) {:index (get-tab-index tab-list @view-id)
:ref #(reset! main-swiper %) :ref #(reset! main-swiper %)
:loop false :loop false

2
src/status_im/components/toolbar_new/styles.cljs
View File

@ -25,7 +25,7 @@
{:flex-direction :row {:flex-direction :row
:margin-left 4}) :margin-left 4})
(defstyle toolbar-title-container (defstyle toolbar-container
{:flex 1 {:flex 1
:android {:padding-left 18} :android {:padding-left 18}
:ios {:align-items :center}}) :ios {:align-items :center}})

8
src/status_im/components/toolbar_new/view.cljs
View File

@ -41,10 +41,14 @@
;; Content ;; Content
(defn content-wrapper [content]
[rn/view {:style tst/toolbar-container}
content])
(defn content-title (defn content-title
([title] (content-title nil title)) ([title] (content-title nil title))
([title-style title] ([title-style title]
[rn/view {:style tst/toolbar-title-container} [content-wrapper
[rn/text {:style (merge tst/toolbar-title-text title-style) [rn/text {:style (merge tst/toolbar-title-text title-style)
:font :toolbar-title} :font :toolbar-title}
title]])) title]]))
@ -124,7 +128,7 @@
[rn/view (tst/toolbar-nav-actions-container actions) [rn/view (tst/toolbar-nav-actions-container actions)
[nav-button (or nav-action act/default-back)]]) [nav-button (or nav-action act/default-back)]])
(or custom-content (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) [rn/text {:style (merge tst/toolbar-title-text title-style)
:font :toolbar-title} :font :toolbar-title}
title]]) title]])

26
src/status_im/ui/screens/wallet/main/styles.cljs
View File

@ -1,4 +1,5 @@
(ns status-im.ui.screens.wallet.main.styles (ns status-im.ui.screens.wallet.main.styles
(:require-macros [status-im.utils.styles :refer [defstyle]])
(:require [status-im.components.styles :as styles] (:require [status-im.components.styles :as styles]
[status-im.utils.platform :as platform])) [status-im.utils.platform :as platform]))
@ -23,11 +24,6 @@
:elevation 0}) :elevation 0})
(def toolbar-title-container (def toolbar-title-container
{:flex 1
:flex-direction :row
:margin-left 6})
(def toolbar-title-inner-container
{:flex-direction :row}) {:flex-direction :row})
(def toolbar-title-text (def toolbar-title-text
@ -42,19 +38,12 @@
(def toolbar-title-icon (def toolbar-title-icon
(merge toolbar-icon {:opacity 0.4})) (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 ;; ;; Main section ;;
;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;
(def main-section (def main-section
{:padding 16 {:padding-vertical 24
:background-color styles/color-blue4}) :background-color styles/color-blue4})
(def total-balance-container (def total-balance-container
@ -109,8 +98,15 @@
(merge today-variation (merge today-variation
{:color styles/color-red-4})) {:color styles/color-red-4}))
(def buttons (defstyle buttons
{:margin-top 34}) {: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 ;; ;; Assets section ;;

10
src/status_im/ui/screens/wallet/main/views.cljs
View File

@ -21,9 +21,8 @@
(utils/show-popup "TODO" "Not implemented yet!")) (utils/show-popup "TODO" "Not implemented yet!"))
(defn toolbar-title [] (defn toolbar-title []
[react/touchable-highlight {:on-press #(rf/dispatch [:navigate-to :wallet-list]) [react/touchable-highlight {:on-press #(rf/dispatch [:navigate-to :wallet-list])}
:style wallet.styles/toolbar-title-container} [react/view {:style wallet.styles/toolbar-title-container}
[react/view {:style wallet.styles/toolbar-title-inner-container}
[react/text {:style wallet.styles/toolbar-title-text [react/text {:style wallet.styles/toolbar-title-text
:font :toolbar-title} :font :toolbar-title}
(i18n/label :t/main-wallet)] (i18n/label :t/main-wallet)]
@ -40,7 +39,8 @@
(defn toolbar-view [] (defn toolbar-view []
[toolbar/toolbar2 {:style wallet.styles/toolbar} [toolbar/toolbar2 {:style wallet.styles/toolbar}
[toolbar/nav-button (act/hamburger-white drawer/open-drawer!)] [toolbar/nav-button (act/hamburger-white drawer/open-drawer!)]
[toolbar-title] [toolbar/content-wrapper
[toolbar-title]]
[toolbar/actions [toolbar/actions
[(assoc (act/opts [{:text (i18n/label :t/wallet-settings) :value show-not-implemented!}]) :icon-opts {:color :white}) [(assoc (act/opts [{:text (i18n/label :t/wallet-settings) :value show-not-implemented!}]) :icon-opts {:color :white})
transaction-history-action]]]) transaction-history-action]]])
@ -68,7 +68,7 @@
[react/text {:style wallet.styles/value-variation-title} [react/text {:style wallet.styles/value-variation-title}
(i18n/label :t/wallet-total-value)] (i18n/label :t/wallet-total-value)]
[change-display change]] [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) [{:text (i18n/label :t/wallet-send)
:on-press show-not-implemented! ;; #(rf/dispatch [:navigate-to :wallet-send-transaction]) :on-press show-not-implemented! ;; #(rf/dispatch [:navigate-to :wallet-send-transaction])
:disabled? (not config/wallet-wip-enabled?)} :disabled? (not config/wallet-wip-enabled?)}

15
src/status_im/ui/screens/wallet/send/styles.cljs
View File

@ -1,12 +1,12 @@
(ns status-im.ui.screens.wallet.send.styles (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 (def wallet-container
{:flex 1 {:flex 1
:background-color st/color-white}) :background-color styles/color-white})
(def toolbar (def toolbar
{:background-color st/color-blue5 {:background-color styles/color-blue5
:elevation 0}) :elevation 0})
(def toolbar-title-container (def toolbar-title-container
@ -15,7 +15,7 @@
:margin-left 6}) :margin-left 6})
(def toolbar-title-text (def toolbar-title-text
{:color st/color-white {:color styles/color-white
:font-size 17 :font-size 17
:margin-right 4}) :margin-right 4})
@ -25,10 +25,3 @@
(def toolbar-title-icon (def toolbar-title-icon
(merge toolbar-icon {:opacity 0.4})) (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})