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

common components in chats list (+3 squashed commits) 

Squashed commits:
[aecb167] removed old group settings screen
[2fec747] common components in new chat screen
[718e445] small fixes (+1 squashed commit)
Squashed commits:
[4a9be3c] rebase (+1 squashed commit)
Squashed commits:
[ef4f140] clear code, refactored groups using common components, moved styles from platform using defstyle macro (+1 squashed commit)
Squashed commits:
[b1ddb03] ns fixes (+2 squashed commits)
Squashed commits:
[236ec35] moved toggle contact item to components
[42e0aa9] implemented list-separator, list-footer, list-header, renderers, contact-list-item, removed unused code
This commit is contained in:
Andrey Shovkoplyas 2017-03-29 15:10:30 +03:00 committed by Roman Volosovskyi
parent 895b848dfe
commit 74380bf3bb
42 changed files with 598 additions and 1504 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/status_im/android/core.cljs
View File

@ -13,7 +13,6 @@
http-bridge]]
[status-im.components.main-tabs :refer [main-tabs]]
[status-im.components.context-menu :refer [menu-context]]
[status-im.contacts.search-results :refer [contacts-search-results]]
[status-im.contacts.views.contact-list :refer [contact-list]]
[status-im.contacts.views.contact-list-modal :refer [contact-list-modal]]
[status-im.contacts.views.new-contact :refer [new-contact]]
@ -38,7 +37,6 @@
[status-im.new-group.views.reorder-groups :refer [reorder-groups]]
[status-im.participants.views.add :refer [new-participants]]
[status-im.participants.views.remove :refer [remove-participants]]
[status-im.group-settings.screen :refer [group-settings]]
[status-im.profile.screen :refer [profile my-profile]]
[status-im.profile.edit.screen :refer [edit-my-profile]]
[status-im.profile.photo-capture.screen :refer [profile-photo-capture]]
@ -125,10 +123,8 @@
:edit-group-contact-list edit-group-contact-list
:edit-chat-group-contact-list edit-chat-group-contact-list
:new-public-group new-public-group
:group-settings group-settings
:contact-list main-tabs
:contact-toggle-list contact-toggle-list
:contact-list-search-results contacts-search-results
:group-contacts contact-list
:reorder-groups reorder-groups
:new-contact new-contact

64
src/status_im/android/platform.cljs
View File

@ -55,69 +55,7 @@
:item {:status-text {:color styles/color-black
:line-height 22
:font-size 14}}}
:new-chat {:option-inner-container {:height 56}
:option-icon-container {:background-color styles/color-white
:margin-top 8}
:option-name-text {:font-size 16
:color styles/text1-color}
:contact-list-title-container {:background-color styles/color-light-gray
:padding-top 28
:padding-bottom 20
:margin-top 0}
:contact-list-title {:color styles/text4-color
:font-size 14}}
:contacts {:subtitle {:color styles/color-gray4
:font-size 14
:flex-shrink 1}
:subtitle-count {:color styles/color-gray4
:font-size 14}
:info-container {:margin-left 16}
:contact-inner-container {:height 56}
:contact-list-spacing {:background-color styles/color-white
:height 8}
:icon-check {:border-radius 2
:width 17
:height 17}
:group-header {:flexDirection :row
:alignItems :center
:padding-top 28
:padding-bottom 20
:padding-left 16
:padding-right 14
:backgroundColor styles/color-light-gray}
:show-all {:padding-left 72
:height 56}
:show-all-text {:fontSize 14
:color styles/color-blue
:letter-spacing 0.5}
:show-all-text-font :medium
:contact-container {:padding-right 16}
:name-text {:fontSize 16
:line-height 24
:color styles/text1-color}}
:new-group {:group-name-text {:font-size 12}
:members-text {:font-size 14}
:members-text-count {:font-size 14}
:add-text {:margin-left 16
:line-height 24
:font-size 16}
:contact-container {:height 56}
:settings-group-text {:letter-spacing 0.5
:font-size 16}
:delete-group-prompt-text {:font-size 12}
:settings-group-item {:padding-left 16
:height 56
:flex-direction :row
:align-items :center}
:settings-group-container {:margin-top 23}}
:reorder-groups {:reorder-list-container {:padding-top 16}
:order-item-contacts {:font-size 16
:line-height 24}
:add-to-contacts-text {:font-size 14
:letter-spacing 0.5}}
:confirm-button-label {:color styles/color-white
:font-size 14
:letter-spacing 0.5}
:contacts {:show-all-text-font :medium}
:bottom-gradient {:height 3}
:input-label {:left 4}
:input-error-text {:margin-left 4}

34
src/status_im/chats_list/screen.cljs
View File

@ -1,6 +1,8 @@
(ns status-im.chats-list.screen
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]]
(:require [re-frame.core :refer [dispatch]]
[status-im.components.common.common :as common]
[status-im.components.renderers.renderers :as renderers]
[status-im.components.react :refer [list-view
list-item
view
@ -8,6 +10,7 @@
text
icon
image
linear-gradient
touchable-highlight]]
[status-im.components.native-action-button :refer [native-action-button]]
[status-im.components.drawer.view :refer [open-drawer]]
@ -17,7 +20,6 @@
[status-im.components.toolbar-new.actions :as act]
[status-im.components.toolbar-new.styles :as tst]
[status-im.components.icons.custom-icons :refer [ion-icon]]
[status-im.components.react :refer [linear-gradient]]
[status-im.components.sync-state.offline :refer [offline-view]]
[status-im.components.context-menu :refer [context-menu]]
[status-im.components.tabs.styles :refer [tabs-height]]
@ -70,25 +72,6 @@
:spacing 13
:on-press #(dispatch [:navigate-to :new-chat])}])
(defn chat-list-padding []
[view {:height (if ios? 0 8)
:background-color :white}])
(defn chat-shadow-item []
(when-not ios?
[view {:height 12}
[chat-list-padding]
[linear-gradient {:style {:height 4}
:colors st/gradient-top-bottom-shadow}]]))
(defn render-separator-fn [chats]
(fn [_ row-id _]
(list-item
(when (< row-id (dec (count chats)))
^{:key (str "separator-" row-id)}
[view st/chat-separator-wrapper
[view st/chat-separator-item]]))))
(defview chats-list []
[chats [:filtered-chats]
edit? [:get-in [:chat-list-ui-props :edit?]]
@ -102,10 +85,11 @@
[list-view {:dataSource (to-datasource chats)
:renderRow (fn [[id :as row] _ _]
(list-item ^{:key id} [chat-list-item row edit?]))
:renderHeader #(when (seq chats) (list-item [chat-list-padding]))
:renderFooter #(when (seq chats) (list-item [chat-shadow-item]))
:renderSeparator (when (get-in platform-specific [:chats :render-separator?])
(render-separator-fn chats))
:renderHeader renderers/list-header-renderer
:renderFooter #(list-item [view
[common/list-footer]
[common/bottom-shaddow]])
:renderSeparator renderers/list-separator-renderer
:style (st/list-container tabs-hidden?)}]
(when (and (not edit?)
(not search?)

19
src/status_im/chats_list/styles.cljs
View File

@ -18,18 +18,6 @@
(merge {:background-color toolbar-background1}
(get-in p/platform-specific [:component-styles :toolbar])))
(def gradient-top-bottom-shadow
["rgba(24, 52, 76, 0.165)"
"rgba(24, 52, 76, 0.03)"
"rgba(24, 52, 76, 0.01)"])
(def chat-separator-wrapper
{:background-color color-white
:opacity 0.5
:height 1
:padding-left 72})
(def chat-separator-item
{:border-bottom-width 1
:border-bottom-color color-gray5})
@ -153,13 +141,6 @@
{:flex-direction :row
:padding-right 14})
(def toolbar-btn
{:width 24
:height 56
:margin-left 24
:alignItems :center
:justifyContent :center})
(def opts-btn
{:width 24
:height 24

3
src/status_im/components/action_button/styles.cljs
View File

@ -32,8 +32,7 @@
:font-size 17
:line-height 20}
:android {:color color-black
:font-size 16
:line-height 24}})
:font-size 16}})
(defstyle actions-list
{:background-color color-white

34
src/status_im/components/common/common.cljs
View File

@ -1,5 +1,6 @@
(ns status-im.components.common.common
(:require [status-im.components.react :refer [view text linear-gradient]]
(:require [status-im.components.react :refer [view text icon linear-gradient]]
[status-im.components.context-menu :refer [context-menu]]
[status-im.utils.platform :as p]
[status-im.components.common.styles :as st]))
@ -28,14 +29,29 @@
(defn list-separator []
[separator st/list-separator])
(defn form-title [label & [count-value]]
(defn list-footer []
[view st/list-header-footer-spacing])
(defn list-header []
[view st/list-header-footer-spacing])
(defn form-title [label & [{:keys [count-value extended? options]}]]
[view
[view st/form-title-container
[text {:style st/form-title
:font :medium}
label]
(when-not (nil? count-value)
[text {:style st/form-title-count
:font :medium}
count-value])]
[view st/form-title-inner-container
[text {:style st/form-title
:font :medium}
label]
(when-not (nil? count-value)
[text {:style st/form-title-count
:font :medium}
count-value])]
(when extended?
[view
[view {:flex 1}]])
(when extended?
[view st/form-title-extend-container
[context-menu
[icon :options_gray]
options]])]
[top-shaddow]])

55
src/status_im/components/common/styles.cljs
View File

@ -39,31 +39,50 @@
{:margin-left 72})
(defstyle form-title-container
{:padding-left 16
:flex 1
{:flex-direction :row})
(defstyle form-title-inner-container
{:padding-left 16
:padding-right 16
:flex 1
:flex-direction :row
:ios {:background-color color-white
:padding-top 19
:padding-bottom 15
:margin-top 16}
:android {:background-color color-light-gray
:padding-top 25
:padding-bottom 18
:margin-top 0}})
:ios {:background-color color-white
:padding-top 19
:padding-bottom 15
:margin-top 16}
:android {:background-color color-light-gray
:padding-top 20
:padding-bottom 17
:margin-top 8}})
(defstyle form-title-extend-container
{:padding-right 16
:ios {:margin-top 16
:padding-top 16
:background-color color-white}
:android {:margin-top 24
:background-color color-light-gray}})
(defstyle form-title
{:ios {:color text1-color
:font-size 16}
:android {:color text4-color
:font-size 14}})
{:flex-shrink 1
:ios {:color text1-color
:letter-spacing -0.2
:font-size 16}
:android {:color text4-color
:font-size 14}})
(def form-title-count
(merge form-title
{:opacity 0.6
:padding-left 8
:color text4-color}))
{:flex-shrink 0
:opacity 0.6
:padding-left 8
:padding-right 5
:color text4-color}))
(defstyle form-spacer
{:ios {:height 16}
:android {:height 11}})
(defstyle list-header-footer-spacing
{:android {:background-color color-white
:height 8}})

