Merge pull request #320 from status-im/feature/#294
Status & Name, quick profile change in drawer (#294), length limit (#324)
Former-commit-id: 2cbad4dc76
This commit is contained in:
Roman Volosovskyi
GitHub
commit
6530f9c4e4
|
|
@ -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})
|
||||
|
||||
|
|
|
|||
|
|
@ -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])
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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)}]]
|
||||
|
|
|
|||
|
|
@ -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?
|
||||
|
|
|
|||
|
|
@ -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}))
|
||||
|
|
|
|||
Loading…
Reference in New Issue