chore: restructure quo2 menu page (#13959)
This commit is contained in:
parent
bc40e5cb4b
commit
994ec65218
|
@ -4,6 +4,8 @@
|
|||
[quo.design-system.colors :as colors]
|
||||
[quo.react-native :as rn]
|
||||
[quo.theme :as theme]
|
||||
[quo2.components.markdown.text :as quo2-text]
|
||||
[quo2.components.buttons.button :as quo2-button]
|
||||
[quo2.screens.avatars.icon-avatar :as icon-avatar]
|
||||
[quo2.screens.avatars.group-avatar :as group-avatar]
|
||||
[quo2.screens.avatars.user-avatar :as user-avatar]
|
||||
|
@ -27,69 +29,72 @@
|
|||
[quo2.screens.wallet.token-overview :as token-overview]
|
||||
[re-frame.core :as re-frame]))
|
||||
|
||||
(def screens [{:name :quo2-texts
|
||||
(def screens-categories
|
||||
{:avatar [{:name :group-avatar
|
||||
:insets {:top false}
|
||||
:component group-avatar/preview-group-avatar}
|
||||
{:name :icon-avatar
|
||||
:insets {:top false}
|
||||
:component icon-avatar/preview-icon-avatar}
|
||||
{:name :user-avatar
|
||||
:insets {:top false}
|
||||
:component user-avatar/preview-user-avatar}
|
||||
{:name :wallet-user-avatar
|
||||
:insets {:top false}
|
||||
:component wallet-user-avatar/preview-wallet-user-avatar}]
|
||||
:buttons [{:name :button
|
||||
:insets {:top false}
|
||||
:component button/preview-button}]
|
||||
:community [{:name :community-cards
|
||||
:insets {:top false}
|
||||
:component community-card/preview-community-card}]
|
||||
:counter [{:name :counter
|
||||
:insets {:top false}
|
||||
:component counter/preview-counter}]
|
||||
:info [{:name :info-message
|
||||
:insets {:top false}
|
||||
:component info-message/preview-info-message}
|
||||
{:name :information-box
|
||||
:insets {:top false}
|
||||
:component information-box/preview-information-box}]
|
||||
:markdown [{:name :texts
|
||||
:insets {:top false}
|
||||
:component text/preview-text}
|
||||
{:name :quo2-wallet-user-avatar
|
||||
:component text/preview-text}]
|
||||
:messages [{:name :gap
|
||||
:insets {:top false}
|
||||
:component wallet-user-avatar/preview-wallet-user-avatar}
|
||||
{:name :quo2-user-avatar
|
||||
:insets {:top false}
|
||||
:component user-avatar/preview-user-avatar}
|
||||
{:name :quo2-react
|
||||
:insets {:top false}
|
||||
:component react/preview-react}
|
||||
{:name :quo2-button
|
||||
:insets {:top false}
|
||||
:component button/preview-button}
|
||||
{:name :quo2-token-overview
|
||||
:insets {:top false}
|
||||
:component token-overview/preview-token-overview}
|
||||
{:name :quo2-icon-avatar
|
||||
:insets {:top false}
|
||||
:component icon-avatar/preview-icon-avatar}
|
||||
{:name :quo2-status-tags
|
||||
:insets {:top false}
|
||||
:component status-tags/preview-status-tags}
|
||||
{:name :quo2-messages-gap
|
||||
:insets {:top false}
|
||||
:component messages-gap/preview-messages-gap}
|
||||
{:name :quo2-context-tags
|
||||
:insets {:top false}
|
||||
:component context-tags/preview-context-tags}
|
||||
{:name :quo2-group-avatar
|
||||
:insets {:top false}
|
||||
:component group-avatar/preview-group-avatar}
|
||||
{:name :quo2-activity-logs
|
||||
:insets {:top false}
|
||||
:component activity-logs/preview-activity-logs}
|
||||
{:name :quo2-tabs
|
||||
:insets {:top false}
|
||||
:component tabs/preview-tabs}
|
||||
{:name :quo2-token-tag
|
||||
:insets {:top false}
|
||||
:component token-tag/preview-token-tag}
|
||||
{:name :quo2-segmented
|
||||
:insets {:top false}
|
||||
:component segmented/preview-segmented}
|
||||
{:name :quo2-counter
|
||||
:insets {:top false}
|
||||
:component counter/preview-counter}
|
||||
{:name :info-message
|
||||
:insets {:top false}
|
||||
:component info-message/preview-info-message}
|
||||
{:name :information-box
|
||||
:insets {:top false}
|
||||
:component information-box/preview-information-box}
|
||||
{:name :quo2-permission-tag
|
||||
:insets {:top false}
|
||||
:component permission-tag/preview-permission-tag}
|
||||
{:name :quo2-filter-tags
|
||||
:insets {:top false}
|
||||
:component filter-tags/preview-filter-tags}
|
||||
{:name :quo2-community-cards
|
||||
:insets {:top false}
|
||||
:component community-card/preview-community-card}])
|
||||
:component messages-gap/preview-messages-gap}]
|
||||
:notifications [{:name :activity-logs
|
||||
:insets {:top false}
|
||||
:component activity-logs/preview-activity-logs}]
|
||||
:reactions [{:name :react
|
||||
:insets {:top false}
|
||||
:component react/preview-react}]
|
||||
:tabs [{:name :segmented
|
||||
:insets {:top false}
|
||||
:component segmented/preview-segmented}
|
||||
{:name :tabs
|
||||
:insets {:top false}
|
||||
:component tabs/preview-tabs}]
|
||||
:tags [{:name :context-tags
|
||||
:insets {:top false}
|
||||
:component context-tags/preview-context-tags}
|
||||
{:name :filter-tags
|
||||
:insets {:top false}
|
||||
:component filter-tags/preview-filter-tags}
|
||||
{:name :permission-tag
|
||||
:insets {:top false}
|
||||
:component permission-tag/preview-permission-tag}
|
||||
{:name :status-tags
|
||||
:insets {:top false}
|
||||
:component status-tags/preview-status-tags}
|
||||
{:name :token-tag
|
||||
:insets {:top false}
|
||||
:component token-tag/preview-token-tag}]
|
||||
:wallet [{:name :token-overview
|
||||
:insets {:top false}
|
||||
:component token-overview/preview-token-overview}]})
|
||||
|
||||
(def screens (flatten (map val screens-categories)))
|
||||
|
||||
(defn theme-switcher []
|
||||
[rn/view {:style {:flex-direction :row
|
||||
|
@ -124,12 +129,20 @@
|
|||
:padding-horizontal 16
|
||||
:background-color (:ui-background @colors/theme)}
|
||||
[theme-switcher]
|
||||
[quo2-text/text {:size :heading-1} "Preview Quo2 Components"]
|
||||
[rn/view
|
||||
(for [{:keys [name]} screens]
|
||||
^{:key name}
|
||||
[rn/touchable-opacity {:on-press #(re-frame/dispatch [:navigate-to name])}
|
||||
[rn/view {:style {:padding-vertical 8}}
|
||||
[quo/text (str "Preview " name)]]])]])]))
|
||||
(map (fn [category]
|
||||
[rn/view {:style {:margin-vertical 8}}
|
||||
[quo2-text/text
|
||||
{:weight :semi-bold
|
||||
:size :heading-2}
|
||||
(clojure.core/name (key category))]
|
||||
(for [{:keys [name]} (val category)]
|
||||
^{:key name}
|
||||
[quo2-button/button
|
||||
{:style {:margin-vertical 8}
|
||||
:on-press #(re-frame/dispatch [:navigate-to name])}
|
||||
(clojure.core/name name)])]) (sort screens-categories))]])]))
|
||||
|
||||
(def main-screens [{:name :quo2-preview
|
||||
:insets {:top false}
|
||||
|
|
Loading…
Reference in New Issue