fixes for code review (+1 squashed commit)

Squashed commits:
[58e9394] fix for https://github.com/status-im/status-react/issues/928 (+1 squashed commit)
Squashed commits:
[f56e7ad] fixes after rebase (+1 squashed commit)
Squashed commits:
[bb4a409] fixes after rebase (+1 squashed commit)
Squashed commits:
[297b52d] rebase onto ui-refresh
This commit is contained in:
Andrey Shovkoplyas 2017-03-27 17:57:07 +03:00 committed by Roman Volosovskyi
parent b54c9f337f
commit 9c89c56679
18 changed files with 295 additions and 258 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 802 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 503 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -0,0 +1,21 @@
{
"images" : [
{
"idiom" : "universal",
"filename" : "icon_ok_dark.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"scale" : "2x"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -95,22 +95,6 @@
:name-text {:fontSize 16
:line-height 24
:color styles/text1-color}}
:profile {:profile-bage {:padding-top 24}
:profile-name-text {:color styles/color-black
:font-size 16
:line-height 24}
:profile-status-text {:font-size 15
:line-height 20}
:profile-setting-item {:padding-left 72
:padding-right 13
:height 72}
:profile-setting-title {:font-size 12}
:profile-setting-text {:font-size 16
:color styles/color-black}
:profile-setting-spacing {:height 7}
:form-separator {:margin-left 72}
:edit-name-title {:font-size 12}
:profile-icon-edit-text {:font-size 12}}
:new-group {:group-name-text {:font-size 12}
:members-text {:font-size 14}
:members-text-count {:font-size 14}

View File

@ -15,5 +15,14 @@
[text {:style st/action-button-label}
label]]]])
(defn action-button-disabled [label icon-key]
[view st/action-button
[view st/action-button-icon-container-disabled
[view {:opacity 0.4}
[icon icon-key]]]
[view st/action-button-label-container
[text {:style st/action-button-label-disabled}
label]]])
(defn action-separator []
[list-separator])

View File

@ -1,15 +1,18 @@
(ns status-im.components.action-button.styles
(:require-macros [status-im.utils.styles :refer [defstyle]])
(:require [status-im.components.styles :refer [color-white
(:require [status-im.utils.platform :as p]
[status-im.components.styles :refer [color-white
color-light-blue-transparent
color-light-blue
color-black]]))
color-light-gray
color-black
color-gray4]]))
(defstyle action-button
{:padding-left 16
:flex-direction :row
:align-items :center
:ios {:height 64}
:ios {:height 63}
:android {:height 56}})
(defstyle action-button-icon-container
@ -38,3 +41,15 @@
:padding-bottom 8}})
(def action-button-label-disabled
(merge action-button-label
{:color color-gray4}))
(defstyle action-button-icon-container-disabled
{:border-radius 50
:width 40
:height 40
:align-items :center
:justify-content :center
:ios {:background-color color-light-gray}})

View File

@ -19,6 +19,12 @@
[view st/separator-wrapper
[view (merge st/separator style)]])
(defn form-spacer []
[view
[bottom-shaddow]
[view st/form-spacer]
[top-shaddow]])
(defn list-separator []
[separator st/list-separator])

View File

@ -63,3 +63,7 @@
:padding-left 8
:color text4-color}))
(defstyle form-spacer
{:ios {:height 16}
:android {:height 11}})

View File

