Introduces label component

Label component located inside `status-im.ui.components.react`
namespace, called i18n-text. It replaces the need for the standard way
of creating labels using both `react/text` and `i18n/label`.

Signed-off-by: Goran Jovic <goranjovic@gmail.com>
This commit is contained in:
Cheuk Yin Ng 2018-07-09 17:08:54 -07:00 committed by Goran Jovic
parent e9fcba001a
commit 11bb009787
No known key found for this signature in database
GPG Key ID: D429D1A9B2EB8A8E
36 changed files with 79 additions and 109 deletions

View File

@ -103,6 +103,12 @@
(dissoc :font)
(assoc :style (merge style font))))]))
(defn i18n-text
[{:keys [style key]}]
(let [default-style {:letter-spacing -0.2
:font-size 14}]
[text {:style (merge default-style style)} (i18n/label key)]))
(defn icon
([n] (icon n styles/icon-default))
([n style]

View File

@ -36,8 +36,7 @@
{:on-press #(re-frame/dispatch [:add-contact contact-identity])
:accessibility-label :add-to-contacts-button}
[react/view style/add-contact
[react/text {:style style/add-contact-text}
(i18n/label :t/add-to-contacts)]]])))
[react/i18n-text {:style style/add-contact-text :key :add-to-contacts}]]])))
(defn- on-options [chat-id chat-name group-chat? public?]
(list-selection/show {:title (if public? (str "#" chat-name) chat-name)

View File

@ -19,8 +19,6 @@
(def title-text
{:font-weight :bold
:font-size 14
:letter-spacing -0.2
:line-height 20})
(def label

View File

@ -21,7 +21,8 @@
[react/view
[vector-icons/icon icon style]]
[react/view (merge options.styles/label style)
[react/text {:style (merge options.styles/label-text style)} (i18n/label label)]]]])
[react/i18n-text {:style (merge options.styles/label-text style)
:key label}]]]])
(defn view []
(let [{:keys [chat-id message-id]} @(re-frame/subscribe [:get-current-chat-ui-prop :message-options])
@ -30,7 +31,7 @@
[bottom-info/container (* styles/item-height 2)
[react/view
[react/view options.styles/title
[react/text {:style options.styles/title-text} (i18n/label :message-not-sent)]]
[react/i18n-text {:style options.styles/title-text :key :message-not-sent}]]
[action-item {:label :resend-message
:icon :icons/refresh
:on-press #(do

View File

@ -163,8 +163,7 @@
[react/view (styles/profile-icon-mask size)])
(when edit?
[react/view (styles/profile-icon-edit-text-containter size)
[react/text {:style styles/profile-icon-edit-text}
(i18n/label :t/edit)]])
[react/i18n-text {:style styles/profile-icon-edit-text :key :edit}]])
(if (and photo-path (seq photo-path))
[photos/photo photo-path styles]
[default-chat-icon name styles])]))

View File

@ -18,7 +18,6 @@
(def sign-you-in
{:margin-top 16
:font-size 13
:letter-spacing -0.2
:color colors/text-light-gray})
(def bottom-button-container

View File

@ -74,8 +74,7 @@
(when processing
[react/view styles/processing-view
[components/activity-indicator {:animating true}]
[react/text {:style styles/sign-you-in}
(i18n/label :t/sign-you-in)]])
[react/i18n-text {:style styles/sign-you-in :key :sign-you-in}]])
(when-not processing
[react/view {:style styles/bottom-button-container}
(when-not can-navigate-back?

View File

@ -18,7 +18,6 @@
(def sign-you-in
{:margin-top 16
:font-size 13
:letter-spacing -0.2
:color colors/text-light-gray})
(def recovery-phrase-input

View File

@ -65,8 +65,7 @@
(if processing
[react/view styles/processing-view
[react/activity-indicator {:animating true}]
[react/text {:style styles/sign-you-in}
(i18n/label :t/sign-you-in)]]
[react/i18n-text {:style styles/sign-you-in :key :sign-you-in}]]
[react/view {:style styles/bottom-button-container}
[react/view {:style {:flex 1}}]
[components.common/bottom-button

View File

@ -6,9 +6,7 @@
:background-color colors/white})
(def gray-label
{:font-size 14
:letter-spacing -0.2
:color colors/gray})
{:color colors/gray})
(def black-label
{:font-size 15

View File

@ -67,13 +67,11 @@
(re-frame/dispatch [:open-dapp-in-browser dapp]))}]
[components/separator {:margin-left 72}]]
[react/view styles/description-container
[react/text {:style styles/gray-label}
(i18n/label :t/description)]
[react/i18n-text {:style styles/gray-label :key :description}]
[react/text {:style (merge styles/black-label {:padding-top 18})}
description]
[components/separator {:margin-top 15}]
[react/text {:style (merge styles/gray-label {:padding-top 18})}
(i18n/label :t/url)]
[react/i18n-text {:style (merge styles/gray-label {:padding-top 18}) :key :url}]
[react/text {:style (merge styles/black-label {:padding-top 14})}
dapp-url]
[components/separator {:margin-top 6}]]]))

