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

Merge pull request #5329 from status-im/fix/4435-add-delete-chat-option 

Add remove-chat button next to chat title
This commit is contained in:
Vitaliy Vlasov 2018-08-20 13:42:58 +03:00 committed by GitHub
parent e59a907005 1186b73be8
commit 7ea9e63195
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 137 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -76,7 +76,6 @@
(dissoc :font) (dissoc :font)
(assoc style-key (merge style font))))) (assoc style-key (merge style font)))))
(defn transform-to-uppercase [{:keys [uppercase? force-uppercase?] :as opts} ts] (defn transform-to-uppercase [{:keys [uppercase? force-uppercase?] :as opts} ts]
(if (or force-uppercase? (and uppercase? platform/android?)) (if (or force-uppercase? (and uppercase? platform/android?))
(vec (map string/upper-case ts)) (vec (map string/upper-case ts))
@ -95,13 +94,13 @@
:or {font :default}} text] :or {font :default}} text]
(let [font (get-in platform/platform-specific [:fonts (keyword font)])] (let [font (get-in platform/platform-specific [:fonts (keyword font)])]
[text-input-class (merge [text-input-class (merge
{:underline-color-android :transparent {:underline-color-android :transparent
:placeholder-text-color styles/text2-color :placeholder-text-color styles/text2-color
:placeholder (i18n/label :t/type-a-message) :placeholder (i18n/label :t/type-a-message)
:value text} :value text}
(-> opts (-> opts
(dissoc :font) (dissoc :font)
(assoc :style (merge style font))))])) (assoc :style (merge style font))))]))
(defn i18n-text (defn i18n-text
[{:keys [style key]}] [{:keys [style key]}]
@ -122,9 +121,9 @@
content]) content])
(defn touchable-without-feedback [props content] (defn touchable-without-feedback [props content]
[touchable-without-feedback-class [touchable-without-feedback-class
props props
content]) content])
(defn get-dimensions [name] (defn get-dimensions [name]
(js->clj (.get dimensions name) :keywordize-keys true)) (js->clj (.get dimensions name) :keywordize-keys true))
@ -245,20 +244,20 @@
(:qr-viewer (:qr-viewer
:recipient-qr-code) "#2f3031" :recipient-qr-code) "#2f3031"
(:accounts :login (:accounts :login
:wallet-transactions-filter) styles/color-white :wallet-transactions-filter) styles/color-white
:transparent)}) :transparent)})
children (cond-> children children (cond-> children
(#{:wallet (#{:wallet
:recent-recipients :recent-recipients
:wallet-send-assets :wallet-send-assets
:wallet-request-assets} current-view) :wallet-request-assets} current-view)
(conj [view {:background-color styles/color-white (conj [view {:background-color styles/color-white
:position :absolute :position :absolute
:bottom 0 :bottom 0
:right 0 :right 0
:left 0 :left 0
:height 100 :height 100
:z-index -1000}]))] :z-index -1000}]))]
(apply vector safe-area-view props children)))) (apply vector safe-area-view props children))))
(defmethod create-main-screen-view :default [_] (defmethod create-main-screen-view :default [_]

24
components/src/status_im/ui/components/svg.clj
View File

@ -27,15 +27,15 @@
`(fn [~color] `(fn [~color]
~(into [] ~(into []
(clojure.walk/postwalk-replace (clojure.walk/postwalk-replace
{:viewbox :viewBox} ;; See https://github.com/jhy/jsoup/issues/272 {:viewbox :viewBox} ;; See https://github.com/jhy/jsoup/issues/272
(clojure.walk/prewalk (clojure.walk/prewalk
(fn [node] (fn [node]
(if (svg-tags node) (if (svg-tags node)
(symbol (name node)) (symbol (name node))
(if (vector? node) (if (vector? node)
(let [[k v] node] (let [[k v] node]
(if (and (= :fill k) v) (if (and (= :fill k) v)
[k color] [k color]
node)) node))
node))) node)))
svg-hiccup)))))) svg-hiccup))))))

1
env/dev/env/config.cljs vendored
View File

@ -1,6 +1,5 @@
(ns env.config) (ns env.config)
(def figwheel-urls {:android "ws://192.168.10.203:3449/figwheel-ws", (def figwheel-urls {:android "ws://192.168.10.203:3449/figwheel-ws",
:ios "ws://localhost:3449/figwheel-ws", :ios "ws://localhost:3449/figwheel-ws",
:desktop "ws://localhost:3449/figwheel-ws"}) :desktop "ws://localhost:3449/figwheel-ws"})

