Quo2: divider line (#17211)

* quo2: divider line
This commit is contained in:
Omar Basem 2023-09-07 13:50:19 +04:00 committed by GitHub
parent 2f13dfe22a
commit bd8e332c68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 47 additions and 1 deletions

View File

@ -0,0 +1,11 @@
(ns quo2.components.dividers.divider-line.style
(:require [quo2.foundations.colors :as colors]))
(defn divider-line
[blur? theme]
{:border-color (if blur?
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
(colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
:padding-top 12
:padding-bottom 8
:border-bottom-width 1})

View File

@ -0,0 +1,11 @@
(ns quo2.components.dividers.divider-line.view
(:require
[quo2.theme :as quo.theme]
[react-native.core :as rn]
[quo2.components.dividers.divider-line.style :as style]))
(defn- view-internal
[{:keys [blur? theme]}]
[rn/view {:style (style/divider-line blur? theme)}])
(def view (quo.theme/with-theme view-internal))

View File

@ -34,6 +34,7 @@
quo2.components.counter.step.view quo2.components.counter.step.view
quo2.components.dividers.date quo2.components.dividers.date
quo2.components.dividers.divider-label.view quo2.components.dividers.divider-label.view
quo2.components.dividers.divider-line.view
quo2.components.dividers.new-messages quo2.components.dividers.new-messages
quo2.components.dividers.strength-divider.view quo2.components.dividers.strength-divider.view
quo2.components.drawers.action-drawers.view quo2.components.drawers.action-drawers.view
@ -191,6 +192,7 @@
;;;; Dividers ;;;; Dividers
(def divider-label quo2.components.dividers.divider-label.view/view) (def divider-label quo2.components.dividers.divider-label.view/view)
(def divider-line quo2.components.dividers.divider-line.view/view)
(def new-messages quo2.components.dividers.new-messages/new-messages) (def new-messages quo2.components.dividers.new-messages/new-messages)
(def divider-date quo2.components.dividers.date/date) (def divider-date quo2.components.dividers.date/date)
(def strength-divider quo2.components.dividers.strength-divider.view/view) (def strength-divider quo2.components.dividers.strength-divider.view/view)

View File

@ -0,0 +1,19 @@
(ns status-im2.contexts.quo-preview.dividers.divider-line
(:require [quo2.core :as quo]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:key :blur?
:type :boolean}])
(defn view
[]
(let [state (reagent/atom {:blur? false})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor
:blur? (:blur? @state)
:show-blur-background? true}
[quo/divider-line @state]])))

View File

@ -39,6 +39,7 @@
[status-im2.contexts.quo-preview.counter.step :as step] [status-im2.contexts.quo-preview.counter.step :as step]
[status-im2.contexts.quo-preview.dividers.date :as divider-date] [status-im2.contexts.quo-preview.dividers.date :as divider-date]
[status-im2.contexts.quo-preview.dividers.divider-label :as divider-label] [status-im2.contexts.quo-preview.dividers.divider-label :as divider-label]
[status-im2.contexts.quo-preview.dividers.divider-line :as divider-line]
[status-im2.contexts.quo-preview.dividers.new-messages :as new-messages] [status-im2.contexts.quo-preview.dividers.new-messages :as new-messages]
[status-im2.contexts.quo-preview.dividers.strength-divider :as strength-divider] [status-im2.contexts.quo-preview.dividers.strength-divider :as strength-divider]
[status-im2.contexts.quo-preview.drawers.action-drawers :as action-drawers] [status-im2.contexts.quo-preview.drawers.action-drawers :as action-drawers]
@ -193,6 +194,8 @@
:component step/view}] :component step/view}]
:dividers [{:name :divider-label :dividers [{:name :divider-label
:component divider-label/view} :component divider-label/view}
{:name :divider-line
:component divider-line/view}
{:name :new-messages {:name :new-messages
:component new-messages/view} :component new-messages/view}
{:name :divider-date {:name :divider-date

View File

@ -211,7 +211,7 @@
:border-radius 16 :border-radius 16
:overflow :hidden}} :overflow :hidden}}
[rn/image [rn/image
{:source (or image (resources/get-mock-image :community-cover)) {:source (or image (resources/get-mock-image :dark-blur-bg))
:style {:height "100%" :width "100%"}}] :style {:height "100%" :width "100%"}}]
[blur/view [blur/view
(merge {:style {:position :absolute (merge {:style {:position :absolute