github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-02 14:48:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/staging' into develop

Browse Source
This commit is contained in:
Andrey Antukh 2024-01-24 09:00:42 +01:00
commit 6a412c75ce
61 changed files with 705 additions and 990 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
common/src/app/common/geom/shapes/bounds.cljc
View File

@ -140,40 +140,41 @@
(update :width + (* 2 h-padding))
(update :height + (* 2 v-padding)))))
(defn calculate-base-bounds
[shape]
(-> (get-shape-filter-bounds shape)
(add-padding (calculate-padding shape true))))
(defn get-object-bounds
[objects shape]
(let [calculate-base-bounds
(fn [shape]
(-> (get-shape-filter-bounds shape)
(add-padding (calculate-padding shape true))))
(let [base-bounds (calculate-base-bounds shape)
bounds
(cond
(empty? (:shapes shape))
[(calculate-base-bounds shape)]
(or (:masked-group shape) (= :bool (:type shape)))
[(calculate-base-bounds shape)]
(and (cfh/frame-shape? shape) (not (:show-content shape)))
[(calculate-base-bounds shape)]
(or (empty? (:shapes shape))
(or (:masked-group shape) (= :bool (:type shape)))
(and (cfh/frame-shape? shape) (not (:show-content shape))))
[base-bounds]
:else
(cfh/reduce-objects
objects
(fn [shape]
(and (d/not-empty? (:shapes shape))
(and (not (:hidden shape))
(d/not-empty? (:shapes shape))
(or (not (cfh/frame-shape? shape))
(:show-content shape))
(or (not (cfh/group-shape? shape))
(not (:masked-group shape)))))
(:id shape)
(fn [result child]
(conj result (calculate-base-bounds child)))
[(calculate-base-bounds shape)]))
(fn [result child]
(cond-> result
(not (:hidden child))
(conj (calculate-base-bounds child))))
[base-bounds]))
children-bounds
(cond->> (grc/join-rects bounds)

4
frontend/resources/images/icons/component-refactor.svg
View File

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.752 10.9998V4.99976C14.7518 4.73663 14.6824 4.47818 14.5508 4.25035C14.4191 4.02252 14.2299 3.83333 14.002 3.70176L8.752 0.701764C8.52376 0.570219 8.26494 0.500977 8.0015 0.500977C7.73806 0.500977 7.47925 0.570219 7.251 0.701764L2.001 3.70176C1.77294 3.8332 1.58348 4.02234 1.45166 4.25018C1.31983 4.47802 1.25029 4.73654 1.25 4.99976V10.9998C1.24943 11.2633 1.31848 11.5223 1.45019 11.7506C1.58189 11.9789 1.77156 12.1683 2 12.2998L7.25 15.2998C7.478 15.4326 7.73714 15.5026 8.001 15.5026C8.26487 15.5026 8.52401 15.4326 8.752 15.2998L14.002 12.2998C14.2304 12.1685 14.42 11.9792 14.5517 11.7511C14.6834 11.523 14.7525 11.2642 14.752 11.0008V10.9998ZM9.69 8.75076C9.69 8.81576 9.673 8.88076 9.64 8.93776C9.60724 8.99507 9.55955 9.04242 9.502 9.07476L8.19 9.82476C8.13271 9.85738 8.06793 9.87453 8.002 9.87453C7.93608 9.87453 7.87129 9.85738 7.814 9.82476L6.502 9.07476C6.44483 9.04227 6.39749 8.99494 6.365 8.93776C6.33176 8.88109 6.31449 8.81647 6.315 8.75076V7.25076C6.315 7.18476 6.331 7.11976 6.365 7.06276C6.39749 7.00559 6.44483 6.95825 6.502 6.92576L7.814 6.17576C7.87123 6.14296 7.93604 6.1257 8.002 6.1257C8.06797 6.1257 8.13278 6.14296 8.19 6.17576L9.502 6.92576C9.559 6.95876 9.607 7.00576 9.639 7.06276C9.67255 7.11936 9.69017 7.18397 9.69 7.24976V8.75076Z"/>
</svg>
<path d="M6.912 1.2a1.54 1.54 0 0 1 2.176 0L14.8 6.912c.6.601.6 1.575 0 2.176L9.088 14.8c-.601.6-1.575.6-2.176 0L1.2 9.088a1.54 1.54 0 0 1 0-2.176L6.912 1.2Zm.755 4.716L5.916 7.667a.47.47 0 0 0 0 .666l1.751 1.751a.47.47 0 0 0 .666 0l1.751-1.751a.47.47 0 0 0 0-.666L8.333 5.916a.47.47 0 0 0-.666 0Z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 420 B

4
frontend/resources/images/icons/copy-refactor.svg
View File

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.751 4.999v6.002a1.494 1.494 0 0 1-.75 1.297L8.75 15.299a1.497 1.497 0 0 1-1.5 0l-5.251-3.001a1.495 1.495 0 0 1-.75-1.297V4.999a1.494 1.494 0 0 1 .75-1.297L7.25.701a1.497 1.497 0 0 1 1.5 0l5.251 3.001a1.495 1.495 0 0 1 .75 1.297Z"/>
</svg>
<path d="M7.162 1.2a1.54 1.54 0 0 1 2.176 0l5.709 5.712a1.538 1.538 0 0 1 0 2.176L9.338 14.8c-.601.6-1.575.6-2.176 0l-5.71-5.712a1.54 1.54 0 0 1 0-2.176L7.162 1.2Z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 363 B

After

Width:  |  Height:  |  Size: 286 B

100
frontend/resources/styles/common/dependencies/colors.scss
View File

@ -35,10 +35,6 @@ $color-complete: #a599c6;
$color-warning: #fc8802;
$color-danger: #e65244;
$color-info: #59b9e2;
$color-ocean: #4285f4;
$color-component: #76b0b8;
$color-component-highlight: #1890ff;
$color-pink: #feecfc;
// Gray scale
$color-gray-10: #e3e3e3;
@ -48,40 +44,21 @@ $color-gray-40: #64666a;
$color-gray-50: #303236;
$color-gray-60: #1f1f1f;
// UI colors
$color-select: #1fdea7;
$color-distance: #ff6fe0;
$color-snap: #d383da;
// Mixing Color variable for creating both light and dark colors
$mix-percentage-dark: 81%;
$mix-percentage-darker: 60%;
$mix-percentage-light: 80%;
$mix-percentage-lighter: 20%;
$mix-percentage-lightest: 10%;
// Lighter colors
$color-success-light: mix($color-success, $color-white, $mix-percentage-light); //#79cf7d
$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter); //#def3de
$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light); //#b7add1
$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter); //#edebf4
$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light); //#5af2c6
$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter); //#d6fcf1
$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light); //#fda035
$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter); //#fee7cc;
$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light); //#eb7569
$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter); //#fadcda
$color-info-light: mix($color-info, $color-white, $mix-percentage-light); //#7ac7e8
$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter); //#def1f9;
// Darker colors
$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark); //#479e4b;
$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker); // #357537;
$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark); //#867ca0
$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker); //#635c77
@ -90,92 +67,23 @@ $color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark); //
$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker); // #1d8f6e
$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark); // #cc6e02;
$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker); //#975201
$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark); //#ba4237
$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker); // #8a3129;
$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark); // #4896b7
$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker); // #356f88;
// bg transparent
$color-dark-bg: rgba(0, 0, 0, 0.4);
$color-light-bg: rgba(255, 255, 255, 0.6);
// Transform scss variables into css variables to use them onto cljs files
:root {
// Colors
--color-white: #{$color-white};
--color-black: #{$color-black};
--color-canvas: #{$color-canvas};
--color-dashboard: #{$color-dashboard};
// Main color;
--color-primary: #{$color-primary};
// Secondary colors;
--color-success: #{$color-success};
--color-complete: #{$color-complete};
--color-warning: #{$color-warning};
--color-danger: #{$color-danger};
--color-info: #{$color-info};
--color-ocean: #{$color-ocean};
--color-component: #{$color-component};
--color-component-highlight: #{$color-component-highlight};
--color-pink: #{$color-pink};
--color-canvas: #e8e9ea;
// Gray scale;
--color-gray-10: #{$color-gray-10};
--color-gray-20: #{$color-gray-20};
--color-gray-30: #{$color-gray-30};
--color-gray-40: #{$color-gray-40};
--color-gray-50: #{$color-gray-50};
--color-gray-60: #{$color-gray-60};
// UI colors
--color-distance: #{$color-distance};
--color-select: #{$color-select};
--color-snap: #{$color-snap};
// Lighter colors
--color-success-light: #{$color-success-light};
--color-success-lighter: #{$color-success-lighter};
--color-complete-light: #{$color-complete-light};
--color-complete-lighter: #{$color-complete-lighter};
--color-primary-light: #{$color-primary-light};
--color-primary-lighter: #{$color-primary-lighter};
--color-warning-light: #{$color-warning-light};
--color-warning-lighter: #{$color-warning-lighter};
--color-danger-light: #{$color-danger-light};
--color-danger-lighter: #{$color-danger-lighter};
--color-info-light: #{$color-info-light};
--color-info-lighter: #{$color-info-lighter};
// Darker colors
--color-success-dark: #{$color-success-dark};
--color-success-darker: #{$color-success-darker};
--color-complete-dark: #{$color-complete-dark};
--color-complete-darker: #{$color-complete-darker};
--color-primary-dark: #{$color-primary-dark};
--color-primary-darker: #{$color-primary-darker};
--color-warning-dark: #{$color-warning-dark};
--color-warning-darker: #{$color-warning-darker};
--color-danger-dark: #{$color-danger-dark};
--color-danger-darker: #{$color-danger-darker};
--color-info-dark: #{$color-info-dark};
--color-info-darker: #{$color-info-darker};
// bg transparent
--color-dark-bg: #{$color-dark-bg};
--color-light-bg: #{$color-light-bg};
}

