Merge pull request #273 from status-im/bug/#253-and-#266
Correct styles for new group chat screen (#253 and #266)
Former-commit-id: ed0005328b
This commit is contained in:
commit
003d67bdff
|
@ -145,15 +145,17 @@
|
||||||
line-width
|
line-width
|
||||||
current-value
|
current-value
|
||||||
max-line-width] :as state} (r/state component)
|
max-line-width] :as state} (r/state component)
|
||||||
{:keys [wrapper-style input-style line-color focus-line-color secure-text-entry
|
{:keys [wrapper-style input-style label-hidden? line-color focus-line-color secure-text-entry
|
||||||
label-color error-color error label value on-focus on-blur
|
label-color error-color error label value on-focus on-blur
|
||||||
on-change-text on-change editable] :as props} (merge default-props (r/props component))
|
on-change-text on-change editable] :as props} (merge default-props (r/props component))
|
||||||
line-color (if error error-color line-color)
|
line-color (if error error-color line-color)
|
||||||
focus-line-color (if error error-color focus-line-color)
|
focus-line-color (if error error-color focus-line-color)
|
||||||
label-color (if (and error (not float-label?)) error-color label-color)
|
label-color (if (and error (not float-label?)) error-color label-color)
|
||||||
label (if error (str label " *") label)]
|
label (when-not label-hidden?
|
||||||
|
(if error (str label " *") label))]
|
||||||
[view (merge st/text-field-container wrapper-style)
|
[view (merge st/text-field-container wrapper-style)
|
||||||
[animated-text {:style (st/label label-top label-font-size label-color)} label]
|
(when-not label-hidden?
|
||||||
|
[animated-text {:style (st/label label-top label-font-size label-color)} label])
|
||||||
[text-input {:style (merge st/text-input input-style)
|
[text-input {:style (merge st/text-input input-style)
|
||||||
:placeholder ""
|
:placeholder ""
|
||||||
:editable editable
|
:editable editable
|
||||||
|
|
|
@ -45,7 +45,6 @@
|
||||||
:current-tag nil
|
:current-tag nil
|
||||||
:qr-codes {}
|
:qr-codes {}
|
||||||
:keyboard-height 0
|
:keyboard-height 0
|
||||||
:disable-group-creation false
|
|
||||||
:animations {;; todo clear this
|
:animations {;; todo clear this
|
||||||
:tabs-bar-value (anim/create-value 0)}
|
:tabs-bar-value (anim/create-value 0)}
|
||||||
:loading-allowed true})
|
:loading-allowed true})
|
||||||
|
|
|
@ -83,29 +83,12 @@
|
||||||
:private private-key}
|
:private private-key}
|
||||||
:callback #(dispatch [:incoming-message %1 %2])})))
|
:callback #(dispatch [:incoming-message %1 %2])})))
|
||||||
|
|
||||||
(defn enable-create-button
|
|
||||||
[db _]
|
|
||||||
(assoc db :disable-group-creation false))
|
|
||||||
|
|
||||||
(register-handler :create-new-group
|
(register-handler :create-new-group
|
||||||
(-> prepare-chat
|
(-> prepare-chat
|
||||||
((enrich add-chat))
|
((enrich add-chat))
|
||||||
((after create-chat!))
|
((after create-chat!))
|
||||||
((after show-chat!))
|
((after show-chat!))
|
||||||
((after start-listen-group!))
|
((after start-listen-group!))))
|
||||||
((enrich enable-create-button))))
|
|
||||||
|
|
||||||
(defn disable-create-button
|
|
||||||
[db _]
|
|
||||||
(assoc db :disable-group-creation true))
|
|
||||||
|
|
||||||
(defn dispatch-create-group
|
|
||||||
[_ [_ group-name]]
|
|
||||||
(dispatch [:create-new-group group-name]))
|
|
||||||
|
|
||||||
(register-handler :init-group-creation
|
|
||||||
(after dispatch-create-group)
|
|
||||||
disable-create-button)
|
|
||||||
|
|
||||||
(register-handler :group-chat-invite-received
|
(register-handler :group-chat-invite-received
|
||||||
(u/side-effect!
|
(u/side-effect!
|
||||||
|
|
|
@ -10,21 +10,20 @@
|
||||||
touchable-highlight
|
touchable-highlight
|
||||||
list-view
|
list-view
|
||||||
list-item]]
|
list-item]]
|
||||||
|
[status-im.components.text-field.view :refer [text-field]]
|
||||||
[status-im.components.styles :refer [color-purple]]
|
[status-im.components.styles :refer [color-purple]]
|
||||||
[status-im.components.status-bar :refer [status-bar]]
|
[status-im.components.status-bar :refer [status-bar]]
|
||||||
[status-im.components.toolbar :refer [toolbar]]
|
[status-im.components.toolbar :refer [toolbar]]
|
||||||
[status-im.utils.listview :refer [to-datasource]]
|
[status-im.utils.listview :refer [to-datasource]]
|
||||||
[status-im.new-group.views.contact :refer [new-group-contact]]
|
[status-im.new-group.views.contact :refer [new-group-contact]]
|
||||||
[status-im.new-group.styles :as st]
|
[status-im.new-group.styles :as st]
|
||||||
|
[status-im.new-group.validations :as v]
|
||||||
[status-im.i18n :refer [label]]
|
[status-im.i18n :refer [label]]
|
||||||
[status-im.components.styles :as cst]))
|
[cljs.spec :as s]))
|
||||||
|
|
||||||
|
|
||||||
(defview new-group-toolbar []
|
(defview new-group-toolbar []
|
||||||
[group-name [:get :new-chat-name]
|
[new-chat-name [:get :new-chat-name]]
|
||||||
creation-disabled? [:get :disable-group-creation]
|
(let [create-btn-enabled? (s/valid? ::v/name new-chat-name)]
|
||||||
valid? [:new-chat-name-valid?]]
|
|
||||||
(let [create-btn-enabled? (and valid? (not creation-disabled?))]
|
|
||||||
[view
|
[view
|
||||||
[status-bar]
|
[status-bar]
|
||||||
[toolbar
|
[toolbar
|
||||||
|
@ -32,31 +31,39 @@
|
||||||
:action {:image {:source res/v ;; {:uri "icon_search"}
|
:action {:image {:source res/v ;; {:uri "icon_search"}
|
||||||
:style (st/toolbar-icon create-btn-enabled?)}
|
:style (st/toolbar-icon create-btn-enabled?)}
|
||||||
:handler (when create-btn-enabled?
|
:handler (when create-btn-enabled?
|
||||||
#(dispatch [:init-group-creation group-name]))}}]]))
|
#(dispatch [:create-new-group new-chat-name]))}}]]))
|
||||||
|
|
||||||
(defview group-name-input []
|
(defview group-name-input []
|
||||||
[group-name [:get :new-chat-name]
|
[new-chat-name [:get :new-chat-name]]
|
||||||
validation-messages [:new-chat-name-validation-messages]]
|
|
||||||
[view
|
[view
|
||||||
[text-input
|
[text-field
|
||||||
{:underlineColorAndroid color-purple
|
{:error (cond
|
||||||
:style st/group-name-input
|
(not (s/valid? ::v/not-empty-string new-chat-name))
|
||||||
:autoFocus true
|
(label :t/empty-group-chat-name)
|
||||||
:placeholder (label :t/group-name)
|
(not (s/valid? ::v/not-illegal-name new-chat-name))
|
||||||
:onChangeText #(dispatch [:set :new-chat-name %])}
|
(label :t/illegal-group-chat-name))
|
||||||
group-name]
|
:wrapper-style st/group-chat-name-wrapper
|
||||||
(when (pos? (count validation-messages))
|
:error-color "#7099e6"
|
||||||
[text {:style st/group-name-validation-message} (first validation-messages)])])
|
:line-color "#0000001f"
|
||||||
|
:label-hidden? true
|
||||||
|
:input-style st/group-chat-name-input
|
||||||
|
:auto-focus true
|
||||||
|
:on-change-text #(dispatch [:set :new-chat-name %])
|
||||||
|
:value new-chat-name}]])
|
||||||
|
|
||||||
(defview new-group []
|
(defview new-group []
|
||||||
[contacts [:all-added-contacts]]
|
[contacts [:all-added-contacts]]
|
||||||
[view st/new-group-container
|
[view st/new-group-container
|
||||||
[new-group-toolbar]
|
[new-group-toolbar]
|
||||||
[view st/chat-name-container
|
[view st/chat-name-container
|
||||||
[text {:style st/chat-name-text} (label :t/chat-name)]
|
[text {:style st/members-text
|
||||||
|
:font :medium}
|
||||||
|
(label :t/group-chat-name)]
|
||||||
[group-name-input]
|
[group-name-input]
|
||||||
[text {:style st/members-text} (label :t/members-title)]
|
[text {:style st/members-text
|
||||||
[touchable-highlight {:on-press (fn [])}
|
:font :medium}
|
||||||
|
(label :t/members-title)]
|
||||||
|
#_[touchable-highlight {:on-press (fn [])}
|
||||||
[view st/add-container
|
[view st/add-container
|
||||||
[icon :add_gray st/add-icon]
|
[icon :add_gray st/add-icon]
|
||||||
[text {:style st/add-text} (label :t/add-members)]]]
|
[text {:style st/add-text} (label :t/add-members)]]]
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
(ns status-im.new-group.styles
|
(ns status-im.new-group.styles
|
||||||
(:require [status-im.components.styles :refer [color-white
|
(:require [status-im.components.styles :refer [color-white
|
||||||
color-purple
|
color-blue
|
||||||
text1-color
|
text1-color
|
||||||
text2-color
|
text2-color
|
||||||
toolbar-background1]]))
|
toolbar-background1]]))
|
||||||
|
@ -11,55 +11,56 @@
|
||||||
:opacity (if enabled? 1 0.3)})
|
:opacity (if enabled? 1 0.3)})
|
||||||
|
|
||||||
(def new-group-container
|
(def new-group-container
|
||||||
{:flex 1
|
{:flex 1
|
||||||
:flexDirection :column
|
:flex-direction :column
|
||||||
:backgroundColor color-white})
|
:background-color color-white})
|
||||||
|
|
||||||
(def chat-name-container
|
(def chat-name-container
|
||||||
{:marginHorizontal 16})
|
{:margin-left 16})
|
||||||
|
|
||||||
(def chat-name-text
|
(def group-chat-name-input
|
||||||
{:marginTop 24
|
{:font-size 14
|
||||||
:marginBottom 16
|
|
||||||
:color text2-color
|
|
||||||
:fontSize 14
|
|
||||||
:lineHeight 20})
|
|
||||||
|
|
||||||
(def group-name-input
|
|
||||||
{:marginLeft -4
|
|
||||||
:fontSize 14
|
|
||||||
:color text1-color})
|
:color text1-color})
|
||||||
|
|
||||||
(def group-name-validation-message
|
(def group-chat-name-wrapper
|
||||||
{:color :red})
|
{:padding-top 0})
|
||||||
|
|
||||||
(def members-text
|
(def members-text
|
||||||
{:marginTop 24
|
{:margin-top 24
|
||||||
:marginBottom 16
|
:margin-bottom 8
|
||||||
:color text2-color
|
:color text2-color
|
||||||
:fontSize 14
|
:font-size 14
|
||||||
:lineHeight 20})
|
:line-height 20})
|
||||||
|
|
||||||
(def add-container
|
(def add-container
|
||||||
{:flexDirection :row
|
{:flex-direction :row
|
||||||
:marginBottom 16})
|
:margin-bottom 16})
|
||||||
|
|
||||||
(def add-icon
|
(def add-icon
|
||||||
{:marginVertical 19
|
{:margin-vertical 18
|
||||||
:marginHorizontal 3
|
:margin-horizontal 3
|
||||||
:width 17
|
:width 17
|
||||||
:height 17})
|
:height 17})
|
||||||
|
|
||||||
(def add-text
|
(def add-text
|
||||||
{:marginTop 18
|
{:margin-top 16
|
||||||
:marginLeft 32
|
:margin-left 32
|
||||||
:color text2-color
|
:color text2-color
|
||||||
:fontSize 14
|
:font-size 14
|
||||||
:lineHeight 20})
|
:line-height 20})
|
||||||
|
|
||||||
(def contacts-list
|
(def contacts-list
|
||||||
{:backgroundColor :white})
|
{:background-color :white})
|
||||||
|
|
||||||
(def contact-container
|
(def contact-container
|
||||||
{:flexDirection :row
|
{:flex-direction :row
|
||||||
:height 56})
|
:justify-content :center
|
||||||
|
:align-items :center
|
||||||
|
:height 56})
|
||||||
|
|
||||||
|
(def contact-item-checkbox
|
||||||
|
{:outer-size 20
|
||||||
|
:filter-size 16
|
||||||
|
:inner-size 12
|
||||||
|
:outer-color color-blue
|
||||||
|
:inner-color color-blue})
|
||||||
|
|
|
@ -0,0 +1,18 @@
|
||||||
|
(ns status-im.new-group.validations
|
||||||
|
(:require [cljs.spec :as s]
|
||||||
|
[status-im.utils.phone-number :refer [valid-mobile-number?]]
|
||||||
|
[status-im.constants :refer [console-chat-id wallet-chat-id]]
|
||||||
|
[clojure.string :as str]))
|
||||||
|
|
||||||
|
(def homoglyph-finder (js/require "homoglyph-finder"))
|
||||||
|
|
||||||
|
(defn not-illegal-name? [username]
|
||||||
|
(let [username (some-> username (str/trim))]
|
||||||
|
(and (not (.isMatches homoglyph-finder username console-chat-id))
|
||||||
|
(not (.isMatches homoglyph-finder username wallet-chat-id)))))
|
||||||
|
|
||||||
|
(s/def ::not-empty-string (s/and string? not-empty))
|
||||||
|
(s/def ::not-illegal-name not-illegal-name?)
|
||||||
|
|
||||||
|
(s/def ::name (s/and ::not-empty-string
|
||||||
|
::not-illegal-name))
|
|
@ -14,8 +14,7 @@
|
||||||
(defview new-group-contact [{:keys [whisper-identity] :as contact}]
|
(defview new-group-contact [{:keys [whisper-identity] :as contact}]
|
||||||
[checked [:is-contact-selected? whisper-identity]]
|
[checked [:is-contact-selected? whisper-identity]]
|
||||||
[view st/contact-container
|
[view st/contact-container
|
||||||
[item-checkbox
|
[item-checkbox (merge {:on-toggle (on-toggle whisper-identity)
|
||||||
{:onToggle (on-toggle whisper-identity)
|
:checked checked}
|
||||||
:checked checked
|
st/contact-item-checkbox)]
|
||||||
:size 30}]
|
|
||||||
[contact-inner-view contact]])
|
[contact-inner-view contact]])
|
||||||
|
|
|
@ -56,7 +56,7 @@
|
||||||
:email "Email"
|
:email "Email"
|
||||||
:profile-no-status "No status"
|
:profile-no-status "No status"
|
||||||
:add-to-contacts "Add to contacts"
|
:add-to-contacts "Add to contacts"
|
||||||
:error-incorrect-name "Please, select another name"
|
:error-incorrect-name "Please select another name"
|
||||||
:error-incorrect-email "Incorrect e-mail"
|
:error-incorrect-email "Incorrect e-mail"
|
||||||
|
|
||||||
;;make_photo
|
;;make_photo
|
||||||
|
@ -139,7 +139,9 @@
|
||||||
:help-command-description "Help"
|
:help-command-description "Help"
|
||||||
|
|
||||||
;new-group
|
;new-group
|
||||||
:group-name "Group Name"
|
:group-chat-name "Chat name"
|
||||||
|
:empty-group-chat-name "Please enter a name"
|
||||||
|
:illegal-group-chat-name "Please select another name"
|
||||||
|
|
||||||
;participants
|
;participants
|
||||||
:add-participants "Add Participants"
|
:add-participants "Add Participants"
|
||||||
|
|
Loading…
Reference in New Issue