10
env/dev/env/utils.cljs vendored
View File

@ -6,11 +6,11 @@
Returns host or an empty string upon failure" Returns host or an empty string upon failure"
[url] [url]
(-> (->
url url
(string/split #"/") (string/split #"/")
(get 2 "") (get 2 "")
(string/split #":") (string/split #":")
(get 0 ""))) (get 0 "")))
(defn re-frisk-url (defn re-frisk-url
"Expects the input url to be in the form ws://host:port/figwheel-ws" "Expects the input url to be in the form ws://host:port/figwheel-ws"

9
src/status_im/chat/models.cljs
View File

@ -2,6 +2,7 @@
(:require [status-im.ui.components.styles :as styles] (:require [status-im.ui.components.styles :as styles]
[status-im.utils.gfycat.core :as gfycat] [status-im.utils.gfycat.core :as gfycat]
[status-im.transport.utils :as transport.utils] [status-im.transport.utils :as transport.utils]
[status-im.utils.platform :as platform]
[status-im.utils.clocks :as utils.clocks] [status-im.utils.clocks :as utils.clocks]
[status-im.transport.message.core :as transport.message] [status-im.transport.message.core :as transport.message]
[status-im.data-store.chats :as chats-store] [status-im.data-store.chats :as chats-store]
@ -101,9 +102,11 @@
(transport.utils/unsubscribe-from-chat chat-id cofx))) (transport.utils/unsubscribe-from-chat chat-id cofx)))
(defn- deactivate-chat [chat-id {:keys [db now] :as cofx}] (defn- deactivate-chat [chat-id {:keys [db now] :as cofx}]
(assoc-in {:db db (cond-> (assoc-in {:db db
:data-store/tx [(chats-store/deactivate-chat-tx chat-id now)]} :data-store/tx [(chats-store/deactivate-chat-tx chat-id now)]}
[:db :chats chat-id :is-active] false)) [:db :chats chat-id :is-active] false)
platform/desktop?
(assoc-in [:db :current-chat-id] nil)))
;; TODO: There's a race condition here, as the removal of the filter (async) ;; TODO: There's a race condition here, as the removal of the filter (async)
;; is done at the same time as the removal of the chat, so a message ;; is done at the same time as the removal of the chat, so a message

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

@ -245,6 +245,7 @@
:group-info "Group info" :group-info "Group info"
:delete-chat-confirmation "Are you sure you want to delete this chat?" :delete-chat-confirmation "Are you sure you want to delete this chat?"
:delete-group-chat-confirmation "Are you sure you want to delete this group chat?" :delete-group-chat-confirmation "Are you sure you want to delete this group chat?"
:delete-chat-action "Delete"
:new-group-chat "New group chat" :new-group-chat "New group chat"
:new-public-group-chat "Join public chat" :new-public-group-chat "Join public chat"
:selected-for-you "Selected for you" :selected-for-you "Selected for you"

5
src/status_im/ui/components/desktop/events.cljs
View File

@ -5,4 +5,7 @@
(handlers/register-handler-fx (handlers/register-handler-fx
:show-desktop-tab :show-desktop-tab
(fn [{:keys [db] :as cofx} [_ tab-name]] (fn [{:keys [db] :as cofx} [_ tab-name]]
{:db (assoc-in db [:desktop/desktop :tab-view-id] tab-name)})) {:db (assoc-in db [:desktop/desktop :tab-view-id] tab-name)
:dispatch [:navigate-to (if (and (= tab-name :home) (:current-chat-id db))
:chat
:home)]}))

4
src/status_im/ui/components/desktop/tabs.cljs
View File

@ -39,9 +39,7 @@
(defn tab [index content view-id active?] (defn tab [index content view-id active?]
[react/touchable-highlight {:style (merge tabs.styles/tab-container {:flex 1}) [react/touchable-highlight {:style (merge tabs.styles/tab-container {:flex 1})
:disabled active? :disabled active?
:on-press #(do :on-press #(re-frame/dispatch [:show-desktop-tab view-id])}
(re-frame/dispatch [:navigate-to :home])
(re-frame/dispatch [:show-desktop-tab view-id]))}
[react/view [react/view
[content active?]]]) [content active?]]])

54
src/status_im/ui/screens/desktop/main/chat/styles.cljs
View File

