From efe4a37cf7a68a5f558b0c29280ec75e79acd8f5 Mon Sep 17 00:00:00 2001 From: Alexander Pantyuhov Date: Thu, 6 Oct 2016 00:57:24 +0300 Subject: [PATCH] updated profile view (#314) Former-commit-id: d02e5985696fcdb10edfcde17d8c1810400f766c --- .../components/chat_icon/styles.cljs | 51 ++++++++++--------- src/status_im/profile/handlers.cljs | 1 - src/status_im/profile/screen.cljs | 50 ++++++------------ src/status_im/profile/styles.cljs | 24 ++++----- 4 files changed, 54 insertions(+), 72 deletions(-) diff --git a/src/status_im/components/chat_icon/styles.cljs b/src/status_im/components/chat_icon/styles.cljs index ebdd548eba..9b51a4a582 100644 --- a/src/status_im/components/chat_icon/styles.cljs +++ b/src/status_im/components/chat_icon/styles.cljs @@ -33,10 +33,10 @@ :lineHeight 20}) (def chat-icon - {:margin 4 - :borderRadius 20 - :width 40 - :height 40}) + {:margin 4 + :border-radius 20 + :width 40 + :height 40}) (def chat-icon-chat-list (merge chat-icon @@ -45,8 +45,9 @@ (def chat-icon-menu-item (merge chat-icon - {:width 24 - :height 24})) + {:width 24 + :height 24 + :border-radius 12})) (def chat-icon-profile (merge chat-icon @@ -55,15 +56,15 @@ :border-radius 32})) (def online-view - {:position :absolute - :bottom 0 - :right 0 - :width 20 - :height 20 - :borderRadius 10 - :backgroundColor online-color - :borderWidth 2 - :borderColor color-white}) + {:position :absolute + :bottom 0 + :right 0 + :width 20 + :height 20 + :border-radius 10 + :background-color online-color + :border-width 2 + :border-color color-white}) (def online-view-menu-item (merge online-view @@ -78,21 +79,21 @@ :border-radius 12})) (def online-dot - {:position :absolute - :top 6 - :width 4 - :height 4 - :borderRadius 2 - :backgroundColor color-white}) + {:position :absolute + :top 6 + :width 4 + :height 4 + :border-radius 2 + :background-color color-white}) (def online-dot-left (merge online-dot {:left 3})) (def online-dot-right (merge online-dot {:left 9})) (def photo-pencil - {:margin-left 5 + {:margin-left 5 :margin-right 5 - :margin-top 3 - :font-size 12 - :color :white}) + :margin-top 3 + :font-size 12 + :color :white}) (def online-dot-menu-item (merge online-dot diff --git a/src/status_im/profile/handlers.cljs b/src/status_im/profile/handlers.cljs index bade371834..8503ae222b 100644 --- a/src/status_im/profile/handlers.cljs +++ b/src/status_im/profile/handlers.cljs @@ -23,7 +23,6 @@ new-status :status new-photo-path :photo-path}] (let [new-name (if (or (not new-name) - (str/blank? new-name) (not (s/valid? ::v/name new-name))) name new-name) diff --git a/src/status_im/profile/screen.cljs b/src/status_im/profile/screen.cljs index aa2e61a20a..5f072e666d 100644 --- a/src/status_im/profile/screen.cljs +++ b/src/status_im/profile/screen.cljs @@ -52,6 +52,7 @@ (defn status-image-view [{{address :address username :name} :account + {new-name :name} :profile-edit-data photo-path :photo-path status :status edit? :edit?}] @@ -68,11 +69,16 @@ [my-profile-icon {:account {:photo-path photo-path :name username} :edit? edit?}])] - [text {:style st/username - :font :default} - (if (= username address) - (label :t/user-anonymous) - username)] + [text-field + {:line-color :white + :focus-line-color :white + :placeholder (label :t/user-anonymous) + :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 :maxLength 140 :editable edit? @@ -119,17 +125,6 @@ [icon :more_vertical_blue st/more-btn-image]]]]] [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 {:editable false :input-style st/profile-input-text @@ -175,26 +170,13 @@ :profile-edit-data profile-edit-data :edit? edit?}] - [status-image-view {:account account - :photo-path (or new-photo-path photo-path) - :status (or new-status status) - :edit? edit?}] + [status-image-view {:account account + :profile-edit-data profile-edit-data + :photo-path (or new-photo-path photo-path) + :status (or new-status status) + :edit? edit?}] [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 {:editable false :input-style st/profile-input-text-non-editable diff --git a/src/status_im/profile/styles.cljs b/src/status_im/profile/styles.cljs index f40dd0ca2f..c73a6b02d1 100644 --- a/src/status_im/profile/styles.cljs +++ b/src/status_im/profile/styles.cljs @@ -10,7 +10,8 @@ separator-color text1-color text1-disabled-color - text2-color]])) + text2-color + color-red]])) (def profile {:flex 1 @@ -51,18 +52,17 @@ (def user-photo-container {:margin-top 22}) -(def username - {:margin-top 12 - :font-size 18 - :color text1-color}) +(def username-wrapper + {:width 300 + :margin-top -22 + :margin-bottom -16}) -(def username-input - {:align-self "stretch" - :margin-top -8 - :margin-bottom -22 - :font-size 18 - :text-align :center - :color text1-color}) +(defn username-input [edit? valid?] + {:font-size 18 + :text-align :center + :color (if edit? + (if valid? text1-color color-red) + text1-disabled-color)}) (def status-block {:flex-direction "column"