mirror of
https://github.com/penpot/penpot.git
synced 2025-03-10 14:51:37 -05:00
♻️ Replacing the old Pencil loader with the new Loader component
This commit is contained in:
parent
e5daa00d73
commit
af5a189d04
26 changed files with 148 additions and 193 deletions
|
@ -659,22 +659,6 @@
|
|||
color: var(--modal-button-foreground-color-error);
|
||||
}
|
||||
|
||||
.loader-base {
|
||||
@include flexCenter;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
z-index: $z-index-alert;
|
||||
background-color: var(--loader-background);
|
||||
:global(svg#loader-pencil) {
|
||||
height: $s-100;
|
||||
width: $s-100;
|
||||
animation: loaderColor 5s infinite ease;
|
||||
fill: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
// UI ELEMENTS
|
||||
.asset-element {
|
||||
@include bodySmallTypography;
|
||||
|
|
|
@ -29,11 +29,3 @@
|
|||
// TODO: remove this stylesheet once the new text editor is in place
|
||||
// https: //tree.taiga.io/project/penpot/us/8165
|
||||
@import "main/partials/texts";
|
||||
|
||||
//#################################################
|
||||
// Partials
|
||||
//#################################################
|
||||
|
||||
// TODO: encapsulate pencil loader into its own component
|
||||
// https: //tree.taiga.io/project/penpot/task/8217
|
||||
@import "main/partials/loader";
|
||||
|
|
|
@ -1,9 +0,0 @@
|
|||
// btn pencil loader
|
||||
svg#loader-pencil {
|
||||
fill: var(--color-accent-tertiary);
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
#loader-line {
|
||||
animation: linePencil 0.8s infinite linear;
|
||||
}
|
|
@ -5,13 +5,12 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.auth.verify-token
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.main.data.messages :as msg]
|
||||
[app.main.data.users :as du]
|
||||
[app.main.repo :as rp]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.ds.product.loader :refer [loader*]]
|
||||
[app.main.ui.static :as static]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
|
@ -95,5 +94,5 @@
|
|||
|
||||
(if @bad-token
|
||||
[:> static/invalid-token {}]
|
||||
[:div {:class (stl/css :verify-token)}
|
||||
i/loader-pencil])))
|
||||
[:> loader* {:title (tr "labels.loading")
|
||||
:overlay true}])))
|
||||
|
|
|
@ -1,11 +0,0 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "./common.scss";
|
||||
|
||||
.verify-token {
|
||||
@extend .loader-base;
|
||||
}
|
|
@ -13,11 +13,6 @@
|
|||
grid-template-columns: $s-40 $s-256 1fr;
|
||||
grid-template-rows: $s-52 1fr;
|
||||
height: 100vh;
|
||||
|
||||
:global(svg#loader-pencil) {
|
||||
fill: $df-secondary;
|
||||
width: $s-32;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
|
|
|
@ -25,6 +25,7 @@
|
|||
[app.main.ui.dashboard.import :refer [use-import-file]]
|
||||
[app.main.ui.dashboard.inline-edition :refer [inline-edition]]
|
||||
[app.main.ui.dashboard.placeholder :refer [empty-placeholder loading-placeholder]]
|
||||
[app.main.ui.ds.product.loader :refer [loader*]]
|
||||
[app.main.ui.hooks :as h]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.worker :as wrk]
|
||||
|
@ -95,7 +96,8 @@
|
|||
:src thumbnail-uri
|
||||
:loading "lazy"
|
||||
:decoding "async"}]
|
||||
i/loader-pencil))]))
|
||||
[:> loader* {:class (stl/css :grid-loader)
|
||||
:title (tr "labels.loading")}]))]))
|
||||
|
||||
;; --- Grid Item Library
|
||||
|
||||
|
@ -113,7 +115,8 @@
|
|||
|
||||
[:div {:class (stl/css :grid-item-th :library)}
|
||||
(if (nil? file)
|
||||
i/loader-pencil
|
||||
[:> loader* {:class (stl/css :grid-loader)
|
||||
:title (tr "labels.loading")}]
|
||||
(let [summary (:library-summary file)
|
||||
components (:components summary)
|
||||
colors (:colors summary)
|
||||
|
@ -458,7 +461,6 @@
|
|||
:on-drag-leave on-drag-leave
|
||||
:on-drop on-drop
|
||||
:ref node-ref}
|
||||
|
||||
(cond
|
||||
(nil? files)
|
||||
[:& loading-placeholder]
|
||||
|
|
|
@ -278,16 +278,6 @@ $thumbnail-default-height: $s-168; // Default width
|
|||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(svg#loader-pencil) {
|
||||
stroke: $db-quaternary;
|
||||
width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
// LIBRARY VIEW
|
||||
|
@ -381,3 +371,9 @@ $thumbnail-default-height: $s-168; // Default width
|
|||
grid-template-columns: auto 1fr;
|
||||
gap: $s-8;
|
||||
}
|
||||
|
||||
.grid-loader {
|
||||
width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25);
|
||||
height: 100%;
|
||||
align-self: center;
|
||||
}
|
||||
|
|
|
@ -18,6 +18,7 @@
|
|||
[app.main.features :as features]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.file-uploader :refer [file-uploader]]
|
||||
[app.main.ui.ds.product.loader :refer [loader*]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.notifications.context-notification :refer [context-notification]]
|
||||
[app.main.worker :as uw]
|
||||
|
@ -266,14 +267,18 @@
|
|||
:editable (and ready? (not editing?)))}
|
||||
|
||||
[:div {:class (stl/css :file-name)}
|
||||
[:div {:class (stl/css-case :file-icon true
|
||||
:icon-fill ready?)}
|
||||
(cond loading? i/loader-pencil
|
||||
ready? i/logo-icon
|
||||
import-warn? i/msg-warning
|
||||
import-error? i/close
|
||||
import-finish? i/tick
|
||||
analyze-error? i/close)]
|
||||
(if loading?
|
||||
[:> loader* {:width "16px"
|
||||
:height "24px"
|
||||
:title (tr "labels.loading")}]
|
||||
[:div {:class (stl/css-case :file-icon true
|
||||
:icon-fill ready?)}
|
||||
(cond ready? i/logo-icon
|
||||
import-warn? i/msg-warning
|
||||
import-error? i/close
|
||||
import-finish? i/tick
|
||||
analyze-error? i/close)])
|
||||
|
||||
|
||||
(if editing?
|
||||
[:div {:class (stl/css :file-name-edit)}
|
||||
|
|
|
@ -143,13 +143,6 @@
|
|||
&.loading {
|
||||
.file-name {
|
||||
color: var(--modal-text-foreground-color);
|
||||
.file-icon {
|
||||
:global(#loader-pencil) {
|
||||
color: var(--modal-text-foreground-color);
|
||||
stroke: var(--modal-text-foreground-color);
|
||||
fill: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
(ns app.main.ui.dashboard.placeholder
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.main.ui.ds.product.loader :refer [loader*]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[rumext.v2 :as mf]))
|
||||
|
@ -40,6 +41,9 @@
|
|||
|
||||
(mf/defc loading-placeholder
|
||||
[]
|
||||
[:div {:class (stl/css :grid-empty-placeholder :loader)}
|
||||
[:div {:class (stl/css :icon)} i/loader-pencil]
|
||||
[:div {:class (stl/css :text)} (tr "dashboard.loading-files")]])
|
||||
[:> loader* {:width "64px"
|
||||
:height "64px"
|
||||
:title (tr "labels.loading")
|
||||
:overlay true
|
||||
:class (stl/css :placeholder-loader)}
|
||||
[:div {:class (stl/css :placeholder-text)} (tr "dashboard.loading-files")]])
|
||||
|
|
|
@ -12,21 +12,6 @@
|
|||
display: grid;
|
||||
padding: $s-12 0;
|
||||
|
||||
&.loader {
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
svg {
|
||||
width: $s-64;
|
||||
height: $s-64;
|
||||
fill: $df-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
&.libs {
|
||||
background-image: url(/images/ph-left.svg), url(/images/ph-right.svg);
|
||||
background-position:
|
||||
|
@ -90,3 +75,23 @@
|
|||
font-size: $fs-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;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
margin-top: $s-12;
|
||||
color: $df-secondary;
|
||||
font-size: $fs-16;
|
||||
align-self: start;
|
||||
}
|
||||
|
|
|
@ -11,23 +11,18 @@
|
|||
(:require
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc loader*
|
||||
{::mf/props :obj}
|
||||
(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))
|
||||
both-provided (and width height)
|
||||
neither-provided (and (nil? width) (nil? height))
|
||||
|
||||
props (mf/spread-props props {:viewBox "0 0 677.34762 182.15429"
|
||||
:role "status"
|
||||
:width (or width "100px")
|
||||
:height (or height "27px")
|
||||
:class class})]
|
||||
(assert (or both-provided neither-provided)
|
||||
(dm/str "Invalid props: both 'width' and 'height' must be provided or neither. "
|
||||
"Received width: " width ", height: " height))
|
||||
;; TODO: Add a translated label insted of the title prop.
|
||||
(assert title
|
||||
(dm/str "You must provide an accesible name for the component"))
|
||||
|
||||
[:> "svg" props
|
||||
[:title title]
|
||||
[:g
|
||||
|
@ -36,3 +31,26 @@
|
|||
[:path {:class (stl/css :loader-line)
|
||||
:d
|
||||
"M134.482 157.147v25l518.57.008.002-25-518.572-.008z"}]]]))
|
||||
|
||||
(mf/defc loader*
|
||||
{::mf/props :obj}
|
||||
[{:keys [class wrapperclass 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})]
|
||||
|
||||
(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}]
|
||||
children]))
|
|
@ -14,12 +14,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
.loader-wrapper {
|
||||
--color-loader-foreground: var(--color-foreground-secondary);
|
||||
fill: var(--color-loader-foreground);
|
||||
color: var(--color-loader-foreground);
|
||||
display: flex;
|
||||
column-gap: var(--sp-s);
|
||||
}
|
||||
|
||||
.loader-wrapper-overlay {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loader {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.loader-line {
|
||||
fill: var(--color-loader-foreground);
|
||||
fill: currentColor;
|
||||
animation: line-pencil 0.8s infinite linear;
|
||||
}
|
||||
|
|
|
@ -5,9 +5,30 @@ const { Loader } = Components;
|
|||
|
||||
export default {
|
||||
title: "Product/Loader",
|
||||
component: Components.Loader,
|
||||
component: Loader,
|
||||
args: {
|
||||
title: "Loading",
|
||||
overlay: false,
|
||||
},
|
||||
parameters: {
|
||||
controls: { exclude: ["theme", "style", "title", "overlay"] },
|
||||
},
|
||||
render: ({ children, ...args }) => <Loader {...args}>{children}</Loader>,
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
render: () => <Loader title="Loading" />,
|
||||
export const Default = {};
|
||||
|
||||
export const Overlay = {
|
||||
args: {
|
||||
overlay: true,
|
||||
style: { height: "100vh" },
|
||||
},
|
||||
};
|
||||
|
||||
export const Inline = {
|
||||
args: {
|
||||
children: "Loading...",
|
||||
width: "16px",
|
||||
height: "24px",
|
||||
},
|
||||
};
|
||||
|
|
|
@ -15,6 +15,7 @@
|
|||
[app.main.data.modal :as modal]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.ds.product.loader :refer [loader*]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.shapes :refer [shape-wrapper]]
|
||||
[app.main.worker :as uw]
|
||||
|
@ -317,10 +318,13 @@
|
|||
:error (:export-error? file))}
|
||||
|
||||
[:div {:class (stl/css :file-name)}
|
||||
[:span {:class (stl/css :file-icon)}
|
||||
(cond (:export-success? file) i/tick
|
||||
(:export-error? file) i/close
|
||||
(:loading? file) i/loader-pencil)]
|
||||
(if (:loading? file)
|
||||
[:> loader* {:width "16px"
|
||||
:height "24px"
|
||||
:title (tr "labels.loading")}]
|
||||
[:span {:class (stl/css :file-icon)}
|
||||
(cond (:export-success? file) i/tick
|
||||
(:export-error? file) i/close)])
|
||||
|
||||
[:div {:class (stl/css :file-name-label)}
|
||||
(:name file)]]])
|
||||
|
|
|
@ -309,11 +309,6 @@
|
|||
&.loading {
|
||||
.file-name {
|
||||
color: var(--modal-text-foreground-color);
|
||||
.file-icon svg:global(#loader-pencil) {
|
||||
color: var(--modal-text-foreground-color);
|
||||
stroke: var(--modal-text-foreground-color);
|
||||
fill: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.error {
|
||||
|
|
|
@ -9,8 +9,7 @@
|
|||
(:require-macros [app.main.ui.icons :refer [icon-xref collect-icons]])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
[cuerdas.core :as str]))
|
||||
|
||||
;; Keep the list of icons sorted
|
||||
(def ^:icon icon-verify (icon-xref :icon-verify))
|
||||
|
@ -263,23 +262,6 @@
|
|||
(def ^:icon view-as-list (icon-xref :view-as-list))
|
||||
(def ^:icon wrap (icon-xref :wrap))
|
||||
|
||||
(def ^:icon loader-pencil
|
||||
(mf/html
|
||||
[:svg
|
||||
{:viewBox "0 0 677.34762 182.15429"
|
||||
:height "182"
|
||||
:width "667"
|
||||
:id "loader-pencil"}
|
||||
[:g
|
||||
[:path
|
||||
{:id "body-body"
|
||||
:d
|
||||
"M128.273 0l-3.9 2.77L0 91.078l128.273 91.076 549.075-.006V.008L128.273 0zm20.852 30l498.223.006V152.15l-498.223.007V30zm-25 9.74v102.678l-49.033-34.813-.578-32.64 49.61-35.225z"}]
|
||||
[:path
|
||||
{:id "loader-line"
|
||||
:d
|
||||
"M134.482 157.147v25l518.57.008.002-25-518.572-.008z"}]]]))
|
||||
|
||||
(def default
|
||||
"A collection of all icons"
|
||||
(collect-icons))
|
||||
|
|
|
@ -1,20 +0,0 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.loader
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.icons :as i]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
;; --- Component
|
||||
|
||||
(mf/defc loader
|
||||
[]
|
||||
(when (mf/deref st/loader)
|
||||
[:div {:class (stl/css :loader-content)}
|
||||
i/loader-pencil]))
|
|
@ -1,11 +0,0 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.loader-content {
|
||||
@extend .loader-base;
|
||||
}
|
|
@ -22,6 +22,7 @@
|
|||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.ds.product.loader :refer [loader*]]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.viewer.comments :refer [comments-layer comments-sidebar]]
|
||||
|
@ -628,11 +629,10 @@
|
|||
(st/emit! (dv/initialize params))
|
||||
(fn []
|
||||
(st/emit! (dv/finalize params)))))
|
||||
|
||||
(if-let [data (mf/deref refs/viewer-data)]
|
||||
(let [props (obj/merge props #js {:data data :key (dm/str file-id)})]
|
||||
[:> viewer-content props])
|
||||
|
||||
[:div {:class (stl/css :loader-content)}
|
||||
i/loader-pencil]))
|
||||
[:> loader* {:title (tr "labels.loading")
|
||||
:overlay true}]))
|
||||
|
||||
|
|
|
@ -189,10 +189,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.loader-content {
|
||||
@extend .loader-base;
|
||||
}
|
||||
|
||||
/** FULLSCREEN */
|
||||
[data-fullscreen="true"] .viewer-bottom {
|
||||
transform: translateY($s-40);
|
||||
|
|
|
@ -17,9 +17,9 @@
|
|||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.ds.product.loader :refer [loader*]]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.hooks.resize :refer [use-resize-observer]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.colorpicker]
|
||||
[app.main.ui.workspace.context-menu :refer [context-menu]]
|
||||
[app.main.ui.workspace.coordinates :as coordinates]
|
||||
|
@ -124,8 +124,8 @@
|
|||
|
||||
(mf/defc workspace-loader
|
||||
[]
|
||||
[:div {:class (stl/css :workspace-loader)}
|
||||
i/loader-pencil])
|
||||
[:> loader* {:title (tr "labels.loading")
|
||||
:overlay true}])
|
||||
|
||||
(mf/defc workspace-page
|
||||
{::mf/wrap-props false}
|
||||
|
@ -147,7 +147,6 @@
|
|||
(fn []
|
||||
(when (some? page-id)
|
||||
(st/emit! (dw/finalize-page page-id)))))
|
||||
|
||||
(if ^boolean page-ready?
|
||||
[:& workspace-content {:page-id page-id
|
||||
:file file
|
||||
|
|
|
@ -18,15 +18,12 @@
|
|||
grid-template-rows: 1fr;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workspace-loader {
|
||||
@include flexCenter;
|
||||
grid-area: viewport;
|
||||
background-color: var(--loader-background);
|
||||
:global(svg#loader-pencil) {
|
||||
fill: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
.workspace-loader {
|
||||
@include flexCenter;
|
||||
grid-area: viewport;
|
||||
background-color: var(--loader-background);
|
||||
}
|
||||
|
||||
.workspace-content {
|
||||
|
|
|
@ -1713,6 +1713,9 @@ msgstr "Upload custom fonts"
|
|||
msgid "labels.uploading"
|
||||
msgstr "Uploading…"
|
||||
|
||||
msgid "labels.loading"
|
||||
msgstr "Loading…"
|
||||
|
||||
msgid "labels.view-only"
|
||||
msgstr "View only"
|
||||
|
||||
|
|
|
@ -1770,6 +1770,9 @@ msgstr "Cargar fuente"
|
|||
msgid "labels.uploading"
|
||||
msgstr "Subiendo…"
|
||||
|
||||
msgid "labels.loading"
|
||||
msgstr "Cargando…"
|
||||
|
||||
msgid "labels.view-only"
|
||||
msgstr "Solo lectura"
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue