chore: restructure quo2 menu page (#13959)

This commit is contained in:
Jamie Caprani 2022-09-09 10:25:37 +01:00 committed by GitHub
parent bc40e5cb4b
commit 994ec65218
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 79 additions and 66 deletions

View File

@ -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}