status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#12446] Screens with overlapping long usernames 

Signed-off-by: andrey <motor4ik@gmail.com>
This commit is contained in:
andrey 2021-08-23 12:06:06 +02:00
parent 3409ccab27
commit 2882085d2e
No known key found for this signature in database
GPG Key ID: 89B67245FD2F0272
4 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/quo/components/list/item.cljs
View File

@ -153,22 +153,24 @@
;; Occupy only content width, never grow, but shrink if need be
:flex-grow 0
:flex-shrink 1
:padding-right 16
:align-items (or (:left-side-alignment props) :center)}}
[icon-column props]
[title-column props]])
(defn right-side [{:keys [chevron active disabled accessory accessory-text animated-accessory?]}]
(defn right-side [{:keys [chevron active disabled accessory accessory-text accessory-style animated-accessory?]}]
(when (or chevron accessory)
[rn/view {:style {:align-items :center
:justify-content :flex-end
:flex-direction :row
;; Grow to occupy full space, shrink when need be, but always maitaining 16px left gutter
:flex-grow 1
:flex-shrink 1
:margin-left 16
;; When the left-side leaves no room for right-side, the rendered element is pushed out. A flex-basis ensures that there is some room reserved.
;; The number 80px was determined by trial and error.
:flex-basis 80}}
[rn/view {:style (merge {:align-items :center
:justify-content :flex-end
:flex-direction :row
;; Grow to occupy full space, shrink when need be, but always maitaining 16px left gutter
:flex-grow 1
:flex-shrink 0
:margin-left 16
;; When the left-side leaves no room for right-side, the rendered element is pushed out. A flex-basis ensures that there is some room reserved.
;; The number 80px was determined by trial and error.
:flex-basis 80}
accessory-style)}
[rn/view {:style (:tiny spacing/padding-horizontal)}
(case accessory
:radio [controls/radio {:value active :disabled disabled}]
@ -194,7 +196,7 @@
[{:keys [theme accessory disabled subtitle-max-lines icon icon-container-style
left-side-alignment
title subtitle subtitle-secondary active on-press on-long-press chevron size text-size
accessory-text accessibility-label title-accessibility-label
accessory-text accessibility-label title-accessibility-label accessory-style
haptic-feedback haptic-type error animated animated-accessory? title-text-weight]
:or {subtitle-max-lines 1
theme :main
@ -254,6 +256,7 @@
:on-press on-press
:accessory-text accessory-text
:animated-accessory? animated-accessory?
:accessory-style accessory-style
:accessory accessory}]]]
(when error
[tooltip/tooltip (merge {:bottom-value 0}

4
src/status_im/ui/screens/chat/views.cljs
View File

@ -332,7 +332,9 @@
:height 256}]))
(defn topbar []
[toolbar-content/toolbar-content-view-inner @(re-frame/subscribe [:chats/current-chat])])
(let [window-width @(re-frame/subscribe [:dimensions/window-width])]
[react/view {:flex 1 :width (- window-width 120)}
[toolbar-content/toolbar-content-view-inner @(re-frame/subscribe [:chats/current-chat])]]))
(defn chat []
(let [curr-chat-id (:chat-id @(re-frame/subscribe [:chats/current-chat-chat-view]))

5
src/status_im/ui/screens/communities/requests_to_join.cljs
View File

@ -26,7 +26,7 @@
[react/touchable-highlight {:on-press #(re-frame/dispatch [:communities.ui/decline-request-to-join-pressed community-id request-id])}
[icons/icon :main-icons/cancel {:width 35
:height 35
:container-style {:padding-left 10}
:container-style {:margin-left 16}
:color colors/red}]]])
(defn render-request [{:keys [id public-key]} _ _ {:keys [community-id
@ -36,7 +36,8 @@
[quo/list-item
{:title (multiaccounts/displayed-name member)
:accessibility-label :member-item
:accessory-style (when can-manage-users?
{:flex-basis 120})
:accessory (when can-manage-users?
[request-actions community-id id])
:icon [chat-icon/contact-icon-contacts-tab

2
src/status_im/ui/screens/multiaccounts/views.cljs
View File

@ -20,10 +20,10 @@
[:multiaccounts.login.ui/multiaccount-selected key-uid])
:icon [photos/photo (multiaccounts/displayed-photo account) {:size styles/multiaccount-image-size}]
:title name
:accessory-style (when keycard-pairing {:flex-basis 100})
:accessory (when keycard-pairing
[react/view {:justify-content :center
:align-items :center
:margin-right 7
:width 32
:height 32
:border-radius 24