View File

@ -16,8 +16,7 @@
(defstyle dapp-text
{:color colors/gray
:ios {:font-size 14
:margin-top 4}
:ios {:margin-top 4}
:android {:font-size 13}})
(def toolbar

View File

@ -31,8 +31,7 @@
:font :toolbar-title
:accessibility-label :dapp-name-text}
name]
[react/text {:style styles/dapp-text}
(i18n/label :t/dapp)]]]]))
[react/i18n-text {:style styles/dapp-text :key :dapp}]]]]))
(def browser-config
(reader/read-string (slurp "./src/status_im/utils/browser_config.edn")))
@ -53,8 +52,7 @@
(defn- web-view-error [_ code desc]
(reagent/as-element
[react/view styles/web-view-error
[react/text {:style styles/web-view-error-text}
(i18n/label :t/web-view-error)]
[react/i18n-text {:style styles/web-view-error-text :key :web-view-error}]
[react/text {:style styles/web-view-error-text}
(str code)]
[react/text {:style styles/web-view-error-text}
@ -143,4 +141,4 @@
[icons/icon :icons/refresh]]]
(when-not dapp?
[tooltip/bottom-tooltip-info
(i18n/label :t/browser-warning)])])))
(i18n/label :t/browser-warning)])])))

View File

@ -149,9 +149,7 @@
:margin-horizontal 34})
(def no-chats-text
{:font-size 14
:line-height 21
:letter-spacing -0.2
{:line-height 21
:text-align :center
:color colors/gray})
@ -182,8 +180,6 @@
:margin-top 8
:android {:margin-bottom 82}
:ios {:margin-bottom 32}
:font-size 14
:letter-spacing -0.2
:text-align :center
:color colors/gray})

View File

@ -68,11 +68,10 @@
[react/view {:style styles/welcome-image-container}
[react/image {:source (:welcome-image resources/ui)
:style styles/welcome-image}]]
[react/text {:style styles/welcome-text}
(i18n/label :t/welcome-to-status)]
[react/i18n-text {:style styles/welcome-text :key :welcome-to-status}]
[react/view
[react/text {:style styles/welcome-text-description}
(i18n/label :t/welcome-to-status-description)]]]))
[react/i18n-text {:style styles/welcome-text-description
:key :welcome-to-status-description}]]]))
(views/defview home []
(views/letsubs [home-items [:home-items]
@ -84,8 +83,7 @@
[welcome view-id]
(empty? home-items)
[react/view styles/no-chats
[react/text {:style styles/no-chats-text}
(i18n/label :t/no-recent-chats)]]
[react/i18n-text {:style styles/no-chats-text :key :no-recent-chats}]]
:else
[list/flat-list {:data home-items
:key-fn first

View File

@ -30,8 +30,6 @@
{:line-height 21
:margin-top 8
:margin-bottom 16
:font-size 14
:letter-spacing -0.2
:text-align :center
:color colors/gray})
@ -40,4 +38,4 @@
(def bottom-button-container
{:margin-bottom 6
:margin-top 38})
:margin-top 38})

View File

@ -12,11 +12,11 @@
[status-bar/status-bar {:flat? true}]
[react/view {:style styles/intro-logo-container}
[components.common/logo styles/intro-logo]]
[react/text {:style styles/intro-text}
(i18n/label :t/intro-text)]
[react/i18n-text {:style styles/intro-text
:key :intro-text}]
[react/view
[react/text {:style styles/intro-text-description}
(i18n/label :t/intro-text-description)]]
[react/i18n-text {:style styles/intro-text-description
:key :intro-text-description}]]
[react/view styles/buttons-container
[components.common/button {:button-style {:flex-direction :row}
:on-press #(re-frame/dispatch [:navigate-to :create-account])
@ -24,4 +24,4 @@
[react/view styles/bottom-button-container
[components.common/button {:on-press #(re-frame/dispatch [:navigate-to :recover])
:label (i18n/label :t/already-have-account)
:background? false}]]]])
:background? false}]]]])

View File

@ -47,7 +47,7 @@
:container styles/input-container
:default-value (get-in manage-network [:url :value])
:on-change-text #(re-frame/dispatch [:network-set-input :url %])}]
[react/text (i18n/label :t/network-chain)]
[react/i18n-text {:key :network-chain}]
[react/view styles/network-type
[list/flat-list {:data [:mainnet :testnet :rinkeby]
:key-fn (fn [_ i] (str i))

View File

@ -35,8 +35,8 @@
[react/text {:style st/connect-button-label
:uppercase? true}
(i18n/label :t/connect)]]
[react/text {:style st/connect-button-description}
(i18n/label :t/connecting-requires-login)]]])
[react/i18n-text {:style st/connect-button-description
:key :connecting-requires-login}]]])
[react/view st/network-config-container
[react/text {:style st/network-config-text
:accessibility-label :network-details-text}

View File

@ -14,9 +14,7 @@
(defstyle badge-connected-text
{:color colors/gray
:ios {:margin-top 5
:font-size 14
:letter-spacing -0.2}
:ios {:margin-top 5}
:android {:font-size 13}})
(defstyle paste-json-text-input
@ -45,10 +43,8 @@
(defstyle connect-button-description
{:color colors/gray
:ios {:margin-top 8
:height 20
:font-size 14
:letter-spacing -0.2}
:ios {:margin-top 8
:height 20}
:android {:margin-top 12
:font-size 12}})

View File

@ -23,8 +23,8 @@
[react/text {:style styles/badge-name-text}
(or name (i18n/label :t/new-network))]
(when connected?
[react/text {:style styles/badge-connected-text}
(i18n/label :t/connected)])]])
[react/i18n-text {:style styles/badge-connected-text
:key :connected}])]])
(def mainnet?
#{"mainnet" "mainnet_rpc"})

View File

@ -58,7 +58,6 @@
(defstyle settings-item-text
{:flex-wrap :nowrap
:font-size 15
:ios {:letter-spacing -0.2}
:android {:color colors/black}})
(def settings-item-destructive

View File

@ -91,8 +91,7 @@
(defn settings-switch-item [{:keys [label-kw value action-fn active?] :or {active? true}}]
[react/view styles/settings-item
[react/view styles/settings-item-text-wrapper
[react/text {:style styles/settings-item-text}
(i18n/label label-kw)]]
[react/i18n-text {:style styles/settings-item-text :key label-kw}]]
[react/switch {:on-tint-color colors/blue
:value value
:on-value-change action-fn

View File

@ -19,9 +19,7 @@
(def intro-description
{:margin-top 8
:font-size 14
:line-height 21
:letter-spacing -0.2
:text-align :center
:color colors/gray})
@ -151,4 +149,4 @@
{:margin-top 5
:font-size 14
:text-align :center
:color colors/gray})
:color colors/gray})

View File

@ -38,10 +38,10 @@
[react/view {:style styles/intro-container}
[components.common/image-contain {:container-style styles/intro-image}
(:lock resources/ui)]
[react/text {:style styles/intro-text}
(i18n/label :t/your-data-belongs-to-you)]
[react/text {:style styles/intro-description}
(i18n/label :t/your-data-belongs-to-you-description)]
[react/i18n-text {:style styles/intro-text
:key :your-data-belongs-to-you}]
[react/i18n-text {:style styles/intro-description
:key :your-data-belongs-to-you-description}]
[components.common/button {:button-style styles/intro-button
:on-press #(re-frame/dispatch [:set-in [:my-profile/seed :step] :12-words])
:label (i18n/label :t/ok-continue)}]])
@ -154,4 +154,4 @@
:12-words [twelve-words current-account]
:first-word [enter-word step first-word error word]
:second-word [enter-word step second-word error word]
:finish [finish])]))
:finish [finish])]))

