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

Initial Commit for first send screen: 

- Update toolbar text
- Add frame for camera/qr
- Add button for choose contacts
- Add button for address from clipboard
- Add button for browse photos

Set recipient from clipboard.

Added functionality and event handling necessary to set recipient
from clipboard.

Add choose-recipient event to assoc into the database

Add QR code scanning to first screen

Add vector icons for copy and select image

Fix svg

Fix rebase, localize labels

Add checkmark icon (this is a placeholder, current svg won't render)

Remove leak from develop

Vertical alignment fixes

Vertically align maps in view

Address review comments

Fix rebase reference problems/styling issues

Small style tweaks, fix icon

Fix small design issues

Indentation fixes

Address review points

Fix indentation

Prevent permissions request on ios

On ios, a permissions request results in a null reference error,
do a platform check before performing a permissions request.

Fix compile error

Restyle for ios, colours, layout

Update icons on ios

Restyle disabled button

Browse photos button disabled

Add viewfinder and platform specific styling.

Viewfinder and style changes

Add some torch functionality, fix toolbar, style issues

Refactor view style, add translucent bits to viewfinder

Address pull request feedback

Replace a style by defstyle
This commit is contained in:
angusiguess 2017-09-06 16:55:49 -04:00 committed by Roman Volosovskyi
parent 3b4d140ef6
commit 498f641c8a
7 changed files with 167 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/status_im/components/camera.cljs
View File

@ -13,6 +13,10 @@
(def aspects (constants "Aspect"))
(def capture-targets (constants "CaptureTarget"))
(def torch-modes (constants "TorchMode"))
(defn set-torch [state]
(set! (.-torchMode default-camera) state))
(defn request-access [callback]
(if platform/android?

1
src/status_im/components/styles.cljs
View File

@ -7,6 +7,7 @@
(def color-blue4 "#4360df")
(def color-blue4-transparent "rgba(67, 96, 223, 0.10)")
(def color-blue5 "#3c56c8")
(def color-blue6 "#3745AF")
(def color-blue-transparent "#7099e632")
(def color-black "#000000")
(def color-purple "#a187d5")

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

@ -97,7 +97,7 @@
([title] (toolbar2 nil title))
([props title] (toolbar2 props default-nav-back [content-title title]))
([props nav-item content-item] (toolbar2 props nav-item content-item [actions [{:image :blank}]]))
([{:keys [background-color style flat?]}
([{:keys [background-color style flat? no-sync-bar?]}
nav-item
content-item
action-items]
@ -108,7 +108,7 @@
nav-item])
content-item
action-items]
[sync-state-gradient-view/sync-state-gradient-view]]))
(when-not no-sync-bar? [sync-state-gradient-view/sync-state-gradient-view])]))
(defn toolbar
"DEPRECATED

72
src/status_im/translations/en.cljs
View File

@ -3,50 +3,50 @@
(def translations
{
;;common
:members-title "Members"
:not-implemented "!not implemented"
:chat-name "Chat name"
:notifications-title "Notifications and sounds"
:offline "Offline"
:search-for "Search for..."
:cancel "Cancel"
:next "Next"
:type-a-message "Type a message..."
:type-a-command "Start typing a command..."
:error "Error"
:unknown-status-go-error "Unknown status-go error"
:node-unavailable "No ethereum node running"
:members-title "Members"
:not-implemented "!not implemented"
:chat-name "Chat name"
:notifications-title "Notifications and sounds"
:offline "Offline"
:search-for "Search for..."
:cancel "Cancel"
:next "Next"
:type-a-message "Type a message..."
:type-a-command "Start typing a command..."
:error "Error"
:unknown-status-go-error "Unknown status-go error"
:node-unavailable "No ethereum node running"
:camera-access-error "To grant the required camera permission, please, go to your system settings and make sure that Status > Camera is selected."
:photos-access-error "To grant the required photos permission, please, go to your system settings and make sure that Status > Photos is selected."
:camera-access-error "To grant the required camera permission, please, go to your system settings and make sure that Status > Camera is selected."
:photos-access-error "To grant the required photos permission, please, go to your system settings and make sure that Status > Photos is selected."
;;drawer
:invite-friends "Invite friends"
:faq "FAQ"
:switch-users "Switch users"
:feedback "Got feedback?\nShake your phone!"
:view-all "View all"
:current-network "Current network"
:invite-friends "Invite friends"
:faq "FAQ"
:switch-users "Switch users"
:feedback "Got feedback?\nShake your phone!"
:view-all "View all"
:current-network "Current network"
;;chat
:is-typing "is typing"
:and-you "and you"
:search-chat "Search chat"
:members {:one "1 member"
:is-typing "is typing"
:and-you "and you"
:search-chat "Search chat"
:members {:one "1 member"
:other "{{count}} members"
:zero "no members"}
:members-active {:one "1 member"
:members-active {:one "1 member"
:other "{{count}} members"
:zero "no members"}
:public-group-status "Public"
:active-online "Online"
:active-unknown "Unknown"
:available "Available"
:no-messages "No messages"
:suggestions-requests "Requests"
:suggestions-commands "Commands"
:faucet-success "Faucet request has been received"
:faucet-error "Faucet request error"
:public-group-status "Public"
:active-online "Online"
:active-unknown "Unknown"
:available "Available"
:no-messages "No messages"
:suggestions-requests "Requests"
:suggestions-commands "Commands"
:faucet-success "Faucet request has been received"
:faucet-error "Faucet request error"
;;sync
:sync-in-progress "Syncing..."
@ -375,7 +375,7 @@
:transactions-filter-type "Type"
:transactions-filter-select-all "Select all"
;; Wallet Send
:wallet-send-transaction "Send Transaction"
:wallet-send-transaction "Send a Transaction"
:wallet-send-step-one "Step 1 of 3"
:wallet-choose-recipient "Choose Recipient"
:wallet-choose-from-contacts "Choose From Contacts"

2
src/status_im/ui/screens/qr_scanner/styles.cljs
View File

@ -74,4 +74,4 @@
{:flex 1
:flexDirection :column
:color color-white
:margin-left 8})
:margin-left 8})

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

@ -1,17 +1,18 @@
(ns status-im.ui.screens.wallet.send.styles
(:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
(:require [status-im.components.styles :as styles]))
(:require [status-im.components.styles :as styles]
[status-im.utils.platform :as platform]))
(def wallet-container
{:flex 1
:background-color styles/color-blue2})
:background-color styles/color-blue4})
(def wallet-modal-container
{:flex 1
:background-color styles/color-blue4})
:background-color styles/color-blue3})
(def toolbar
{:background-color styles/color-blue5
{:background-color styles/color-blue4
:elevation 0
:padding-bottom 10})
@ -48,15 +49,18 @@
(def choose-recipient-label
{:color :white})
(def recipient-buttons
(defstyle recipient-buttons
{:flex-direction :column
:margin-horizontal 28
:margin-vertical 10
:border-radius 5
:background-color styles/color-blue5})
:margin-vertical 20
:border-radius 8
:ios {:background-color styles/color-blue6}})
(def recipient-icon {:margin-right 20})
(def recipient-icon-disabled {:margin-right 20
:opacity 0.3})
(def recipient-button
{:flex-direction :row
:justify-content :space-between
@ -64,38 +68,84 @@
:margin-left 20})
(def recipient-button-text
{:color :white
:font-size 17})
{:color :white
:align-self :center
:font-size 14})
(defn recipient-touchable [divider?]
(cond-> {:border-color styles/color-gray-transparent-medium-light}
divider? (assoc :border-bottom-width 1)))
(def recipient-button-text-disabled
(merge recipient-button-text {:color "rgba(255, 255, 255, 0.3)"}))
(defnstyle recipient-touchable [divider?]
(cond-> {:border-color styles/color-gray-transparent-light}
divider? (assoc :ios {:border-bottom-width 1})))
(def recipient-touchable-disabled
{:background-color styles/color-blue4
:border-bottom-left-radius 8
:border-bottom-right-radius 8
:border-left-width 1
:border-bottom-width 1
:border-right-width 1
:border-color "rgba(255, 255, 255, 0.3)"})
(def qr-container
{:flex 1
:margin-horizontal 32})
{:flex 1})
(def preview
{:flex 1
:justify-content :flex-end
:align-items :center})
(defn outer-bezel [{:keys [height width]}]
{:position :absolute
:top -10
:left -10
:border-radius 20
:border-color styles/color-blue2
:border-width 20
:height (+ height 20)
:width (+ width 20)})
(def corner-dimensions
{:position :absolute
:width 40
:height 40})
(defn inner-bezel [{:keys [height width]}]
{:top 5
:left 5
:position :absolute
:border-radius 20
:border-color :white
:border-width 5
:height (- height 10)
:width (- width 10)})
(defn corner-left-bottom [dimension]
(let [viewport-offset 0.1666]
(merge corner-dimensions {:bottom (* viewport-offset dimension)
:left (* viewport-offset dimension)})))
(defn corner-right-bottom [dimension]
(let [viewport-offset 0.1666]
(merge corner-dimensions {:right (* viewport-offset dimension)
:bottom (* viewport-offset dimension)})))
(defn corner-left-top [dimension]
(let [viewport-offset 0.1666]
(merge corner-dimensions {:top (* viewport-offset dimension)
:left (* viewport-offset dimension)})))
(defn corner-right-top [dimension]
(let [viewport-offset 0.1666]
(merge corner-dimensions {:top (* viewport-offset dimension)
:right (* viewport-offset dimension)})))
(def viewfinder-port {:position :absolute
:left 0
:top 0
:bottom 0
:right 0
:flex 1})
(defn viewfinder-translucent [height width side]
(let [viewport-offset 0.1666
height-offset (* viewport-offset height)
width-offset (* viewport-offset width)]
(cond-> {:position :absolute
:background-color :black
:opacity 0.7}
(= :top side) (assoc :height height-offset
:width width)
(= :right side) (assoc :height (- height height-offset)
:width width-offset
:bottom 0
:right 0)
(= :bottom side) (assoc :height height-offset
:width (- width width-offset)
:bottom 0
:left 0)
(= :left side) (assoc :height (- height (* 2 height-offset))
:width width-offset
:top height-offset
:left 0))))

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

