status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-01-24 23:50:33 +00:00
Code Issues Projects Releases Wiki Activity

Fix chat colors and username display; adjust icons

Browse Source 
Signed-off-by: Vitaliy Vlasov <siphiuel@gmail.com>
This commit is contained in:
Vitaliy Vlasov 2019-01-14 21:12:28 +02:00
parent 0471d5fd72
commit 7d4dcb327d
No known key found for this signature in database
GPG Key ID: A7D57C347F2B2964
13 changed files with 104 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
resources/icons/tiny/tiny_pending.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="3.5" cy="8" r="1.5" fill="black"/>
<circle opacity="0.2" cx="12.5" cy="8" r="1.5" fill="black"/>
<circle opacity="0.6" cx="8" cy="8" r="1.5" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 271 B

2
src/status_im/chat/commands/impl/transactions.cljs
View File

@ -183,7 +183,7 @@
[react/touchable-highlight {:on-press #(when tx-exists?
(re-frame/dispatch [:show-transaction-details tx-hash]))}
[react/view transactions-styles/command-send-status-container
[vector-icons/icon (if confirmed? :main-icons/check :main-icons/more)
[vector-icons/icon (if confirmed? :tiny-icons/tiny-check :tiny-icons/tiny-pending)
{:color (if outgoing colors/blue-light colors/blue)
:container-style (transactions-styles/command-send-status-icon outgoing)}]
[react/view

6
src/status_im/chat/commands/impl/transactions/styles.cljs
View File

@ -80,13 +80,13 @@
(defn command-amount-currency-separator [outgoing]
{:opacity 0
:color (if outgoing colors/blue colors/white)})
:color (if outgoing colors/blue colors/blue-light)})
(defn command-send-currency-text [outgoing]
{:font-size 22
:margin-left 4
:letter-spacing 1
:color (if outgoing colors/white-transparent colors/blue-light)})
:color (if outgoing colors/white-transparent colors/gray)})
(defn command-request-currency-text [outgoing]
{:font-size 22
@ -142,7 +142,7 @@
(defn command-request-message-view [outgoing]
{:border-radius 14
:padding-vertical 4
:background-color (if outgoing colors/blue colors/white)})
:background-color (if outgoing colors/blue colors/blue-light)})
(defn command-request-header-text [outgoing]
{:font-size 12

6
src/status_im/ui/components/icons/vector_icons.cljs
View File

@ -112,6 +112,7 @@
:tiny-icons/tiny-lock (js/require "./resources/icons/tiny/tiny_lock.svg")
:tiny-icons/tiny-lock-broken (js/require "./resources/icons/tiny/tiny_lock_broken.svg")
:tiny-icons/tiny-new-contact (js/require "./resources/icons/tiny/tiny_new_contact.svg")
:tiny-icons/tiny-pending (js/require "./resources/icons/tiny/tiny_pending.svg")
:tiny-icons/tiny-public (js/require "./resources/icons/tiny/tiny_public.svg")
:tiny-icons/tiny-reply (js/require "./resources/icons/tiny/tiny_reply.svg")
:tiny-icons/tiny-settings (js/require "./resources/icons/tiny/tiny_settings.svg")
@ -125,6 +126,8 @@
:icons/indicator-big (js/require "./resources/icons/indicator-big.svg")
:icons/indicator-middle (js/require "./resources/icons/indicator-middle.svg")
:icons/indicator-small (js/require "./resources/icons/indicator-small.svg")}
;; Mobile icons
{;; Main icons
:main-icons/add (components.svg/slurp-svg "./resources/icons/main/add.svg")
:main-icons/add-contact (components.svg/slurp-svg "./resources/icons/main/add_contact.svg")
@ -204,9 +207,10 @@
:tiny-icons/tiny-check (components.svg/slurp-svg "./resources/icons/tiny/tiny_check.svg")
:tiny-icons/tiny-external (components.svg/slurp-svg "./resources/icons/tiny/tiny_external.svg")
:tiny-icons/tiny-group (components.svg/slurp-svg "./resources/icons/tiny/tiny_group.svg")
:tiny-icons/tiny-new-contact (components.svg/slurp-svg "./resources/icons/tiny/tiny_new_contact.svg")
:tiny-icons/tiny-lock (components.svg/slurp-svg "./resources/icons/tiny/tiny_lock.svg")
:tiny-icons/tiny-lock-broken (components.svg/slurp-svg "./resources/icons/tiny/tiny_lock_broken.svg")
:tiny-icons/tiny-new-contact (components.svg/slurp-svg "./resources/icons/tiny/tiny_new_contact.svg")
:tiny-icons/tiny-pending (components.svg/slurp-svg "./resources/icons/tiny/tiny_pending.svg")
:tiny-icons/tiny-public (components.svg/slurp-svg "./resources/icons/tiny/tiny_public.svg")
:tiny-icons/tiny-reply (components.svg/slurp-svg "./resources/icons/tiny/tiny_reply.svg")
:tiny-icons/tiny-settings (components.svg/slurp-svg "./resources/icons/tiny/tiny_settings.svg")

2
src/status_im/ui/screens/chat/input/input.cljs
View File

@ -112,7 +112,7 @@
(letsubs [username [:contacts/contact-name-by-identity from]
current-public-key [:account/public-key]]
[react/view {:style style/reply-message-content}
[react/text {:style style/reply-message-author} (chat-utils/format-reply-author from username current-public-key)]
(chat-utils/format-reply-author from username current-public-key style/reply-message-author)
[react/text {:style (message-style/style-message-text false)} message-text]]))
(defview reply-message-view []

23
src/status_im/ui/screens/chat/message/message.cljs
View File

@ -47,17 +47,21 @@
(commands/generate-preview command (commands/add-chat-contacts contacts command-message))
[react/text (str "Unhandled command: " (-> command-message :content :command-path first))])))))
(defview message-timestamp [t justify-timestamp? outgoing command? content]
(defview message-timestamp [t justify-timestamp? outgoing command? content content-type]
(when-not command?
[react/text {:style (style/message-timestamp-text justify-timestamp? outgoing (:rtl? content))} t]))
[react/text {:style (style/message-timestamp-text
justify-timestamp?
outgoing
(:rtl? content)
(= content-type constants/content-type-emoji))} t]))
(defn message-view
[{:keys [timestamp-str outgoing content] :as message} message-content {:keys [justify-timestamp?]}]
[{:keys [timestamp-str outgoing content content-type] :as message} message-content {:keys [justify-timestamp?]}]
[react/view (style/message-view message)
message-content
[message-timestamp timestamp-str justify-timestamp? outgoing (or (get content :command-path)
(get content :command-ref))
content]])
content content-type]])
(defn timestamp-with-padding
"We can't use CSS as nested Text element don't accept margins nor padding
@ -70,9 +74,9 @@
(letsubs [username [:contacts/contact-name-by-identity from]]
[react/view {:style (style/quoted-message-container outgoing)}
[react/view {:style style/quoted-message-author-container}
[vector-icons/icon :main-icons/reply {:color (if outgoing colors/wild-blue-yonder colors/gray)}]
[react/text {:style (style/quoted-message-author outgoing)}
(chat.utils/format-reply-author from username current-public-key)]]
[vector-icons/icon :tiny-icons/tiny-reply {:color (if outgoing colors/wild-blue-yonder colors/gray)}]
(chat.utils/format-reply-author from username current-public-key (partial style/quoted-message-author outgoing))]
[react/text {:style (style/quoted-message-text outgoing)
:number-of-lines 5}
text]]))
@ -241,8 +245,7 @@
(defview message-author-name [from message-username]
(letsubs [username [:contacts/contact-name-by-identity from]]
[react/text {:style style/message-author-name}
(chat.utils/format-author from (or username message-username))]))
(chat.utils/format-author from (or username message-username) style/message-author-name)))
(defn message-body
[{:keys [last-in-group?
@ -264,7 +267,7 @@
[react/view (style/group-message-view outgoing message-type)
(when display-username?
[message-author-name from username])
[react/view {:style (style/timestamp-content-wrapper message)}
[react/view {:style (style/timestamp-content-wrapper outgoing message-type)}
content]]]
[react/view (style/delivery-status outgoing)
[message-delivery-status message]]])

10
src/status_im/ui/screens/chat/styles/input/input.cljs
View File

@ -1,6 +1,7 @@
(ns status-im.ui.screens.chat.styles.input.input
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.ui.components.colors :as colors]))
(:require [status-im.ui.components.colors :as colors]
[status-im.ui.screens.chat.styles.message.message :refer [message-author-name]]))
(def min-input-height 36)
(def padding-vertical 8)
@ -36,10 +37,9 @@
:max-height 140
:overflow :scroll})
(def reply-message-author
{:font-size 12
:color colors/gray
:padding-bottom 6})
(defn reply-message-author [chosen?]
(assoc (message-author-name chosen?)
:padding-bottom 6))
(def reply-message-container
{:flex-direction :column-reverse})

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

