Chat views redesign #13184
Chat views redesign #13184
Conversation
Jenkins BuildsClick to see older builds (94)
|
briansztamfater
force-pushed
the
feat/chat-redesign
branch
from
e7ef6d7 to
4738276
Compare
|
You need to rebase my dude, your iOS builds are stuck in limbo: |
briansztamfater
force-pushed
the
feat/chat-redesign
branch
from
2a469e1 to
23cc07f
Compare
briansztamfater
force-pushed
the
feat/chat-redesign
branch
from
7113f67 to
929b563
Compare
src/quo/design_system/colors.cljs
Outdated
| @@ -30,14 +30,18 @@ | |||
| :interactive-03 "rgba(255,255,255,0.1)" ; Background for interactive above accent | |||
| :interactive-04 "rgba(147,155,161,1)" ; Disabled state | |||
| :ui-background "rgba(255,255,255,1)" ; Default view background | |||
| :ui-background-02 "rgba(245,249,250,1)" ; Default view background | |||
There was a problem hiding this comment.
we have quo2 for new designs, you should use it instead of modifying this one
| @@ -4,8 +4,7 @@ | |||
|
|
|||
| (defn default-chat-icon [color] | |||
| {:margin 0 | |||
| :width 40 | |||
| :height 40 | |||
| :width 2 ':height 40 | |||
There was a problem hiding this comment.
mhm, interesting how's it compiled
| :as props}] | ||
| (let [navigation (if (= navigation :none) | ||
| nil | ||
| [(default-navigation modal? navigation)])] | ||
| [(default-navigation modal? navigation)]) | ||
| border-bottom (if (nil? border-bottom?) true border-bottom?)] |
There was a problem hiding this comment.
you could use :or in destructuring
| @@ -5,7 +5,8 @@ | |||
| (defn default-style [] | |||
| {:color colors/black | |||
| :font-weight "400" | |||
| :font-size 15}) | |||
| :font-size 15 | |||
| :line-height 20}) | |||
There was a problem hiding this comment.
same here, typography in quo2
| [react/view (style/collapse-button) | ||
| [icons/icon :main-icons/dropdown-up | ||
| {:color colors/white}]]]))]]]])))) | ||
| (when-not @collapsible? [message-status message])]]]])))) |
There was a problem hiding this comment.
we should drop collapsible in new designs
| :style {:flex 1 :width (- window-width 120)}} | ||
| [toolbar-content/toolbar-content-view-inner chat-info]])) | ||
| [react/view {:flex-direction :row :align-items :center :padding-horizontal 20 :height 56 :background-color (:ui-background @colors/theme)} | ||
| [back-button] |
There was a problem hiding this comment.
topbar content is a middle part of topbar, so buttons should be outside it
| @@ -350,24 +369,11 @@ | |||
| (re-frame/dispatch [:navigate-back]))) | |||
|
|
|||
| (defn topbar [] | |||
There was a problem hiding this comment.
if we want to have two version better to rename old one with _old , topbar_old overwise it will be a mess with different names for different versions
| @@ -178,14 +182,54 @@ | |||
| [react/view {:style styles/counter-public | |||
| :accessibility-label :notifications-unread-badge}]])])) | |||
|
|
|||
| (views/defview qr-button [] | |||
| [react/view | |||
| [quo/button {:type :icon | |||
Sure, working on a code refactor right now, will include fixes for your comments |
briansztamfater
force-pushed
the
feat/chat-redesign
branch
from
bcd098b to
2a5c9cb
Compare
briansztamfater
force-pushed
the
feat/chat-redesign
branch
from
2a5c9cb to
b0bc068
Compare
|
The text clips past the edge of the screen on long nonsegmented strings. Also that switcher button is still in the way of the text and buttons.
|
src/quo2/foundations/typography.cljs
Outdated
| @@ -30,3 +31,10 @@ | |||
| (def font-bold {:font-family "Inter-Bold"}) ; 700 | |||
|
|
|||
| (def monospace {:font-family "InterStatus-Regular"}) | |||
|
|
|||
| (defn message-default-style [] | |||
There was a problem hiding this comment.
this doesn't look like foundation. probably better to move to chat ui ns
src/quo2/foundations/colors.cljs
Outdated
| (def ui-background-03-light "rgba(230,237,240,1)") | ||
| (def ui-background-dark "rgba(24,28,36,1)") | ||
| (def ui-background-02-dark "rgba(4,11,20,1)") | ||
| (def ui-background-03-dark "rgba(14, 22, 32, 1)") |
There was a problem hiding this comment.
these somehow different from other colors we need to discuss with @pedro-et
src/quo2/components/button.cljs
Outdated
| @@ -105,9 +107,10 @@ | |||
| [_ _] | |||
| (let [pressed (reagent/atom false)] | |||
| (fn [{:keys [on-press disabled type size before after above width | |||
| on-long-press accessibility-label icon style] | |||
| on-long-press accessibility-label icon style rounded] | |||
There was a problem hiding this comment.
could you pls show an example where it can be used?
There was a problem hiding this comment.
I changed the plus-button component to use quo2.button, it is fully rounded so I added this use case
There was a problem hiding this comment.
mhm I'm not sure it makes sense because quo2.button is a special component that can be used only with type and size params, its better to have plus-button as a separate component
There was a problem hiding this comment.
Cool, I removed it, just made it rounded by puting it inside a wrapping view
| @@ -393,39 +470,101 @@ | |||
| :inverted (when platform/ios? true) | |||
| :style (when platform/android? {:scaleY -1})})])) | |||
|
|
|||
| (defn back-button [] | |||
| [react/view | |||
There was a problem hiding this comment.
there's no why :)
removing it
| :main-icons/arrow-left]]) | ||
|
|
||
| (defn search-button [] | ||
| [react/view |
| @@ -393,39 +470,101 @@ | |||
| :inverted (when platform/ios? true) | |||
| :style (when platform/android? {:scaleY -1})})])) | |||
|
|
|||
| (defn back-button [] | |||
| [react/view | |||
| [quo/button {:type :icon | |||
There was a problem hiding this comment.
i believe we have this button implemented in quo2
| @@ -446,7 +585,13 @@ | |||
| mutual-contact-requests-enabled? @(re-frame/subscribe [:mutual-contact-requests/enabled?]) | |||
| max-bottom-space (max @bottom-space @panel-space)] | |||
| [:<> | |||
| [topbar] | |||
| [topbar/topbar {:navigation :none | |||
There was a problem hiding this comment.
could you left a comment that it's better to do not use topbar component here, because of performance
| @@ -178,14 +279,65 @@ | |||
| [react/view {:style styles/counter-public | |||
| :accessibility-label :notifications-unread-badge}]])])) | |||
|
|
|||
| (views/defview qr-button [] | |||
| [react/view {:style {:margin-left 12}} | |||
| [quo2.button/button {:style {:width 32 :height 32 :background-color (quo2.colors/theme-colors quo2.colors/ui-background-03-light quo2.colors/ui-background-03-dark) :border-radius 10} | |||
There was a problem hiding this comment.
you don't have to use style, there is type and size , we should have all cases covered
There was a problem hiding this comment.
yes, for some super weird reason it was not working for me, I'll check that out and update it
|
|
||
| (views/defview scan-button [] | ||
| [react/view | ||
| [quo2.button/button {:style {:width 32 :height 32 :background-color (quo2.colors/theme-colors quo2.colors/ui-background-03-light quo2.colors/ui-background-03-dark) :border-radius 10} |
There was a problem hiding this comment.
same here
- why defview ?
- extra view
- use type for button instead of style
| [react/touchable-opacity (merge {:style {:height 64 :background-color background-color}} opts) | ||
| [:<> | ||
| (when (pos? unviewed-messages-count) | ||
| [react/view {:position :absolute :top 2 :left 8 :right 8 :bottom 2 :border-radius 16 :background-color "#4360DF0D"}]) |
|
When opening the switcher, there's a white (or sometimes black) bar at the top
|
Hi @Du64, |
src/quo2/foundations/colors.cljs
Outdated
| (def ui-background-02-light "#F5F9FA") | ||
|
|
||
| ;; divider | ||
| (def divider-light "rgba(237, 242, 244, 1)") |
There was a problem hiding this comment.
could we use hex for all colors?
|
Text is still getting cut off at the bottom and the right side
|
briansztamfater
force-pushed
the
feat/chat-redesign
branch
from
b12204c to
b14337c
Compare
Signed-off-by: Brian Sztamfater <[email protected]>
briansztamfater
force-pushed
the
feat/chat-redesign
branch
from
81d2ce7 to
ec3b4c0
Compare
|
@briansztamfater @flexsurfer hi guys. It turned out that merging new UI components affected old UI. As a result 27% of e2e failed in nightly https://ethstatus.testrail.net/index.php?/runs/view/9612&group_by=cases:section_id&group_order=asc Some of the issues:
2) Wallet amount is cut 3) New messages are automatically read (no unread counter appears). Not sure if this one is connected to this PR changes telegram-cloud-document-2-5348456468003690438.mp4There might be some other affected places. If there is no way to somehow rollback all possible affections of old UI, let me know and I'll take a deeper look at what else has been affected. |
fixes #13156
Summary
Chat views redesign
Review notes
Read testing notes
Testing notes
Redesign is still a WIP and there are lots of changes to work on so there still will be inconsistencies between designs and new design implementation. All the changes are under the New UI toggle. The idea is to merge this as soon as possible so we can work on each messages components, other UI changes and fixes in isolation, as this PR became bigger than expected. As long as this PR doesn't break the existing UI I would merge and continue working on redesigns.
Platforms
Areas that maybe impacted
Chats, messages
Functional
Steps to test
status: ready