13
src/status_im/components/confirm_button.cljs
View File

@ -1,13 +0,0 @@
(ns status-im.components.confirm-button
(:require [status-im.components.styles :as st]
[status-im.utils.platform :refer [platform-specific]]
[status-im.components.react :refer [view
text
touchable-highlight]]))
(defn confirm-button [label on-press]
[touchable-highlight {:on-press on-press}
[view st/confirm-button
[text {:style (get-in platform-specific [:component-styles :confirm-button-label])
:uppercase? (get-in platform-specific [:uppercase?])}
label]]])

50
src/status_im/components/contact/contact.cljs Normal file
View File

@ -0,0 +1,50 @@
(ns status-im.components.contact.contact
(:require-macros [status-im.utils.views :refer [defview]])
(:require [status-im.components.react :refer [view icon touchable-highlight text]]
[status-im.components.chat-icon.screen :refer [contact-icon-contacts-tab]]
[status-im.components.context-menu :refer [context-menu]]
[status-im.components.contact.styles :as st]
[status-im.utils.gfycat.core :refer [generate-gfy]]
[status-im.i18n :refer [get-contact-translated label]]))
(defn contact-photo [contact]
[view
[contact-icon-contacts-tab contact]])
(defn contact-inner-view
([{:keys [info style] {:keys [whisper-identity name] :as contact} :contact}]
[view (merge st/contact-inner-container style)
[contact-photo contact]
[view st/info-container
[text {:style st/name-text
:number-of-lines 1}
(if (pos? (count (:name contact)))
(get-contact-translated whisper-identity :name name)
;;TODO is this correct behaviour?
(generate-gfy))]
(when info
[text {:style st/info-text}
info])]]))
(defn contact-view [{:keys [contact extended? on-press extend-options info]}]
[touchable-highlight (when-not extended?
{:on-press (when on-press #(on-press contact))})
[view
[view st/contact-container
[contact-inner-view {:contact contact :info info}]
(when extended?
[view st/more-btn
[context-menu
[icon :options_gray]
extend-options]])]]])
(defview toogle-contact-view [{:keys [whisper-identity] :as contact} selected-key on-toggle-handler]
[checked [selected-key whisper-identity]]
[touchable-highlight {:on-press #(on-toggle-handler checked whisper-identity)}
[view
[view (merge st/contact-container (when checked {:style st/selected-contact}))
[contact-inner-view (merge {:contact contact}
(when checked {:style st/selected-contact}))]
[view (st/icon-check-container checked)
(when checked
[icon :check_on st/check-icon])]]]])

69
src/status_im/components/contact/styles.cljs Normal file
View File

@ -0,0 +1,69 @@
(ns status-im.components.contact.styles
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.components.styles :as common]
[status-im.utils.platform]))
(defstyle contact-inner-container
{:flex 1
:flexDirection :row
:align-items :center
:padding-left 16
:backgroundColor common/color-white
:android {:height 56}
:ios {:height 63}})
(def info-container
{:flex 1
:flexDirection :column
:margin-left 16
:margin-right 5
:justify-content :center})
(defstyle name-text
{:color common/text1-color
:android {:fontSize 16
:line-height 24}
:ios {:fontSize 17
:line-height 20
:letter-spacing -0.2}})
(def info-text
{:marginTop 1
:fontSize 12
:color common/text2-color})
(def contact-container
{:flex-direction :row
:align-items :center
:background-color common/color-white
:padding-right 16})
(def more-btn
{:width 24
:height 24
:alignItems :center
:justifyContent :center})
(def selected-contact
{:background-color common/selected-contact-color})
(def toggle-container
{:width 56
:height 56
:alignItems :center
:justifyContent :center})
(defnstyle icon-check-container [checked]
{:background-color (if checked common/color-light-blue common/color-gray5)
:alignItems :center
:justifyContent :center
:android {:border-radius 2
:width 17
:height 17}
:ios {:border-radius 50
:width 24
:height 24}})
(def check-icon
{:width 12
:height 12})

26
src/status_im/components/context_menu.cljs
View File

@ -1,6 +1,6 @@
(ns status-im.components.context-menu
(:require [reagent.core :as r]
[status-im.components.styles :as st]
[status-im.components.styles :as common]
[status-im.i18n :refer [label]]
[status-im.utils.platform :refer [platform-specific ios?]]
[re-frame.core :refer [dispatch]]
@ -24,6 +24,26 @@
(def menu-options (get-class "MenuOptions"))
(def menu-option (get-class "MenuOption"))
(defn context-menu-options [custom-styles]
{:customStyles {:optionsContainer
(merge {:elevation 2
:margin-top 30
:padding-top 8
:width 164
:padding-bottom 8}
(:optionsContainer custom-styles))
:optionWrapper
(merge {:padding-left 16
:padding-right 16
:justify-content :center
:height 48}
(:optionWrapper custom-styles))}})
(defn context-menu-text [destructive?]
{:font-size 15
:line-height 20
:color (if destructive? common/color-light-red common/text1-color)})
(def list-selection-fn (:list-selection-fn platform-specific))
(defn open-ios-menu [options]
@ -42,9 +62,9 @@
trigger]]
[menu {:onSelect #(when % (do (%) nil))}
[menu-trigger trigger]
[menu-options (st/context-menu-options customStyles)
[menu-options (context-menu-options customStyles)
(for [{:keys [style value destructive?] :as option} options]
^{:key option}
[menu-option {:value value}
[text {:style (merge (st/context-menu-text destructive?) style)}
[text {:style (merge (context-menu-text destructive?) style)}
(:text option)]])]]))

14
src/status_im/components/renderers/renderers.cljs Normal file
View File

@ -0,0 +1,14 @@
(ns status-im.components.renderers.renderers
(:require [status-im.components.react :refer [list-item]]
[status-im.components.common.common :as common]))
(defn list-separator-renderer [_ row-id _]
(list-item
^{:key row-id}
[common/list-separator]))
(defn list-header-renderer [& _]
(list-item [common/list-header]))
(defn list-footer-renderer [& _]
(list-item [common/list-footer]))

29
src/status_im/components/sticky_button.cljs Normal file
View File

@ -0,0 +1,29 @@
(ns status-im.components.sticky-button
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.components.styles :as common]
[status-im.utils.platform :refer [platform-specific]]
[status-im.components.react :refer [view
text
touchable-highlight]]))
(def sticky-button-style
{:flex-direction :row
:height 52
:justify-content :center
:align-items :center
:background-color common/color-light-blue})
(defstyle sticky-button-label-style
{:color common/color-white
:ios {:font-size 17
:line-height 20
:letter-spacing -0.2}
:android {:font-size 14
:letter-spacing 0.5}})
(defn sticky-button [label on-press]
[touchable-highlight {:on-press on-press}
[view sticky-button-style
[text {:style sticky-button-label-style
:uppercase? (get-in platform-specific [:uppercase?])}
label]]])

27
src/status_im/components/styles.cljs
View File

@ -91,30 +91,3 @@
(def button-input
{:flex 1
:flexDirection :column})
(def confirm-button
{:flex-direction :row
:height 52
:justify-content :center
:align-items :center
:background-color color-light-blue})
(defn context-menu-options [custom-styles]
{:customStyles {:optionsContainer
(merge {:elevation 2
:margin-top 30
:padding-top 8
:width 164
:padding-bottom 8}
(:optionsContainer custom-styles))
:optionWrapper
(merge {:padding-left 16
:padding-right 16
:justify-content :center
:height 48}
(:optionWrapper custom-styles))}})
(defn context-menu-text [destructive?]
{:font-size 15
:line-height 20
:color (if destructive? color-light-red text1-color)})

17
src/status_im/contacts/default_contacts.cljs
View File

@ -1,17 +0,0 @@
(ns status-im.contacts.default-contacts
(:require [status-im.constants :refer [wallet-chat-id]]
[clojure.string :as s]))
(def contacts
[{:whisper-identity wallet-chat-id
:name (s/capitalize wallet-chat-id)
:photo-path :icon_wallet_avatar
:dapp? true
:add-chat? true}
{:whisper-identity "dapp-auction"
:name "Auction House"
:photo-path "http://auctionhouse.dappbench.com/images/auctionhouse.png"
:dapp? true
:dapp-url "http://auctionhouse.dappbench.com"}
])

7
src/status_im/contacts/handlers.cljs
View File

@ -380,3 +380,10 @@
:new-chat-name "")
(assoc-in [:toolbar-search :show] nil)
(assoc-in [:toolbar-search :text] ""))))
(register-handler :open-chat-with-contact
(u/side-effect!
(fn [_ [_ {:keys [whisper-identity] :as contact}]]
(dispatch [:send-contact-request! contact])
(dispatch [:navigate-to-clean :chat-list])
(dispatch [:start-chat whisper-identity {}]))))

86
src/status_im/contacts/screen.cljs
View File

