diff --git a/src/quo2/components/text_combinations/style.cljs b/src/quo2/components/text_combinations/style.cljs new file mode 100644 index 0000000000..dd96e349f2 --- /dev/null +++ b/src/quo2/components/text_combinations/style.cljs @@ -0,0 +1,19 @@ +(ns quo2.components.text-combinations.style) + +(defn container + [container-style] + (merge + {:flex 1 + :margin-horizontal 20} + container-style)) + +(def title-container + {:flex 1 + :flex-direction :row + :align-items :center}) + +(def avatar-container + {:margin-right 9}) + +(def description-description-text + {:margin-top 8}) diff --git a/src/quo2/components/text_combinations/title/style.cljs b/src/quo2/components/text_combinations/title/style.cljs deleted file mode 100644 index 1ac9f9879d..0000000000 --- a/src/quo2/components/text_combinations/title/style.cljs +++ /dev/null @@ -1,17 +0,0 @@ -(ns quo2.components.text-combinations.title.style - (:require - [quo2.foundations.colors :as colors])) - -(defn title-container - [container-style] - (merge - {:justify-content :center - :padding-horizontal 20} - container-style)) - -(def title-text - {:color colors/white}) - -(def subtitle-text - {:color colors/white - :margin-top 8}) diff --git a/src/quo2/components/text_combinations/title/view.cljs b/src/quo2/components/text_combinations/title/view.cljs deleted file mode 100644 index 9c8c05578e..0000000000 --- a/src/quo2/components/text_combinations/title/view.cljs +++ /dev/null @@ -1,26 +0,0 @@ -(ns quo2.components.text-combinations.title.view - (:require - [quo2.components.markdown.text :as text] - [quo2.components.text-combinations.title.style :as style] - [react-native.core :as rn])) - -(defn title - [{:keys [container-style - title - title-accessibility-label - subtitle - subtitle-accessibility-label]}] - [rn/view {:style (style/title-container container-style)} - [text/text - {:accessibility-label title-accessibility-label - :weight :semi-bold - :size :heading-1 - :style style/title-text} - title] - (when subtitle - [text/text - {:accessibility-label subtitle-accessibility-label - :weight :regular - :size :paragraph-1 - :style style/subtitle-text} - subtitle])]) diff --git a/src/quo2/components/text_combinations/view.cljs b/src/quo2/components/text_combinations/view.cljs new file mode 100644 index 0000000000..acb8216f1d --- /dev/null +++ b/src/quo2/components/text_combinations/view.cljs @@ -0,0 +1,51 @@ +(ns quo2.components.text-combinations.view + (:require + [quo2.theme :as theme] + [quo2.components.markdown.text :as text] + [quo2.components.text-combinations.style :as style] + [react-native.core :as rn])) + +(defn icon + [source size] + [rn/image + {:source (if (string? source) + {:uri source} + source) + :style {:border-radius 50 + :border-width 0 + :border-color :transparent + :width size + :height size}}]) + +(defn view-internal + [{:keys [container-style + title + avatar + title-accessibility-label + description + description-props + description-accessibility-label]}] + [rn/view {:style (style/container container-style)} + [rn/view {:style style/title-container} + (when avatar + [rn/view {:style style/avatar-container} + [icon avatar 32]]) + + [text/text + {:accessibility-label title-accessibility-label + :weight :semi-bold + :ellipsize-mode :tail + :number-of-lines 1 + :size :heading-1} + title]] + (case description + :description + [text/text + {:accessibility-label description-accessibility-label + :weight :regular + :size :paragraph-1 + :style style/description-description-text} + description-props] + nil)]) + +(def view (theme/with-theme view-internal)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 0018764f56..7bdd2f5121 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -113,9 +113,9 @@ quo2.components.tags.tag quo2.components.tags.tags quo2.components.tags.token-tag - quo2.components.text-combinations.title.view - quo2.components.wallet.account-card.view + quo2.components.text-combinations.view quo2.components.wallet.account-overview.view + quo2.components.wallet.account-card.view quo2.components.wallet.keypair.view quo2.components.wallet.network-amount.view quo2.components.wallet.network-bridge.view @@ -319,8 +319,8 @@ (def context-tag quo2.components.tags.context-tag.view/view) (def number-tag quo2.components.tags.number-tag.view/view) -;;;; Title -(def title quo2.components.text-combinations.title.view/title) +;;;; Text combinations +(def text-combinations quo2.components.text-combinations.view/view) ;;;; Wallet (def account-card quo2.components.wallet.account-card.view/view) diff --git a/src/status_im2/common/scroll_page/style.cljs b/src/status_im2/common/scroll_page/style.cljs index 597b0f354f..ca6e6debd3 100644 --- a/src/status_im2/common/scroll_page/style.cljs +++ b/src/status_im2/common/scroll_page/style.cljs @@ -5,7 +5,7 @@ (defn image-slider [size] - {:top (if platform/ios? 0 -64) + {:top -64 :height size :width size :z-index 4 diff --git a/src/status_im2/common/scroll_page/view.cljs b/src/status_im2/common/scroll_page/view.cljs index 2abe28771d..35a9538a3b 100644 --- a/src/status_im2/common/scroll_page/view.cljs +++ b/src/status_im2/common/scroll_page/view.cljs @@ -2,14 +2,13 @@ (:require [oops.core :as oops] [quo2.core :as quo] [react-native.core :as rn] - [react-native.platform :as platform] [reagent.core :as reagent] [status-im2.common.scroll-page.style :as style] [utils.re-frame :as rf] [react-native.reanimated :as reanimated])) -(def negative-scroll-position-0 (if platform/ios? -44 0)) -(def scroll-position-0 (if platform/ios? 44 0)) +(def negative-scroll-position-0 0) +(def scroll-position-0 0) (defn diff-with-max-min [value maximum minimum] @@ -19,10 +18,15 @@ (max minimum) (min maximum))) +(defn page-header-threshold + [collapsed?] + (if collapsed? 50 170)) + (defn f-scroll-page-header - [scroll-height height name page-nav-right-side logo sticky-header top-nav title-colum navigate-back?] - (let [input-range (if platform/ios? [-47 10] [0 10]) - output-range (if platform/ios? [-208 0] [-208 -45]) + [scroll-height height name page-nav-right-side logo sticky-header top-nav title-colum navigate-back? + collapsed?] + (let [input-range [0 10] + output-range [-208 -45] y (reanimated/use-shared-value scroll-height) translate-animation (reanimated/interpolate y input-range @@ -30,13 +34,13 @@ {:extrapolateLeft "clamp" :extrapolateRight "clamp"}) opacity-animation (reanimated/use-shared-value 0) - threshold (if platform/ios? 30 170)] + threshold (page-header-threshold collapsed?)] (rn/use-effect - #(do - (reanimated/set-shared-value y scroll-height) - (reanimated/set-shared-value opacity-animation - (reanimated/with-timing (if (>= scroll-height threshold) 1 0) - (clj->js {:duration 300})))) + (fn [] + (reanimated/set-shared-value y scroll-height) + (reanimated/set-shared-value opacity-animation + (reanimated/with-timing (if (>= scroll-height threshold) 1 0) + (clj->js {:duration 300})))) [scroll-height]) [:<> [reanimated/blur-view @@ -62,7 +66,7 @@ :style {:line-height 21}} name]]) (if top-nav - [rn/view {:style {:margin-top (if platform/ios? 44 0)}} + [rn/view {:style {:margin-top 0}} top-nav] [quo/page-nav (cond-> {:margin-top 44 @@ -80,7 +84,7 @@ (defn f-display-picture [scroll-height cover] - (let [input-range (if platform/ios? [-67 10] [0 150]) + (let [input-range [0 150] y (reanimated/use-shared-value scroll-height) animation (reanimated/interpolate y input-range @@ -101,25 +105,27 @@ [_ _ _] (let [scroll-height (reagent/atom negative-scroll-position-0)] (fn [{:keys [name cover-image logo page-nav-right-section-buttons on-scroll + collapsed? height top-nav title-colum background-color navigate-back?]} sticky-header children] [:<> [:f> f-scroll-page-header @scroll-height height name page-nav-right-section-buttons - logo sticky-header top-nav title-colum navigate-back?] + logo sticky-header top-nav title-colum navigate-back? collapsed?] [rn/scroll-view - {:content-container-style {:flex-grow 1} - :shows-vertical-scroll-indicator false - :scroll-event-throttle 16 - :on-scroll (fn [^js event] - (reset! scroll-height (int - (oops/oget - event - "nativeEvent.contentOffset.y"))) - (when on-scroll - (on-scroll @scroll-height)))} + {:content-container-style {:flex-grow 1} + :content-inset-adjustment-behavior :never + :shows-vertical-scroll-indicator false + :scroll-event-throttle 16 + :on-scroll (fn [^js event] + (reset! scroll-height (int + (oops/oget + event + "nativeEvent.contentOffset.y"))) + (when on-scroll + (on-scroll @scroll-height)))} (when cover-image - [rn/view {:style {:height 151}} + [rn/view {:style {:height (if collapsed? 110 151)}} [rn/image {:source cover-image ;; Using negative margin-bottom as a workaround because on Android, @@ -131,6 +137,6 @@ [rn/view {:style (style/children-container {:border-radius (diff-with-max-min @scroll-height 16 0) :background-color background-color})} - (when cover-image + (when (and (not collapsed?) cover-image) [:f> f-display-picture @scroll-height logo]) children])]]))) diff --git a/src/status_im2/contexts/communities/discover/view.cljs b/src/status_im2/contexts/communities/discover/view.cljs index d898ffe4cc..859f5dae33 100644 --- a/src/status_im2/contexts/communities/discover/view.cljs +++ b/src/status_im2/contexts/communities/discover/view.cljs @@ -4,7 +4,6 @@ [quo2.core :as quo] [quo2.foundations.colors :as colors] [react-native.core :as rn] - [react-native.platform :as platform] [reagent.core :as reagent] [status-im2.contexts.communities.actions.community-options.view :as options] [status-im.ui.components.react :as react] @@ -212,13 +211,9 @@ colors/white colors/neutral-95) :navigate-back? :true - :height (if platform/ios? - (if (> @scroll-height 360) - 156 - 100) - (if (> @scroll-height 360) - 208 - 148))} + :height (if (> @scroll-height 360) + 208 + 148)} [render-sticky-header {:selected-tab selected-tab :scroll-height scroll-height}] diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index 9dc631aece..f953e0e878 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -4,7 +4,6 @@ [quo2.foundations.colors :as colors] [react-native.blur :as blur] [react-native.core :as rn] - [react-native.platform :as platform] [reagent.core :as reagent] [status-im2.common.home.actions.view :as actions] [status-im2.common.password-authentication.view :as password-authentication] @@ -69,15 +68,13 @@ channels-list] [rn/view {:on-layout #(on-first-channel-height-changed - (+ (if platform/ios? 0 38) - (int (Math/ceil (layout-y %)))) + (+ 38 (int (Math/ceil (layout-y %)))) (into #{} (map (comp :name second) channels-list))) - :style {:margin-top 20 :flex 1}} + :style {:margin-top 8 :flex 1}} (doall (for [[category-id {:keys [chats name collapsed?]}] channels-list] [rn/view - {:style {:flex 1} - :key category-id + {:key category-id ;; on-layout fires only when the component re-renders, so ;; in case the category hasn't changed, it will not be fired :on-layout #(on-category-layout name (int (layout-y %)))} @@ -235,18 +232,22 @@ [category (update v :chats add-on-press)]) categorized-chats))) + (defn community-header - [name] - [quo/text - {:accessibility-label :chat-name-text - :number-of-lines 1 - :ellipsize-mode :tail - :weight :semi-bold - :size :heading-1 - :style {:margin-top (+ scroll-page.style/picture-radius - scroll-page.style/picture-border-width - 12)}} - name]) + [title logo] + [quo/text-combinations + {:container-style + {:margin-horizontal 0 + :padding-right 20 + :margin-top + (if logo + 12 + (+ scroll-page.style/picture-radius + scroll-page.style/picture-border-width + 12))} + :avatar logo + :title title + :title-accessibility-label :chat-name-text}]) (defn community-description [description] @@ -260,20 +261,25 @@ description]) (defn community-content - [{:keys [name description joined tags color id] + [{:keys [name description joined images tags color id] :as community} pending? - {:keys [on-category-layout on-first-channel-height-changed]}] + {:keys [on-category-layout + collapsed? + on-first-channel-height-changed]}] (let [chats-by-category (rf/sub [:communities/categorized-channels id])] [:<> [rn/view {:style style/community-content-container} - [status-tag pending? joined] - [community-header name] - [community-description description] - [quo/community-tags - {:tags tags - :last-item-style style/last-community-tag - :container-style style/community-tag-container}] + (when-not collapsed? + [status-tag pending? joined]) + [community-header name (when collapsed? (get-in images [:thumbnail :uri]))] + (when-not collapsed? + [community-description description]) + (when-not collapsed? + [quo/community-tags + {:tags tags + :last-item-style style/last-community-tag + :container-style style/community-tag-container}]) [join-community community pending?]] [channel-list-component {:on-category-layout on-category-layout @@ -311,37 +317,41 @@ (and (>= scroll-height (+ height first-channel-height)) category))))) -(defn community-card-page-view - [] - (let [categories-heights (reagent/atom {}) +(defn community-scroll-page + [{:keys [joined]}] + (let [scroll-height (reagent/atom 0) + categories-heights (reagent/atom {}) first-channel-height (reagent/atom 0) - scroll-height (reagent/atom 0)] - (fn [id] - (let [{:keys [name images id] - :as community} (rf/sub [:communities/community id]) - pending? (rf/sub [:communities/my-pending-request-to-join id]) - cover {:uri (get-in images [:banner :uri])} - logo {:uri (get-in images [:thumbnail :uri])}] + ;; We track the initial value of joined + ;; as we open the page to avoid switching + ;; from not collapsed to collapsed if the + ;; user is on this page + initial-joined? joined] + (fn [{:keys [id name images] :as community} pending?] + (let [cover {:uri (get-in images [:banner :uri])} + logo {:uri (get-in images [:thumbnail :uri])} + collapsed? (and initial-joined? (:joined community))] [scroll-page/scroll-page {:cover-image cover + :collapsed? collapsed? :logo logo :page-nav-right-section-buttons (page-nav-right-section-buttons id) :name name :on-scroll #(reset! scroll-height %) :navigate-back? true :background-color (colors/theme-colors colors/white colors/neutral-95) - :height (if platform/ios? 100 148)} + :height 148} [sticky-category-header {:enabled (> @scroll-height @first-channel-height) :label (pick-first-category-by-height @scroll-height @first-channel-height @categories-heights)}] - [community-content community pending? {:on-category-layout (partial add-category-height categories-heights) + :collapsed? collapsed? :on-first-channel-height-changed ;; Here we set the height of the component and we filter out the ;; categories, as some might have been removed @@ -349,6 +359,13 @@ (swap! categories-heights select-keys categories) (reset! first-channel-height height))}]])))) +(defn community-card-page-view + [id] + (let [{:keys [id] + :as community} (rf/sub [:communities/community id]) + pending? (rf/sub [:communities/my-pending-request-to-join id])] + [community-scroll-page community pending?])) + (defn overview [id] (let [id (or id (rf/sub [:get-screen-params :community-overview])) diff --git a/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs b/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs index d174b031f1..560f0c095f 100644 --- a/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs +++ b/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs @@ -12,12 +12,13 @@ (defn page-title [] - [quo/title - {:container-style {:margin-top 12} - :title (i18n/label :t/enable-biometrics) - :title-accessibility-label :enable-biometrics-title - :subtitle (i18n/label :t/use-biometrics) - :subtitle-accessibility-label :enable-biometrics-sub-title}]) + [quo/text-combinations + {:container-style {:margin-top 12} + :title (i18n/label :t/enable-biometrics) + :title-accessibility-label :enable-biometrics-title + :description :description + :description-props (i18n/label :t/use-biometrics) + :description-accessibility-label :enable-biometrics-sub-title}]) (defn enable-biometrics-buttons [insets] diff --git a/src/status_im2/contexts/onboarding/enable_notifications/view.cljs b/src/status_im2/contexts/onboarding/enable_notifications/view.cljs index bebd6e43e5..02adb097b7 100644 --- a/src/status_im2/contexts/onboarding/enable_notifications/view.cljs +++ b/src/status_im2/contexts/onboarding/enable_notifications/view.cljs @@ -11,12 +11,13 @@ (defn page-title [] - [quo/title - {:container-style {:margin-top 12} - :title (i18n/label :t/intro-wizard-title6) - :title-accessibility-label :notifications-title - :subtitle (i18n/label :t/enable-notifications-sub-title) - :subtitle-accessibility-label :notifications-sub-title}]) + [quo/text-combinations + {:container-style {:margin-top 12} + :title (i18n/label :t/intro-wizard-title6) + :title-accessibility-label :notifications-title + :description :description + :description-props (i18n/label :t/enable-notifications-sub-title) + :description-accessibility-label :notifications-sub-title}]) (defn enable-notification-buttons [{:keys [insets]}] diff --git a/src/status_im2/contexts/onboarding/generating_keys/view.cljs b/src/status_im2/contexts/onboarding/generating_keys/view.cljs index db7c3dd1da..057ba36c06 100644 --- a/src/status_im2/contexts/onboarding/generating_keys/view.cljs +++ b/src/status_im2/contexts/onboarding/generating_keys/view.cljs @@ -11,17 +11,17 @@ (defn generate-keys-title [] - [quo/title + [quo/text-combinations {:title (i18n/label :t/generating-keys)}]) (defn saving-keys-title [] - [quo/title + [quo/text-combinations {:title (i18n/label :t/saving-keys-to-device)}]) (defn keys-saved-title [] - [quo/title + [quo/text-combinations {:title (i18n/label :t/keys-saved)}]) (def first-transition-delay-ms 2000) diff --git a/src/status_im2/contexts/onboarding/syncing/progress/view.cljs b/src/status_im2/contexts/onboarding/syncing/progress/view.cljs index acfd3e671e..e7b2b49ef1 100644 --- a/src/status_im2/contexts/onboarding/syncing/progress/view.cljs +++ b/src/status_im2/contexts/onboarding/syncing/progress/view.cljs @@ -12,16 +12,17 @@ (defn page-title [pairing-progress?] - [quo/title - {:container-style {:margin-top 56} - :title (i18n/label (if pairing-progress? - :t/sync-devices-title - :t/sync-devices-error-title)) - :subtitle (i18n/label (if pairing-progress? - :t/sync-devices-sub-title - :t/sync-devices-error-sub-title)) - :title-accessibility-label :progress-screen-title - :subtitle-accessibility-label :progress-screen-sub-title}]) + [quo/text-combinations + {:container-style {:margin-top 56} + :title (i18n/label (if pairing-progress? + :t/sync-devices-title + :t/sync-devices-error-title)) + :description :description + :description-props (i18n/label (if pairing-progress? + :t/sync-devices-sub-title + :t/sync-devices-error-sub-title)) + :title-accessibility-label :progress-screen-title + :description-accessibility-label :progress-screen-sub-title}]) (defn try-again-button [profile-color in-onboarding?] diff --git a/src/status_im2/contexts/onboarding/syncing/results/view.cljs b/src/status_im2/contexts/onboarding/syncing/results/view.cljs index 30cbb0d3ff..109a1d37f7 100644 --- a/src/status_im2/contexts/onboarding/syncing/results/view.cljs +++ b/src/status_im2/contexts/onboarding/syncing/results/view.cljs @@ -13,11 +13,12 @@ (defn page-title [] - [quo/title - {:title (i18n/label :t/sync-devices-complete-title) - :title-accessibility-label :sync-devices-title - :subtitle (i18n/label :t/sync-devices-complete-sub-title) - :subtitle-accessibility-label :sync-devices-complete-sub-title}]) + [quo/text-combinations + {:title (i18n/label :t/sync-devices-complete-title) + :title-accessibility-label :sync-devices-title + :description :description + :description-props (i18n/label :t/sync-devices-complete-sub-title) + :description-accessibility-label :sync-devices-complete-sub-title}]) (defn current-device [installation] diff --git a/src/status_im2/contexts/onboarding/welcome/view.cljs b/src/status_im2/contexts/onboarding/welcome/view.cljs index ac2edffdc4..1cc1aaf590 100644 --- a/src/status_im2/contexts/onboarding/welcome/view.cljs +++ b/src/status_im2/contexts/onboarding/welcome/view.cljs @@ -11,14 +11,15 @@ (defn page-title [] (let [new-account? (rf/sub [:onboarding-2/new-account?])] - [quo/title - {:container-style {:margin-top 12} - :title (i18n/label (if new-account? - :t/welcome-to-web3 - :t/welcome-back)) - :title-accessibility-label :welcome-title - :subtitle (i18n/label :t/welcome-to-web3-sub-title) - :subtitle-accessibility-label :welcome-sub-title}])) + [quo/text-combinations + {:container-style {:margin-top 12} + :title (i18n/label (if new-account? + :t/welcome-to-web3 + :t/welcome-back)) + :title-accessibility-label :welcome-title + :description :description + :description-props (i18n/label :t/welcome-to-web3-sub-title) + :description-accessibility-label :welcome-sub-title}])) (defn dispatch-visibility-status-update [status-type] diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 6baaedc336..e6bdf8a880 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -109,7 +109,7 @@ [status-im2.contexts.quo-preview.tags.status-tags :as status-tags] [status-im2.contexts.quo-preview.tags.tags :as tags] [status-im2.contexts.quo-preview.tags.token-tag :as token-tag] - [status-im2.contexts.quo-preview.title.title :as title] + [status-im2.contexts.quo-preview.text-combinations.preview :as text-combinations] [status-im2.contexts.quo-preview.keycard.keycard :as keycard] [status-im2.contexts.quo-preview.loaders.skeleton-list :as skeleton-list] [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions] @@ -348,8 +348,8 @@ :component status-tags/preview-status-tags} {:name :token-tag :component token-tag/preview-token-tag}] - :text-combinations [{:name :title - :component title/preview-title}] + :text-combinations [{:name :text-combinations + :component text-combinations/preview}] :wallet [{:name :account-card :component account-card/preview-account-card} {:name :account-overview diff --git a/src/status_im2/contexts/quo_preview/text_combinations/preview.cljs b/src/status_im2/contexts/quo_preview/text_combinations/preview.cljs new file mode 100644 index 0000000000..ae8f538c73 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/text_combinations/preview.cljs @@ -0,0 +1,61 @@ +(ns status-im2.contexts.quo-preview.text-combinations.preview + (:require [quo2.components.text-combinations.view :as quo2] + [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im2.common.resources :as resources] + [status-im2.contexts.quo-preview.preview :as preview])) + +(def descriptor + [{:label "Title" + :key :title + :type :text} + {:label :avatar + :key :avatar + :type :boolean} + {:label "Description type:" + :key :description + :type :select + :options [{:key :none + :value nil} + {:key :description + :value :description}]} + {:label "Description text" + :key :description-props + :type :text}]) + +(defn state->text-combinations-props + [state] + (if (:avatar state) + (assoc state :avatar (resources/get-mock-image :user-picture-male4)) + state)) + +(defn cool-preview + [] + (let [state (reagent/atom {:title "Title" + :title-accessibility-label :title + :description nil + :description-props "" + :description-accessibility-label :subtitle})] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150} + [preview/customizer state descriptor] + [rn/view + {:padding-vertical 60 + :align-items :center} + [quo2/view + (state->text-combinations-props @state)]]]]))) + +(defn preview + [] + [rn/view + {:background-color (colors/theme-colors colors/white colors/neutral-90) + :flex 1} + [rn/flat-list + {:flex 1 + :flex-grow 1 + :nested-scroll-enabled true + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/title/title.cljs b/src/status_im2/contexts/quo_preview/title/title.cljs deleted file mode 100644 index 2c2012ec2f..0000000000 --- a/src/status_im2/contexts/quo_preview/title/title.cljs +++ /dev/null @@ -1,42 +0,0 @@ -(ns status-im2.contexts.quo-preview.title.title - (:require [quo2.components.text-combinations.title.view :as quo2] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] - [reagent.core :as reagent] - [status-im2.contexts.quo-preview.preview :as preview])) - -(def descriptor - [{:label "Title" - :key :title - :type :text} - {:label "Subtitle" - :key :subtitle - :type :text}]) - -(defn cool-preview - [] - (let [state (reagent/atom {:title "Title" - :title-accessibility-label :title - :subtitle "" - :subtitle-accessibility-label :subtitle})] - (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] - [rn/view - {:padding-vertical 60 - :align-items :center} - [quo2/title @state]]]]))) - -(defn preview-title - [] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :flex-grow 1 - :nested-scroll-enabled true - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]])