From 3162e2dd3ea9fab2bd03688d6f8f0f2de37d24cf Mon Sep 17 00:00:00 2001 From: Ibrahem Khalil Date: Wed, 30 Aug 2023 15:46:23 +0300 Subject: [PATCH] Design notes for pinned message (#16997) --- resources/images/icons2/20x20/pin@2x.png | Bin 879 -> 873 bytes resources/images/icons2/20x20/pin@3x.png | Bin 1238 -> 1405 bytes src/quo2/components/avatars/icon_avatar.cljs | 8 +++----- src/quo2/components/messages/author/view.cljs | 2 +- .../components/messages/system_message.cljs | 19 ++++++++++-------- .../contexts/chat/composer/reply/style.cljs | 6 +++--- .../contexts/chat/composer/reply/view.cljs | 7 ++++--- 7 files changed, 22 insertions(+), 20 deletions(-) diff --git a/resources/images/icons2/20x20/pin@2x.png b/resources/images/icons2/20x20/pin@2x.png index 7ea8665ec07bf78be9fd3105df6d657e0b8e45a4..4d036932e83e91cc09e4dcf1799674e2fa8f0be2 100644 GIT binary patch delta 801 zcmV++1K#}a2I&TnReu8hNkl5lQat)iLF zsgJ&3yUxJs7kKGJXWi6Hyw6J`@;OPuuX^rhXL*dx%PrjSQoXtlU|Mw%+ty9x1dF_U z8InVK7wgCoFn>^5GhnaPEBD}_3A+ZFcAu98J$OQWojEwRujcgP#-?zBg;vz|&%po~ z)rWCo@^BB}31F@hHMLoLlWEr=2oMHh7&kBxK{Vy5a`sc%!yM1OZRyP|)j{P*Oi8gO zHX^u6Op=pnL=Tt?YvDZnshha*S_C%}n`31dYgYzZCx2Xn=IYF0+ZQ~lP!KTXX9_O* zTgQg!Ra_2R2Kwwr2>g#Zl)!c7DJ0+ram}cJlTkhK^kU8F?pE@UhRu@3AQ&g!Ew+R1FNM zrpescM1M`?NxT*Ro<5mAy*tMVy7BEhhksPBX=3w0svieN-^(v><7+F>85Wzu;Vtu;sy z_Y@1lS$vQD)5PrCkeDD5_&asvP(ep&iHMTfSAYEz?<=tiCKZAV3XM>tGVm|HyOY6s zd7mFyU^Su**<&z3B7*W%L{pLz-5>6!KdOZMlhP74J7M2k<-jCJL=aEqeYE+kz5HE8 zdy~>qls}WfnBZbf-7Zq2{27^@t=yNl!{}Bg1H>1!c%Za{88Z;+kWC3#E6)#q1v9r%B$%a8FMlBOvkC$pXN8%cp zCblA|iQ!X8XIX%^Xlz=nDpjqAhw5j^8xdSZ%(gNl>wi>eOu8mIYx5vQC{KQ+DqLFSmFh^eH(eBL`@0!L5ynD1gI8D5k;T6 zL6ThxCNRVlrdBRuRY?@l@%du=6b-3iSVa_DuRxEnS=b%Hl<26Z`n)t6aokdU9#x9% zVZ&zOag-BM|FkjtI^-ru1Rkdj2RrDLu=JJL7k~ZJ`4=XRDZ#9+n^Yv)ycfY>d3zrX z-B?!Z!R`sFTagX5A?sm;|Lsc1KPfHYu%qYZiEJL^BIrPLlWy)Vlr4((i5NFjTGIJ5 zAFK(gnhJ4E&1zE9{F$144)a{4(vTc|f0TymdxE~=?0_A3!?R37Rt+nfwu-mrtFd`U lq98F5-`lXq9(z19`~e{vNlFc&d)fd1002ovPDHLkV1h*8bXNcX diff --git a/resources/images/icons2/20x20/pin@3x.png b/resources/images/icons2/20x20/pin@3x.png index 462d35f7a03d9182b8ed040cbd99204c46f431ec..c62021285656559d4b7451a2c74de7105c392006 100644 GIT binary patch delta 1337 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 diff --git a/src/quo2/components/avatars/icon_avatar.cljs b/src/quo2/components/avatars/icon_avatar.cljs index 9c151206aa..95f0981a17 100644 --- a/src/quo2/components/avatars/icon_avatar.cljs +++ b/src/quo2/components/avatars/icon_avatar.cljs @@ -4,9 +4,8 @@ [quo2.theme :as quo.theme] [react-native.core :as rn])) -(def sizes - {:big 48 - :medium 32 +(def ^:private sizes + {:medium 32 :small 20}) (defn icon-avatar-internal @@ -16,8 +15,7 @@ circle-color (colors/custom-color color 50 opacity) icon-color (colors/custom-color-by-theme color 50 60) icon-size (case size - :big 20 - :medium 16 + :medium 20 :small 12)] [rn/view {:style {:width component-size diff --git a/src/quo2/components/messages/author/view.cljs b/src/quo2/components/messages/author/view.cljs index 135e28edf2..f0ba7998d1 100644 --- a/src/quo2/components/messages/author/view.cljs +++ b/src/quo2/components/messages/author/view.cljs @@ -12,7 +12,7 @@ [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy? muted? size] :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 {:weight :semi-bold :size (if (= size 15) :paragraph-1 :paragraph-2) diff --git a/src/quo2/components/messages/system_message.cljs b/src/quo2/components/messages/system_message.cljs index fe2f123c1e..79788efb1b 100644 --- a/src/quo2/components/messages/system_message.cljs +++ b/src/quo2/components/messages/system_message.cljs @@ -15,7 +15,7 @@ (defn time-color [theme] - (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)) + (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)) (defn sm-icon [{:keys [icon color opacity]}] @@ -28,11 +28,11 @@ :opacity opacity}]]) (defn sm-timestamp - [timestamp] + [timestamp theme] [rn/view {:margin-left 8 :margin-top 2} [text/text {:size :label - :style {:color (time-color :time) + :style {:color (time-color theme) :text-transform :none}} timestamp]]) @@ -61,10 +61,11 @@ item])])) (defn system-message-base - [{:keys [icon timestamp]} child] + [{:keys [icon timestamp theme]} child] [rn/view {:flex-direction :row - :flex 1} + :flex 1 + :align-items :center} [sm-icon icon] [rn/view {:align-self :center @@ -72,7 +73,7 @@ :margin-right 40 ;; dirty hack, flexbox won't work as expected :flex 1} child - [sm-timestamp timestamp]]]) + [sm-timestamp timestamp theme]]]) (defn system-message-deleted-internal [{:keys [label child theme timestamp]}] @@ -80,7 +81,8 @@ {:icon {:icon :i/delete :color :danger :opacity 5} - :timestamp timestamp} + :timestamp timestamp + :theme theme} (if child child [text/text @@ -156,7 +158,8 @@ [rn/view [rn/view {:flex-direction :row - :flex-wrap :wrap} + :flex-wrap :wrap + :height 18.2} [author/author {:primary-name pinned-by}] [split-text (i18n/label :pinned-a-message) theme true]] (when child child)]]) diff --git a/src/status_im2/contexts/chat/composer/reply/style.cljs b/src/status_im2/contexts/chat/composer/reply/style.cljs index a6d2523c61..0f2b323ec0 100644 --- a/src/status_im2/contexts/chat/composer/reply/style.cljs +++ b/src/status_im2/contexts/chat/composer/reply/style.cljs @@ -1,13 +1,13 @@ -(ns status-im2.contexts.chat.composer.reply.style - (:require [react-native.platform :as platform])) +(ns status-im2.contexts.chat.composer.reply.style) (defn container [pin? in-chat-input?] {:flex-direction :row :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)}) + (defn reply-content [pin?] {:padding-right (when-not pin? 10) diff --git a/src/status_im2/contexts/chat/composer/reply/view.cljs b/src/status_im2/contexts/chat/composer/reply/view.cljs index 8a84427e77..88f8c79ab2 100644 --- a/src/status_im2/contexts/chat/composer/reply/view.cljs +++ b/src/status_im2/contexts/chat/composer/reply/view.cljs @@ -61,7 +61,7 @@ (i18n/label :t/message-deleted)]]) (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])) photo-path (rf/sub [:chats/photo-path from])] [rn/view {:style style/reply-from} @@ -73,7 +73,7 @@ :ring? false}] [quo/text {:weight :semi-bold - :size :paragraph-2 + :size (if pin? :label :paragraph-2) :number-of-lines 1 :style style/message-author-text} (format-reply-author from contact-name current-public-key)]])) @@ -100,7 +100,8 @@ [reply-deleted-message]] [rn/view {:style (style/quoted-message pin?)} [reply-from - {:from from + {:pin? pin? + :from from :contact-name contact-name :current-public-key current-public-key}] (when (not-empty text)