Skip to content

Commit

Permalink
Add dark mode to group chats
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ferossgp
Ferossgp committed Mar 30, 2020
1 parent 287dc7a commit ea76e61
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 132 deletions.
41 changes: 0 additions & 41 deletions src/status_im/ui/components/contact/contact.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,44 +25,3 @@
(if ens-verified
(str "@" (or (stateofus/username name) name))
(gfycat/generate-gfy public-key)))

(defn contact-view
[{:keys [style contact extended? on-press extend-options
info show-forward? accessibility-label inner-props]
:or {accessibility-label :contact-item}}]
[react/touchable-highlight (merge {:accessibility-label accessibility-label}
(when-not extended?
{:on-press (when on-press #(on-press contact))}))
[react/view {:style styles/contact-container}
[chat-icon/contact-icon-contacts-tab contact]
[react/view styles/info-container-to-refactor
[react/text (merge {:style styles/name-text
:number-of-lines 1}
inner-props)
(or (format-name contact) (i18n/label :t/chat-name))]]
(when show-forward?
[react/view styles/forward-btn
[vector-icons/icon :main-icons/next]])
[react/view {:style {:padding-left 16}}
(when info
[react/text {:style styles/info-text}
info])
(when (and extended? extend-options)
[react/touchable-highlight {:on-press extend-options
:accessibility-label :menu-option}
[vector-icons/icon :main-icons/more {:accessibility-label :options}]])]]])

(views/defview toggle-contact-view
[{:keys [public-key] :as contact} selected-key on-toggle-handler disabled?]
(views/letsubs [checked [selected-key public-key]]
[react/view {:accessibility-label :contact-item}
[list/list-item-with-checkbox
{:checked? checked
:disabled? disabled?
:on-value-change #(on-toggle-handler checked public-key)}
[list/item
[chat-icon/contact-icon-contacts-tab contact]
[react/view styles/info-container
[react/text {:style styles/name-text
:number-of-lines 1}
(or (format-name contact) (i18n/label :t/chat-name))]]]]]))
8 changes: 4 additions & 4 deletions src/status_im/ui/components/contact/styles.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@
{:flex 1
:justify-content :center})

(def name-text
{:color colors/text
(defn name-text []
{:color colors/gray
:font-size 17})

(def info-text
(defn info-text []
{:margin-top 1
:font-size 12
:color colors/text-gray})
:color colors/gray})

(def forward-btn
{:opacity 0.4
Expand Down
19 changes: 7 additions & 12 deletions src/status_im/ui/screens/group/styles.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,13 @@
:opacity (if enabled? 1 0.3)})

(def group-container
{:flex 1
:flex-direction :column
:background-color colors/white})
{:flex 1
:flex-direction :column})

(def contact
{:padding-left 0})

(def contacts-list
{:background-color colors/white})

(def no-contact-text
(defn no-contact-text []
{:margin-bottom 20
:margin-horizontal 50
:text-align :center
Expand All @@ -38,12 +34,11 @@
:font-size 12
:margin-horizontal 17})

(def bottom-container
(defn bottom-container []
{:align-items :center
:justify-content :space-between
:flex-direction :row
:height tabs-height
:background-color colors/white
:border-top-width 1
:border-top-color colors/gray-lighter})

Expand All @@ -55,19 +50,19 @@
(def toolbar-header-container
{:align-items :center})

(def toolbar-sub-header
(defn toolbar-sub-header []
{:color colors/gray})

(def no-contacts
{:flex 1
:justify-content :center
:align-items :center})

(def search-container
(defn search-container []
{:border-bottom-color colors/gray-lighter
:border-bottom-width 1})

(def members-title
(defn members-title []
{:color colors/gray
:margin-top 14
:margin-bottom 4})
99 changes: 39 additions & 60 deletions src/status_im/ui/screens/group/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,29 +11,33 @@
[status-im.ui.components.button :as button]
[status-im.ui.components.list-selection :as list-selection]
[status-im.ui.components.common.common :as components.common]
[status-im.ui.components.checkbox.view :as checkbox]
[status-im.ui.components.button :as button]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.topbar :as topbar]
[status-im.ui.components.search-input.view :as search]
[status-im.utils.platform :as platform]
[status-im.ui.components.chat-icon.screen :as chat-icon]
[status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.contact.contact :as contact]
[status-im.ui.screens.add-new.styles :as add-new.styles]
[status-im.ui.screens.group.styles :as styles]))

(defn- render-contact [contact]
[contact/contact-view {:contact contact
:style styles/contact
:accessibility-label :chat-member-item}])
(defn- render-contact [row]
[list-item/list-item
{:title (contact/format-name row)
:icon [chat-icon/contact-icon-contacts-tab row]}])

(defn- on-toggle [allow-new-users? checked? public-key]
(cond

checked?
(re-frame/dispatch [:deselect-contact public-key allow-new-users?])

;; Only allow new users if not reached the maximum
;; Only allow new users if not reached the maximum
(and (not checked?)
allow-new-users?)
(re-frame/dispatch [:select-contact public-key allow-new-users?])))
Expand All @@ -49,22 +53,20 @@
allow-new-users?)
(re-frame/dispatch [:select-participant public-key allow-new-users?])))

(defn- toggle-item []
(fn [allow-new-users? subs-name {:keys [public-key] :as contact} on-toggle]
(let [contact-selected? @(re-frame/subscribe [subs-name public-key])]
[list-item/list-item
{:title (contact/format-name contact)
:icon [chat-icon/contact-icon-contacts-tab contact]
:on-press #(on-toggle allow-new-users? contact-selected? public-key)
:accessories [[checkbox/checkbox {:checked? contact-selected?}]]}])))

(defn- group-toggle-contact [allow-new-users? contact]
[contact/toggle-contact-view
contact
:is-contact-selected?
(partial on-toggle allow-new-users?)
(and (not (:is-contact-selected? contact))
(not allow-new-users?))])
[toggle-item allow-new-users? :is-contact-selected? contact on-toggle])

(defn- group-toggle-participant [allow-new-users? contact]
[contact/toggle-contact-view
contact
:is-participant-selected?
(partial on-toggle-participant allow-new-users?)
;; Disable if not-checked and we don't allow new users
(and (not (:is-participant-selected? contact))
(not allow-new-users?))])
[toggle-item allow-new-users? :is-participant-selected? contact on-toggle-participant])

(defn- handle-invite-friends-pressed []
(if utils.platform/desktop?
Expand All @@ -77,46 +79,22 @@
(for [contact contacts]
^{:key (:public-key contact)}
(render-fn contact))
[list/flat-list {:style styles/contacts-list
:data contacts
:key-fn :address
[list/flat-list {:data contacts
:key-fn :public-key
:render-fn render-fn
:keyboardShouldPersistTaps :always}])])

(defn no-contacts [{:keys [no-contacts]}]
[react/view {:style styles/no-contacts}
[react/text
{:style styles/no-contact-text}
{:style (styles/no-contact-text)}
no-contacts]
(when-not platform/desktop?
[button/button
{:type :secondary
:on-press handle-invite-friends-pressed
:label :t/invite-friends}])])

(views/defview bottom-container [{:keys [on-press on-press-prev disabled label accessibility-label]}]
[react/view {:style {:height 52
:elevation 8
:shadow-radius 4
:shadow-offset {:width 0 :height -5}
:shadow-opacity 0.3
:shadow-color "rgba(0, 9, 26, 0.12)"}}
(when on-press-prev
[react/view
[button/button
{:type :previous
:accessibility-label (or accessibility-label :previous-button)
:label (i18n/label :t/back)
:on-press on-press-prev}]])
[react/view {:style components.styles/flex}]
[react/view
[button/button
{:type :next
:accessibility-label (or accessibility-label :next-button)
:label label
:disabled? disabled
:on-press on-press}]]])

(defn filter-contacts [filter-text contacts]
(let [lower-filter-text (string/lower-case (str filter-text))
filter-fn (fn [{:keys [name alias]}]
Expand All @@ -139,7 +117,7 @@
[react/view
[react/text (i18n/label :t/new-group-chat)]]
[react/view
[react/text {:style styles/toolbar-sub-header}
[react/text {:style (styles/toolbar-sub-header)}
(i18n/label :t/group-chat-members-count
{:selected (inc (count contacts))
:max constants/max-group-chat-participants})]]]]
Expand All @@ -149,15 +127,15 @@
[react/view {:style {:padding-vertical 16
:flex 1}}
[react/view {:style {:padding-horizontal 16}}
[react/view add-new.styles/input-container
[react/view (add-new.styles/input-container)
[react/text-input
{:auto-focus true
:on-change-text #(re-frame/dispatch [:set :new-chat-name %])
:default-value group-name
:placeholder (i18n/label :t/set-a-topic)
:style add-new.styles/input
:accessibility-label :chat-name-input}]]
[react/text {:style styles/members-title}
[react/text {:style (styles/members-title)}
(i18n/label :t/members-title)]]
[react/view {:style {:margin-top 8}}
[list/flat-list {:data contacts
Expand All @@ -166,7 +144,7 @@
:bounces false
:keyboard-should-persist-taps :always
:enable-empty-sections true}]]]
[react/view {:style styles/bottom-container}
[react/view {:style (styles/bottom-container)}
[react/view
[button/button
{:type :previous
Expand All @@ -187,8 +165,9 @@
(defn searchable-contact-list []
(let [search-value (reagent/atom nil)]
(fn [{:keys [contacts no-contacts-label toggle-fn allow-new-users?]}]
(prn contacts)
[react/view {:style {:flex 1}}
[react/view {:style styles/search-container}
[react/view {:style (styles/search-container)}
[search/search-input {:on-cancel #(reset! search-value nil)
:on-change #(reset! search-value %)}]]
[react/view {:style {:flex 1
Expand All @@ -203,13 +182,13 @@
(views/letsubs [contacts [:contacts/active]
selected-contacts-count [:selected-contacts-count]]
[react/view {:style styles/group-container}
[toolbar/toolbar {:border-bottom-color :white}
[toolbar/toolbar {:border-bottom-color colors/white}
toolbar/default-nav-back
[react/view {:style styles/toolbar-header-container}
[react/view
[react/text (i18n/label :t/new-group-chat)]]
[react/view
[react/text {:style styles/toolbar-sub-header}
[react/text {:style (styles/toolbar-sub-header)}
(i18n/label :t/group-chat-members-count
{:selected (inc selected-contacts-count)
:max constants/max-group-chat-participants})]]]]
Expand All @@ -220,7 +199,7 @@
:toggle-fn group-toggle-contact
:allow-new-users? (< selected-contacts-count
(dec constants/max-group-chat-participants))}]
[react/view {:style styles/bottom-container}
[react/view {:style (styles/bottom-container)}
[react/view {:style components.styles/flex}]
[react/view
[button/button
Expand All @@ -237,13 +216,13 @@
selected-contacts-count [:selected-participants-count]]
(let [current-participants-count (count (:contacts current-chat))]
[react/view {:style styles/group-container}
[toolbar/toolbar {:border-bottom-color :white}
[toolbar/toolbar {:border-bottom-color colors/white}
toolbar/default-nav-back
[react/view {:style styles/toolbar-header-container}
[react/view
[react/text (i18n/label :t/add-members)]]
[react/view
[react/text {:style styles/toolbar-sub-header}
[react/text {:style (styles/toolbar-sub-header)}
(i18n/label :t/group-chat-members-count
{:selected (+ current-participants-count selected-contacts-count)
:max constants/max-group-chat-participants})]]]]
Expand All @@ -255,7 +234,7 @@
:allow-new-users? (< (+ current-participants-count
selected-contacts-count)
constants/max-group-chat-participants)}]
[react/view {:style styles/bottom-container}
[react/view {:style (styles/bottom-container)}
[react/view {:style styles/bottom-container-center}
[button/button
{:type :secondary
Expand All @@ -272,9 +251,9 @@
{:title :t/edit-group
:modal? true}]
[react/keyboard-avoiding-view {:style {:flex 1}}
[react/view {:style {:flex-direction :row
:padding 16}}
[react/view add-new.styles/new-chat-input-container
[react/view {:style {:padding 16
:flex 1}}
[react/view {:style (add-new.styles/input-container)}
[react/text-input
{:on-change-text #(reset! new-group-chat-name %)
:default-value name
Expand All @@ -285,7 +264,7 @@
:accessibility-label :new-chat-name
:return-key-type :go}]]]
[react/view {:style {:flex 1}}]
[react/view {:style styles/bottom-container}
[react/view {:style (styles/bottom-container)}
[react/view {:style styles/bottom-container-center}
[button/button
{:type :secondary
Expand Down
Loading

0 comments on commit ea76e61

Please sign in to comment.