@ -74,41 +74,43 @@
:height 40 :height 40
:margin-right 8}) :margin-right 8})
(def photo-style-toolbar (def chat-icon
{:border-radius 32 {:width 34
:width 32 :border-radius 34
:height 32 :height 34
:margin-right 8}) :margin-right 12})
(defn topic-image [color] (defn topic-image [color]
(merge photo-style-toolbar (merge chat-icon
{:background-color color {:background-color color
:align-items :center :align-items :center
:justify-content :center})) :justify-content :center}))
(def topic-text (def topic-text
{:font-size 18 {:font-size 18.7
:color colors/white}) :color colors/white})
(def toolbar-chat-view (def toolbar-chat-view
{:margin-left 11 {:align-items :center
:justify-content :center}) :padding-vertical 17
:padding-horizontal 24
(def toolbar-chat-name :height 68
{:font-size 16 :flex-direction :row
:color :black :justify-content :space-between})
:font-weight "300"})
(def add-contact
{:background-color :white
:border-radius 6
:margin-top 3
:padding-top 1})
(def add-contact-text (def add-contact-text
{:font-size 14 {:font-size 12
:color colors/blue}) :color colors/blue})
(def public-chat-text
{:font-size 12
:color colors/gray})
(defn profile-actions-text [color]
{:font-size 12
:color color
:margin-bottom 4})
(def message-text (def message-text
{:font-size 14}) {:font-size 14})
@ -169,3 +171,13 @@
{:color colors/gray {:color colors/gray
:margin-top 10 :margin-top 10
:margin-bottom 5}) :margin-bottom 5})
(defn chat-title-and-type [pending?]
{:flex 1
:justify-content (if pending? :flex-start :center)})
(def chat-title
{:margin-bottom 4
:font-size 14
:color colors/black
:font-weight "600"})

78
src/status_im/ui/screens/desktop/main/chat/views.cljs
View File

