status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui elements

This commit is contained in:
Andrey Shovkoplyas 2019-09-02 08:43:18 +02:00
parent 34e9bc7876
commit b18a044146
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
73 changed files with 779 additions and 1248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/src/status_im/ui/components/react.cljs
View File

@ -301,39 +301,7 @@
(defmethod create-main-screen-view :iphone-x [current-view]
(fn [props & children]
(let [props (merge props
{:background-color
(case current-view
(:wallet-send-transaction
:wallet-request-transaction
:wallet-send-assets
:wallet-request-assets
:choose-recipient
:recent-recipients
:select-account
:wallet-send-transaction-request
:contact-code
:wallet-settings-hook)
colors/blue
(:qr-viewer
:recipient-qr-code)
"#2f3031"
colors/white)})
bottom-background (when (#{:recent-recipients
:select-account
:wallet-send-assets
:wallet-request-assets} current-view)
[view {:background-color colors/white
:position :absolute
:bottom 0
:right 0
:left 0
:height 100
:z-index -1000}])
children (conj children bottom-background)]
(apply vector safe-area-view props children))))
(apply vector safe-area-view props children)))
(defmethod create-main-screen-view :default [_]
view)

2
fiddle/README.md
View File

@ -2,4 +2,6 @@
`yarn install`
`clj prepare.clj`
`clj -A:dev`

4
fiddle/prepare.clj
View File

