status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-01-09 18:46:19 +00:00
Code Issues Projects Releases Wiki Activity

[ISSUE #3321] Migrated group chat creation flow

Browse Source 
Signed-off-by: Julien Eluard <julien.eluard@gmail.com>
This commit is contained in:
Julien Eluard 2018-02-15 16:48:04 +01:00
parent fb4ea0572b
commit 63b1dbdb76
No known key found for this signature in database
GPG Key ID: 6FD7DB5437FCBEF6
40 changed files with 251 additions and 428 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.re-natal
View File

@ -29,7 +29,6 @@
"identicon.js",
"react-native-fs",
"react-native-dialogs",
"react-native-sortable-listview",
"react-native-image-resizer",
"react-native-image-crop-picker",
"react-native-webview-bridge",

5
package-lock.json generated
View File

@ -7064,11 +7064,6 @@
"resolved": "https://registry.npmjs.org/react-native-scrollable-mixin/-/react-native-scrollable-mixin-1.0.1.tgz",
"integrity": "sha1-NKMhZ7ZCSFlBVP0NaosD8idAVI4="
},
"react-native-sortable-listview": {
"version": "0.2.6",
"resolved": "https://registry.npmjs.org/react-native-sortable-listview/-/react-native-sortable-listview-0.2.6.tgz",
"integrity": "sha1-0e1rtVL6UZCZTlB8A95aKSFojKY="
},
"react-native-splash-screen": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.0.6.tgz",

1
package.json
View File

@ -67,7 +67,6 @@
"react-native-os": "1.1.0",
"react-native-qrcode": "0.2.6",
"react-native-randombytes": "3.0.0",
"react-native-sortable-listview": "0.2.6",
"react-native-splash-screen": "3.0.6",
"react-native-svg": "6.0.1-rc.3",
"react-native-tcp": "3.3.0",

1
react-native/src/status_im/react_native/js_dependencies.cljs
View File

@ -21,7 +21,6 @@
(def random-bytes (js/require "react-native-randombytes"))
(def react-native (js/require "react-native"))
(def realm (js/require "realm"))
(def sortable-listview (js/require "react-native-sortable-listview"))
(def vector-icons (js/require "react-native-vector-icons/Ionicons"))
(def webview-bridge (js/require "react-native-webview-bridge"))
(def svg (js/require "react-native-svg"))

2
src/status_im/chat/styles/input/input.cljs
View File