@ -1,9 +1,7 @@
(ns status-im.contacts.screen
(:require-macros [status-im.utils.views :refer [defview]])
(:require [reagent.core :as r]
[clojure.string :as str]
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.common.common :refer [separator top-shaddow bottom-shaddow]]
(:require [re-frame.core :refer [dispatch]]
[status-im.components.common.common :as common]
[status-im.components.react :refer [view
text
image
@ -11,18 +9,17 @@
touchable-highlight
scroll-view
list-view
list-item] :as react]
list-item]]
[status-im.components.native-action-button :refer [native-action-button
native-action-button-item]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar-new.view :refer [toolbar]]
[status-im.components.toolbar-new.actions :as act]
[status-im.components.toolbar-new.styles :as tst]
[status-im.components.drawer.view :refer [open-drawer]]
[status-im.components.icons.custom-icons :refer [ion-icon]]
[status-im.components.context-menu :refer [context-menu]]
[status-im.contacts.views.contact :refer [contact-view]]
[status-im.utils.platform :refer [platform-specific]]
[status-im.components.contact.contact :refer [contact-view]]
[status-im.utils.platform :refer [platform-specific ios? android?]]
[status-im.i18n :refer [label]]
[status-im.contacts.styles :as st]
[status-im.components.styles :refer [color-blue
@ -37,9 +34,8 @@
{:text (label :t/reorder-groups) :value #(dispatch [:navigate-to :reorder-groups])}])
(defn toolbar-actions []
(let [new-contact? (get-in platform-specific [:contacts :new-contact-in-toolbar?])]
[(act/search #(dispatch [:navigate-to :group-contacts nil :show-search]))
(act/opts (if new-contact? toolbar-options (rest toolbar-options)))]))
[(act/search #(dispatch [:navigate-to :group-contacts nil :show-search]))
(act/opts (if ios? toolbar-options (rest toolbar-options)))])
(defn toolbar-view []
[toolbar {:title (label :t/contacts)
@ -51,37 +47,29 @@
:actions [{:image :blank}]
:title (label :t/edit-contacts)}])
(defn options-btn [group]
(let [options [{:value #(dispatch [:navigate-to :edit-group group :contact-group])
:text (label :t/edit-group)}]]
[view st/more-btn
[context-menu
[icon :options_gray]
options]]))
(defn contact-options [contact group]
(let [options [{:value #(dispatch [:hide-contact contact])
:text (label :t/delete-contact)
:destructive? true}]]
(if group
(conj options
{:value #(dispatch [:remove-contact-from-group
(:whisper-identity contact)
(:group-id group)])
:text (label :t/remove-from-group)})
options)))
(defn subtitle-view [subtitle contacts-count group extended?]
[view (get-in platform-specific [:component-styles :contacts :group-header])
[text {:style (get-in platform-specific [:component-styles :contacts :subtitle])
:font :medium}
subtitle]
[text {:style (merge st/contact-group-count
(get-in platform-specific [:component-styles :contacts :subtitle-count]))
:uppercase? (get-in platform-specific [:contacts :uppercase-subtitles?])
:font :medium}
(str contacts-count)]
[view {:flex 1}]
(when extended?
[options-btn group])])
(defn contact-group-form [{:keys [contacts contacts-count group edit?]}]
(defn contact-group-form [{:keys [contacts contacts-count group edit? click-handler]}]
(let [subtitle (:name group)]
[view st/contact-group
[view
(when subtitle
[subtitle-view subtitle contacts-count group edit?])
(when subtitle
[top-shaddow])
[common/form-title subtitle
{:count-value contacts-count
:extended? edit?
:options [{:value #(dispatch [:navigate-to :edit-group group :contact-group])
:text (label :t/edit-group)}]}])
[view st/contacts-list
[view st/contact-list-spacing]
[common/list-footer]
(doall
(map (fn [contact]
^{:key contact}
@ -89,20 +77,14 @@
[contact-view
{:contact contact
:extended? edit?
:extend-options (when group
[{:value #(dispatch [:hide-contact contact])
:text (label :t/delete-contact)
:destructive? true}
{:value #(dispatch [:remove-contact-from-group
(:whisper-identity contact)
(:group-id group)])
:text (label :t/remove-from-group)}])}]
:on-press #(dispatch [:open-chat-with-contact %])
:extend-options (contact-options contact group)}]
(when-not (= contact (last contacts))
[separator st/contact-item-separator])])
[common/list-separator])])
contacts))]
(when (< contacts-limit contacts-count)
[view
[separator st/contact-item-separator]
[common/list-separator]
[view st/show-all
[touchable-highlight {:on-press #(do
(when edit?
@ -113,7 +95,7 @@
:uppercase? (get-in platform-specific [:uppercase?])
:font (get-in platform-specific [:component-styles :contacts :show-all-text-font])}
(str (- contacts-count contacts-limit) " " (label :t/more))]]]]])
[bottom-shaddow]]))
[common/bottom-shaddow]]))
(defview contact-group-view [{:keys [group] :as params}]
[contacts [:all-added-group-contacts-with-limit (:group-id group) contacts-limit]
@ -134,7 +116,7 @@
[ion-icon {:name :md-create
:style create-icon}]]])
(defview contact-list [current-view?]
(defview contact-list [_]
[contacts [:get-added-contacts-with-limit contacts-limit]
contacts-count [:added-contacts-count]
edit? [:get-in [:contacts-ui-props :edit?]]
@ -156,7 +138,7 @@
[contact-group-view {:group group
:edit? edit?}])]
[view st/empty-contact-groups
[react/icon :group_big st/empty-contacts-icon]
[icon :group_big st/empty-contacts-icon]
[text {:style st/empty-contacts-text} (label :t/no-contacts)]])]
(when (and (not edit?) (get-in platform-specific [:contacts :action-button?]))
(when (and android? (not edit?))
[contacts-action-button])])

36
src/status_im/contacts/search_results.cljs
View File

@ -1,36 +0,0 @@
(ns status-im.contacts.search-results
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.react :refer [view
text
icon
list-view
list-item]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.toolbar.actions :as act]
[status-im.contacts.views.contact :refer [contact-view]]
[status-im.utils.listview :refer [to-datasource]]
[status-im.utils.platform :refer [platform-specific]]
[status-im.i18n :refer [label]]
[status-im.contacts.styles :as st]))
(defview contacts-search-results []
[search-text [:get :contact-list-search-text]
contacts [:contacts-with-letters]]
[view st/search-container
[status-bar]
[toolbar {:nav-action (act/back #(dispatch [:navigate-back]))
:title search-text
:style (get-in platform-specific [:component-styles :toolbar])}]
(if (empty? contacts)
[view st/search-empty-view
;; todo change icon
[icon :group_big st/empty-contacts-icon]
[text {:style st/empty-contacts-text}
"No contacts found"]]
[list-view {:dataSource (to-datasource contacts)
:renderRow (fn [row _ _]
(list-item [contact-view {:contact row
:letter? true
:extended? true}]))}])])

136
src/status_im/contacts/styles.cljs
View File

@ -1,18 +1,7 @@
(ns status-im.contacts.styles
(:require-macros [status-im.utils.styles :refer [defnstyle]])
(:require [status-im.components.styles :refer [text1-color
text2-color
text3-color
color-white
color-separator
color-gray2
color-gray4
color-blue
color-light-red
color-gray]]
[status-im.components.toolbar.styles :refer [toolbar-background1 toolbar-background2]]
[status-im.components.tabs.styles :as tabs-st]
[status-im.utils.platform :as p]))
(:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
(:require [status-im.components.styles :as common]
[status-im.components.tabs.styles :as tabs-st]))
;; Contacts list
@ -21,7 +10,7 @@
(def contact-groups
{:flex 1
:background-color toolbar-background2})
:background-color common/color-light-gray})
(defnstyle contacts-list-container [tabs-hidden?]
{:flex 1
@ -29,10 +18,10 @@
:ios {:margin-bottom (if tabs-hidden? 20 (+ 16 tabs-st/tabs-height))}})
(def contacts-list
{:background-color color-white})
{:background-color common/color-white})
(def contacts-list-modal
{:background-color toolbar-background2})
{:background-color common/color-light-gray})
(def empty-contact-groups
(merge contact-groups
@ -46,55 +35,27 @@
(def empty-contacts-text
{:margin-top 12
:font-size 16
:color color-gray2})
(def contact-group
{:flex-direction :column})
:color common/color-gray2})
(def contact-group-count
{:margin-left 8
:opacity 0.6})
(def show-all
(merge (get-in p/platform-specific [:component-styles :contacts :show-all])
{:flexDirection :row
:alignItems :center
:backgroundColor color-white}))
(defstyle show-all
{:flexDirection :row
:alignItems :center
:backgroundColor common/color-white
:padding-left 72
:android {:height 56}
:ios {:height 64}})
(def show-all-text
(get-in p/platform-specific [:component-styles :contacts :show-all-text]))
(def contact-item-separator
{:margin-left 72})
(def contact-container
(merge (get-in p/platform-specific [:component-styles :contacts :contact-container])
{:flex-direction :row
:align-items :center
:background-color color-white}))
(def letter-container
{:paddingTop 11
:paddingLeft 20
:width 56})
(def letter-text
{:fontSize 24
:color text3-color})
(def option-inner-container
{:flex 1
:flex-direction :row
:height 56
:background-color color-white
:border-bottom-color color-separator
:border-bottom-width 0.5})
(def option-inner
{:width 48
:height 48
:margin-top 4
:margin-left 12})
(defstyle show-all-text
{:android {:fontSize 14
:color common/color-blue
:letter-spacing 0.5}
:ios {:fontSize 16
:color common/color-gray4
:letter-spacing -0.2}})
(def option-inner-image
{:width 24
@ -104,38 +65,7 @@
(def group-icon
(assoc option-inner-image
:tint-color color-gray))
(def contact-list-spacing
(get-in p/platform-specific [:component-styles :contacts :contact-list-spacing]))
(def contact-inner-container
(merge (get-in p/platform-specific [:component-styles :contacts :contact-inner-container])
{:flex 1
:flexDirection :row
:align-items :center
:padding-left 16
:backgroundColor color-white}))
(def info-container
(merge (get-in p/platform-specific [:component-styles :contacts :info-container])
{:flex 1
:flexDirection :column}))
(def name-text
(get-in p/platform-specific [:component-styles :contacts :name-text]))
(def info-text
{:marginTop 1
:fontSize 12
:color text2-color})
(def more-btn
{:width 24
:height 24
:margin-left 16
:alignItems :center
:justifyContent :center})
:tint-color common/color-gray))
; New contact
@ -164,33 +94,17 @@
(def address-explication
{:textAlign :center
:color color-gray})
:color common/color-gray})
(def qr-input
{:margin-right 42})
(def enter-address-icon
{:margin-left 21
:margin-right 21
:margin-top 19
:width 20
:height 18})
(def scan-qr-icon
{:margin-left 21
:margin-right 20
:margin-top 18
:width 20
:height 20})
;; Contacts search
(def search-container
{:flex 1
:background-color color-white})
:background-color common/color-white})
(def search-empty-view
{:flex 1
:background-color color-white
:background-color common/color-white
:align-items :center
:justify-content :center})

44
src/status_im/contacts/views/contact.cljs
View File

