From 88740eaf52c597ed98fc1e11ec9ba556d6dcdcab Mon Sep 17 00:00:00 2001 From: Vitaliy Vlasov Date: Tue, 5 Jun 2018 13:51:30 +0300 Subject: [PATCH] Add remove-chat button next to chat title Update chat header design Aligh header heights Add 'Clear history'; some reformatting Add confirmations Formatting Member photo fix; increase font size for 9+ unviewed messages indicator Fix chat view autoloading upon tab switching; Merge with desktop Fix add-to-contacts --- .../src/status_im/ui/components/react.cljs | 45 ++++++----- .../src/status_im/ui/components/svg.clj | 24 +++--- env/dev/env/config.cljs | 1 - env/dev/env/utils.cljs | 10 +-- src/status_im/translations/en.cljs | 1 + .../ui/components/desktop/events.cljs | 3 +- src/status_im/ui/components/desktop/tabs.cljs | 4 +- .../ui/screens/desktop/main/chat/styles.cljs | 54 ++++++++----- .../ui/screens/desktop/main/chat/views.cljs | 79 ++++++++++++------- .../desktop/main/tabs/home/styles.cljs | 4 +- .../screens/desktop/main/tabs/home/views.cljs | 4 +- 11 files changed, 130 insertions(+), 99 deletions(-) diff --git a/components/src/status_im/ui/components/react.cljs b/components/src/status_im/ui/components/react.cljs index 8a0c75c932..06886d7aee 100644 --- a/components/src/status_im/ui/components/react.cljs +++ b/components/src/status_im/ui/components/react.cljs @@ -76,7 +76,6 @@ (dissoc :font) (assoc style-key (merge style font))))) - (defn transform-to-uppercase [{:keys [uppercase? force-uppercase?] :as opts} ts] (if (or force-uppercase? (and uppercase? platform/android?)) (vec (map string/upper-case ts)) @@ -95,13 +94,13 @@ :or {font :default}} text] (let [font (get-in platform/platform-specific [:fonts (keyword font)])] [text-input-class (merge - {:underline-color-android :transparent - :placeholder-text-color styles/text2-color - :placeholder (i18n/label :t/type-a-message) - :value text} - (-> opts - (dissoc :font) - (assoc :style (merge style font))))])) + {:underline-color-android :transparent + :placeholder-text-color styles/text2-color + :placeholder (i18n/label :t/type-a-message) + :value text} + (-> opts + (dissoc :font) + (assoc :style (merge style font))))])) (defn i18n-text [{:keys [style key]}] @@ -122,9 +121,9 @@ content]) (defn touchable-without-feedback [props content] - [touchable-without-feedback-class - props - content]) + [touchable-without-feedback-class + props + content]) (defn get-dimensions [name] (js->clj (.get dimensions name) :keywordize-keys true)) @@ -245,20 +244,20 @@ (:qr-viewer :recipient-qr-code) "#2f3031" (:accounts :login - :wallet-transactions-filter) styles/color-white + :wallet-transactions-filter) styles/color-white :transparent)}) children (cond-> children - (#{:wallet - :recent-recipients - :wallet-send-assets - :wallet-request-assets} current-view) - (conj [view {:background-color styles/color-white - :position :absolute - :bottom 0 - :right 0 - :left 0 - :height 100 - :z-index -1000}]))] + (#{:wallet + :recent-recipients + :wallet-send-assets + :wallet-request-assets} current-view) + (conj [view {:background-color styles/color-white + :position :absolute + :bottom 0 + :right 0 + :left 0 + :height 100 + :z-index -1000}]))] (apply vector safe-area-view props children)))) (defmethod create-main-screen-view :default [_] diff --git a/components/src/status_im/ui/components/svg.clj b/components/src/status_im/ui/components/svg.clj index e4b093c774..eb08328b8f 100644 --- a/components/src/status_im/ui/components/svg.clj +++ b/components/src/status_im/ui/components/svg.clj @@ -27,15 +27,15 @@ `(fn [~color] ~(into [] (clojure.walk/postwalk-replace - {:viewbox :viewBox} ;; See https://github.com/jhy/jsoup/issues/272 - (clojure.walk/prewalk - (fn [node] - (if (svg-tags node) - (symbol (name node)) - (if (vector? node) - (let [[k v] node] - (if (and (= :fill k) v) - [k color] - node)) - node))) - svg-hiccup)))))) \ No newline at end of file + {:viewbox :viewBox} ;; See https://github.com/jhy/jsoup/issues/272 + (clojure.walk/prewalk + (fn [node] + (if (svg-tags node) + (symbol (name node)) + (if (vector? node) + (let [[k v] node] + (if (and (= :fill k) v) + [k color] + node)) + node))) + svg-hiccup)))))) \ No newline at end of file diff --git a/env/dev/env/config.cljs b/env/dev/env/config.cljs index b67b984552..aa09f4dcda 100644 --- a/env/dev/env/config.cljs +++ b/env/dev/env/config.cljs @@ -1,6 +1,5 @@ (ns env.config) - (def figwheel-urls {:android "ws://192.168.10.203:3449/figwheel-ws", :ios "ws://localhost:3449/figwheel-ws", :desktop "ws://localhost:3449/figwheel-ws"}) diff --git a/env/dev/env/utils.cljs b/env/dev/env/utils.cljs index 1b957b2db8..25253b1a42 100644 --- a/env/dev/env/utils.cljs +++ b/env/dev/env/utils.cljs @@ -6,11 +6,11 @@ Returns host or an empty string upon failure" [url] (-> - url - (string/split #"/") - (get 2 "") - (string/split #":") - (get 0 ""))) + url + (string/split #"/") + (get 2 "") + (string/split #":") + (get 0 ""))) (defn re-frisk-url "Expects the input url to be in the form ws://host:port/figwheel-ws" diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index d275502335..d9b27231ad 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -244,6 +244,7 @@ :group-info "Group info" :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-chat-action "Delete" :new-group-chat "New group chat" :new-public-group-chat "Join public chat" :selected-for-you "Selected for you" diff --git a/src/status_im/ui/components/desktop/events.cljs b/src/status_im/ui/components/desktop/events.cljs index 2161732871..d1406c4711 100644 --- a/src/status_im/ui/components/desktop/events.cljs +++ b/src/status_im/ui/components/desktop/events.cljs @@ -5,4 +5,5 @@ (handlers/register-handler-fx :show-desktop-tab (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 (= tab-name :home) :chat :home)]})) diff --git a/src/status_im/ui/components/desktop/tabs.cljs b/src/status_im/ui/components/desktop/tabs.cljs index 4d29b9d524..4c5020f5c7 100644 --- a/src/status_im/ui/components/desktop/tabs.cljs +++ b/src/status_im/ui/components/desktop/tabs.cljs @@ -39,9 +39,7 @@ (defn tab [index content view-id active?] [react/touchable-highlight {:style (merge tabs.styles/tab-container {:flex 1}) :disabled active? - :on-press #(do - (re-frame/dispatch [:navigate-to :home]) - (re-frame/dispatch [:show-desktop-tab view-id]))} + :on-press #(re-frame/dispatch [:show-desktop-tab view-id])} [react/view [content active?]]]) diff --git a/src/status_im/ui/screens/desktop/main/chat/styles.cljs b/src/status_im/ui/screens/desktop/main/chat/styles.cljs index db481f51b1..d347c2b8cd 100644 --- a/src/status_im/ui/screens/desktop/main/chat/styles.cljs +++ b/src/status_im/ui/screens/desktop/main/chat/styles.cljs @@ -74,41 +74,43 @@ :height 40 :margin-right 8}) -(def photo-style-toolbar - {:border-radius 32 - :width 32 - :height 32 - :margin-right 8}) +(def chat-icon + {:width 34 + :border-radius 34 + :height 34 + :margin-right 12}) (defn topic-image [color] - (merge photo-style-toolbar + (merge chat-icon {:background-color color :align-items :center :justify-content :center})) (def topic-text - {:font-size 18 + {:font-size 18.7 :color colors/white}) (def toolbar-chat-view - {:margin-left 11 - :justify-content :center}) - -(def toolbar-chat-name - {:font-size 16 - :color :black - :font-weight "300"}) - -(def add-contact - {:background-color :white - :border-radius 6 - :margin-top 3 - :padding-top 1}) + {:align-items :center + :padding-vertical 17 + :padding-horizontal 24 + :height 68 + :flex-direction :row + :justify-content :space-between}) (def add-contact-text - {:font-size 14 + {:font-size 12 :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 {:font-size 14}) @@ -169,3 +171,13 @@ {:color colors/gray :margin-top 10 :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"}) diff --git a/src/status_im/ui/screens/desktop/main/chat/views.cljs b/src/status_im/ui/screens/desktop/main/chat/views.cljs index b6f8341dcd..3ffb522442 100644 --- a/src/status_im/ui/screens/desktop/main/chat/views.cljs +++ b/src/status_im/ui/screens/desktop/main/chat/views.cljs @@ -1,3 +1,4 @@ + (ns status-im.ui.screens.desktop.main.chat.views (:require-macros [status-im.utils.views :as views]) (:require [re-frame.core :as re-frame] @@ -10,6 +11,7 @@ [status-im.constants :as constants] [status-im.utils.identicon :as identicon] [status-im.utils.datetime :as time] + [status-im.utils.utils :as utils] [status-im.ui.components.react :as react] [status-im.ui.components.colors :as colors] [status-im.chat.views.message.datemark :as message.datemark] @@ -18,35 +20,50 @@ [status-im.ui.screens.desktop.main.chat.styles :as styles] [status-im.i18n :as i18n])) -(views/defview toolbar-chat-view [] - (views/letsubs [{:keys [chat-id public-key public? group-chat color]} [:get-current-chat] - {:keys [pending? whisper-identity photo-path]} [:get-current-chat-contact] - current-chat-name [:get-current-chat-name]] +(views/defview toolbar-chat-view [{:keys [chat-id color public-key public? group-chat] + :as current-chat}] + (views/letsubs [photo-path [:get-chat-photo chat-id] + chat-name [:get-current-chat-name] + {:keys [pending? whisper-identity]} [:get-current-chat-contact]] [react/view {:style styles/toolbar-chat-view} - [react/view {:style {:flex-direction :row - :align-items :center}} - - [react/view {:style styles/img-container} - (if public? - [react/view {:style (styles/topic-image color)} - [react/text {:style styles/topic-text} - (string/capitalize (first current-chat-name))]] - [react/image {:style styles/photo-style-toolbar - :source {:uri photo-path}}])] - - [react/view - [react/text {:style styles/toolbar-chat-name} current-chat-name] - (when pending? - [react/touchable-highlight - {:on-press #(re-frame/dispatch [:add-contact whisper-identity])} - [react/view {:style styles/add-contact} - [react/text {:style styles/add-contact-text} - (i18n/label :t/add-to-contacts)]]])] + [react/view {:style {:flex-direction :row + :flex 1}} + (if public? + [react/view {:style (styles/topic-image color)} + [react/text {:style styles/topic-text} + (string/capitalize (second chat-name))]] + [react/image {:style styles/chat-icon + :source {:uri photo-path}}]) + [react/view {:style (styles/chat-title-and-type pending?)} + [react/text {:style styles/chat-title} + chat-name] + (cond pending? + [react/text {:style styles/add-contact-text + :on-press #(re-frame/dispatch [:add-contact whisper-identity])} + (i18n/label :t/add-to-contacts)] + public? + [react/text {:style styles/public-chat-text} + (i18n/label :t/public-chat)])]] + [react/view (when (and (not group-chat) (not public?)) - [react/text {:style {:position :absolute - :right 20} + [react/text {:style (styles/profile-actions-text colors/black) :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/letsubs [current-account [:get-current-account] @@ -56,9 +73,11 @@ [react/text {:style styles/author} name]]))) (views/defview member-photo [from] - [react/view - [react/image {:source {:uri (identicon/identicon from)} - :style styles/photo-style}]]) + (letsubs [photo-path [:get-photo-path from]] + [react/image {:source {:uri (if (string/blank? photo-path) + (identicon/identicon from) + photo-path)} + :style styles/photo-style}])) (views/defview my-photo [from] (views/letsubs [account [:get-current-account]] @@ -188,7 +207,7 @@ (views/defview chat-view [] (views/letsubs [current-chat [:get-current-chat]] [react/view {:style styles/chat-view} - [toolbar-chat-view] + [toolbar-chat-view current-chat] [messages-view current-chat] [chat-text-input]])) diff --git a/src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs b/src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs index 0eb5e1f8f9..fcb368b0dd 100644 --- a/src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs +++ b/src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs @@ -16,6 +16,7 @@ (def chat-list-header {:flex-direction :row :align-items :center + :height 68 :padding 11}) (def img-container @@ -41,7 +42,7 @@ (defn unread-messages-text [large?] {:color colors/white - :font-size (if large? 10 12)}) + :font-size (if large? 11 12)}) (def chat-list-separator {:height 1 @@ -49,6 +50,7 @@ (def chat-name-box {:flex-direction :row + :flex 1 :align-items :center}) (def chat-name-last-msg-box diff --git a/src/status_im/ui/screens/desktop/main/tabs/home/views.cljs b/src/status_im/ui/screens/desktop/main/tabs/home/views.cljs index eaf170c33e..30378e6b7f 100644 --- a/src/status_im/ui/screens/desktop/main/tabs/home/views.cljs +++ b/src/status_im/ui/screens/desktop/main/tabs/home/views.cljs @@ -26,8 +26,8 @@ last-message [:get-last-message chat-id]] (let [name (or chat-name (gfycat/generate-gfy public-key)) - [unviewed-messages-label large?] (if (< 99 unviewed-messages-count) - ["99+" true] + [unviewed-messages-label large?] (if (< 9 unviewed-messages-count) + ["9+" true] [unviewed-messages-count false])] [react/view {:style (styles/chat-list-item (= current-chat-id chat-id))} [react/view {:style styles/img-container}