@ -39,16 +39,19 @@
:auto-capitalize :sentences})
(defn field-animation [{:keys [top to-top font-size to-font-size
line-width to-line-width line-height to-line-height]}]
line-width to-line-width line-height to-line-height]} & [value-blank?]]
(let [duration (:label-animation-duration config)
animation (anim/parallel [(anim/timing top {:toValue to-top
:duration duration})
(anim/timing font-size {:toValue to-font-size
animation (anim/parallel (into []
(concat
(when (or (nil? value-blank?) value-blank?)
[(anim/timing top {:toValue to-top
:duration duration})
(anim/timing line-width {:toValue to-line-width
:duration duration})
(anim/timing line-height {:toValue to-line-height
:duration duration})])]
(anim/timing font-size {:toValue to-font-size
:duration duration})])
[(anim/timing line-width {:toValue to-line-width
:duration duration})
(anim/timing line-height {:toValue to-line-height
:duration duration})])))]
(anim/start animation (fn [arg]
(when (.-finished arg)
(log/debug "Field animation finished"))))))
@ -92,7 +95,7 @@
(log/debug "Input blurred")
(r/set-state component {:has-focus false
:float-label? (if (s/blank? value) false true)})
(field-animation animation)
(field-animation animation (s/blank? value))
(when onBlur (onBlur)))
(defn get-width [event]

View File

@ -103,29 +103,6 @@
:line-height 20
:letter-spacing -0.2
:color styles/text1-color}}
:profile {:profile-bage {:padding-top 24}
:profile-name-text {:font-size 17
:line-height 20
:letter-spacing -0.2}
:profile-status-text {:font-size 14
:line-height 20
:letter-spacing -0.2}
:profile-setting-item {:padding-left 16
:padding-right 16
:height 73}
:profile-setting-title {:font-size 14
:letter-spacing -0.2}
:profile-setting-text {:font-size 17
:letter-spacing -0.2}
:profile-setting-spacing {:height 10}
:add-to-contacts-text {:font-size 17
:line-height 20
:letter-spacing -0.2}
:edit-name-title {:font-size 13
:letter-spacing -0.1}
:profile-icon-edit-text {:font-size 15
:line-height 20
:letter-spacing -0.2}}
:new-group {:group-name-text {:font-size 13}
:members-text {:letter-spacing -0.2
:font-size 16}

View File

@ -8,6 +8,7 @@
[status-im.components.toolbar-new.actions :as act]
[status-im.components.text-field.view :refer [text-field]]
[status-im.i18n :refer [label]]
[status-im.profile.screen :refer [colorize-status-hashtags]]
[status-im.components.confirm-button :refer [confirm-button]]
[status-im.components.chat-icon.screen :refer [my-profile-icon]]
[status-im.components.context-menu :refer [context-menu]]
@ -18,8 +19,11 @@
text
touchable-highlight
text-input]]
[status-im.utils.utils :refer [clean-text]]
[cljs.spec :as s]
[clojure.string :as str]
[status-im.utils.platform :refer [ios?]]
[cljs.spec :as s]))
[reagent.core :as r]))
(defn edit-my-profile-toolbartoolbar []
[toolbar {:title (label :t/edit-profile)
@ -29,11 +33,10 @@
[new-profile-name [:get-in [:profile-edit :name]]]
[view
[text-field
{:wrapper-style st/profile-name-wrapper
:line-color st/edit-line-color
{:line-color st/edit-line-color
:focus-line-color st/profile-focus-line-color
:focus-line-height st/profile-focus-line-height
:label-hidden? true
:label (label :t/name)
:input-style st/profile-name-input
:on-change-text #(dispatch [:set-in [:profile-edit :name] %])
:value new-profile-name}]])
@ -44,38 +47,50 @@
(defn edit-profile-bage [contact]
[view st/edit-profile-bage
[view
[view st/edit-profile-icon-container
[context-menu
[my-profile-icon {:account contact
:edit? true}]
profile-icon-options
st/context-menu-custom-styles]]
[view st/edit-profile-name-container
[text {:style st/edit-name-title}
(label :t/name)]
[profile-name-input]]])
(defn edit-profile-status [{:keys [status]}]
[view st/edit-profile-status
[view
[text {:style st/edit-status-title} "Status"]
[view
[text-field
{:wrapper-style st/profile-status-wrapper
:line-color st/edit-line-color
:focus-line-color st/profile-focus-line-color
:focus-line-height st/profile-focus-line-height
:multiline true
:max-length 140
:placeholder (label :t/profile-no-status)
:label-hidden? true
:input-style st/profile-status-input
:on-change-text #(dispatch [:set-in [:profile-edit :status] %])
:value status}]]]])
(defn edit-profile-status [{:keys [status edit-status?]}]
(let [input-ref (r/atom nil)]
[view st/edit-profile-status
[scroll-view
(if edit-status?
[text-input
{:ref #(reset! input-ref %)
:auto-focus edit-status?
:multiline true
:max-length 140
:placeholder (label :t/status)
:style st/profile-status-input
:on-change-text #(dispatch [:set-in [:profile-edit :status] (clean-text %)])
:on-blur #(dispatch [:set-in [:profile-edit :edit-status?] false])
:blur-on-submit true
:on-submit-editing #(.blur @input-ref)
:default-value status}]
[touchable-highlight {:on-press #(dispatch [:set-in [:profile-edit :edit-status?] true])}
[view
(if (str/blank? status)
[text {:style st/add-a-status}
(label :t/status)]
[text {:style st/profile-status-text}
(colorize-status-hashtags status)])]])]]))
(defn status-prompt [{:keys [status]}]
(when (or (nil? status) (str/blank? status))
[view st/status-prompt
[text {:style st/status-prompt-text}
(colorize-status-hashtags (label :t/status-prompt))]]))
(defview edit-my-profile []
[current-account [:get-current-account]
changed-account [:get :profile-edit]]
{:component-will-unmount #(dispatch [:set-in [:profile-edit :edit-status?] false])}
(let [profile-edit-data-valid? (s/valid? ::v/profile changed-account)
profile-edit-data-changed? (or (not= (:name current-account) (:name changed-account))
(not= (:status current-account) (:status changed-account))
@ -84,10 +99,10 @@
st/profile)
[status-bar]
[edit-my-profile-toolbartoolbar]
[view {:flex 1}
[scroll-view st/edit-my-profile-form
[view st/edit-my-profile-form
[edit-profile-bage changed-account]
[edit-profile-status changed-account]]]
[edit-profile-status changed-account]
[status-prompt changed-account]]
(when (and profile-edit-data-changed? profile-edit-data-valid?)
[confirm-button (label :t/save) #(do
(dispatch [:check-status-change (:status changed-account)])

View File

@ -4,12 +4,16 @@
[clojure.string :as str]
[reagent.core :as r]
[status-im.contacts.styles :as cst]
[status-im.components.common.common :refer [separator]]
[status-im.components.common.common :refer [separator
form-spacer
top-shaddow
bottom-shaddow]]
[status-im.components.styles :refer [color-blue color-gray5]]
[status-im.components.context-menu :refer [context-menu]]
[status-im.components.action-button.action-button :refer [action-button
action-button-disabled
action-separator]]
[status-im.components.common.common :refer [top-shaddow bottom-shaddow]]
[status-im.components.action-button.styles :refer [actions-list]]
[status-im.components.react :refer [view
text
text-input
@ -33,6 +37,12 @@
[toolbar {:actions [(act/opts [{:value #(dispatch [:open-edit-my-profile])
:text (label :t/edit)}])]}])
(defn profile-toolbar [contact]
[toolbar
(when-not (:pending? contact)
{:actions [(act/opts [{:value #(dispatch [:hide-contact contact])
:text (label :t/remove-from-contacts)}])]})])
(defn online-text [last-online]
(let [last-online-date (time/to-date last-online)
now-date (time/now)]
@ -45,33 +55,24 @@
[view st/profile-bage
[my-profile-icon {:account contact
:edit? false}]
[view st/profile-name-container
[text {:style st/profile-name-text}
name]]
(when-not (nil? last-online)
[view st/profile-status-container
[text {:style st/profile-status-text}
(online-text last-online)]])])
[view st/profile-bage-name-container
[text {:style st/profile-name-text
:number-of-lines 1}
name]
(when-not (nil? last-online)
[view st/profile-activity-status-container
[text {:style st/profile-activity-status-text}
(online-text last-online)]])]])
(defn add-to-contacts [pending? chat-id]
[view
(defn profile-actions [{:keys [pending? whisper-identity]} chat-id]
[view actions-list
(if pending?
[touchable-highlight {:on-press #(dispatch [:add-pending-contact chat-id])}
[view st/add-to-contacts
[text {:style st/add-to-contacts-text
:font (when android? :medium)
:uppercase? (get-in platform-specific [:uppercase?])}
(label :t/add-to-contacts)]]]
[view st/in-contacts
[icon :ok_blue]
[view st/in-contacts-inner
[text {:style st/in-contacts-text
:font (when android? :medium)
:uppercase? (get-in platform-specific [:uppercase?])}
(label :t/in-contacts)]]])])
(defn profile-actions [whisper-identity chat-id]
[view st/profile-actions-container
[action-button (label :t/add-to-contacts)
:add_blue
#(dispatch [:add-pending-contact chat-id])]
[action-button-disabled (label :t/in-contacts)
:ok_dark])
[action-separator]
[action-button (label :t/start-conversation)
:chats_blue
#(message-user whisper-identity)]
@ -82,7 +83,7 @@
(defn profile-info-item [{:keys [label value options text-mode empty-value?]}]
[view st/profile-setting-item
[view (st/profile-setting-text-container options)
[view (st/profile-info-text-container options)
[text {:style st/profile-setting-title}
label]
[view st/profile-setting-spacing]
@ -137,18 +138,8 @@
^{:key (str "item-" i)}
(str status " "))))
(defn profile-info-status-item [status & [options]]
(let [status-empty? (= "" status)
status-text (if status-empty?
(label :t/profile-no-status)
(colorize-status-hashtags status))]
[profile-info-item {:label (label :t/status)
:value status-text
:options options
:empty-value? status-empty?}]))
(defn profile-info-phone-item [phone & [options]]
(let [phone-empty? (or (nil? phone) (= "" phone))
(let [phone-empty? (or (nil? phone) (str/blank? phone))
phone-text (if phone-empty?
(label :t/not-specified)
phone)]
@ -157,27 +148,16 @@
:options options
:empty-value? phone-empty?}]))
(defn profile-info [{:keys [whisper-identity :whisper-identity
status :status
phone :phone] :as contact}]
[view
[profile-info-status-item status]
[info-item-separator]
[profile-info-address-item contact]
[info-item-separator]
[profile-info-public-key-item whisper-identity contact]
[info-item-separator]
[profile-info-phone-item phone]])
(defn my-profile-info [{:keys [public-key :public-key
status :status
phone :phone] :as contact}]
[view st/my-profile-info-container
[profile-info-status-item
status
[{:value #(dispatch [:open-edit-my-profile])
:text (label :t/edit)}]]
(defn profile-info [{:keys [whisper-identity status phone] :as contact}]
[view
[profile-info-address-item contact]
[info-item-separator]
[profile-info-public-key-item whisper-identity contact]
[info-item-separator]
[profile-info-phone-item phone]])
(defn my-profile-info [{:keys [public-key status phone] :as contact}]
[view
[profile-info-address-item contact]
[info-item-separator]
[profile-info-public-key-item public-key contact]
@ -187,40 +167,58 @@
[{:value #(dispatch [:phone-number-change-requested])
:text (label :t/edit)}]]])
(defn- profile-status-on-press []
(dispatch [:set-in [:profile-edit :edit-status?] true])
(dispatch [:open-edit-my-profile]))
(defn profile-status [status & [edit?]]
[view st/profile-status-container
(if (or (nil? status) (str/blank? status))
[touchable-highlight {:on-press profile-status-on-press}
[view
[text {:style st/add-a-status}
(label :t/add-a-status)]]]
[scroll-view
[touchable-highlight {:on-press (when edit? profile-status-on-press)}
[view
[text {:style st/profile-status-text}
(colorize-status-hashtags status)]]]])])
(defview my-profile []
[current-account [:get-current-account]]
[{:keys [status] :as current-account} [:get-current-account]]
[view st/profile
[status-bar]
[my-profile-toolbar]
[view st/my-profile-form
[profile-bage current-account]]
[bottom-shaddow]
[view st/profile-form
[profile-bage current-account]
[profile-status status true]]
[form-spacer]
[view actions-list
[action-button (label :t/show-qr)
:q_r_blue
(show-qr current-account :public-key)]]
[form-spacer]
[view st/profile-info-container
[top-shaddow]
[view st/profile-actions-container
[action-button (label :t/share-qr)
:q_r_blue
(show-qr current-account :public-key)]]
[view st/form-separator]
[my-profile-info current-account]
[bottom-shaddow]]])
(defview profile []
[{:keys [pending?
status
whisper-identity]
:as contact} [:contact]
chat-id [:get :current-chat-id]]
[view st/profile
[status-bar]
[toolbar]
[profile-toolbar contact]
[scroll-view
[view st/profile-form
[profile-bage contact]
[add-to-contacts pending? chat-id]]
[bottom-shaddow]
(when (and (not (nil? status)) (not (str/blank? status)))
[profile-status status])]
[form-spacer]
[profile-actions contact chat-id]
[form-spacer]
[view st/profile-info-container
[top-shaddow]
[profile-actions whisper-identity chat-id]
[view st/form-separator]
[profile-info contact]
[bottom-shaddow]]]])

View File

@ -1,6 +1,7 @@
(ns status-im.profile.styles
(:require-macros [status-im.utils.styles :refer [defstyle]])
(:require [status-im.components.styles :refer [color-white
color-black
color-gray4
color-gray5
color-light-gray
@ -9,9 +10,6 @@
text1-color]]
[status-im.utils.platform :as p]))
(defn ps-profile [item]
(get-in p/platform-specific [:component-styles :profile item]))
(def profile
{:flex 1
:background-color color-light-gray
@ -19,146 +17,121 @@
(def profile-form
{:background-color color-white
:padding-bottom 16})
(def my-profile-form
{:background-color color-white
:padding-bottom 24})
:padding 16})
(def edit-my-profile-form
{:background-color color-white
:flex 1})
(defstyle profile-info-container
{:background-color color-white
:ios {:margin-top 16}
:android {:margin-top 12}})
{:background-color color-white})
(defstyle profile-actions-container
{:android {:padding-top 8
:padding-bottom 8}})
(def status-prompt
{:padding-left 16
:padding-right 16
:padding-top 6})
(defstyle my-profile-info-container
{:android {:padding-top 8
:padding-bottom 8}})
(defstyle status-prompt-text
{:color color-gray4
:ios {:font-size 14
:line-height 25
:letter-spacing -0.2}
:android {:line-height 18
:font-size 12}})
(def profile-status-container
{:background-color color-light-gray
:margin-top 16
:border-radius 4
:padding 16
:max-height 114})
(def profile-bage
(merge (ps-profile :profile-bage)
{:align-items :center}))
{:flex-direction :row})
(def edit-profile-bage
{:flex-direction :row
:align-items :center
:padding-left 24
:padding-top 25})
:padding-left 24})
(def context-menu-custom-styles
{:optionsContainer {:margin-top 78}})
(def profile-name-container
{:margin-top 12})
(defstyle edit-profile-name-container
{:flex 1
:ios {:padding-left 32
:padding-top 11}
:padding-top 15}
:android {:padding-top 16
:padding-left 16}})
(def edit-profile-icon-container
{:padding-top 25})
(def edit-name-title
(merge (ps-profile :edit-name-title)
{:color color-gray4}))
{:color color-gray4
:ios {:font-size 13
:letter-spacing -0.1}
:android {:font-size 12}})
(def edit-status-title
edit-name-title)
(defstyle profile-name-text
{:ios {:font-size 17
:line-height 20
:letter-spacing -0.2}
:android {:color color-black
:font-size 16
:line-height 24}})
(def profile-name-text
(ps-profile :profile-name-text))
(def profile-bage-name-container
{:flex 1
:justify-content :center
:padding-left 16})
(def profile-status-container
(def profile-activity-status-container
{:margin-top 4})
(def profile-status-text
(merge (ps-profile :profile-status-text)
{:color color-gray4}))
(defstyle profile-activity-status-text
{:color color-gray4
:ios {:font-size 14
:line-height 20
:letter-spacing -0.2}
:android {:font-size 15
:line-height 20}})
(def profile-setting-item
(merge (ps-profile :profile-setting-item)
{:flex-direction :row
:align-items :center}))
(defstyle profile-setting-item
{:flex-direction :row
:align-items :center
:padding-left 16
:padding-right 16
:ios {:height 73}
:android {:height 72}})
(defn profile-setting-text-container [options]
(defn profile-info-text-container [options]
{:flex 1
:padding-right (if options 16 40)})
(def profile-setting-title
(merge (ps-profile :profile-setting-title)
{:color color-gray4}))
(defstyle profile-setting-title
{:color color-gray4
:ios {:font-size 14
:letter-spacing -0.2}
:android {:font-size 12}})
(def profile-setting-text
(ps-profile :profile-setting-text))
(defstyle profile-setting-text
{:ios {:font-size 17
:letter-spacing -0.2}
:android {:font-size 16
:color color-black}})
(defstyle profile-setting-spacing
{:ios {:height 10}
:android {:height 7}})
(def profile-setting-text-empty
(merge profile-setting-text
{:color color-gray4}))
(def profile-setting-spacing
(ps-profile :profile-setting-spacing))
(def add-to-contacts
{:margin-top 24
:margin-left 16
:margin-right 16
:background-color color-light-blue
:border-radius 4
:height 52
:align-items :center
:justify-content :center})
(def in-contacts
(merge add-to-contacts
{:flex-direction :row
:padding-right 40
:padding-left 16
:justify-content :flex-start
:background-color color-light-blue-transparent}))
(def in-contacts-inner
{:align-items :center
:flex 1})
(def add-to-contacts-text
(merge (ps-profile :add-to-contacts-text)
{:color color-white}))
(def in-contacts-text
(merge add-to-contacts-text
{:color color-light-blue}))
(def info-item-separator
{:margin-left 16})
(def form-separator
(merge (ps-profile :form-separator)
{:height 1
:background-color color-gray5
:opacity 0.5}))
(def profile-name-wrapper
{:padding-top 0
:margin-top 0
:margin-bottom 0
:height 42
:padding-bottom 0})
(defstyle profile-status-wrapper
{:padding-top 0
:margin-bottom 0
:height 85
:padding-bottom 1
:ios {:margin-top 3}
:android {:margin-top 1}})
(def edit-line-color
(if p/ios?
(str color-gray5 "80")
@ -183,11 +156,40 @@
:padding-bottom 0}})
(defstyle profile-status-input
{:height 82
:line-height 24;;TODO doesnt' work for multiline because bug in the RN
:android {:padding-top 0}})
{:line-height 24;;TODO doesnt' work for multiline because a bug in the RN
:color text1-color
:padding-left 0
:ios {:font-size 17
:padding-bottom 0
:padding-top 0
:height 74
:letter-spacing -0.2}
:android {:font-size 16
:padding-top 5
:height 74
:text-align-vertical :top
:padding-bottom 0}})
(def edit-profile-status
{:padding-left 16
:padding-top 35})
(defstyle profile-status-text
{:color text1-color
:line-height 24
:ios {:font-size 17
:letter-spacing -0.2}
:android {:font-size 16}})
(defstyle edit-profile-status
{:background-color color-light-gray
:border-radius 4
:height 104
:padding-horizontal 16
:padding-bottom 16
:margin-left 16
:margin-right 16
:margin-top 24
:ios {:padding-top 10}
:android {:padding-top 13}})
(def add-a-status
(merge profile-status-text
{:color color-gray4}))

View File

@ -77,8 +77,11 @@
:phone-number "Phone number"
:email "Email"
:profile-no-status "No status"
:add-a-status "Add a status..."
:status-prompt "Create a status to help people know about the things you are offering. You can use #hashtags too."
:add-to-contacts "Add to contacts"
:in-contacts "In contacts"
:remove-from-contacts "Remove from contacts"
:start-conversation "Start conversation"
:send-transaction "Send transaction"
:share-qr "Share QR"