160
frontend/resources/styles/common/framework.scss
View File

@ -81,136 +81,6 @@
}
}
.btn-text-basic {
@extend %btn;
background: transparent;
color: $color-primary-dark;
flex-shrink: 0;
&:hover {
background: rgba(49, 239, 184, 0.12);
}
}
.btn-icon-dark {
@extend %btn;
background: $color-gray-60;
color: $color-gray-20;
padding: $size-1;
svg {
fill: $color-gray-20;
}
&:hover {
background: $color-primary;
color: $color-gray-60;
svg {
fill: $color-gray-60;
}
}
}
.btn-icon-light {
@extend %btn;
background: $color-white;
border: 1px solid $color-gray-20;
color: $color-black;
padding: $size-1;
svg {
fill: $color-black;
}
&:hover {
background: $color-primary;
border-color: $color-primary;
svg {
fill: $color-black;
}
}
}
.btn-icon-basic {
@extend %btn;
background: transparent;
color: $color-gray-20;
padding: $size-1;
svg {
fill: $color-gray-20;
&.icon-close {
transform: rotate(45deg);
}
}
&:hover {
background: transparent;
svg {
fill: $color-primary;
}
}
}
.btn-text-dark {
@extend %btn;
background: $color-gray-60;
color: $color-gray-20;
svg {
fill: $color-gray-20;
}
&:hover {
background: $color-primary;
color: $color-gray-60;
svg {
fill: $color-gray-60;
}
}
}
.btn-gray {
@extend %btn;
background: $color-gray-30;
color: $color-white;
&:hover {
background: $color-gray-40;
}
}
.btn-ocean {
@extend %btn;
background: $color-ocean;
color: $color-white;
&:hover {
background: darken($color-ocean, 16%);
color: $color-white;
}
}
.btn-option {
display: flex;
a {
margin-right: 0.5rem;
&:last-child {
margin-right: 0;
}
}
&.column {
flex-direction: column;
a {
margin-bottom: 0.5rem;
&:last-child {
margin-bottom: 0;
}
}
}
&.mr-small {
margin: 1rem 0;
}
&.btn-option-400 {
margin: 0 auto;
max-width: 400px;
}
&.mb {
margin-bottom: 0.5rem;
}
}
input[type="button"][disabled],
.btn-disabled {
background-color: $color-gray-10;
@ -218,36 +88,6 @@ input[type="button"][disabled],
pointer-events: none;
}
// Text color
.text-error {
background-color: $color-danger;
border-radius: $br3;
color: $color-danger-lighter;
padding: 3px 6px;
}
.text-success {
background-color: $color-success;
border-radius: $br3;
color: $color-white;
padding: 3px 6px;
}
.text-warning {
background-color: $color-warning;
border-radius: $br3;
color: $color-white;
padding: 3px 6px;
}
.text-info {
background-color: $color-complete;
border-radius: $br3;
color: $color-white;
padding: 3px 6px;
}
// Slider dots
ul.slider-dots {

43
frontend/resources/styles/common/refactor/basic-rules.scss
View File

@ -316,7 +316,7 @@
height: $s-32;
border-radius: $br-8;
background-color: var(--input-background-color);
border: $s-1 solid var(--input-background-color);
border: $s-1 solid var(--input-border-color);
color: var(--input-foreground-color);
span,
label {
@ -336,14 +336,45 @@
}
&:hover {
border: $s-1 solid var(--input-background-color-hover);
border: $s-1 solid var(--input-border-color-hover);
background-color: var(--input-background-color-hover);
span {
color: var(--input-foreground-color);
color: var(--input-foreground-color-hover);
}
input {
color: var(--input-foreground-color-hover);
}
}
&:active {
border: $s-1 solid var(--input-border-color-active);
background-color: var(--input-background-color-active);
span {
color: var(--input-foreground-color-active);
}
input {
color: var(--input-foreground-color-active);
}
background-color: var(--input-background-color-hover);
}
&:focus,
&:focus-within {
border: $s-1 solid var(--input-border-color-focus);
background-color: var(--input-background-color-focus);
span {
color: var(--input-foreground-color-focus);
}
input {
color: var(--input-foreground-color-focus);
}
&:hover {
border: $s-1 solid var(--input-border-color-focus);
background-color: var(--input-background-color-focus);
span {
color: var(--input-foreground-color-focus);
}
input {
color: var(--input-foreground-color-focus);
}
}
}
}
@ -362,7 +393,7 @@
width: 100%;
margin: 0;
border-radius: $br-8;
border: $s-1 solid var(--input-background-color);
border: $s-1 solid var(--input-border-color);
color: var(--input-foreground-color-active);
background-color: var(--input-background-color);
}
@ -500,7 +531,7 @@
min-height: $s-32;
margin-top: $s-8;
background-color: var(--input-background-color);
border: $s-1 solid var(--input-background-color);
border: $s-1 solid var(--input-border-color);
color: var(--input-foreground-color-active);
&:focus-within,
&:active {

10
frontend/resources/styles/common/refactor/color-defs.scss
View File

@ -10,8 +10,8 @@
// DARK
--dark-gray-1: #1d1f20;
--dark-gray-2: #000000;
--dark-gray-2-30: rgba(0, 0, 0, 0.3);
--dark-gray-2-80: rgba(0, 0, 0, 0.8);
--dark-gray-2-30: #{color.change(#000000, $alpha: 0.3)};
--dark-gray-2-80: #{color.change(#000000, $alpha: 0.8)};
--dark-gray-3: #292c2d;
--dark-gray-4: #34393b;
--white: #fff;
@ -22,6 +22,7 @@
--lilac: #bb97d8;
--pink: #ff6fe0;
--strong-green: #00d1b8;
--strong-green-10: #{color.change(#00d1b8, $alpha: 0.1)};
// NOTIFICATION
--dark-ok-color: var(--strong-green);
@ -33,8 +34,8 @@
// LIGHT
--light-gray-1: #fff;
--light-gray-2: #e8eaee;
--light-gray-2-30: rgba(232, 234, 238, 0.3);
--light-gray-2-80: rgba(232, 234, 238, 0.8);
--light-gray-2-30: #{color.change(#e8eaee, $alpha: 0.3)};
--light-gray-2-80: #{color.change(#e8eaee, $alpha: 0.8)};
--light-gray-3: #f3f4f6;
--light-gray-4: #eef0f2;
--black: #000;
@ -44,6 +45,7 @@
--purple-30: rgba(105, 17, 212, 0.2);
--blue: #1345aa;
--strong-purple: #8c33eb;
--strong-purple-10: #{color.change(#8c33eb, $alpha: 0.1)};
// NOTIFICATION WILL CHANGE
--light-ok-color: var(--strong-green);

28
frontend/resources/styles/common/refactor/design-tokens.scss
View File

@ -112,7 +112,7 @@
--layer-row-foreground-color: var(--color-foreground-secondary);
--layer-row-foreground-color-hover: var(--color-accent-primary);
--layer-row-foreground-color-selected: var(--color-accent-primary);
--layer-row-foreground-color-drag: var(--color-select);
--layer-row-foreground-color-drag: var(--color-accent-tertiary);
--layer-row-foreground-color-focus: var(--color-foreground-primary);
--layer-row-border-color-focus: var(--color-accent-primary);
--layer-child-row-background-color: var(--color-background-tertiary);
@ -143,11 +143,19 @@
--icon-foreground-discard: var(--error-color);
// INPUTS, SELECTS, DROPDOWNS
--input-background-color: var(--color-background-tertiary);
--input-foreground-color: var(--color-foreground-secondary);
--input-placeholder-color: var(--color-foreground-secondary);
--input-background-color: var(--color-background-tertiary); // empty state
--input-foreground-color: var(--color-foreground-secondary); // empty state
--input-border-color: var(--color-background-tertiary); // empty state
--input-background-color-rest: var(--color-background-tertiary);
--input-foreground-color-rest: var(--color-foreground-primary);
--input-border-color-rest: var(--color-background-tertiary);
--input-background-color-hover: var(--color-background-quaternary);
--input-foreground-color-hover: var(--color-foreground-primary);
--input-border-color-hover: var(--color-background-quaternary);
--input-background-color-focus: var(--color-background-tertiary);
--input-foreground-color-focus: var(--color-foreground-primary);
--input-border-color-focus: var(--color-accent-primary);
--input-background-color-active: var(--color-background-primary);
--input-foreground-color-active: var(--color-foreground-primary);
@ -210,13 +218,13 @@
--assets-item-name-foreground-color-disabled: var(--color-foreground-disabled);
--assets-item-border-color: var(--color-accent-primary);
--assets-item-background-color-drag: var(--color-accent-primary-muted);
--assets-item-border-color-drag: var(--color-select);
--assets-item-border-color-drag: var(--color-accent-tertiary);
--assets-component-background-color: var(--white); // We don't want this color to change with palette
--assets-component-background-color-disabled: var(
--off-white
); // We don't want this color to change with palette
--assets-component-border-color: var(--color-background-tertiary);
--assets-component-border-selected: var(--color-select);
--assets-component-border-selected: var(--color-accent-tertiary);
--radio-btns-background-color: var(--color-background-tertiary);
--radio-btn-background-color-selected: var(--color-background-quaternary);
@ -285,11 +293,11 @@
// ALERTS & STATUS
--alert-background-color-ok: var(--ok-color);
--alert-foreground-color-ok: var(--color-background-secondary);
--alert-foreground-color-ok: var(--dark-gray-2); // We don't want this color to change with theme
--alert-background-color-warning: var(--warning-color);
--alert-foreground-color-warning: var(--color-foreground-primary);
--alert-foreground-color-warning: var(--white); // We don't want this color to change with theme
--alert-background-color-error: var(--error-color);
--alert-foreground-color-error: var(--color-foreground-primary);
--alert-foreground-color-error: var(--white); // We don't want this color to change with theme
--alert-background-color-neutral: var(--color-background-quaternary);
--alert-foreground-color-neutral: var(--color-foreground-secondary);
--alert-foreground-color-neutral-active: var(--color-foreground-primary);
@ -317,8 +325,8 @@
--flow-tag-background-color: var(--color-background-tertiary);
--flow-tag-foreground-color: var(--color-foreground-secondary);
--flow-tag-background-color-hover: var(--color-accent-primary);
--flow-tag-foreground-color-hover: var(--color-background-primary);
--flow-tag-background-color-hover: var(--color-background-quaternary);
--flow-tag-foreground-color-hover: var(--color-accent-primary);
// VIEWER
--viewer-background-color: var(--color-background-secondary);

2
frontend/resources/styles/common/refactor/themes/default-theme.scss
View File

@ -21,6 +21,8 @@
--color-accent-primary-muted: var(--green-30);
--color-accent-secondary: var(--lilac);
--color-accent-tertiary: var(--strong-green);
--color-accent-tertiary-muted: var(--strong-green-10);
--color-component-highlight: var(--lilac);
--overlay-color: rgba(0, 0, 0, 0.4);
--ok-color: var(--dark-ok-color);

2
frontend/resources/styles/common/refactor/themes/light-theme.scss
View File

@ -21,6 +21,8 @@
--color-accent-primary-muted: var(--purple-30);
--color-accent-secondary: var(--blue);
--color-accent-tertiary: var(--strong-purple);
--color-accent-tertiary-muted: var(--strong-purple-10);
--color-component-highlight: var(--blue);
--overlay-color: rgba(255, 255, 255, 0.4);
--ok-color: var(--light-ok-color);

4
frontend/resources/styles/main/partials/sidebar.scss
View File

@ -565,10 +565,10 @@ button.collapse-sidebar {
&:hover {
svg {
stroke: var(--color-primary);
stroke: $color-primary;
}
label {
color: var(--color-primary);
color: $color-primary;
}
}
}

5
frontend/resources/styles/main/partials/workspace.scss
View File

@ -323,12 +323,7 @@ $height-palette-max: 80px;
}
}
.workspace-frame-icon {
fill: $color-gray-40;
}
.workspace-frame-label {
fill: $color-gray-40;
font-size: $fs12;
}

