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:
parent
233e7e7e87
commit
697a542754
17 changed files with 221 additions and 183 deletions
|
@ -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"
|
||||
|
|
|
@ -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])
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)}]))])]])
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -34,6 +34,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active-users-opened {
|
||||
position: absolute;
|
||||
right: calc(-1 * $s-2);
|
||||
|
|
|
@ -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))
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)")
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Add table
Reference in a new issue