status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.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"
: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}

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

@ -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})))

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

@ -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)))

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

@ -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

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

@ -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]

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

@ -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