mirror of
https://github.com/penpot/penpot.git
synced 2025-06-03 20:21:39 +02:00
🎉 Adds tips to the file loading screen (#6063)
* 🎉 Add tips to the default loader component * 📎 Use simplier approach for show tips This commit also fixes other minor issues * 📎 Extract to constants the loader path data * 📎 Use properly tracked translations for loader tips --------- Co-authored-by: Andrey Antukh <niwi@niwi.nz>
This commit is contained in:
elhombretecla
GitHub
parent
fa0da3a695
commit
5ca9b95cca
6 changed files with 259 additions and 26 deletions
|
|
@ -9,13 +9,58 @@
|
|||
[app.common.data.macros :as dm]
|
||||
[app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.math :as mth]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[beicon.v2.core :as rx]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def tips
|
||||
[["loader.tips.01" "title" "message"]
|
||||
["loader.tips.02" "title" "message"]
|
||||
["loader.tips.03" "title" "message"]
|
||||
["loader.tips.04" "title" "message"]
|
||||
["loader.tips.05" "title" "message"]
|
||||
["loader.tips.06" "title" "message"]
|
||||
["loader.tips.07" "title" "message"]
|
||||
["loader.tips.08" "title" "message"]
|
||||
["loader.tips.09" "title" "message"]
|
||||
["loader.tips.10" "title" "message"]])
|
||||
|
||||
|
||||
(defn- get-tips
|
||||
[]
|
||||
[{:title (tr "loader.tips.01.title")
|
||||
:message (tr "loader.tips.01.message")}
|
||||
{:title (tr "loader.tips.02.title")
|
||||
:message (tr "loader.tips.02.message")}
|
||||
{:title (tr "loader.tips.03.title")
|
||||
:message (tr "loader.tips.03.message")}
|
||||
{:title (tr "loader.tips.04.title")
|
||||
:message (tr "loader.tips.04.message")}
|
||||
{:title (tr "loader.tips.05.title")
|
||||
:message (tr "loader.tips.05.message")}
|
||||
{:title (tr "loader.tips.06.title")
|
||||
:message (tr "loader.tips.06.message")}
|
||||
{:title (tr "loader.tips.07.title")
|
||||
:message (tr "loader.tips.07.message")}
|
||||
{:title (tr "loader.tips.08.title")
|
||||
:message (tr "loader.tips.08.message")}
|
||||
{:title (tr "loader.tips.09.title")
|
||||
:message (tr "loader.tips.09.message")}
|
||||
{:title (tr "loader.tips.10.title")
|
||||
:message (tr "loader.tips.10.message")}])
|
||||
|
||||
(def ^:private
|
||||
svg:loader-path-1
|
||||
"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")
|
||||
|
||||
(def ^:private
|
||||
svg:loader-path-2
|
||||
"M134.482 157.147v25l518.57.008.002-25-518.572-.008z")
|
||||
|
||||
(mf/defc loader-icon*
|
||||
{::mf/props :obj
|
||||
::mf/private true}
|
||||
{::mf/private true}
|
||||
[{:keys [width height title] :rest props}]
|
||||
(let [class (stl/css :loader)
|
||||
props (mf/spread-props props {:viewBox "0 0 677.34762 182.15429"
|
||||
|
|
@ -23,14 +68,12 @@
|
|||
:width width
|
||||
:height height
|
||||
:class class})]
|
||||
[:> "svg" props
|
||||
[:> :svg props
|
||||
[:title title]
|
||||
[:g
|
||||
[:path {: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 {:d svg:loader-path-1}]
|
||||
[:path {:class (stl/css :loader-line)
|
||||
:d
|
||||
"M134.482 157.147v25l518.57.008.002-25-518.572-.008z"}]]]))
|
||||
:d svg:loader-path-2}]]]))
|
||||
|
||||
(def ^:private schema:loader
|
||||
[:map
|
||||
|
|
@ -38,22 +81,42 @@
|
|||
[:width {:optional true} :int]
|
||||
[:height {:optional true} :int]
|
||||
[:title {:optional true} :string]
|
||||
[:overlay {:optional true} :boolean]])
|
||||
[:overlay {:optional true} :boolean]
|
||||
[:file-loading {:optional true} :boolean]])
|
||||
|
||||
(mf/defc loader*
|
||||
{::mf/props :obj
|
||||
::mf/schema schema:loader}
|
||||
[{:keys [class width height title overlay children] :rest props}]
|
||||
{::mf/schema schema:loader}
|
||||
[{:keys [class width height title overlay children file-loading] :rest props}]
|
||||
(let [width (or width (when (some? height) (mth/ceil (* height (/ 100 27)))) 100)
|
||||
height (or height (when (some? width) (mth/ceil (* width (/ 27 100)))) 27)
|
||||
|
||||
(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))
|
||||
title (or title (tr "labels.loading"))
|
||||
props (mf/spread-props props {:class class})]
|
||||
class (dm/str (d/nilv class "") " "
|
||||
(stl/css-case :wrapper true
|
||||
:wrapper-overlay overlay
|
||||
:file-loading file-loading))
|
||||
|
||||
[:> "div" props
|
||||
[:> loader-icon* {:title title
|
||||
:width w
|
||||
:height h}]
|
||||
children]))
|
||||
title (or title (tr "labels.loading"))
|
||||
tips (mf/use-memo get-tips)
|
||||
|
||||
tip* (mf/use-state nil)
|
||||
tip (deref tip*)]
|
||||
|
||||
(mf/with-effect [file-loading tips]
|
||||
(when file-loading
|
||||
(let [sub (->> (rx/timer 1000 4000)
|
||||
(rx/subs! #(reset! tip* (rand-nth tips))))]
|
||||
(partial rx/dispose! sub))))
|
||||
|
||||
[:> :div {:class class}
|
||||
[:div {:class (stl/css :loader-content)}
|
||||
[:> loader-icon* {:title title
|
||||
:width width
|
||||
:height height}]
|
||||
(when (and file-loading tip)
|
||||
[:div {:class (stl/css :tips-container)}
|
||||
[:div {:class (stl/css :tip-title)}
|
||||
(get tip :title)]
|
||||
[:div {:class (stl/css :tip-message)}
|
||||
(get tip :message)]])]
|
||||
|
||||
children]))
|
||||
|
|
|
|||
|
|
@ -21,8 +21,50 @@
|
|||
display: inline-flex;
|
||||
column-gap: var(--sp-s);
|
||||
align-items: center;
|
||||
|
||||
color: var(--loader-color-foreground);
|
||||
|
||||
// Specific styles for file loading screen
|
||||
&.file-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: var(--sp-xxl);
|
||||
|
||||
// Container for loader icon and tips
|
||||
.loader-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--sp-xl);
|
||||
}
|
||||
|
||||
// Tips container
|
||||
.tips-container {
|
||||
text-align: center;
|
||||
min-width: var(--sp-600);
|
||||
max-width: var(--sp-800);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-s);
|
||||
border: 1px solid var(--color-background-tertiary);
|
||||
border-radius: var(--sp-l);
|
||||
padding: var(--sp-xxl) var(--sp-xxxl);
|
||||
|
||||
// Tips title
|
||||
.tip-title {
|
||||
color: var(--color-foreground-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// Tips message
|
||||
.tip-message {
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-overlay {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ $_sp-16: px2rem(16);
|
|||
$_sp-20: px2rem(20);
|
||||
$_sp-24: px2rem(24);
|
||||
$_sp-32: px2rem(32);
|
||||
$_sp-600: px2rem(600);
|
||||
$_sp-800: px2rem(800);
|
||||
|
||||
:global(:root) {
|
||||
--sp-xxs: #{$_sp-2};
|
||||
|
|
@ -24,4 +26,6 @@ $_sp-32: px2rem(32);
|
|||
--sp-xl: #{$_sp-20};
|
||||
--sp-xxl: #{$_sp-24};
|
||||
--sp-xxxl: #{$_sp-32};
|
||||
--sp-600: #{$_sp-600};
|
||||
--sp-800: #{$_sp-800};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,7 +117,8 @@
|
|||
[]
|
||||
[:> loader* {:title (tr "labels.loading")
|
||||
:class (stl/css :workspace-loader)
|
||||
:overlay true}])
|
||||
:overlay true
|
||||
:file-loading true}])
|
||||
|
||||
(mf/defc workspace-page*
|
||||
{::mf/private true}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue