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
(: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}))
(def action-button-text-disabled {:opacity 0.4})

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

@ -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))]))

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

@ -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)})

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

@ -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

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

@ -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}})

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

@ -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]])

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

@ -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 ;;

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

@ -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?)}

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

@ -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})
(merge toolbar-icon {:opacity 0.4}))