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

correct styles for new group chat screen (#253 and #266), better chat screen UI 

Former-commit-id: c095db8dd3
This commit is contained in:
Alexander Pantyuhov 2016-09-27 17:00:43 +03:00 committed by Alexander Pantyuhov
parent 5907c60d5c
commit d1fe30cd59
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
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

1
src/status_im/db.cljs
View File

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

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

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

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

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

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

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

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}]
[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]])

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

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