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

updated profile view (#314) 

Former-commit-id: d02e598569
This commit is contained in:
Alexander Pantyuhov 2016-10-06 00:57:24 +03:00
parent 474d4faf25
commit efe4a37cf7
4 changed files with 54 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/status_im/components/chat_icon/styles.cljs
View File

@ -33,10 +33,10 @@
:lineHeight 20}) :lineHeight 20})
(def chat-icon (def chat-icon
{:margin 4 {:margin 4
:borderRadius 20 :border-radius 20
:width 40 :width 40
:height 40}) :height 40})
(def chat-icon-chat-list (def chat-icon-chat-list
(merge chat-icon (merge chat-icon
@ -45,8 +45,9 @@
(def chat-icon-menu-item (def chat-icon-menu-item
(merge chat-icon (merge chat-icon
{:width 24 {:width 24
:height 24})) :height 24
:border-radius 12}))
(def chat-icon-profile (def chat-icon-profile
(merge chat-icon (merge chat-icon
@ -55,15 +56,15 @@
:border-radius 32})) :border-radius 32}))
(def online-view (def online-view
{:position :absolute {:position :absolute
:bottom 0 :bottom 0
:right 0 :right 0
:width 20 :width 20
:height 20 :height 20
:borderRadius 10 :border-radius 10
:backgroundColor online-color :background-color online-color
:borderWidth 2 :border-width 2
:borderColor color-white}) :border-color color-white})
(def online-view-menu-item (def online-view-menu-item
(merge online-view (merge online-view
@ -78,21 +79,21 @@
:border-radius 12})) :border-radius 12}))
(def online-dot (def online-dot
{:position :absolute {:position :absolute
:top 6 :top 6
:width 4 :width 4
:height 4 :height 4
:borderRadius 2 :border-radius 2
:backgroundColor color-white}) :background-color color-white})
(def online-dot-left (merge online-dot {:left 3})) (def online-dot-left (merge online-dot {:left 3}))
(def online-dot-right (merge online-dot {:left 9})) (def online-dot-right (merge online-dot {:left 9}))
(def photo-pencil (def photo-pencil
{:margin-left 5 {:margin-left 5
:margin-right 5 :margin-right 5
:margin-top 3 :margin-top 3
:font-size 12 :font-size 12
:color :white}) :color :white})
(def online-dot-menu-item (def online-dot-menu-item
(merge online-dot (merge online-dot

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

@ -23,7 +23,6 @@
new-status :status new-status :status
new-photo-path :photo-path}] new-photo-path :photo-path}]
(let [new-name (if (or (not new-name) (let [new-name (if (or (not new-name)
(str/blank? new-name)
(not (s/valid? ::v/name new-name))) (not (s/valid? ::v/name new-name)))
name name
new-name) new-name)

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

@ -52,6 +52,7 @@
(defn status-image-view [{{address :address (defn status-image-view [{{address :address
username :name} :account username :name} :account
{new-name :name} :profile-edit-data
photo-path :photo-path photo-path :photo-path
status :status status :status
edit? :edit?}] edit? :edit?}]
@ -68,11 +69,16 @@
[my-profile-icon {:account {:photo-path photo-path [my-profile-icon {:account {:photo-path photo-path
:name username} :name username}
:edit? edit?}])] :edit? edit?}])]
[text {:style st/username [text-field
:font :default} {:line-color :white
(if (= username address) :focus-line-color :white
(label :t/user-anonymous) :placeholder (label :t/user-anonymous)
username)] :editable edit?
:input-style (st/username-input edit? (s/valid? ::v/name (or new-name username)))
:wrapper-style st/username-wrapper
:value (if (not= username address)
username)
:on-change-text #(dispatch [:set-in [:profile-edit :name] %])}]
[text-input {:style st/status-input [text-input {:style st/status-input
:maxLength 140 :maxLength 140
:editable edit? :editable edit?
@ -119,17 +125,6 @@
[icon :more_vertical_blue st/more-btn-image]]]]] [icon :more_vertical_blue st/more-btn-image]]]]]
[scroll-view st/profile-properties-container [scroll-view st/profile-properties-container
[text-field
{:editable false
:input-style st/profile-input-text
:wrapper-style st/profile-input-wrapper
:value (if (and (not= username address)
username
(not (str/blank? username)))
username
(label :t/not-specified))
:label (label :t/username)}]
[text-field [text-field
{:editable false {:editable false
:input-style st/profile-input-text :input-style st/profile-input-text
@ -175,26 +170,13 @@
:profile-edit-data profile-edit-data :profile-edit-data profile-edit-data
:edit? edit?}] :edit? edit?}]
[status-image-view {:account account [status-image-view {:account account
:photo-path (or new-photo-path photo-path) :profile-edit-data profile-edit-data
:status (or new-status status) :photo-path (or new-photo-path photo-path)
:edit? edit?}] :status (or new-status status)
:edit? edit?}]
[scroll-view st/profile-properties-container [scroll-view st/profile-properties-container
[text-field
{:error (if-not (s/valid? ::v/name new-name)
(label :t/error-incorrect-name))
:error-color "#7099e6"
:editable edit?
:input-style (if edit?
st/profile-input-text
st/profile-input-text-non-editable)
:wrapper-style st/profile-input-wrapper
:value (if (not= username address)
username)
:label (label :t/username)
:on-change-text #(dispatch [:set-in [:profile-edit :name] %])}]
[text-field [text-field
{:editable false {:editable false
:input-style st/profile-input-text-non-editable :input-style st/profile-input-text-non-editable

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

@ -10,7 +10,8 @@
separator-color separator-color
text1-color text1-color
text1-disabled-color text1-disabled-color
text2-color]])) text2-color
color-red]]))
(def profile (def profile
{:flex 1 {:flex 1
@ -51,18 +52,17 @@
(def user-photo-container (def user-photo-container
{:margin-top 22}) {:margin-top 22})
(def username (def username-wrapper
{:margin-top 12 {:width 300
:font-size 18 :margin-top -22
:color text1-color}) :margin-bottom -16})
(def username-input (defn username-input [edit? valid?]
{:align-self "stretch" {:font-size 18
:margin-top -8 :text-align :center
:margin-bottom -22 :color (if edit?
:font-size 18 (if valid? text1-color color-red)
:text-align :center text1-disabled-color)})
:color text1-color})
(def status-block (def status-block
{:flex-direction "column" {:flex-direction "column"