@ -1,3 +1,4 @@
(ns status-im.ui.screens.desktop.main.chat.views (ns status-im.ui.screens.desktop.main.chat.views
(:require-macros [status-im.utils.views :as views]) (:require-macros [status-im.utils.views :as views])
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
@ -10,6 +11,7 @@
[status-im.constants :as constants] [status-im.constants :as constants]
[status-im.utils.identicon :as identicon] [status-im.utils.identicon :as identicon]
[status-im.utils.datetime :as time] [status-im.utils.datetime :as time]
[status-im.utils.utils :as utils]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.chat.views.message.datemark :as message.datemark] [status-im.chat.views.message.datemark :as message.datemark]
@ -18,35 +20,49 @@
[status-im.ui.screens.desktop.main.chat.styles :as styles] [status-im.ui.screens.desktop.main.chat.styles :as styles]
[status-im.i18n :as i18n])) [status-im.i18n :as i18n]))
(views/defview toolbar-chat-view [] (views/defview toolbar-chat-view [{:keys [chat-id color public-key public? group-chat]
(views/letsubs [{:keys [chat-id public-key public? group-chat color]} [:get-current-chat] :as current-chat}]
{:keys [pending? whisper-identity photo-path]} [:get-current-chat-contact] (views/letsubs [chat-name [:get-current-chat-name]
current-chat-name [:get-current-chat-name]] {:keys [pending? whisper-identity photo-path]} [:get-current-chat-contact]]
[react/view {:style styles/toolbar-chat-view} [react/view {:style styles/toolbar-chat-view}
[react/view {:style {:flex-direction :row [react/view {:style {:flex-direction :row
:align-items :center}} :flex 1}}
(if public?
[react/view {:style styles/img-container} [react/view {:style (styles/topic-image color)}
(if public? [react/text {:style styles/topic-text}
[react/view {:style (styles/topic-image color)} (string/capitalize (second chat-name))]]
[react/text {:style styles/topic-text} [react/image {:style styles/chat-icon
(string/capitalize (first current-chat-name))]] :source {:uri photo-path}}])
[react/image {:style styles/photo-style-toolbar [react/view {:style (styles/chat-title-and-type pending?)}
:source {:uri photo-path}}])] [react/text {:style styles/chat-title}
chat-name]
[react/view (cond pending?
[react/text {:style styles/toolbar-chat-name} current-chat-name] [react/text {:style styles/add-contact-text
(when pending? :on-press #(re-frame/dispatch [:add-contact whisper-identity])}
[react/touchable-highlight (i18n/label :t/add-to-contacts)]
{:on-press #(re-frame/dispatch [:add-contact whisper-identity])} public?
[react/view {:style styles/add-contact} [react/text {:style styles/public-chat-text}
[react/text {:style styles/add-contact-text} (i18n/label :t/public-chat)])]]
(i18n/label :t/add-to-contacts)]]])] [react/view
(when (and (not group-chat) (not public?)) (when (and (not group-chat) (not public?))
[react/text {:style {:position :absolute [react/text {:style (styles/profile-actions-text colors/black)
:right 20}
:on-press #(re-frame/dispatch [:navigate-to :chat-profile])} :on-press #(re-frame/dispatch [:navigate-to :chat-profile])}
(i18n/label :t/view-profile)])]])) (i18n/label :t/view-profile)])
[react/text {:style (styles/profile-actions-text colors/red)
:on-press (fn []
(utils/show-confirmation (i18n/label :clear-history-confirmation)
""
(i18n/label :clear-history-action)
#(re-frame/dispatch [:clear-history])))}
(i18n/label :t/clear-history)]
[react/text {:style (styles/profile-actions-text colors/red)
:on-press (fn []
(utils/show-confirmation (i18n/label :delete-chat-confirmation)
""
(i18n/label :delete-chat-action)
#(re-frame/dispatch [:remove-chat-and-navigate-home chat-id])))}
(i18n/label :t/delete-chat)]]]))
(views/defview message-author-name [{:keys [outgoing from] :as message}] (views/defview message-author-name [{:keys [outgoing from] :as message}]
(views/letsubs [current-account [:get-current-account] (views/letsubs [current-account [:get-current-account]
@ -56,9 +72,11 @@
[react/text {:style styles/author} name]]))) [react/text {:style styles/author} name]])))
(views/defview member-photo [from] (views/defview member-photo [from]
[react/view (letsubs [photo-path [:get-photo-path from]]
[react/image {:source {:uri (identicon/identicon from)} [react/image {:source {:uri (if (string/blank? photo-path)
:style styles/photo-style}]]) (identicon/identicon from)
photo-path)}
:style styles/photo-style}]))
(views/defview my-photo [from] (views/defview my-photo [from]
(views/letsubs [account [:get-current-account]] (views/letsubs [account [:get-current-account]]
@ -188,7 +206,7 @@
(views/defview chat-view [] (views/defview chat-view []
(views/letsubs [current-chat [:get-current-chat]] (views/letsubs [current-chat [:get-current-chat]]
[react/view {:style styles/chat-view} [react/view {:style styles/chat-view}
[toolbar-chat-view] [toolbar-chat-view current-chat]
[messages-view current-chat] [messages-view current-chat]
[chat-text-input]])) [chat-text-input]]))

4
src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs
View File

@ -16,6 +16,7 @@
(def chat-list-header (def chat-list-header
{:flex-direction :row {:flex-direction :row
:align-items :center :align-items :center
:height 68
:padding 11}) :padding 11})
(def img-container (def img-container
@ -41,7 +42,7 @@
(defn unread-messages-text [large?] (defn unread-messages-text [large?]
{:color colors/white {:color colors/white
:font-size (if large? 10 12)}) :font-size (if large? 11 12)})
(def chat-list-separator (def chat-list-separator
{:height 1 {:height 1
@ -49,6 +50,7 @@
(def chat-name-box (def chat-name-box
{:flex-direction :row {:flex-direction :row
:flex 1
:align-items :center}) :align-items :center})
(def chat-name-last-msg-box (def chat-name-last-msg-box

4
src/status_im/ui/screens/desktop/main/tabs/home/views.cljs
View File

@ -26,8 +26,8 @@
last-message [:get-last-message chat-id]] last-message [:get-last-message chat-id]]
(let [name (or chat-name (let [name (or chat-name
(gfycat/generate-gfy public-key)) (gfycat/generate-gfy public-key))
[unviewed-messages-label large?] (if (< 99 unviewed-messages-count) [unviewed-messages-label large?] (if (< 9 unviewed-messages-count)
["99+" true] ["9+" true]
[unviewed-messages-count false])] [unviewed-messages-count false])]
[react/view {:style (styles/chat-list-item (= current-chat-id chat-id))} [react/view {:style (styles/chat-list-item (= current-chat-id chat-id))}
[react/view {:style styles/img-container} [react/view {:style styles/img-container}