From d1fe30cd59df954e7bed06d0a48cbb9c9a264f9a Mon Sep 17 00:00:00 2001 From: Alexander Pantyuhov Date: Tue, 27 Sep 2016 17:00:43 +0300 Subject: [PATCH] correct styles for new group chat screen (#253 and #266), better chat screen UI Former-commit-id: c095db8dd305706905d104addd0e35ed628da7e2 --- src/status_im/components/text_field/view.cljs | 8 +- src/status_im/db.cljs | 1 - src/status_im/new_group/handlers.cljs | 19 +---- src/status_im/new_group/screen.cljs | 49 +++++++------ src/status_im/new_group/styles.cljs | 73 ++++++++++--------- src/status_im/new_group/validations.cljs | 18 +++++ src/status_im/new_group/views/contact.cljs | 7 +- src/status_im/translations/en.cljs | 6 +- 8 files changed, 96 insertions(+), 85 deletions(-) create mode 100644 src/status_im/new_group/validations.cljs diff --git a/src/status_im/components/text_field/view.cljs b/src/status_im/components/text_field/view.cljs index 4828f0172b..988226722f 100644 --- a/src/status_im/components/text_field/view.cljs +++ b/src/status_im/components/text_field/view.cljs @@ -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 diff --git a/src/status_im/db.cljs b/src/status_im/db.cljs index 3fd96c1138..ec09eeffd4 100644 --- a/src/status_im/db.cljs +++ b/src/status_im/db.cljs @@ -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}) diff --git a/src/status_im/new_group/handlers.cljs b/src/status_im/new_group/handlers.cljs index ab6611c38c..e1eebd932f 100644 --- a/src/status_im/new_group/handlers.cljs +++ b/src/status_im/new_group/handlers.cljs @@ -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! diff --git a/src/status_im/new_group/screen.cljs b/src/status_im/new_group/screen.cljs index b865de3cbc..a5387ba7cc 100644 --- a/src/status_im/new_group/screen.cljs +++ b/src/status_im/new_group/screen.cljs @@ -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)]]] diff --git a/src/status_im/new_group/styles.cljs b/src/status_im/new_group/styles.cljs index 6473fbda41..4a88eef183 100644 --- a/src/status_im/new_group/styles.cljs +++ b/src/status_im/new_group/styles.cljs @@ -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]])) @@ -11,55 +11,56 @@ :opacity (if enabled? 1 0.3)}) (def new-group-container - {:flex 1 - :flexDirection :column - :backgroundColor color-white}) + {:flex 1 + :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 - :color text2-color - :fontSize 14 - :lineHeight 20}) + {:margin-top 24 + :margin-bottom 8 + :color text2-color + :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 - :width 17 - :height 17}) + {:margin-vertical 18 + :margin-horizontal 3 + :width 17 + :height 17}) (def add-text - {:marginTop 18 - :marginLeft 32 - :color text2-color - :fontSize 14 - :lineHeight 20}) + {:margin-top 16 + :margin-left 32 + :color text2-color + :font-size 14 + :line-height 20}) (def contacts-list - {:backgroundColor :white}) + {:background-color :white}) (def contact-container - {:flexDirection :row - :height 56}) + {: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}) diff --git a/src/status_im/new_group/validations.cljs b/src/status_im/new_group/validations.cljs new file mode 100644 index 0000000000..53b8182de6 --- /dev/null +++ b/src/status_im/new_group/validations.cljs @@ -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)) \ No newline at end of file diff --git a/src/status_im/new_group/views/contact.cljs b/src/status_im/new_group/views/contact.cljs index cfec8a409d..be080bda05 100644 --- a/src/status_im/new_group/views/contact.cljs +++ b/src/status_im/new_group/views/contact.cljs @@ -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]]) diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 7b08dd3623..bbe45b68c0 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -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"