@ -13,6 +13,6 @@
(fn [fl]
(let [n (first (str/split (.getName fl) #".png"))]
(when (.isFile fl)
(io/copy (io/file (.getPath fl)) (io/file (str "./resources/public/" n)))
n)))
(io/copy (io/file (.getPath fl)) (io/file (str "./resources/public/" (str/replace n #"_" "-"))))
(str/replace n #"_" "-"))))
fls)))))

5
fiddle/resources/public/index.html
View File

@ -8,10 +8,7 @@
<style>
@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; }
}
html, body {
height: 100%;
margin: 0;

12
fiddle/src/fiddle/events.cljs
View File

@ -1,21 +1,11 @@
(ns fiddle.events
(:require [re-frame.core :as re-frame]
[fiddle.views.colors :as colors]
[fiddle.views.screens :as screens]
[fiddle.views.typography :as typography]
[fiddle.views.icons :as icons]
[fiddle.views.list-items :as list-items]
[cljs.reader :as reader]))
(re-frame/reg-event-fx
:initialize-db
(fn [_ _]
{:db {:view-id :colors
:views {:colors colors/colors
:icons icons/icons
:screens screens/screens
:typography typography/typography
:list-items list-items/list-items}}}))
{:db {:view-id :colors}}))
(re-frame/reg-fx
:load-icons-fx

2
fiddle/src/fiddle/subs.cljs
View File

@ -3,6 +3,4 @@
(re-frame/reg-sub :view-id (fn [db] (get db :view-id)))
(re-frame/reg-sub :view (fn [db] (get-in db [:views (:view-id db)])))
(re-frame/reg-sub :icons (fn [db] (get db :icons)))

45
fiddle/src/fiddle/views/list_items.cljs
View File

@ -2,7 +2,8 @@
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.list-item.views :as list-item]
[fiddle.frame :as frame]))
[fiddle.frame :as frame]
[status-im.ui.components.badge :as badge]))
(defn item [name content]
[react/view
@ -10,6 +11,17 @@
[react/view {:background-color :white :width frame/width}
content]])
(defn list-header []
[react/view
{:background-color colors/gray-lighter
:flex 1
:padding 20
:flex-direction :row
:flex-wrap :wrap}
[react/view {:width 375}
[react/view {:background-color :white}
[list-item/list-item {:type :section-header :title "Header title"}]]]])
(defn list-items []
[react/view
{:background-color colors/gray-lighter
@ -62,7 +74,7 @@
[item "Default wIth icon in circle, chevron and accessory"
[list-item/list-item
{:title "Contacts"
:icon :main-icons/in_contacts
:icon :main-icons/in-contacts
:on-press #()
:accessories [[react/text {:style {:color colors/gray}} "4"]
:chevron]}]]
@ -71,27 +83,14 @@
{:title "Privacy and Security"
:icon :main-icons/profile
:on-press #()
:accessories
[[react/view {:width 22
:height 22
:border-radius 11
:background-color colors/blue
:align-items :center
:justify-content :center}
[react/text {:style {:color colors/white :font-size 12}} "1"]]
:chevron]}]]
[item "Default wIth icon in circle, switch (TODO!)"
:accessories [[badge/badge "333"] :chevron]}]]
[item "Default wIth icon in circle, switch"
[list-item/list-item
{:title "Notifications"
:icon :main-icons/notification
:on-press #()
:accessories
[[react/view {:width 22
:height 22
:border-radius 11
:background-color colors/blue
:align-items :center
:justify-content :center}]]}]]
[[react/switch {}]]}]]
[item "Default wIth icon in circle, red"
[list-item/list-item
{:title "Delete and Leave"
@ -164,15 +163,7 @@
{:title "Recovery Phrase"
:type :small
:on-press #()
:accessories
[[react/view
{:width 22
:height 22
:border-radius 11
:background-color colors/blue :align-items :center
:justify-content :center}
[react/text {:style {:color colors/white :font-size 12}} "1"]]
:chevron]}]]]
:accessories [[badge/badge "2"] :chevron]}]]]
[react/view {:margin-right 10}
[item "Long title"
[list-item/list-item

47
fiddle/src/fiddle/views/main.cljs
View File

@ -1,25 +1,50 @@
(ns fiddle.views.main
(:require-macros [status-im.utils.views :as views])
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.button.view :as button]
[status-im.ui.components.button :as button]
[fiddle.views.colors :as colors]
[fiddle.views.screens :as screens]
[fiddle.views.typography :as typography]
[fiddle.views.icons :as icons]
[fiddle.views.list-items :as list-items]
[fiddle.views.ui :as ui]
[fiddle.views.toolbar :as toolbar]
[re-frame.core :as re-frame]))
(defn btn [id label view-id]
[button/primary-button
{:disabled? (= id view-id)
:style {:margin-top 5}
:on-press #(re-frame/dispatch [:set :view-id id])}
label])
[react/view {:margin-bottom 5}
[button/button
{:label label
:disabled? (= id view-id)
:type :secondary
:on-press #(re-frame/dispatch [:set :view-id id])}]])
(views/defview main []
(views/letsubs [view-id [:view-id]
view [:view]]
(views/letsubs [view-id [:view-id]]
[react/view {:flex 1 :flex-direction :row :padding 10}
[react/view {:padding-right 20}
[btn :colors "Colors" view-id]
[btn :icons "Icons" view-id]
[btn :typography "Typography" view-id]
[btn :list-items "List items" view-id]
[btn :list-header "List Header" view-id]
[btn :list-items "List Items" view-id]
[btn :top-bar "Top Bar" view-id]
[btn :ui "UI elements" view-id]
[btn :tooltip "Tooltips" view-id]
[btn :bottom "Bottom Sheet" view-id]
[btn :popover "Popover" view-id]
[btn :input "Text input" view-id]
[btn :tabbar "Tab Bar" view-id]
[btn :toolbar "Toolbar" view-id]
[btn :snack "Snackbar" view-id]
[btn :screens "Screens" view-id]]
(when view
[view])]))
(case view-id
:colors [colors/colors]
:icons [icons/icons]
:screens [screens/screens]
:typography [typography/typography]
:list-items [list-items/list-items]
:toolbar [toolbar/toolbar]
:list-header [list-items/list-header]
:ui [ui/ui]
[react/text "TODO"])]))

25
fiddle/src/fiddle/views/toolbar.cljs Normal file
View File

@ -0,0 +1,25 @@
(ns fiddle.views.toolbar
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.toolbar :as toolbar-comp]
[status-im.ui.components.colors :as colors]))
(defn toolbar []
[react/view
{:background-color colors/gray-lighter
:flex 1
:padding 20
:flex-direction :row
:flex-wrap :wrap}
[react/view {:width 375}
[react/view {:background-color :white :margin 10}
[toolbar-comp/toolbar {:center {:type :secondary :label "Label"}}]]
[react/view {:background-color :white :margin 10}
[toolbar-comp/toolbar {:left {:type :previous :label "Label"} :right {:type :next :label "Label"}}]]
[react/view {:background-color :white :margin 10}
[toolbar-comp/toolbar {:left {:type :secondary :label "Label"} :right {:label "Label"}}]]
[react/view {:background-color :white :margin 10}
[toolbar-comp/toolbar {:left {:type :previous :label "Label"}}]]
[react/view {:background-color :white :margin 10}
[toolbar-comp/toolbar {:right {:type :next :label "Label"}}]]
[react/view {:background-color :white :margin 10}
[toolbar-comp/toolbar {:center {:label "Label"}}]]]])

72
fiddle/src/fiddle/views/ui.cljs Normal file
View File

@ -0,0 +1,72 @@
(ns fiddle.views.ui
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.button :as button]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.badge :as badge]
[status-im.ui.components.checkbox.view :as checkbox]
[reagent.core :as reagent]
[status-im.ui.components.radio :as radio]))
(def sw (reagent/atom true))
(def ch (reagent/atom true))
(def ch2 (reagent/atom false))
(defn ui []
[react/view {:flex-direction :row :flex-wrap :wrap :flex 1}
[react/view
[react/text {:style {:typography :main-medium}} "Main button"]
[react/view {:padding 40 :background-color :while :border-radius 20}
[button/button {:label "Label"}]
[button/button {:label "Label" :disabled? true}]]]
[react/view
[react/text {:style {:typography :main-medium}} "Secondary button"]
[react/view {:padding 40 :background-color :while :border-radius 20}
[button/button {:label "Label" :type :secondary}]
[button/button {:label "Label" :type :secondary :disabled? true}]]]
[react/view
[react/text {:style {:typography :main-medium}} "Next and previous buttons"]
[react/view {:padding 40 :background-color :while :border-radius 20 :flex-direction :row}
[react/view
[button/button {:label "Label" :type :next}]
[button/button {:label "Label" :type :previous}]]
[react/view
[button/button {:label "Label" :type :next :disabled? true}]
[button/button {:label "Label2" :type :previous :disabled? true}]]]]
[react/view
[react/text {:style {:typography :main-medium}} "Switch"]
[react/view {:padding 40 :background-color :while :border-radius 20}
[react/switch
{:track-color #js {:true colors/blue :false nil}
:value @sw
:on-value-change #(swap! sw not)
:disabled false}]
[react/view {:height 20}]
[react/switch
{:track-color #js {:true colors/blue :false nil}
:value false
:disabled true}]]]
[react/view
[react/text {:style {:typography :main-medium}} "Badge"]
[react/view {:padding 40 :background-color :while :border-radius 20 :flex-direction :row :flex-wrap :wrap}
[react/view {:margin 10}
[badge/badge "8"]]
[react/view {:margin 10}
[badge/badge "8" true]]
[react/view {:margin 10}
[badge/badge "128"]]
[react/view {:margin 10}
[badge/badge "338" true]]]]
[react/view
[react/text {:style {:typography :main-medium}} "Checkbox"]
[react/view {:padding 40 :background-color :while :border-radius 20}
[checkbox/checkbox
{:checked? @ch :on-value-change #(swap! ch not)}]
[react/view {:height 20}]
[checkbox/checkbox
{:checked? @ch2 :on-value-change #(swap! ch2 not)}]]]
[react/view
[react/text {:style {:typography :main-medium}} "Radio button"]
[react/view {:padding 40 :background-color :while :border-radius 20}
[radio/radio true]
[react/view {:height 20}]
[radio/radio false]]]])

2
fiddle/src/status_im/react_native/js_dependencies.cljs
View File

@ -40,7 +40,7 @@
(def snoopy-bars (fn [] #js {:default #js {}}))
(def snoopy-buffer (fn [] #js {:default #js {}}))
(def fetch (fn [] #js {}))
(def fetch (fn [_ _] #js {}))
(def background-timer (fn [] #js {:setTimeout js/setTimeout
:setInterval js/setInterval

1
fiddle/src/status_im/ui/components/react.cljs
View File

@ -98,6 +98,7 @@
(defn prepare-text-props [props]
(-> props
(update :style typography/get-style)
(update :style assoc :font-family "Inter")
(assoc :max-font-size-multiplier max-font-size-multiplier)))
(defn prepare-nested-text-props [props]

2
src/status_im/subs.cljs
View File

@ -23,7 +23,7 @@
[status-im.tribute-to-talk.core :as tribute-to-talk]
[status-im.tribute-to-talk.db :as tribute-to-talk.db]
[status-im.tribute-to-talk.whitelist :as whitelist]
[status-im.ui.components.bottom-bar.styles :as tabs.styles]
[status-im.ui.components.tabbar.styles :as tabs.styles]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.toolbar.styles :as toolbar.styles]
[status-im.ui.screens.add-new.new-public-chat.db :as db]

34
src/status_im/ui/components/action_button/action_button.cljs
View File

@ -1,34 +0,0 @@
(ns status-im.ui.components.action-button.action-button
(:require [status-im.ui.components.action-button.styles :as st]
[status-im.ui.components.common.common :refer [list-separator]]
[status-im.ui.components.icons.vector-icons :as vi]
[status-im.ui.components.react :as rn]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react]
[status-im.react-native.resources :as resources]))
(defn action-button [{:keys [label accessibility-label icon icon-opts image image-opts on-press label-style cyrcle-color]}]
[rn/touchable-highlight (merge {:on-press on-press
:underlay-color colors/gray-transparent-10}
(when accessibility-label
{:accessibility-label accessibility-label}))
[rn/view {:style st/action-button}
[rn/view {:style (st/action-button-icon-container cyrcle-color)}
(if image
[react/image (assoc image-opts :source (resources/get-image image))]
[vi/icon icon icon-opts])]
[rn/view st/action-button-label-container
[rn/text {:style (merge st/action-button-label label-style)}
label]]]])
(defn action-button-disabled [{:keys [label icon]}]
[rn/view st/action-button
[rn/view st/action-button-icon-container-disabled
[rn/view {:opacity 0.4}
[vi/icon icon]]]
[rn/view st/action-button-label-container
[rn/text {:style st/action-button-label-disabled}
label]]])
(defn action-separator []
[list-separator])

44
src/status_im/ui/components/action_button/styles.cljs
View File

@ -1,44 +0,0 @@
(ns status-im.ui.components.action-button.styles
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.ui.components.colors :as colors]))
(defstyle action-button
{:padding-left 16
:flex-direction :row
:align-items :center
:ios {:height 64}
:desktop {:height 50}
:android {:height 64}})
(defnstyle action-button-icon-container [circle-color]
{:border-radius 20
:width 40
:height 40
:align-items :center
:justify-content :center
:background-color (or circle-color colors/blue-light)})
(def action-button-label-container
{:padding-left 16})
(def action-button-label
{:color colors/blue})
(def action-button-label-red
{:color colors/red})
(defstyle actions-list
{:background-color colors/white
:flex 1})
(def action-button-label-disabled
(merge action-button-label
{:color colors/gray}))
(defstyle action-button-icon-container-disabled
{:border-radius 50
:width 40
:height 40
:align-items :center
:justify-content :center
:background-color colors/gray-lighter})

13
src/status_im/ui/components/badge.cljs Normal file
View File

@ -0,0 +1,13 @@
(ns status-im.ui.components.badge
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.colors :as colors]))
(defn badge [label & [small?]]
[react/view (merge
(if small?
{:height 18 :border-radius 9 :min-width 18 :padding-horizontal 6}
{:height 22 :border-radius 11 :min-width 22 :padding-horizontal 8})
{:background-color colors/blue
:justify-content :center
:align-items :center})
[react/text {:style {:typography :caption :color colors/white}} label]])

23
src/status_im/ui/components/bottom_buttons/styles.cljs
View File

@ -1,23 +0,0 @@
(ns status-im.ui.components.bottom-buttons.styles
(:require [status-im.ui.components.colors :as colors]))
(def wrapper
{:position :absolute
:bottom 0
:left 0
:right 0})
(def border
{:margin-horizontal 16
:border-top-width 1
:border-color colors/white-transparent-10})
(def container
{:flex-direction :row
:align-items :center
:justify-content :space-between})
(def container-single
{:flex-direction :row
:align-items :center
:justify-content :center})

21
src/status_im/ui/components/bottom_buttons/view.cljs
View File

@ -1,21 +0,0 @@
(ns status-im.ui.components.bottom-buttons.view
(:require [status-im.ui.components.bottom-buttons.styles :as styles]
[status-im.ui.components.react :as react]))
(defn bottom-button
([button] (bottom-button nil button))
([style button]
[react/view styles/wrapper
[react/view styles/border]
[react/view (merge styles/container-single style)
button]]))
(defn bottom-buttons
([left right] (bottom-buttons nil left right))
([style left right]
[react/view styles/wrapper
[react/view styles/border]
[react/view (merge styles/container style)
left
[react/view {:flex 1}]
right]]))

68
src/status_im/ui/components/button.cljs Normal file
View File

@ -0,0 +1,68 @@
(ns status-im.ui.components.button
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.utils.label :as utils.label]))
(defn style-container [type disabled?]
(merge
(when (= type :main)
{:margin-vertical 8 :margin-horizontal 16})
(cond
(#{:main :secondary} type)
{:padding-horizontal 32}
(= :next type)
{:padding-right 12 :padding-left 20}
(= :previous type)
{:padding-right 20 :padding-left 12}
:else nil)
{:padding-vertical 11 :border-radius 8
:align-items :center :justify-content :center
:background-color (cond
(#{:secondary :next :previous} type)
nil
disabled?
colors/gray-transparent-10
(= type :main)
colors/blue-transparent-10
:else
nil)}))
(defn button
"A general purpose status-react specfic button component
'type'
:main (default), :secondary, :next, :previous
`label`
Any one of string, keyword representing translated string in the form of :t/{translation-key-in-translation-files}
`disabled?`
Bool
`on-press`
Fn
Spec: https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=858%3A0"
[{:keys [label type disabled? on-press accessibility-label] :or {type :main}}]
(let [label (utils.label/stringify label)]
[react/touchable-opacity (merge {:on-press on-press :disabled disabled? :active-pacity 0.5}
(when accessibility-label
{:accessibility-label accessibility-label}))
[react/view {:style (style-container type disabled?)}
[react/view {:flex-direction :row :align-items :center}
(when (= type :previous)
[vector-icons/icon :main-icons/back {:container-style {:width 24 :height 24 :margin-right 4}
:color (if disabled? colors/gray colors/blue)}])
[react/text {:style {:color (cond
disabled?
colors/gray
(#{:main :secondary :next :previous} type)
colors/blue
:else
nil)}}
label]
(when (= type :next)
[vector-icons/icon :main-icons/next {:container-style {:width 24 :height 24 :margin-left 4}
:color (if disabled? colors/gray colors/blue)}])]]]))

95
src/status_im/ui/components/button/styles.cljs
View File

@ -1,95 +0,0 @@
(ns status-im.ui.components.button.styles
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.styles :as styles]
[status-im.utils.platform :as platform]))
(def border-color colors/white-transparent-10)
(def border-color-high colors/white-transparent-10)
(def buttons-container {:flex-direction :row})
(def button-container styles/flex)
(def button
{:flex-direction :row
:justify-content :center
:align-items :center
:padding-horizontal 12})
(defn- border [position]
(let [radius (if platform/ios? 8 4)]
(case position
:first {:border-bottom-left-radius radius
:border-top-left-radius radius
:ios {:border-top-width 1
:border-left-width 1
:border-bottom-width 1}}
:last {:border-bottom-right-radius radius
:border-top-right-radius radius
:ios {:border-top-width 1
:border-right-width 1
:border-bottom-width 1}}
{:android {:border-left-width 1
:border-right-width 1}
:ios {:border-width 1}})))
(defnstyle button-bar [position]
(merge {:border-color border-color}
(border position)))
(def button-text
{:color colors/white
:padding-horizontal 16
:padding-vertical 10})
(defstyle button-text-disabled
{:android {:opacity 0.4}
:ios {:opacity 0.6}})
(defstyle button-borders
{:border-radius 8
:ios {;; Border radius is ignored with transparent background unless overflow "hidden" is used
;; See https://github.com/facebook/react-native/issues/13760
:overflow :hidden}})
(defn primary-button [disabled?]
(merge
button-borders
{:background-color (if disabled? colors/gray-transparent-10 colors/blue)}))
(def primary-button-text {:color colors/white})
(def secondary-button
(merge
button-borders
{:background-color colors/blue-light}))
(def secondary-button-text {:color colors/blue})
(def button-with-icon-container
{:flex-direction :row
:justify-content :space-between
:align-items :center
:height 42
:margin-horizontal 16
:border-radius styles/border-radius
:background-color colors/blue-transparent-10})
(def button-with-icon-text-container
{:padding-left 16
:padding-bottom 1
:flex 0.9
:flex-direction :row
:justify-content :center
:align-items :center})
(def button-with-icon-text
{:color colors/blue})
(def button-with-icon-image-container
{:border-radius 50
:flex 0.1
:padding-right 5
:align-items :center
:justify-content :center})

45
src/status_im/ui/components/button/view.cljs
View File

@ -1,45 +0,0 @@
(ns status-im.ui.components.button.view
(:require [status-im.ui.components.button.styles :as styles]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.utils.platform :as platform]))
(defn button [{:keys [on-press style disabled? fit-to-text? text-style accessibility-label] :or {fit-to-text? true}} label icon]
[react/touchable-highlight (merge {:underlay-color styles/border-color-high}
(when-not fit-to-text?
{:style styles/button-container})
(when (and on-press (not disabled?))
{:on-press on-press})
(when accessibility-label
{:accessibility-label accessibility-label}))
[react/view {:style (merge styles/button
style)}
[react/text {:style (merge styles/button-text
text-style
(when disabled?
{:color colors/gray}))}
label]
icon]])
(defn primary-button [{:keys [style text-style disabled?] :as m} label]
[button (assoc m
:style (merge (styles/primary-button disabled?) style)
:text-style (merge styles/primary-button-text text-style))
label])
(defn secondary-button [{:keys [style text-style] :as m} label]
[button (assoc m
:style (merge styles/secondary-button style)
:text-style (merge styles/secondary-button-text text-style))
label])
(defn button-with-icon [{:keys [on-press label icon accessibility-label style]}]
[react/touchable-highlight {:on-press on-press}
[react/view (merge styles/button-with-icon-container style)
[react/view styles/button-with-icon-text-container
[react/text {:style styles/button-with-icon-text}
label]]
[react/view {:style styles/button-with-icon-image-container
:accessibility-label accessibility-label}
[vector-icons/icon icon {:color colors/blue}]]]])

2
src/status_im/ui/components/chat_icon/screen.cljs
View File

@ -8,6 +8,8 @@
[status-im.utils.platform :as platform])
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
;;TODO REWORK THIS NAMESPACE
(defn default-chat-icon [name styles]
(when-not (string/blank? name)
[react/view (:default-chat-icon styles)

16
src/status_im/ui/components/checkbox/styles.cljs
View File

@ -2,7 +2,7 @@
(:require [status-im.ui.components.colors :as colors]))
(def wrapper
{:padding 16})
{:width 24 :height 24 :align-items :center :justify-content :center})
(defn icon-check-container [checked?]
{:background-color (if checked? colors/blue colors/gray-lighter)
@ -12,16 +12,6 @@
:width 18
:height 18})
(defn icon-radio-container [checked?]
(merge (icon-check-container checked?)
{:border-radius 100
:width 26
:height 26}))
(def check-icon
{:width 12
:height 12})
(def plain-check-icon
(merge check-icon
{:tint-color colors/blue}))
{:width 16
:height 16})

15
src/status_im/ui/components/checkbox/view.cljs
View File

@ -22,18 +22,3 @@
:tiny-icons/tiny-check {:container-style (styles/icon-check-container true)
:color colors/white}]
[react/view {:style (styles/icon-check-container false)}])])
(defn radio-button
[{:keys [on-value-change checked? accessibility-label
disabled? style icon-style]
:or {accessibility-label :radio-button}}]
[react/touchable-highlight
(merge {:style (merge
styles/wrapper
style)
:accessibility-label accessibility-label}
(when on-value-change
{:on-press #(on-value-change (not checked?))}))
(if checked?
[icons/icon :main-icons/check {:color colors/blue}]
[react/view])])

66
src/status_im/ui/components/common/common.cljs
View File

@ -1,66 +1,26 @@
(ns status-im.ui.components.common.common
(:require [reagent.core :as reagent]
[status-im.ethereum.core :as ethereum]
[status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.common.styles :as styles]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.react :as react]
[status-im.utils.platform :as platform])
[status-im.ui.components.react :as react])
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
(defn top-shadow []
(when platform/android?
[react/view]))
(defn bottom-shadow []
(when platform/android?
[react/view]))
(defn separator [style & [wrapper-style]]
[react/view (merge styles/separator-wrapper wrapper-style)
[react/view (merge styles/separator style)]])
(defn list-separator []
[separator styles/list-separator])
(defn list-footer []
[react/view styles/list-header-footer-spacing])
(defn list-header []
[react/view styles/list-header-footer-spacing])
(defn form-title [label & [{:keys [count-value]}]]
[react/view
[react/view styles/form-title-container
[react/view styles/form-title-inner-container
[react/text {:style styles/form-title}
label]
(when-not (nil? count-value)
[react/text {:style styles/form-title-count}
count-value])]]
[top-shadow]])
(defview network-info [{:keys [text-color]}]
(letsubs [network-id [:chain-id]]
[react/view
[react/view styles/network-container
[react/view styles/network-icon
[vector-icons/icon :main-icons/network {:color :white}]]
[react/text {:style (styles/network-text text-color)}
(cond (ethereum/testnet? network-id)
(i18n/label :t/testnet-text {:testnet (get-in ethereum/chains [(ethereum/chain-id->chain-keyword network-id) :name] "Unknown")})
(ethereum/sidechain? network-id)
(i18n/label :t/sidechain-text {:sidechain (get-in ethereum/chains [(ethereum/chain-id->chain-keyword network-id) :name] "Unknown")})
:else
(i18n/label :t/mainnet-text))]]]))
(defn logo
[{:keys [size]}]
[vector-icons/icon :icons/logo (styles/logo size)])
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn separator [style & [wrapper-style]]
[react/view (merge styles/separator-wrapper wrapper-style)
[react/view (merge styles/separator style)]])
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn list-separator []
[separator styles/list-separator])
;;TODO DEPRECATED, use status-im.ui.components.button
(defn bottom-button [{:keys [accessibility-label
label
disabled?
@ -79,6 +39,7 @@
(when forward?
[vector-icons/icon :main-icons/next {:color color}])]]))
;;TODO DEPRECATED, use status-im.ui.components.button
(defn button [{:keys [on-press label background? button-style label-style disabled? accessibility-label] :or {background? true disabled? false}}]
[react/touchable-highlight {:style (styles/button button-style background? disabled?)
:on-press on-press
@ -87,12 +48,15 @@
[react/text {:style (merge styles/button-label label-style)}
label]])
;;TODO DEPRECATED, use status-im.ui.components.button
;;TODO implement :red type if needed
(defn red-button [props]
[react/view {:align-items :center}
[button (merge props
{:label-style {:color colors/red :font-size 15}
:button-style {:padding-horizontal 32 :background-color colors/red-light}})]])
;;TODO DEPRECATED, use status-im.ui.components.badge
(defn counter
([value] (counter nil value))
([{:keys [size accessibility-label] :or {size 18}} value]

69
src/status_im/ui/components/common/styles.cljs
View File

@ -1,25 +1,6 @@
(ns status-im.ui.components.common.styles
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.ui.components.styles :as styles]
[status-im.ui.components.colors :as colors]))
(def gradient-top
{:flex-direction :row
:height 3
:background-color colors/gray-lighter})
(def gradient-top-colors
["rgba(25, 53, 76, 0.01)"
"rgba(25, 53, 76, 0.1)"])
(def gradient-bottom
{:flex-direction :row
:height 2
:background-color colors/gray-lighter})
(def gradient-bottom-colors
["rgba(25, 53, 76, 0.1)"
"rgba(25, 53, 76, 0.01)"])
(:require [status-im.ui.components.colors :as colors]))
(def separator-wrapper
{:background-color colors/white})
@ -33,60 +14,12 @@
(def list-separator
{:margin-left 72})
(defstyle form-title-container
{:flex-direction :row})
(defstyle form-title-inner-container
{:padding-left 16
:padding-right 16
:flex 1
:flex-direction :row
:ios {:background-color colors/white
:padding-top 19
:padding-bottom 15
:margin-top 16}
:android {:background-color colors/gray-lighter
:padding-top 20
:padding-bottom 17
:margin-top 8}})
(def form-title
{:flex-shrink 1
:color colors/text
:font-size 16})
(def form-title-count
(merge form-title
{:flex-shrink 0
:opacity 0.6
:padding-left 8
:padding-right 5
:color colors/text-gray}))
(defstyle list-header-footer-spacing
{:android {:background-color colors/white
:height 8}})
(def network-container
{:flex-direction :row
:padding-horizontal 13
:padding-vertical 11
:align-items :center})
(defn network-text [text-color]
{:flex 1
:color (or text-color colors/black)
:font-size 14
:margin-left 16})
(def network-icon
{:width 40
:height 40
:border-radius (/ 40 2)
:background-color colors/green
:align-items :center
:justify-content :center})
(def label-action-text
{:color colors/blue})

2
src/status_im/ui/components/desktop/tabs.cljs
View File

@ -5,7 +5,7 @@
[taoensso.timbre :as log]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react]
[status-im.ui.components.bottom-bar.styles :as tabs.styles])
[status-im.ui.components.tabbar.styles :as tabs.styles])
(:require-macros [status-im.utils.views :as views]))
;;TODO copy-pate with minimum modifications of status-react tabs

