mirror of
https://github.com/penpot/penpot.git
synced 2025-02-22 14:57:01 -05:00
♻️ Refactor loader* component props & usage
This commit is contained in:
Belén Albeza
parent
af5a189d04
commit
39b2c1722a
12 changed files with 61 additions and 57 deletions
|
|
@ -3,4 +3,8 @@
|
|||
body {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#storybook-root {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -97,6 +97,7 @@
|
|||
:loading "lazy"
|
||||
:decoding "async"}]
|
||||
[:> loader* {:class (stl/css :grid-loader)
|
||||
:overlay true
|
||||
:title (tr "labels.loading")}]))]))
|
||||
|
||||
;; --- Grid Item Library
|
||||
|
|
@ -116,6 +117,7 @@
|
|||
[:div {:class (stl/css :grid-item-th :library)}
|
||||
(if (nil? file)
|
||||
[:> loader* {:class (stl/css :grid-loader)
|
||||
:overlay true
|
||||
:title (tr "labels.loading")}]
|
||||
(let [summary (:library-summary file)
|
||||
components (:components summary)
|
||||
|
|
|
|||
|
|
@ -373,7 +373,5 @@ $thumbnail-default-height: $s-168; // Default width
|
|||
}
|
||||
|
||||
.grid-loader {
|
||||
width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25);
|
||||
height: 100%;
|
||||
align-self: center;
|
||||
--icon-width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -268,8 +268,7 @@
|
|||
|
||||
[:div {:class (stl/css :file-name)}
|
||||
(if loading?
|
||||
[:> loader* {:width "16px"
|
||||
:height "24px"
|
||||
[:> loader* {:width 16
|
||||
:title (tr "labels.loading")}]
|
||||
[:div {:class (stl/css-case :file-icon true
|
||||
:icon-fill ready?)}
|
||||
|
|
|
|||
|
|
@ -41,9 +41,7 @@
|
|||
|
||||
(mf/defc loading-placeholder
|
||||
[]
|
||||
[:> loader* {:width "64px"
|
||||
:height "64px"
|
||||
[:> loader* {:width 32
|
||||
:title (tr "labels.loading")
|
||||
:overlay true
|
||||
: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")]])
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
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 {
|
||||
margin-top: $s-12;
|
||||
color: $df-secondary;
|
||||
font-size: $fs-16;
|
||||
align-self: start;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,18 +9,18 @@
|
|||
[app.common.data.macros :as dm]
|
||||
[app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.math :as mth]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc loader-icon*
|
||||
{::mf/props :obj
|
||||
::mf/private true}
|
||||
[{:keys [class width height title] :rest props}]
|
||||
(let [class (dm/str (or class "") " " (stl/css :loader))
|
||||
|
||||
[{:keys [width height title] :rest props}]
|
||||
(let [class (stl/css :loader)
|
||||
props (mf/spread-props props {:viewBox "0 0 677.34762 182.15429"
|
||||
:role "status"
|
||||
:width (or width "100px")
|
||||
:height (or height "27px")
|
||||
:width width
|
||||
:height height
|
||||
:class class})]
|
||||
|
||||
[:> "svg" props
|
||||
|
|
@ -34,23 +34,19 @@
|
|||
|
||||
(mf/defc loader*
|
||||
{::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)
|
||||
neither-provided (and (nil? width) (nil? height))
|
||||
wrapperclass (dm/str (or wrapperclass "") " " (stl/css-case :loader-wrapper true
|
||||
:loader-wrapper-overlay overlay))
|
||||
props (mf/spread-props props {:class wrapperclass})]
|
||||
(let [w (or width (when (some? height) (mth/ceil (* height (/ 100 27)))) 100)
|
||||
h (or height (when (some? width) (mth/ceil (* width (/ 27 100)))) 27)
|
||||
class (dm/str (or class "") " " (stl/css-case :wrapper true
|
||||
:wrapper-overlay overlay))
|
||||
props (mf/spread-props props {:class class})]
|
||||
|
||||
(assert title
|
||||
(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
|
||||
[:> loader-icon* {:title title
|
||||
:width width
|
||||
:class class
|
||||
:height height}]
|
||||
:width w
|
||||
:height h}]
|
||||
children]))
|
||||
|
|
@ -14,25 +14,30 @@
|
|||
}
|
||||
}
|
||||
|
||||
.loader-wrapper {
|
||||
--color-loader-foreground: var(--color-foreground-secondary);
|
||||
color: var(--color-loader-foreground);
|
||||
display: flex;
|
||||
.wrapper {
|
||||
--loader-color-foreground: var(--color-foreground-secondary);
|
||||
--loader-icon-width: unset;
|
||||
|
||||
display: inline-flex;
|
||||
column-gap: var(--sp-s);
|
||||
align-items: center;
|
||||
|
||||
color: var(--loader-color-foreground);
|
||||
}
|
||||
|
||||
.loader-wrapper-overlay {
|
||||
.wrapper-overlay {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
row-gap: var(--sp-s);
|
||||
}
|
||||
|
||||
.loader {
|
||||
fill: currentColor;
|
||||
width: var(--icon-width);
|
||||
}
|
||||
|
||||
.loader-line {
|
||||
fill: currentColor;
|
||||
animation: line-pencil 0.8s infinite linear;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,28 +7,38 @@ export default {
|
|||
title: "Product/Loader",
|
||||
component: Loader,
|
||||
args: {
|
||||
title: "Loading",
|
||||
title: "Loading…",
|
||||
overlay: false,
|
||||
},
|
||||
parameters: {
|
||||
controls: { exclude: ["theme", "style", "title", "overlay"] },
|
||||
argTypes: {
|
||||
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 WithContent = {
|
||||
args: {
|
||||
children: "Lorem ipsum",
|
||||
},
|
||||
};
|
||||
|
||||
export const Overlay = {
|
||||
args: {
|
||||
overlay: true,
|
||||
style: { height: "100vh" },
|
||||
children: "Lorem ipsum",
|
||||
},
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
},
|
||||
};
|
||||
|
||||
export const Inline = {
|
||||
args: {
|
||||
children: "Loading...",
|
||||
width: "16px",
|
||||
height: "24px",
|
||||
children: "Lorem ipsum",
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -319,8 +319,7 @@
|
|||
|
||||
[:div {:class (stl/css :file-name)}
|
||||
(if (:loading? file)
|
||||
[:> loader* {:width "16px"
|
||||
:height "24px"
|
||||
[:> loader* {:width 16
|
||||
:title (tr "labels.loading")}]
|
||||
[:span {:class (stl/css :file-icon)}
|
||||
(cond (:export-success? file) i/tick
|
||||
|
|
|
|||
|
|
@ -125,6 +125,7 @@
|
|||
(mf/defc workspace-loader
|
||||
[]
|
||||
[:> loader* {:title (tr "labels.loading")
|
||||
:class (stl/css :workspace-loader)
|
||||
:overlay true}])
|
||||
|
||||
(mf/defc workspace-page
|
||||
|
|
|
|||
|
|
@ -21,9 +21,7 @@
|
|||
}
|
||||
|
||||
.workspace-loader {
|
||||
@include flexCenter;
|
||||
grid-area: viewport;
|
||||
background-color: var(--loader-background);
|
||||
}
|
||||
|
||||
.workspace-content {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue