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

Make right item occupy entire space instead of left one. Make left grow if nothing on right. 

Signed-off-by: shivekkhurana <shivek@status.im>
This commit is contained in:
shivekkhurana 2020-11-06 19:16:13 +05:30
parent 6b4f2901ae
commit 30753f8766
No known key found for this signature in database
GPG Key ID: 9BEB56E6E62968C7
2 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -84,10 +84,13 @@
(defn title-column
[{:keys [title text-color subtitle subtitle-max-lines
title-accessibility-label size text-size title-text-weight]}]
title-accessibility-label size text-size title-text-weight
right-side-present?]}]
[rn/view {:style (merge (:tiny spacing/padding-horizontal)
{:justify-content :center
:flex 1})}
;; make left-side title grow if nothing is present on right-side
(when-not right-side-present?
{:flex 1
:justify-content :center}))}
(cond
(and title subtitle)
@ -124,15 +127,25 @@
(defn left-side [props]
[rn/view {:style {:flex-direction :row
:flex 1
;; Occupy only content width, never grow, but shrink if need be
:flex-grow 0
:flex-shrink 1
:align-items :center}}
[icon-column props]
[title-column props]])
(defn right-side [{:keys [chevron active accessory accessory-text animated-accessory?]}]
(when (or chevron accessory)
[rn/view {:style {:align-items :center
:flex-direction :row}}
[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 (:tiny spacing/padding-horizontal)}
(case accessory
:radio [controls/radio {:value active}]
@ -142,6 +155,7 @@
{:value active}]
:switch [controls/switch {:value active}]
:text [text/text {:color :secondary
:ellipsize-mode :middle
:number-of-lines 1}
accessory-text]
accessory)]
@ -204,7 +218,8 @@
:size size
:text-size text-size
:subtitle subtitle
:subtitle-max-lines subtitle-max-lines}]
:subtitle-max-lines subtitle-max-lines
:right-side-present? (or accessory chevron)}]
[right-side {:chevron chevron
:active active
:on-press on-press

9
src/status_im/ui/screens/sync_settings/views.cljs
View File

@ -9,8 +9,10 @@
(views/defview sync-settings []
(views/letsubs [{:keys [syncing-on-mobile-network?
use-mailservers?]} [:multiaccount]
mailserver-id [:mailserver/current-id]]
use-mailservers?]} [:multiaccount]
current-mailserver-id [:mailserver/current-id]
current-fleet [:fleets/current-fleet]
mailservers [:mailserver/mailservers]]
[react/view {:style {:flex 1 :background-color colors/white}}
[topbar/topbar {:title (i18n/label :t/sync-settings)}]
[react/scroll-view
@ -29,7 +31,8 @@
:title (i18n/label :t/offline-messaging)
:on-press #(re-frame/dispatch [:navigate-to :offline-messaging-settings])
:accessory :text
:accessory-text (when use-mailservers? mailserver-id)
:accessory-text (when use-mailservers?
(get-in mailservers [current-fleet current-mailserver-id :name]))
:chevron true}]
;; TODO(Ferossgp): Devider componemt
[react/view {:height 1