4
frontend/src/app/main/constants.cljs
View File

@ -19,9 +19,9 @@
"Default data for page metadata."
{:grid-x-axis grid-x-axis
:grid-y-axis grid-y-axis
:grid-color "var(--color-gray-20)"
:grid-color "var(--off-white)"
:grid-alignment true
:background "var(--color-white)"})
:background "var(--white)"})
(def size-presets
[{:name "APPLE"}

2
frontend/src/app/main/data/workspace/notifications.cljs
View File

@ -145,7 +145,7 @@
(remove nil?))
used (into #{} xfm presence)
avail (set/difference presence-palette used)]
(or (first avail) "var(--color-black)")))
(or (first avail) "var(--black)")))
(update-color [color presence]
(if (some? color)

1
frontend/src/app/main/ui/auth/register.cljs
View File

@ -253,6 +253,7 @@
[:& fm/input {:name :accept-terms-and-privacy
:class "check-primary"
:type "checkbox"
:default-checked false
:label terms-label}]]))
[:> fm/submit-button*

2
frontend/src/app/main/ui/components/editable_select.scss
View File

@ -10,7 +10,7 @@
@extend .asset-element;
margin: 0;
padding: 0;
border: $s-1 solid var(--input-background-color);
border: $s-1 solid var(--input-border-color);
position: relative;
display: flex;
height: $s-32;

7
frontend/src/app/main/ui/components/forms.cljs
View File

@ -31,7 +31,6 @@
input-name (get props :name)
more-classes (get props :class)
auto-focus? (get props :auto-focus? false)
placeholder (or placeholder label)
form (or form (mf/use-ctx form-ctx))
@ -43,6 +42,7 @@
is-text? (or (= @type' "password")
(= @type' "text")
(= @type' "email"))
placeholder (when is-text? (or placeholder label))
touched? (get-in @form [:touched input-name])
error (get-in @form [:errors input-name])
@ -87,7 +87,7 @@
(swap! form assoc-in [:touched input-name] true)))
props (-> props
(dissoc :help-icon :form :trim :children :show-success? :auto-focus?)
(dissoc :help-icon :form :trim :children :show-success? :auto-focus? :label)
(assoc :id (name input-name)
:value value
:auto-focus auto-focus?
@ -103,6 +103,7 @@
"aria-describedby" (dm/str "error-" input-name)))
(obj/clj->props))
checked? (and is-checkbox? (= value true))
show-valid? (and show-success? touched? (not error))
show-invalid? (and touched? error)]
@ -124,7 +125,7 @@
:for (name input-name)} label
(when is-checkbox?
[:span {:class (stl/css-case :global/checked value)} i/status-tick-refactor])
[:span {:class (stl/css-case :global/checked checked?)} (when checked? i/status-tick-refactor)])
(if is-checkbox?
[:> :input props]

7
frontend/src/app/main/ui/components/forms.scss
View File

@ -46,7 +46,7 @@
input:-webkit-autofill:active {
-webkit-text-fill-color: var(--input-foreground-color-active);
-webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color);
border: $s-1 solid var(--input-background-color);
border: $s-1 solid var(--input-border-color);
-webkit-background-clip: text;
transition: background-color 5000s ease-in-out 0s;
caret-color: var(--input-foreground-color-active);
@ -180,7 +180,7 @@
height: $s-32;
width: 100%;
border-radius: $br-8;
border: $s-1 solid var(--input-background-color);
border: $s-1 solid var(--input-border-color);
color: var(--input-foreground-color-active);
background-color: var(--input-background-color);
.main-content {
@ -282,8 +282,7 @@
margin: 0;
border-radius: $br-8;
background-color: var(--input-background-color);
border: $s-1 solid var(--input-background-color);
color: var(--input-foreground-color-active);
border: $s-1 solid var(--input-border-color-active);
&:focus {
outline: none;
border: $s-1 solid var(--input-border-color-focus);

2
frontend/src/app/main/ui/components/search_bar.scss
View File

@ -35,7 +35,7 @@
}
}
&:hover {
border: $s-1 solid var(--input-background-color-hover);
border: $s-1 solid var(--input-border-color-hover);
background-color: var(--input-background-color-hover);
input {
background-color: var(--input-background-color-hover);

50
frontend/src/app/main/ui/components/shape_icon.cljs
View File

@ -1,50 +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.components.shape-icon
(:require
[app.common.types.component :as ctk]
[app.common.types.shape :as cts]
[app.common.types.shape.layout :as ctl]
[app.main.ui.icons :as i]
[rumext.v2 :as mf]))
(mf/defc element-icon
[{:keys [shape main-instance?] :as props}]
(if (ctk/instance-head? shape)
(if main-instance?
i/component
i/component-copy)
(case (:type shape)
:frame (cond
(and (ctl/flex-layout? shape) (ctl/col? shape))
i/layout-columns
(and (ctl/flex-layout? shape) (ctl/row? shape))
i/layout-rows
(ctl/grid-layout? shape)
i/grid-layout-mode
:else
i/artboard)
:image i/image
:line (if (cts/has-images? shape) i/image i/line)
:circle (if (cts/has-images? shape) i/image i/circle)
:path (if (cts/has-images? shape) i/image i/curve)
:rect (if (cts/has-images? shape) i/image i/box)
:text i/text
:group (if (:masked-group shape)
i/mask
i/folder)
:bool (case (:bool-type shape)
:difference i/bool-difference
:exclude i/bool-exclude
:intersection i/bool-intersection
#_:default i/bool-union)
:svg-raw i/file-svg
nil)))

1
frontend/src/app/main/ui/dashboard.cljs
View File

@ -15,7 +15,6 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.dashboard.export]
[app.main.ui.dashboard.files :refer [files-section]]
[app.main.ui.dashboard.fonts :refer [fonts-page font-providers-page]]
[app.main.ui.dashboard.import]

190
frontend/src/app/main/ui/dashboard/export.cljs
View File

@ -1,190 +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.dashboard.export
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.data.modal :as modal]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.worker :as uw]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[beicon.v2.core :as rx]
[rumext.v2 :as mf]))
(def ^:const options [:all :merge :detach])
(mf/defc export-entry
{::mf/wrap-props false}
[{:keys [file]}]
[:div {:class (stl/css-case :file-entry true
:loading (:loading? file)
:success (:export-success? file)
:error (:export-error? file))}
[:div {:class (stl/css :file-name)}
[:span {:class (stl/css :file-icon)}
(cond (:export-success? file) i/tick-refactor
(:export-error? file) i/close-refactor
(:loading? file) i/loader-pencil)]
[:div {:class (stl/css :file-name-label)}
(:name file)]]])
(defn- mark-file-error
[files file-id]
(mapv #(cond-> %
(= file-id (:id %))
(assoc :export-error? true
:loading? false))
files))
(defn- mark-file-success
[files file-id]
(mapv #(cond-> %
(= file-id (:id %))
(assoc :export-success? true
:loading? false))
files))
(def export-types
[:all :merge :detach])
(mf/defc export-dialog
{::mf/register modal/components
::mf/register-as :export
::mf/wrap-props false}
[{:keys [team-id files has-libraries? binary? features]}]
(let [state* (mf/use-state
#(let [files (mapv (fn [file] (assoc file :loading? true)) files)]
{:status :prepare
:selected :all
:files files}))
state (deref state*)
selected (:selected state)
status (:status state)
start-export
(mf/use-fn
(mf/deps team-id selected files features)
(fn []
(swap! state* assoc :status :exporting)
(->> (uw/ask-many!
{:cmd (if binary? :export-binary-file :export-standard-file)
:team-id team-id
:features features
:export-type selected
:files files})
(rx/mapcat #(->> (rx/of %)
(rx/delay 1000)))
(rx/subs!
(fn [msg]
(cond
(= :error (:type msg))
(swap! state* update :files mark-file-error (:file-id msg))
(= :finish (:type msg))
(do
(swap! state* update :files mark-file-success (:file-id msg))
(dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg)))))))))
on-cancel
(mf/use-fn
(fn [event]
(dom/prevent-default event)
(st/emit! (modal/hide))))
on-accept
(mf/use-fn
(mf/deps start-export)
(fn [event]
(dom/prevent-default event)
(start-export)))
on-change
(mf/use-fn
(fn [event]
(let [type (-> (dom/get-target event)
(dom/get-data "type")
(keyword))]
(swap! state* assoc :selected type))))]
(mf/with-effect [has-libraries?]
;; Start download automatically when no libraries
(when-not has-libraries?
(start-export)))
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)}
(tr "dashboard.export.title")]
[:button {:class (stl/css :modal-close-btn)
:on-click on-cancel} i/close-refactor]]
(cond
(= status :prepare)
[:*
[:div {:class (stl/css :modal-content)}
[:p {:class (stl/css :modal-msg)} (tr "dashboard.export.explain")]
[:p {:class (stl/css :modal-scd-msg)} (tr "dashboard.export.detail")]
(for [type export-types]
[:div {:class (stl/css :export-option true)
:key (name type)}
[:label {:for (str "export-" type)
:class (stl/css-case :global/checked (= selected type))}
;; Execution time translation strings:
;; dashboard.export.options.all.message
;; dashboard.export.options.all.title
;; dashboard.export.options.detach.message
;; dashboard.export.options.detach.title
;; dashboard.export.options.merge.message
;; dashboard.export.options.merge.title
[:span {:class (stl/css-case :global/checked (= selected type))}
(when (= selected type)
i/status-tick-refactor)]
[:div {:class (stl/css :option-content)}
[:h3 {:class (stl/css :modal-subtitle)} (tr (dm/str "dashboard.export.options." (d/name type) ".title"))]
[:p {:class (stl/css :modal-msg)} (tr (dm/str "dashboard.export.options." (d/name type) ".message"))]]
[:input {:type "radio"
:class (stl/css :option-input)
:id (str "export-" type)
:checked (= selected type)
:name "export-option"
:data-type (name type)
:on-change on-change}]]])]
[:div {:class (stl/css :modal-footer)}
[:div {:class (stl/css :action-buttons)}
[:input {:class (stl/css :cancel-button)
:type "button"
:value (tr "labels.cancel")
:on-click on-cancel}]
[:input {:class (stl/css :accept-btn)
:type "button"
:value (tr "labels.continue")
:on-click on-accept}]]]]
(= status :exporting)
[:*
[:div {:class (stl/css :modal-content)}
(for [file (:files state)]
[:& export-entry {:file file :key (dm/str (:id file))}])]
[:div {:class (stl/css :modal-footer)}
[:div {:class (stl/css :action-buttons)}
[:input {:class (stl/css :accept-btn)
:type "button"
:value (tr "labels.close")
:disabled (->> state :files (some :loading?))
:on-click on-cancel}]]]])]]))