@ -1,44 +0,0 @@
(ns status-im.contacts.views.contact
(:require-macros [status-im.utils.views :refer [defview]])
(:require [status-im.components.react :refer [view text icon touchable-highlight]]
[re-frame.core :refer [dispatch]]
[status-im.contacts.styles :as st]
[status-im.contacts.views.contact-inner :refer [contact-inner-view]]
[status-im.components.context-menu :refer [context-menu]]
[status-im.i18n :refer [label]]
[status-im.utils.platform :refer [platform-specific]]))
(defn- on-press [{:keys [whisper-identity] :as contact}]
(dispatch [:send-contact-request! contact])
(dispatch [:navigate-to-clean :chat-list])
(dispatch [:start-chat whisper-identity {}]))
(defn letter-view [letter]
[view st/letter-container
(when letter
[text {:style st/letter-text} letter])])
(defn options-btn [contact more-options]
(let [options [{:value #(dispatch [:hide-contact contact])
:text (label :t/delete-contact)
:destructive? true}]]
[view st/more-btn
[context-menu
[icon :options_gray]
(or more-options options)]]))
;;TODO: maybe it's better to have only one global component contact-view with the types: default, extended and toggle
;;TODO: at the moment toggle in the other component new-group-contact
(defview contact-view [{{:keys [whisper-identity letter] :as contact} :contact
:keys [extended? letter? on-click extend-options info]}]
[chat [:get-chat whisper-identity]]
[touchable-highlight
(when-not extended?
{:on-press #((or on-click on-press) contact)})
[view
[view st/contact-container
(when letter?
[letter-view letter])
[contact-inner-view {:contact contact :info info}]
(when extended?
[options-btn contact extend-options])]]])

25
src/status_im/contacts/views/contact_inner.cljs
View File

@ -1,25 +0,0 @@
(ns status-im.contacts.views.contact-inner
(:require [status-im.components.react :refer [view image text]]
[status-im.components.chat-icon.screen :refer [contact-icon-contacts-tab]]
[status-im.contacts.styles :as st]
[status-im.utils.gfycat.core :refer [generate-gfy]]
[status-im.i18n :refer [get-contact-translated label]]))
(defn contact-photo [contact]
[view
[contact-icon-contacts-tab contact]])
(defn contact-inner-view
([{:keys [info style] {:keys [whisper-identity name] :as contact} :contact}]
[view (merge st/contact-inner-container style)
[contact-photo contact]
[view st/info-container
[text {:style st/name-text
:number-of-lines 1}
(if (pos? (count (:name contact)))
(get-contact-translated whisper-identity :name name)
;; todo is this correct behaviour?
(generate-gfy))]
(when info
[text {:style st/info-text}
info])]]))

27
src/status_im/contacts/views/contact_list.cljs
View File

@ -1,14 +1,16 @@
(ns status-im.contacts.views.contact-list
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.common.common :refer [separator]]
[status-im.components.common.common :as common]
[status-im.components.renderers.renderers :as renderers]
[status-im.components.contact.contact :refer [contact-view]]
[status-im.contacts.screen :refer [contact-options]]
[status-im.components.react :refer [view text
image
icon
touchable-highlight
list-view
list-item]]
[status-im.contacts.views.contact :refer [contact-view]]
[status-im.components.text-field.view :refer [text-field]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar-new.view :refer [toolbar-with-search toolbar]]
@ -26,15 +28,9 @@
(list-item
^{:key row}
[contact-view {:contact row
:on-press #(dispatch [:open-chat-with-contact %])
:extended? edit?
:extend-options (when group
[{:value #(dispatch [:hide-contact row])
:text (label :t/delete-contact)
:destructive? true}
{:value #(dispatch [:remove-contact-from-group
(:whisper-identity row)
(:group-id group)])
:text (label :t/remove-from-group)}])}])))
:extend-options (contact-options row group)}])))
(defview contact-list-toolbar-edit [group]
[toolbar {:nav-action (act/back #(dispatch [:set-in [:contact-list-ui-props :edit?] false]))
@ -57,20 +53,15 @@
:actions [(act/opts [{:text (label :t/edit)
:value #(dispatch [:set-in [:contact-list-ui-props :edit?] true])}])]}))
(defn render-separator [_ row-id _]
(list-item ^{:key row-id}
[separator st/contact-item-separator]))
(defview contacts-list-view [group edit?]
[contacts [:all-added-group-contacts-filtered (:group-id group)]]
[list-view {:dataSource (lw/to-datasource contacts)
:enableEmptySections true
:renderRow (render-row group edit?)
:bounces false
:keyboardShouldPersistTaps true
:renderHeader #(list-item [view st/contact-list-spacing])
:renderFooter #(list-item [view st/contact-list-spacing])
:renderSeparator render-separator
:renderHeader renderers/list-header-renderer
:renderFooter renderers/list-footer-renderer
:renderSeparator renderers/list-separator-renderer
:style st/contacts-list}])
(defview contact-list []

33
src/status_im/contacts/views/contact_list_modal.cljs
View File

@ -1,14 +1,15 @@
(ns status-im.contacts.views.contact-list-modal
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.common.common :refer [list-separator form-title bottom-shaddow]]
(:require [re-frame.core :refer [dispatch]]
[status-im.components.common.common :as common]
[status-im.components.renderers.renderers :as renderers]
[status-im.components.react :refer [view text
image
icon
touchable-highlight
list-view
list-item]]
[status-im.contacts.views.contact :refer [contact-view]]
[status-im.components.contact.contact :refer [contact-view]]
[status-im.components.action-button.action-button :refer [action-button
action-separator]]
[status-im.components.action-button.styles :refer [actions-list]]
@ -16,17 +17,10 @@
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar-new.view :refer [toolbar-with-search toolbar]]
[status-im.components.toolbar-new.actions :as act]
[status-im.components.toolbar-new.styles :refer [toolbar-background1]]
[status-im.components.drawer.view :refer [drawer-view open-drawer]]
[status-im.components.image-button.view :refer [scan-button]]
[status-im.components.drawer.view :refer [drawer-view]]
[status-im.contacts.styles :as st]
[status-im.utils.listview :as lw]
[status-im.i18n :refer [label]]
[status-im.utils.platform :refer [platform-specific]]))
(defn render-separator [_ row-id _]
(list-item ^{:key row-id}
[list-separator]))
[status-im.i18n :refer [label]]))
(defview contact-list-modal-toolbar []
[show-search [:get-in [:toolbar-search :show]]
@ -60,7 +54,7 @@
(list-item
^{:key row}
[contact-view {:contact row
:on-click #(when click-handler
:on-press #(when click-handler
(click-handler row action params))}])))
(defview contact-list-modal []
@ -80,11 +74,12 @@
:renderHeader #(list-item
[view
[actions-view action click-handler]
[bottom-shaddow]
[form-title (label :t/choose-from-contacts) (count contacts)]
[view st/contact-list-spacing]])
[common/bottom-shaddow]
[common/form-title (label :t/choose-from-contacts)
{:count-value (count contacts)}]
[common/list-header]])
:renderFooter #(list-item [view
[view st/contact-list-spacing]
[bottom-shaddow]])
:renderSeparator render-separator
[common/list-footer]
[common/bottom-shaddow]])
:renderSeparator renderers/list-separator-renderer
:style st/contacts-list-modal}]]])

174
src/status_im/group_settings/screen.cljs
View File

