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

Multiple fixes for profile layout (#429)

This commit is contained in:
Alexander Pantyuhov 2016-11-09 16:04:14 +03:00
parent 10eb21a66b
commit d48accae30
6 changed files with 156 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/status_im/android/platform.cljs
View File

@ -14,6 +14,8 @@
:bar-style "light-content" :bar-style "light-content"
:translucent? true :translucent? true
:color styles/color-transparent}} :color styles/color-transparent}}
:sized-text {:margin-top 0
:additional-height 0}
:chat {:new-message {:border-top-color styles/color-transparent :chat {:new-message {:border-top-color styles/color-transparent
:border-top-width 0.5}} :border-top-width 0.5}}
:bottom-gradient {:height 3} :bottom-gradient {:height 3}

16
src/status_im/components/selectable_field/styles.cljs
View File

@ -26,11 +26,13 @@
(defn sized-text (defn sized-text
[height] [height]
(merge text {:height height (let [{:keys [additional-height
:margin-bottom 0 margin-top]} (get-in platform-specific [:component-styles :sized-text])]
:margin-top 0 (merge text {:height (+ additional-height height)
:padding-top 0 :margin-bottom 0
:padding-left 0 :margin-top margin-top
:margin-left 0 :padding-top 0
:padding-bottom 0})) :padding-left 0
:margin-left 0
:padding-bottom 0})))

18
src/status_im/components/selectable_field/view.cljs
View File

@ -28,33 +28,33 @@
:measured? true})))) :measured? true}))))
(defn- reagent-render (defn- reagent-render
[{:keys [label value props] :as data}] [{:keys [label value editable? props] :as data}]
(let [component (r/current-component) (let [component (r/current-component)
{:keys [focused? measured? full-height]} (r/state component)] {:keys [focused? measured? full-height]} (r/state component)]
(log/debug "reagent-render: " data focused? measured? full-height) (log/debug "reagent-render: " data focused? measured? full-height)
[view st/selectable-field-container [view st/selectable-field-container
[view st/label-container [view st/label-container
[text {:style st/label [text {:style st/label
:font :medium} (or label "")]] :font :medium} (or label "")]]
[view st/text-container [view st/text-container
(if focused? (if focused?
[text-input {:style (st/sized-text full-height) [text-input {:style (st/sized-text full-height)
:multiline true :multiline true
:selectTextOnFocus true :selectTextOnFocus true
:editable true :editable editable?
:auto-focus true :auto-focus true
:on-selection-change #(on-selection-change % component) :on-selection-change #(on-selection-change % component)
:on-focus #(log/debug "Focused" %) :on-focus #(log/debug "Focused" %)
:on-blur #(r/set-state component {:focused? false}) :on-blur #(r/set-state component {:focused? false})
:value value}] :value value}]
[text (merge {:style st/text [text (merge {:style st/text
:on-press #(on-press % component) :on-press #(on-press % component)
:onLayout #(on-layout-text % component) :onLayout #(on-layout-text % component)
:font :default :font :default
:ellipsizeMode :middle :ellipsizeMode :middle
:number-of-lines (if measured? 1 0)} (or props {})) (or value "")])]])) :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" (let [component-data {:display-name "selectable-field"
:reagent-render reagent-render}] :reagent-render reagent-render}]
(reagent.core/create-class component-data))) (reagent.core/create-class component-data)))

2
src/status_im/ios/platform.cljs
View File