123
frontend/src/app/main/ui/dashboard/export.scss
View File

@ -1,123 +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";
.modal-overlay {
@extend .modal-overlay-base;
}
.modal-container {
@extend .modal-container-base;
}
.modal-header {
margin-bottom: $s-24;
}
.modal-title {
@include tabTitleTipography;
color: var(--modal-title-foreground-color);
}
.modal-close-btn {
@extend .modal-close-btn-base;
}
.modal-content {
@include titleTipography;
margin-bottom: $s-24;
}
.export-option {
@extend .input-checkbox;
width: 100%;
align-items: flex-start;
label {
align-items: flex-start;
.modal-subtitle {
@include tabTitleTipography;
color: var(--modal-title-foreground-color);
}
}
span {
margin-top: $s-8;
}
}
.option-content {
@include flexColumn;
@include titleTipography;
}
.action-buttons {
@extend .modal-action-btns;
}
.cancel-button {
@extend .modal-cancel-btn;
}
.accept-btn {
@extend .modal-accept-btn;
&.danger {
@extend .modal-danger-btn;
}
}
.modal-scd-msg,
.modal-subtitle,
.modal-msg {
@include titleTipography;
color: var(--modal-text-foreground-color);
line-height: 1.5;
}
.file-entry {
.file-name {
@include flexRow;
.file-icon {
@include flexCenter;
height: $s-16;
width: $s-16;
svg {
@extend .button-icon-small;
stroke: var(--input-foreground);
}
}
.file-name-label {
@include titleTipography;
}
}
&.loading {
.file-name {
color: var(--pending-color);
.file-icon svg:global(#loader-pencil) {
color: var(--pending-color);
stroke: var(--pending-color);
fill: var(--pending-color);
}
}
}
&.error {
.file-name {
color: var(--error-color);
.file-icon svg {
stroke: var(--error-color);
}
}
}
&.success {
.file-name {
color: var(--ok-color);
.file-icon svg {
stroke: var(--ok-color);
}
}
}
}

16
frontend/src/app/main/ui/dashboard/fonts.scss
View File

