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

Navigation drawer fixes (#294), status length limit (#324) 

Former-commit-id: e9f5e9d060
This commit is contained in:
Alexander Pantyuhov 2016-10-04 12:45:10 +03:00
parent 06332ab8fb
commit 8801b1a4a5
6 changed files with 190 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/status_im/components/drawer/styles.cljs
View File

@ -9,7 +9,8 @@
separator-color
text1-color
text2-color
text3-color]]))
text3-color
color-red]]))
(def drawer-menu
{:flex 1
@ -27,14 +28,38 @@
:height 64})
(def name-container
{:margin-top 20
{:margin-top -16
:margin-bottom -16
:margin-left 16
:margin-right 16})
(def name-input-wrapper
{})
(defn name-input-text [valid?]
{:color (if valid? text1-color
color-red)
:text-align :center})
(def status-container
{:margin-left 16
:margin-right 16
:margin-top 4
:align-items :center})
(def status-input
{:align-self "stretch"
:height 56
:font-size 14
:padding-left 4
:line-height 20
:text-align :center
:text-align-vertical :top
:color text2-color})
(def menu-items-container
{:flex 1
:margin-top 50
:margin-top 20
:align-items :stretch
:flex-direction :column})

63
src/status_im/components/drawer/view.cljs
View File

@ -1,17 +1,23 @@
(ns status-im.components.drawer.view
(:require-macros [status-im.utils.views :refer [defview]])
(:require [clojure.string :as s]
(:require [reagent.core :as r]
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
[reagent.core :as r]
[status-im.components.react :refer [react-native
view
[clojure.string :as str]
[cljs.spec :as s]
[status-im.components.react :refer [view
text
text-input
image
drawer-layout
touchable-without-feedback
touchable-opacity]]
[status-im.resources :as res]
[status-im.components.text-field.view :refer [text-field]]
[status-im.components.drawer.styles :as st]
[status-im.i18n :refer [label]]))
[status-im.profile.validations :as v]
[status-im.profile.handlers :refer [update-profile]]
[status-im.resources :as res]
[status-im.i18n :refer [label]]
[status-im.components.react :refer [dismiss-keyboard!]]))
(defonce drawer-atom (atom))
@ -22,7 +28,7 @@
(.closeDrawer @drawer-atom))
(defn user-photo [{:keys [photo-path]}]
[image {:source (if (s/blank? photo-path)
[image {:source (if (str/blank? photo-path)
res/user-no-photo
{:uri photo-path})
:style st/user-photo}])
@ -37,17 +43,38 @@
name]])
(defview drawer-menu []
[{:keys [name address photo-path]} [:get-current-account]]
[{:keys [name address photo-path status] :as account} [:get-current-account]
{new-name :name :as profile-edit-data} [:get :profile-edit]
keyboard-height [:get :keyboard-height]]
[view st/drawer-menu
[touchable-without-feedback {:on-press #(dismiss-keyboard!)}
[view st/drawer-menu
[touchable-opacity {:on-press #(dispatch [:navigate-to :my-profile])}
[view st/user-photo-container
[user-photo {:photo-path photo-path}]]
[user-photo {:photo-path photo-path}]]]
[view st/name-container
[text {:style st/name-text
:number-of-lines 1
:font :default}
(if (= name address)
(label :t/user-anonymous)
name)]]
[text-field
{:line-color :white
:focus-line-color :white
:placeholder (label :t/user-anonymous)
:editable true
:input-style (st/name-input-text (s/valid? ::v/name (or new-name name)))
:wrapper-style st/name-input-wrapper
:value (if (not= name address)
name)
:on-change-text #(dispatch [:set-in [:profile-edit :name] %])
:on-end-editing #(update-profile account profile-edit-data)}]]
[view st/status-container
[text-input {:style st/status-input
:editable true
:multiline true
:blur-on-submit true
:maxLength 140
:accessibility-label :input
:placeholder (label :t/profile-no-status)
:on-change-text #(dispatch [:set-in [:profile-edit :status] %])
:on-blur #(update-profile account profile-edit-data)
:default-value status}]]
[view st/menu-items-container
[menu-item {:name (label :t/profile)
:handler #(dispatch [:navigate-to :my-profile])}]
@ -65,6 +92,7 @@
)}]
[menu-item {:name (label :t/faq)
:handler (fn [])}]]
(when (= keyboard-height 0)
[view st/switch-users-container
[touchable-opacity {:onPress (fn []
(close-drawer)
@ -73,11 +101,12 @@
)}
[text {:style st/switch-users-text
:font :default}
(label :t/switch-users)]]]])
(label :t/switch-users)]]])]]])
(defn drawer-view [items]
[drawer-layout {:drawerWidth 260
:render-navigation-view #(r/as-element [drawer-menu])
:renderNavigationView #(r/as-element [drawer-menu])
:onDrawerSlide dismiss-keyboard!
:ref (fn [drawer]
(reset! drawer-atom drawer))}
items])

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