@ -1,174 +0,0 @@
(ns status-im.group-settings.screen
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]]
[status-im.components.react :refer [view
text-input
text
image
icon
modal
picker
picker-item
scroll-view
touchable-highlight]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.chat-icon.screen :refer [chat-icon-view-action]]
[status-im.group-settings.styles.group-settings :as st]
[status-im.group-settings.views.member :refer [member-view]]
[status-im.i18n :refer [label]]
[status-im.group-settings.views.color-settings :refer [color-settings]]))
(defn remove-member []
(dispatch [:remove-participants]))
(defn close-member-menu []
(dispatch [:set :selected-participants #{}]))
;; TODO not in design
(defview member-menu []
[{:keys [name] :as participant} [:selected-participant]]
(when participant
[modal {:animationType :none
:transparent false
:onRequestClose close-member-menu}
[touchable-highlight {:style st/modal-container
:on-press close-member-menu}
[view st/modal-inner-container
[text {:style st/modal-member-name} name]
[touchable-highlight {:on-press remove-member}
[view
[text {:style st/modal-remove-text}
(label :t/remove)]]]]]]))
(defview chat-members []
[members [:current-chat-contacts]]
[view st/chat-members-container
(for [member members]
^{:key member} [member-view member])])
(defn setting-view [{:keys [icon-style custom-icon handler title subtitle]
icon-name :icon}]
[touchable-highlight {:on-press handler}
[view st/setting-row
[view st/setting-icon-view
(or custom-icon
[icon icon-name icon-style])]
[view st/setting-view
[text {:style st/setting-title} title]
(when-let [subtitle subtitle]
[text {:style st/setting-subtitle}
subtitle])]]])
(defview chat-color-icon []
[chat-color [:chat :color]]
[view {:style (st/chat-color-icon chat-color)}])
(defn show-chat-color-picker []
(dispatch [:group-settings :show-color-picker true]))
(defn settings-view []
(let [settings [{:custom-icon [chat-color-icon]
:title (label :t/change-color)
:handler show-chat-color-picker}
;; TODO not implemented: Notifications
(merge {:title (label :t/notifications-title)
:subtitle (label :t/not-implemented)
:handler nil}
(if true
{:icon :notifications-on
:icon-style {:width 16
:height 21}}
{:icon :muted
:icon-style {:width 18
:height 21}}))
{:icon :close-gray
:icon-style {:width 12
:height 12}
:title (label :t/clear-history)
;; TODO show confirmation dialog?
:handler #(dispatch [:clear-history])}
{:icon :bin
:icon-style {:width 12
:height 18}
:title (label :t/delete-and-leave)
;; TODO show confirmation dialog?
:handler #(dispatch [:leave-group-chat])}]]
[view st/settings-container
(for [setting settings]
^{:key setting} [setting-view setting])]))
(defview chat-icon []
[chat-id [:chat :chat-id]
group-chat [:chat :group-chat]
name [:chat :name]
color [:chat :color]]
[view st/action
[chat-icon-view-action chat-id group-chat name color false]])
(defn new-group-toolbar []
[view
[status-bar]
[toolbar {:title (label :t/chat-settings)
:custom-action [chat-icon]}]])
(defn focus []
(dispatch [:set ::name-input-focused true]))
(defn blur []
(dispatch [:set ::name-input-focused false]))
(defn save []
(dispatch [:set-chat-name]))
(defview chat-name []
[name [:chat :name]
new-name [:get :new-chat-name]
validation-messages [:new-chat-name-validation-messages]
focused? [:get ::name-input-focused]
valid? [:new-chat-name-valid?]]
[view
[text {:style st/chat-name-text} (label :t/chat-name)]
[view (st/chat-name-value-container focused?)
[text-input {:style st/chat-name-value
:ref #(when (and % focused?) (.focus %))
:on-change-text #(dispatch [:set :new-chat-name %])
:on-focus focus
:on-blur blur}
name]
(if (or focused? (not= name new-name))
[touchable-highlight {:style (st/chat-name-btn-edit-container valid?)
:on-press save}
[view [icon :ok_purple st/add-members-icon]]]
[touchable-highlight {:style (st/chat-name-btn-edit-container true)
:on-press focus}
[view [text {:style st/chat-name-btn-edit-text} (label :t/edit)]]])]
(when (pos? (count validation-messages))
[text {:style st/chat-name-validation-message} (first validation-messages)])])
(defview members []
[current-pk [:get :current-public-key]
group-admin [:chat :group-admin]]
(when (= current-pk group-admin)
[view
[text {:style st/members-text} (label :t/members-title)]
[touchable-highlight {:on-press #(dispatch [:navigate-to :add-participants])}
;; TODO add participants view is not in design
[view st/add-members-container
[icon :add_gray st/add-members-icon]
[text {:style st/add-members-text}
(label :t/add-members)]]]
[chat-members]]))
(defview group-settings []
[public? [:chat :public?]]
[view st/group-settings
[new-group-toolbar]
[scroll-view st/body
(when-not public? [chat-name])
[members]
[text {:style st/settings-text}
(label :t/settings)]
[settings-view]]
[color-settings]
[member-menu]])

78
src/status_im/group_settings/styles/color_settings.cljs
View File

@ -1,78 +0,0 @@
(ns status-im.group-settings.styles.color-settings)
(def color-highlight
{:flex 0.25})
(def color-icon-comtainer
{:justify-content :center
:align-items :center})
(defn color-item [color]
{:width 70
:height 70
:border-radius 70
:background-color color
:justify-content :center
:align-items :center})
(def icon-ok
{:width 17.5
:height 13.5})
(def container-height 225)
(def label-container-top-margin 16)
(def label-container-bottom-margin 8)
(def font-size 16)
(def color-settings-container
{:position :absolute
:right 0
:left 0
:bottom 0
:height container-height
:background-color :white
:border-top-color :#0000001f
:border-top-width 1
:align-items :stretch})
(def label-container
{:margin-top label-container-top-margin
:align-items :center
:margin-bottom 8})
(def label
{:font-size 16
:color :black})
(def close-highlight
{:position :absolute
:bottom (- container-height 15
label-container-top-margin
label-container-bottom-margin)
:right 18})
(def close-container-size 24)
(def close-settings-container
{:width close-container-size
:height close-container-size
:justify-content :center
:align-items :center})
(def close-icon
{:width 12
:height 12})
(def all-colors-container
{:flex-direction :column
:align-items :stretch
:height (- container-height
label-container-top-margin
font-size
close-container-size)})
(def color-container
{:flex 0.5
:flex-direction :row
:align-items :center
:justify-content :center})

163
src/status_im/group_settings/styles/group_settings.cljs
View File

@ -1,163 +0,0 @@
(ns status-im.group-settings.styles.group-settings
(:require [status-im.components.styles :refer [color-white
color-purple
separator-color
text1-color
text2-color]]))
(def modal-container
{:flex 1
:justifyContent :center
:padding 20})
(def modal-inner-container
{:borderRadius 10
:alignItems :center
:padding 5
:backgroundColor color-white})
(def modal-member-name
{:color text2-color
:fontSize 14
:lineHeight 20})
(def modal-remove-text
{:margin 10
:color text1-color
:fontSize 14
:lineHeight 20})
(def modal-color-picker-inner-container
{:borderRadius 10
:padding 5
:backgroundColor color-white})
(def modal-color-picker-save-btn-text
{:margin 10
:alignSelf :center
:color text1-color
:fontSize 14
:lineHeight 20})
(def chat-members-container
{:marginBottom 10})
(def action
{:width 56
:height 56
:alignItems :center
:justifyContent :center})
(def group-settings
{:flex 1
:flexDirection :column
:backgroundColor color-white})
(def body
{:flex 1
:flexDirection :column})
(def chat-name-text
{:marginTop 24
:marginLeft 16
:marginBottom 16
:color text2-color
:fontSize 14
:lineHeight 20})
(defn chat-name-value-container [focused?]
{:flexDirection :row
:marginLeft 16
:height 56
:alignItems :center
:justifyContent :center
:borderBottomWidth 2
:borderBottomColor (if focused? color-purple separator-color)})
(def chat-name-value
{:flex 1
:fontSize 16
:color text1-color})
(def chat-name-validation-message
{:marginTop 8
:marginLeft 16
:color :red})
(defn chat-name-btn-edit-container [enabled?]
{:padding 16
:justifyContent :center
:opacity (if enabled? 1 0.3)})
(def chat-name-btn-edit-text
{:color text2-color
:fontSize 16
:lineHeight 20})
(def members-text
{:marginTop 24
:marginLeft 16
:marginBottom 16
:color text2-color
:fontSize 14
:lineHeight 20})
(def add-members-icon
{:marginVertical -1
:marginLeft 19
:marginHorizontal 3
:width 17
:height 17})
(def add-members-container
{:flexDirection :row})
(def add-members-text
{:marginTop 18
:marginLeft 32
:color text2-color
:fontSize 16
:lineHeight 20})
(def settings-text
{:marginTop 24
:marginLeft 16
:marginBottom 16
:color text2-color
:fontSize 14
:lineHeight 20})
(def settings-container
{:flexDirection :column})
(def setting-row
{:flexDirection :row
:height 56})
(def setting-icon-view
{:width 56
:height 56
:alignItems :center
:justifyContent :center})
(def setting-view
{:flex 1
:marginLeft 16
:alignItems :flex-start
:justifyContent :center})
(def setting-title
{:marginTop -2.5
:color text1-color
:fontSize 16})
(def setting-subtitle
{:marginTop 1
:color text2-color
:fontSize 12})
(defn chat-color-icon [color]
{:borderRadius 12
:width 24
:height 24
:backgroundColor color})

48
src/status_im/group_settings/views/color_settings.cljs
View File

@ -1,48 +0,0 @@
(ns status-im.group-settings.views.color-settings
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [dispatch]]
[status-im.components.react :refer [view
text
icon
touchable-highlight]]
[status-im.i18n :refer [label]]
[status-im.group-settings.styles.color-settings :as st]))
(defn close-chat-color-picker []
(dispatch [:group-settings :show-color-picker false]))
(def all-colors
(->> [:#a187d5 :#7099e6 :#424874 :#96c0b7
:#d3b99f :#eb6464 :#6d98ba :#c17767]
(partition 4)
(map-indexed vector)))
(defn color-icon [current-color color]
(let [selected-color? (= (keyword current-color) color)]
[touchable-highlight
{:on-press #(dispatch [:set-chat-color color])
:style st/color-highlight}
[view st/color-icon-comtainer
[view (st/color-item color)
(when selected-color?
[icon :ok st/icon-ok])]]]))
(defview color-settings []
[show-color-picker [:group-settings :show-color-picker]
current-color [:chat :color]]
(when show-color-picker
[view st/color-settings-container
[view st/label-container
[text st/label (label :t/change-color)]]
[touchable-highlight
{:on-press close-chat-color-picker
:style st/close-highlight}
[view st/close-settings-container
[icon :close_gray st/close-icon]]]
[view st/all-colors-container
(for [[idx colors] all-colors]
^{:key idx}
[view st/color-container
(for [color (take-last 4 colors)]
^{:key color}
[color-icon current-color color])])]]))

12
src/status_im/group_settings/views/member.cljs
View File

@ -1,12 +0,0 @@
(ns status-im.group-settings.views.member
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.contacts.views.contact :refer [contact-view]]
[status-im.i18n :refer [label]]))
(defn member-view [{:keys [whisper-identity role] :as contact}]
;; TODO implement :role property for group chat contact
[contact-view
{:contact contact
:extended? true
:info role
:on-click #(dispatch [:set :selected-participants #{whisper-identity}])}])

4
src/status_im/ios/core.cljs
View File

@ -11,7 +11,6 @@
splash-screen
http-bridge]]
[status-im.components.main-tabs :refer [main-tabs]]
[status-im.contacts.search-results :refer [contacts-search-results]]
[status-im.contacts.views.contact-list :refer [contact-list]]
[status-im.contacts.views.contact-list-modal :refer [contact-list-modal]]
[status-im.contacts.views.new-contact :refer [new-contact]]
@ -36,7 +35,6 @@
[status-im.new-group.screen-public :refer [new-public-group]]
[status-im.participants.views.add :refer [new-participants]]
[status-im.participants.views.remove :refer [remove-participants]]
[status-im.group-settings.screen :refer [group-settings]]
[status-im.profile.screen :refer [profile my-profile]]
[status-im.profile.edit.screen :refer [edit-my-profile]]
[status-im.profile.photo-capture.screen :refer [profile-photo-capture]]
@ -107,10 +105,8 @@
:add-participants-toggle-list add-participants-toggle-list
:reorder-groups reorder-groups
:new-public-group new-public-group
:group-settings group-settings
:contact-list main-tabs
:contact-toggle-list contact-toggle-list
:contact-list-search-results contacts-search-results
:group-contacts contact-list
:new-contact new-contact
:qr-scanner qr-scanner

77
src/status_im/ios/platform.cljs
View File

@ -61,82 +61,7 @@
:icon {:padding-top 0
:bottom -4
:justify-content :flex-end}}}
:new-chat {:option-inner-container {:height 64}
:option-icon-container {:background-color styles/color-blue-transparent
:margin-top 12}
:option-name-text {:font-size 17
:color styles/color-light-blue}
:contact-list-title-container {:background-color styles/color-white
:padding-top 19
:padding-bottom 15
:margin-top 16}
:contact-list-title {:color styles/text1-color
:font-size 16}}
:contacts {:subtitle {:color styles/text1-color
:font-size 16
:letter-spacing -0.2
:flex-shrink 1}
:subtitle-count {:color styles/color-gray4
:font-size 16
:letter-spacing -0.2}
:info-container {:margin-left 16}
:contact-inner-container {:height 63}
:icon-check {:border-radius 50
:width 24
:height 24}
:group-header {:flexDirection :row
:alignItems :center
:margin-top 24
:padding-top 19
:padding-bottom 15
:padding-left 16
:padding-right 16
:backgroundColor styles/color-white}
:show-all {:padding-left 72
:height 64}
:show-all-text {:fontSize 16
:color styles/color-gray4
:letter-spacing -0.2}
:show-all-text-font :default
:contact-container {:padding-right 16}
:name-text {:fontSize 17
:line-height 20
:letter-spacing -0.2
:color styles/text1-color}}
:new-group {:group-name-text {:font-size 13}
:members-text {:letter-spacing -0.2
:font-size 16}
:members-text-count {:letter-spacing -0.2
:font-size 16}
:add-text {:margin-left 14
:letter-spacing -0.2
:font-size 17
:line-height 20}
:contact-container {:height 63}
:settings-group-text {:color styles/color-light-blue
:letter-spacing -0.2
:font-size 17
:line-height 20}
:settings-group-item {:padding-left 16
:height 64
:flex-direction :row
:align-items :center}
:settings-group-container {:margin-top 25}
:settings-icon-container {:background-color "#628fe333"
:border-radius 50}
:delete-group-prompt-text {:font-size 14
:letter-spacing -0.2}
:delete-icon-container {:background-color "#d84b4b33"
:border-radius 50}}
:reorder-groups {:order-item-separator {:margin-left 16
:opacity 0.5}
:order-item-contacts {:font-size 17
:line-height 20
:letter-spacing -0.2}}
:confirm-button-label {:color styles/color-white
:font-size 17
:line-height 20
:letter-spacing -0.2}
:contacts {:show-all-text-font :default}
:bottom-gradient {:height 1}
:input-label {:left 0}
:input-error-text {:margin-left 0}

98
src/status_im/new_chat/screen.cljs
View File

@ -1,85 +1,53 @@
(ns status-im.new-chat.screen
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]]
(:require [re-frame.core :refer [dispatch]]
[status-im.components.common.common :as common]
[status-im.components.renderers.renderers :as renderers]
[status-im.components.action-button.action-button :refer [action-button
action-separator]]
[status-im.components.action-button.styles :refer [actions-list]]
[status-im.components.react :refer [view text
linear-gradient
image
touchable-highlight
list-view
list-item]]
[status-im.contacts.views.contact :refer [contact-view]]
[status-im.components.contact.contact :refer [contact-view]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar-new.view :refer [toolbar-with-search]]
[status-im.components.drawer.view :refer [drawer-view]]
[status-im.new-chat.styles :as st]
[status-im.utils.listview :as lw]
[status-im.i18n :refer [label]]
[status-im.utils.platform :refer [ios?]]))
(defn list-bottom-shadow []
[linear-gradient {:style {:height 4}
:colors st/list-bottom-shadow}])
(defn list-top-shadow []
[linear-gradient {:style {:height 3}
:colors st/list-top-shadow}])
(defn list-separator []
(when ios?
[view st/list-separator-wrapper
[view st/list-separator]]))
(defn options-list-item [{:keys [on-press icon-uri label-key]}]
[touchable-highlight {:on-press on-press}
[view st/option-container
[view st/option-inner-container
[view st/option-icon-container
[image {:source {:uri icon-uri}
:style st/option-icon}]]
[view st/option-info-container
[text {:style st/option-name-text}
(label label-key)]]]]])
[status-im.i18n :refer [label]]))
(defn options-list []
[view
[view (st/options-list)
[options-list-item {:on-press #(dispatch [:open-contact-toggle-list :chat-group])
:icon-uri :icon_private_group_big
:label-key :t/new-group-chat}]
[list-separator]
[options-list-item {:on-press #(dispatch [:navigate-to :new-public-group])
:icon-uri :icon_public_group_big
:label-key :t/new-public-group-chat}]
[list-separator]
[options-list-item {:on-press #(dispatch [:navigate-to :new-contact])
:icon-uri :icon_add_blue
:label-key :t/add-new-contact}]]
(when-not ios? [list-bottom-shadow])])
[view actions-list
[action-button (label :t/new-group-chat)
:private_group_big
#(dispatch [:open-contact-toggle-list :chat-group])]
[action-separator]
[action-button (label :t/new-public-group-chat)
:public_group_big
#(dispatch [:navigate-to :new-public-group])]
[action-separator]
[action-button (label :t/add-new-contact)
:add_blue
#(dispatch [:navigate-to :new-contact])]])
(defn contact-list-row []
(fn [row _ _]
(list-item ^{:key row} [contact-view {:contact row}])))
(defn contact-list-title [contact-count]
[view
[view st/contact-list-title-container
[text {:style st/contact-list-title
:font :medium}
(label :t/choose-from-contacts)
(when ios? [text {:style st/contact-list-title-count
:font :medium}
" " contact-count])]]
(when-not ios? [list-top-shadow])])
(defn contact-list-separator [_ row-id _]
(when ios? (list-item ^{:key row-id} [list-separator])))
(list-item ^{:key row}
[contact-view {:contact row
:on-press #(dispatch [:open-chat-with-contact %])}])))
(defview new-chat-toolbar []
[show-search [:get-in [:toolbar-search :show]]]
[show-search [:get-in [:toolbar-search :show]]
search-text [:get-in [:toolbar-search :text]]]
[view
[status-bar]
(toolbar-with-search
{:show-search? (= show-search :contact-list)
:search-text search-text
:search-key :contact-list
:title (label :t/contacts-group-new-chat)
:search-placeholder (label :t/search-for)})])
@ -99,10 +67,12 @@
:renderHeader #(list-item
[view
[options-list]
[contact-list-title (count contacts)]
(when-not ios? [view st/spacing-top])])
:renderSeparator contact-list-separator
:renderFooter #(list-item (when-not ios? [view
[view st/spacing-bottom]
[list-bottom-shadow]]))
[common/bottom-shaddow]
[common/form-title (label :t/choose-from-contacts)
{:count-value (count contacts)}]
[common/list-header]])
:renderSeparator renderers/list-separator-renderer
:renderFooter #(list-item [view
[common/list-footer]
[common/bottom-shaddow]])
:style st/contacts-list}])]])

