0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-11 07:11:32 -05:00

💄 Add final design to alert messages

This commit is contained in:
Eva Marco 2024-02-27 11:59:07 +01:00 committed by Andrey Antukh
parent 233e7e7e87
commit 697a542754
17 changed files with 221 additions and 183 deletions

View file

@ -13,25 +13,22 @@
[cuerdas.core :as str]))
(def black "#000000")
(def canvas "#E8E9EA")
(def default-layout "#DE4762")
(def gray-10 "#E3E3E3")
(def gray-20 "#B1B2B5")
(def gray-30 "#7B7D85")
(def gray-40 "#64666A")
(def gray-50 "#303236")
(def info "#59B9E2")
(def test "#fabada")
(def white "#FFFFFF")
(def primary "#31EFB8")
(def danger "#E65244")
(def warning "#FC8802")
;; new-css-system colors
(def new-primary "#91fadb")
(def new-danger "#ff4986")
(def new-warning "#ff9b49")
(def canvas-background "#1d1f20")
(def new-primary "#7efff5")
(def new-danger "#ff3277")
(def new-warning "#fe4811")
(def new-primary-light "#6911d4")
(def background-quaternary "#2e3434")
(def background-quaternary-light "#eef0f2")
(def canvas "#E8E9EA")
(def names
{"aliceblue" "#f0f8ff"

View file

@ -25,6 +25,15 @@
[cuerdas.core :as str]
[rumext.v2 :as mf]))
(def ^:private neutral-icon
(i/icon-xref :msg-neutral-refactor (stl/css :icon)))
(def ^:private error-icon
(i/icon-xref :delete-text-refactor (stl/css :icon)))
(def ^:private close-icon
(i/icon-xref :close-refactor (stl/css :close-icon)))
(mf/defc export-multiple-dialog
[{:keys [exports title cmd no-selection]}]
(let [lstate (mf/deref refs/export)
@ -198,25 +207,34 @@
(mf/defc export-progress-widget
{::mf/wrap [mf/memo]}
[]
(let [state (mf/deref refs/export)
error? (:error state)
healthy? (:healthy? state)
detail-visible? (:detail-visible state)
widget-visible? (:widget-visible state)
progress (:progress state)
exports (:exports state)
total (count exports)
complete? (= progress total)
circ (* 2 Math/PI 12)
pct (- circ (* circ (/ progress total)))
(let [state (mf/deref refs/export)
profile (mf/deref refs/profile)
theme (or (:theme profile) "default")
is-default-theme? (= "default" theme)
error? (:error state)
healthy? (:healthy? state)
detail-visible? (:detail-visible state)
widget-visible? (:widget-visible state)
progress (:progress state)
exports (:exports state)
total (count exports)
complete? (= progress total)
circ (* 2 Math/PI 12)
pct (- circ (* circ (/ progress total)))
pwidth (if error?
280
(/ (* progress 280) total))
color (cond
error? clr/new-danger
healthy? clr/new-primary
healthy? (if is-default-theme?
clr/new-primary
clr/new-primary-light)
(not healthy?) clr/new-warning)
background-clr (if is-default-theme?
clr/background-quaternary
clr/background-quaternary-light)
title (cond
error? (tr "workspace.options.exporting-object-error")
complete? (tr "workspace.options.exporting-complete")
@ -233,57 +251,60 @@
(when widget-visible?
[:div {:class (stl/css :export-progress-widget)
:on-click toggle-detail-visibility}
[:svg {:width "32" :height "32"}
[:circle {:r "12"
:cx "16"
:cy "16"
[:svg {:width "24" :height "24"}
[:circle {:r "10"
:cx "12"
:cy "12"
:fill "transparent"
:stroke clr/gray-40
:stroke background-clr
:stroke-width "4"}]
[:circle {:r "12"
:cx "16"
:cy "16"
[:circle {:r "10"
:cx "12"
:cy "12"
:fill "transparent"
:stroke color
:stroke-width "4"
:stroke-dasharray (dm/str circ " " circ)
:stroke-dashoffset pct
:transform "rotate(-90 16,16)"
:transform "rotate(-90 12,12)"
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]])
(when detail-visible?
[:div {:class (stl/css :export-progress-modal-overlay)}
[:div {:class (stl/css :export-progress-modal-container)}
[:div {:class (stl/css :export-progress-modal-header)}
[:p {:class (stl/css :export-progress-modal-title)}
[:span {:class (stl/css :title-text)}
title]
(if error?
[:button {:class (stl/css :retry-btn)
:on-click retry-last-export}
(tr "workspace.options.retry")]
[:div {:class (stl/css-case :export-progress-modal true
:has-error error?)}
(if error?
error-icon
neutral-icon)
[:p {:class (stl/css :progress)}
(dm/str progress " / " total)])]
[:p {:class (stl/css :export-progress-title)}
title
(if error?
[:button {:class (stl/css :retry-btn)
:on-click retry-last-export}
(tr "workspace.options.retry")]
[:button {:class (stl/css :modal-close-button)
:on-click toggle-detail-visibility}
i/close-refactor]]
[:p {:class (stl/css :progress)}
(dm/str progress " / " total)])]
[:svg {:class (stl/css :progress-bar)
:height 5
:width 280}
[:g
[:path {:d "M0 0 L280 0"
:stroke clr/black
:stroke-width 30}]
[:path {:d (dm/str "M0 0 L280 0")
:stroke color
:stroke-width 30
:fill "transparent"
:stroke-dasharray 280
:stroke-dashoffset (- 280 pwidth)
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]]])]))
[:button {:class (stl/css :progress-close-button)
:on-click toggle-detail-visibility}
close-icon]
(when-not error?
[:svg {:class (stl/css :progress-bar)
:height 4
:width 280}
[:g
[:path {:d "M0 0 L280 0"
:stroke background-clr
:stroke-width 30}]
[:path {:d (dm/str "M0 0 L280 0")
:stroke color
:stroke-width 30
:fill "transparent"
:stroke-dasharray 280
:stroke-dashoffset (- 280 pwidth)
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]])])]))
(def ^:const options [:all :merge :detach])

View file

@ -6,69 +6,101 @@
@import "refactor/common-refactor.scss";
.export-progress-modal-overlay {
display: flex;
justify-content: center;
position: fixed;
// PROGRESS WIDGET
.export-progress-widget {
@include flexCenter;
width: $s-28;
height: $s-28;
}
// PROGRESS MODAL
.export-progress-modal {
--export-modal-bg-color: var(--alert-background-color-default);
--export-modal-fg-color: var(--alert-text-foreground-color-default);
--export-modal-icon-color: var(--alert-icon-foreground-color-default);
--export-modal-border-color: var(--alert-border-color-default);
position: absolute;
right: $s-16;
top: $s-48;
background-color: var(--modal-background-color);
display: grid;
grid-template-columns: $s-24 1fr $s-24;
grid-template-areas:
"icon text close"
"bar bar bar";
gap: $s-4 $s-8;
padding-block-start: $s-8;
background-color: var(--export-modal-bg-color);
border: $s-1 solid var(--export-modal-border-color);
border-radius: $br-8;
z-index: $z-index-20;
z-index: $z-index-modal;
overflow: hidden;
}
.export-progress-modal-container {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
width: 100%;
}
.export-progress-modal-header {
display: flex;
align-items: center;
justify-content: stretch;
padding: $s-8;
.has-error {
--export-modal-bg-color: var(--alert-background-color-error);
--export-modal-fg-color: var(--alert-text-foreground-color-error);
--export-modal-icon-color: var(--alert-icon-foreground-color-error);
--export-modal-border-color: var(--alert-border-color-error);
grid-template-areas: "icon text close";
gap: $s-8;
padding-block: $s-8;
}
.export-progress-modal-title {
display: flex;
flex-grow: 1;
padding: 0;
margin: 0;
.icon {
@extend .button-icon;
grid-area: icon;
align-self: center;
margin-inline-start: $s-8;
stroke: var(--export-modal-icon-color);
}
.title-text {
@include flexCenter;
@include bodyLargeTypography;
.export-progress-title {
@include bodyMedTipography;
display: grid;
grid-template-columns: auto 1fr;
gap: $s-8;
grid-area: text;
align-self: center;
padding: 0;
margin: 0;
color: var(--modal-title-foreground-color);
padding-left: $s-4;
color: var(--export-modal-fg-color);
}
.progress {
@include bodyLargeTypography;
@include bodyMedTipography;
padding-left: $s-8;
margin: 0;
align-self: center;
color: var(--modal-text-foreground-color);
}
.retry-btn {
@extend .button-tertiary;
@include buttonStyle;
@include bodyMedTipography;
display: inline;
text-align: left;
color: var(--modal-link-foreground-color);
margin: 0;
padding: 0;
}
.modal-close-button {
@extend .button-tertiary;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
.progress-close-button {
@include buttonStyle;
padding: 0;
margin-inline-end: $s-8;
}
.close-icon {
@extend .button-icon;
stroke: var(--export-modal-icon-color);
}
.progress-bar {
margin-top: 0;
grid-area: bar;
}
// EXPORT MODAL
.modal-overlay {
@extend .modal-overlay-base;
&.transparent {

View file

@ -29,13 +29,12 @@
:links (:links message)
:content (:content message)}
context-message {:actions (:actions message)
context-message {:type (or (:type message) :info)
:links (:links message)
:content (:content message)}
;; TODO review this options
is-toast-msg (or (= :toast (:notification-type message)) (some? (:timeout message)))
is-inline-msg (or (= :inline (:notification-type message)) (and (some? (:position message)) (= :floating (:position message))))]
is-toast-msg (or (= :toast (:notification-type message)) (some? (:timeout message)))
is-inline-msg (or (= :inline (:notification-type message)) (and (some? (:position message)) (= :floating (:position message))))]
(when message
(cond

View file

@ -56,14 +56,13 @@
[:div {:class (stl/css :context-text)
:dangerouslySetInnerHTML (when is-html #js {:__html content})}
(when-not is-html
content)]
(when (some? links)
[:nav {:class (stl/css :link-nav)}
(for [[index link] (d/enumerate links)]
;; TODO Review this component
[:& lb/link-button {:class (stl/css :link)
:on-click (:callback link)
:value (:label link)
:key (dm/str "link-" index)}])])])
[:*
content
(when (some? links)
(for [[index link] (d/enumerate links)]
;; TODO Review this component
[:& lb/link-button {:class (stl/css :link)
:on-click (:callback link)
:value (:label link)
:key (dm/str "link-" index)}]))])]])

View file

@ -7,16 +7,18 @@
@import "refactor/common-refactor.scss";
.context-notification {
---context-notification-bg-color: var(--alert-background-color-default);
--context-notification-bg-color: var(--alert-background-color-default);
--context-notification-fg-color: var(--alert-text-foreground-color-default);
--context-notification-icon-color: var(--alert-icon-foreground-color-default);
--context-notification-border-color: var(--alert-border-color-default);
box-sizing: border-box;
display: grid;
grid-template-columns: $s-16 auto 1fr;
grid-template-columns: $s-16 1fr;
gap: $s-8;
min-height: $s-32;
height: fit-content;
width: 100%;
padding: $s-8 $s-8 $s-8 $s-16;
padding: $s-8;
border: $s-1 solid var(--context-notification-border-color);
border-radius: $br-8;
background-color: var(--context-notification-bg-color);
@ -63,12 +65,6 @@
stroke: var(--context-notification-icon-color);
}
.link-nav {
align-self: center;
height: $s-24;
margin: 0;
}
.context-text {
@include bodyMedTipography;
align-self: center;
@ -84,6 +80,8 @@
.contain-html .context-text a {
@include bodyMedTipography;
align-self: center;
display: inline;
text-align: left;
height: $s-16;
margin: 0;
color: var(--modal-link-foreground-color);

View file

@ -11,11 +11,8 @@
[app.common.data.macros :as dm]
[app.common.uuid :as uuid]
[app.main.ui.components.link-button :as lb]
[app.main.ui.icons :as i]
[rumext.v2 :as mf]))
(def ^:private neutral-icon
(i/icon-xref :msg-neutral-refactor (stl/css :icon)))
(mf/defc inline-notification
@ -25,18 +22,17 @@
{::mf/props :obj}
[{:keys [content actions links] :as props}]
[:aside {:class (stl/css :inline-notification)}
neutral-icon
[:div {:class (stl/css :inline-text)}
content]
(when (some? links)
[:nav {:class (stl/css :link-nav)}
(for [[index link] (d/enumerate links)]
[:& lb/link-button {:key (dm/str "link-" index)
:class (stl/css :link)
:on-click (:callback link)
:value (:label link)}])])
content
(when (some? links)
[:nav {:class (stl/css :link-nav)}
(for [[index link] (d/enumerate links)]
[:& lb/link-button {:key (dm/str "link-" index)
:class (stl/css :link)
:on-click (:callback link)
:value (:label link)}])])]
[:div {:class (stl/css :actions)}
(for [action actions]

View file

@ -9,7 +9,6 @@
.inline-notification {
--inline-notification-bg-color: var(--alert-background-color-default);
--inline-notification-fg-color: var(--alert-text-foreground-color-default);
--inline-notification-icon-color: var(--alert-icon-foreground-color-default);
--inline-notification-border-color: var(--alert-border-color-default);
@include alertShadow;
position: absolute;
@ -17,12 +16,13 @@
left: 0;
right: 0;
display: grid;
grid-template-columns: $s-16 auto 1fr auto;
gap: $s-8;
grid-template-columns: 1fr auto;
gap: $s-24;
min-height: $s-48;
min-width: $s-640;
max-width: $s-712;
padding: $s-8 $s-8 $s-8 $s-16;
width: fit-content;
max-width: $s-960;
padding: $s-8;
margin-inline: auto;
border: $s-1 solid var(--inline-notification-border-color);
border-radius: $br-8;
@ -31,17 +31,15 @@
color: var(--inline-notification-fg-color);
}
.icon {
@extend .button-icon;
height: 100%;
stroke: var(--inline-notification-icon-color);
}
.inline-text {
@include bodyMedTipography;
align-self: center;
}
.link-nav {
display: inline;
}
.link {
@include bodyMedTipography;
margin: 0;
@ -53,15 +51,16 @@
display: grid;
grid-template-columns: none;
grid-auto-flow: column;
gap: $s-8;
align-self: center;
gap: $s-8;
}
.action-btn {
@extend .button-tertiary;
@extend .button-secondary;
@include uppercaseTitleTipography;
min-height: $s-32;
min-width: $s-32;
width: fit-content;
padding: $s-8 $s-24;
border: $s-1 solid transparent;
}

View file

@ -49,7 +49,6 @@
[{:keys [type content on-close links] :as props}]
[:aside {:class (stl/css-case :toast-notification true
:with-links (some? links)
:warning (= type :warning)
:error (= type :error)
:success (= type :success)
@ -58,15 +57,16 @@
(get-icon-by-type type)
[:div {:class (stl/css :text)}
content]
content
(when (some? links)
[:nav {:class (stl/css :link-nav)}
(for [[index link] (d/enumerate links)]
[:& lb/link-button {:key (dm/str "link-" index)
:class (stl/css :link)
:on-click (:callback link)
:value (:label link)}])])]
(when (some? links)
[:nav {:class (stl/css :link-nav)}
(for [[index link] (d/enumerate links)]
[:& lb/link-button {:key (dm/str "link-" index)
:class (stl/css :link)
:on-click (:callback link)
:value (:label link)}])])
[:button {:class (stl/css :btn-close)
:on-click on-close}

View file

@ -19,9 +19,9 @@
grid-template-columns: $s-16 1fr auto;
gap: $s-8;
min-height: $s-32;
min-width: $s-500;
max-width: calc(10 * $s-100);
padding: $s-8 $s-8 $s-8 $s-16;
min-width: $s-228;
max-width: $s-400;
padding: $s-8;
border: $s-1 solid var(--toast-notification-border-color);
background-color: var(--toast-notification-bg-color);
border-radius: $br-8;
@ -29,10 +29,6 @@
z-index: $z-index-alert;
}
.with-links {
grid-template-columns: $s-16 auto 1fr auto;
}
.warning {
--toast-notification-bg-color: var(--alert-background-color-warning);
--toast-notification-fg-color: var(--alert-text-foreground-color-warning);
@ -69,7 +65,7 @@
}
.link-nav {
height: $s-24;
display: inline;
}
.link {
@ -80,7 +76,7 @@
.icon {
@extend .button-icon;
height: 100%;
align-self: flex-start;
stroke: var(--toast-notification-icon-color);
}
@ -91,9 +87,10 @@
.btn-close {
@include buttonStyle;
@include flexCenter;
height: 100%;
min-width: $s-32;
align-self: flex-start;
width: $s-16;
margin: 0;
padding: 0;
background-color: transparent;
}

View file

@ -161,6 +161,8 @@
#(st/emit! dv/zoom-to-fit))]
[:div {:class (stl/css :options-zone)}
[:& export-progress-widget]
(case section
:interactions [:*
(when index
@ -169,8 +171,6 @@
:comments [:& comments-menu]
[:div {:class (stl/css :view-options)}])
[:& export-progress-widget]
[:& zoom-widget
{:zoom zoom
:on-increase handle-increase

View file

@ -34,6 +34,7 @@
}
}
}
.active-users-opened {
position: absolute;
right: calc(-1 * $s-2);

View file

@ -203,8 +203,9 @@
[:& persistence-state-widget]
[:div {:class (stl/css :separator)}]
[:& export-progress-widget]
[:div {:class (stl/css :separator)}]
[:div {:class (stl/css :zoom-section)}
[:& zoom-widget-workspace
@ -215,8 +216,6 @@
:on-zoom-fit on-zoom-fit
:on-zoom-selected on-zoom-selected}]]
[:& export-progress-widget]
[:div {:class (stl/css :comments-section)}
[:button {:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
:aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))

View file

@ -37,6 +37,8 @@
border-radius: $br-8;
.label {
@include bodyMedTipography;
height: 100%;
padding: $s-8 0;
color: var(--button-tertiary-foreground-color-rest);
}
@ -180,14 +182,12 @@
.status-icon {
@include flexCenter;
width: $s-16;
height: $s-16;
width: $s-24;
height: $s-24;
margin: 0;
border-radius: $br-circle;
svg {
@extend .button-icon;
height: $s-12;
width: $s-12;
stroke: var(--status-widget-icon-foreground-color);
}
}

View file

@ -13,7 +13,7 @@
[okulary.core :as l]
[rumext.v2 :as mf]))
(def primary-color "var(--color-accent-tertiary)")
(def accent-color "var(--color-accent-tertiary)")
(def secondary-color "var(--color-accent-quaternary)")
(def black-color "var(--app-black)")
(def white-color "var(--app-white)")

View file

@ -89,8 +89,8 @@
:style {:stroke-width (/ point-radius-stroke-width zoom)
:stroke (cond (or selected? hover?) pc/black-color
preview? pc/secondary-color
:else pc/primary-color)
:fill (cond selected? pc/primary-color
:else pc/accent-color)
:fill (cond selected? pc/accent-color
:else pc/white-color)}}]
[:circle {:cx x
:cy y
@ -150,8 +150,8 @@
:style {:stroke-width (/ handler-stroke-width zoom)
:stroke (cond (or selected? hover?) pc/black-color
:else pc/primary-color)
:fill (cond selected? pc/primary-color
:else pc/accent-color)
:fill (cond selected? pc/accent-color
:else pc/white-color)}}]
[:circle {:cx x
:cy y
@ -288,7 +288,7 @@
[:g.path-editor {:ref editor-ref}
[:path {:d (upf/format-path content)
:style {:fill "none"
:stroke pc/primary-color
:stroke pc/accent-color
:strokeWidth (/ 1 zoom)}}]
(when (and preview (not drag-handler))
[:& path-preview {:command preview

View file

@ -26,7 +26,7 @@
(def guide-width 1)
(def guide-opacity 0.7)
(def guide-opacity-hover 1)
(def guide-color colors/primary)
(def guide-color colors/new-primary)
(def guide-pill-width 34)
(def guide-pill-height 20)
(def guide-pill-corner-radius 4)