@ -14,7 +14,7 @@
:margin-bottom margin-bottom
:flex-direction :column
:border-top-width border-height
:border-top-color colors/light-gray
:border-top-color colors/gray-light
:elevation 2})
(def input-container

2
src/status_im/chat/styles/input/parameter_box.cljs
View File

@ -4,6 +4,6 @@
(def root
{:background-color common/color-white
:border-top-color colors/light-gray
:border-top-color colors/gray-light
:border-top-width 1})

2
src/status_im/chat/styles/input/result_box.cljs
View File

@ -4,7 +4,7 @@
(defn root [height bottom]
{:background-color common/color-white
:border-top-color colors/light-gray
:border-top-color colors/gray-light
:border-top-width 1
:flex-direction :column
:height height

4
src/status_im/chat/styles/input/suggestions.cljs
View File

@ -9,7 +9,7 @@
(def root
{:background-color common/color-white
:border-top-color colors/light-gray
:border-top-color colors/gray-light
:border-top-width 1})
(defn item-suggestion-container [last?]
@ -18,7 +18,7 @@
:height item-height
:margin-left 14
:padding-right 14
:border-bottom-color colors/light-gray
:border-bottom-color colors/gray-light
:border-bottom-width (if last? 0 border-height)})
(def item-suggestion-name

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

@ -150,6 +150,7 @@
:invite-friends "Invite friends"
:chats "Chats"
:delete-chat "Delete chat"
:group-chat "Group chat"
:new-group-chat "New group chat"
:new-public-group-chat "Join public chat"
:edit-chats "Edit chats"
@ -157,6 +158,7 @@
:empty-topic "Empty topic"
:topic-format "Wrong format [a-z0-9\\-]+"
:public-group-topic "Topic"
:set-a-topic "Set a topic"
;;discover
:discover "Discover"
@ -200,6 +202,7 @@
;;group-settings
:remove "Remove"
:save "Save"
:create "Create"
:delete "Delete"
:clear-history "Clear history"
:mute-notifications "Mute notifications"

14
src/status_im/ui/components/checkbox/styles.cljs
View File

@ -1,20 +1,16 @@
(ns status-im.ui.components.checkbox.styles
(:require-macros [status-im.utils.styles :refer [defnstyle]])
(:require [status-im.ui.components.styles :as styles]))
(:require [status-im.ui.components.colors :as colors]))
(def wrapper
{:padding 16})
(defnstyle icon-check-container [checked?]
{:background-color (if checked? styles/color-light-blue styles/color-gray5)
(defn icon-check-container [checked?]
{:background-color (if checked? colors/blue colors/gray-lighter)
:alignItems :center
:justifyContent :center
:android {:border-radius 2
:width 17
:height 17}
:ios {:border-radius 50
:border-radius 2
:width 24
:height 24}})
:height 24})
(def check-icon
{:width 12

3
src/status_im/ui/components/checkbox/view.cljs
View File

@ -6,7 +6,8 @@
;; https://facebook.github.io/react-native/docs/checkbox.html
(defn checkbox [{:keys [on-value-change checked?]}]
[react/touchable-highlight {:style styles/wrapper :on-press #(do (when on-value-change (on-value-change (not checked?))))}
[react/touchable-highlight (merge {:style styles/wrapper}
(when on-value-change {:on-press #(on-value-change (not checked?))}))
[react/view (styles/icon-check-container checked?)
(when checked?
[react/icon :check_on styles/check-icon])]])

3
src/status_im/ui/components/colors.cljs
View File

@ -7,9 +7,8 @@
(def black "#000000") ;; Used as the default text color
(def black-transparent "#00000020") ;; Used as background color for rounded button on dark background
(def gray "#939ba1") ;; Used as a background for a light foreground and as section header and secondary text color
(def gray-light "#d9dae1") ;; Used as divider color
(def gray-light "#e8ebec") ;; Used as divider color
(def gray-lighter "#eef2f5") ;; Used as a background or shadow
(def blue "#4360df") ;; Used as main wallet color
(def red "#ff2d55") ;; Used to highlight errors or "dangerous" actions
(def light-gray "#e8ebec") ;; Used as a background or shadow
(def text-light-gray "#212121") ;; Used for labels (home items)

16
src/status_im/ui/components/contact/contact.cljs
View File

@ -4,6 +4,7 @@
[status-im.ui.components.react :as react]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.chat-icon.screen :as chat-icon]
[status-im.ui.components.checkbox.view :as checkbox]
[status-im.ui.components.contact.styles :as styles]
[status-im.ui.components.list-selection :as list-selection]
[status-im.utils.gfycat.core :as gfycat]))
@ -24,11 +25,11 @@
[react/text {:style styles/info-text}
info])]]))
(defn contact-view [{:keys [contact extended? on-press extend-options info show-forward?]}]
(defn contact-view [{:keys [style contact extended? on-press extend-options info show-forward?]}]
[react/touchable-highlight (when-not extended?
{:on-press (when on-press #(on-press contact))})
[react/view styles/contact-container
[contact-inner-view {:contact contact :info info}]
[contact-inner-view {:contact contact :info info :style style}]
(when show-forward?
[react/view styles/forward-btn
[vector-icons/icon :icons/forward]])
@ -40,10 +41,7 @@
(views/defview toogle-contact-view [{:keys [whisper-identity] :as contact} selected-key on-toggle-handler]
(views/letsubs [checked [selected-key whisper-identity]]
[react/touchable-highlight {:on-press #(on-toggle-handler checked whisper-identity)}
[react/view (merge styles/contact-container (when checked {:style styles/selected-contact}))
[contact-inner-view (merge {:contact contact}
(when checked {:style styles/selected-contact}))]
[react/view (styles/icon-check-container checked)
(when checked
[vector-icons/icon :icons/ok {:style styles/check-icon}])]]]))
[react/view styles/contact-container
[contact-inner-view {:contact contact}]
[checkbox/checkbox {:checked? checked
:on-value-change #(on-toggle-handler checked whisper-identity)}]]))

34
src/status_im/ui/components/contact/styles.cljs
View File

@ -1,6 +1,7 @@
(ns status-im.ui.components.contact.styles
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.ui.components.styles :as common]
(:require-macros [status-im.utils.styles :refer [defstyle]])
(:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.styles :as common]
[status-im.utils.platform]))
(defstyle contact-inner-container
@ -8,7 +9,7 @@
:flex-direction :row
:align-items :center
:padding-left 16
:background-color common/color-white
:background-color colors/white
:android {:height 56}
:ios {:height 63}})
@ -33,7 +34,7 @@
(def contact-container
{:flex-direction :row
:align-items :center
:background-color common/color-white})
:background-color colors/white})
(def forward-btn
{:opacity 0.4
@ -47,28 +48,3 @@
(def more-btn
{:padding 16})
(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
:margin-right 16
:android {:border-radius 2
:width 17
:height 17}
:ios {:border-radius 50
:width 24
:height 24}})
(def check-icon
{:width 12
:height 12})

7
src/status_im/ui/components/list/styles.cljs
View File

@ -96,3 +96,10 @@
:margin-bottom 3}
:ios {:margin-top 10
:margin-bottom 2}})
(def list-with-label-wrapper
{:margin-top 26
:margin-horizontal 16})
(def label
{:color colors/gray})

6
src/status_im/ui/components/list/views.cljs
View File

@ -170,3 +170,9 @@
{:sections (clj->js (map wrap-per-section-render-fn sections))
:renderSectionHeader (wrap-render-section-header-fn render-section-header-fn)}
(when platform/ios? {:SectionSeparatorComponent (fn [] (reagent/as-element section-separator))}))])
(defn list-with-label [{:keys [style]} label list]
[react/view (merge styles/list-with-label-wrapper style)
[react/text {:style styles/label}
label]
list])

3
src/status_im/ui/components/react.cljs
View File

@ -189,8 +189,7 @@
(if (or (nil? timeout)
(> 100 timeout))
(reset! loading false)
(utils/set-timeout (fn []
(reset! loading false))
(utils/set-timeout #(reset! loading false)
timeout)))}
(if (and (not enabled?) @loading)
(or preview

20
src/status_im/ui/components/sortable_list_view.cljs
View File

@ -1,20 +0,0 @@
(ns status-im.ui.components.sortable-list-view
(:require [reagent.core :as reagent]
[status-im.ui.components.react :as react]
[status-im.react-native.js-dependencies :as js-dependencies]))
(def sortable-listview-class
(reagent/adapt-react-class js-dependencies/sortable-listview))
(defn sortable-list-view [{:keys [on-row-moved render-row] :as props}]
[sortable-listview-class
(assoc props :on-row-moved #(on-row-moved (js->clj % :keywordize-keys true))
:render-row #(render-row (js->clj % :keywordize-keys true)))])
(defn- touchable [inner]
[react/touchable-highlight (js->clj (.-props (reagent/current-component)))
[react/view
inner]])
(defn sortable-item [inner]
(react/list-item [touchable inner]))

11
src/status_im/ui/components/styles.cljs
View File

@ -10,7 +10,6 @@
(def color-blue4 "#4360df") ; colors/blue
(def color-blue4-faded "rgba(67,96,222,0.87)")
(def color-blue4-transparent "rgba(67, 96, 223, 0.10)")
(def color-blue5 "#3c56c8")
(def color-blue6 "#3745AF")
(def color-blue-transparent "#7099e632")
(def color-black "#000000")
@ -27,7 +26,6 @@
(def color-gray5 "#d9dae1")
(def color-gray6 "#212121")
(def color-gray7 "#9fa3b4")
(def color-gray8 "#6E777E")
(def color-gray9 "#E9EBEC")
(def color-gray10 "#9BA3A8")
(def color-gray11 "#EEF1F5")
@ -43,12 +41,7 @@
(def color-white-transparent-6 "rgba(255, 255, 255, 0.6)")
(def color-light-blue "#628fe3")
(def color-light-blue-transparent "#628fe333")
(def color-light-blue2 "#eff3fc")
(def color-light-blue3 "#a0bcf0")
(def color-light-blue4 "#f1f4f5")
(def color-light-blue5 "#d9dff9")
(def color-light-blue6 "#e3ebfa")
(def color-light-blue7 "#dcd6fb")
(def color-dark-blue-1 "#252c4a")
(def color-dark-blue-2 "#1f253f")
(def color-dark-blue-3 "#191f37")
@ -64,7 +57,6 @@
(def color-red-3 "#FFC1BD")
(def color-red-4 "#8A3832")
(def color-light-red "#e86363")
(def color-light-red2 "#f47979")
(def color-green-1 "#a8f4d4")
(def color-green-2 "#448469")
(def color-green-3 "#44d058")
@ -75,9 +67,7 @@
(def color-separator "#D6D6D6")
(def text1-color color-black)
(def text1-disabled-color "#555555")
(def text2-color color-gray)
(def text3-color color-blue)
(def text4-color color-gray4)
(def icon-dark-color color-dark)
(def icon-gray-color color-gray7)
@ -86,7 +76,6 @@
(def new-messages-count-color color-blue-transparent)
(def chat-background color-light-gray)
(def selected-message-color "#E4E9ED")
(def selected-contact-color color-light-blue2)
(def separator-color "#0000001f")
(def default-chat-color color-purple)

6
src/status_im/ui/components/toolbar/view.cljs
View File

@ -109,19 +109,19 @@
(defn toolbar
([props nav-item content-item] (toolbar props nav-item content-item [actions [{:image :blank}]]))
([{:keys [background-color style flat?]}
([{:keys [background-color style flat? title-centered?]}
nav-item
content-item
action-items]
[react/view {:style (merge (styles/toolbar background-color flat?) style)}
;; On iOS title must be centered. Current solution is a workaround and eventually this will be sorted out using flex
(when platform/ios?
(when (or title-centered? platform/ios?)
[react/view styles/ios-content-item
content-item])
(when nav-item
[react/view {:style (styles/toolbar-nav-actions-container 0)}
nav-item])
(if platform/ios?
(if (or title-centered? platform/ios?)
[react/view components.styles/flex]
content-item)
action-items]))

25
src/status_im/ui/screens/add_new/new_chat/views.cljs
View File

@ -1,21 +1,21 @@
(ns status-im.ui.screens.add-new.new-chat.views
(:require-macros [status-im.utils.views :as views])
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.list.views :as list]
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.contact.contact :as contact-view]
[re-frame.core :as re-frame]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.toolbar.view :as toolbar.view]
[status-im.i18n :as i18n]
[status-im.ui.components.common.common :as components]
[status-im.ui.screens.add-new.open-dapp.styles :as open-dapp.styles]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.screens.add-new.styles :as add-new.styles]
[status-im.ui.screens.add-new.new-chat.styles :as styles]
[status-im.ui.components.colors :as colors]))
[status-im.ui.screens.add-new.open-dapp.styles :as open-dapp.styles]))
(defn render-row [row _ _]
(defn- render-row [row _ _]
[contact-view/contact-view {:contact row
:on-press #(re-frame/dispatch [:open-chat-with-contact %])
:on-press #(re-frame/dispatch [:show-profile (:whisper-identity %)])
:show-forward? true}])
(views/defview new-chat []
@ -24,13 +24,12 @@
[react/keyboard-avoiding-view open-dapp.styles/main-container
[status-bar/status-bar]
[toolbar.view/simple-toolbar (i18n/label :t/new-chat)]
[components/separator]
[react/view open-dapp.styles/enter-url
[react/view add-new.styles/input-container
[react/text-input {:on-change-text #(re-frame/dispatch [:set :contacts/new-identity %])
:on-submit-editing #(when-not error-message
(re-frame/dispatch [:add-contact-handler]))
:placeholder (i18n/label :t/enter-contact-code)
:style open-dapp.styles/url-input}]
:style add-new.styles/input}]
[react/touchable-highlight {:on-press #(re-frame/dispatch [:scan-qr-code
{:toolbar-title (i18n/label :t/new-contact)}
:set-contact-identity-from-qr])

2
src/status_im/ui/screens/add_new/open_dapp/events.cljs
View File

@ -1,2 +0,0 @@
(ns status-im.ui.screens.add-new.open-dapp.events
(:require status-im.ui.screens.add-new.open-dapp.navigation))

6
src/status_im/ui/screens/add_new/open_dapp/navigation.cljs
View File

@ -1,6 +0,0 @@
(ns status-im.ui.screens.add-new.open-dapp.navigation
(:require [status-im.ui.screens.navigation :as navigation]))
(defmethod navigation/preload-data! :dapp-description
[db [_ _ {:keys [dapp]}]]
(assoc db :new/open-dapp dapp))

19
src/status_im/ui/screens/add_new/open_dapp/styles.cljs
View File

@ -1,24 +1,9 @@
(ns status-im.ui.screens.add-new.open-dapp.styles
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.ui.components.colors :as colors]))
(def main-container {:flex 1})
(def enter-url
{:flex-direction :row
:align-items :center
:border-radius 8
:height 52
:background-color colors/light-gray
:margin-horizontal 14
:margin-top 24})
(defstyle url-input
(def main-container
{:flex 1
:font-size 15
:letter-spacing -0.2
:padding-horizontal 14
:android {:padding 0}})
:background-color colors/white})
(def gray-label
{:font-size 14

21
src/status_im/ui/screens/add_new/open_dapp/views.cljs
View File

@ -1,20 +1,21 @@
(ns status-im.ui.screens.add-new.open-dapp.views
(:require-macros [status-im.utils.views :as views])
(:require [status-im.ui.components.react :as react]
[status-im.ui.screens.add-new.open-dapp.styles :as styles]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.toolbar.view :as toolbar.view]
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[re-frame.core :as re-frame]
[status-im.ui.components.react :as react]
[status-im.ui.components.action-button.action-button :as action-button]
[status-im.ui.components.common.common :as components]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.toolbar.view :as toolbar.view]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.contact.contact :as contact-view]
[status-im.ui.components.chat-icon.screen :as chat-icon.screen]))
[status-im.ui.components.chat-icon.screen :as chat-icon.screen]
[status-im.ui.screens.add-new.styles :as add-new.styles]
[status-im.ui.screens.add-new.open-dapp.styles :as styles]))
(defn render-row [row _ _]
[contact-view/contact-view {:contact row
:on-press #(re-frame/dispatch [:navigate-to :dapp-description {:dapp row}])
:on-press #(re-frame/dispatch [:navigate-to :dapp-description row])
:show-forward? true}])
(views/defview open-dapp []
@ -24,7 +25,7 @@
[status-bar/status-bar]
[toolbar.view/simple-toolbar (i18n/label :t/open-dapp)]
[components/separator]
[react/view styles/enter-url
[react/view add-new.styles/input-container
[react/text-input {:on-change-text #(reset! url-text %)
:on-submit-editing #(do
(re-frame/dispatch [:navigate-to-clean :home])
@ -32,7 +33,7 @@
:placeholder (i18n/label :t/enter-url)
:auto-capitalize :none
:auto-correct false
:style styles/url-input}]]
:style add-new.styles/input}]]
[react/text {:style styles/list-title}
(i18n/label :t/selected-dapps)]
[list/flat-list {:data dapps
@ -42,7 +43,7 @@
:keyboardShouldPersistTaps :always}]]))
(views/defview dapp-description []
(views/letsubs [{:keys [name dapp-url] :as dapp} [:get :new/open-dapp]]
(views/letsubs [{:keys [name dapp-url] :as dapp} [:get-screen-params]]
[react/keyboard-avoiding-view styles/main-container
[status-bar/status-bar]
[toolbar.view/simple-toolbar]

20
src/status_im/ui/screens/add_new/styles.cljs Normal file
View File

@ -0,0 +1,20 @@
(ns status-im.ui.screens.add-new.styles
(:require-macros [status-im.utils.styles :refer [defstyle]])
(:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.styles :as styles]))
(def input-container
{:flex-direction :row
:align-items :center
:border-radius styles/border-radius
:height 52
:background-color colors/gray-lighter
:margin-horizontal 14
:margin-top 24})
(defstyle input
{:flex 1
:font-size 15
:letter-spacing -0.2
:padding-horizontal 14
:android {:padding 0}})

4
src/status_im/ui/screens/browser/styles.cljs
View File

@ -32,7 +32,7 @@
(def background
{:flex 1
:background-color colors/light-gray
:background-color colors/gray-lighter
:align-items :center
:justify-content :center})
@ -51,7 +51,7 @@
:flex 1
:border-radius 4
:height 36
:background-color colors/light-gray
:background-color colors/gray-lighter
:padding-horizontal 12
:android {:align-items :flex-start
:margin-left (if show-actions 66 18)

2
src/status_im/ui/screens/db.cljs
View File

@ -103,7 +103,7 @@
(spec/def :navigation.screen-params/edit-contact-group (allowed-keys :opt-un [:navigation.screen-params.edit-contact-group/group
:navigation.screen-params.edit-contact-group/group-type]))
(spec/def :navigation.screen-params.dapp-description/dapp :new/open-dapp)
(spec/def :navigation.screen-params/dapp-description (allowed-keys :opt-un [:navigation.screen-params.dapp-description/dapp]))
(spec/def :navigation.screen-params/dapp-description map?)
(spec/def :navigation/screen-params (spec/nilable (allowed-keys :opt-un [:navigation.screen-params/network-details
:navigation.screen-params/browser

1
src/status_im/ui/screens/events.cljs
View File

@ -23,7 +23,6 @@
status-im.ui.screens.wallet.transactions.events
status-im.ui.screens.wallet.choose-recipient.events
status-im.ui.screens.browser.events
status-im.ui.screens.add-new.open-dapp.events
status-im.ui.screens.offline-messaging-settings.events
[re-frame.core :as re-frame]
[status-im.native-module.core :as status]

71
src/status_im/ui/screens/group/add_contacts/views.cljs
View File

@ -1,70 +1,57 @@
(ns status-im.ui.screens.group.add-contacts.views
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.contact.contact :refer [toogle-contact-view]]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react]
[status-im.ui.components.sticky-button :refer [sticky-button]]
[status-im.ui.components.status-bar.view :refer [status-bar]]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.screens.group.styles :as styles]
[status-im.ui.screens.contacts.styles :as contacts.styles]
[status-im.i18n :as i18n]
[status-im.ui.screens.contacts.styles :as cstyles]
[status-im.i18n :refer [label]]
[status-im.ui.components.contact.contact :refer [toogle-contact-view]]))
[status-im.ui.screens.contacts.styles :as contacts.styles]))
(defn on-toggle [checked? whisper-identity]
(defn- on-toggle [checked? whisper-identity]
(let [action (if checked? :deselect-contact :select-contact)]
(re-frame/dispatch [action whisper-identity])))
(defn on-toggle-participant [checked? whisper-identity]
(defn- on-toggle-participant [checked? whisper-identity]
(let [action (if checked? :deselect-participant :select-participant)]
(re-frame/dispatch [action whisper-identity])))
(defn group-toggle-contact [{:keys [whisper-identity] :as contact}]
(defn- group-toggle-contact [contact]
[toogle-contact-view contact :is-contact-selected? on-toggle])
(defn group-toggle-participant [{:keys [whisper-identity] :as contact}]
(defn- group-toggle-participant [contact]
[toogle-contact-view contact :is-participant-selected? on-toggle-participant])
(defn toggle-list-toolbar [title contacts-count]
(defn- toggle-list-toolbar [{:keys [handler count label]} title]
[toolbar/toolbar {}
toolbar/default-nav-back
[react/view styles/toolbar-container
[react/view styles/toolbar-title-with-count
[react/text {:style styles/toolbar-title-with-count-text
:font :toolbar-title}
title]
(when (pos? contacts-count)
[react/view styles/toolbar-title-with-count-container
[react/text {:style styles/toolbar-title-with-count-text-count
:font :toolbar-title}
contacts-count]])]]])
[toolbar/content-title title]
(when (pos? count)
[toolbar/text-action {:handler handler}
label])])
(defn toggle-list [contacts render-function]
[react/view {:flex 1}
[list/flat-list {:style contacts.styles/contacts-list
:data contacts
:render-fn (fn [contact] [render-function contact])
:footer list/default-footer
:header list/default-header
:render-fn render-function
:keyboardShouldPersistTaps :always}]])
(defview contact-toggle-list []
(letsubs [contacts [:all-added-contacts]
(letsubs [contacts [:all-added-people-contacts]
selected-contacts-count [:selected-contacts-count]
group-type [:get-group-type]]
[react/keyboard-avoiding-view {:style styles/group-container}
[status-bar]
[toggle-list-toolbar
[toggle-list-toolbar {:handler #(re-frame/dispatch [:navigate-to :new-group])
:label (i18n/label :t/next)
:count (pos? selected-contacts-count)}
(i18n/label (if (= group-type :contact-group)
:t/new-group
:t/new-group-chat))
selected-contacts-count]
[toggle-list contacts group-toggle-contact]
(when (pos? selected-contacts-count)
[sticky-button (i18n/label :t/next) #(re-frame/dispatch [:navigate-to :new-group])])]))
:t/group-chat))]
[toggle-list contacts group-toggle-contact]]))
(defview add-contacts-toggle-list []
(letsubs [contacts [:all-group-not-added-contacts]
@ -72,12 +59,13 @@
selected-contacts-count [:selected-contacts-count]]
[react/keyboard-avoiding-view {:style styles/group-container}
[status-bar]
[toggle-list-toolbar (:name group) selected-contacts-count]
[toggle-list contacts group-toggle-contact]
(when (pos? selected-contacts-count)
[sticky-button (i18n/label :t/save) #(do
[toggle-list-toolbar {:count selected-contacts-count
:handler #(do
(re-frame/dispatch [:add-selected-contacts-to-group])
(re-frame/dispatch [:navigate-back]))])]))
(re-frame/dispatch [:navigate-back]))
:label (i18n/label :t/save)}
(:name group)]
[toggle-list contacts group-toggle-contact]]))
(defview add-participants-toggle-list []
(letsubs [contacts [:all-new-contacts]
@ -85,9 +73,10 @@
selected-contacts-count [:selected-participants-count]]
[react/keyboard-avoiding-view {:style styles/group-container}
[status-bar]
[toggle-list-toolbar chat-name selected-contacts-count]
[toggle-list contacts group-toggle-participant]
(when (pos? selected-contacts-count)
[sticky-button (i18n/label :t/save) #(do
[toggle-list-toolbar {:count selected-contacts-count
:handler #(do
(re-frame/dispatch [:add-new-group-chat-participants])
(re-frame/dispatch [:navigate-back]))])]))
(re-frame/dispatch [:navigate-back]))
:label (i18n/label :t/save)}
chat-name]
[toggle-list contacts group-toggle-participant]]))