@ -15,6 +15,8 @@
:color styles/color-transparent}} :color styles/color-transparent}}
:toolbar {:border-bottom-color styles/color-gray3 :toolbar {:border-bottom-color styles/color-gray3
:border-bottom-width 0.5} :border-bottom-width 0.5}
:sized-text {:margin-top -5
:additional-height 5}
:actions-list-view {:border-bottom-color styles/color-gray3 :actions-list-view {:border-bottom-color styles/color-gray3
:border-bottom-width 0.5} :border-bottom-width 0.5}
:chat {:new-message {:border-top-color styles/color-gray3 :chat {:new-message {:border-top-color styles/color-gray3

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

@ -30,7 +30,8 @@
[status-im.profile.styles :as st] [status-im.profile.styles :as st]
[status-im.utils.random :refer [id]] [status-im.utils.random :refer [id]]
[status-im.components.image-button.view :refer [show-qr-button]] [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?]}] (defn toolbar [{:keys [account edit?]}]
(let [profile-edit-data-valid? (s/valid? ::v/profile account)] (let [profile-edit-data-valid? (s/valid? ::v/profile account)]
@ -70,42 +71,64 @@
(str/split status #" ") (str/split status #" ")
(map get-text))) (map get-text)))
(defn status-image-view [{{:keys [name status photo-path]} :account (defn status-image-view [_]
edit? :edit?}] (let [component (r/current-component)
[view st/status-block set-status-height #(let [height (-> (.-nativeEvent %)
[view st/user-photo-container (.-contentSize)
(if edit? (.-height))]
[touchable-highlight {:on-press (fn [] (r/set-state component {:height height}))]
(let [list-selection-fn (get platform-specific :list-selection-fn)] (r/create-class
(dispatch [:open-image-source-selector list-selection-fn])))} {:reagent-render
[view (fn [{{:keys [name status photo-path]} :account
[my-profile-icon {:account {:photo-path photo-path edit? :edit?}]
:name name} [view st/status-block
:edit? edit?}]]] [view st/user-photo-container
[my-profile-icon {:account {:photo-path photo-path
:name name} (if edit?
:edit? edit?}])] [touchable-highlight {:on-press (fn []
[text-field (let [list-selection-fn (get platform-specific :list-selection-fn)]
{:line-color :white (dispatch [:open-image-source-selector list-selection-fn])))}
:focus-line-color :white [view
:editable edit? [my-profile-icon {:account {:photo-path photo-path
:input-style (st/username-input edit? (s/valid? ::v/name name)) :name name}
:wrapper-style st/username-wrapper :edit? edit?}]]]
:value name [my-profile-icon {:account {:photo-path photo-path
:on-change-text #(dispatch [:set-in [:profile-edit :name] %])}] :name name}
[text-input {:style st/status-input :edit? edit?}])]
:maxLength 140 [text-field
:multiline true {:line-color :white
:editable edit? :focus-line-color :white
:placeholder (label :t/profile-no-status) :editable edit?
:on-change-text #(dispatch [:set-in [:profile-edit :status] %]) :input-style (st/username-input edit? (s/valid? ::v/name name))
:default-value status}]]) :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 [] (defview profile []
[{whisper-identity :whisper-identity [{whisper-identity :whisper-identity
address :address address :address
username :name username :name
email :email
photo-path :photo-path photo-path :photo-path
phone :phone phone :phone
status :status status :status
@ -116,9 +139,10 @@
[touchable-highlight {:style st/back-btn-touchable [touchable-highlight {:style st/back-btn-touchable
:on-press (fn [] :on-press (fn []
(dispatch [:navigate-back]))} (dispatch [:navigate-back]))}
[view st/back-btn-container [view (get-in platform-specific [:component-styles :toolbar-nav-action])
[icon :back st/back-btn-icon]]] [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 [] :on-press (fn []
(.log js/console "Dots pressed!"))} (.log js/console "Dots pressed!"))}
[view st/actions-btn-container [view st/actions-btn-container
@ -128,46 +152,48 @@
:photo-path photo-path :photo-path photo-path
:edit? false}] :edit? false}]
[view st/status-block [scroll-view (merge st/profile-properties-container {:keyboardShouldPersistTaps true
[view st/btns-container :bounces false})
[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 st/profile-properties-container [view st/status-block
[text-field [view st/btns-container
{:editable false [touchable-highlight {:onPress #(message-user whisper-identity)}
:input-style st/profile-input-text [view st/message-btn
:wrapper-style st/profile-input-wrapper [text {:style st/message-btn-text} (label :t/message)]]]
:value (if (and phone (not (str/blank? phone))) ;; TODO not implemented
(format-phone-number phone) #_[touchable-highlight {:onPress #(.log js/console "Not yet implemented")}
(label :t/not-specified)) [view st/more-btn
:label (label :t/phone-number)}] [icon :more_vertical_blue st/more-btn-image]]]]]
[text-field [view st/profile-property-with-top-spacing
{:editable false [selectable-field {:label (label :t/phone-number)
:input-style st/profile-input-text :editable? false
:wrapper-style st/profile-input-wrapper :value (if (and phone (not (str/blank? phone)))
:value (if (and email (not (str/blank? email))) (format-phone-number phone)
email (label :t/not-specified))}]
(label :t/not-specified)) [view st/underline-container]]
:label (label :t/email)}]]])
(defview qr-modal [] (when address
[qr [:get-in [:profile-edit :qr-code]]] [view st/profile-property
[modal {:transparent true [view st/profile-property-row
:visible (not (nil? qr)) [view st/profile-property-field
:animationType :fade} [selectable-field {:label (label :t/address)
[touchable-without-feedback {:on-press #(dispatch [:set-in [:profile-edit :qr-code] nil])} :editable? false
[view st/qr-code-container :value address}]]
[view st/qr-code [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] address])}]]
[qr-code {:value (str "ethereum:" qr) [view st/underline-container]])
:size 220}]]]]])
[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 [] (defview my-profile []
[edit? [:get-in [:profile-edit :edit?]] [edit? [:get-in [:profile-edit :edit?]]
@ -179,9 +205,8 @@
public-key] :as account} (if edit? public-key] :as account} (if edit?
changed-account changed-account
current-account)] current-account)]
[scroll-view {:style st/profile [scroll-view {:style st/profile
:bounces false :bounces false}
:keyboardShouldPersistTaps true}
[status-bar] [status-bar]
[toolbar {:account account [toolbar {:account account
:edit? edit?}] :edit? edit?}]
@ -189,28 +214,30 @@
[status-image-view {:account account [status-image-view {:account account
:edit? edit?}] :edit? edit?}]
[scroll-view (merge st/profile-properties-container {:keyboardShouldPersistTaps true [scroll-view (merge st/my-profile-properties-container {:bounces false})
:bounces false})
[view st/profile-property [view st/profile-property
[selectable-field {:label (label :t/phone-number) [selectable-field {:label (label :t/phone-number)
:value (if (and phone (not (str/blank? phone))) :editable? edit?
(format-phone-number phone) :value (if (and phone (not (str/blank? phone)))
(label :t/not-specified))}] (format-phone-number phone)
(label :t/not-specified))}]
[view st/underline-container]] [view st/underline-container]]
[view st/profile-property [view st/profile-property
[view st/profile-property-row [view st/profile-property-row
[view st/profile-property-field [view st/profile-property-field
[selectable-field {:label (label :t/address) [selectable-field {:label (label :t/address)
:value address}]] :editable? edit?
:value address}]]
[show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] address])}]] [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] address])}]]
[view st/underline-container]] [view st/underline-container]]
[view st/profile-property [view st/profile-property
[view st/profile-property-row [view st/profile-property-row
[view st/profile-property-field [view st/profile-property-field
[selectable-field {:label (label :t/public-key) [selectable-field {:label (label :t/public-key)
:value public-key}]] :editable? edit?
:value public-key}]]
[show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] public-key])}]]] [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] public-key])}]]]
[view st/underline-container] [view st/underline-container]

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