@ -143,7 +143,7 @@
margin-left: $s-6;
align-items: center;
svg {
fill: transparent;
fill: none;
width: $s-12;
height: $s-12;
transform: rotate(45deg);
@ -186,17 +186,19 @@
margin-left: $s-12;
justify-content: center;
align-items: center;
svg {
width: $s-16;
height: $s-16;
stroke: $df-secondary;
fill: none;
}
&.failure {
margin-right: $s-12;
svg {
stroke: var(--warning-color);
}
}
svg {
width: $s-16;
height: $s-16;
stroke: $df-secondary;
}
&.close {
background: none;
@ -275,6 +277,7 @@
svg {
stroke: $df-secondary;
fill: none;
height: $s-20;
width: $s-20;
}
@ -312,6 +315,7 @@
.icon svg {
stroke: $df-secondary;
fill: none;
width: $s-32;
height: $s-32;
}

14
frontend/src/app/main/ui/dashboard/sidebar.scss
View File

@ -46,7 +46,7 @@
height: $s-48;
display: flex;
width: 100%;
border: $s-1 solid transparent;
border: $s-1 solid $db-tertiary;
align-items: center;
svg {
@ -76,7 +76,6 @@
padding: 0 $s-12;
background-color: transparent;
border: none;
border-right: $s-1 solid $db-primary;
}
.team-name {
@ -114,16 +113,13 @@
}
.switch-options {
display: flex;
@include buttonStyle;
@include flexCenter;
max-width: $s-24;
min-width: $s-28;
border-left: $s-1 solid $df-primary;
justify-content: center;
align-items: center;
cursor: pointer;
background-color: transparent;
border: none;
height: 100%;
border-left: $s-1 solid $db-primary;
background-color: transparent;
svg {
fill: $df-secondary;

32
frontend/src/app/main/ui/debug/components_preview.cljs
View File

@ -39,16 +39,16 @@
(let [theme (dom/event->value event)
data (assoc initial :theme theme)]
(st/emit! (du/update-profile data))))
colors [:bg-primary
:bg-secondary
:bg-tertiary
:bg-cuaternary
:fg-primary
:fg-secondary
:acc
:acc-muted
:acc-secondary
:acc-tertiary]
colors ["var(--color-background-primary)"
"var(--color-background-secondary)"
"var(--color-background-tertiary)"
"var(--color-background-cuaternary)"
"var(--color-foreground-primary)"
"var(--color-foreground-secondary)"
"var(--color-accent-primary)"
"var(--color-accent-primary-muted)"
"var(--color-accent-secondary)"
"var(--color-accent-tertiary)"]
;; COMPONENTS FNs
state* (mf/use-state {:collapsed? true
@ -88,12 +88,12 @@
[:option {:label "Penpot Dark (default)" :value "default"}]
[:option {:label "Penpot Light" :value "light"}]]
[:div {:class (stl/css :wrapper)}
(let [css (stl/styles)]
(for [color colors]
[:div {:key color
:class (dom/classnames (get css color) true
(get css :rect) true)}
(d/name color)]))]]
(for [color colors]
[:div {:class (stl/css :color-wrapper)}
[:span (d/name color)]
[:div {:key color
:style {:background color}
:class (stl/css :rect)}]])]]
[:div {:class (stl/css :components-row)}
[:h2 {:class (stl/css :title)} "Components"]

53
frontend/src/app/main/ui/debug/components_preview.scss
View File

@ -12,64 +12,27 @@
color: var(--color-foreground-primary);
background: var(--color-background-secondary);
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: $s-40;
background-color: var(--color-background-primary);
width: 100%;
padding: $s-20;
display: flex;
justify-content: center;
gap: $s-20;
flex-wrap: wrap;
.rect {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--color-foreground-primary);
border: $s-1 solid var(--color-foreground-primary);
padding: $s-20;
height: $s-96;
min-width: $s-152;
}
.bg-primary {
background: var(--color-background-primary);
color: var(--color-foreground-primary);
}
.bg-secondary {
background: var(--color-background-secondary);
color: var(--color-foreground-primary);
}
.bg-tertiary {
background: var(--color-background-tertiary);
color: var(--color-foreground-primary);
}
.bg-cuaternary {
background: var(--color-background-quaternary);
color: var(--color-foreground-primary);
}
.fg-primary {
background: var(--color-foreground-primary);
color: var(--color-background-primary);
}
.fg-secondary {
background: var(--color-foreground-secondary);
color: var(--color-background-primary);
}
.acc {
background: var(--color-accent-primary);
color: var(--color-background-primary);
}
.acc-muted {
background: var(--color-accent-primary-muted);
color: var(--color-foreground-primary);
}
.acc-secondary {
background: var(--color-accent-secondary);
color: var(--color-background-primary);
}
.acc-tertiary {
background: var(--color-accent-tertiary);
color: var(--color-background-primary);
}
}
}
.color-wrapper {
display: grid;
grid-template-rows: auto $s-96;
}
.components-row {
color: var(--color-foreground-primary);

175
frontend/src/app/main/ui/export.cljs
View File

@ -17,9 +17,11 @@
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.workspace.shapes :refer [shape-wrapper]]
[app.main.worker :as uw]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr c]]
[app.util.strings :as ust]
[beicon.v2.core :as rx]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
@ -283,3 +285,176 @@
:stroke-dashoffset (- 280 pwidth)
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]]])]))
(def ^:const options [:all :merge :detach])
(mf/defc export-entry
{::mf/wrap-props false}
[{:keys [file]}]
[:div {:class (stl/css-case :file-entry true
:loading (:loading? file)
:success (:export-success? file)
:error (:export-error? file))}
[:div {:class (stl/css :file-name)}
[:span {:class (stl/css :file-icon)}
(cond (:export-success? file) i/tick-refactor
(:export-error? file) i/close-refactor
(:loading? file) i/loader-pencil)]
[:div {:class (stl/css :file-name-label)}
(:name file)]]])
(defn- mark-file-error
[files file-id]
(mapv #(cond-> %
(= file-id (:id %))
(assoc :export-error? true
:loading? false))
files))
(defn- mark-file-success
[files file-id]
(mapv #(cond-> %
(= file-id (:id %))
(assoc :export-success? true
:loading? false))
files))
(def export-types
[:all :merge :detach])
(mf/defc export-dialog
{::mf/register modal/components
::mf/register-as :export
::mf/wrap-props false}
[{:keys [team-id files has-libraries? binary? features]}]
(let [_ (println "-a-a-a-a")
state* (mf/use-state
#(let [files (mapv (fn [file] (assoc file :loading? true)) files)]
{:status :prepare
:selected :all
:files files}))
state (deref state*)
selected (:selected state)
status (:status state)
start-export
(mf/use-fn
(mf/deps team-id selected files features)
(fn []
(swap! state* assoc :status :exporting)
(->> (uw/ask-many!
{:cmd (if binary? :export-binary-file :export-standard-file)
:team-id team-id
:features features
:export-type selected
:files files})
(rx/mapcat #(->> (rx/of %)
(rx/delay 1000)))
(rx/subs!
(fn [msg]
(cond
(= :error (:type msg))
(swap! state* update :files mark-file-error (:file-id msg))
(= :finish (:type msg))
(do
(swap! state* update :files mark-file-success (:file-id msg))
(dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg)))))))))
on-cancel
(mf/use-fn
(fn [event]
(dom/prevent-default event)
(st/emit! (modal/hide))))
on-accept
(mf/use-fn
(mf/deps start-export)
(fn [event]
(dom/prevent-default event)
(start-export)))
on-change
(mf/use-fn
(fn [event]
(let [type (-> (dom/get-target event)
(dom/get-data "type")
(keyword))]
(swap! state* assoc :selected type))))]
(mf/with-effect [has-libraries?]
;; Start download automatically when no libraries
(when-not has-libraries?
(start-export)))
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)}
(tr "dashboard.export.title")]
[:button {:class (stl/css :modal-close-btn)
:on-click on-cancel} i/close-refactor]]
(cond
(= status :prepare)
[:*
[:div {:class (stl/css :modal-content)}
[:p {:class (stl/css :modal-msg)} (tr "dashboard.export.explain")]
[:p {:class (stl/css :modal-scd-msg)} (tr "dashboard.export.detail")]
(for [type export-types]
[:div {:class (stl/css :export-option true)
:key (name type)}
[:label {:for (str "export-" type)
:class (stl/css-case :global/checked (= selected type))}
;; Execution time translation strings:
;; dashboard.export.options.all.message
;; dashboard.export.options.all.title
;; dashboard.export.options.detach.message
;; dashboard.export.options.detach.title
;; dashboard.export.options.merge.message
;; dashboard.export.options.merge.title
[:span {:class (stl/css-case :global/checked (= selected type))}
(when (= selected type)
i/status-tick-refactor)]
[:div {:class (stl/css :option-content)}
[:h3 {:class (stl/css :modal-subtitle)} (tr (dm/str "dashboard.export.options." (d/name type) ".title"))]
[:p {:class (stl/css :modal-msg)} (tr (dm/str "dashboard.export.options." (d/name type) ".message"))]]
[:input {:type "radio"
:class (stl/css :option-input)
:id (str "export-" type)
:checked (= selected type)
:name "export-option"
:data-type (name type)
:on-change on-change}]]])]
[:div {:class (stl/css :modal-footer)}
[:div {:class (stl/css :action-buttons)}
[:input {:class (stl/css :cancel-button)
:type "button"
:value (tr "labels.cancel")
:on-click on-cancel}]
[:input {:class (stl/css :accept-btn)
:type "button"
:value (tr "labels.continue")
:on-click on-accept}]]]]
(= status :exporting)
[:*
[:div {:class (stl/css :modal-content)}
(for [file (:files state)]
[:& export-entry {:file file :key (dm/str (:id file))}])]
[:div {:class (stl/css :modal-footer)}
[:div {:class (stl/css :action-buttons)}
[:input {:class (stl/css :accept-btn)
:type "button"
:value (tr "labels.close")
:disabled (->> state :files (some :loading?))
:on-click on-cancel}]]]])]]))

67
frontend/src/app/main/ui/export.scss
View File

@ -235,3 +235,70 @@
color: var(--modal-text-foreground-color);
line-height: 1.5;
}
.export-option {
@extend .input-checkbox;
width: 100%;
align-items: flex-start;
label {
align-items: flex-start;
.modal-subtitle {
@include tabTitleTipography;
color: var(--modal-title-foreground-color);
}
}
span {
margin-top: $s-8;
}
}
.option-content {
@include flexColumn;
@include titleTipography;
}
.file-entry {
.file-name {
@include flexRow;
.file-icon {
@include flexCenter;
height: $s-16;
width: $s-16;
svg {
@extend .button-icon-small;
stroke: var(--input-foreground);
}
}
.file-name-label {
@include titleTipography;
}
}
&.loading {
.file-name {
color: var(--pending-color);
.file-icon svg:global(#loader-pencil) {
color: var(--pending-color);
stroke: var(--pending-color);
fill: var(--pending-color);
}
}
}
&.error {
.file-name {
color: var(--error-color);
.file-icon svg {
stroke: var(--error-color);
}
}
}
&.success {
.file-name {
color: var(--ok-color);
.file-icon svg {
stroke: var(--ok-color);
}
}
}
}

16
frontend/src/app/main/ui/measurements.cljs
View File

@ -23,28 +23,26 @@
(def font-size 11)
(def selection-rect-width 1)
(def select-color "var(--color-select)")
(def select-color "var(--color-accent-tertiary)")
(def select-guide-width 1)
(def select-guide-dasharray 5)
(def hover-color "var(--color-distance)")
(def hover-color-text "var(--color-white)")
(def hover-guide-width 1)
(def hover-color "var(--color-foreground-tertiary)")
(def size-display-color "var(--color-white)")
(def size-display-color "var(--white)")
(def size-display-opacity 0.7)
(def size-display-text-color "var(--color-black)")
(def size-display-text-color "var(--black)")
(def size-display-width-min 50)
(def size-display-width-max 75)
(def size-display-height 16)
(def distance-color "var(--color-distance)")
(def distance-text-color "var(--color-white)")
(def distance-color "var(--color-foreground-tertiary)")
(def distance-text-color "var(--white)")
(def distance-border-radius 2)
(def distance-pill-width 50)
(def distance-pill-height 16)
(def distance-line-stroke 1)
(def warning-color "var(--color-warning)")
;; ------------------------------------------------
;; HELPERS

6
frontend/src/app/main/ui/shapes/grid_layout_viewer.cljs
View File

