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

[ui only] Mobile network bottom sheet

This commit is contained in:
Roman Volosovskyi 2019-01-30 15:34:43 +02:00
parent 00b5ad2af6
commit 7b0f68fcdb
No known key found for this signature in database
GPG Key ID: 0238A4B5ECEE70DE
15 changed files with 371 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/status_im/network/core.cljs
View File

@ -12,7 +12,8 @@
[status-im.utils.fx :as fx]
[status-im.utils.handlers :as handlers]
[status-im.utils.http :as http]
[status-im.utils.types :as types]))
[status-im.utils.types :as types]
[status-im.ui.components.bottom-sheet.core :as bottom-sheet]))
(def url-regex
#"https?://(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}(\.[a-z]{2,6})?\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)")
@ -237,8 +238,14 @@
:content (not-supported-warning fleet)}})))
(fx/defn handle-network-status-change
[cofx data]
{:network/notify-status-go data})
[cofx {:keys [type] :as data}]
(fx/merge
cofx
{:network/notify-status-go data}
(if (= type "cellular")
(bottom-sheet/show-bottom-sheet
{:view :mobile-network})
(bottom-sheet/hide-bottom-sheet))))
(re-frame/reg-fx
:network/listen-to-network-status

10
src/status_im/ui/components/bottom_sheet/core.cljs Normal file
View File

@ -0,0 +1,10 @@
(ns status-im.ui.components.bottom-sheet.core
(:require [status-im.ui.components.bottom-sheet.view :as view]
[status-im.ui.components.bottom-sheet.events :as events]
status-im.ui.components.bottom-sheet.subs
status-im.ui.components.bottom-sheet.db))
(def show-bottom-sheet events/show-bottom-sheet)
(def hide-bottom-sheet events/hide-bottom-sheet)
(def bottom-sheet view/bottom-sheet)

5
src/status_im/ui/components/bottom_sheet/db.cljs Normal file
View File

@ -0,0 +1,5 @@
(ns status-im.ui.components.bottom-sheet.db
(:require [cljs.spec.alpha :as spec]))
(spec/def :bottom-sheet/show? (spec/nilable boolean?))
(spec/def :bottom-sheet/view (spec/nilable keyword?))

12
src/status_im/ui/components/bottom_sheet/events.cljs Normal file
View File

@ -0,0 +1,12 @@
(ns status-im.ui.components.bottom-sheet.events
(:require [status-im.utils.fx :as fx]))
(fx/defn show-bottom-sheet
[{:keys [db]} {:keys [view]}]
{:db (assoc db
:bottom-sheet/show? true
:bottom-sheet/view view)})
(fx/defn hide-bottom-sheet
[{:keys [db]}]
{:db (assoc db :bottom-sheet/show? false)})

8
src/status_im/ui/components/bottom_sheet/subs.cljs Normal file
View File

@ -0,0 +1,8 @@
(ns status-im.ui.components.bottom-sheet.subs
(:require [re-frame.core :as re-frame]))
(re-frame/reg-sub
:bottom-sheet
(fn [{:bottom-sheet/keys [show? view]}]
{:show? show?
:view view}))

34
src/status_im/ui/components/bottom_sheet/view.cljs
View File

@ -113,12 +113,13 @@
{:style (styles/content-container height bottom-value)}
[react/view styles/content-header
[react/view styles/handle]]
content
[react/view {:style {:flex 1
:height height}}
[content]]
[react/view {:style styles/bottom-view}]]])}))
(defn bottom-sheet
[{:keys [show? content-height on-cancel]} _]
{:pre [(fn? on-cancel) (pos? content-height)]}
[{:keys [show? content-height on-cancel]}]
(let [show-sheet? (reagent/atom show?)
total-content-height (+ content-height styles/border-radius
styles/bottom-padding)
@ -132,15 +133,28 @@
(reagent.core/create-class
{:component-will-update
(fn [this [_ new-args]]
(let [old-args (second (.-argv (.-props this)))
old-show? (:show? old-args)
new-show? (:show? new-args)]
(let [old-args (second (.-argv (.-props this)))
old-show? (:show? old-args)
new-show? (:show? new-args)
old-height (:content-height old-args)
new-height (:content-height new-args)
total-content-height (+ new-height
styles/border-radius
styles/bottom-padding)
opts' (assoc opts :height total-content-height)]
(when (not= old-height new-height)
(animation/set-value bottom-value new-height))
(cond (and (not old-show?) new-show?)
(reset! show-sheet? true)
(and old-show? (not new-show?) (true? @show-sheet?))
(cancel opts))))
(cancel opts'))))
:reagent-render
(fn [_ content]
(when @show-sheet?
[bottom-sheet-view (assoc opts :content content)]))})))
(fn [{:keys [content content-height]}]
(let [total-content-height (+ content-height
styles/border-radius
styles/bottom-padding)]
(when @show-sheet?
[bottom-sheet-view (assoc opts
:content content
:height total-content-height)])))})))

