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

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

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

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

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