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