19
src/status_im/ui/components/checkbox/view.cljs
View File

@ -3,21 +3,28 @@
[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] :or {accessibility-label :checkbox}} plain?]
(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 (if plain? styles/plain-check-icon styles/check-icon)]
(if (or platform/android?
platform/desktop?)
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 styles/wrapper style)
[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 (icon-check-container checked?)
[react/view {}
(when checked?
[react/icon :check_on check-icon])]])))

52
src/status_im/ui/components/lists/cell/styles.cljs Normal file
View File

@ -0,0 +1,52 @@
(ns status-im.ui.components.lists.cell.styles
(:require [status-im.ui.components.styles :as common-styles]
[status-im.ui.components.colors :as colors]))
(def cell-container
{:height 64
:align-self :stretch
:flex-direction :row})
(def icon-container
{:width 72
:justify-content :center
:align-items :center})
(defn- get-color [color]
(get
{:blue colors/blue
:red colors/red
:red-light colors/red-light
:blue-light colors/blue-light}
color
color))
(defn icon [color background-color]
{:width 24
:height 24
:color (get-color color)
:container-style {:width 40
:height 40
:border-radius 20
:background-color (get-color background-color)
:justify-content :center
:align-items :center}})
(def description
{:flex 1
:padding-top 8
:padding-bottom 8})
(def cell-text
{:height 18
:justify-content :center
:margin-top 3
:margin-bottom 3})
(defn item-title [color]
(merge common-styles/text-main-medium
{:color (get-color color)}))
(def item-details
(merge common-styles/text-main
{:color colors/gray}))

20
src/status_im/ui/components/lists/cell/view.cljs Normal file
View File

@ -0,0 +1,20 @@
(ns status-im.ui.components.lists.cell.view
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.lists.cell.styles :as styles]
[status-im.ui.components.icons.vector-icons :as icons]))
(defn cell [{:keys [title details icon]
{:keys [title-color
icon-color
icon-background]} :style}]
[react/view
{:style styles/cell-container}
[react/view {:style styles/icon-container}
[icons/icon icon (styles/icon icon-color icon-background)]]
[react/view {:style styles/description}
[react/view {:style styles/cell-text}
[react/text {:style (styles/item-title title-color)}
title]]
[react/view {:style styles/cell-text}
[react/text {:style styles/item-details}
details]]]])

13
src/status_im/ui/components/styles.cljs
View File

@ -19,4 +19,15 @@
(def icon-default
{:width 24
:height 24})
:height 24})
(def text-title-bold
{:font-size 17
:font-weight "700"})
(def text-main
{:font-size 15})
(def text-main-medium
{:font-size 15
:font-weight "500"})

7
src/status_im/ui/screens/db.cljs
View File

@ -15,7 +15,8 @@
status-im.mailserver.db
status-im.browser.db
status-im.ui.screens.add-new.db
status-im.ui.screens.add-new.new-public-chat.db))
status-im.ui.screens.add-new.new-public-chat.db
status-im.ui.components.bottom-sheet.core))
;; initial state of app-db
(def app-db {:keyboard-height 0
@ -268,7 +269,9 @@
:stickers/packs
:stickers/packs-installed
:stickers/selected-pack
:stickers/recent]
:stickers/recent
:bottom-sheet/show?
:bottom-sheet/view]
:opt-un [::modal
::was-modal?
::rpc-url

96
src/status_im/ui/screens/mobile_network_settings/style.cljs Normal file
View File

@ -0,0 +1,96 @@
(ns status-im.ui.screens.mobile-network-settings.style
(:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.styles :as common-styles]))
(def container
{:flex 1
:align-items :center})
(def title
{:height 21
:margin-top 8})
(def title-text
(merge
common-styles/text-title-bold
{:color colors/black}))
(def details
{:height 66
:width 311
:margin-left 32
:margin-right 32
:margin-top 6
:margin-bottom 10})
(def details-text
(merge
common-styles/text-main
{:color colors/gray
:text-align :center
:line-height 22}))
(def network-icon
{:title-color :blue
:icon-color :blue
:icon-background :blue-light})
(def cancel-icon
{:title-color :red
:icon-color :red
:icon-background :red-light})
(def separator
{:background-color colors/gray-lighter
:margin-left 72
:align-self :stretch
:height 1
:margin-top 8})
(def checkbox-line-container
{:margin-left 71
:margin-top 13
:height 29
:flex-direction :row
:justify-content :center})
(def checkbox
{:padding 0
:justify-content :center
:align-items :center
:width 18
:height 18
:border-radius 2
:margin-top 6})
(def checkbox-icon
{:tint-color colors/white})
(def checkbox-text-container
{:justify-content :center
:flex 1
:margin-left 13})
(def checkbox-text
(merge
common-styles/text-main
{:color colors/black
:line-height 19}))
(def settings-container
{:margin-left 69
:height 44
:margin-top 6
:align-items :flex-start})
(def settings-text
(merge
common-styles/text-main
{:color colors/gray
:line-height 22}))
(def settings-link
(merge
common-styles/text-main
{:color colors/blue
:line-height 22}))

68
src/status_im/ui/screens/mobile_network_settings/view.cljs Normal file
View File

@ -0,0 +1,68 @@
(ns status-im.ui.screens.mobile-network-settings.view
(:require-macros [status-im.utils.views :as views])
(:require [status-im.ui.components.react :as react]
[status-im.ui.screens.mobile-network-settings.style :as styles]
[status-im.ui.components.checkbox.view :as checkbox]
[status-im.i18n :as i18n]
[reagent.core :as reagent]
[status-im.ui.components.lists.cell.view :as cell]))
(defn title []
[react/view {:style styles/title}
[react/text
{:style styles/title-text}
(i18n/label :mobile-syncing-sheet-title)]])
(defn details []
[react/view
{:style styles/details}
[react/text
{:style styles/details-text}
(i18n/label :mobile-syncing-sheet-details)]])
(defn separator []
[react/view {:style styles/separator}])
(defn checkbox []
(let [checked? (reagent/atom false)]
(fn []
[react/view
{:style styles/checkbox-line-container}
[checkbox/checkbox
{:checked? @checked?
:style styles/checkbox
:icon-style styles/checkbox-icon
:on-value-change #(swap! checked? not)
:native? false}]
[react/view
{:style styles/checkbox-text-container}
[react/text {:style styles/checkbox-text}
(i18n/label :mobile-network-sheet-remember-choice)]]])))
(defn settings []
[react/view
{:style styles/settings-container}
[react/text {:style styles/settings-text}
(i18n/label :mobile-network-sheet-configure)
[react/text {:style styles/settings-link}
(str " " (i18n/label :mobile-network-sheet-settings))]]])
(views/defview mobile-network-settings-sheet []
[react/view {:style styles/container}
[title]
[details]
[cell/cell
{:title (i18n/label :mobile-network-continue-syncing)
:details (i18n/label :mobile-network-continue-syncing-details)
:icon :main-icons/network
:style styles/network-icon}]
[cell/cell
{:title (i18n/label :mobile-network-stop-syncing)
:details (i18n/label :mobile-network-stop-syncing-details)
:icon :main-icons/cancel
:style styles/cancel-icon}]
[separator]
[react/view {:flex 1
:align-self :stretch}
[checkbox]
[settings]]])