79
src/status_im/new_chat/styles.cljs
View File

@ -1,85 +1,10 @@
(ns status-im.new-chat.styles
(:require [status-im.components.styles :as st]
[status-im.utils.platform :as p]))
(def list-bottom-shadow
["rgba(24, 52, 76, 0.165)"
"rgba(24, 52, 76, 0.03)"
"rgba(24, 52, 76, 0.01)"])
(def list-top-shadow
["rgba(24, 52, 76, 0.01)"
"rgba(24, 52, 76, 0.03)"])
(def list-separator
{:border-bottom-width 1
:border-bottom-color st/color-gray5
:margin-left 72
:opacity 0.5})
(def list-separator-wrapper
{:background-color st/color-white
:height 1})
(defn options-list []
{:padding-top (if p/ios? 0 8)
:padding-bottom (if p/ios? 0 8)
:background-color st/color-white})
(def option-container
{:flex-direction :row
:background-color st/color-white})
(def option-inner-container
(merge {:flex 1
:flex-direction :row
:background-color st/color-white}
(get-in p/platform-specific [:component-styles :new-chat :option-inner-container])))
(def option-icon-container
(merge {:width 40
:height 40
:border-radius 50
:margin-left 16}
(get-in p/platform-specific [:component-styles :new-chat :option-icon-container])))
(def option-icon
{:width 24
:height 24
:top 8
:left 8})
(def option-info-container
{:flex 1
:flexDirection :column
:margin-left 16
:justifyContent :center})
(def option-name-text
(get-in p/platform-specific [:component-styles :new-chat :option-name-text]))
(def contact-list-title-container
(merge {:padding-left 16}
(get-in p/platform-specific [:component-styles :new-chat :contact-list-title-container])))
(def contact-list-title
(get-in p/platform-specific [:component-styles :new-chat :contact-list-title]))
(def contact-list-title-count
{:color st/text4-color
:opacity 0.5})
(:require [status-im.components.styles :as common]))
(def contacts-list-container
{:flex 1
:margin-bottom 0})
(def contacts-list
{:backgroundColor st/color-light-gray})
{:backgroundColor common/color-light-gray})
(def spacing-top
{:background-color st/color-white
:height 8})
(def spacing-bottom
{:background-color st/color-white
:height 8})

29
src/status_im/new_group/screen_private.cljs
View File