@ -23,13 +23,13 @@
{:position :absolute}) {:position :absolute})
(def back-btn-container (def back-btn-container
{:width 56 {:width 46
:height 56}) :height 56
:align-items :center
:justify-content :center})
(def back-btn-icon (def back-btn-icon
{:margin-top 21 {:width 8
:margin-left 23
:width 8
:height 14}) :height 14})
(def actions-btn-touchable (def actions-btn-touchable
@ -69,22 +69,22 @@
{:flex-direction "column" {:flex-direction "column"
:align-items "center" :align-items "center"
:justifyContent "center" :justifyContent "center"
:margin-bottom 38
:margin-left 55 :margin-left 55
:margin-right 55}) :margin-right 55})
(def status-input (defn status-input [height]
{:align-self "stretch" {:align-self "stretch"
:margin-left 16 :margin-left (if p/ios? 22 16)
:margin-right 16 :margin-right 16
:margin-top (if p/ios? 6 1) :margin-top (if p/ios? 6 1)
:font-size 14 :font-size 14
:min-height 60 :height height
:text-align :center :min-height 30
:text-align "center"
:color text2-color}) :color text2-color})
(def btns-container (def btns-container
{:margin-top 18 {:margin-top 0
:flex-direction :row}) :flex-direction :row})
(def message-btn (def message-btn
@ -116,17 +116,27 @@
(def profile-properties-container (def profile-properties-container
{:align-items :stretch {: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 (def profile-property
{:margin-left 16}) {:margin-left 16})
(def profile-property-with-top-spacing
{:margin-top 32
:margin-left 16})
(def profile-property-row (def profile-property-row
{:flex 1 {:flex 1
:flex-direction :row}) :flex-direction :row})
(def profile-property-field (def profile-property-field
{:margin-right 90 {:margin-right 96
:flex 1}) :flex 1})
(def profile-input-wrapper (def profile-input-wrapper