7
src/status_im/ui/screens/group/navigation.cljs
View File

@ -12,10 +12,3 @@
(defmethod nav/preload-data! :new-public-chat
[db]
(dissoc db :public-group-topic))
(defmethod nav/preload-data! :reorder-groups
[db [_ _]]
(assoc db :group/groups-order (->> (vals (:group/contact-groups db))
(remove :pending?)
(sort-by :order >)
(map :group-id))))

61
src/status_im/ui/screens/group/reorder/views.cljs
View File

@ -1,61 +0,0 @@
(ns status-im.ui.screens.group.reorder.views
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [reagent.core :as reagent]
[re-frame.core :refer [dispatch dispatch-sync]]
[status-im.ui.components.react :refer [view text list-item]]
[status-im.ui.components.icons.vector-icons :as vi]
[status-im.ui.components.sticky-button :refer [sticky-button]]
[status-im.ui.components.status-bar.view :refer [status-bar]]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.sortable-list-view :refer [sortable-list-view sortable-item]]
[status-im.ui.components.common.common :as common]
[status-im.ui.screens.group.styles :as styles]
[status-im.i18n :refer [label label-pluralize]]))
(defn toolbar-view []
[toolbar/simple-toolbar
(label :t/reorder-groups)])
(defn group-item [{:keys [name contacts] :as group}]
(let [cnt (count contacts)]
[view styles/order-item-container
[view styles/order-item-inner-container
[text {:style styles/order-item-label}
name]
[text {:style styles/order-item-contacts}
(str cnt " " (label-pluralize cnt :t/contact-s))]
[view {:flex 1}]
[view styles/order-item-icon
[vi/icon :icons/grab]]]]))
(defn render-separator [last]
(fn [_ row-id _]
(list-item
(if (= row-id last)
^{:key "bottom-shadow"}
[common/bottom-shadow]
^{:key row-id}
[view styles/order-item-separator-wrapper
[view styles/order-item-separator]]))))
(defview reorder-groups []
(letsubs [groups [:get-contact-groups]
order [:get :group/groups-order]]
(let [this (reagent/current-component)]
[view styles/reorder-groups-container
[status-bar]
[toolbar-view]
[view styles/reorder-list-container
[common/top-shadow]
[sortable-list-view
{:data groups
:order order
:on-row-moved #(do (dispatch-sync [:change-contact-group-order (:from %) (:to %)])
(.forceUpdate this))
:render-row (fn [row]
(sortable-item [group-item row]))
:render-separator (render-separator (last order))}]]
[sticky-button (label :t/save) #(do
(dispatch [:save-contact-group-order])
(dispatch [:navigate-to-clean :contact-list]))]])))

