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

Author: Vitaliy Vlasov

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 [_]

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))))))
+               {: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))))))

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"})

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"

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"

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)]}))

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?]]])
 

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"})

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]]))
 

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,14 +42,15 @@
 
 (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
    :background-color  colors/gray-light})
 
 (def chat-name-box
   {:flex-direction :row
+   :flex           1
    :align-items    :center})
 
 (def chat-name-last-msg-box