View File

@ -44,8 +44,6 @@
:margin-bottom (scaled-y 26)
:margin-left 34
:margin-right 34
:font-size 14
:letter-spacing -0.2
:text-align :center
:color colors/gray})

View File

@ -17,11 +17,11 @@
[react/view {:style styles/image-container}
[react/image {:source (:analytics-image resources/ui)
:style styles/usage-data-image}]]
[react/text {:style styles/help-improve-text}
(i18n/label :t/help-improve)]
[react/i18n-text {:style styles/help-improve-text
:key :help-improve}]
[react/view
[react/text {:style styles/help-improve-text-description}
(i18n/label :t/help-improve-description)]]
[react/i18n-text {:style styles/help-improve-text-description
:key :help-improve-description}]]
[react/text {:style styles/learn-what-we-collect-link
:on-press #(.openURL react/linking "https://wiki.status.im/Help_Improve_Status#Help_Improve_Status")}
(i18n/label :t/learn-what-we-collect-link)]]

View File

@ -33,9 +33,7 @@
(defstyle label
{:color :white
:ios {:font-size 14
:line-height 16
:letter-spacing -0.2}
:ios {:line-height 16}
:android {:font-size 12}})
(def amount-text-input-container

View File

@ -27,8 +27,7 @@
(defn view-asset [symbol]
[react/view
[react/text {:style styles/label}
(i18n/label :t/wallet-asset)]
[react/i18n-text {:style styles/label :key :wallet-asset}]
[react/view styles/asset-container-read-only
[react/text {:style styles/asset-text}
(name symbol)]]])

View File

@ -25,7 +25,6 @@
(def transaction-sent-description
{:color :white
:opacity 0.6
:font-size 14
:text-align :center
:padding-horizontal 16})
@ -48,4 +47,4 @@
(def got-it
{:color :white
:font-size 15})
:font-size 15})

View File