@ -1,13 +1,15 @@
(ns status-im.new-group.screen-private
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [dispatch]]
[status-im.contacts.views.contact :refer [contact-view]]
[status-im.components.contact.contact :refer [contact-view]]
[status-im.components.common.common :as common]
[status-im.components.react :refer [view
scroll-view
keyboard-avoiding-view
list-view
list-item]]
[status-im.components.confirm-button :refer [confirm-button]]
[status-im.components.renderers.renderers :as renderers]
[status-im.components.sticky-button :refer [sticky-button]]
[status-im.utils.listview :refer [to-datasource]]
[status-im.new-group.styles :as st]
[status-im.new-group.views.group :refer [group-toolbar
@ -15,8 +17,7 @@
group-name-view
add-btn
more-btn
delete-btn
separator]]
delete-btn]]
[status-im.new-group.validations :as v]
[status-im.i18n :refer [label]]
[status-im.utils.platform :refer [ios?]]
@ -29,7 +30,7 @@
contacts-count [:all-added-group-contacts-count (:group-id group)]]
[view
(when (pos? contacts-count)
[separator])
[common/list-separator])
[view
(doall
(map (fn [row]
@ -43,14 +44,11 @@
:text (label :t/remove-from-group)}]
:extended? true}]
(when-not (= row (last contacts))
[separator])])
[common/list-separator])])
contacts))]
(when (< contacts-limit contacts-count)
[more-btn contacts-limit contacts-count #(dispatch [:navigate-to :edit-group-contact-list])])])
(defn save []
(dispatch [:set-group-name]))
(defview edit-group []
[group-name [:get :new-chat-name]
group [:get-contact-group]
@ -69,17 +67,12 @@
(dispatch [:delete-group])
(dispatch [:navigate-to-clean :contact-list]))]]
(when save-btn-enabled?
[confirm-button (label :t/save) save])]))
(defn render-separator [_ row-id _]
(list-item ^{:key row-id}
[separator]))
[sticky-button (label :t/save) #(dispatch [:set-group-name])])]))
(defn render-row [row _ _]
(list-item
^{:key row}
[contact-view {:contact row
:on-click #()}]))
[contact-view {:contact row}]))
(defview new-group []
[contacts [:selected-group-contacts]
@ -96,9 +89,9 @@
:renderRow render-row
:bounces false
:keyboardShouldPersistTaps true
:renderSeparator render-separator}]]
:renderSeparator renderers/list-separator-renderer}]]
(when save-btn-enabled?
[confirm-button (label :t/save)
[sticky-button (label :t/save)
(if (= group-type :contact-group)
#(dispatch [:create-new-group group-name])
#(dispatch [:create-new-group-chat group-name]))])]))

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

@ -13,12 +13,6 @@
color-gray5]]
[status-im.utils.platform :refer [platform-specific] :as p]))
(defn ps-reorder [item]
(get-in platform-specific [:component-styles :reorder-groups item]))
(defn ps-new-group [item]
(get-in platform-specific [:component-styles :new-group item]))
(defn toolbar-icon [enabled?]
{:width 20
:height 18
@ -34,9 +28,9 @@
:flex-direction :column
:background-color color-light-gray})
(def reorder-list-container
(merge {:flex 1}
(ps-reorder :reorder-list-container)))
(defstyle reorder-list-container
{:flex 1
:android {:padding-top 16}})
(def chat-name-container
{:margin-top 21
@ -71,24 +65,25 @@
:height 40
:padding-bottom 0})
(def group-name-text
(merge (ps-new-group :group-name-text)
{:letter-spacing -0.1
:color color-gray4}))
(defstyle group-name-text
{:letter-spacing -0.1
:color color-gray4
:ios {:font-size 13}
:android {:font-size 12}})
(def members-container
{:flex-direction :row
:padding-top 20})
(defstyle members-text
{:color color-gray4
:ios {:letter-spacing -0.2
:font-size 16}
:android {:font-size 14}})
(def members-text
(merge (ps-new-group :members-text)
{:color color-gray4}))
(def members-text-count
(merge (ps-new-group :members-text-count)
{:margin-left 8
:color color-gray4
:opacity 0.6}))
(defstyle members-text-count
{:margin-left 8
:color color-gray4
:opacity 0.6
:ios {:letter-spacing -0.2
:font-size 16}
:android {:font-size 14}})
(def add-container
{:flex-direction :row
@ -96,73 +91,70 @@
:height 64
:margin-top 12})
(def settings-icon-container
(merge (ps-new-group :settings-icon-container)
{:width 40
:height 40
:align-items :center
:justify-content :center}))
(defstyle settings-icon-container
{:width 40
:height 40
:align-items :center
:justify-content :center
:ios {:background-color "#628fe333"
:border-radius 50}})
(def add-icon
{:align-items :center
:width 24
:height 24})
(def add-group-text
(merge (ps-new-group :settings-group-text)
{:color color-light-blue}))
(defstyle add-group-text
{:color color-light-blue
:ios {:color color-light-blue
:letter-spacing -0.2
:font-size 17
:line-height 20}
:android {:letter-spacing 0.5
:font-size 16}})
(def settings-group-text
(merge (ps-new-group :settings-group-text)))
add-group-text)
(def settings-group-text-container
{:padding-left 16})
(def delete-group-text
(merge (ps-new-group :settings-group-text)
(merge add-group-text
{:color color-light-red}))
(def delete-group-prompt-text
(merge (ps-new-group :delete-group-prompt-text)
{:color color-gray4
:padding-top 5}))
(defstyle delete-group-prompt-text
{:color color-gray4
:padding-top 5
:ios {:font-size 14
:letter-spacing -0.2}
:android {:font-size 12}})
(def contact-container
(merge (ps-new-group :contact-container)
{:flex-direction :row
:justify-content :center
:align-items :center}))
(defstyle contact-container
{:flex-direction :row
:justify-content :center
:align-items :center
:ios {:height 63}
:android {:height 56}})
(def selected-contact
{:background-color selected-contact-color})
(defstyle settings-group-container
{:ios {:margin-top 25}
:android {:margin-top 23}})
(def icon-check-container
(merge (get-in platform-specific [:component-styles :contacts :icon-check])
{:alignItems :center
:justifyContent :center}))
(defstyle settings-group-item
{:padding-left 16
:flex-direction :row
:align-items :center
:ios {:height 64}
:android {:height 56}})
(def toggle-container
{:width 56
:height 56
:alignItems :center
:justifyContent :center})
(def check-icon
{:width 12
:height 12})
(def settings-group-container
(ps-new-group :settings-group-container))
(def settings-group-item
(ps-new-group :settings-group-item))
(def delete-icon-container
(merge (ps-new-group :delete-icon-container)
{:width 40
:height 40
:align-items :center
:justify-content :center}))
(defstyle delete-icon-container
{:width 40
:height 40
:align-items :center
:justify-content :center
:ios {:background-color "#d84b4b33"
:border-radius 50}})
(def order-item-container
{:background-color color-white})
@ -187,10 +179,14 @@
:line-height 20
:letter-spacing -0.2}})
(def order-item-contacts
(merge (ps-reorder :order-item-contacts)
{:padding-left 8
:color color-gray4}))
(defstyle order-item-contacts
{:padding-left 8
:color color-gray4
:ios {:font-size 17
:line-height 20
:letter-spacing -0.2}
:android {:font-size 16
:line-height 24}})
(defstyle order-item-icon
{:android {:padding-horizontal 16}
@ -200,9 +196,10 @@
{:background-color color-white})
(def order-item-separator
(merge {:height 1
:background-color color-gray5}
(ps-reorder :order-item-separator)))
{:height 1
:background-color color-gray5
:ios {:margin-left 16
:opacity 0.5}})
(def toolbar-title-with-count-text
{:color text1-color

50
src/status_im/new_group/views/chat_group_settings.cljs
View File

@ -1,38 +1,35 @@
(ns status-im.new-group.views.chat-group-settings
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [dispatch]]
[status-im.contacts.views.contact :refer [contact-view]]
[status-im.components.react :refer [view
scroll-view
keyboard-avoiding-view
icon
touchable-highlight]]
[status-im.components.confirm-button :refer [confirm-button]]
[status-im.new-group.styles :as st]
[status-im.new-group.views.group :refer [group-toolbar
group-chat-settings-btns
group-name-view
add-btn
more-btn
delete-btn
separator]]
[status-im.new-group.validations :as v]
[status-im.i18n :refer [label]]
[status-im.utils.platform :refer [ios?]]
[cljs.spec :as s]))
[status-im.components.contact.contact :refer [contact-view]]
[status-im.components.common.common :as common]
[status-im.components.react :refer [view
scroll-view
keyboard-avoiding-view
icon
touchable-highlight]]
[status-im.components.sticky-button :refer [sticky-button]]
[status-im.new-group.styles :as st]
[status-im.new-group.views.group :refer [group-toolbar
group-chat-settings-btns
group-name-view
add-btn
more-btn
delete-btn]]
[status-im.new-group.validations :as v]
[status-im.i18n :refer [label]]
[status-im.utils.platform :refer [ios?]]
[cljs.spec :as s]))
(def contacts-limit 3)
(defn save-chat-name []
(dispatch [:set-chat-name]))
(defview chat-group-contacts-view [admin?]
[contacts [:current-chat-contacts]]
(let [limited-contacts (take contacts-limit contacts)
contacts-count (count contacts)]
[view
(when (and admin? (pos? contacts-count))
[separator])
[common/list-separator])
[view
(doall
(map (fn [row]
@ -40,14 +37,13 @@
[view
[contact-view
{:contact row
:on-click #()
:extend-options [{:value #(do
(dispatch [:set :selected-participants #{(:whisper-identity row)}])
(dispatch [:remove-participants]))
:text (label :t/remove)}]
:text (label :t/remove)}]
:extended? admin?}]
(when-not (= row (last limited-contacts))
[separator])])
[common/list-separator])])
limited-contacts))]
(when (< contacts-limit contacts-count)
[more-btn contacts-limit contacts-count #(dispatch [:navigate-to :edit-chat-group-contact-list])])]))
@ -77,4 +73,4 @@
[view st/separator]
[group-chat-settings-btns]]]
(when save-btn-enabled?
[confirm-button (label :t/save) save-chat-name])]))
[sticky-button (label :t/save) #(dispatch [:set-chat-name])])]))

111
src/status_im/new_group/views/contact_list.cljs
View File

@ -1,20 +1,17 @@
(ns status-im.new-group.views.contact-list
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [dispatch]]
[status-im.contacts.views.contact :refer [contact-view]]
[status-im.components.contact.contact :refer [contact-view]]
[status-im.components.renderers.renderers :as renderers]
[status-im.components.react :refer [view
text
list-view
list-item]]
[status-im.components.confirm-button :refer [confirm-button]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar-new.view :refer [toolbar-with-search]]
[status-im.utils.listview :refer [to-datasource]]
[status-im.new-group.views.group :refer [separator]]
[status-im.new-group.styles :as st]
[status-im.contacts.styles :as cst]
[status-im.i18n :refer [label]]
[status-im.components.toolbar-new.actions :as act]))
[status-im.i18n :refer [label]]))
(defview contact-list-toolbar [title]
[show-search [:get-in [:toolbar-search :show]]
@ -26,37 +23,51 @@
:title title
:search-placeholder (label :t/search-contacts)}))
(defn render-separator [_ row-id _]
(list-item ^{:key row-id}
[separator]))
(defn render-spacing []
#(list-item [view cst/contact-list-spacing]))
(defn render-row [group]
(fn [row _ _]
(list-item
^{:key row}
[contact-view {:contact row
:extended? true
:extend-options (when group
[{:value #(dispatch [:remove-contact-from-group
(:whisper-identity row)
(:group-id group)])
:text (label :t/remove-from-group)}])
:on-click nil}])))
(defview contacts-list-view [group]
[contacts [:all-added-group-contacts-filtered (:group-id group)]]
(defn contacts-list [contacts renderer-function]
[view {:flex 1}
[list-view {:dataSource (to-datasource contacts)
:enableEmptySections true
:renderRow (render-row group)
:renderRow renderer-function
:bounces false
:keyboardShouldPersistTaps true
:renderSeparator render-separator
:renderFooter (render-spacing)
:renderHeader (render-spacing)}]])
:renderSeparator renderers/list-separator-renderer
:renderFooter renderers/list-footer-renderer
:renderHeader renderers/list-header-renderer}]])
(defview chat-contacts-list-view []
[contacts [:contacts-filtered :current-chat-contacts]
current-pk [:get :current-public-key]
group-admin [:chat :group-admin]]
(let [admin? (= current-pk group-admin)]
[contacts-list contacts (fn [row _ _]
(list-item
^{:key row}
[contact-view {:contact row
:extended? admin?
:extend-options [{:value #(do
(dispatch [:set :selected-participants
#{(:whisper-identity row)}])
(dispatch [:remove-participants]))
:text (label :t/remove)}]}]))]))
(defview contacts-list-view [group]
[contacts [:all-added-group-contacts-filtered (:group-id group)]]
[contacts-list contacts (fn [row _ _]
(list-item
^{:key row}
[contact-view {:contact row
:extended? true
:extend-options [{:value #(dispatch [:remove-contact-from-group
(:whisper-identity row)
(:group-id group)])
:text (label :t/remove-from-group)}]}]))])
(defview edit-chat-group-contact-list []
[chat-name [:chat :name]]
[view st/group-container
[status-bar]
[contact-list-toolbar chat-name]
[chat-contacts-list-view]])
(defview edit-group-contact-list []
[group [:get-contact-group]
@ -64,38 +75,4 @@
[view st/group-container
[status-bar]
[contact-list-toolbar (:name group)]
[contacts-list-view group]])
(defn render-chat-row [admin?]
(fn [row _ _]
(list-item
^{:key row}
[contact-view {:contact row
:extended? admin?
:extend-options [{:value #(do
(dispatch [:set :selected-participants #{(:whisper-identity row)}])
(dispatch [:remove-participants]))
:text (label :t/remove)}]
:on-click #()}])))
(defview chat-contacts-list-view []
[contacts [:contacts-filtered :current-chat-contacts]
current-pk [:get :current-public-key]
group-admin [:chat :group-admin]]
(let [admin? (= current-pk group-admin)]
[view {:flex 1}
[list-view {:dataSource (to-datasource contacts)
:enableEmptySections true
:renderRow (render-chat-row admin?)
:bounces false
:keyboardShouldPersistTaps true
:renderSeparator render-separator
:renderFooter (render-spacing)
:renderHeader (render-spacing)}]]))
(defview edit-chat-group-contact-list []
[chat-name [:chat :name]]
[view st/group-container
[status-bar]
[contact-list-toolbar chat-name]
[chat-contacts-list-view]])
[contacts-list-view group]])

92
src/status_im/new_group/views/contact_toggle_list.cljs
View File

@ -1,24 +1,24 @@
(ns status-im.new-group.views.contact-toggle-list
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [dispatch]]
[status-im.contacts.views.contact :refer [contact-view]]
[status-im.components.react :refer [view
keyboard-avoiding-view
text
list-view
list-item]]
[status-im.components.confirm-button :refer [confirm-button]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar-new.view :refer [toolbar-with-search]]
[status-im.utils.listview :refer [to-datasource]]
[status-im.utils.platform :refer [ios?]]
[status-im.new-group.views.toggle-contact :refer [group-toggle-contact
group-toggle-participant]]
[status-im.components.common.common :refer [separator]]
[status-im.new-group.styles :as st]
[status-im.contacts.styles :as cst]
[status-im.i18n :refer [label]]
[status-im.components.toolbar-new.actions :as act]))
[status-im.components.contact.contact :refer [contact-view]]
[status-im.components.renderers.renderers :as renderers]
[status-im.components.react :refer [view
keyboard-avoiding-view
text
list-view
list-item]]
[status-im.components.sticky-button :refer [sticky-button]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar-new.view :refer [toolbar-with-search]]
[status-im.utils.listview :refer [to-datasource]]
[status-im.utils.platform :refer [ios?]]
[status-im.new-group.views.toggle-contact :refer [group-toggle-contact
group-toggle-participant]]
[status-im.new-group.styles :as st]
[status-im.contacts.styles :as cst]
[status-im.i18n :refer [label]]
[status-im.components.toolbar-new.actions :as act]))
(defn title-with-count [title count-value]
[view st/toolbar-title-with-count
@ -41,12 +41,17 @@
:custom-title (title-with-count title contacts-count)
:search-placeholder (label :t/search-contacts)}))
(defn render-separator [_ row-id _]
(list-item ^{:key row-id}
[separator cst/contact-item-separator]))
(defn render-spacing []
#(list-item [view cst/contact-list-spacing]))
(defn toggle-list [contacts render-function]
[view {:flex 1}
[list-view
{:dataSource (to-datasource contacts)
:renderRow (fn [row _ _]
(list-item ^{:key row} [render-function row]))
:renderSeparator renderers/list-separator-renderer
:renderFooter renderers/list-footer-renderer
:renderHeader renderers/list-header-renderer
:style cst/contacts-list
:keyboardShouldPersistTaps true}]])
(defview contact-toggle-list []
[contacts [:all-added-group-contacts-filtered]
@ -60,18 +65,9 @@
:t/new-group
:t/new-group-chat))
selected-contacts-count]
[view {:flex 1}
[list-view
{:dataSource (to-datasource contacts)
:renderRow (fn [row _ _]
(list-item ^{:key row} [group-toggle-contact row]))
:renderSeparator render-separator
:renderFooter (render-spacing)
:renderHeader (render-spacing)
:style cst/contacts-list
:keyboardShouldPersistTaps true}]]
[toggle-list contacts group-toggle-contact]
(when (pos? selected-contacts-count)
[confirm-button (label :t/next) #(dispatch [:navigate-to :new-group])])])
[sticky-button (label :t/next) #(dispatch [:navigate-to :new-group])])])
(defview add-contacts-toggle-list []
[contacts [:all-group-not-added-contacts-filtered]
@ -81,18 +77,9 @@
st/group-container)
[status-bar]
[toggle-list-toolbar (:name group) selected-contacts-count]
[view {:flex 1}
[list-view
{:dataSource (to-datasource contacts)
:renderRow (fn [row _ _]
(list-item ^{:key row} [group-toggle-contact row]))
:renderSeparator render-separator
:renderFooter (render-spacing)
:renderHeader (render-spacing)
:style cst/contacts-list
:keyboardShouldPersistTaps true}]]
[toggle-list contacts group-toggle-contact]
(when (pos? selected-contacts-count)
[confirm-button (label :t/save) #(do
[sticky-button (label :t/save) #(do
(dispatch [:add-selected-contacts-to-group])
(dispatch [:navigate-back]))])])
@ -104,18 +91,9 @@
st/group-container)
[status-bar]
[toggle-list-toolbar chat-name selected-contacts-count]
[view {:flex 1}
[list-view
{:dataSource (to-datasource contacts)
:renderRow (fn [row _ _]
(list-item ^{:key row} [group-toggle-participant row]))
:renderSeparator render-separator
:renderFooter (render-spacing)
:renderHeader (render-spacing)
:style cst/contacts-list
:keyboardShouldPersistTaps true}]]
[toggle-list contacts group-toggle-participant]
(when (pos? selected-contacts-count)
[confirm-button (label :t/save) #(do
[sticky-button (label :t/save) #(do
(dispatch [:add-new-participants])
(dispatch [:navigate-back]))])])

