0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-23 07:16:07 -05:00

♻️ Refactor loader* component props & usage

This commit is contained in:
Belén Albeza 2024-07-25 12:08:22 +02:00
parent af5a189d04
commit 39b2c1722a
12 changed files with 61 additions and 57 deletions

View file

@ -3,4 +3,8 @@
body { body {
overflow-y: scroll; overflow-y: scroll;
} }
#storybook-root {
height: 100%;
}
</style> </style>

View file

@ -97,6 +97,7 @@
:loading "lazy" :loading "lazy"
:decoding "async"}] :decoding "async"}]
[:> loader* {:class (stl/css :grid-loader) [:> loader* {:class (stl/css :grid-loader)
:overlay true
:title (tr "labels.loading")}]))])) :title (tr "labels.loading")}]))]))
;; --- Grid Item Library ;; --- Grid Item Library
@ -116,6 +117,7 @@
[:div {:class (stl/css :grid-item-th :library)} [:div {:class (stl/css :grid-item-th :library)}
(if (nil? file) (if (nil? file)
[:> loader* {:class (stl/css :grid-loader) [:> loader* {:class (stl/css :grid-loader)
:overlay true
:title (tr "labels.loading")}] :title (tr "labels.loading")}]
(let [summary (:library-summary file) (let [summary (:library-summary file)
components (:components summary) components (:components summary)

View file

@ -373,7 +373,5 @@ $thumbnail-default-height: $s-168; // Default width
} }
.grid-loader { .grid-loader {
width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25); --icon-width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25);
height: 100%;
align-self: center;
} }

View file

@ -268,8 +268,7 @@
[:div {:class (stl/css :file-name)} [:div {:class (stl/css :file-name)}
(if loading? (if loading?
[:> loader* {:width "16px" [:> loader* {:width 16
:height "24px"
:title (tr "labels.loading")}] :title (tr "labels.loading")}]
[:div {:class (stl/css-case :file-icon true [:div {:class (stl/css-case :file-icon true
:icon-fill ready?)} :icon-fill ready?)}

View file

@ -41,9 +41,7 @@
(mf/defc loading-placeholder (mf/defc loading-placeholder
[] []
[:> loader* {:width "64px" [:> loader* {:width 32
:height "64px"
:title (tr "labels.loading") :title (tr "labels.loading")
:overlay true
:class (stl/css :placeholder-loader)} :class (stl/css :placeholder-loader)}
[:div {:class (stl/css :placeholder-text)} (tr "dashboard.loading-files")]]) [:span {:class (stl/css :placeholder-text)} (tr "dashboard.loading-files")]])

View file

@ -76,22 +76,16 @@
} }
} }
.loader-wrapper {
display: grid;
justify-items: center;
height: 100%;
width: 100%;
padding: $s-12 0;
border-radius: $br-12;
}
.placeholder-loader { .placeholder-loader {
align-self: end; display: flex;
flex-direction: column;
justify-content: center;
row-gap: var(--sp-xxxl);
margin: var(--sp-xxxl) 0 var(--sp-m) 0;
} }
.placeholder-text { .placeholder-text {
margin-top: $s-12;
color: $df-secondary; color: $df-secondary;
font-size: $fs-16; font-size: $fs-16;
align-self: start; text-align: center;
} }

View file

@ -9,18 +9,18 @@
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.style :as stl]) [app.main.style :as stl])
(:require (:require
[app.common.math :as mth]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc loader-icon* (mf/defc loader-icon*
{::mf/props :obj {::mf/props :obj
::mf/private true} ::mf/private true}
[{:keys [class width height title] :rest props}] [{:keys [width height title] :rest props}]
(let [class (dm/str (or class "") " " (stl/css :loader)) (let [class (stl/css :loader)
props (mf/spread-props props {:viewBox "0 0 677.34762 182.15429" props (mf/spread-props props {:viewBox "0 0 677.34762 182.15429"
:role "status" :role "status"
:width (or width "100px") :width width
:height (or height "27px") :height height
:class class})] :class class})]
[:> "svg" props [:> "svg" props
@ -34,23 +34,19 @@
(mf/defc loader* (mf/defc loader*
{::mf/props :obj} {::mf/props :obj}
[{:keys [class wrapperclass width height title overlay children] :rest props}] [{:keys [class width height title overlay children] :rest props}]
(let [both-provided (and width height) (let [w (or width (when (some? height) (mth/ceil (* height (/ 100 27)))) 100)
neither-provided (and (nil? width) (nil? height)) h (or height (when (some? width) (mth/ceil (* width (/ 27 100)))) 27)
wrapperclass (dm/str (or wrapperclass "") " " (stl/css-case :loader-wrapper true class (dm/str (or class "") " " (stl/css-case :wrapper true
:loader-wrapper-overlay overlay)) :wrapper-overlay overlay))
props (mf/spread-props props {:class wrapperclass})] props (mf/spread-props props {:class class})]
(assert title (assert title
(dm/str "You must provide an accesible name for the component")) (dm/str "You must provide an accesible name for the component"))
(assert (or both-provided neither-provided)
(dm/str "Invalid props: both 'width' and 'height' must be provided or neither. "
"Received width: " width ", height: " height))
[:> "div" props [:> "div" props
[:> loader-icon* {:title title [:> loader-icon* {:title title
:width width :width w
:class class :height h}]
:height height}]
children])) children]))

View file

@ -14,25 +14,30 @@
} }
} }
.loader-wrapper { .wrapper {
--color-loader-foreground: var(--color-foreground-secondary); --loader-color-foreground: var(--color-foreground-secondary);
color: var(--color-loader-foreground); --loader-icon-width: unset;
display: flex;
display: inline-flex;
column-gap: var(--sp-s); column-gap: var(--sp-s);
align-items: center;
color: var(--loader-color-foreground);
} }
.loader-wrapper-overlay { .wrapper-overlay {
display: grid; display: grid;
place-items: center; place-content: center;
height: 100%; height: 100%;
width: 100%; width: 100%;
row-gap: var(--sp-s);
} }
.loader { .loader {
fill: currentColor; fill: currentColor;
width: var(--icon-width);
} }
.loader-line { .loader-line {
fill: currentColor;
animation: line-pencil 0.8s infinite linear; animation: line-pencil 0.8s infinite linear;
} }

View file

@ -7,28 +7,38 @@ export default {
title: "Product/Loader", title: "Product/Loader",
component: Loader, component: Loader,
args: { args: {
title: "Loading", title: "Loading",
overlay: false, overlay: false,
}, },
parameters: { argTypes: {
controls: { exclude: ["theme", "style", "title", "overlay"] }, width: { control: "number" },
height: { control: "number" },
overlay: { control: "boolean" },
children: { control: "text" },
}, },
render: ({ children, ...args }) => <Loader {...args}>{children}</Loader>, render: ({ ...args }) => <Loader {...args} />,
}; };
export const Default = {}; export const Default = {};
export const WithContent = {
args: {
children: "Lorem ipsum",
},
};
export const Overlay = { export const Overlay = {
args: { args: {
overlay: true, overlay: true,
style: { height: "100vh" }, children: "Lorem ipsum",
},
parameters: {
layout: "fullscreen",
}, },
}; };
export const Inline = { export const Inline = {
args: { args: {
children: "Loading...", children: "Lorem ipsum",
width: "16px",
height: "24px",
}, },
}; };

View file

@ -319,8 +319,7 @@
[:div {:class (stl/css :file-name)} [:div {:class (stl/css :file-name)}
(if (:loading? file) (if (:loading? file)
[:> loader* {:width "16px" [:> loader* {:width 16
:height "24px"
:title (tr "labels.loading")}] :title (tr "labels.loading")}]
[:span {:class (stl/css :file-icon)} [:span {:class (stl/css :file-icon)}
(cond (:export-success? file) i/tick (cond (:export-success? file) i/tick

View file

@ -125,6 +125,7 @@
(mf/defc workspace-loader (mf/defc workspace-loader
[] []
[:> loader* {:title (tr "labels.loading") [:> loader* {:title (tr "labels.loading")
:class (stl/css :workspace-loader)
:overlay true}]) :overlay true}])
(mf/defc workspace-page (mf/defc workspace-page

View file

@ -21,9 +21,7 @@
} }
.workspace-loader { .workspace-loader {
@include flexCenter;
grid-area: viewport; grid-area: viewport;
background-color: var(--loader-background);
} }
.workspace-content { .workspace-content {