From 10020510743d6077a9a951a2feb2caba08296e29 Mon Sep 17 00:00:00 2001 From: yenda Date: Mon, 11 Feb 2019 13:39:07 +0100 Subject: [PATCH] [fix] ios checkbox - remove usage of native checkboxes on android and desktop to ensure proper design - rename plain-checkbox to radio button and make sure it is only used where radio button should be used (one possible choice beyond many) - update autotest Signed-off-by: yenda --- .../ui/components/checkbox/styles.cljs | 4 +- .../ui/components/checkbox/view.cljs | 61 ++++++++++--------- .../ui/components/contact/contact.cljs | 47 +++++++------- .../ui/components/contact/styles.cljs | 27 ++++---- src/status_im/ui/components/list/views.cljs | 21 ++++--- .../screens/mobile_network_settings/view.cljs | 3 +- .../network_settings/edit_network/views.cljs | 5 +- test/appium/views/wallet_view.py | 2 +- 8 files changed, 85 insertions(+), 85 deletions(-) diff --git a/src/status_im/ui/components/checkbox/styles.cljs b/src/status_im/ui/components/checkbox/styles.cljs index e2dbe427ee..cf9ed8ab10 100644 --- a/src/status_im/ui/components/checkbox/styles.cljs +++ b/src/status_im/ui/components/checkbox/styles.cljs @@ -9,8 +9,8 @@ :align-items :center :justify-content :center :border-radius 2 - :width 24 - :height 24}) + :width 18 + :height 18}) (defn icon-radio-container [checked?] (merge (icon-check-container checked?) diff --git a/src/status_im/ui/components/checkbox/view.cljs b/src/status_im/ui/components/checkbox/view.cljs index c17131a9b1..eb1ae6a0a3 100644 --- a/src/status_im/ui/components/checkbox/view.cljs +++ b/src/status_im/ui/components/checkbox/view.cljs @@ -1,35 +1,38 @@ (ns status-im.ui.components.checkbox.view (:require [status-im.ui.components.checkbox.styles :as styles] + [status-im.ui.components.colors :as colors] + [status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.react :as react] [status-im.utils.platform :as platform])) -(defn- checkbox-generic [{:keys [on-value-change checked? accessibility-label - disabled? style icon-style native?] - :or {accessibility-label :checkbox - native? true}} plain?] - (let [icon-check-container (if plain? #() styles/icon-check-container) - check-icon (merge (if plain? styles/plain-check-icon styles/check-icon) icon-style)] - (if (and (or platform/android? - platform/desktop?) - native?) - [react/view (merge styles/wrapper style) - [react/check-box {:on-value-change on-value-change - :value checked? - :disabled (and (not checked?) - disabled?) - :accessibility-label accessibility-label}]] - [react/touchable-highlight (merge {:style (merge - (icon-check-container checked?) - styles/wrapper - style) - :accessibility-label accessibility-label} - (when on-value-change {:on-press #(on-value-change (not checked?))})) - [react/view {} - (when checked? - [react/icon :check_on check-icon])]]))) +(defn checkbox + "react/check-box is currently not available on iOS, + use it once it is available on all platforms" + [{:keys [on-value-change checked? accessibility-label + disabled? style icon-style] + :or {accessibility-label :checkbox}}] + [react/touchable-highlight + (merge {:style (merge + styles/wrapper + style) + :accessibility-label accessibility-label} + (when on-value-change + {:on-press #(on-value-change (not checked?))})) + [react/view (styles/icon-check-container checked?) + (when checked? + [icons/icon :tiny-icons/tiny-check {:color colors/white}])]]) -(defn checkbox [props] - [checkbox-generic props false]) - -(defn plain-checkbox [props] - [checkbox-generic props true]) +(defn radio-button + [{:keys [on-value-change checked? accessibility-label + disabled? style icon-style] + :or {accessibility-label :radio-button}}] + [react/touchable-highlight + (merge {:style (merge + styles/wrapper + style) + :accessibility-label accessibility-label} + (when on-value-change + {:on-press #(on-value-change (not checked?))})) + (if checked? + [icons/icon :main-icons/check {:color colors/blue}] + [react/view])]) diff --git a/src/status_im/ui/components/contact/contact.cljs b/src/status_im/ui/components/contact/contact.cljs index b7b28c0441..aacc3254cb 100644 --- a/src/status_im/ui/components/contact/contact.cljs +++ b/src/status_im/ui/components/contact/contact.cljs @@ -20,31 +20,26 @@ [react/view {} [react/text {} label]]]))]) -(defn- contact-inner-view - ([{:keys [info style props] {:keys [public-key name dapp?] :as contact} :contact}] - [react/view (merge styles/contact-inner-container style) - [react/view - [chat-icon/contact-icon-contacts-tab contact]] - [react/view styles/info-container +(defn contact-view + [{:keys [style contact extended? on-press extend-options extend-title + info show-forward? accessibility-label inner-props] + {:keys [public-key name]} :contact + :or {accessibility-label :contact-item}}] + [react/touchable-highlight (merge {:accessibility-label accessibility-label} + (when-not extended? + {:on-press (when on-press #(on-press contact))})) + [react/view styles/contact-container-to-refactor + [chat-icon/contact-icon-contacts-tab contact] + [react/view styles/info-container-to-refactor [react/text (merge {:style styles/name-text :number-of-lines 1} - (when dapp? {:accessibility-label :dapp-name}) - props) + inner-props) (if (string/blank? name) (gfycat/generate-gfy public-key) (or name (i18n/label :t/chat-name)))] (when info [react/text {:style styles/info-text} - info])]])) - -(defn contact-view [{:keys [style contact extended? on-press extend-options extend-title info show-forward? - accessibility-label inner-props] - :or {accessibility-label :contact-item}}] - [react/touchable-highlight (merge {:accessibility-label accessibility-label} - (when-not extended? - {:on-press (when on-press #(on-press contact))})) - [react/view styles/contact-container - [contact-inner-view {:contact contact :info info :style style :props inner-props}] + info])] (when show-forward? [react/view styles/forward-btn [vector-icons/icon :main-icons/next]]) @@ -58,13 +53,19 @@ [react/view styles/more-btn [vector-icons/icon :main-icons/more {:accessibility-label :options}]]]]))]]) -(views/defview toggle-contact-view [{:keys [public-key] :as contact} selected-key on-toggle-handler disabled?] +(views/defview toggle-contact-view + [{:keys [public-key name] :as contact} selected-key on-toggle-handler disabled?] (views/letsubs [checked [selected-key public-key]] [react/view {:accessibility-label :contact-item} [list/list-item-with-checkbox {:checked? checked :disabled? disabled? - :on-value-change #(on-toggle-handler checked public-key) - :plain-checkbox? true} - [react/view styles/contact-container - [contact-inner-view {:contact contact}]]]])) + :on-value-change #(on-toggle-handler checked public-key)} + [list/item + [chat-icon/contact-icon-contacts-tab contact] + [react/view styles/info-container + [react/text {:style styles/name-text + :number-of-lines 1} + (if (string/blank? name) + (gfycat/generate-gfy public-key) + (or name (i18n/label :t/chat-name)))]]]]])) diff --git a/src/status_im/ui/components/contact/styles.cljs b/src/status_im/ui/components/contact/styles.cljs index d25015bff4..d2ad6d92f3 100644 --- a/src/status_im/ui/components/contact/styles.cljs +++ b/src/status_im/ui/components/contact/styles.cljs @@ -4,20 +4,20 @@ [status-im.utils.platform] [status-im.ui.components.colors :as colors])) -(defstyle contact-inner-container - {:flex 1 - :flex-direction :row - :align-items :center - :padding-left 16 - :background-color colors/white - :android {:height 56} - :ios {:height 63}}) +(def contact-container-to-refactor + {:flex-direction :row + :justify-content :center + :align-items :center + :padding-horizontal 16}) + +(def info-container-to-refactor + {:flex 1 + :flex-direction :column + :margin-left 16 + :justify-content :center}) (def info-container {:flex 1 - :flex-direction :column - :margin-left 16 - :margin-right 5 :justify-content :center}) (defstyle name-text @@ -31,11 +31,6 @@ :font-size 12 :color colors/text-gray}) -(def contact-container - {:flex-direction :row - :align-items :center - :background-color colors/white}) - (def forward-btn {:opacity 0.4 :padding 12 diff --git a/src/status_im/ui/components/list/views.cljs b/src/status_im/ui/components/list/views.cljs index cce50c7765..9b4ee505da 100644 --- a/src/status_im/ui/components/list/views.cljs +++ b/src/status_im/ui/components/list/views.cljs @@ -87,16 +87,19 @@ [& children] (into [react/view {:style styles/item-content-view}] (keep identity children))) -(defn item-checkbox - [{:keys [style] :as props}] - [react/view {:style (merge style styles/item-checkbox)} - [checkbox/checkbox props]]) +(defn list-item-with-checkbox + [{:keys [on-value-change style checked?] :as props} item] + [react/touchable-highlight {:on-press #(on-value-change (not checked?))} + (conj item + [react/view {:style (merge style styles/item-checkbox)} + [checkbox/checkbox props]])]) -(defn list-item-with-checkbox [{:keys [on-value-change checked? plain-checkbox?] :as props} item] - (let [handler #(on-value-change (not checked?)) - checkbox [(if plain-checkbox? checkbox/plain-checkbox item-checkbox) props] - item (conj item checkbox)] - [touchable-item handler item])) +(defn list-item-with-radio-button + [{:keys [on-value-change style checked?] :as props} item] + [react/touchable-highlight {:on-press #(on-value-change (not checked?))} + (conj item + [react/view {:style (merge style styles/item-checkbox)} + [checkbox/radio-button props]])]) (def item-icon-forward [item-icon {:icon :main-icons/next diff --git a/src/status_im/ui/screens/mobile_network_settings/view.cljs b/src/status_im/ui/screens/mobile_network_settings/view.cljs index fc4d247368..6f1ab5f540 100644 --- a/src/status_im/ui/screens/mobile_network_settings/view.cljs +++ b/src/status_im/ui/screens/mobile_network_settings/view.cljs @@ -32,8 +32,7 @@ {:checked? @checked? :style styles/checkbox :icon-style styles/checkbox-icon - :on-value-change #(swap! checked? not) - :native? false}] + :on-value-change #(swap! checked? not)}] [react/view {:style styles/checkbox-text-container} [react/text {:style styles/checkbox-text} diff --git a/src/status_im/ui/screens/network_settings/edit_network/views.cljs b/src/status_im/ui/screens/network_settings/edit_network/views.cljs index 864535ddb0..ae7efb1edd 100644 --- a/src/status_im/ui/screens/network_settings/edit_network/views.cljs +++ b/src/status_im/ui/screens/network_settings/edit_network/views.cljs @@ -19,10 +19,9 @@ :testnet (i18n/label :t/ropsten-network) :rinkeby (i18n/label :t/rinkeby-network) :custom (i18n/label :t/custom))] - [list/list-item-with-checkbox + [list/list-item-with-radio-button {:checked? (= (get-in manage-network [:chain :value]) type) - :on-value-change #(re-frame/dispatch [:network.ui/input-changed :chain type]) - :plain-checkbox? true} + :on-value-change #(re-frame/dispatch [:network.ui/input-changed :chain type])} [list/item nil [list/item-primary-only name]]])) diff --git a/test/appium/views/wallet_view.py b/test/appium/views/wallet_view.py index 3116704675..8ef8d7404e 100644 --- a/test/appium/views/wallet_view.py +++ b/test/appium/views/wallet_view.py @@ -156,7 +156,7 @@ class AssetCheckBox(BaseButton): def __init__(self, driver, asset_name): super(AssetCheckBox, self).__init__(driver) self.asset_name = asset_name - self.locator = self.Locator.xpath_selector("//*[@text='%s']/../android.widget.CheckBox" % self.asset_name) + self.locator = self.Locator.xpath_selector("//*[@text='%s']" % self.asset_name) def click(self): self.scroll_to_element().click()