@ -19,13 +19,13 @@
(utils/show-popup "TODO" "Not implemented yet!"))
(defn toolbar-view []
[toolbar/toolbar2 {:style send.styles/toolbar}
[toolbar/toolbar2 {:style send.styles/toolbar
:no-sync-bar? true}
[toolbar/nav-button (act/close-white act/default-handler)]
[toolbar/content-title {:color :white} (i18n/label :t/wallet-send-transaction)
{:color styles/color-light-blue} (i18n/label :t/wallet-send-step-one)]
[toolbar/content-title {:color :white} (i18n/label :t/wallet-choose-recipient)]
[toolbar/actions [{:icon :icons/flash-active
:icon-opts {:color :white}
:handler show-not-implemented!}]]])
:handler show-not-implemented!}]]])
(defn recipient-buttons []
[react/view {:style send.styles/recipient-buttons}
@ -33,9 +33,9 @@
[react/view {:style send.styles/recipient-button}
[react/text {:style send.styles/recipient-button-text}
(i18n/label :t/wallet-choose-from-contacts)]
[vector-icons/icon :icons/contacts {:color :white
:container-style send.styles/recipient-icon}]]]
[react/touchable-highlight {:style (send.styles/recipient-touchable true)
[vector-icons/icon :icons/qr {:color :white
:container-style send.styles/recipient-icon}]]]
[react/touchable-highlight {:style (send.styles/recipient-touchable true)
:on-press #(react/get-from-clipboard
(fn [clipboard]
(re-frame/dispatch [:choose-recipient clipboard])))}
@ -44,33 +44,46 @@
(i18n/label :t/wallet-address-from-clipboard)]
[vector-icons/icon :icons/copy-from {:color :white
:container-style send.styles/recipient-icon}]]]
[react/touchable-highlight {:style (send.styles/recipient-touchable false)}
[react/touchable-highlight {:style send.styles/recipient-touchable-disabled}
[react/view {:style send.styles/recipient-button}
[react/text {:style send.styles/recipient-button-text}
[react/text {:style send.styles/recipient-button-text-disabled}
(i18n/label :t/wallet-browse-photos)]
[vector-icons/icon :icons/browse {:color :white
:container-style send.styles/recipient-icon}]]]])
:container-style send.styles/recipient-icon-disabled}]]]])
(defn viewfinder [{:keys [height width]}]
(let [min-dimension (min height width)]
[react/view {:style send.styles/viewfinder-port}
[react/view {:style (send.styles/viewfinder-translucent height width :top)}]
[react/view {:style (send.styles/viewfinder-translucent height width :right)}]
[react/view {:style (send.styles/viewfinder-translucent height width :bottom)}]
[react/view {:style (send.styles/viewfinder-translucent height width :left)}]
[react/image {:source {:uri :corner_left_top}
:style (send.styles/corner-left-top min-dimension)}]
[react/image {:source {:uri :corner_right_top}
:style (send.styles/corner-right-top min-dimension)}]
[react/image {:source {:uri :corner_left_bottom}
:style (send.styles/corner-left-bottom min-dimension)}]
[react/image {:source {:uri :corner_right_bottom}
:style (send.styles/corner-right-bottom min-dimension)}]]))
(defview send-transaction []
(letsubs [camera-dimensions [:camera-dimensions]]
[react/view {:style send.styles/wallet-container}
[status-bar/status-bar {:type :wallet}]
[toolbar-view]
[react/view {:style send.styles/choose-recipient-container}
[react/text {:style send.styles/choose-recipient-label} (i18n/label :t/wallet-choose-recipient)]]
[react/view {:style send.styles/qr-container
:on-layout #(let [layout (.. % -nativeEvent -layout)]
(re-frame/dispatch [:set-in [:wallet :camera-dimensions]
{:width (.-width layout)
:height (.-height layout)}]))}
[camera/camera {:style send.styles/preview
:aspect :fill
:captureAudio false
:onBarCodeRead (fn [code]
(let [data (-> code
.-data
(str/replace #"ethereum:" ""))]
(re-frame/dispatch [:choose-recipient data])))}]
[react/view {:style (send.styles/outer-bezel camera-dimensions)}]
[react/view {:style (send.styles/inner-bezel camera-dimensions)}]]
[react/view {:style send.styles/qr-container
:on-layout #(let [layout (.. % -nativeEvent -layout)]
(re-frame/dispatch [:set-in [:wallet :camera-dimensions]
{:width (.-width layout)
:height (.-height layout)}]))}
[camera/camera {:style send.styles/preview
:aspect :fill
:captureAudio false
:onBarCodeRead (fn [code]
(let [data (-> code
.-data
(str/replace #"ethereum:" ""))]
(re-frame/dispatch [:choose-recipient data])))}]
[viewfinder camera-dimensions]]
[recipient-buttons]]))