Skip to content

Commit

Permalink
Ui clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ferossgp @cammellos
Ferossgp authored and cammellos committed Mar 16, 2020
1 parent a5840dd commit 306034d
Show file tree
Hide file tree
Showing 8 changed files with 114 additions and 100 deletions.
28 changes: 15 additions & 13 deletions src/status_im/ui/components/button.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,8 @@
Spec: https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=858%3A0"

[{:keys [label type theme disabled? on-press accessibility-label style container-style] :or {type :main theme :blue}}]
[{:keys [label type theme disabled? on-press accessibility-label style container-style text-style]
:or {type :main theme :blue}}]
(let [label (utils.label/stringify label)]
[react/touchable-opacity (cond-> {:on-press on-press
:active-opacity 0.5
Expand All @@ -65,18 +66,19 @@
[react/view {:flex-direction :row :align-items :center}
(when (= type :previous)
[vector-icons/icon :main-icons/back {:container-style {:width 24 :height 24 :margin-right 4}
:color (if disabled? colors/gray colors/blue)}])
[react/text {:style {:color (cond
disabled?
colors/gray
(#{:main :secondary :next :previous} type)
(case theme
:green colors/green
:red colors/red
colors/blue)
:else
"")}}
:color (if disabled? colors/gray colors/blue)}])
[react/text {:style (merge {:color (cond
disabled?
colors/gray
(#{:main :secondary :next :previous} type)
(case theme
:green colors/green
:red colors/red
colors/blue)
:else
"")}
text-style)}
label]
(when (= type :next)
[vector-icons/icon :main-icons/next {:container-style {:width 24 :height 24 :margin-left 4}
:color (if disabled? colors/gray colors/blue)}])]]]))
:color (if disabled? colors/gray colors/blue)}])]]]))
14 changes: 7 additions & 7 deletions src/status_im/ui/components/contact/contact.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,14 @@
(when show-forward?
[react/view styles/forward-btn
[vector-icons/icon :main-icons/next]])
(when info
[react/text {:style styles/info-text}
info])
(when (and extended? extend-options)
[react/view
[react/touchable-highlight {:on-press extend-options
[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}]]])]])
[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?]
Expand Down
86 changes: 43 additions & 43 deletions src/status_im/ui/components/search_input/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,46 +7,46 @@
[status-im.ui.components.search-input.styles :as styles]
[status-im.ui.components.icons.vector-icons :as icons]))

(defview search-input [{:keys [on-cancel
on-focus
on-change
search-active?
search-container-style
search-filter
auto-focus]
:or {search-active? (reagent/atom nil)}}]
(letsubs [input-ref (reagent/atom nil)]
[react/view {:style (or search-container-style styles/search-container)}
[react/view {:style styles/search-input-container}
[icons/icon :main-icons/search {:color colors/gray
:container-style {:margin-left 6
:margin-right 2}}]
[react/text-input {:placeholder (i18n/label :t/search)
:blur-on-submit true
:multiline false
:ref #(reset! input-ref %)
:style styles/search-input
:default-value search-filter
:auto-focus auto-focus
:auto-correct false
:auto-capitalize false
:on-focus #(do
(when on-focus
(on-focus search-filter))
(reset! search-active? true))
:on-change (fn [e]
(let [native-event (.-nativeEvent e)
text (.-text native-event)]
(when on-change
(on-change text))))}]]
(when @search-active?
[react/touchable-highlight
{:on-press (fn []
(.clear @input-ref)
(.blur @input-ref)
(when on-cancel
(on-cancel))
(reset! search-active? false))
:style {:margin-left 16}}
[react/text {:style {:color colors/blue}}
(i18n/label :t/cancel)]])]))
(defn search-input []
(let [input-ref (reagent/atom nil)
search-active? (reagent/atom nil)]
(fn [{:keys [on-cancel
on-focus
on-change
search-container-style
search-filter
auto-focus]}]
[react/view {:style (or search-container-style styles/search-container)}
[react/view {:style styles/search-input-container}
[icons/icon :main-icons/search {:color colors/gray
:container-style {:margin-left 6
:margin-right 2}}]
[react/text-input {:placeholder (i18n/label :t/search)
:blur-on-submit true
:multiline false
:ref #(reset! input-ref %)
:style styles/search-input
:default-value search-filter
:auto-focus auto-focus
:auto-correct false
:auto-capitalize false
:on-focus #(do
(when on-focus
(on-focus search-filter))
(reset! search-active? true))
:on-change (fn [e]
(let [native-event (.-nativeEvent e)
text (.-text native-event)]
(when on-change
(on-change text))))}]]
(when @search-active?
[react/touchable-highlight
{:on-press (fn []
(.clear @input-ref)
(.blur @input-ref)
(when on-cancel
(on-cancel))
(reset! search-active? false))
:style {:margin-left 16}}
[react/text {:style {:color colors/blue}}
(i18n/label :t/cancel)]])])))
7 changes: 6 additions & 1 deletion src/status_im/ui/screens/group/styles.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,12 @@
:height tabs-height
:background-color colors/white
:border-top-width 1
:border-top-color colors/black-transparent})
:border-top-color colors/gray-lighter})

(def bottom-container-center
{:align-items :center
:justify-content :center
:flex 1})

(def toolbar-header-container
{:align-items :center})
Expand Down
48 changes: 36 additions & 12 deletions src/status_im/ui/screens/group/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,11 +159,23 @@
:bounces false
:keyboard-should-persist-taps :always
:enable-empty-sections true}]]]
[bottom-container {:on-press #(re-frame/dispatch [:group-chats.ui/create-pressed group-name])
:disabled (string/blank? group-name)
:on-press-prev #(re-frame/dispatch [:navigate-back])
:label (i18n/label :t/create-group-chat)
:accessibility-label :create-group-chat-button}]])))
[react/view {:style styles/bottom-container}
[react/view
[button/button
{:type :previous
:accessibility-label :previous-button
:label (i18n/label :t/back)
:on-press #(re-frame/dispatch [:navigate-back])}]]
[react/view {:style components.styles/flex}]
[react/view
[button/button
{:type :secondary
:container-style {:padding-horizontal 16}
:text-style {:font-weight "500"}
:accessibility-label :create-group-chat-button
:label (i18n/label :t/create-group-chat)
:disabled? (not save-btn-enabled?)
:on-press #(re-frame/dispatch [:group-chats.ui/create-pressed group-name])}]]]])))

(defn searchable-contact-list []
(let [search-value (reagent/atom nil)]
Expand Down Expand Up @@ -199,9 +211,15 @@
:toggle-fn group-toggle-contact
:allow-new-users? (< selected-contacts-count
(dec constants/max-group-chat-participants))}]
[bottom-container {:on-press #(re-frame/dispatch [:navigate-to :new-group])
:disabled (zero? selected-contacts-count)
:label (i18n/label :t/next)}]]))
[react/view {:style styles/bottom-container}
[react/view {:style components.styles/flex}]
[react/view
[button/button
{:type :next
:accessibility-label :next-button
:label (i18n/label :t/next)
:disabled? (zero? selected-contacts-count)
:on-press #(re-frame/dispatch [:navigate-to :new-group])}]]]]))

;; Add participants to existing group chat
(views/defview add-participants-toggle-list []
Expand All @@ -213,6 +231,8 @@
[toolbar/toolbar {:border-bottom-color :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}
(i18n/label :t/group-chat-members-count
Expand All @@ -224,7 +244,11 @@
:allow-new-users? (< (+ current-participants-count
selected-contacts-count)
constants/max-group-chat-participants)}]
[bottom-container {:on-press
#(re-frame/dispatch [:group-chats.ui/add-members-pressed])
:disabled (zero? selected-contacts-count)
:label (i18n/label :t/add)}]])))
[react/view {:style styles/bottom-container}
[react/view {:style styles/bottom-container-center}
[button/button
{:type :secondary
:accessibility-label :next-button
:label (i18n/label :t/add)
:disabled? (zero? selected-contacts-count)
:on-press #(re-frame/dispatch [:group-chats.ui/add-members-pressed])}]]]])))
22 changes: 0 additions & 22 deletions src/status_im/ui/screens/profile/group_chat/styles.cljs
View file

This file was deleted.

8 changes: 6 additions & 2 deletions src/status_im/ui/screens/profile/group_chat/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
[status-im.ui.components.list.views :as list]
[status-im.ui.screens.chat.sheets :as chat.sheets]
[status-im.multiaccounts.core :as multiaccounts]
[status-im.ui.components.colors :as colors]
[re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.list-item.views :as list-item]
Expand Down Expand Up @@ -103,8 +104,11 @@
[group-chat-profile-toolbar false];admin?]
[react/scroll-view
[react/view profile.components.styles/profile-form
[profile.components/group-header-display shown-chat]
[react/view {:height 20}]
[react/view {:style {:border-bottom-width 1
:padding-bottom 15
:margin-bottom 8
:border-bottom-color colors/gray-lighter}}
[profile.components/group-header-display shown-chat]]
[list-item/list-item
{:theme :action-destructive
:title :t/delete-chat
Expand Down
1 change: 1 addition & 0 deletions translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -687,6 +687,7 @@
"new-contract": "New Contract",
"new-group": "New group",
"new-group-chat": "New group chat",
"add-members": "Add members",
"new-network": "New network",
"new-pin-description": "Enter new 6-digit passcode",
"new-public-group-chat": "Join public chat",
Expand Down

0 comments on commit 306034d

Please sign in to comment.