@ -8,11 +8,10 @@
(def color-gray "#838c93de")
(def color-gray2 "#8f838c93")
(def color-gray3 "#00000040")
(def color-white :white)
(def color-light-blue "#bbc4cb")
(def color-white "white")
(def color-light-blue-transparent "#bbc4cb32")
(def color-dark-mint "#5fc48d")
(def color-light-gray "#EEF2F5")
(def color-red "red")
(def text1-color color-black)
(def text1-disabled-color "#555555")

10
src/status_im/components/text_field/view.cljs
View File

@ -144,10 +144,10 @@
label-font-size
line-width
current-value
max-line-width] :as state} (r/state component)
max-line-width]} (r/state component)
{:keys [wrapper-style input-style label-hidden? line-color focus-line-color secure-text-entry
label-color error-color error label value on-focus on-blur
on-change-text on-change editable] :as props} (merge default-props (r/props component))
on-change-text on-change on-end-editing editable placeholder]} (merge default-props (r/props component))
line-color (if error error-color line-color)
focus-line-color (if error error-color focus-line-color)
label-color (if (and error (not float-label?)) error-color label-color)
@ -157,7 +157,7 @@
(when-not label-hidden?
[animated-text {:style (st/label label-top label-font-size label-color)} label])
[text-input {:style (merge st/text-input input-style)
:placeholder ""
:placeholder (or placeholder "")
:editable editable
:secure-text-entry secure-text-entry
:on-focus #(on-input-focus {:component component
@ -181,7 +181,9 @@
(r/set-state component {:current-value text})
(on-change-text text))
:on-change #(on-change %)
:default-value value}]
:default-value value
:on-end-editing (when on-end-editing
on-end-editing)}]
[view {:style (st/underline-container line-color)
:onLayout #(r/set-state component {:max-line-width (get-width %)})}
[animated-view {:style (st/underline focus-line-color line-width)}]]

10
src/status_im/profile/handlers.cljs
View File

@ -6,7 +6,9 @@
[status-im.i18n :refer [label]]
[status-im.utils.handlers :as u :refer [get-hashtags]]
[status-im.utils.platform :refer [ios?]]
[clojure.string :as str]))
[clojure.string :as str]
[status-im.profile.validations :as v]
[cljs.spec :as s]))
(defn message-user [identity]
(when identity
@ -20,7 +22,11 @@
new-email :email
new-status :status
new-photo-path :photo-path}]
(let [new-name (if (or (not new-name) (str/blank? new-name)) name new-name)
(let [new-name (if (or (not new-name)
(str/blank? new-name)
(not (s/valid? ::v/name new-name)))
name
new-name)
status-updated? (and (not= new-status nil)
(not= status new-status))]
(when status-updated?

24
src/status_im/profile/screen.cljs
View File

@ -3,6 +3,7 @@
(:require [re-frame.core :refer [subscribe dispatch]]
[clojure.string :as str]
[cljs.spec :as s]
[reagent.core :as r]
[status-im.components.react :refer [view
text
text-input
@ -32,11 +33,7 @@
[view
[touchable-highlight {:style st/back-btn-touchable
:on-press (fn []
(dispatch [:set :profile-edit {:edit? false
:name nil
:email nil
:status nil
:photo-path nil}])
(dispatch [:set-in [:profile-edit :edit?] false])
(dispatch [:navigate-back]))}
[view st/back-btn-container
[icon :back st/back-btn-icon]]]
@ -77,10 +74,11 @@
(label :t/user-anonymous)
username)]
[text-input {:style st/status-input
:maxLength 140
:editable edit?
:placeholder (label :t/profile-no-status)
:on-change-text #(dispatch [:set-in [:profile-edit :status] %])
:value status}]])
:default-value status}]])
(defview profile []
[{whisper-identity :whisper-identity
@ -156,7 +154,7 @@
)}
[view [text {:style st/report-user-text} (label :t/report-user)]]]]]])
(defview my-profile []
(defview my-profile-render []
[{public-key :public-key
address :address
username :name
@ -223,3 +221,15 @@
;; TODO: this public key should be replaced by address
[qr-code {:value (str "ethereum:" public-key)
:size 220}]]]])
(defview my-profile []
[{username :name
email :email} [:get-current-account]]
(r/create-class
{:component-will-mount
(fn []
(dispatch [:set :profile-edit {:edit? false
:name username
:email email}]))
:reagent-render
my-profile-render}))