Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-28 15:41:25 -05:00
Code Issues Activity

💄 Add final design to alert messages

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

19
common/src/app/common/colors.cljc
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"

121
frontend/src/app/main/ui/export.cljs
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])

104
frontend/src/app/main/ui/export.scss
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 {

7
frontend/src/app/main/ui/messages.cljs
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

19
frontend/src/app/main/ui/notifications/context_notification.cljs
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)}]))])]])

16
frontend/src/app/main/ui/notifications/context_notification.scss
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);

22
frontend/src/app/main/ui/notifications/inline_notification.cljs
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]

25
frontend/src/app/main/ui/notifications/inline_notification.scss
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;
}

18
frontend/src/app/main/ui/notifications/toast_notification.cljs
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}

21
frontend/src/app/main/ui/notifications/toast_notification.scss
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;
}

4
frontend/src/app/main/ui/viewer/header.cljs
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

1
frontend/src/app/main/ui/workspace/presence.scss
View file

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

5
frontend/src/app/main/ui/workspace/right_header.cljs
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))

8
frontend/src/app/main/ui/workspace/right_header.scss
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);
}
}

2
frontend/src/app/main/ui/workspace/shapes/path/common.cljs
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)")

10
frontend/src/app/main/ui/workspace/shapes/path/editor.cljs
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

2
frontend/src/app/main/ui/workspace/viewport/guides.cljs
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)