@ -38,11 +38,11 @@
:y area-y
:width area-width
:height area-height
:style {:fill "var(--color-distance)"
:style {:fill "var(--color-foreground-tertiary)"
:fill-opacity 0.3}}]
[:text {:x area-text-x
:y area-text-y
:style {:fill "var(--color-distance)"
:style {:fill "var(--color-foreground-tertiary)"
:font-family "worksans"
:font-weight 600
:font-size 14
@ -71,7 +71,7 @@
:y (:y cell-origin)
:width cell-width
:height cell-height
:style {:stroke "var(--color-distance)"
:style {:stroke "var(--color-foreground-tertiary)"
:stroke-width 1.5
:fill "none"}}]

27
frontend/src/app/main/ui/shapes/shape.cljs
View File

@ -24,22 +24,23 @@
;; FIXME: revisit this:
(defn propagate-wrapper-styles-child
[child wrapper-props]
(let [child-props-childs
(-> (obj/get child "props")
(obj/clone)
(-> (obj/get "childs")))
(when (some? child)
(let [child-props-childs
(-> (obj/get child "props")
(obj/clone)
(-> (obj/get "childs")))
child-props-childs
(->> child-props-childs
(map #(assoc % :wrapper-styles (obj/get wrapper-props "style"))))
child-props-childs
(->> child-props-childs
(map #(assoc % :wrapper-styles (obj/get wrapper-props "style"))))
child-props
(-> (obj/get child "props")
(obj/clone)
(obj/set! "childs" child-props-childs))]
child-props
(-> (obj/get child "props")
(obj/clone)
(obj/set! "childs" child-props-childs))]
(-> (obj/clone child)
(obj/set! "props" child-props))))
(-> (obj/clone child)
(obj/set! "props" child-props)))))
(defn propagate-wrapper-styles
([children wrapper-props]

2
frontend/src/app/main/ui/viewer/inspect/exports.cljs
View File

@ -123,7 +123,7 @@
{:value "6" :label "6x"}]
format-options [{:value "png" :label "PNG"}
{:value "jpeg" :label "JPEG"}
{:value "jpeg" :label "JPG"}
{:value "svg" :label "SVG"}
{:value "pdf" :label "PDF"}]]

2
frontend/src/app/main/ui/viewer/inspect/selection_feedback.cljs
View File

@ -15,7 +15,7 @@
;; CONSTANTS
;; ------------------------------------------------
(def select-color "var(--color-select)")
(def select-color "var(--color-accent-tertiary)")
(def selection-rect-width 1)
(def select-guide-width 1)
(def select-guide-dasharray 5)

4
frontend/src/app/main/ui/viewer/shapes.cljs
View File

@ -264,8 +264,8 @@
:y (- y 1)
:width (+ width 2)
:height (+ height 2)
:fill "var(--color-primary)"
:stroke "var(--color-primary)"
:fill "var(--color-accent-tertiary)"
:stroke "var(--color-accent-tertiary)"
:stroke-width (if interactions-show? 1 0)
:fill-opacity (if interactions-show? 0.2 0)
:style {:pointer-events (when frame? "none")}

256
frontend/src/app/main/ui/workspace/comments.scss
View File

@ -9,132 +9,148 @@
.comments-section {
position: relative;
background-color: var(--panel-background-color);
.comments-section-title {
@include flexCenter;
@include tabTitleTipography;
display: flex;
justify-content: space-between;
align-items: center;
height: $s-32;
min-height: $s-32;
margin: $s-8 $s-8 0 $s-8;
border-radius: $br-8;
background-color: var(--panel-title-background-color);
span {
@include flexCenter;
flex-grow: 1;
color: var(--title-foreground-color-hover);
}
display: grid;
grid-template-rows: $s-40 $s-48 1fr;
}
.close-button {
@extend .button-tertiary;
height: $s-28;
width: $s-28;
border-radius: $br-6;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
.comments-section-title {
@include flexCenter;
@include tabTitleTipography;
display: flex;
justify-content: space-between;
align-items: center;
height: $s-32;
min-height: $s-32;
margin: $s-8 $s-8 0 $s-8;
border-radius: $br-8;
background-color: var(--panel-title-background-color);
span {
@include flexCenter;
flex-grow: 1;
color: var(--title-foreground-color-hover);
}
}
.close-button {
@extend .button-tertiary;
height: $s-28;
width: $s-28;
border-radius: $br-6;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.mode-dropdown-wrapper {
@include buttonStyle;
@extend .asset-element;
background-color: var(--color-background-tertiary);
display: flex;
width: $s-256;
height: $s-32;
padding: $s-8;
border-radius: $br-8;
margin: $s-16 auto 0 auto;
cursor: pointer;
position: relative;
}
.mode-label {
padding-right: 8px;
flex-grow: 1;
display: flex;
justify-content: flex-start;
}
.icon {
@include flexCenter;
padding-right: 8px;
height: $s-24;
width: $s-24;
svg {
@extend .button-icon-small;
transform: rotate(90deg);
stroke: var(--icon-foreground);
}
}
.comment-mode-dropdown {
@extend .dropdown-wrapper;
top: $s-80;
left: $s-12;
width: $s-256;
}
.dropdown-item {
@extend .dropdown-element-base;
justify-content: space-between;
.icon {
@include flexCenter;
height: $s-24;
width: $s-24;
svg {
@extend .button-icon-small;
stroke: transparent;
}
}
.mode-dropdown-wrapper {
@include buttonStyle;
@extend .asset-element;
background-color: var(--color-background-tertiary);
display: flex;
width: $s-256;
height: $s-32;
padding: $s-8;
border-radius: $br-8;
margin: $s-16 auto 0 auto;
cursor: pointer;
position: relative;
.mode-label {
padding-right: 8px;
flex-grow: 1;
display: flex;
justify-content: flex-start;
}
.icon {
@include flexCenter;
padding-right: 8px;
height: $s-24;
width: $s-24;
svg {
@extend .button-icon-small;
transform: rotate(90deg);
stroke: var(--icon-foreground);
}
.label {
@include titleTipography;
}
&:hover {
.icon svg {
stroke: transparent;
}
}
.comment-mode-dropdown {
@extend .dropdown-wrapper;
top: $s-80;
left: $s-12;
width: $s-256;
.dropdown-item {
@extend .dropdown-element-base;
justify-content: space-between;
.icon {
@include flexCenter;
height: $s-24;
width: $s-24;
svg {
@extend .button-icon-small;
stroke: transparent;
}
}
.label {
@include titleTipography;
}
&:hover {
.icon svg {
stroke: transparent;
}
}
&.selected {
.label {
color: var(--menu-foreground-color);
}
.icon svg {
stroke: var(--icon-foreground-hover);
}
}
&.selected {
.label {
color: var(--menu-foreground-color);
}
.separator {
height: $s-12;
}
}
.comments-section-content {
.thread-groups {
display: flex;
flex-direction: column;
gap: $s-24;
}
.thread-group-placeholder {
@include flexColumn;
align-items: center;
justify-content: flex-start;
margin-top: $s-36;
.placeholder-icon {
@include flexCenter;
height: $s-48;
width: $s-48;
border-radius: $br-circle;
background-color: var(--empty-message-background-color);
svg {
@extend .button-icon;
height: $s-28;
width: $s-28;
stroke: var(--empty-message-foreground-color);
}
}
.placeholder-label {
@include titleTipography;
text-align: center;
width: $s-184;
color: var(--empty-message-foreground-color);
}
.icon svg {
stroke: var(--icon-foreground-hover);
}
}
}
.separator {
height: $s-12;
}
.comments-section-content {
height: 100%;
overflow-y: auto;
}
.thread-groups {
display: flex;
flex-direction: column;
gap: $s-24;
}
.thread-group-placeholder {
@include flexColumn;
align-items: center;
justify-content: flex-start;
margin-top: $s-36;
}
.placeholder-icon {
@include flexCenter;
height: $s-48;
width: $s-48;
border-radius: $br-circle;
background-color: var(--empty-message-background-color);
svg {
@extend .button-icon;
height: $s-28;
width: $s-28;
stroke: var(--empty-message-foreground-color);
}
}
.placeholder-label {
@include titleTipography;
text-align: center;
width: $s-184;
color: var(--empty-message-foreground-color);
}

2
frontend/src/app/main/ui/workspace/shapes/debug.cljs
View File

@ -91,7 +91,7 @@
[{:keys [shape]}]
[:*
(when ^boolean (dbg/enabled? :bounding-boxes)
[:& debug-bounding-boxes])
[:& debug-bounding-boxes {:shape shape}])
(when (and ^boolean (cfh/text-shape? shape)
^boolean (dbg/enabled? :text-outline)

35
frontend/src/app/main/ui/workspace/shapes/frame.cljs
View File

@ -24,7 +24,9 @@
[app.main.ui.workspace.shapes.frame.dynamic-modifiers :as fdm]
[app.util.debug :as dbg]
[app.util.dom :as dom]
[app.util.thumbnails :as th]
[app.util.timers :as tm]
[promesa.core :as p]
[rumext.v2 :as mf]))
(defn frame-shape-factory
@ -44,7 +46,9 @@
childs (mf/deref childs-ref)]
[:& shape-container {:shape shape :ref ref :disable-shadows? (cfh/is-direct-child-of-root? shape)}
[:& frame-shape {:shape shape :childs childs}]]))))
[:& frame-shape {:shape shape :childs childs}]
(when *assert*
[:& wsd/shape-debug {:shape shape}])]))))
(defn check-props
[new-props old-props]
@ -79,6 +83,34 @@
(fdm/use-dynamic-modifiers objects (mf/ref-val node-ref) modifiers)
[:& frame-shape {:shape shape :ref node-ref}]))))
(defn image-size
[href]
(p/create
(fn [resolve _]
(let [img (js/Image.)
load-fn
(fn []
(let [width (.-naturalWidth img)
height (.-naturalHeight img)]
(resolve {:width width :height height})))]
(set! (.-onload img) load-fn)
(set! (.-src img) href)))))
(defn check-thumbnail-size
[image-node bounds file-id page-id frame-id]
(let [href (dom/get-attribute image-node "href")
width (dm/get-prop bounds :width)
height (dm/get-prop bounds :height)
[fixed-width fixed-height] (th/get-relative-size width height)]
;; Even if looks like we're doing a new request the browser caches the image
;; so really we don't. We need a different API to check the sizes
(-> (image-size href)
(p/then
(fn [{:keys [width height]}]
(when (or (not (mth/close? width fixed-width 2))
(not (mth/close? height fixed-height 2)))
(st/emit! (dwt/request-thumbnail file-id page-id frame-id "frame"))))))))
(defn root-frame-wrapper-factory
[shape-wrapper]
(let [frame-shape (frame-shape-factory shape-wrapper)]
@ -123,6 +155,7 @@
task-ref (mf/use-ref nil)
on-load (mf/use-fn (fn []
(check-thumbnail-size (mf/ref-val imposter-ref) bounds file-id page-id frame-id)
(mf/set-ref-val! tries-ref 0)
(reset! imposter-loaded true)))
on-error (mf/use-fn

10
frontend/src/app/main/ui/workspace/shapes/path/common.cljs
View File

@ -13,11 +13,11 @@
[okulary.core :as l]
[rumext.v2 :as mf]))
(def primary-color "var(--color-select)")
(def secondary-color "var(--color-distance)")
(def black-color "var(--color-black)")
(def white-color "var(--color-white)")
(def gray-color "var(--color-gray-20)")
(def primary-color "var(--color-accent-tertiary)")
(def secondary-color "var(--color-foreground-tertiary)")
(def black-color "var(--black)")
(def white-color "var(--white)")
(def gray-color "var(--off-white)")
(def current-edit-path-ref
(l/derived

2
frontend/src/app/main/ui/workspace/shapes/text/text_edition_outline.cljs
View File

@ -37,6 +37,6 @@
:width width
:height height
:transform transform
:style {:stroke "var(--color-select)"
:style {:stroke "var(--color-accent-tertiary)"
:stroke-width (/ 1 zoom)
:fill "none"}}]))

23
frontend/src/app/main/ui/workspace/sidebar/assets.scss
View File

@ -56,30 +56,39 @@
height: $s-32;
width: $s-32;
margin: 0;
border: 1px solid var(--color-background-tertiary);
border: $s-1 solid var(--input-border-color-rest);
border-radius: $br-8 $br-2 $br-2 $br-8;
background-color: var(--color-background-tertiary);
background-color: var(--input-background-color-rest);
svg {
height: $s-16;
width: $s-16;
stroke: var(--icon-foreground);
}
&:focus {
border: 1px solid var(--input-border-color-focus);
border: $s-1 solid var(--input-border-color-focus);
outline: 0;
background-color: var(--input-background-color-active);
color: var(--input-foreground-color-active);
background-color: var(--input-background-color-focus);
color: var(--input-foreground-color-focus);
svg {
background-color: var(--input-background-color-active);
background-color: var(--input-background-color-focus);
}
}
&:hover {
border: 1px solid var(--input-background-color-hover);
border: $s-1 solid var(--input-border-color-hover);
background-color: var(--input-background-color-hover);
svg {
background-color: var(--input-background-color-hover);
stroke: var(--button-foreground-hover);
}
&:focus {
border: $s-1 solid var(--input-border-color-focus);
outline: 0;
background-color: var(--input-background-color-focus);
color: var(--input-foreground-color-focus);
svg {
background-color: var(--input-background-color-focus);
}
}
}
}

17
frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
View File

@ -101,15 +101,15 @@
::mf/register-as :name-group-dialog}
[{:keys [path last-path accept] :as ctx
:or {path "" last-path ""}}]
(let [initial (mf/use-memo
(mf/deps last-path)
(constantly {:asset-name last-path}))
form (fm/use-form :spec ::name-group-form
:validators [(fm/validate-not-empty :name (tr "auth.name.not-all-space"))
(fm/validate-length :name fm/max-length-allowed (tr "auth.name.too-long"))]
:initial initial)
(let [initial (mf/use-memo
(mf/deps last-path)
(constantly {:asset-name last-path}))
form (fm/use-form :spec ::name-group-form
:validators [(fm/validate-not-empty :asset-name (tr "auth.name.not-all-space"))
(fm/validate-length :asset-name fm/max-length-allowed (tr "auth.name.too-long"))]
:initial initial)
create? (empty? path)
create? (empty? path)
on-close (mf/use-fn #(modal/hide!))
@ -122,6 +122,7 @@
(accept asset-name)
(accept path asset-name))
(modal/hide!))))]
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-header)}

