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:
parent
af5a189d04
commit
39b2c1722a
12 changed files with 61 additions and 57 deletions
|
@ -3,4 +3,8 @@
|
||||||
body {
|
body {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#storybook-root {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
|
@ -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)
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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?)}
|
||||||
|
|
|
@ -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")]])
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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]))
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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",
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Add table
Reference in a new issue