30
src/status_im/ui/screens/group/styles.cljs
View File

@ -12,18 +12,10 @@
:flex-direction :column
:background-color common/color-white})
(def reorder-groups-container
{:flex 1
:flex-direction :column
:background-color common/color-light-gray})
(defstyle reorder-list-container
{:flex 1
:android {:padding-top 16}})
(def group-name-container
{:margin-top 10})
(def add-button-container
{:margin-left 16})
@ -98,6 +90,9 @@
:ios {:height 63}
:android {:height 56}})
(def contact
{:padding-left 0})
(defstyle settings-group-container
{:ios {:margin-top 25}
:android {:margin-top 23}})
@ -167,21 +162,6 @@
:android {:padding-left 18}
:ios {:align-items :center}})
(def toolbar-title-with-count-text
{:color common/text1-color
:letter-spacing -0.2
:font-size 17})
(def toolbar-title-with-count-text-count
(merge toolbar-title-with-count-text
{:color common/color-light-blue}))
(def toolbar-title-with-count
{:flex-direction :row})
(def toolbar-title-with-count-container
{:padding-left 6})
(def separator
{:background-color common/color-gray5
:height 1
@ -190,7 +170,3 @@
(def list-view-container
{:flex 1
:margin-top 10})

163
src/status_im/ui/screens/group/views.cljs
View File

@ -1,166 +1,173 @@
(ns status-im.ui.screens.group.views
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [re-frame.core :refer [dispatch]]
(:require [cljs.spec.alpha :as spec]
[re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.screens.contacts.styles :as cstyles]
[status-im.ui.components.common.common :as common]
[status-im.ui.components.action-button.action-button :refer [action-button action-separator]]
[status-im.ui.components.react :refer [view text touchable-highlight
keyboard-avoiding-view]]
[status-im.ui.components.react :as react]
[status-im.ui.components.icons.vector-icons :as vi]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.text-input-with-label.view :refer [text-input-with-label]]
[status-im.ui.components.status-bar.view :refer [status-bar]]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.styles :as components.styles]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.utils.platform :refer [platform-specific ios?]]
[status-im.utils.platform :as platform :refer [platform-specific ios?]]
[status-im.ui.components.sticky-button :refer [sticky-button]]
[status-im.ui.components.contact.contact :refer [contact-view]]
[status-im.ui.screens.add-new.styles :as add-new.styles]
[status-im.ui.screens.group.styles :as styles]
[status-im.i18n :refer [label]]
[cljs.spec.alpha :as spec]
[status-im.ui.screens.group.db :as v]
[status-im.utils.utils :as utils]))
(defn group-toolbar [group-type edit?]
[view
[status-bar]
[react/view
[status-bar/status-bar]
[toolbar/simple-toolbar
(label
(i18n/label
(if (= group-type :contact-group)
(if edit? :t/edit-group :t/new-group)
(if edit? :t/chat-settings :t/new-group-chat)))]])
(if edit? :t/chat-settings :t/group-chat)))]])
(defview group-name-view []
(letsubs [new-group-name [:get :new-chat-name]]
[view styles/group-name-container
[text-input-with-label
[react/view add-new.styles/input-container
[react/text-input
{:auto-focus true
:label (label :t/name)
:on-change-text #(dispatch [:set :new-chat-name %])
:default-value new-group-name}]]))
:on-change-text #(re-frame/dispatch [:set :new-chat-name %])
:default-value new-group-name
:placeholder (i18n/label :t/set-a-topic)
:style add-new.styles/input}]]))
(defn add-btn [on-press]
[action-button {:label (label :t/add-members)
[action-button {:label (i18n/label :t/add-members)
:icon :icons/add
:icon-opts {:color :blue}
:on-press on-press}])
(defn delete-btn [on-press]
[view styles/settings-group-container
[touchable-highlight {:on-press on-press}
[view styles/settings-group-item
[view styles/delete-icon-container
[react/view styles/settings-group-container
[react/touchable-highlight {:on-press on-press}
[react/view styles/settings-group-item
[react/view styles/delete-icon-container
[vi/icon :icons/close {:color :red}]]
[view styles/settings-group-text-container
[text {:style styles/delete-group-text}
(label :t/delete-group)]
[text {:style styles/delete-group-prompt-text}
(label :t/delete-group-prompt)]]]]])
[react/view styles/settings-group-text-container
[react/text {:style styles/delete-group-text}
(i18n/label :t/delete-group)]
[react/text {:style styles/delete-group-prompt-text}
(i18n/label :t/delete-group-prompt)]]]]])
(defn group-chat-settings-btns []
[view styles/settings-group-container
[view {:opacity 0.4}
[touchable-highlight {:on-press #()}
[view styles/settings-group-item
[view styles/settings-icon-container
[react/view styles/settings-group-container
[react/view {:opacity 0.4}
[react/touchable-highlight {:on-press #()}
[react/view styles/settings-group-item
[react/view styles/settings-icon-container
[vi/icon :icons/speaker {:color :blue}]]
[view styles/settings-group-text-container
[text {:style styles/settings-group-text}
(label :t/mute-notifications)]]]]]
[react/view styles/settings-group-text-container
[react/text {:style styles/settings-group-text}
(i18n/label :t/mute-notifications)]]]]]
[action-separator]
[action-button {:label (label :t/clear-history)
[action-button {:label (i18n/label :t/clear-history)
:icon :icons/close
:icon-opts {:color :blue}
:on-press #(dispatch [:clear-history])}]
:on-press #(re-frame/dispatch [:clear-history])}]
[action-separator]
[touchable-highlight {:on-press #(dispatch [:leave-group-chat])}
[view styles/settings-group-item
[view styles/delete-icon-container
[react/touchable-highlight {:on-press #(re-frame/dispatch [:leave-group-chat])}
[react/view styles/settings-group-item
[react/view styles/delete-icon-container
[vi/icon :icons/arrow-right {:color :red}]]
[view styles/settings-group-text-container
[text {:style styles/delete-group-text}
(label :t/leave-chat)]]]]])
[react/view styles/settings-group-text-container
[react/text {:style styles/delete-group-text}
(i18n/label :t/leave-chat)]]]]])
(defn more-btn [contacts-limit contacts-count on-press]
[view
[react/view
[common/list-separator]
[view cstyles/show-all
[touchable-highlight {:on-press on-press}
[view
[text {:style cstyles/show-all-text
:uppercase? (get-in platform-specific [:uppercase?])
[react/view cstyles/show-all
[react/touchable-highlight {:on-press on-press}
[react/view
[react/text {:style cstyles/show-all-text
:uppercase? (components.styles/uppercase?)
:font (if ios? :default :medium)}
(str (- contacts-count contacts-limit) " " (label :t/more))]]]]])
(str (- contacts-count contacts-limit) " " (i18n/label :t/more))]]]]])
(def ^:const contacts-limit 3)
(defview group-contacts-view [group]
(letsubs [contacts [:all-added-group-contacts-with-limit (:group-id group) contacts-limit]
contacts-count [:all-added-group-contacts-count (:group-id group)]]
[view
[react/view
(when (pos? contacts-count)
[common/list-separator])
[view
[react/view
(doall
(map (fn [row]
^{:key row}
[view
[react/view
[contact-view
{:contact row
:extend-options [{:action #(dispatch [:remove-contact-from-group
:extend-options [{:action #(re-frame/dispatch [:remove-contact-from-group
(:whisper-identity row)
(:group-id group)])
:label (label :t/remove-from-group)}]
:label (i18n/label :t/remove-from-group)}]
:extended? true}]
(when-not (= row (last contacts))
[common/list-separator])])
contacts))]
(when (< contacts-limit contacts-count)
[more-btn contacts-limit contacts-count #(dispatch [:navigate-to :edit-group-contact-list])])]))
[more-btn contacts-limit contacts-count #(re-frame/dispatch [:navigate-to :edit-group-contact-list])])]))
(defview edit-contact-group []
(letsubs [{:keys [group group-type]} [:get-screen-params]]
(let [group-name (:name group)
save-btn-enabled? (and (spec/valid? ::v/name group-name)
(not= group-name (:name group)))]
[keyboard-avoiding-view {:style styles/group-container}
[react/keyboard-avoiding-view {:style styles/group-container}
[group-toolbar group-type true]
[group-name-view]
[view styles/list-view-container
[add-btn #(dispatch [:navigate-to :add-contacts-toggle-list])]
[react/view styles/list-view-container
[add-btn #(re-frame/dispatch [:navigate-to :add-contacts-toggle-list])]
[group-contacts-view group]
[view styles/separator]
[react/view styles/separator]
[delete-btn #(utils/show-confirmation
(str (label :t/delete-group) "?") (label :t/delete-group-confirmation) (label :t/delete)
(str (i18n/label :t/delete-group) "?") (i18n/label :t/delete-group-confirmation) (i18n/label :t/delete)
(fn[]
(dispatch [:delete-contact-group])
(dispatch [:navigate-to-clean :contact-list])))]]
(re-frame/dispatch [:delete-contact-group])
(re-frame/dispatch [:navigate-to-clean :contact-list])))]]
(when save-btn-enabled?
[sticky-button (label :t/save) #(dispatch [:set-contact-group-name])])])))
[sticky-button (i18n/label :t/save) #(re-frame/dispatch [:set-contact-group-name])])])))
(defn- render-contact [contact]
[contact-view {:contact contact}])
[contact-view {:contact contact :style styles/contact}])
(defn- toolbar [group-name save-btn-enabled?]
[toolbar/toolbar {}
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/group-chat)]
(when save-btn-enabled?
(let [handler #(re-frame/dispatch [:create-new-group-chat-and-open group-name])]
(if platform/android?
[toolbar/actions [{:icon :icons/ok
:icon-opts {:color :blue}
:handler handler}]]
[toolbar/text-action {:handler handler}
(i18n/label :t/create)])))])
(defview new-group []
(letsubs [contacts [:selected-group-contacts]
group-name [:get :new-chat-name]
group-type [:get-group-type]]
group-name [:get :new-chat-name]]
(let [save-btn-enabled? (and (spec/valid? ::v/name group-name) (pos? (count contacts)))]
[keyboard-avoiding-view (merge {:behavior :padding}
[react/keyboard-avoiding-view (merge {:behavior :padding}
styles/group-container)
[group-toolbar group-type false]
[status-bar/status-bar]
[toolbar group-name save-btn-enabled?]
[group-name-view]
[view styles/list-view-container
[list/list-with-label {:flex 1}
(i18n/label :t/members-title)
[list/flat-list {:data contacts
:render-fn render-contact
:bounces false
:keyboardShouldPersistTaps :always
:enableEmptySections true}]]
(when save-btn-enabled?
[sticky-button (label :t/save)
(if (= group-type :contact-group)
#(do
(dispatch [:create-new-contact-group group-name])
(dispatch [:navigate-to-clean :contact-list]))
#(dispatch [:create-new-group-chat-and-open group-name]))
true])])))
:enableEmptySections true}]]])))

17
src/status_im/ui/screens/home/styles.cljs
View File

@ -15,7 +15,7 @@
:background-color colors/white
:android {:height 76}
:ios {:height 74}
:overflow "hidden"})
:overflow :hidden})
(defstyle chat-icon-container
{:padding-top 18
@ -30,7 +30,7 @@
{:width 40
:height 40
:border-radius 20
:background-color colors/light-gray
:background-color colors/gray-lighter
:align-items :center
:justify-content :center})
@ -135,24 +135,15 @@
:android {:top 2}
:ios {:top 3}})
(def chats-container
(def container
{:flex 1})
(defstyle list-container
{:android {:background-color colors/light-gray}
:ios {:background-color colors/white}})
(def native-button-offset 16)
(def toolbar-actions
{:flex-direction :row
:padding-right 14})
(def opts-btn-container
{:align-items :center
:justify-content :center})
(def opts-btn
{:padding 16})
(def create-icon
{:fontSize 20
:height 22

34
src/status_im/ui/screens/home/views.cljs
View File

@ -1,37 +1,35 @@
(ns status-im.ui.screens.home.views
(:require-macros [status-im.utils.views :as views])
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.common.common :as components.common]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react]
[status-im.ui.components.native-action-button :refer [native-action-button]]
[status-im.ui.components.styles :as components.styles]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.toolbar.actions :as toolbar.actions]
[status-im.ui.components.sync-state.offline :refer [offline-view]]
[status-im.ui.screens.home.views.inner-item :as inner-item]
[status-im.ui.screens.home.styles :as styles]
[status-im.i18n :as i18n]
[status-im.utils.platform :as platform]))
(defn toolbar-view []
[toolbar/toolbar {}
(defn- toolbar []
[toolbar/toolbar {:title-centered? true}
nil
[toolbar/content-title (i18n/label :t/status)]
[toolbar/actions
(when platform/ios?
[(toolbar.actions/add #(re-frame/dispatch [:navigate-to :new]))])]])
(defn home-action-button []
[native-action-button {:button-color components.styles/color-blue
:offset-x 16
:offset-y 40
:spacing 13
:hide-shadow true
(defn- home-action-button []
[native-action-button {:button-color colors/blue
:offset-x styles/native-button-offset
:offset-y styles/native-button-offset
:accessibility-label :plus-button
:on-press #(re-frame/dispatch [:navigate-to :new])}])
(defn home-list-item [[home-item-id home-item]]
(defn- home-list-item [[home-item-id home-item]]
(if (:chat-id home-item)
[react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to-chat home-item-id])}
[react/view
@ -42,17 +40,11 @@
(views/defview home []
(views/letsubs [home-items [:home-items]]
[react/view styles/chats-container
[toolbar-view]
[list/flat-list {:style styles/list-container
:data home-items
[react/view styles/container
[toolbar]
[list/flat-list {:data home-items
:render-fn (fn [[home-item-id :as home-item]]
^{:key home-item-id} [home-list-item home-item])
:header (when-not (empty? home-items) list/default-header)
:footer (when-not (empty? home-items)
[react/view
[components.common/list-footer]
[components.common/bottom-shadow]])}]
^{:key home-item-id} [home-list-item home-item])}]
(when platform/android?
[home-action-button])
[offline-view]]))

5
src/status_im/ui/screens/home/views/inner_item.cljs
View File

@ -1,8 +1,6 @@
(ns status-im.ui.screens.home.views.inner-item
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [re-frame.core :as re-frame]
[reagent.core :as reagent]
[clojure.string :as str]
(:require [clojure.string :as str]
[status-im.ui.components.react :as react]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.screens.home.styles :as styles]
@ -13,7 +11,6 @@
[status-im.utils.datetime :as time]
[status-im.utils.gfycat.core :as gfycat]
[status-im.constants :as const]
[taoensso.timbre :as log]
[status-im.ui.components.chat-icon.screen :as chat-icon.screen]))
(defn message-content-text [{:keys [content] :as message}]

2
src/status_im/ui/screens/views.cljs
View File

@ -26,7 +26,6 @@
[status-im.ui.screens.group.add-contacts.views :refer [contact-toggle-list
add-contacts-toggle-list
add-participants-toggle-list]]
[status-im.ui.screens.group.reorder.views :refer [reorder-groups]]
[status-im.ui.screens.profile.views :as profile]
[status-im.ui.screens.profile.photo-capture.views :refer [profile-photo-capture]]
@ -153,7 +152,6 @@
:edit-chat-group-contact-list edit-chat-group-contact-list
:new-public-chat new-public-chat
:contact-toggle-list contact-toggle-list
:reorder-groups reorder-groups
:new-chat new-chat
:qr-scanner qr-scanner
:chat chat

1
test/cljs/status_im/react_native/js_dependencies.cljs
View File

@ -27,7 +27,6 @@
:Dimensions #js {:get (fn [])}})
(def realm #js {:schemaVersion (fn [])
:close (fn [])})
(def sortable-listview #js {})
(def vector-icons #js {:default #js {}})
(def webview-bridge #js {:default #js {}})
(def svg #js {:default #js {}})