@ -15,8 +15,8 @@
:align-items :center
:height item-height
:padding-horizontal 14
:border-bottom-color colors/gray-light
:border-bottom-width border-height})
:border-top-color colors/gray-light
:border-top-width border-height})
(def item-suggestion-name
{:color colors/black

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

@ -8,7 +8,7 @@
(def chat-view
{:flex 1
:background-color colors/gray-lighter})
:background-color colors/white})
(def toolbar-container
{:flex 1
@ -179,11 +179,13 @@
{:color "#888888"})
(def add-contact
{:flex-direction :row
:align-items :center
:height 36
:background-color :white
:justify-content :space-between})
{:flex-direction :row
:align-items :center
:height 36
:background-color :white
:border-bottom-width 1
:border-color colors/gray-lighter
:justify-content :space-between})
(def add-contact-left
{:width 24

53
src/status_im/ui/screens/chat/styles/message/message.cljs
View File

@ -40,9 +40,11 @@
:letter-spacing 0.1
:align-self :flex-end})
(defn message-timestamp-text [justify-timestamp? outgoing rtl?]
(defn message-timestamp-text [justify-timestamp? outgoing rtl? emoji?]
(merge message-timestamp
{:color (if outgoing colors/wild-blue-yonder colors/gray)}
{:color (if (and outgoing (not emoji?))
(colors/alpha colors/white 0.7)
colors/gray)}
(when justify-timestamp? {:position :absolute
:bottom 8
(if rtl? :left :right) 12})))
@ -50,7 +52,7 @@
(defn message-timestamp-placeholder-text [outgoing]
(assoc message-timestamp
:color
(if outgoing colors/blue colors/white)))
(if outgoing colors/blue colors/blue-light)))
(def message-expand-button
{:color colors/gray
@ -71,8 +73,11 @@
{:margin-right 64})
(last-message-padding message)))
(defn timestamp-content-wrapper [{:keys [outgoing]}]
{:flex-direction (if outgoing :row-reverse :row)})
(defn timestamp-content-wrapper [outgoing message-type]
{:flex-direction (if outgoing :row-reverse :row)
:width (if (= :system-message message-type)
300
230)})
(defn group-message-view
[outgoing message-type]
@ -144,8 +149,9 @@
(not group-chat)))
16
4)}
(when-not (= content-type constants/content-type-emoji)
{:background-color (if outgoing colors/blue colors/white)})
(if (= content-type constants/content-type-emoji)
{:flex-direction :row}
{:background-color (if outgoing colors/blue colors/blue-light)})
(when (= content-type constants/content-type-command)
{:padding-top 12
:padding-bottom 10})))
@ -166,17 +172,23 @@
{:position :absolute
:width window-width})
(def message-author-name
{:font-size 12
:padding-top 6
:color colors/gray})
(defn message-author-name [chosen?]
{:font-size (if chosen? 13 12)
:font-weight (if chosen? "500" "400")
:line-height 16
:padding-top 6
:padding-left 12
:padding-right 16
:margin-right 12
:text-align-vertical :center
:color colors/gray})
(defn quoted-message-container [outgoing]
{:margin-bottom 6
:padding-bottom 6
:border-bottom-color (if outgoing
colors/white-light-transparent
colors/gray-lighter)
(colors/alpha colors/black 0.1))
:border-bottom-width 2
:border-bottom-left-radius 2
:border-bottom-right-radius 2})
@ -186,18 +198,19 @@
:align-items :center
:justify-content :flex-start})
(defn quoted-message-author [outgoing]
{:font-size 12
:padding-bottom 5
:padding-top 4
:color (if outgoing
colors/wild-blue-yonder
colors/gray)})
(defn quoted-message-author [outgoing chosen?]
(assoc (message-author-name chosen?)
:padding-bottom 5
:padding-top 4
:padding-left 6
:color (if outgoing
(colors/alpha colors/white 0.7)
colors/gray)))
(defn quoted-message-text [outgoing]
{:font-size 14
:color (if outgoing
colors/wild-blue-yonder
(colors/alpha colors/white 0.7)
colors/gray)})
(def extension-container

22
src/status_im/ui/screens/chat/utils.cljs
View File

@ -9,13 +9,23 @@
[status-im.ui.components.colors :as colors]
[status-im.utils.http :as http]))
(defn format-author [from username]
(str (when username (str username " • "))
(gfycat/generate-gfy from))) ; TODO: We defensively generate the name for now, to be revisited when new protocol is defined
(defn format-author [from username style]
;; TODO: We defensively generate the name for now, to be revisited when new protocol is defined
(cond->> [react/text {:style (style false)
:number-of-lines 1
:ellipsize-mode :tail}
(gfycat/generate-gfy from)]
username
(conj [react/text {:style (style true)
:number-of-lines 1
:ellipsize-mode :tail}
(str username " • ")])))
(defn format-reply-author [from username current-public-key]
(or (and (= from current-public-key) (i18n/label :t/You))
(format-author from username)))
(defn format-reply-author [from username current-public-key style]
(or (and (= from current-public-key)
[react/text {:style (style true)}
(i18n/label :t/You)])
(format-author from username style)))
(def ^:private styling->prop
{:bold {:style {:font-weight :bold}}

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

@ -1,5 +1,6 @@
(ns status-im.ui.screens.desktop.main.chat.styles
(:require [status-im.ui.components.colors :as colors]))
(:require [status-im.ui.components.colors :as colors]
[status-im.ui.screens.chat.styles.message.message :refer [message-author-name]]))
;; TODO: see how this could be refactored to be
;; automatically alignde with tabs-height in
@ -239,11 +240,10 @@
{:flex-direction :column
:padding-bottom 10})
(def reply-content-author
{:margin-top 5
:color colors/gray
:font-size 12
:padding-bottom 3})
(defn reply-content-author [chosen?]
(assoc (message-author-name chosen?)
:margin-top 5
:padding-bottom 3))
(def reply-content-message
{:padding-left 7

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

@ -88,12 +88,11 @@
(views/letsubs [username [:contacts/contact-name-by-identity from]]
[react/view {:style styles/quoted-message-container}
[react/view {:style styles/quoted-message-author-container}
[icons/icon :main-icons/reply {:style (styles/reply-icon outgoing)
:width 16
:height 16
:container-style (when outgoing {:opacity 0.4})}]
[react/text {:style (message.style/quoted-message-author outgoing)}
(chat-utils/format-reply-author from username current-public-key)]]
[icons/icon :tiny-icons/tiny-reply {:style (styles/reply-icon outgoing)
:width 16
:height 16
:container-style (when outgoing {:opacity 0.4})}]
(chat-utils/format-reply-author from username current-public-key (partial message.style/quoted-message-author outgoing))]
[react/text {:style (message.style/quoted-message-text outgoing)
:number-of-lines 5}
(core-utils/truncate-str text constants/chars-collapse-threshold)]]))
@ -269,8 +268,7 @@
(views/letsubs [username [:contacts/contact-name-by-identity from]
current-public-key [:account/public-key]]
[react/view {:style styles/reply-content-container}
[react/text {:style styles/reply-content-author}
(chat-utils/format-reply-author from username current-public-key)]
(chat-utils/format-reply-author from username current-public-key styles/reply-content-author)
[react/text {:style styles/reply-content-message} message-text]]))
(views/defview reply-member-photo [from]