Design notes for pinned message (#16997)

This commit is contained in:
Ibrahem Khalil 2023-08-30 15:46:23 +03:00 committed by GitHub
parent 5807b34472
commit 3162e2dd3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 22 additions and 20 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 879 B

After

Width:  |  Height:  |  Size: 873 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -4,9 +4,8 @@
[quo2.theme :as quo.theme] [quo2.theme :as quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(def sizes (def ^:private sizes
{:big 48 {:medium 32
:medium 32
:small 20}) :small 20})
(defn icon-avatar-internal (defn icon-avatar-internal
@ -16,8 +15,7 @@
circle-color (colors/custom-color color 50 opacity) circle-color (colors/custom-color color 50 opacity)
icon-color (colors/custom-color-by-theme color 50 60) icon-color (colors/custom-color-by-theme color 50 60)
icon-size (case size icon-size (case size
:big 20 :medium 20
:medium 16
:small 12)] :small 12)]
[rn/view [rn/view
{:style {:width component-size {:style {:width component-size

View File

@ -12,7 +12,7 @@
[{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy? [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?
muted? size] muted? size]
:or {size 13}}] :or {size 13}}]
[rn/view {:style (merge style/container style)} [rn/view {:style (merge style/container style {:height (if (= size 15) 21.75 18.2)})}
[text/text [text/text
{:weight :semi-bold {:weight :semi-bold
:size (if (= size 15) :paragraph-1 :paragraph-2) :size (if (= size 15) :paragraph-1 :paragraph-2)

View File

@ -15,7 +15,7 @@
(defn time-color (defn time-color
[theme] [theme]
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)) (colors/theme-colors colors/neutral-40 colors/neutral-50 theme))
(defn sm-icon (defn sm-icon
[{:keys [icon color opacity]}] [{:keys [icon color opacity]}]
@ -28,11 +28,11 @@
:opacity opacity}]]) :opacity opacity}]])
(defn sm-timestamp (defn sm-timestamp
[timestamp] [timestamp theme]
[rn/view {:margin-left 8 :margin-top 2} [rn/view {:margin-left 8 :margin-top 2}
[text/text [text/text
{:size :label {:size :label
:style {:color (time-color :time) :style {:color (time-color theme)
:text-transform :none}} :text-transform :none}}
timestamp]]) timestamp]])
@ -61,10 +61,11 @@
item])])) item])]))
(defn system-message-base (defn system-message-base
[{:keys [icon timestamp]} child] [{:keys [icon timestamp theme]} child]
[rn/view [rn/view
{:flex-direction :row {:flex-direction :row
:flex 1} :flex 1
:align-items :center}
[sm-icon icon] [sm-icon icon]
[rn/view [rn/view
{:align-self :center {:align-self :center
@ -72,7 +73,7 @@
:margin-right 40 ;; dirty hack, flexbox won't work as expected :margin-right 40 ;; dirty hack, flexbox won't work as expected
:flex 1} :flex 1}
child child
[sm-timestamp timestamp]]]) [sm-timestamp timestamp theme]]])
(defn system-message-deleted-internal (defn system-message-deleted-internal
[{:keys [label child theme timestamp]}] [{:keys [label child theme timestamp]}]
@ -80,7 +81,8 @@
{:icon {:icon :i/delete {:icon {:icon :i/delete
:color :danger :color :danger
:opacity 5} :opacity 5}
:timestamp timestamp} :timestamp timestamp
:theme theme}
(if child (if child
child child
[text/text [text/text
@ -156,7 +158,8 @@
[rn/view [rn/view
[rn/view [rn/view
{:flex-direction :row {:flex-direction :row
:flex-wrap :wrap} :flex-wrap :wrap
:height 18.2}
[author/author {:primary-name pinned-by}] [author/author {:primary-name pinned-by}]
[split-text (i18n/label :pinned-a-message) theme true]] [split-text (i18n/label :pinned-a-message) theme true]]
(when child child)]]) (when child child)]])

View File

@ -1,13 +1,13 @@
(ns status-im2.contexts.chat.composer.reply.style (ns status-im2.contexts.chat.composer.reply.style)
(:require [react-native.platform :as platform]))
(defn container (defn container
[pin? in-chat-input?] [pin? in-chat-input?]
{:flex-direction :row {:flex-direction :row
:height (when-not pin? 24) :height (when-not pin? 24)
:margin-left (if (and (not in-chat-input?) (not pin?)) 26 (if platform/android? 4 0)) :margin-left (when (and (not in-chat-input?) (not pin?)) 26)
:margin-bottom (when (and (not in-chat-input?) (not pin?)) 8)}) :margin-bottom (when (and (not in-chat-input?) (not pin?)) 8)})
(defn reply-content (defn reply-content
[pin?] [pin?]
{:padding-right (when-not pin? 10) {:padding-right (when-not pin? 10)

View File

@ -61,7 +61,7 @@
(i18n/label :t/message-deleted)]]) (i18n/label :t/message-deleted)]])
(defn reply-from (defn reply-from
[{:keys [from contact-name current-public-key]}] [{:keys [from contact-name current-public-key pin?]}]
(let [display-name (first (rf/sub [:contacts/contact-two-names-by-identity from])) (let [display-name (first (rf/sub [:contacts/contact-two-names-by-identity from]))
photo-path (rf/sub [:chats/photo-path from])] photo-path (rf/sub [:chats/photo-path from])]
[rn/view {:style style/reply-from} [rn/view {:style style/reply-from}
@ -73,7 +73,7 @@
:ring? false}] :ring? false}]
[quo/text [quo/text
{:weight :semi-bold {:weight :semi-bold
:size :paragraph-2 :size (if pin? :label :paragraph-2)
:number-of-lines 1 :number-of-lines 1
:style style/message-author-text} :style style/message-author-text}
(format-reply-author from contact-name current-public-key)]])) (format-reply-author from contact-name current-public-key)]]))
@ -100,7 +100,8 @@
[reply-deleted-message]] [reply-deleted-message]]
[rn/view {:style (style/quoted-message pin?)} [rn/view {:style (style/quoted-message pin?)}
[reply-from [reply-from
{:from from {:pin? pin?
:from from
:contact-name contact-name :contact-name contact-name
:current-public-key current-public-key}] :current-public-key current-public-key}]
(when (not-empty text) (when (not-empty text)