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}

8
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-top]} (get-in platform-specific [:component-styles :sized-text])]
(merge text {:height (+ additional-height height)
:margin-bottom 0 :margin-bottom 0
:margin-top 0 :margin-top margin-top
:padding-top 0 :padding-top 0
:padding-left 0 :padding-left 0
:margin-left 0 :margin-left 0
:padding-bottom 0})) :padding-bottom 0})))

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

@ -28,7 +28,7 @@
: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)
@ -41,7 +41,7 @@
[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" %)
@ -54,7 +54,7 @@
: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

103
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,10 +71,19 @@
(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 [_]
(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?}] edit? :edit?}]
[view st/status-block [view st/status-block
[view st/user-photo-container [view st/user-photo-container
(if edit? (if edit?
[touchable-highlight {:on-press (fn [] [touchable-highlight {:on-press (fn []
(let [list-selection-fn (get platform-specific :list-selection-fn)] (let [list-selection-fn (get platform-specific :list-selection-fn)]
@ -93,19 +103,32 @@
:wrapper-style st/username-wrapper :wrapper-style st/username-wrapper
:value name :value name
:on-change-text #(dispatch [:set-in [:profile-edit :name] %])}] :on-change-text #(dispatch [:set-in [:profile-edit :name] %])}]
[text-input {:style st/status-input [text-input {:style (st/status-input (:height (r/state component)))
:on-change #(set-status-height %)
:on-content-size-change #(set-status-height %)
:maxLength 140 :maxLength 140
:multiline true :multiline true
:editable edit? :editable edit?
:placeholder (label :t/profile-no-status) :placeholder (label :t/profile-no-status)
:on-change-text #(dispatch [:set-in [:profile-edit :status] %]) :on-change-text #(dispatch [:set-in [:profile-edit :status] %])
:default-value 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}]
[scroll-view (merge st/profile-properties-container {:keyboardShouldPersistTaps true
:bounces false})
[view st/status-block [view st/status-block
[view st/btns-container [view st/btns-container
[touchable-highlight {:onPress #(message-user whisper-identity)} [touchable-highlight {:onPress #(message-user whisper-identity)}
[view st/message-btn [view st/message-btn
[text {:style st/message-btn-text} (label :t/message)]]] [text {:style st/message-btn-text} (label :t/message)]]]
[touchable-highlight {:onPress (fn []
;; TODO not implemented ;; TODO not implemented
)} #_[touchable-highlight {:onPress #(.log js/console "Not yet implemented")}
[view st/more-btn [view st/more-btn
[icon :more_vertical_blue st/more-btn-image]]]]] [icon :more_vertical_blue st/more-btn-image]]]]]
[scroll-view st/profile-properties-container [view st/profile-property-with-top-spacing
[text-field [selectable-field {:label (label :t/phone-number)
{:editable false :editable? false
:input-style st/profile-input-text
:wrapper-style st/profile-input-wrapper
:value (if (and phone (not (str/blank? phone))) :value (if (and phone (not (str/blank? phone)))
(format-phone-number phone) (format-phone-number phone)
(label :t/not-specified)) (label :t/not-specified))}]
:label (label :t/phone-number)}] [view st/underline-container]]
[text-field (when address
{:editable false [view st/profile-property
:input-style st/profile-input-text [view st/profile-property-row
:wrapper-style st/profile-input-wrapper [view st/profile-property-field
:value (if (and email (not (str/blank? email))) [selectable-field {:label (label :t/address)
email :editable? false
(label :t/not-specified)) :value address}]]
:label (label :t/email)}]]]) [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] address])}]]
[view st/underline-container]])
(defview qr-modal [] [view st/profile-property
[qr [:get-in [:profile-edit :qr-code]]] [view st/profile-property-row
[modal {:transparent true [view st/profile-property-field
:visible (not (nil? qr)) [selectable-field {:label (label :t/public-key)
:animationType :fade} :editable? false
[touchable-without-feedback {:on-press #(dispatch [:set-in [:profile-edit :qr-code] nil])} :value whisper-identity}]]
[view st/qr-code-container [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] whisper-identity])}]]]
[view st/qr-code
[qr-code {:value (str "ethereum:" qr) [view st/underline-container]
:size 220}]]]]])
[qr-modal]]])
(defview my-profile [] (defview my-profile []
[edit? [:get-in [:profile-edit :edit?]] [edit? [:get-in [:profile-edit :edit?]]
@ -180,8 +206,7 @@
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,10 +214,10 @@
[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)
:editable? edit?
:value (if (and phone (not (str/blank? phone))) :value (if (and phone (not (str/blank? phone)))
(format-phone-number phone) (format-phone-number phone)
(label :t/not-specified))}] (label :t/not-specified))}]
@ -202,6 +227,7 @@
[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)
:editable? edit?
:value address}]] :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]]
@ -210,6 +236,7 @@
[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)
:editable? edit?
:value public-key}]] :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])}]]]

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