2
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View File

@ -42,7 +42,7 @@
}
}
&:hover {
border: $s-1 solid var(--input-background-color-hover);
border: $s-1 solid var(--input-border-color-hover);
background-color: var(--input-background-color-hover);
svg {
background-color: var(--input-background-color-hover);

2
frontend/src/app/main/ui/workspace/sidebar/options.scss
View File

@ -17,7 +17,6 @@
.tab-spacing {
margin-right: $s-12;
margin-bottom: $s-8;
}
.content-class {
@ -33,4 +32,5 @@
display: flex;
flex-direction: column;
gap: $s-8;
padding-top: $s-8;
}

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
View File

@ -67,7 +67,7 @@
background-color: var(--input-background-color);
color: var(--menu-foreground-color);
box-sizing: border-box;
border: $s-1 solid var(--input-background-color);
border: $s-1 solid var(--input-border-color);
}
}
.actions {

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
View File

@ -165,7 +165,7 @@
{:value "6" :label "6x"}]
format-options [{:value "png" :label "PNG"}
{:value "jpeg" :label "JPEG"}
{:value "jpeg" :label "JPG"}
{:value "svg" :label "SVG"}
{:value "pdf" :label "PDF"}]]

23
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
View File

@ -55,6 +55,9 @@
toggle-more-options
(mf/use-fn #(swap! state* update :show-more-options not))
close-more-options
(mf/use-fn #(swap! state* assoc :show-more-options false))
handle-toggle-visibility
(mf/use-fn
(mf/deps grid)
@ -125,10 +128,15 @@
(assoc-in [:color :color] color)
(update :color dissoc :value))]
(when on-change
(on-change (assoc grid :params params))))))
(on-change (assoc grid :params params)))
(close-more-options))))
handle-set-as-default
(mf/use-fn (mf/deps grid) #(on-save-default grid))
(mf/use-fn
(mf/deps grid)
(fn []
(on-save-default grid)
(close-more-options)))
is-default (= (->> grid :params)
(->> grid :type default-grid-params))]
@ -180,7 +188,7 @@
[:& advanced-options {:class (stl/css :grid-advanced-options)
:visible? open?
:on-close toggle-advanced-options}
;; square
;; square
(when (= :square type)
[:div {:class (stl/css :square-row)}
[:div {:class (stl/css :advanced-row)}
@ -269,15 +277,14 @@
[:button {:class (stl/css-case :show-more-options true
:selected show-more-options?)
:on-click toggle-more-options}
:on-click toggle-more-options
:disabled is-default}
i/menu-refactor]
(when show-more-options?
[:div {:class (stl/css :more-options)}
[:button {:disabled is-default
:class (stl/css :option-btn)
[:button {:class (stl/css :option-btn)
:on-click handle-use-default} (tr "workspace.options.grid.params.use-default")]
[:button {:disabled is-default
:class (stl/css :option-btn)
[:button {:class (stl/css :option-btn)
:on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]])]])])]))
(mf/defc frame-grid

8
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
View File

@ -45,7 +45,7 @@
width: $s-28;
border-radius: $br-8 0 0 $br-8;
box-sizing: border-box;
border: $s-1 solid var(--input-background-color);
border: $s-1 solid var(--input-border-color);
svg {
@extend .button-icon;
}
@ -62,9 +62,9 @@
border-radius: 0;
height: 100%;
box-sizing: border-box;
border: $s-1 solid var(--input-background-color);
border: $s-1 solid var(--input-border-color);
&:hover {
border: $s-1 solid var(--input-background-color-hover);
border: $s-1 solid var(--input-border-color-hover);
}
}
}
@ -90,7 +90,7 @@
height: $s-32;
border-radius: 0 $br-8 $br-8 0;
box-sizing: border-box;
border: $s-1 solid var(--input-background-color);
border: $s-1 solid var(--input-border-color);
.numeric-input {
@extend .input-base;
margin: 0;

15
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
View File

@ -275,7 +275,7 @@
padding: 0;
margin-right: 0;
background-color: var(--input-background-color);
border: $s-1 solid var(--input-background-color);
border: $s-1 solid var(--input-border-color);
color: var(--input-foreground-color);
.start-flow-btn {
@include buttonStyle;
@ -315,22 +315,27 @@
&:hover {
background-color: var(--input-background-color-hover);
border: $s-1 solid var(--input-background-color-hover);
border: $s-1 solid var(--input-border-color-hover);
&:active {
background-color: var(--input-background-color-active);
background-color: var(--input-background-color-hover);
.flow-input-wrapper {
background-color: var(--input-background-color-active);
background-color: var(--input-background-color-hover);
}
}
}
&:focus,
&:focus-within {
background-color: var(--input-background-color-active);
background-color: var(--input-background-color-focus);
border: $s-1 solid var(--input-border-color-focus);
&:hover {
border: $s-1 solid var(--input-border-color-focus);
}
}
&.editing {
background-color: var(--input-background-color-active);
border: $s-1 solid var(--input-border-color-active);
}
}

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
View File

@ -278,7 +278,7 @@
width: $s-60;
margin: 0;
padding: 0;
border: $s-1 solid var(--input-background-color);
border: $s-1 solid var(--input-border-color);
position: relative;
.font-size-select {
@include removeInputStyle;

18
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
View File

@ -85,7 +85,7 @@
}
&:hover {
background-color: var(--input-background-color-hover);
border: $s-1 solid var(--input-background-color-hover);
border: $s-1 solid var(--input-border-color-hover);
.color-bullet-wrapper,
.color-name,
.detach-btn,
@ -107,14 +107,28 @@
background-color: var(--input-background-color-active);
}
}
&:focus,
&:focus-within {
background-color: var(--input-background-color-focus);
border: $s-1 solid var(--input-border-color-focus);
}
}
&:focus,
&:focus-within {
background-color: var(--input-background-color-active);
background-color: var(--input-background-color-focus);
border: $s-1 solid var(--input-border-color-focus);
&:hover {
background-color: var(--input-background-color-hover);
border: $s-1 solid var(--input-border-color-focus);
}
}
&.editing {
background-color: var(--input-background-color-active);
&:hover {
border: $s-1 solid var(--input-border-color-active);
}
}
}
.gradient-name-wrapper {

2
frontend/src/app/main/ui/workspace/viewport/drawarea.cljs
View File

@ -38,7 +38,7 @@
[:rect.main {:x x :y y
:width width
:height height
:style {:stroke "var(--color-select)"
:style {:stroke "var(--color-accent-tertiary)"
:fill "none"
:stroke-width (/ 1 zoom)}}])))

