diff --git a/src/quo2/components/dividers/divider_label.cljs b/src/quo2/components/dividers/divider_label.cljs new file mode 100644 index 0000000000..bef2635069 --- /dev/null +++ b/src/quo2/components/dividers/divider_label.cljs @@ -0,0 +1,60 @@ +(ns quo2.components.dividers.divider-label + (:require [quo.react-native :as rn] + [quo2.components.markdown.text :as markdown.text] + [status-im.ui.components.icons.icons :as icons] + [quo2.foundations.colors :as colors])) + +(def chevron-icon-container-width 20) + +(def chevron-icon-container-height 20) + +(defn divider-label + "label -> string + chevron-position -> :left, :right + counter-value -> number + increase-padding-top? -> boolean + blur? -> boolean" + [{:keys [label chevron-position counter-value increase-padding-top? blur?]}] + (let [dark? (colors/dark?) + border-and-counter-bg-color (if dark? (if blur? colors/white-opa-5 colors/neutral-70) colors/neutral-10) + padding-top (if increase-padding-top? 16 8) + text-and-icon-color (if dark? colors/neutral-40 colors/neutral-50) + counter-text-color (if dark? colors/white colors/black)] + [rn/view {:style {:border-top-width 1 + :border-top-color border-and-counter-bg-color + :padding-top padding-top + :padding-horizontal 16 + :align-items :center + :flex-direction :row}} + (when (= chevron-position :left) + [rn/view {:style {:margin-right 4}} + [icons/icon + :main-icons/chevron-down + {:color text-and-icon-color + :width chevron-icon-container-width + :height chevron-icon-container-height}]]) + [markdown.text/text {:size :paragraph-2 + :weight :medium + :style {:color text-and-icon-color + :flex 1}} + label] + (when (= chevron-position :right) + [icons/icon + :main-icons/chevron-down + {:color text-and-icon-color + :width chevron-icon-container-width + :height chevron-icon-container-height}]) + (when (pos? counter-value) + [rn/view {:style {:border-radius 6 + :height 16 + :width (case (count counter-value) + 1 16 + 2 20 + 28) + :background-color border-and-counter-bg-color + :align-items :center + :justify-content :center}} + [markdown.text/text {:size :label + :weight :medium + :style {:color counter-text-color}} + counter-value]])])) \ No newline at end of file diff --git a/src/quo2/screens/dividers/divider_label.cljs b/src/quo2/screens/dividers/divider_label.cljs new file mode 100644 index 0000000000..ea250fd7ea --- /dev/null +++ b/src/quo2/screens/dividers/divider_label.cljs @@ -0,0 +1,49 @@ +(ns quo2.screens.dividers.divider-label + (:require [quo.react-native :as rn] + [reagent.core :as reagent] + [quo.previews.preview :as preview] + [quo2.foundations.colors :as colors] + [quo2.components.dividers.divider-label :as divider-label])) + +(def descriptor [{:label "Label:" + :key :label + :type :text} + {:label "Chevron position:" + :key :chevron-position + :type :select + :options [{:key :left + :value "Left"} + {:key :right + :value "Right"}]} + {:label "Counter value:" + :key :counter-value + :type :text} + {:label "Increase padding top:" + :key :increase-padding-top? + :type :boolean} + {:label "Blur:" + :key :blur? + :type :boolean}]) + +(defn cool-preview [] + (let [state (reagent/atom {:label "Welcome" + :chevron-position :left + :counter-value 0 + :increase-padding-top? true + :blur? false})] + (fn [] + [rn/view {:margin-bottom 50 + :padding 16} + [preview/customizer state descriptor] + [rn/view {:padding-vertical 60} + [divider-label/divider-label @state]]]))) + +(defn preview-divider-label [] + [rn/view {:background-color (colors/theme-colors + colors/white + colors/neutral-90) + :flex 1} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]]) \ No newline at end of file diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index 4e14f43647..405389af69 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -13,6 +13,7 @@ [quo2.screens.buttons.button :as button] [quo2.screens.counter.counter :as counter] [quo2.screens.community.community-card-view :as community-card] + [quo2.screens.dividers.divider-label :as divider-label] [quo2.screens.dividers.new-messages :as new-messages] [quo2.screens.info.info-message :as info-message] [quo2.screens.info.information-box :as information-box] @@ -58,7 +59,10 @@ :counter [{:name :counter :insets {:top false} :component counter/preview-counter}] - :dividers [{:name :new-messages + :dividers [{:name :divider-label + :inset {:top false} + :component divider-label/preview-divider-label} + {:name :new-messages :insets {:top false} :component new-messages/preview-new-messages}] :info [{:name :info-message diff --git a/src/status_im/ui/screens/chat/photos.cljs b/src/status_im/ui/screens/chat/photos.cljs index 9d1d60cbcc..57953014f8 100644 --- a/src/status_im/ui/screens/chat/photos.cljs +++ b/src/status_im/ui/screens/chat/photos.cljs @@ -2,7 +2,6 @@ (:require [re-frame.core :as re-frame] [status-im.ui.components.react :as react] [status-im.ui.screens.chat.styles.photos :as style] - [status-im.profile.db :as profile.db] [status-im.multiaccounts.core :as multiaccounts] [quo.design-system.colors :as colors] [status-im.ui.components.fast-image :as fast-image]))