35
src/status_im/new_group/views/group.cljs
View File

@ -2,7 +2,10 @@
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [dispatch]]
[status-im.contacts.styles :as cst]
[status-im.components.common.common :as cmn]
[status-im.components.common.common :as common]
[status-im.components.action-button.action-button :refer [action-button
action-button-disabled
action-separator]]
[status-im.components.react :refer [view
text
icon
@ -15,9 +18,6 @@
[status-im.new-group.styles :as st]
[status-im.i18n :refer [label]]))
(defn separator []
[cmn/separator cst/contact-item-separator])
(defview group-name-input []
[new-group-name [:get :new-chat-name]]
[view
@ -49,14 +49,9 @@
[group-name-input]])
(defn add-btn [on-press]
[view st/add-button-container
[touchable-highlight {:on-press on-press}
[view st/add-container
[view st/settings-icon-container
[icon :add_blue st/add-icon]]
[view st/settings-group-text-container
[text {:style st/add-group-text}
(label :t/add-members)]]]]])
[action-button (label :t/add-members)
:add_blue
on-press])
(defn delete-btn [on-press]
[view st/settings-group-container
@ -80,15 +75,11 @@
[view st/settings-group-text-container
[text {:style st/settings-group-text}
(label :t/mute-notifications)]]]]]
[separator]
[touchable-highlight {:on-press #(dispatch [:clear-history])}
[view st/settings-group-item
[view st/settings-icon-container
[icon :close_blue st/add-icon]]
[view st/settings-group-text-container
[text {:style st/settings-group-text}
(label :t/clear-history)]]]]
[separator]
[action-separator]
[action-button (label :t/clear-history)
:close_blue
#(dispatch [:clear-history])]
[action-separator]
[touchable-highlight {:on-press #(dispatch [:leave-group-chat])}
[view st/settings-group-item
[view st/delete-icon-container
@ -99,7 +90,7 @@
(defn more-btn [contacts-limit contacts-count on-press]
[view
[separator]
[common/list-separator]
[view cst/show-all
[touchable-highlight {:on-press on-press}
[view

10
src/status_im/new_group/views/reorder_groups.cljs
View File

@ -6,11 +6,11 @@
icon
touchable-highlight
list-item]]
[status-im.components.confirm-button :refer [confirm-button]]
[status-im.components.sticky-button :refer [sticky-button]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar-new.view :refer [toolbar]]
[status-im.components.sortable-list-view :refer [sortable-list-view sortable-item]]
[status-im.components.common.common :refer [top-shaddow bottom-shaddow]]
[status-im.components.common.common :as common]
[status-im.utils.listview :refer [to-datasource]]
[status-im.utils.platform :refer [android?]]
[status-im.new-group.styles :as st]
@ -39,7 +39,7 @@
(list-item
(if (= row-id last)
^{:key "bottom-shaddow"}
[bottom-shaddow]
[common/bottom-shaddow]
^{:key row-id}
[view st/order-item-separator-wrapper
[view st/order-item-separator]]))))
@ -52,7 +52,7 @@
[status-bar]
[toolbar-view]
[view st/reorder-list-container
[top-shaddow]
[common/top-shaddow]
[sortable-list-view
{:data groups
:order order
@ -61,4 +61,4 @@
:render-row (fn [row]
(sortable-item [group-item row]))
:render-separator (render-separator (last order))}]]
[confirm-button (label :t/save) #(dispatch [:save-group-order])]]))
[sticky-button (label :t/save) #(dispatch [:save-group-order])]]))

27
src/status_im/new_group/views/toggle_contact.cljs
View File

@ -1,12 +1,6 @@
(ns status-im.new-group.views.toggle-contact
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view icon touchable-highlight]]
[status-im.contacts.views.contact-inner :refer [contact-inner-view]]
[status-im.new-group.styles :as st]
[status-im.contacts.styles :as cst]
[status-im.components.styles :refer [color-light-blue color-gray5]]
[status-im.utils.platform :refer [platform-specific]]))
(:require [re-frame.core :refer [dispatch]]
[status-im.components.contact.contact :refer [toogle-contact-view]]))
(defn on-toggle [checked? whisper-identity]
(let [action (if checked? :deselect-contact :select-contact)]
@ -16,23 +10,8 @@
(let [action (if checked? :deselect-participant :select-participant)]
(dispatch [action whisper-identity])))
;;TODO: maybe it's better to have only one global component contact-view (with the types: default, extended and toggle)
(defview toogle-contact-view [{:keys [whisper-identity] :as contact} selected-key on-toggle-handler]
[checked [selected-key whisper-identity]]
[touchable-highlight {:on-press #(on-toggle-handler checked whisper-identity)}
[view
[view (merge st/contact-container (when checked {:style st/selected-contact}))
[contact-inner-view (merge {:contact contact}
(when checked {:style st/selected-contact}))]
[view st/toggle-container
[view (merge st/icon-check-container
{:background-color (if checked color-light-blue color-gray5)})
(when checked
[icon :check_on st/check-icon])]]]]])
(defn group-toggle-contact [{:keys [whisper-identity] :as contact}]
[toogle-contact-view contact :is-contact-selected? on-toggle])
(defn group-toggle-participant [{:keys [whisper-identity] :as contact}]
[toogle-contact-view contact :is-participant-selected? on-toggle-participant])
[toogle-contact-view contact :is-participant-selected? on-toggle-participant])

2
src/status_im/participants/views/contact.cljs
View File

@ -2,7 +2,7 @@
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view]]
[status-im.contacts.views.contact-inner :refer [contact-inner-view]]
[status-im.components.contact.contact :refer [contact-inner-view]]
[status-im.components.item-checkbox :refer [item-checkbox]]
[status-im.participants.styles :as st]))

4
src/status_im/profile/edit/screen.cljs
View File

@ -9,7 +9,7 @@
[status-im.components.text-field.view :refer [text-field]]
[status-im.i18n :refer [label]]
[status-im.profile.screen :refer [colorize-status-hashtags]]
[status-im.components.confirm-button :refer [confirm-button]]
[status-im.components.sticky-button :refer [sticky-button]]
[status-im.components.chat-icon.screen :refer [my-profile-icon]]
[status-im.components.context-menu :refer [context-menu]]
[status-im.profile.validations :as v]
@ -104,6 +104,6 @@
[edit-profile-status changed-account]
[status-prompt changed-account]]
(when (and profile-edit-data-changed? profile-edit-data-valid?)
[confirm-button (label :t/save) #(do
[sticky-button (label :t/save) #(do
(dispatch [:check-status-change (:status changed-account)])
(dispatch [:account-update changed-account]))])]))