37
src/status_im/ui/screens/views.cljs
View File

@ -1,3 +1,4 @@
(ns status-im.ui.screens.views
(:require-macros [status-im.utils.views :refer [defview letsubs] :as views])
(:require [re-frame.core :refer [dispatch]]
@ -68,6 +69,7 @@
[status-im.ui.screens.about-app.views :as about-app]
[status-im.ui.screens.stickers.views :as stickers]
[status-im.ui.screens.dapps-permissions.views :as dapps-permissions]
[status-im.ui.components.bottom-sheet.core :as bottom-sheet]
[status-im.utils.navigation :as navigation]
[reagent.core :as reagent]
[cljs-react-navigation.reagent :as nav-reagent]
@ -75,7 +77,8 @@
[re-frame.core :as re-frame]
[taoensso.timbre :as log]
[status-im.utils.platform :as platform]
[status-im.utils.config :as config]))
[status-im.utils.config :as config]
[status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings]))
(defn wrap [view-id component]
(fn []
@ -380,6 +383,16 @@
(defonce initial-view-id (atom nil))
(views/defview bottom-sheet []
(views/letsubs [{:keys [show? view]} [:bottom-sheet]]
(let [opts (cond-> {:show? show?
:on-cancel (fn [])}
(= view :mobile-network)
(merge {:content mobile-network-settings/mobile-network-settings-sheet
:content-height 340}))]
[bottom-sheet/bottom-sheet opts])))
(defn main []
(let [view-id (re-frame/subscribe [:get :view-id])
main-component (atom nil)]
@ -418,13 +431,15 @@
:reagent-render
(fn []
(when (and @view-id main-component)
[:> @main-component
{:ref (fn [r]
(navigation/set-navigator-ref r)
(when (and
platform/android?
(not js/goog.DEBUG)
(not (contains? #{:intro :login :progress} @view-id)))
(navigation/navigate-to @view-id)))
;; see https://reactnavigation.org/docs/en/state-persistence.html#development-mode
:persistenceKey (when js/goog.DEBUG rand-label)}]))})))
[react/view {:flex 1}
[:> @main-component
{:ref (fn [r]
(navigation/set-navigator-ref r)
(when (and
platform/android?
(not js/goog.DEBUG)
(not (contains? #{:intro :login :progress} @view-id)))
(navigation/navigate-to @view-id)))
;; see https://reactnavigation.org/docs/en/state-persistence.html#development-mode
:persistenceKey (when js/goog.DEBUG rand-label)}]
[bottom-sheet]]))})))

11
translations/en.json
View File

@ -919,5 +919,14 @@
"mailserver-error-title": "Error connecting to mailserver",
"mailserver-error-content": "The mailserver you selected couldn't be reached.",
"dapps-permissions": "Dapps permissions",
"revoke-access": "Revoke access"
"revoke-access": "Revoke access",
"mobile-syncing-sheet-title": "Sync using the mobile network",
"mobile-syncing-sheet-details": "Status tends to use a lot of data when syncing chats. You can choose not to sync when on mobile network",
"mobile-network-continue-syncing": "Continue syncing",
"mobile-network-continue-syncing-details": "You can change this later in settings",
"mobile-network-stop-syncing": "Stop syncing",
"mobile-network-stop-syncing-details": "Until connected to wi-fi?",
"mobile-network-sheet-configure": "You can configure syncing in more \ndetail in",
"mobile-network-sheet-settings": "settings",
"mobile-network-sheet-remember-choice": "Remember my choice"
}