From faa146a35db17136faef67f6f1661a44afeee6be Mon Sep 17 00:00:00 2001 From: Gustavo Nunes Date: Wed, 26 Apr 2017 01:46:00 -0300 Subject: [PATCH] bigger tap area for buttons --- src/status_im/chats_list/styles.cljs | 22 +++++++++---------- .../chats_list/views/inner_item.cljs | 6 +++-- src/status_im/components/common/common.cljs | 4 +++- src/status_im/components/common/styles.cljs | 11 +++++----- src/status_im/components/contact/contact.cljs | 8 ++++--- src/status_im/components/contact/styles.cljs | 14 ++++++------ src/status_im/profile/screen.cljs | 4 +++- src/status_im/profile/styles.cljs | 4 +++- 8 files changed, 42 insertions(+), 31 deletions(-) diff --git a/src/status_im/chats_list/styles.cljs b/src/status_im/chats_list/styles.cljs index e9e3f89bff..4c75288627 100644 --- a/src/status_im/chats_list/styles.cljs +++ b/src/status_im/chats_list/styles.cljs @@ -46,19 +46,18 @@ :ios {:margin-top 14}}) (defstyle chat-options-container - {:margin-right 16 - :padding-top 10 - :android {:margin-top 16} - :ios {:margin-top 14}}) + {:padding-top 10}) -(def item-upper-container - {:flex 1 - :flex-direction :row}) +(defstyle item-upper-container + {:flex 1 + :flex-direction :row + :padding-right 16}) (defstyle item-lower-container {:flex 1 :flex-direction :row :justify-content :space-between + :padding-right 16 :android {:margin-top 4} :ios {:margin-top 6}}) @@ -152,12 +151,13 @@ {:flex-direction :row :padding-right 14}) -(def opts-btn - {:width 24 - :height 24 - :align-items :center +(def opts-btn-container + {:align-items :center :justify-content :center}) +(def opts-btn + {:padding 16}) + (def create-icon {:fontSize 20 :height 22 diff --git a/src/status_im/chats_list/views/inner_item.cljs b/src/status_im/chats_list/views/inner_item.cljs index 8172c2cb38..fb7e9742db 100644 --- a/src/status_im/chats_list/views/inner_item.cljs +++ b/src/status_im/chats_list/views/inner_item.cljs @@ -90,10 +90,12 @@ (let [options [{:value #(dispatch [:remove-chat chat-id]) :text (label :t/delete-chat) :destructive? true}]] - [view st/opts-btn + [view st/opts-btn-container [context-menu [icon :options_gray] - options]])) + options + nil + st/opts-btn]])) (defn chat-list-item-name [name group-chat? public?] (let [private-group? (and group-chat? (not public?)) diff --git a/src/status_im/components/common/common.cljs b/src/status_im/components/common/common.cljs index bb4e650a30..c054de9906 100644 --- a/src/status_im/components/common/common.cljs +++ b/src/status_im/components/common/common.cljs @@ -53,5 +53,7 @@ [view st/form-title-extend-container [context-menu [icon :options_gray] - options]])] + options + nil + st/form-title-extend-button]])] [top-shadow]]) diff --git a/src/status_im/components/common/styles.cljs b/src/status_im/components/common/styles.cljs index 292066026f..ecdd052475 100644 --- a/src/status_im/components/common/styles.cljs +++ b/src/status_im/components/common/styles.cljs @@ -55,13 +55,14 @@ :margin-top 8}}) (defstyle form-title-extend-container - {:padding-right 16 - :ios {:margin-top 16 - :padding-top 16 + {:ios {:margin-top 16 :background-color color-white} - :android {:margin-top 24 + :android {:margin-top 8 :background-color color-light-gray}}) +(def form-title-extend-button + {:padding 16}) + (defstyle form-title {:flex-shrink 1 :ios {:color text1-color @@ -84,4 +85,4 @@ (defstyle list-header-footer-spacing {:android {:background-color color-white - :height 8}}) \ No newline at end of file + :height 8}}) diff --git a/src/status_im/components/contact/contact.cljs b/src/status_im/components/contact/contact.cljs index 91bbf181a3..c9241e524c 100644 --- a/src/status_im/components/contact/contact.cljs +++ b/src/status_im/components/contact/contact.cljs @@ -33,10 +33,12 @@ [view st/contact-container [contact-inner-view {:contact contact :info info}] (when extended? - [view st/more-btn + [view st/more-btn-container [context-menu [icon :options_gray] - extend-options]])]]]) + extend-options + nil + st/more-btn]])]]]) (defview toogle-contact-view [{:keys [whisper-identity] :as contact} selected-key on-toggle-handler] [checked [selected-key whisper-identity]] @@ -47,4 +49,4 @@ (when checked {:style st/selected-contact}))] [view (st/icon-check-container checked) (when checked - [icon :check_on st/check-icon])]]]]) \ No newline at end of file + [icon :check_on st/check-icon])]]]]) diff --git a/src/status_im/components/contact/styles.cljs b/src/status_im/components/contact/styles.cljs index b6d2f33dd2..7540894c4c 100644 --- a/src/status_im/components/contact/styles.cljs +++ b/src/status_im/components/contact/styles.cljs @@ -33,14 +33,14 @@ (def contact-container {:flex-direction :row :align-items :center - :background-color common/color-white - :padding-right 16}) + :background-color common/color-white}) + +(def more-btn-container + {:alignItems :center + :justifyContent :center}) (def more-btn - {:width 24 - :height 24 - :alignItems :center - :justifyContent :center}) + {:padding 16}) (def selected-contact {:background-color common/selected-contact-color}) @@ -64,4 +64,4 @@ (def check-icon {:width 12 - :height 12}) \ No newline at end of file + :height 12}) diff --git a/src/status_im/profile/screen.cljs b/src/status_im/profile/screen.cljs index d25e3315b7..f96a830798 100644 --- a/src/status_im/profile/screen.cljs +++ b/src/status_im/profile/screen.cljs @@ -98,7 +98,9 @@ (when options [context-menu [icon :options_gray] - options])]) + options + nil + st/profile-info-item-button])]) (defn show-qr [contact qr-source] #(dispatch [:navigate-to-modal :qr-code-view {:contact contact diff --git a/src/status_im/profile/styles.cljs b/src/status_im/profile/styles.cljs index 40f37f48ac..aa70301a7a 100644 --- a/src/status_im/profile/styles.cljs +++ b/src/status_im/profile/styles.cljs @@ -26,6 +26,9 @@ (defstyle profile-info-container {:background-color color-white}) +(def profile-info-item-button + {:padding 16}) + (def status-prompt {:padding-left 16 :padding-right 16 @@ -95,7 +98,6 @@ {:flex-direction :row :align-items :center :padding-left 16 - :padding-right 16 :ios {:height 73} :android {:height 72}})