12
src/status_im/ui/components/desktop/views.cljs
View File

@ -2,8 +2,6 @@
(:require
[status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.common.styles :as styles]
[status-im.ui.components.action-button.styles :as st]
[status-im.ui.components.styles :as common]
[status-im.ui.components.checkbox.styles :as checkbox.styles]
[status-im.ui.components.react :as react]
[status-im.ui.components.colors :as colors]))
@ -14,16 +12,10 @@
(when checked?
[icons/icon :main-icons/check {:style checkbox.styles/check-icon}])]])
;; TODO copy-pate with minimum modifications of status-react components
;; TODO should be removed when 2-pane UI will be used
(defn action-button [{:keys [label icon icon-opts on-press label-style cyrcle-color]}]
[react/touchable-highlight {:on-press on-press}
[react/view {:style st/action-button}
[react/view {:style (st/action-button-icon-container cyrcle-color)}
[icons/icon icon icon-opts]]
[react/view {:style st/action-button-label-container}
[react/text {:style (merge st/action-button-label label-style)}
label]]]])
[react/touchable-highlight {:on-press on-press}])
(defn separator [style & [wrapper-style]]
[react/view {:style (merge styles/separator-wrapper wrapper-style)}

33
src/status_im/ui/components/list/views.cljs
View File

@ -29,12 +29,15 @@
[status-im.ui.components.list.styles :as styles]
[status-im.ui.components.react :as react]
[status-im.ui.screens.home.animations.responder :as responder]
[status-im.utils.platform :as platform])
[status-im.utils.platform :as platform]
[status-im.ui.components.radio :as radio])
(:require-macros [status-im.utils.views :as views]))
(def flat-list-class (react/get-class "FlatList"))
(def section-list-class (react/get-class "SectionList"))
;;TODO THIS NAMESPACE is DEPRECATED, use status-im.ui.components.list-item.views
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn item
([content] (item nil content))
([left content] (item left content nil))
@ -48,38 +51,38 @@
(when right
[react/view {:style styles/right-item-wrapper}
right])]))
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn touchable-item [handler item]
[react/touchable-highlight {:on-press handler}
[react/view
item]])
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn item-icon
[{:keys [icon style icon-opts]}]
{:pre [(not (nil? icon))]}
[react/view {:style (merge styles/item-icon-wrapper style)}
[vector-icons/icon icon (merge icon-opts {:style styles/item-icon})]])
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn item-image
[{:keys [source style image-style]}]
[react/view {:style style}
[react/image {:source (if (fn? source) (source) source)
:style (merge styles/item-image image-style)}]])
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn item-primary
([s] (item-primary nil s))
([{:keys [style] :as props} s]
[react/text (merge {:style (merge styles/primary-text style)}
(dissoc props :style))
s]))
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn item-primary-only
([s] (item-primary-only nil s))
([{:keys [style] :as props} s]
[react/text (merge {:style (merge styles/primary-text-only style)}
(dissoc props :style))
s]))
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn item-secondary
([s] (item-secondary nil s))
([{:keys [style]} s]
@ -88,11 +91,12 @@
:ellipsize-mode :middle
:number-of-lines 1}
s]))
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn item-content
[& children]
(into [react/view {:style styles/item-content-view}] (keep identity children)))
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn list-item-with-checkbox
[{:keys [on-value-change style checked? on-long-press] :as props} item]
[react/touchable-highlight (merge {:on-press #(on-value-change (not checked?))}
@ -102,18 +106,20 @@
[react/view {:style (merge style styles/item-checkbox)}
[checkbox/checkbox props]])])
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn list-item-with-radio-button
[{:keys [on-value-change style checked?] :as props} item]
[react/touchable-highlight {:on-press #(on-value-change (not checked?))}
(conj item
[react/view {:style (merge style styles/item-checkbox)}
[checkbox/radio-button props]])])
[radio/radio (:checked? props)]])])
(def item-icon-forward
[item-icon {:icon :main-icons/next
:style {:width 12}
:icon-opts {:color colors/white}}])
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn big-list-item
[{:keys [style text text-color text-style subtext value action-fn active? destructive? hide-chevron?
accessory-value text-color new? activity-indicator
@ -250,7 +256,7 @@
(assoc (dissoc props :render-fn) :renderItem (wrap-render-fn f))
props)
:data wrap-data))
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn section-list
"A wrapper for SectionList.
To render something on empty sections, use renderSectionFooter and conditionaly
@ -267,7 +273,7 @@
{:sections (clj->js (map wrap-per-section-render-fn sections))
:renderSectionHeader (wrap-render-section-header-fn render-section-header-fn)
:style style})])
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn render-action [{:keys [label subtext accessibility-label icon action disabled?]}
{:keys [action-style action-label-style action-subtext-style icon-opts]}]
[react/touchable-highlight {:on-press action}
@ -296,7 +302,7 @@
subtext]])
item-icon-forward]]])
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn action-list [actions {:keys [container-style action-separator-style] :as styles}]
[react/view (merge styles/action-list container-style)
[flat-list
@ -306,13 +312,14 @@
:data actions
:key-fn (fn [_ i] (str i))
:render-fn #(render-action % styles)}]])
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
(defn list-with-label [{:keys [style]} label list]
[react/view (merge styles/list-with-label-wrapper style)
[react/text {:style styles/label}
label]
list])
;;TODO DEPRECATED, use long-press
(views/defview deletable-list-item [{:keys [type id on-delete]} body]
(views/letsubs [swiped? [:delete-swipe-position type id]]
(let [offset-x (animation/create-value (if swiped? styles/delete-button-width 0))

7
src/status_im/ui/components/list_header/views.cljs
View File

@ -1,7 +0,0 @@
(ns status-im.ui.components.list-header.views
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.colors :as colors]))
(defn list-header [title]
[react/view {:style {:padding-top 14 :padding-bottom 4 :padding-horizontal 16}}
[react/text {:style {:color colors/gray}} title]])

21
src/status_im/ui/components/list_item/styles.cljs
View File

@ -1,25 +1,12 @@
(ns status-im.ui.components.list-item.styles
(:require [status-im.ui.components.colors :as colors]))
(defn container [type theme]
{:min-height (cond
(= type :default) 64
(= type :small) 52
(= type :section-header) 40
:else 0)
:flex 1
:flex-direction :row
(defn container [type]
{:flex-direction :row
:justify-content :flex-start
:padding-horizontal 16
:background-color (if (= theme :blue)
colors/blue
colors/white)
:padding-top (cond
(= type :section-header) 14
:else 10)
:padding-bottom (cond
(= type :section-header) 4
:else 10)
:padding-top (if (= type :section-header) 14 10)
:padding-bottom (if (= type :section-header) 4 10)
:align-items :center})
(def icon-column-container

46
src/status_im/ui/components/list_item/views.cljs
View File

@ -1,38 +1,16 @@
(ns status-im.ui.components.list-item.views
(:require [clojure.string :as string]
[reagent.core :as reagent]
[status-im.i18n :as i18n]
(:require [reagent.core :as reagent]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.react :as react]
[status-im.ui.components.list-item.styles :as styles]
[status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.screens.profile.db :as profile.db]))
[status-im.ui.screens.profile.db :as profile.db]
[status-im.utils.label :as utils.label]))
(def divider
[react/view {:height 1 :background-color colors/gray-lighter}])
(defn stringify [keyword-or-number]
(cond
(string? keyword-or-number)
keyword-or-number
(and (qualified-keyword? keyword-or-number)
(= "t" (namespace keyword-or-number)))
(i18n/label keyword-or-number)
(and (qualified-keyword? keyword-or-number)
(not= "t" (namespace keyword-or-number)))
(str (namespace keyword-or-number) "/" (name keyword-or-number))
(simple-keyword? keyword-or-number)
(name keyword-or-number)
(number? keyword-or-number)
(str keyword-or-number)
:else nil))
(defn- icon-column [icon theme disabled?]
[react/view styles/icon-column-container
(cond
@ -99,8 +77,8 @@
type theme icon? subtitle content
title-prefix-width disabled?)}
(if title-prefix-width
(stringify title-prefix)
(str (stringify title-prefix) " "))]
(utils.label/stringify title-prefix)
(str (utils.label/stringify title-prefix) " "))]
(vector? title-prefix)
title-prefix
@ -121,7 +99,7 @@
title-color-override)}
(when title-accessibility-label
{:accessibility-label title-accessibility-label}))
(stringify title)]
(utils.label/stringify title)]
(vector? title)
[react/view {:flex 1}
@ -149,7 +127,7 @@
icon? theme (pos? @subtitle-row-accessory-width)))
:number-of-lines subtitle-max-lines
:ellipsize-mode :tail}
(stringify subtitle)]
(utils.label/stringify subtitle)]
(vector? subtitle)
[react/view
@ -192,7 +170,7 @@
(defn- accessories-column [accessories theme]
(let [last-accessory (peek accessories)
last-accessory-is-component (and (not (stringify last-accessory))
last-accessory-is-component (and (not (utils.label/stringify last-accessory))
(not= :chevron last-accessory))
second-last-accessory (peek (pop accessories))]
(into
@ -237,7 +215,7 @@
(or (string? accessory) (keyword? accessory) (number? accessory))
[react/text {:style (styles/accessory-text theme)
:number-of-lines 1}
(stringify accessory)]
(utils.label/stringify accessory)]
(vector? accessory)
accessory
@ -256,7 +234,7 @@
;; optionally set `container-margin-top/bottom`
;; theme
;; :default(default), :blue, :action, :action-destructive
;; :default(default), :action, :action-destructive
;; container-margin-top
;; container-margin-bottom
@ -370,11 +348,11 @@
[react/touchable-highlight
(cond-> {:on-press on-press
:on-long-press on-long-press
:underlay-color colors/black
:underlay-color colors/gray-transparent-10
:disabled (or (not on-press) disabled?)}
accessibility-label
(assoc :accessibility-label accessibility-label))
[react/view {:style (styles/container type theme)}
[react/view {:style (styles/container type)}
(when icon
[icon-column icon theme disabled?])

50
src/status_im/ui/components/lists/cell/styles.cljs
View File

@ -1,50 +0,0 @@
(ns status-im.ui.components.lists.cell.styles
(:require [status-im.ui.components.styles :as common-styles]
[status-im.ui.components.colors :as colors]))
(def cell-container
{:height 64
:align-self :stretch
:flex-direction :row})
(def icon-container
{:width 72
:justify-content :center
:align-items :center})
(defn- get-color [color]
(get
{:blue colors/blue
:red colors/red
:red-light colors/red-light
:blue-light colors/blue-light}
color
color))
(defn icon [color background-color]
{:width 24
:height 24
:color (get-color color)
:container-style {:width 40
:height 40
:border-radius 20
:background-color (get-color background-color)
:justify-content :center
:align-items :center}})
(def description
{:flex 1
:padding-top 8
:padding-bottom 8})
(def cell-text
{:height 18
:justify-content :center
:margin-top 3
:margin-bottom 3})
(defn item-title [color]
{:color (get-color color)})
(def item-details
{:color colors/gray})

26
src/status_im/ui/components/lists/cell/view.cljs
View File

@ -1,26 +0,0 @@
(ns status-im.ui.components.lists.cell.view
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.lists.cell.styles :as styles]
[status-im.ui.components.icons.vector-icons :as icons]))
(defn cell [{:keys [title details icon on-press]
{:keys [title-color
icon-color
icon-background]} :style}]
[react/view
{:style styles/cell-container}
[react/touchable-highlight
{:style styles/icon-container
:on-press on-press}
[react/view {}
[icons/icon icon (styles/icon icon-color icon-background)]]]
[react/view {:style styles/description}
[react/touchable-highlight
{:style styles/cell-text
:on-press on-press}
[react/view {}
[react/text {:style (styles/item-title title-color)}
title]]]
[react/view {:style styles/cell-text}
[react/text {:style styles/item-details}
details]]]])

36
src/status_im/ui/components/qr_code_viewer/views.cljs
View File

@ -3,8 +3,7 @@
[status-im.react-native.js-dependencies :as rn-dependencies]
[status-im.ui.components.qr-code-viewer.styles :as styles]
[status-im.ui.components.react :as react]
[status-im.ui.components.svg :as svg]
[status-im.ui.screens.profile.tribute-to-talk.views :as tribute-to-talk])
[status-im.ui.components.svg :as svg])
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
(defn qr-code [{:keys [size value]}]
@ -20,36 +19,3 @@
:accessibility-label :qr-code-image}
[qr-code {:value value
:size size}]]))
(defview qr-code-viewer-component
[{:keys [style hint-style footer-style footer-button value hint legend
show-tribute-to-talk-warning?]}]
(letsubs [{:keys [width]} [:dimensions/window]]
[react/scroll-view {:content-container-style {:align-items :center
:margin-top 16
:justify-content :center}
:style (merge {:flex 1} style)}
(when show-tribute-to-talk-warning?
[react/view {:style {:margin-horizontal 16}}
[tribute-to-talk/enabled-note]])
(when width
[qr-code-view (int (min width styles/qr-code-max-width)) value])
[react/text {:style (merge styles/qr-code-hint hint-style)}
hint]
[react/view styles/footer
[react/view styles/wallet-info
[react/text {:style (merge styles/hash-value-text footer-style)
:accessibility-label :address-text
:selectable true}
legend]]]
(when footer-button
[react/view {:style {:align-self :stretch
:margin-bottom 16}}
[footer-button value]])]))
(defn qr-code-viewer
[{:keys [style hint-style footer-style footer-button value hint legend]
:as params}]
(if value
[qr-code-viewer-component params]
[react/view [react/text "no value"]]))

