status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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:
Roman Volosovskyi 2016-09-28 17:27:01 +03:00 committed by GitHub
parent 0f81e29fad d1fe30cd59
commit 003d67bdff
8 changed files with 96 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/status_im/components/text_field/view.cljs
View File

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

1
src/status_im/db.cljs
View File

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

19
src/status_im/new_group/handlers.cljs
View File

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

49
src/status_im/new_group/screen.cljs
View File

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

61
src/status_im/new_group/styles.cljs
View File

@ -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]]))
@ -12,54 +12,55 @@
(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
:justify-content :center
:align-items :center
:height 56}) :height 56})
(def contact-item-checkbox
{:outer-size 20
:filter-size 16
:inner-size 12
:outer-color color-blue
:inner-color color-blue})

18
src/status_im/new_group/validations.cljs Normal file
View File

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

7
src/status_im/new_group/views/contact.cljs
View File

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

6
src/status_im/translations/en.cljs
View File

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