Skip to content

Commit

Permalink
Add remove-chat button next to chat title
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
Vitaliy Vlasov committed Jul 30, 2018
1 parent f5ee275 commit 2acd795
Show file tree
Hide file tree
Showing 11 changed files with 130 additions and 99 deletions.
45 changes: 22 additions & 23 deletions components/src/status_im/ui/components/react.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand All @@ -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]}]
Expand All @@ -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))
Expand Down Expand Up @@ -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 [_]
Expand Down
24 changes: 12 additions & 12 deletions components/src/status_im/ui/components/svg.clj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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))))))
1 change: 0 additions & 1 deletion env/dev/env/config.cljs
View file
Original file line number Diff line number Diff line change
@@ -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"})
10 changes: 5 additions & 5 deletions env/dev/env/utils.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
1 change: 1 addition & 0 deletions src/status_im/translations/en.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,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"
Expand Down
3 changes: 2 additions & 1 deletion src/status_im/ui/components/desktop/events.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)]}))
4 changes: 1 addition & 3 deletions src/status_im/ui/components/desktop/tabs.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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?]]])

Expand Down
54 changes: 33 additions & 21 deletions src/status_im/ui/screens/desktop/main/chat/styles.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,41 +75,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})

Expand Down Expand Up @@ -170,3 +172,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"})
79 changes: 49 additions & 30 deletions src/status_im/ui/screens/desktop/main/chat/views.cljs
View file
Original file line number Diff line number Diff line change
@@ -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]
Expand All @@ -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]
Expand All @@ -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]
Expand All @@ -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]]
Expand Down Expand Up @@ -184,7 +203,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]]))

Expand Down
4 changes: 3 additions & 1 deletion src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
(def chat-list-header
{:flex-direction :row
:align-items :center
:height 68
:padding 11})

(def img-container
Expand All @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/status_im/ui/screens/desktop/main/tabs/home/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down

0 comments on commit 2acd795

Please sign in to comment.