@ -23,7 +23,8 @@
:accessibility-label :transaction-sent-text}
(i18n/label :t/transaction-sent)]
[react/view styles/gap]
[react/text {:style styles/transaction-sent-description} (i18n/label :t/transaction-description)]]
[react/i18n-text {:style styles/transaction-sent-description
:key :transaction-description}]]
[react/view components.styles/flex]
[components/separator]
[react/touchable-highlight {:on-press #(re-frame/dispatch [:close-transaction-sent-screen chat-id])

View File

@ -44,7 +44,7 @@
[react/text {:style styles/signing-phrase
:accessibility-label :signing-phrase-text}
signing-phrase]]
[react/text {:style styles/signing-phrase-description} (i18n/label message-label)]
[react/i18n-text {:style styles/signing-phrase-description :key message-label}]
[react/view styles/password-container
[react/text-input
{:auto-focus true
@ -158,8 +158,8 @@
[react/view styles/transaction-fee-info-icon
[react/text {:style styles/transaction-fee-info-icon-text} "?"]]
[react/view styles/transaction-fee-info-text-wrapper
[react/text {:style styles/advanced-fees-text}
(i18n/label :t/wallet-transaction-fee-details)]]]
[react/i18n-text {:style styles/advanced-fees-text
:key :wallet-transaction-fee-details}]]]
[components/separator]
[react/view styles/transaction-fee-block-wrapper
[wallet.components/cartouche {:disabled? true}
@ -207,8 +207,9 @@
[react/view {:style styles/advanced-button-wrapper}
[react/view {:style styles/advanced-button
:accessibility-label :advanced-button}
[react/text {:style (merge wallet.components.styles/label styles/advanced-label)}
(i18n/label :t/wallet-advanced)]
[react/i18n-text {:style (merge wallet.components.styles/label
styles/advanced-label)
:key :wallet-advanced}]
[vector-icons/icon (if advanced? :icons/up :icons/down) {:color :white}]]]]
(when advanced?
[advanced-cartouche transaction modal?])])
@ -278,7 +279,8 @@
[status-bar/status-bar {:type :modal-wallet}]
[toolbar false false act/close-white
(i18n/label :t/send-transaction)]
[react/text {:style styles/empty-text} (i18n/label :t/unsigned-transaction-expired)]]])))
[react/i18n-text {:style styles/empty-text
:key :unsigned-transaction-expired}]]])))
(defview sign-message-modal []
(letsubs [{:keys [data in-progress?]} [:wallet.send/unsigned-transaction]]

View File

@ -100,8 +100,7 @@
:color colors/white})
(def backup-seed-phrase-description
{:font-size 14
:line-height 20
{:line-height 20
:color colors/white-lighter-transparent})
(def total-balance-container
@ -116,8 +115,7 @@
:color colors/white})
(def total-value
{:font-size 14
:color colors/white-transparent})
{:color colors/white-transparent})
(defstyle total-balance-currency
{:font-size 37

View File

@ -144,8 +144,7 @@
(def details-item-label
{:flex 1
:margin-right 10
:color colors/gray
:font-size 14})
:color colors/gray})
(def details-item-value-wrapper
{:flex 5})
@ -213,7 +212,6 @@
(def details-confirmations-helper-text
{:color colors/gray
:font-size 14
:margin-vertical 2})
(def details-separator

View File

@ -104,8 +104,8 @@
[list/section-list {:sections (map #(update-transactions % filter-data) transactions-history-list)
:key-fn :hash
:render-fn #(render-transaction % network)
:empty-component [react/text {:style styles/empty-text}
(i18n/label :t/transactions-history-empty)]
:empty-component [react/i18n-text {:style styles/empty-text
:key :transactions-history-empty}]
:on-refresh #(re-frame/dispatch [:update-transactions])
:refreshing false}]]))
@ -183,12 +183,12 @@
[react/view {:style styles/details-block}
[progress-bar confirmations-progress (failed? type)]
(if (failed? type)
[react/text {:style styles/details-failed}
(i18n/label :t/failed)]
[react/i18n-text {:style styles/details-failed
:key :failed}]
[react/text {:style styles/details-confirmations-count}
(str confirmations " " (i18n/label :t/confirmations))])
[react/text {:style styles/details-confirmations-helper-text}
(i18n/label :t/confirmations-helper-text)]])
[react/i18n-text {:style styles/details-confirmations-helper-text
:key :confirmations-helper-text}]])
(defn details-list-row
([label props-value]
@ -201,7 +201,7 @@
[nil extra-props-value]
extra-props-value)]
[react/view {:style styles/details-row}
[react/text {:style styles/details-item-label} (i18n/label label)]
[react/i18n-text {:style styles/details-item-label :key label}]
[react/view {:style styles/details-item-value-wrapper}
[react/text (merge {:style styles/details-item-value} props)
(str (or value "-"))]

View File

@ -36,17 +36,18 @@
[react/text {:style styles/total-balance-currency
:accessibility-label :total-amount-currency-text}
(:code currency)]]
[react/text {:style styles/total-value} (i18n/label :t/wallet-total-value)]]])
[react/i18n-text {:style styles/total-value
:key :wallet-total-value}]]])
(defn- backup-seed-phrase []
[react/view styles/section
[react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :backup-seed])}
[react/view styles/backup-seed-phrase-container
[react/view styles/backup-seed-phrase-text-container
[react/text {:style styles/backup-seed-phrase-title}
(i18n/label :t/wallet-backup-recovery-title)]
[react/text {:style styles/backup-seed-phrase-description}
(i18n/label :t/wallet-backup-recovery-description)]]
[react/i18n-text {:style styles/backup-seed-phrase-title
:key :wallet-backup-recovery-title}]
[react/i18n-text {:style styles/backup-seed-phrase-description
:key :wallet-backup-recovery-description}]]
[vector-icons/icon :icons/forward {:color :white}]]]])
(def actions