10
frontend/src/app/main/ui/workspace/viewport/gradients.cljs
View File

@ -22,14 +22,14 @@
[rumext.v2 :as mf]))
(def gradient-line-stroke-width 2)
(def gradient-line-stroke-color "var(--color-white)")
(def gradient-line-stroke-color "var(--white)")
(def gradient-square-width 15)
(def gradient-square-radius 2)
(def gradient-square-stroke-width 2)
(def gradient-width-handler-radius 5)
(def gradient-width-handler-color "var(--color-white)")
(def gradient-square-stroke-color "var(--color-white)")
(def gradient-square-stroke-color-selected "var(--color-select)")
(def gradient-width-handler-color "var(--white)")
(def gradient-square-stroke-color "var(--white)")
(def gradient-square-stroke-color-selected "var(--color-accent-tertiary)")
(mf/defc shadow [{:keys [id x y width height offset]}]
[:filter {:id id
@ -109,7 +109,7 @@
:rx (/ gradient-square-radius zoom)
:width (/ gradient-square-width zoom)
:height (/ gradient-square-width zoom)
:stroke (if selected "var(--color-primary)" "var(--color-white)")
:stroke (if selected "var(--color-accent-tertiary)" "var(--white)")
:stroke-width (/ gradient-square-stroke-width zoom)
:fill (:value color)
:fill-opacity (:opacity color)

22
frontend/src/app/main/ui/workspace/viewport/interactions.cljs
View File

@ -131,7 +131,7 @@
(when icon-pdata
[:path {:fill stroke
:stroke-width 2
:stroke "var(--color-white)"
:stroke "var(--white)"
:d icon-pdata
:transform (str
"scale(" inv-zoom ", " inv-zoom ") "
@ -164,7 +164,7 @@
(if-not selected?
[:g {:on-pointer-down #(on-pointer-down % index orig-shape)}
[:path {:stroke "var(--color-gray-20)"
[:path {:stroke "var(--off-white)"
:fill "none"
:pointer-events "visible"
:stroke-width (/ 2 zoom)
@ -173,13 +173,13 @@
[:& interaction-marker {:index index
:x dest-x
:y dest-y
:stroke "var(--color-gray-20)"
:stroke "var(--off-white)"
:action-type action-type
:arrow-dir arrow-dir
:zoom zoom}])]
[:g {:on-pointer-down #(on-pointer-down % index orig-shape)}
[:path {:stroke "var(--color-primary)"
[:path {:stroke "var(--color-accent-tertiary)"
:fill "none"
:pointer-events "visible"
:stroke-width (/ 2 zoom)
@ -188,17 +188,17 @@
(when dest-shape
[:& outline {:zoom zoom
:shape dest-shape
:color "var(--color-primary)"}])
:color "var(--color-accent-tertiary)"}])
[:& interaction-marker {:index index
:x orig-x
:y orig-y
:stroke "var(--color-primary)"
:stroke "var(--color-accent-tertiary)"
:zoom zoom}]
[:& interaction-marker {:index index
:x dest-x
:y dest-y
:stroke "var(--color-primary)"
:stroke "var(--color-accent-tertiary)"
:action-type action-type
:arrow-dir arrow-dir
:zoom zoom}]])))
@ -212,7 +212,7 @@
[:g {:on-pointer-down #(on-pointer-down % index shape)}
[:& interaction-marker {:x handle-x
:y handle-y
:stroke "var(--color-primary)"
:stroke "var(--color-accent-tertiary)"
:action-type :navigate
:arrow-dir :right
:zoom zoom}]]))
@ -256,8 +256,8 @@
[:& (mf/provider muc/render-thumbnails) {:value true}
[:& (mf/provider embed/context) {:value false}
[:& shape-wrapper {:shape dest-shape}]]]]
[:path {:stroke "var(--color-primary)"
:fill "var(--color-black)"
[:path {:stroke "var(--color-accent-tertiary)"
:fill "var(--black)"
:fill-opacity 0.5
:stroke-width 1
:d (dm/str "M" marker-x " " marker-y " "
@ -271,7 +271,7 @@
[:circle {:cx (+ marker-x (/ width 2))
:cy (+ marker-y (/ height 2))
:r 8
:fill "var(--color-primary)"}]]))))
:fill "var(--color-accent-tertiary)"}]]))))
(mf/defc interactions
[{:keys [current-transform objects zoom selected hover-disabled? page-id] :as props}]

4
frontend/src/app/main/ui/workspace/viewport/outline.cljs
View File

@ -34,7 +34,7 @@
objects (deref refs/workspace-page-objects)
color (if (ctn/in-any-component? objects shape)
"var(--color-component-highlight)"
"var(--color-primary)")
"var(--color-accent-tertiary)")
x (dm/get-prop shape :x)
y (dm/get-prop shape :y)
@ -65,7 +65,7 @@
(obj/merge!
#js {:fill "none"
:stroke color
:strokeWidth (/ 2 zoom)
:strokeWidth (/ 1 zoom)
:pointerEvents "none"
:transform transform}

4
frontend/src/app/main/ui/workspace/viewport/presence.cljs
View File

@ -25,8 +25,8 @@
[{:keys [session profile] :as props}]
(let [zoom (mf/deref refs/selected-zoom)
point (:point session)
background-color (:color session "var(--color-black)")
text-color (:text-color session "var(--color-white)")
background-color (:color session "var(--black)")
text-color (:text-color session "var(--white)")
transform (str/fmt "translate(%s, %s) scale(%s)" (:x point) (:y point) (/ 1 zoom))
shown-name (if (> (count (:fullname profile)) 16)
(str (str/slice (:fullname profile) 0 12) "...")

2
frontend/src/app/main/ui/workspace/viewport/rules.cljs
View File

@ -21,7 +21,7 @@
(def rule-area-size 22)
(def rule-area-half-size (/ rule-area-size 2))
(def rules-background "var(--panel-background-color)")
(def selection-area-color "var(--color-primary)")
(def selection-area-color "var(--color-accent-tertiary)")
(def selection-area-opacity 0.3)
(def over-number-size 100)
(def over-number-opacity 0.8)

6
frontend/src/app/main/ui/workspace/viewport/selection.cljs
View File

@ -31,7 +31,7 @@
(def resize-point-circle-radius 10)
(def resize-point-rect-size 8)
(def resize-side-height 8)
(def selection-rect-color-normal "var(--color-select)")
(def selection-rect-color-normal "var(--color-accent-tertiary)")
(def selection-rect-color-component "var(--color-component-highlight)")
(def selection-rect-width 1)
(def min-selrect-side 10)
@ -213,7 +213,7 @@
:style {:fillOpacity "1"
:strokeWidth "1px"
:vectorEffect "non-scaling-stroke"}
:fill "var(--color-white)"
:fill "var(--white)"
:stroke color
:cx cx'
:cy cy'}]
@ -279,7 +279,7 @@
:style {:fillOpacity 1
:stroke color
:strokeWidth "1px"
:fill "var(--color-white)"
:fill "var(--white)"
:vectorEffect "non-scaling-stroke"}
:data-position (name position)
:cx (+ x (/ length 2))

4
frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs
View File

@ -21,7 +21,7 @@
[cuerdas.core :as str]
[rumext.v2 :as mf]))
(def ^:private line-color "var(--color-snap)")
(def ^:private line-color "var(--color-foreground-tertiary)")
(def ^:private segment-gap 2)
(def ^:private segment-gap-side 5)
@ -85,7 +85,7 @@
[:text {:x (if (= coord :x) x (+ x (/ width 2)))
:y (- (+ y (/ (/ pill-text-height zoom) 2) (- (/ 6 zoom))) (if (= coord :x) (/ 2 zoom) 0))
:font-size (/ pill-text-font-size zoom)
:fill "var(--color-white)"
:fill "var(--white)"
:text-anchor "middle"}
(fmt/format-number distance)]])

2
frontend/src/app/main/ui/workspace/viewport/snap_points.cljs
View File

@ -16,7 +16,7 @@
[beicon.v2.core :as rx]
[rumext.v2 :as mf]))
(def ^:private line-color "var(--color-snap)")
(def ^:private line-color "var(--color-foreground-tertiary)")
(def ^:private line-opacity 0.6)
(def ^:private line-width 1)

20
frontend/src/app/main/ui/workspace/viewport/widgets.cljs
View File

@ -70,10 +70,8 @@
:width (:width data)
:height (:height data)
:style {;; Primary with 0.1 opacity
:fill "rgb(49, 239, 184, 0.1)"
;; Primary color
:stroke "rgb(49, 239, 184)"
:fill "var(--color-accent-tertiary-muted)"
:stroke "var(--color-accent-tertiary)"
:stroke-width (/ 1 zoom)}}]))
@ -86,10 +84,11 @@
;; Note that we don't use mf/deref to avoid a repaint dependency here
objects (deref refs/workspace-page-objects)
color (when selected?
color (if selected?
(if (ctn/in-any-component? objects frame)
"var(--color-component-highlight)"
"var(--color-primary-dark)"))
"var(--color-accent-tertiary)")
"#8f9da3") ;; TODO: Set this color on the DS
on-pointer-down
(mf/use-callback
@ -145,17 +144,18 @@
:width 12
:height 12
:class "workspace-frame-icon"
:style {:fill color}
:style {:stroke color
:fill "none"}
:visibility (if show-artboard-names? "visible" "hidden")}
(cond
(:use-for-thumbnail frame)
[:use {:href "#icon-set-thumbnail"}]
[:use {:href "#icon-boards-thumbnail-refactor"}]
grid-edition?
[:use {:href "#icon-grid-layout-mode"}]
[:use {:href "#icon-grid-refactor"}]
main-instance?
[:use {:href "#icon-component"}])])
[:use {:href "#icon-component-refactor"}])])
[:text {:x text-pos-x
:y 0