51
src/status_im/ui/components/status_bar/view.cljs
View File

@ -20,58 +20,13 @@
[react/view {:style (cond-> view-style flat? (assoc :elevation 0))}])))
(defn get-config [view-id]
(get
{:create-multiaccount {:flat? true}
(or (get {:create-multiaccount {:flat? true}
:chat-modal {:type :modal-white}
:intro {:flat? true}
:home {:type :main}
:chat-stack {:type :main}
:new {:type :main}
:new-chat {:type :main}
:contact-toggle-list {:type :main}
:new-public-chat {:type :main}
:qr-scanner {:type :main}
:browser-stack {:type :main}
:open-dapp {:type :main}
:my-profile {:type :main}
:profile-stack {:type :main}
:my-profile-ext-settings {:type :main}
:contacts-list {:type :main}
:browser {:type :main}
:mobile-network-settings {:type :main}
:backup-seed {:type :main}
:currency-settings {:type :main}
:installations {:type :main}
:transactions-history {:type :main}
:dapps-permissions {:type :main}
:privacy-and-security {:type :main}
:language-settings {:type :main}
:notifications-settings {:type :main}
:sync-settings {:type :main}
:advanced-settings {:type :main}
:help-center {:type :main}
:about-app {:type :main}
:offline-messaging-settings {:type :main}
:bootnodes-settings {:type :main}
:fleet-settings {:type :main}
:log-level-settings {:type :main}
:stickers-pack-modal {:type :main}
:tribute-learn-more {:type :main}
:wallet {:type :main}
:wallet-stack {:type :main}
:recipient-qr-code {:type :transparent}
:wallet-send-assets {:type :wallet}
:wallet-request-assets {:type :wallet}
:recent-recipients {:type :wallet}
:select-account {:type :wallet}
:contact-code {:type :wallet}
:wallet-send-transaction-request {:type :wallet}
:wallet-settings-assets {:type :main}
:wallet-account {:type :main}
:wallet-add-custom-token {:type :main}
:wallet-settings-hook {:type :wallet}
:wallet-transactions-filter {:type :modal-main}}
view-id))
view-id)
{:type :main}))
(defn set-status-bar
"If more than one `StatusBar` is rendered, the one which was mounted last will

6
src/status_im/ui/components/bottom_bar/core.cljs → src/status_im/ui/components/tabbar/core.cljs
View File

@ -1,7 +1,7 @@
(ns status-im.ui.components.bottom-bar.core
(ns status-im.ui.components.tabbar.core
(:require
[status-im.ui.components.animation :as animation]
[status-im.ui.components.bottom-bar.styles :as tabs.styles]
[status-im.ui.components.tabbar.styles :as tabs.styles]
[reagent.core :as reagent]
[status-im.ui.components.react :as react]
[status-im.utils.platform :as platform]
@ -147,7 +147,7 @@
(def disappearance-duration 150)
(def appearance-duration 100)
(defn bottom-bar [_ view-id]
(defn tabbar [_ view-id]
(let [keyboard-shown? (reagent/atom false)
listeners (atom [])]
(reagent/create-class

2
src/status_im/ui/components/bottom_bar/styles.cljs → src/status_im/ui/components/tabbar/styles.cljs
View File

@ -1,4 +1,4 @@
(ns status-im.ui.components.bottom-bar.styles
(ns status-im.ui.components.tabbar.styles
(:require [status-im.ui.components.colors :as colors]
[status-im.utils.platform :as platform]
[status-im.ui.components.animation :as animation])

14
src/status_im/ui/components/toolbar.cljs Normal file
View File

@ -0,0 +1,14 @@
(ns status-im.ui.components.toolbar
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.button :as button]))
(defn toolbar [{:keys [center left right]}]
(if center
[react/view {:height 52 :align-items :center :justify-content :center}
[button/button center]]
[react/view {:height 52 :align-items :center :flex-direction :row}
(when left
[button/button left])
[react/view {:flex 1}]
(when right
[button/button right])]))

57
src/status_im/ui/screens/add_new/views.cljs
View File

@ -1,64 +1,57 @@
(ns status-im.ui.screens.add-new.views
(:require-macros [status-im.utils.views :as views])
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.action-button.action-button :as action-button]
[status-im.ui.components.action-button.styles :as action-button.styles]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.common.common :as common]
[status-im.ui.components.list-selection :as list-selection]
[status-im.ui.components.react :as react]
[status-im.ui.components.styles :as styles]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.utils.config :as config]
[status-im.utils.platform :as platform]))
[status-im.utils.platform :as platform]
[status-im.ui.components.list-item.views :as list-item]))
(defn- options-list [{:keys [dev-mode?]}]
[react/view action-button.styles/actions-list
[action-button/action-button
{:label (i18n/label :t/start-new-chat)
(defn- options-list []
[react/view {:flex 1}
[list-item/list-item
{:theme :action
:title (i18n/label :t/start-new-chat)
:accessibility-label :start-1-1-chat-button
:icon :main-icons/add-contact
:icon-opts {:color colors/blue}
:on-press #(re-frame/dispatch [:navigate-to :new-chat])}]
[action-button/action-separator]
[action-button/action-button
{:label (i18n/label :t/start-group-chat)
[common/list-separator]
[list-item/list-item
{:theme :action
:title (i18n/label :t/start-group-chat)
:accessibility-label :start-group-chat-button
:icon :main-icons/group-chat
:icon-opts {:color colors/blue}
:on-press #(re-frame/dispatch [:contact.ui/start-group-chat-pressed])}]
[action-button/action-separator]
[action-button/action-button
{:label (i18n/label :t/new-public-group-chat)
[common/list-separator]
[list-item/list-item
{:theme :action
:title (i18n/label :t/new-public-group-chat)
:accessibility-label :join-public-chat-button
:icon :main-icons/public-chat
:icon-opts {:color colors/blue}
:on-press #(re-frame/dispatch [:navigate-to :new-public-chat])}]
(when-not platform/desktop?
[action-button/action-separator]
[action-button/action-button
{:label (i18n/label :t/invite-friends)
[common/list-separator]
[list-item/list-item
{:theme :action
:title (i18n/label :t/invite-friends)
:accessibility-label :invite-friends-button
:icon :main-icons/share
:icon-opts {:color colors/blue}
:on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at)})}]
[action-button/action-separator]
[action-button/action-button
{:label (i18n/label :t/scan-qr)
[common/list-separator]
[list-item/list-item
{:theme :action
:title (i18n/label :t/scan-qr)
:accessibility-label :scan-qr-code-button
:icon :main-icons/qr
:icon-opts {:color colors/blue}
:on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed
{:toolbar-title (i18n/label :t/scan-qr)}
:handle-qr-code])}])])
(views/defview add-new []
(views/letsubs [multiaccount [:multiaccount]
device-UUID [:get-device-UUID]]
(defn add-new []
[react/view {:flex 1 :background-color :white}
[status-bar/status-bar]
[toolbar/simple-toolbar (i18n/label :t/new)]
[common/separator]
[options-list multiaccount]]))
[options-list]])

2
src/status_im/ui/screens/browser/open_dapp/views.cljs
View File

@ -9,7 +9,7 @@
[status-im.ui.components.list.views :as list]
[status-im.ui.components.common.common :as components.common]
[status-im.ui.screens.wallet.components.views :as components]
[status-im.ui.components.bottom-bar.styles :as tabs.styles]
[status-im.ui.components.tabbar.styles :as tabs.styles]
[status-im.react-native.resources :as resources]
[status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.icons.vector-icons :as vector-icons]

11
src/status_im/ui/screens/chat/views.cljs
View File

@ -4,9 +4,8 @@
[status-im.contact.db :as contact.db]
[status-im.i18n :as i18n]
[status-im.multiaccounts.core :as multiaccounts]
[status-im.tribute-to-talk.core :as tribute-to-talk]
[status-im.ui.components.animation :as animation]
[status-im.ui.components.button.view :as buttons]
[status-im.ui.components.button :as button]
[status-im.ui.components.chat-icon.screen :as chat-icon.screen]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.connectivity.view :as connectivity]
@ -101,10 +100,10 @@
(str (i18n/label :t/empty-chat-description-one-to-one) (multiaccounts/displayed-name contact))])
(defn join-chat-button [chat-id]
[buttons/secondary-button
{:style style/join-button
:on-press #(re-frame/dispatch [:group-chats.ui/join-pressed chat-id])}
(i18n/label :t/join-group-chat)])
[button/button
{:type :secondary
:on-press #(re-frame/dispatch [:group-chats.ui/join-pressed chat-id])
:label :t/join-group-chat}])
(defn decline-chat [chat-id]
[react/touchable-highlight

23
src/status_im/ui/screens/desktop/main/tabs/home/views.cljs
View File

@ -8,17 +8,13 @@
[status-im.ui.components.popup-menu.views :as popup-menu]
[clojure.string :as string]
[status-im.ui.screens.home.views.inner-item :as chat-item]
[taoensso.timbre :as log]
[status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.react :as react]
[status-im.constants :as constants]
[status-im.utils.utils :as utils]
[status-im.ui.components.react :as components]
[reagent.core :as reagent]
[status-im.ui.components.action-button.styles :as action-button.styles]
[status-im.ui.components.action-button.action-button :as action-button]
[status-im.utils.config :as config]
[status-im.utils.contenthash :as contenthash]))
[status-im.utils.contenthash :as contenthash]
[status-im.ui.components.list-item.views :as list-item]))
(views/defview chat-list-item-inner-view
[{:keys [chat-id name group-chat
@ -122,27 +118,24 @@
[react/view {:style {:flex-direction :row}}
[react/view {:style styles/popup-shaddow}
[react/view {:style styles/popup}
[action-button/action-button
{:label (i18n/label :t/start-new-chat)
[list-item/list-item
{:title (i18n/label :t/start-new-chat)
:accessibility-label :start-1-1-chat-button
:icon :main-icons/add-contact
:icon-opts {:color colors/blue}
:on-press #(do
(re-frame/dispatch [:set-in [:desktop :popup] nil])
(re-frame/dispatch [:navigate-to :desktop/new-one-to-one]))}]
[action-button/action-button
{:label (i18n/label :t/start-group-chat)
[list-item/list-item
{:title (i18n/label :t/start-group-chat)
:accessibility-label :start-group-chat-button
:icon :main-icons/group-chat
:icon-opts {:color colors/blue}
:on-press #(do
(re-frame/dispatch [:set-in [:desktop :popup] nil])
(re-frame/dispatch [:navigate-to :desktop/new-group-chat]))}]
[action-button/action-button
{:label (i18n/label :t/new-public-group-chat)
[list-item/list-item
{:title (i18n/label :t/new-public-group-chat)
:accessibility-label :join-public-chat-button
:icon :main-icons/public-chat
:icon-opts {:color colors/blue}
:on-press #(do
(re-frame/dispatch [:set-in [:desktop :popup] nil])
(re-frame/dispatch [:navigate-to :desktop/new-public-chat]))}]]]])

9
src/status_im/ui/screens/group/views.cljs
View File

@ -4,12 +4,12 @@
[clojure.string :as string]
[re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.bottom-bar.styles :as main-tabs.styles]
[status-im.ui.components.tabbar.styles :as main-tabs.styles]
[status-im.ui.components.styles :as components.styles]
[status-im.constants :as constants]
[status-im.utils.platform :as utils.platform]
[status-im.ui.components.contact.contact :refer [toggle-contact-view]]
[status-im.ui.components.button.view :as buttons]
[status-im.ui.components.button :as button]
[status-im.ui.components.list-selection :as list-selection]
[status-im.ui.components.common.common :as components.common]
[status-im.ui.components.react :as react]
@ -107,7 +107,10 @@
{:style styles/no-contact-text}
(i18n/label :t/group-chat-no-contacts)]
(when-not platform/desktop?
[buttons/secondary-button {:on-press handle-invite-friends-pressed} (i18n/label :t/invite-friends)])])
[button/button
{:type :secondary
:on-press handle-invite-friends-pressed
:label :t/invite-friends}])])
(views/defview bottom-container [{:keys [on-press disabled label accessibility-label]}]
[react/view {:style main-tabs.styles/tabs-container}

84
src/status_im/ui/screens/home/sheet/views.cljs
View File

@ -2,13 +2,12 @@
(:require-macros [status-im.utils.views :refer [defview letsubs] :as views])
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.action-button.action-button :as action-button]
[status-im.ui.components.action-button.styles :as action-button.styles]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.list-selection :as list-selection]
[status-im.ui.components.react :as react]
[status-im.utils.universal-links.core :as universal-links]
[status-im.utils.platform :as platform]))
[status-im.utils.platform :as platform]
[status-im.ui.components.list-item.views :as list-item]))
(defn hide-sheet-and-dispatch [event]
(re-frame/dispatch [:bottom-sheet/hide-sheet])
@ -16,38 +15,38 @@
(defn add-new-view []
[react/view {:flex 1 :flex-direction :row}
[react/view action-button.styles/actions-list
[action-button/action-button
{:label (i18n/label :t/start-new-chat)
[react/view {:flex 1}
[list-item/list-item
{:theme :action
:title :t/start-new-chat
:accessibility-label :start-1-1-chat-button
:icon :main-icons/one-on-one-chat
:icon-opts {:color colors/blue}
:on-press #(hide-sheet-and-dispatch [:navigate-to :new-chat])}]
[action-button/action-button
{:label (i18n/label :t/start-group-chat)
[list-item/list-item
{:theme :action
:title :t/start-group-chat
:accessibility-label :start-group-chat-button
:icon :main-icons/group-chat
:icon-opts {:color colors/blue}
:on-press #(hide-sheet-and-dispatch [:contact.ui/start-group-chat-pressed])}]
[action-button/action-button
{:label (i18n/label :t/new-public-group-chat)
[list-item/list-item
{:theme :action
:title :t/new-public-group-chat
:accessibility-label :join-public-chat-button
:icon :main-icons/public-chat
:icon-opts {:color colors/blue}
:on-press #(hide-sheet-and-dispatch [:navigate-to :new-public-chat])}]
[action-button/action-button
{:label (i18n/label :t/scan-qr)
[list-item/list-item
{:theme :action
:title :t/scan-qr
:accessibility-label :scan-qr-code-button
:icon :main-icons/qr
:icon-opts {:color colors/blue}
:on-press #(hide-sheet-and-dispatch [:qr-scanner.ui/scan-qr-code-pressed
{:toolbar-title (i18n/label :t/scan-qr)}
:handle-qr-code])}]
[action-button/action-button
{:label (i18n/label :t/invite-friends)
[list-item/list-item
{:theme :action
:title :t/invite-friends
:accessibility-label :invite-friends-button
:icon :main-icons/share
:icon-opts {:color colors/blue}
:on-press #(do
(re-frame/dispatch [:bottom-sheet/hide-sheet])
(list-selection/open-share {:message (i18n/label :t/get-status-at)}))}]]])
@ -55,63 +54,58 @@
(defview public-chat-actions-view []
(letsubs [{:keys [chat-id]} [:bottom-sheet/options]]
[react/view {:flex 1 :flex-direction :row}
[react/view action-button.styles/actions-list
[react/view {:flex 1}
(when-not platform/desktop?
(let [link (universal-links/generate-link :public-chat :external chat-id)
message (i18n/label :t/share-public-chat-text {:link link})]
[action-button/action-button
{:label (i18n/label :t/share-chat)
[list-item/list-item
{:theme :action
:title :t/share-chat
:accessibility-label :share-chat-button
:icon :main-icons/share
:icon-opts {:color colors/blue}
:on-press #(do
(re-frame/dispatch [:bottom-sheet/hide-sheet])
(list-selection/open-share {:message message}))}]))
[action-button/action-button
{:label (i18n/label :t/delete-chat)
:label-style {:color colors/red}
[list-item/list-item
{:theme :action-destructive
:title :t/delete-chat
:accessibility-label :delete-chat-button
:icon :main-icons/delete
:icon-opts {:color colors/red}
:cyrcle-color colors/red-light
:on-press #(hide-sheet-and-dispatch [:chat.ui/remove-chat-pressed chat-id])}]]]))
(defview private-chat-actions-view []
(letsubs [{:keys [chat-id]} [:bottom-sheet/options]]
[react/view {:flex 1 :flex-direction :row}
[react/view action-button.styles/actions-list
[action-button/action-button
{:label (i18n/label :t/view-profile)
[react/view {:flex 1}
[list-item/list-item
{:theme :action
:title :t/view-profile
:accessibility-label :view-profile-button
:icon :main-icons/profile
:icon-opts {:color colors/blue}
:on-press #(hide-sheet-and-dispatch [:chat.ui/show-profile chat-id])}]
[action-button/action-button
{:label (i18n/label :t/delete-chat)
:label-style {:color colors/red}
[list-item/list-item
{:theme :action-destructive
:title :t/delete-chat
:accessibility-label :delete-chat-button
:icon :main-icons/delete
:icon-opts {:color colors/red}
:cyrcle-color colors/red-light
:on-press #(hide-sheet-and-dispatch [:chat.ui/remove-chat-pressed chat-id])}]]]))
(defview group-chat-actions-view []
(letsubs [{:keys [chat-id]} [:bottom-sheet/options]]
[react/view {:flex 1 :flex-direction :row}
[react/view action-button.styles/actions-list
[action-button/action-button
{:label (i18n/label :t/group-info)
[react/view {:flex 1}
[list-item/list-item
{:theme :action
:title :t/group-info
:accessibility-label :group-info-button
:icon :main-icons/group-chat
:icon-opts {:color colors/blue}
:on-press #(hide-sheet-and-dispatch [:show-group-chat-profile chat-id])}]
[action-button/action-button
{:label (i18n/label :t/delete-and-leave-group)
:label-style {:color colors/red}
[list-item/list-item
{:theme :action-destructive
:title :t/delete-and-leave-group
:accessibility-label :delete-and-leave-group-button
:icon :main-icons/delete
:icon-opts {:color colors/red}
:cyrcle-color colors/red-light
:on-press #(hide-sheet-and-dispatch [:group-chats.ui/remove-chat-pressed chat-id])}]]]))
(def add-new

2
src/status_im/ui/screens/home/views.cljs
View File

@ -13,7 +13,7 @@
[status-im.ui.screens.home.filter.views :as filter.views]
[status-im.utils.platform :as platform]
[status-im.utils.utils :as utils]
[status-im.ui.components.bottom-bar.styles :as tabs.styles]
[status-im.ui.components.tabbar.styles :as tabs.styles]
[status-im.ui.screens.home.views.inner-item :as inner-item]
[status-im.ui.components.common.common :as components.common]
[status-im.ui.components.list-selection :as list-selection]

18
src/status_im/ui/screens/keycard/views.cljs
View File

@ -11,10 +11,8 @@
[status-im.ui.screens.hardwallet.pin.views :as pin.views]
[status-im.utils.core :as utils.core]
[status-im.utils.gfycat.core :as gfy]
[status-im.ui.components.lists.cell.view :as cell]
[status-im.utils.identicon :as identicon]
[status-im.ui.components.action-button.action-button :as action-button]
[status-im.ui.components.action-button.styles :as action-button.styles]))
[status-im.ui.components.list-item.views :as list-item]))
(defn connection-lost []
[react/view {:flex 1
@ -532,16 +530,16 @@
[react/view {:flex 1
:flex-direction :row
:margin-top 18}
[react/view action-button.styles/actions-list
[action-button/action-button
{:label (i18n/label :t/create-new-key)
[react/view {:flex 1}
[list-item/list-item
{:theme :action
:title :t/create-new-key
:icon :main-icons/profile
:icon-opts {:color colors/blue}
:on-press #(re-frame/dispatch [:keycard.login.ui/create-new-key-pressed])}]
[action-button/action-button
{:label (i18n/label :t/add-another-key)
[list-item/list-item
{:theme :action
:title :t/add-another-key
:icon :main-icons/add
:icon-opts {:color colors/blue}
:on-press #(re-frame/dispatch [:keycard.login.ui/add-key-pressed])}]]])
(def more-sheet

28
src/status_im/ui/screens/mobile_network_settings/sheets.cljs
View File

@ -4,8 +4,8 @@
[status-im.ui.screens.mobile-network-settings.sheets-styles :as styles]
[status-im.ui.components.checkbox.view :as checkbox]
[status-im.i18n :as i18n]
[status-im.ui.components.lists.cell.view :as cell]
[re-frame.core :as re-frame]))
[re-frame.core :as re-frame]
[status-im.ui.components.list-item.views :as list-item]))
(defn title [label]
[react/view {:style styles/title}
@ -58,17 +58,17 @@
[react/view {:style styles/container}
[title :mobile-syncing-sheet-title]
[details :mobile-syncing-sheet-details]
[cell/cell
{:title (i18n/label :mobile-network-continue-syncing)
:details (i18n/label :mobile-network-continue-syncing-details)
[list-item/list-item
{:theme :action
:title :t/mobile-network-continue-syncing
:subtitle :t/mobile-network-continue-syncing-details
:icon :main-icons/network
:style styles/network-icon
:on-press #(re-frame/dispatch [:mobile-network/continue-syncing])}]
[cell/cell
{:title (i18n/label :mobile-network-stop-syncing)
:details (i18n/label :mobile-network-stop-syncing-details)
[list-item/list-item
{:theme :action-destructive
:title :t/mobile-network-stop-syncing
:subtitle :t/mobile-network-stop-syncing-details
:icon :main-icons/cancel
:style styles/cancel-icon
:on-press #(re-frame/dispatch [:mobile-network/stop-syncing])}]
[separator]
[react/view {:flex 1
@ -80,11 +80,11 @@
[react/view {:style styles/container}
[title :t/mobile-network-sheet-offline]
[details :t/mobile-network-sheet-offline-details]
[cell/cell
{:title (i18n/label :mobile-network-start-syncing)
:details (i18n/label :mobile-network-continue-syncing-details)
[list-item/list-item
{:theme :action
:title :t/mobile-network-start-syncing
:subtitle :t/mobile-network-continue-syncing-details
:icon :main-icons/network
:style styles/network-icon
:on-press #(re-frame/dispatch [:mobile-network/continue-syncing])}]
[separator]
[go-to-settings]])

26
src/status_im/ui/screens/multiaccounts/recover/views.cljs
View File

@ -11,33 +11,31 @@
[status-im.utils.config :as config]
[status-im.ui.components.common.common :as components.common]
[status-im.utils.security :as security]
[status-im.ui.components.action-button.styles :as action-button.styles]
[status-im.ui.components.action-button.action-button :as action-button]
[status-im.ui.components.colors :as colors]
[status-im.utils.gfycat.core :as gfy]
[status-im.utils.identicon :as identicon]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.screens.intro.views :as intro.views]
[status-im.utils.utils :as utils]
[status-im.constants :as constants]))
[status-im.constants :as constants]
[status-im.ui.components.list-item.views :as list-item]))
(defn bottom-sheet-view []
[react/view {:flex 1 :flex-direction :row}
[react/view action-button.styles/actions-list
[action-button/action-button
{:label (i18n/label :t/enter-seed-phrase)
[react/view {:flex 1}
[list-item/list-item
{:theme :action
:title :t/enter-seed-phrase
:accessibility-label :enter-seed-phrase-button
:icon :main-icons/text
:icon-opts {:color colors/blue}
:on-press #(re-frame/dispatch [::multiaccounts.recover/enter-phrase-pressed])}]
[action-button/action-button
{:label (i18n/label :t/recover-with-keycard)
:label-style (if config/hardwallet-enabled? {} {:color colors/gray})
[list-item/list-item
{:theme :action
:title :t/recover-with-keycard
:disabled? (not config/hardwallet-enabled?)
:accessibility-label :recover-with-keycard-button
:image :keycard-logo-blue
:image-opts {:style {:width 24 :height 24}}
:on-press #(when config/hardwallet-enabled?
(re-frame/dispatch [::hardwallet/recover-with-keycard-pressed]))}]]])
:icon :main-icons/keycard-logo
:on-press #(re-frame/dispatch [::hardwallet/recover-with-keycard-pressed])}]]])
(def bottom-sheet
{:content bottom-sheet-view

8
src/status_im/ui/screens/pairing/views.cljs
View File

@ -4,14 +4,10 @@
[status-im.i18n :as i18n]
[reagent.core :as reagent]
[clojure.string :as string]
[status-im.utils.config :as config]
[status-im.ui.components.bottom-bar.styles :as main-tabs.styles]
[status-im.ui.components.tabbar.styles :as main-tabs.styles]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.screens.home.styles :as home.styles]
[status-im.utils.platform :as utils.platform]
[status-im.utils.gfycat.core :as gfycat]
[status-im.ui.components.button.view :as buttons]
[status-im.ui.components.styles :as components.styles]
[status-im.ui.components.common.common :as components.common]
[status-im.ui.components.checkbox.view :as checkbox.views]
@ -19,9 +15,7 @@
[status-im.ui.components.react :as react]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.toolbar.actions :as toolbar.actions]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.screens.profile.components.views :as profile.components]
[status-im.ui.screens.pairing.styles :as styles]))
(def syncing (reagent/atom false))

31
src/status_im/ui/screens/profile/user/sheet/views.cljs
View File

@ -1,11 +1,9 @@
(ns status-im.ui.screens.profile.user.sheet.views
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.action-button.action-button :as action-button]
[status-im.ui.components.action-button.styles :as action-button.styles]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react]
[status-im.utils.utils :as utils]))
[status-im.utils.utils :as utils]
[status-im.ui.components.list-item.views :as list-item]))
(defn hide-sheet-and-dispatch [event]
(re-frame/dispatch [:bottom-sheet/hide-sheet])
@ -13,19 +11,18 @@
(defn profile-icon-actions [include-remove-action?]
(fn []
[react/view {:flex 1 :flex-direction :row}
[react/view action-button.styles/actions-list
[action-button/action-button
{:label (i18n/label :t/image-source-gallery)
[react/view {:flex 1}
[list-item/list-item
{:theme :action
:title :t/image-source-gallery
:accessibility-label :group-info-button
:icon :main-icons/photo
:icon-opts {:color colors/blue}
:on-press #(hide-sheet-and-dispatch [:my-profile/update-picture])}]
[action-button/action-button
{:label (i18n/label :t/image-source-make-photo)
[list-item/list-item
{:theme :action
:title :t/image-source-make-photo
:accessibility-label :delete-and-leave-group-button
:icon :main-icons/camera
:icon-opts {:color colors/blue}
:on-press (fn []
(hide-sheet-and-dispatch
[:request-permissions
@ -39,11 +36,9 @@
(i18n/label :t/camera-access-error))
50))}]))}]
(when include-remove-action?
[action-button/action-button
{:label (i18n/label :t/image-remove-current)
:label-style {:color colors/red}
[list-item/list-item
{:theme :action-destructive
:title :t/image-remove-current
:accessibility-label :group-info-button
:icon :main-icons/delete
:icon-opts {:color colors/red}
:cyrcle-color colors/red-light
:on-press #(hide-sheet-and-dispatch [:my-profile/remove-current-photo])}])]]))
:on-press #(hide-sheet-and-dispatch [:my-profile/remove-current-photo])}])]))

13
src/status_im/ui/screens/profile/user/views.cljs
View File

@ -6,13 +6,12 @@
[status-im.i18n :as i18n]
[status-im.ethereum.stateofus :as stateofus]
[status-im.multiaccounts.core :as multiaccounts]
[status-im.ui.components.bottom-bar.styles :as tabs.styles]
[status-im.ui.components.button.view :as button]
[status-im.ui.components.tabbar.styles :as tabs.styles]
[status-im.ui.components.button :as button]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.common.common :as components.common]
[status-im.ui.components.copyable-text :as copyable-text]
[status-im.ui.components.large-toolbar :as large-toolbar]
[status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.list-selection :as list-selection]
[status-im.ui.components.list.views :as list.views]
[status-im.ui.components.qr-code-viewer.views :as qr-code-viewer]
@ -62,11 +61,11 @@
:font-family "monospace"}}
address]]
[react/view styles/share-link-button
[button/button-with-icon
;;TODO implement icon support
[button/button
{:on-press #(list-selection/open-share {:message link})
:label (i18n/label :t/share-link)
:icon :main-icons/link
:style {:height 44 :margin-horizontal 0}
:label :t/share-link
;:icon :main-icons/link
:accessibility-label :share-my-contact-code-button}]]]])))
(defn- header [{:keys [public-key photo-path] :as account}]

14
src/status_im/ui/screens/routing/core.cljs
View File

@ -15,9 +15,9 @@
[status-im.ui.screens.routing.profile-stack :as profile-stack]
[status-im.ui.screens.routing.browser-stack :as browser-stack]
[status-im.ui.screens.routing.modals :as modals]
[status-im.ui.components.bottom-bar.core :as bottom-bar]
[status-im.ui.components.tabbar.core :as tabbar]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.bottom-bar.styles :as tabs.styles]
[status-im.ui.components.tabbar.styles :as tabs.styles]
[status-im.react-native.js-dependencies :as js-dependencies]))
(defonce view-id (reagent.core/atom nil))
@ -134,7 +134,7 @@
(when (and (array? routes) (int? idx))
(let [route (aget routes idx)
route-name (keyword (.-routeName route))]
(bottom-bar/minimize-bar route-name)))))}
(tabbar/minimize-bar route-name)))))}
(prepare-config config))))
(defn twopane-navigator [routes config]
@ -154,7 +154,7 @@
(when (and (array? routes) (int? idx))
(let [route (aget routes idx)
route-name (keyword (.-routeName route))]
(bottom-bar/minimize-bar route-name)))))}
(tabbar/minimize-bar route-name)))))}
(prepare-config config))))
(defn switch-navigator [routes config]
@ -205,9 +205,9 @@
(map (partial build-screen navigator))
(into {})))
(defn wrap-bottom-bar
(defn wrap-tabbar
[nav]
[bottom-bar/bottom-bar nav view-id])
[tabbar/tabbar nav view-id])
(defn app-container [navigator]
(.createAppContainer js-dependencies/react-navigation navigator))
@ -232,7 +232,7 @@
(into {}))
{:initialRouteName :chat-stack
:tabBarComponent (reagent.core/reactify-component
wrap-bottom-bar)})}}
wrap-tabbar)})}}
(stack-screens stack-navigator modals/modal-screens))
{:mode :modal
:initialRouteName :tabs

17
src/status_im/ui/screens/signing/sheets.cljs
View File

@ -4,7 +4,7 @@
[re-frame.core :as re-frame]
[status-im.ui.components.text-input.view :as text-input]
[status-im.i18n :as i18n]
[status-im.ui.components.button.view :as button]
[status-im.ui.components.button :as button]
[status-im.ui.components.colors :as colors]))
(views/defview fee-bottom-sheet [fee-display-symbol]
@ -43,9 +43,12 @@
[{:style {:color colors/gray}} fee-display-symbol]]]]
[react/view {:height 1 :background-color colors/gray-lighter}]
[react/view {:margin-horizontal 16 :align-items :center :justify-content :space-between :flex-direction :row :margin-top 6}
[button/secondary-button {:on-press #(re-frame/dispatch [:bottom-sheet/hide-sheet])
:style {:background-color nil}}
(i18n/label :t/cancel)]
[button/secondary-button {:on-press #(re-frame/dispatch [:signing.edit-fee.ui/submit])
:disabled? (or (:error gas-edit) (:error gas-price-edit))}
(i18n/label :t/update)]]]))
[button/button
{:type :secondary
:on-press #(re-frame/dispatch [:bottom-sheet/hide-sheet])
:label :t/cancel}]
[button/button
{:type :secondary
:on-press #(re-frame/dispatch [:signing.edit-fee.ui/submit])
:disabled? (or (:error gas-edit) (:error gas-price-edit))
:label :t/update}]]]))

41
src/status_im/ui/screens/signing/views.cljs
View File

@ -7,7 +7,7 @@
[status-im.ui.components.animation :as anim]
[reagent.core :as reagent]
[status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.button.view :as button]
[status-im.ui.components.button :as button]
[status-im.ui.components.copyable-text :as copyable-text]
[status-im.wallet.utils :as wallet.utils]
[status-im.ui.components.list.views :as list]
@ -153,18 +153,8 @@
(defn- sign-with-keycard-button
[amount-error gas-error]
[button/button {:on-press #(re-frame/dispatch [:signing.ui/sign-with-keycard-pressed])
:text-style {:padding-right 2
:padding-left 16}
:style {:background-color colors/black-light
:padding-top 2
:border-radius 8}
:disabled? (or amount-error gas-error)}
(i18n/label :t/sign-with)
[react/view {:padding-right 16}
[react/image {:source (resources/get-image :keycard-logo)
:style {:width 64
:margin-bottom 7
:height 26}}]]])
:disabled? (or amount-error gas-error)
:label :t/sign-with}])
(defn- signing-phrase-view [phrase]
[react/view {:align-items :center}
@ -186,7 +176,7 @@
(views/letsubs [phrase [:signing/phrase]]
(case type
:password
[react/view {:padding-top 8 :padding-bottom 16}
[react/view {:padding-top 8 :padding-bottom 8}
[signing-phrase-view phrase]
[text-input/text-input-with-label
{:secure-text-entry true
@ -197,13 +187,13 @@
:editable (not in-progress?)
:error error
:container {:margin-top 12 :margin-bottom 12 :margin-horizontal 16}}]
[react/view {:align-items :center :height 44}
[react/view {:align-items :center :height 60}
(if in-progress?
[react/activity-indicator {:animating true
:size :large}]
[button/primary-button {:on-press #(re-frame/dispatch [:signing.ui/sign-is-pressed])
:disabled? (not enabled?)}
(i18n/label :t/transactions-sign)])]]
[button/button {:on-press #(re-frame/dispatch [:signing.ui/sign-is-pressed])
:disabled? (not enabled?)
:label :t/transactions-sign}])]]
:keycard
[keycard-view sign phrase]
[react/view])))
@ -249,8 +239,7 @@
{:type :small
:title :t/send-request-amount
:error amount-error
:accessories
[[acc-text (if amount (str amount) "0")
:accessories [[acc-text (if amount (str amount) "0")
(or display-symbol fee-display-symbol)]]}]
[separator]])
[list-item/list-item
@ -258,18 +247,16 @@
:title :t/network-fee
:error gas-error
:accessories [[acc-text fee fee-display-symbol] :chevron]
:on-press
#(re-frame/dispatch
:on-press #(re-frame/dispatch
[:signing.ui/open-fee-sheet
{:content
(fn [] [sheets/fee-bottom-sheet fee-display-symbol])
{:content (fn [] [sheets/fee-bottom-sheet fee-display-symbol])
:content-height 270}])}]
[react/view {:align-items :center :margin-top 16 :margin-bottom 40}
(if keycard-multiaccount?
[sign-with-keycard-button amount-error gas-error]
[button/primary-button {:on-press #(re-frame/dispatch [:set :signing/sign {:type :password}])
:disabled? (or amount-error gas-error)}
(i18n/label :t/sign-with-password)])]])])))
[button/button {:on-press #(re-frame/dispatch [:set :signing/sign {:type :password}])
:disabled? (or amount-error gas-error)
:label :t/sign-with-password}])]])])))
(defn signing-view [tx window-height]
(let [bottom-anim-value (anim/create-value window-height)

2
src/status_im/ui/screens/wallet/account/views.cljs
View File

@ -8,7 +8,7 @@
[status-im.ui.screens.wallet.accounts.views :as accounts]
[status-im.ui.screens.wallet.accounts.sheets :as sheets]
[reagent.core :as reagent]
[status-im.ui.components.bottom-bar.styles :as tabs.styles]
[status-im.ui.components.tabbar.styles :as tabs.styles]
[status-im.ui.components.list.views :as list]
[status-im.i18n :as i18n]
[status-im.ui.components.icons.vector-icons :as icons]

62
src/status_im/ui/screens/wallet/accounts/sheets.cljs
View File

@ -1,9 +1,7 @@
(ns status-im.ui.screens.wallet.accounts.sheets
(:require [re-frame.core :as re-frame]
[status-im.ui.components.action-button.action-button :as action-button]
[status-im.ui.components.react :as react]
[status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]))
[status-im.ui.components.list-item.views :as list-item]))
(defn hide-sheet-and-dispatch [event]
(re-frame/dispatch [:bottom-sheet/hide-sheet])
@ -12,58 +10,68 @@
(defn accounts-options [seed-backed-up?]
(fn []
[react/view
[action-button/action-button {:label (i18n/label :t/wallet-manage-assets)
[list-item/list-item
{:theme :action
:title :t/wallet-manage-assets
:icon :main-icons/token
:icon-opts {:color :blue}
:accessibility-label :wallet-manage-assets
:on-press #(hide-sheet-and-dispatch [:navigate-to :wallet-settings-assets])}]
[action-button/action-button {:label (i18n/label :t/set-currency)
[list-item/list-item
{:theme :action
:title :t/set-currency
:icon :main-icons/language
:icon-opts {:color :blue}
:accessibility-label :wallet-set-currency
:on-press #(hide-sheet-and-dispatch [:navigate-to :currency-settings])}]
[action-button/action-button {:label (i18n/label :t/view-signing)
[list-item/list-item
{:theme :action
:title :t/view-signing
:icon :main-icons/info
:on-press #(hide-sheet-and-dispatch [:show-popover {:view :signing-phrase}])
:icon-opts {:color :blue}}]
:on-press #(hide-sheet-and-dispatch [:show-popover {:view :signing-phrase}])}]
(when-not seed-backed-up?
[action-button/action-button {:label (i18n/label :t/wallet-backup-recovery-title)
[list-item/list-item
{:theme :action-destructive
:title :t/wallet-backup-recovery-title
:icon :main-icons/security
:icon-opts {:color colors/red}
:label-style {:color colors/red}
:cyrcle-color colors/red-transparent-10
:accessibility-label :wallet-backup-recovery-title
:on-press #(hide-sheet-and-dispatch [:navigate-to :backup-seed])}])]))
(defn send-receive [address]
[react/view
[action-button/action-button {:label (i18n/label :t/wallet-send)
[list-item/list-item
{:theme :action
:title :t/wallet-send
:icon :main-icons/send
:accessibility-label :send-transaction-button
:icon-opts {:color :blue}
:on-press #(hide-sheet-and-dispatch [:navigate-to :wallet-send-transaction address])}]
[action-button/action-button {:label (i18n/label :t/receive)
[list-item/list-item
{:theme :action
:title :t/receive
:icon :main-icons/receive
:accessibility-label :receive-transaction-button
:icon-opts {:color :blue}
:on-press #(hide-sheet-and-dispatch [:show-popover {:view :share-account :address address}])}]])
(defn add-account []
[react/view
[action-button/action-button {:label (i18n/label :t/add-an-account)
[list-item/list-item
{:theme :action
:title :t/add-an-account
:icon :main-icons/add
:icon-opts {:color :blue}
:on-press #(hide-sheet-and-dispatch [:navigate-to :add-new-account])}]
[action-button/action-button-disabled {:label (i18n/label :t/add-a-watch-account)
[list-item/list-item
{:theme :action
:title :t/add-a-watch-account
:icon :main-icons/watch
:icon-opts {:color :blue}
:on-press #(hide-sheet-and-dispatch [:navigate-to])}]])
:disabled? true}]])
(defn account-settings []
[react/view
[action-button/action-button-disabled {:label (i18n/label :t/account-settings)
[list-item/list-item
{:theme :action
:title :t/account-settings
:icon :main-icons/info
:icon-opts {:color :blue}}]
[action-button/action-button-disabled {:label (i18n/label :t/export-account)
:disabled? true}]
[list-item/list-item
{:theme :action
:title :t/export-account
:icon :main-icons/copy
:icon-opts {:color :blue}}]])
:disabled? true}]])

2
src/status_im/ui/screens/wallet/accounts/views.cljs
View File

@ -10,7 +10,7 @@
[status-im.ui.components.chat-icon.screen :as chat-icon]
[status-im.ui.components.list-item.views :as list-item]
[status-im.wallet.utils :as wallet.utils]
[status-im.ui.components.bottom-bar.styles :as tabs.styles]
[status-im.ui.components.tabbar.styles :as tabs.styles]
[reagent.core :as reagent]
[status-im.utils.money :as money]
[re-frame.core :as re-frame]

26
src/status_im/ui/screens/wallet/choose_recipient/views.cljs
View File

@ -2,23 +2,22 @@
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.bottom-buttons.view :as bottom-buttons]
[status-im.ui.components.button.view :as button]
[status-im.ui.components.toolbar :as toolbar]
[status-im.ui.components.camera :as camera]
[status-im.ui.components.react :as react]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.toolbar.actions :as actions]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.toolbar.view :as topbar]
[status-im.ui.screens.wallet.choose-recipient.styles :as styles]
[status-im.utils.platform :as platform]))
(defn- toolbar-view [camera-flashlight]
[toolbar/toolbar
(defn- topbar [camera-flashlight]
[topbar/toolbar
{:transparent? true}
[toolbar/nav-button (actions/back-white actions/default-handler)]
[toolbar/content-title {:color :white}
[topbar/nav-button (actions/back-white actions/default-handler)]
[topbar/content-title {:color :white}
(i18n/label :t/wallet-choose-recipient)]
[toolbar/actions [{:icon (if (= :on camera-flashlight)
[topbar/actions [{:icon (if (= :on camera-flashlight)
:main-icons/flash-active
:main-icons/flash-inactive)
:icon-opts {:color :white}
@ -50,7 +49,7 @@
camera-flashlight [:wallet.send/camera-flashlight]]
[react/view {:style styles/qr-code}
[status-bar/status-bar {:type :transparent}]
[toolbar-view camera-flashlight]
[topbar camera-flashlight]
[react/text {:style (styles/qr-code-text dimensions)
:accessibility-label :scan-qr-code-with-wallet-address-text}
(i18n/label :t/scan-qr-code)]
@ -66,8 +65,9 @@
(reset! read-once? true)
(re-frame/dispatch [:wallet/fill-request-from-url (camera/get-qr-code-data %) :qr]))}]]
[viewfinder dimensions (size dimensions)]]
[bottom-buttons/bottom-button
[button/button {:disabled? false
[toolbar/toolbar
{:center {:type :secondary
:disabled? false
:on-press #(re-frame/dispatch [:navigate-back])
:accessibility-label :cancel-button}
(i18n/label :t/cancel)]]]))
:accessibility-label :cancel-button
:label :t/cancel}}]]))

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

@ -1,12 +1,12 @@
(ns status-im.ui.screens.wallet.collectibles.cryptokitties.views
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.action-button.action-button :as action-button]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react]
[status-im.ui.screens.wallet.collectibles.styles :as styles]
[status-im.ui.screens.wallet.collectibles.views :as collectibles]
[status-im.ui.components.svgimage :as svgimage]))
[status-im.ui.components.svgimage :as svgimage]
[status-im.ui.components.list-item.views :as list-item]))
(defmethod collectibles/render-collectible :CK [_ {:keys [id name bio image_url]}]
[react/view {:style styles/details}
@ -19,10 +19,10 @@
[react/text {:number-of-lines 3
:ellipsize-mode :tail}
bio]]]
[action-button/action-button
{:label (i18n/label :t/view-cryptokitties)
[list-item/list-item
{:theme :action
:title :t/view-cryptokitties
:icon :main-icons/address
:icon-opts {:color colors/blue}
:accessibility-label :open-collectible-button
:on-press #(re-frame/dispatch [:open-collectible-in-browser
(str "https://www.cryptokitties.co/kitty/" id)])}]])

12
src/status_im/ui/screens/wallet/collectibles/cryptostrikers/views.cljs
View File

@ -1,12 +1,10 @@
(ns status-im.ui.screens.wallet.collectibles.cryptostrikers.views
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.action-button.action-button :as action-button]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react]
[status-im.ui.screens.wallet.collectibles.styles :as styles]
[status-im.ui.components.svgimage :as svgimage]
[status-im.ui.screens.wallet.collectibles.views :as collectibles]))
[status-im.ui.screens.wallet.collectibles.views :as collectibles]
[status-im.ui.components.list-item.views :as list-item]))
(defmethod collectibles/render-collectible :STRK [_ {:keys [external_url description name image]}]
[react/view {:style styles/details}
@ -19,9 +17,9 @@
name]
[react/text
description]]]
[action-button/action-button
{:label (i18n/label :t/view-cryptostrikers)
[list-item/list-item
{:theme :action
:title :t/view-cryptostrikers
:icon :main-icons/address
:icon-opts {:color colors/blue}
:accessibility-label :open-collectible-button
:on-press #(re-frame/dispatch [:open-collectible-in-browser external_url])}]])

12
src/status_im/ui/screens/wallet/collectibles/etheremon/views.cljs
View File

@ -1,12 +1,10 @@
(ns status-im.ui.screens.wallet.collectibles.etheremon.views
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.action-button.action-button :as action-button]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react]
[status-im.ui.screens.wallet.collectibles.styles :as styles]
[status-im.ui.components.svgimage :as svgimage]
[status-im.ui.screens.wallet.collectibles.views :as collectibles]))
[status-im.ui.screens.wallet.collectibles.views :as collectibles]
[status-im.ui.components.list-item.views :as list-item]))
(defmethod collectibles/render-collectible :EMONA [_ {:keys [user_defined_name image class_id]}]
[react/view {:style styles/details}
@ -18,10 +16,10 @@
[react/view {:flex 1 :justify-content :center}
[react/text {:style styles/details-name}
user_defined_name]]]
[action-button/action-button
{:label (i18n/label :t/view-etheremon)
[list-item/list-item
{:theme :action
:title :t/view-etheremon
:icon :main-icons/address
:icon-opts {:color colors/blue}
:accessibility-label :open-collectible-button
:on-press #(re-frame/dispatch [:open-collectible-in-browser
(str "https://www.etheremon.com/#/mons/" class_id)])}]])

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

@ -3,10 +3,8 @@
[status-im.ui.components.react :as react]
[status-im.ui.screens.wallet.collectibles.styles :as styles]
[status-im.ui.components.svgimage :as svgimage]
[status-im.ui.components.action-button.action-button :as action-button]
[status-im.ui.components.colors :as colors]
[re-frame.core :as re-frame]
[status-im.i18n :as i18n]))
[status-im.ui.components.list-item.views :as list-item]))
(defmethod collectibles/render-collectible :KDO [_ {:keys [external_url description name image]}]
[react/view {:style styles/details}
@ -19,9 +17,9 @@
name]
[react/text
description]]]
[action-button/action-button
{:label (i18n/label :t/view-gitcoin)
[list-item/list-item
{:theme :action
:title :t/view-gitcoin
:icon :main-icons/address
:icon-opts {:color colors/blue}
:accessibility-label :open-collectible-button
:on-press #(re-frame/dispatch [:open-collectible-in-browser external_url])}]])

12
src/status_im/ui/screens/wallet/collectibles/superrare/views.cljs
View File

@ -1,11 +1,9 @@
(ns status-im.ui.screens.wallet.collectibles.superrare.views
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.action-button.action-button :as action-button]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react]
[status-im.ui.screens.wallet.collectibles.styles :as styles]
[status-im.ui.screens.wallet.collectibles.views :as collectibles]))
[status-im.ui.screens.wallet.collectibles.views :as collectibles]
[status-im.ui.components.list-item.views :as list-item]))
(defmethod collectibles/render-collectible :SUPR [_ {tokenId :tokenId {:keys [description name imageUri]} :metadata}]
[react/view {:style styles/details}
@ -18,10 +16,10 @@
name]
[react/text
description]]]
[action-button/action-button
{:label (i18n/label :t/view-superrare)
[list-item/list-item
{:theme :action
:title :t/view-superrare
:icon :main-icons/address
:icon-opts {:color colors/blue}
:accessibility-label :open-collectible-button
:on-press #(re-frame/dispatch [:open-collectible-in-browser
(str "https://superrare.co/artwork/" name "-" tokenId)])}]])

53
src/status_im/ui/screens/wallet/components/styles.cljs
View File

@ -8,9 +8,6 @@
:margin-top 16
:margin-horizontal 16})
(def cartouche-header
{:color colors/white})
(defn cartouche-content-wrapper [disabled?]
(merge
{:flex-direction :row
@ -20,8 +17,8 @@
:padding-right 8}
(if disabled?
{:border-width 1
:border-color colors/white-transparent-10}
{:background-color colors/white-transparent-10})))
:border-color colors/gray-lighter}
{:background-color colors/gray-lighter})))
(def cartouche-icon-wrapper
{:flex 1
@ -30,10 +27,10 @@
:align-items :center})
(def text-content
{:color colors/white})
{:color colors/black})
(def text-secondary-content
{:color colors/white-transparent})
{:color colors/gray})
(def text
{:margin-right 10})
@ -61,23 +58,10 @@
:font-size 13})
(def network-container
{:padding-horizontal 10
:height 27
:border-radius 100
:border-width 1
:border-color colors/white-transparent-10
:align-items :center
:justify-content :center})
(def asset-container
{:margin-top 8
:height 52
:background-color colors/white-transparent-10
:justify-content :center
:padding-left 14
:padding-vertical 14
:padding-right 8
:border-radius 8})
{:flex-direction :row
:padding-horizontal 13
:padding-vertical 11
:align-items :center})
(def asset-container-read-only
{:margin-top 8
@ -137,7 +121,7 @@
{:color colors/white})
(defn participant [address?]
{:color (if address? :white colors/white-transparent)
{:color (if address? colors/black colors/gray)
:flex-shrink 1})
(def recipient-container
@ -153,11 +137,10 @@
:margin-vertical 16})
(def recipient-address
{:margin-vertical 17
:color colors/white})
{:margin-vertical 17})
(def recipient-no-address
{:color colors/white-transparent})
{:color colors/gray})
(def recent-recipients
{:flex 1
@ -181,3 +164,17 @@
(def button-text
{:color colors/white})
(def network-text
{:flex 1
:color colors/black
:font-size 14
:margin-left 16})
(def network-icon
{:width 40
:height 40
:border-radius (/ 40 2)
:background-color colors/green
:align-items :center
:justify-content :center})

70
src/status_im/ui/screens/wallet/components/views.cljs
View File

@ -7,8 +7,7 @@
[status-im.ethereum.tokens :as tokens]
[status-im.i18n :as i18n]
[status-im.multiaccounts.core :as multiaccounts]
[status-im.ui.components.bottom-buttons.view :as bottom-buttons]
[status-im.ui.components.button.view :as button]
[status-im.ui.components.toolbar :as toolbar]
[status-im.ui.components.chat-icon.screen :as chat-icon]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.icons.vector-icons :as vector-icons]
@ -19,7 +18,7 @@
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.styles :as components.styles]
[status-im.ui.components.toolbar.actions :as actions]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.toolbar.view :as topbar]
[status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.screens.chat.photos :as photos]
[status-im.ui.screens.wallet.choose-recipient.views
@ -29,34 +28,24 @@
[status-im.wallet.utils :as wallet.utils]
[status-im.utils.core :as utils.core]
[status-im.utils.money :as money]
[status-im.utils.utils :as utils.utils]
[status-im.ui.components.chat-icon.screen :as chat-icon.screen])
[status-im.utils.utils :as utils.utils])
(:require-macros [status-im.utils.views :as views]))
;; Wallet tab has a different coloring scheme (dark) that forces color changes (background, text)
;; It might be replaced by some theme mechanism
(defn text-input [props text]
[react/text-input (utils.core/deep-merge {:placeholder-text-color colors/white-transparent
:selection-color colors/white
:style {:color colors/white
[react/text-input (utils.core/deep-merge {:placeholder-text-color colors/gray
:selection-color colors/black
:style {:color colors/black
:height 52}}
props)
text])
(def default-action (actions/back-white actions/default-handler))
(defn toolbar
([title] (toolbar {} title))
([props title] (toolbar props default-action title))
([props action title] (toolbar props action title nil))
([props action title options]
[toolbar/toolbar (assoc-in props [:style :border-bottom-color] colors/white-transparent-10)
[toolbar/nav-button action]
[toolbar/content-title {:color colors/white
:font-weight "700"}
title]
options]))
(defn topbar [title]
[topbar/simple-toolbar title])
(defn- top-view [avoid-keyboard?]
(if avoid-keyboard?
@ -65,9 +54,9 @@
(defn simple-screen
([toolbar content] (simple-screen nil toolbar content))
([{:keys [avoid-keyboard? status-bar-type]} toolbar content]
[(top-view avoid-keyboard?) {:flex 1 :background-color colors/blue}
[status-bar/status-bar {:type (or status-bar-type :wallet)}]
([{:keys [avoid-keyboard?]} toolbar content]
[(top-view avoid-keyboard?) {:flex 1}
[status-bar/status-bar]
toolbar
content]))
@ -78,7 +67,7 @@
(defn cartouche [{:keys [disabled? on-press icon icon-opts] :or {icon :main-icons/next} :as m} header content]
[react/view {:style styles/cartouche-container}
[react/text {:style styles/cartouche-header}
[react/text
header]
(if (or disabled? (nil? on-press))
[cartouche-content m content]
@ -89,7 +78,7 @@
[react/view styles/cartouche-icon-wrapper
[react/view {:flex 1} ;; Let content shrink if needed
content]
[vector-icons/icon icon (merge {:color :white} icon-opts)]]
[vector-icons/icon icon icon-opts]]
content)]]])])
(defn view-asset [symbol]
@ -124,7 +113,7 @@
(views/defview assets [type address]
(views/letsubs [assets [:wallet/transferrable-assets-with-amount address]]
[simple-screen
[toolbar (i18n/label :t/wallet-assets)]
[topbar (i18n/label :t/wallet-assets)]
[react/view {:style (assoc components.styles/flex :background-color :white)}
[list/flat-list {:default-separator? true
:data assets
@ -220,7 +209,7 @@
(views/letsubs [contacts [:contacts/active]
{:keys [request?]} [:get-screen-params :recent-recipients]]
[simple-screen
[toolbar (i18n/label :t/recipient)]
[topbar (i18n/label :t/recipient)]
[react/view styles/recent-recipients
[list/flat-list {:data contacts
:key-fn :address
@ -229,7 +218,7 @@
(views/defview accounts []
(views/letsubs [{:keys [accounts]} [:multiaccount]]
[simple-screen
[toolbar (i18n/label :t/accounts)]
[topbar (i18n/label :t/accounts)]
[react/view styles/recent-recipients
[list/flat-list {:data accounts
:key-fn :address
@ -241,9 +230,7 @@
(views/defview contact-code []
(views/letsubs [content (reagent/atom nil)]
[simple-screen {:avoid-keyboard? true}
[toolbar {:style {:border-bottom-color colors/white-transparent-10}}
default-action
(i18n/label :t/recipient)]
[topbar (i18n/label :t/recipient)]
[react/view components.styles/flex
[cartouche {}
(i18n/label :t/recipient)
@ -253,11 +240,10 @@
:placeholder (i18n/label :t/recipient-code)
:on-change-text #(reset! content %)
:accessibility-label :recipient-address-input}]]
[bottom-buttons/bottom-button
[button/button {:disabled? (string/blank? @content)
[toolbar/toolbar {:center {:type :secondary
:disabled? (string/blank? @content)
:on-press #(re-frame/dispatch [:wallet.send/set-recipient @content])
:fit-to-text? false}
(i18n/label :t/done)]]]]))
:label :t/done}}]]]))
(defn recipient-qr-code []
[choose-recipient/choose-recipient])
@ -332,3 +318,19 @@
(defn button-text [label]
[react/text {:style styles/button-text}
label])
(views/defview network-info []
(views/letsubs [network-id [:chain-id]]
[react/view
[react/view styles/network-container
[react/view styles/network-icon
[vector-icons/icon :main-icons/network {:color :white}]]
[react/text
(cond (ethereum/testnet? network-id)
(i18n/label :t/testnet-text {:testnet (get-in ethereum/chains [(ethereum/chain-id->chain-keyword network-id) :name] "Unknown")})
(ethereum/sidechain? network-id)
(i18n/label :t/sidechain-text {:sidechain (get-in ethereum/chains [(ethereum/chain-id->chain-keyword network-id) :name] "Unknown")})
:else
(i18n/label :t/mainnet-text))]]]))

11
src/status_im/ui/screens/wallet/custom_tokens/views.cljs
View File

@ -8,9 +8,8 @@
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.components.common.common :as components.common]
[clojure.string :as string]
[status-im.wallet.utils :as wallet.utils]
[status-im.i18n :as i18n]
[status-im.ui.components.action-button.action-button :as action-button]))
[status-im.ui.components.list-item.views :as list-item]))
(def debounce-timers (atom {}))
@ -141,10 +140,8 @@
:editable false}]]]]
[react/view {:height 24}]
(when custom?
[action-button/action-button
{:label (i18n/label :t/remove-token)
[list-item/list-item
{:theme :action-destructive
:title :t/remove-token
:icon :main-icons/delete
:icon-opts {:color colors/red}
:label-style {:color colors/red}
:cyrcle-color colors/red-transparent-10
:on-press #(re-frame/dispatch [:wallet.custom-token.ui/remove-pressed token true])}])]]))

24
src/status_im/ui/screens/wallet/request/views.cljs
View File

@ -4,10 +4,6 @@
[status-im.ethereum.eip681 :as eip681]
[status-im.ethereum.tokens :as tokens]
[status-im.i18n :as i18n]
[status-im.ui.components.bottom-buttons.view :as bottom-buttons]
[status-im.ui.components.button.view :as button]
[status-im.ui.components.common.common :as common]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.qr-code-viewer.views :as qr-code-viewer]
[status-im.ui.components.react :as react]
[status-im.ui.components.styles :as components.styles]
@ -17,9 +13,11 @@
[status-im.utils.utils :as utils]
[status-im.ui.components.colors :as colors]
[reagent.core :as reagent]
[status-im.ui.components.common.common :as components.common])
[status-im.ui.components.common.common :as components.common]
[status-im.ui.components.toolbar :as toolbar])
(:require-macros [status-im.utils.views :as views]))
;;TODO DEPRECATED
(views/defview send-transaction-request []
;; TODO(jeluard) both send and request flows should be merged
(views/letsubs [chain [:ethereum/chain-keyword]
@ -30,9 +28,9 @@
scroll (atom nil)]
(let [{:keys [decimals] :as token} (tokens/asset-for all-tokens chain symbol)]
[wallet.components/simple-screen {:avoid-keyboard? true}
[wallet.components/toolbar (i18n/label :t/new-request)]
[wallet.components/topbar (i18n/label :t/new-request)]
[react/view components.styles/flex
[common/network-info {:text-color :white}]
[wallet.components/network-info]
[react/scroll-view {:ref #(reset! scroll %) :keyboardShouldPersistTaps :always}
[react/view styles/request-details-wrapper
[wallet.components/recipient-selector
@ -52,15 +50,13 @@
:input-options {:on-focus (fn [] (when @scroll (utils/set-timeout #(.scrollToEnd @scroll) 100)))
:on-change-text #(re-frame/dispatch [:wallet.request/set-and-validate-amount % symbol decimals])}}
token]]]
[bottom-buttons/bottom-buttons styles/bottom-buttons
nil ;; Force a phantom button to ensure consistency with other transaction screens which define 2 buttons
[button/button {:disabled? (or amount-error (not (and to amount)))
[toolbar/toolbar
{:right {:type :next
:disabled? (or amount-error (not (and to amount)))
:on-press #(re-frame/dispatch [:wallet-send-request public-key amount
(wallet.utils/display-symbol token) decimals])
:text-style {:padding-horizontal 0}
:accessibility-label :sent-request-button}
(i18n/label :t/send-request)
[vector-icons/icon :main-icons/next {:color :white}]]]]])))
:accessibility-label :sent-request-button
:label :t/send-request}}]]])))
(views/defview share-address []
(views/letsubs [{:keys [address]} [:popover/popover]

39
src/status_im/ui/screens/wallet/send/views.cljs
View File

@ -2,48 +2,31 @@
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [re-frame.core :as re-frame]
[reagent.core :as reagent]
[status-im.ethereum.tokens :as tokens]
[status-im.i18n :as i18n]
[status-im.ui.components.bottom-buttons.view :as bottom-buttons]
[status-im.ui.components.button.view :as button]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.common.common :as common]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.react :as react]
[status-im.ui.components.styles :as components.styles]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.toolbar.view :as topbar]
[status-im.ui.components.toolbar :as toolbar]
[status-im.ui.screens.wallet.components.views :as wallet.components]
[status-im.ui.screens.wallet.send.styles :as styles]
[status-im.ui.components.toolbar.actions :as actions]))
(defn- toolbar [title]
[toolbar/toolbar {:transparent? true}
[toolbar/nav-button (actions/back-white #(actions/default-handler))]
[toolbar/content-title {:color :white} title]])
[status-im.ui.screens.wallet.send.styles :as styles]))
(defn- sign-transaction-button [sign-enabled?]
[bottom-buttons/bottom-buttons
styles/sign-buttons
[react/view]
[button/button {:style components.styles/flex
[toolbar/toolbar
{:right {:type :next
:disabled? (not sign-enabled?)
:on-press #(re-frame/dispatch [:wallet.ui/sign-transaction-button-clicked])
:text-style {:color :white}
:accessibility-label :sign-transaction-button}
(i18n/label :t/transactions-sign-transaction)
[vector-icons/icon :main-icons/next {:color (if sign-enabled?
colors/white
colors/white-transparent-10)}]]])
:accessibility-label :sign-transaction-button
:label :t/transactions-sign-transaction}}])
;;TODO DEPRECATED
(defn- render-send-transaction-view
[{:keys [transaction scroll amount-input]}]
(let [{:keys [from amount amount-text amount-error token sign-enabled?
asset-error to to-name symbol]} transaction]
[wallet.components/simple-screen {:avoid-keyboard? true
:status-bar-type :wallet}
[toolbar (i18n/label :t/send-transaction)]
[wallet.components/simple-screen {:avoid-keyboard? true}
[topbar/simple-toolbar (i18n/label :t/send-transaction)]
[react/view components.styles/flex
[common/network-info {:text-color :white}]
[wallet.components/network-info]
[react/scroll-view {:keyboard-should-persist-taps :always
:ref #(reset! scroll %)
:on-content-size-change #(when (and scroll @scroll)

25
src/status_im/ui/screens/wallet/settings/views.cljs
View File

@ -1,18 +1,16 @@
(ns status-im.ui.screens.wallet.settings.views
(:require [re-frame.core :as re-frame]
[status-im.ethereum.core :as ethereum]
[status-im.ethereum.tokens :as tokens]
[status-im.i18n :as i18n]
[status-im.ui.components.action-button.action-button :as action-button]
[status-im.ui.components.chat-icon.screen :as chat-icon]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.list-header.views :as list-header]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.styles :as components.styles]
[status-im.ui.components.toolbar.actions :as actions]
[status-im.ui.components.toolbar.view :as toolbar])
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.list-item.views :as list-item])
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
(defn toolbar []
@ -30,16 +28,16 @@
(defn custom-token-actions-view [{:keys [custom?] :as token}]
(fn []
[react/view
[action-button/action-button {:label (i18n/label :t/token-details)
[list-item/list-item
{:theme :action
:title :t/token-details
:icon :main-icons/warning
:icon-opts {:color :blue}
:on-press #(hide-sheet-and-dispatch [:navigate-to :wallet-custom-token-details token])}]
(when custom?
[action-button/action-button {:label (i18n/label :t/remove-token)
[list-item/list-item
{:theme :action-destructive
:title :t/remove-token
:icon :main-icons/delete
:icon-opts {:color colors/red}
:label-style {:color colors/red}
:cyrcle-color colors/red-transparent-10
:on-press #(hide-sheet-and-dispatch [:wallet.custom-token.ui/remove-pressed token])}])]))
(defn- render-token [{:keys [symbol name icon color custom? checked?] :as token}]
@ -64,9 +62,10 @@
[react/view {:style components.styles/flex}
[list/section-list
{:header [react/view {:margin-top 16}
[action-button/action-button {:label (i18n/label :t/add-custom-token)
[list-item/list-item
{:theme :action
:title :t/add-custom-token
:icon :main-icons/add
:icon-opts {:color :blue}
:on-press #(re-frame/dispatch [:navigate-to :wallet-add-custom-token])}]]
:sections (concat
(when (seq custom-tokens)
@ -77,7 +76,7 @@
:key-fn :address
:stickySectionHeadersEnabled false
:render-section-header-fn (fn [{:keys [title data]}]
[list-header/list-header title])
[list-item/list-item {:type :section-header :title title}])
:render-fn render-token}]]]))
(defn- create-payload [address]

2
src/status_im/ui/screens/wallet/transactions/styles.cljs
View File

@ -1,7 +1,7 @@
(ns status-im.ui.screens.wallet.transactions.styles
(:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
(:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.bottom-bar.styles :as tabs.styles]))
[status-im.ui.components.tabbar.styles :as tabs.styles]))
(defnstyle tab [active?]
{:flex 1

23
src/status_im/utils/label.cljs Normal file
View File

@ -0,0 +1,23 @@
(ns status-im.utils.label
(:require [status-im.i18n :as i18n]))
(defn stringify [keyword-or-number]
(cond
(string? keyword-or-number)
keyword-or-number
(and (qualified-keyword? keyword-or-number)
(= "t" (namespace keyword-or-number)))
(i18n/label keyword-or-number)
(and (qualified-keyword? keyword-or-number)
(not= "t" (namespace keyword-or-number)))
(str (namespace keyword-or-number) "/" (name keyword-or-number))
(simple-keyword? keyword-or-number)
(name keyword-or-number)
(number? keyword-or-number)
(str keyword-or-number)
:else nil))