From d48accae301f4eb098bb328a1618da8822367da4 Mon Sep 17 00:00:00 2001 From: Alexander Pantyuhov Date: Wed, 9 Nov 2016 16:04:14 +0300 Subject: [PATCH] Multiple fixes for profile layout (#429) --- src/status_im/android/platform.cljs | 2 + .../components/selectable_field/styles.cljs | 16 +- .../components/selectable_field/view.cljs | 18 +- src/status_im/ios/platform.cljs | 2 + src/status_im/profile/screen.cljs | 195 ++++++++++-------- src/status_im/profile/styles.cljs | 36 ++-- 6 files changed, 156 insertions(+), 113 deletions(-) diff --git a/src/status_im/android/platform.cljs b/src/status_im/android/platform.cljs index 46b65910fc..a659f4439c 100644 --- a/src/status_im/android/platform.cljs +++ b/src/status_im/android/platform.cljs @@ -14,6 +14,8 @@ :bar-style "light-content" :translucent? true :color styles/color-transparent}} + :sized-text {:margin-top 0 + :additional-height 0} :chat {:new-message {:border-top-color styles/color-transparent :border-top-width 0.5}} :bottom-gradient {:height 3} diff --git a/src/status_im/components/selectable_field/styles.cljs b/src/status_im/components/selectable_field/styles.cljs index 88774a9594..98b4e02894 100644 --- a/src/status_im/components/selectable_field/styles.cljs +++ b/src/status_im/components/selectable_field/styles.cljs @@ -26,11 +26,13 @@ (defn sized-text [height] - (merge text {:height height - :margin-bottom 0 - :margin-top 0 - :padding-top 0 - :padding-left 0 - :margin-left 0 - :padding-bottom 0})) + (let [{:keys [additional-height + margin-top]} (get-in platform-specific [:component-styles :sized-text])] + (merge text {:height (+ additional-height height) + :margin-bottom 0 + :margin-top margin-top + :padding-top 0 + :padding-left 0 + :margin-left 0 + :padding-bottom 0}))) diff --git a/src/status_im/components/selectable_field/view.cljs b/src/status_im/components/selectable_field/view.cljs index 1f5c2e8df8..5e7e05af87 100644 --- a/src/status_im/components/selectable_field/view.cljs +++ b/src/status_im/components/selectable_field/view.cljs @@ -28,33 +28,33 @@ :measured? true})))) (defn- reagent-render - [{:keys [label value props] :as data}] + [{:keys [label value editable? props] :as data}] (let [component (r/current-component) {:keys [focused? measured? full-height]} (r/state component)] (log/debug "reagent-render: " data focused? measured? full-height) [view st/selectable-field-container [view st/label-container [text {:style st/label - :font :medium} (or label "")]] + :font :medium} (or label "")]] [view st/text-container (if focused? [text-input {:style (st/sized-text full-height) :multiline true :selectTextOnFocus true - :editable true + :editable editable? :auto-focus true :on-selection-change #(on-selection-change % component) :on-focus #(log/debug "Focused" %) :on-blur #(r/set-state component {:focused? false}) :value value}] - [text (merge {:style st/text - :on-press #(on-press % component) - :onLayout #(on-layout-text % component) - :font :default - :ellipsizeMode :middle + [text (merge {:style st/text + :on-press #(on-press % component) + :onLayout #(on-layout-text % component) + :font :default + :ellipsizeMode :middle :number-of-lines (if measured? 1 0)} (or props {})) (or value "")])]])) -(defn selectable-field [{:keys [label value props]}] +(defn selectable-field [_] (let [component-data {:display-name "selectable-field" :reagent-render reagent-render}] (reagent.core/create-class component-data))) diff --git a/src/status_im/ios/platform.cljs b/src/status_im/ios/platform.cljs index dd42b5ef9a..6fa847b30e 100644 --- a/src/status_im/ios/platform.cljs +++ b/src/status_im/ios/platform.cljs @@ -15,6 +15,8 @@ :color styles/color-transparent}} :toolbar {:border-bottom-color styles/color-gray3 :border-bottom-width 0.5} + :sized-text {:margin-top -5 + :additional-height 5} :actions-list-view {:border-bottom-color styles/color-gray3 :border-bottom-width 0.5} :chat {:new-message {:border-top-color styles/color-gray3 diff --git a/src/status_im/profile/screen.cljs b/src/status_im/profile/screen.cljs index 0c4eb0d33a..3527d7f187 100644 --- a/src/status_im/profile/screen.cljs +++ b/src/status_im/profile/screen.cljs @@ -30,7 +30,8 @@ [status-im.profile.styles :as st] [status-im.utils.random :refer [id]] [status-im.components.image-button.view :refer [show-qr-button]] - [status-im.i18n :refer [label]])) + [status-im.i18n :refer [label]] + [taoensso.timbre :as log])) (defn toolbar [{:keys [account edit?]}] (let [profile-edit-data-valid? (s/valid? ::v/profile account)] @@ -70,42 +71,64 @@ (str/split status #" ") (map get-text))) -(defn status-image-view [{{:keys [name status photo-path]} :account - edit? :edit?}] - [view st/status-block - [view st/user-photo-container - (if edit? - [touchable-highlight {:on-press (fn [] - (let [list-selection-fn (get platform-specific :list-selection-fn)] - (dispatch [:open-image-source-selector list-selection-fn])))} - [view - [my-profile-icon {:account {:photo-path photo-path - :name name} - :edit? edit?}]]] - [my-profile-icon {:account {:photo-path photo-path - :name name} - :edit? edit?}])] - [text-field - {:line-color :white - :focus-line-color :white - :editable edit? - :input-style (st/username-input edit? (s/valid? ::v/name name)) - :wrapper-style st/username-wrapper - :value name - :on-change-text #(dispatch [:set-in [:profile-edit :name] %])}] - [text-input {:style st/status-input - :maxLength 140 - :multiline true - :editable edit? - :placeholder (label :t/profile-no-status) - :on-change-text #(dispatch [:set-in [:profile-edit :status] %]) - :default-value status}]]) +(defn status-image-view [_] + (let [component (r/current-component) + set-status-height #(let [height (-> (.-nativeEvent %) + (.-contentSize) + (.-height))] + (r/set-state component {:height height}))] + (r/create-class + {:reagent-render + (fn [{{:keys [name status photo-path]} :account + edit? :edit?}] + [view st/status-block + [view st/user-photo-container + + (if edit? + [touchable-highlight {:on-press (fn [] + (let [list-selection-fn (get platform-specific :list-selection-fn)] + (dispatch [:open-image-source-selector list-selection-fn])))} + [view + [my-profile-icon {:account {:photo-path photo-path + :name name} + :edit? edit?}]]] + [my-profile-icon {:account {:photo-path photo-path + :name name} + :edit? edit?}])] + [text-field + {:line-color :white + :focus-line-color :white + :editable edit? + :input-style (st/username-input edit? (s/valid? ::v/name name)) + :wrapper-style st/username-wrapper + :value name + :on-change-text #(dispatch [:set-in [:profile-edit :name] %])}] + [text-input {:style (st/status-input (:height (r/state component))) + :on-change #(set-status-height %) + :on-content-size-change #(set-status-height %) + :maxLength 140 + :multiline true + :editable edit? + :placeholder (label :t/profile-no-status) + :on-change-text #(dispatch [:set-in [:profile-edit :status] %]) + :default-value status}]])}))) + +(defview qr-modal [] + [qr [:get-in [:profile-edit :qr-code]]] + [modal {:transparent true + :visible (not (nil? qr)) + :animationType :fade + :onRequestClose #(log/debug "Nothing happens")} + [touchable-without-feedback {:on-press #(dispatch [:set-in [:profile-edit :qr-code] nil])} + [view st/qr-code-container + [view st/qr-code + [qr-code {:value (str "ethereum:" qr) + :size 220}]]]]]) (defview profile [] [{whisper-identity :whisper-identity address :address username :name - email :email photo-path :photo-path phone :phone status :status @@ -116,9 +139,10 @@ [touchable-highlight {:style st/back-btn-touchable :on-press (fn [] (dispatch [:navigate-back]))} - [view st/back-btn-container + [view (get-in platform-specific [:component-styles :toolbar-nav-action]) [icon :back st/back-btn-icon]]] - [touchable-highlight {:style st/actions-btn-touchable + ;; TODO not implemented + #_[touchable-highlight {:style st/actions-btn-touchable :on-press (fn [] (.log js/console "Dots pressed!"))} [view st/actions-btn-container @@ -128,46 +152,48 @@ :photo-path photo-path :edit? false}] - [view st/status-block - [view st/btns-container - [touchable-highlight {:onPress #(message-user whisper-identity)} - [view st/message-btn - [text {:style st/message-btn-text} (label :t/message)]]] - [touchable-highlight {:onPress (fn [] - ;; TODO not implemented - )} - [view st/more-btn - [icon :more_vertical_blue st/more-btn-image]]]]] + [scroll-view (merge st/profile-properties-container {:keyboardShouldPersistTaps true + :bounces false}) - [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 phone (not (str/blank? phone))) - (format-phone-number phone) - (label :t/not-specified)) - :label (label :t/phone-number)}] + [view st/status-block + [view st/btns-container + [touchable-highlight {:onPress #(message-user whisper-identity)} + [view st/message-btn + [text {:style st/message-btn-text} (label :t/message)]]] + ;; TODO not implemented + #_[touchable-highlight {:onPress #(.log js/console "Not yet implemented")} + [view st/more-btn + [icon :more_vertical_blue st/more-btn-image]]]]] - [text-field - {:editable false - :input-style st/profile-input-text - :wrapper-style st/profile-input-wrapper - :value (if (and email (not (str/blank? email))) - email - (label :t/not-specified)) - :label (label :t/email)}]]]) + [view st/profile-property-with-top-spacing + [selectable-field {:label (label :t/phone-number) + :editable? false + :value (if (and phone (not (str/blank? phone))) + (format-phone-number phone) + (label :t/not-specified))}] + [view st/underline-container]] -(defview qr-modal [] - [qr [:get-in [:profile-edit :qr-code]]] - [modal {:transparent true - :visible (not (nil? qr)) - :animationType :fade} - [touchable-without-feedback {:on-press #(dispatch [:set-in [:profile-edit :qr-code] nil])} - [view st/qr-code-container - [view st/qr-code - [qr-code {:value (str "ethereum:" qr) - :size 220}]]]]]) + (when address + [view st/profile-property + [view st/profile-property-row + [view st/profile-property-field + [selectable-field {:label (label :t/address) + :editable? false + :value address}]] + [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] address])}]] + [view st/underline-container]]) + + [view st/profile-property + [view st/profile-property-row + [view st/profile-property-field + [selectable-field {:label (label :t/public-key) + :editable? false + :value whisper-identity}]] + [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] whisper-identity])}]]] + + [view st/underline-container] + + [qr-modal]]]) (defview my-profile [] [edit? [:get-in [:profile-edit :edit?]] @@ -179,9 +205,8 @@ public-key] :as account} (if edit? changed-account current-account)] - [scroll-view {:style st/profile - :bounces false - :keyboardShouldPersistTaps true} + [scroll-view {:style st/profile + :bounces false} [status-bar] [toolbar {:account account :edit? edit?}] @@ -189,28 +214,30 @@ [status-image-view {:account account :edit? edit?}] - [scroll-view (merge st/profile-properties-container {:keyboardShouldPersistTaps true - :bounces false}) + [scroll-view (merge st/my-profile-properties-container {:bounces false}) [view st/profile-property - [selectable-field {:label (label :t/phone-number) - :value (if (and phone (not (str/blank? phone))) - (format-phone-number phone) - (label :t/not-specified))}] + [selectable-field {:label (label :t/phone-number) + :editable? edit? + :value (if (and phone (not (str/blank? phone))) + (format-phone-number phone) + (label :t/not-specified))}] [view st/underline-container]] [view st/profile-property [view st/profile-property-row [view st/profile-property-field - [selectable-field {:label (label :t/address) - :value address}]] + [selectable-field {:label (label :t/address) + :editable? edit? + :value address}]] [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] address])}]] [view st/underline-container]] [view st/profile-property [view st/profile-property-row [view st/profile-property-field - [selectable-field {:label (label :t/public-key) - :value public-key}]] + [selectable-field {:label (label :t/public-key) + :editable? edit? + :value public-key}]] [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] public-key])}]]] [view st/underline-container] diff --git a/src/status_im/profile/styles.cljs b/src/status_im/profile/styles.cljs index 59b1e3a6f4..9454eaf784 100644 --- a/src/status_im/profile/styles.cljs +++ b/src/status_im/profile/styles.cljs @@ -23,13 +23,13 @@ {:position :absolute}) (def back-btn-container - {:width 56 - :height 56}) + {:width 46 + :height 56 + :align-items :center + :justify-content :center}) (def back-btn-icon - {:margin-top 21 - :margin-left 23 - :width 8 + {:width 8 :height 14}) (def actions-btn-touchable @@ -69,22 +69,22 @@ {:flex-direction "column" :align-items "center" :justifyContent "center" - :margin-bottom 38 :margin-left 55 :margin-right 55}) -(def status-input +(defn status-input [height] {:align-self "stretch" - :margin-left 16 + :margin-left (if p/ios? 22 16) :margin-right 16 :margin-top (if p/ios? 6 1) :font-size 14 - :min-height 60 - :text-align :center + :height height + :min-height 30 + :text-align "center" :color text2-color}) (def btns-container - {:margin-top 18 + {:margin-top 0 :flex-direction :row}) (def message-btn @@ -116,17 +116,27 @@ (def profile-properties-container {:align-items :stretch - :flex-firection :column}) + :flex-firection :column + :margin-top 16}) + +(def my-profile-properties-container + {:align-items :stretch + :flex-firection :column + :margin-top 32}) (def profile-property {:margin-left 16}) +(def profile-property-with-top-spacing + {:margin-top 32 + :margin-left 16}) + (def profile-property-row {:flex 1 :flex-direction :row}) (def profile-property-field - {:margin-right 90 + {:margin-right 96 :flex 1}) (def profile-input-wrapper