Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-06 03:51:21 -05:00
Code Issues Activity

Merge pull request #3915 from penpot/alotor-fixes-ui

Browse source 
Fixes new UI
This commit is contained in:
Eva Marco 2023-12-15 16:28:51 +01:00 • committed by GitHub
commit 89c14b25ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
62 changed files with 1043 additions and 797 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
backend/src/app/rpc/commands/search.clj
View file

@ -9,6 +9,7 @@
[app.common.spec :as us]
[app.db :as db]
[app.rpc :as-alias rpc]
[app.rpc.commands.files :refer [resolve-public-uri]]
[app.rpc.doc :as-alias doc]
[app.util.services :as sv]
[clojure.spec.alpha :as s]))
@ -37,12 +38,15 @@
)
select distinct
f.id,
f.revn,
f.project_id,
f.created_at,
f.modified_at,
f.name,
f.is_shared
f.is_shared,
ft.media_id
from file as f
left join file_thumbnail as ft on (ft.file_id = f.id and ft.revn = f.revn)
inner join projects as pr on (f.project_id = pr.id)
where f.name ilike ('%' || ? || '%')
and (f.deleted_at is null or f.deleted_at > now())
@ -50,10 +54,16 @@
(defn search-files
[conn profile-id team-id search-term]
(db/exec! conn [sql:search-files
profile-id team-id
profile-id team-id
search-term]))
(->> (db/exec! conn [sql:search-files
profile-id team-id
profile-id team-id
search-term])
(mapv (fn [row]
(if-let [media-id (:media-id row)]
(-> row
(dissoc :media-id)
(assoc :thumbnail-uri (resolve-public-uri media-id)))
(dissoc row :media-id))))))
(s/def ::team-id ::us/uuid)
(s/def ::search-files ::us/string)

16
common/src/app/common/geom/rect.cljc
View file

@ -353,3 +353,19 @@
(mth/max by1 y1)
(mth/min bx2 x2)
(mth/min by2 y2)))))
(defn fix-aspect-ratio
[bounds aspect-ratio]
(if aspect-ratio
(let [width (dm/get-prop bounds :width)
height (dm/get-prop bounds :height)
target-height (* width aspect-ratio)
target-width (* height (/ 1 aspect-ratio))]
(cond-> bounds
(> target-height height)
(-> (assoc :height target-height)
(update :y - (/ (- target-height height ) 2)))
(< target-height height)
(-> (assoc :width target-width)
(update :x - (/ (- target-width width ) 2)))))
bounds))

BIN
frontend/resources/fonts/RobotoMono-Regular.ttf Normal file
View file

Binary file not shown.

BIN
frontend/resources/fonts/SpaceMono-Bold.ttf
View file

Binary file not shown.

BIN
frontend/resources/fonts/SpaceMono-BoldItalic.ttf
View file

Binary file not shown.

BIN
frontend/resources/fonts/SpaceMono-Italic.ttf
View file

Binary file not shown.

BIN
frontend/resources/fonts/SpaceMono-Regular.ttf
View file

Binary file not shown.

602
frontend/resources/images/icons/login-illustration.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 273 KiB

After

Width:  |  Height:  |  Size: 279 KiB

4
frontend/resources/styles/common/refactor/color-defs.scss
View file

@ -4,7 +4,7 @@
//
// Copyright (c) KALEIDOS INC
@use "sass:color" as color;
@use "sass:color";
:root {
// DARK
@ -31,10 +31,12 @@
--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-3: #f3f4f6;
--light-gray-4: #eef0f2;
--black: #000;
--off-black: #495e74;
--off-black-30: #{color.change(#495e74, $alpha: 0.3)};
--purple: #6911d4;
--purple-30: rgba(105, 17, 212, 0.2);
--blue: #1345aa;

2
frontend/resources/styles/common/refactor/common-dashboard.scss
View file

@ -157,6 +157,8 @@
.btn-primary {
@extend .button-primary;
text-transform: uppercase;
font-size: $fs-14;
font-weight: $fw400;
}
.btn-secondary {

2
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -179,7 +179,7 @@
--menu-shortcut-foreground-color: var(--color-foreground-secondary);
--menu-shortcut-foreground-color-selected: var(--color-foreground-primary);
--menu-shortcut-foreground-color-hover: var(--color-foreground-primary);
--menu-shadow-color: var(--color-background-subtle);
--menu-shadow-color: var(--shadow-color);
--menu-background-color-disabled: var(--color-background-primary);
--menu-foreground-color-disabled: var(--color-foreground-secondary);
--menu-border-color-disabled: var(--color-background-quaternary);

7
frontend/resources/styles/common/refactor/mixins.scss
View file

@ -63,6 +63,13 @@
line-height: 1.2;
}
@mixin codeTypography {
font-family: "robotomono", monospace;
font-size: $fs-12;
font-weight: $fw400;
line-height: 1.2;
}
@mixin textEllipsis {
max-width: 99%;
overflow: hidden;

4
frontend/resources/styles/common/refactor/themes/default-theme.scss
View file

@ -21,6 +21,7 @@
--color-accent-primary-muted: var(--green-30);
--color-accent-secondary: var(--lilac);
--color-accent-tertiary: var(--strong-green);
--overlay-color: rgba(0, 0, 0, 0.4);
--ok-color: var(--dark-ok-color);
--warning-color: var(--dark-warning-color);
@ -28,5 +29,8 @@
--error-color: var(--dark-error-color);
--canvas-color: var(--color-canvas);
--shadow-color: var(--dark-gray-2-30);
--radio-button-box-shadow: 0 0 0 1px var(--dark-gray-2-30) inset;
@include meta.load-css("hljs-dark-theme");
}

184
frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss
View file

@ -1,98 +1,124 @@
/**
* Panda Syntax Theme for Highlight.js
* Based on: https://github.com/tinkertrain/panda-syntax-vscode
* Author: Annmarie Switzer <https://github.com/annmarie-switzer>
*/
/*!
Theme: GitHub Dark Dimmed
Description: Dark dimmed theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Colors taken from GitHub's CSS
*/
.hljs {
color: #e6e6e6;
background: #2a2c2d;
color: #adbac7;
background: #22272e;
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
/* prettylights-syntax-keyword */
color: #f47067;
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
/* prettylights-syntax-entity */
color: #dcbdfb;
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
/* prettylights-syntax-constant */
color: #6cb6ff;
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
/* prettylights-syntax-string */
color: #96d0ff;
}
.hljs-built_in,
.hljs-symbol {
/* prettylights-syntax-variable */
color: #f69d50;
}
.hljs-comment,
.hljs-code,
.hljs-formula {
/* prettylights-syntax-comment */
color: #768390;
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
/* prettylights-syntax-entity-tag */
color: #8ddb8c;
}
.hljs-subst {
/* prettylights-syntax-storage-modifier-import */
color: #adbac7;
}
.hljs-section {
/* prettylights-syntax-markup-heading */
color: #316dca;
font-weight: bold;
}
.hljs-bullet {
/* prettylights-syntax-markup-list */
color: #eac55f;
}
.hljs-emphasis {
/* prettylights-syntax-markup-italic */
color: #adbac7;
font-style: italic;
}
.hljs-strong {
/* prettylights-syntax-markup-bold */
color: #adbac7;
font-weight: bold;
}
.hljs-link {
text-decoration: underline;
.hljs-addition {
/* prettylights-syntax-markup-inserted */
color: #b4f1b4;
background-color: #1b4721;
}
.hljs-comment,
.hljs-quote {
color: #bbbbbb;
font-style: italic;
}
.hljs-params {
color: #bbbbbb;
}
.hljs-punctuation,
.hljs-attr {
color: #e6e6e6;
}
.hljs-selector-tag,
.hljs-name,
.hljs-meta {
color: #ff4b82;
}
.hljs-operator,
.hljs-char.escape_ {
color: #b084eb;
}
.hljs-keyword,
.hljs-deletion {
color: #ff75b5;
/* prettylights-syntax-markup-deleted */
color: #ffd8d3;
background-color: #78191b;
}
.hljs-regexp,
.hljs-selector-pseudo,
.hljs-selector-attr,
.hljs-variable.language_ {
color: #ff9ac1;
}
.hljs-subst,
.hljs-property,
.hljs-code,
.hljs-formula,
.hljs-section,
.hljs-title.function_ {
color: #45a9f9;
}
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-selector-class,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-meta .hljs-string {
color: #19f9d8;
}
.hljs-variable,
.hljs-template-variable,
.hljs-number,
.hljs-literal,
.hljs-type,
.hljs-char.escape_,
.hljs-link,
.hljs-built_in,
.hljs-title,
.hljs-selector-id,
.hljs-tag,
.hljs-doctag,
.hljs-attribute,
.hljs-template-tag,
.hljs-meta .hljs-keyword,
.hljs-punctuation {
color: #ffb86c;
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
/* purposely ignored */
}

182
frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss
View file

@ -1,94 +1,126 @@
/**
* Panda Syntax Theme for Highlight.js
* Based on: https://github.com/tinkertrain/panda-syntax-vscode
* Author: Annmarie Switzer <https://github.com/annmarie-switzer>
*/
/*!
Theme: GitHub
Description: Light theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Outdated base version: https://github.com/primer/github-syntax-light
Current colors taken from GitHub's CSS
*/
.hljs {
color: #2a2c2d;
background: #e6e6e6;
color: #24292e;
background: #ffffff;
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
/* prettylights-syntax-keyword */
color: #d73a49;
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
/* prettylights-syntax-entity */
color: #6f42c1;
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
/* prettylights-syntax-constant */
color: #005cc5;
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
/* prettylights-syntax-string */
color: #032f62;
}
.hljs-built_in,
.hljs-symbol {
/* prettylights-syntax-variable */
color: #e36209;
}
.hljs-comment,
.hljs-code,
.hljs-formula {
/* prettylights-syntax-comment */
color: #6a737d;
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
/* prettylights-syntax-entity-tag */
color: #22863a;
}
.hljs-subst {
/* prettylights-syntax-storage-modifier-import */
color: #24292e;
}
.hljs-section {
/* prettylights-syntax-markup-heading */
color: #005cc5;
font-weight: bold;
}
.hljs-bullet {
/* prettylights-syntax-markup-list */
color: #735c0f;
}
.hljs-emphasis {
/* prettylights-syntax-markup-italic */
color: #24292e;
font-style: italic;
}
.hljs-strong {
/* prettylights-syntax-markup-bold */
color: #24292e;
font-weight: bold;
}
.hljs-link {
text-decoration: underline;
.hljs-addition {
/* prettylights-syntax-markup-inserted */
color: #22863a;
background-color: #f0fff4;
}
.hljs-comment,
.hljs-quote {
color: #676b79;
font-style: italic;
}
.hljs-params {
color: #676b79;
}
.hljs-punctuation,
.hljs-attr {
color: #2a2c2d;
}
.hljs-selector-tag,
.hljs-name,
.hljs-meta,
.hljs-operator,
.hljs-char.escape_ {
color: #c56200;
}
.hljs-keyword,
.hljs-deletion {
color: #d92792;
/* prettylights-syntax-markup-deleted */
color: #b31d28;
background-color: #ffeef0;
}
.hljs-regexp,
.hljs-selector-pseudo,
.hljs-selector-attr,
.hljs-variable.language_ {
color: #cc5e91;
}
.hljs-subst,
.hljs-property,
.hljs-code,
.hljs-formula,
.hljs-section,
.hljs-title.function_ {
color: #3787c7;
}
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-selector-class,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-meta .hljs-string {
color: #0d7d6c;
}
.hljs-variable,
.hljs-template-variable,
.hljs-number,
.hljs-literal,
.hljs-type,
.hljs-char.escape_,
.hljs-link,
.hljs-built_in,
.hljs-title,
.hljs-selector-id,
.hljs-tag,
.hljs-doctag,
.hljs-attribute,
.hljs-template-tag,
.hljs-meta .hljs-keyword {
color: #7641bb;
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
/* purposely ignored */
color: #6a737d;
}

5
frontend/resources/styles/common/refactor/themes/light-theme.scss
View file

@ -21,11 +21,16 @@
--color-accent-primary-muted: var(--purple-30);
--color-accent-secondary: var(--blue);
--color-accent-tertiary: var(--strong-purple);
--overlay-color: rgba(255, 255, 255, 0.4);
--ok-color: var(--light-ok-color);
--warning-color: var(--light-warning-color);
--pending-color: var(--light-pending-color);
--error-color: var(--light-error-color);
--canvas-color: var(--color-canvas);
--shadow-color: var(--off-black-30);
--radio-button-box-shadow: 0 0 0 1px var(--light-gray-2) inset;
@include meta.load-css("hljs-light-theme");
}

12
frontend/src/app/main/data/dashboard.cljs
View file

@ -831,9 +831,15 @@
(ptk/reify ::set-file-thumbnail
ptk/UpdateEvent
(update [_ state]
(-> state
(d/update-in-when [:dashboard-files file-id] assoc :thumbnail-uri thumbnail-uri)
(d/update-in-when [:dashboard-recent-files file-id] assoc :thumbnail-uri thumbnail-uri)))))
(letfn [(update-search-files [files]
(->> files
(mapv #(cond-> %
(= file-id (:id %))
(assoc :thumbnail-uri thumbnail-uri)))))]
(-> state
(d/update-in-when [:dashboard-files file-id] assoc :thumbnail-uri thumbnail-uri)
(d/update-in-when [:dashboard-recent-files file-id] assoc :thumbnail-uri thumbnail-uri)
(d/update-when :dashboard-search-result update-search-files))))))
;; --- EVENT: create-file

24
frontend/src/app/main/render.cljs
View file

@ -66,16 +66,18 @@
:fill color}])
(defn- calculate-dimensions
[objects]
(let [bounds (->> (ctst/get-root-objects objects)
(map (partial gsb/get-object-bounds objects))
(grc/join-rects))]
[objects aspect-ratio]
(let [bounds
(->> (ctst/get-root-objects objects)
(map (partial gsb/get-object-bounds objects))
(grc/join-rects))]
(-> bounds
(update :x mth/finite 0)
(update :y mth/finite 0)
(update :width mth/finite 100000)
(update :height mth/finite 100000)
(grc/update-rect :position))))
(grc/update-rect :position)
(grc/fix-aspect-ratio aspect-ratio))))
(declare shape-wrapper-factory)
@ -194,11 +196,11 @@
(mf/defc page-svg
{::mf/wrap [mf/memo]}
[{:keys [data use-thumbnails embed include-metadata] :as props
[{:keys [data use-thumbnails embed include-metadata aspect-ratio] :as props
:or {embed false include-metadata false}}]
(let [objects (:objects data)
shapes (cfh/get-immediate-children objects)
dim (calculate-dimensions objects)
dim (calculate-dimensions objects aspect-ratio)
vbox (format-viewbox dim)
bgcolor (dm/get-in data [:options :background] default-color)
@ -253,11 +255,14 @@
;; the viewer and inspector
(mf/defc frame-svg
{::mf/wrap [mf/memo]}
[{:keys [objects frame zoom use-thumbnails] :or {zoom 1} :as props}]
[{:keys [objects frame zoom use-thumbnails aspect-ratio background-color] :or {zoom 1} :as props}]
(let [frame-id (:id frame)
bgcolor (d/nilv background-color default-color)
include-metadata (mf/use-ctx export/include-metadata-ctx)
bounds (gsb/get-object-bounds objects frame)
bounds (-> (gsb/get-object-bounds objects frame)
(grc/fix-aspect-ratio aspect-ratio))
;; Bounds without shadows/blur will be the bounds of the thumbnail
bounds2 (gsb/get-object-bounds objects (dissoc frame :shadow :blur))
@ -305,6 +310,7 @@
:xmlns "http://www.w3.org/2000/svg"
:xmlnsXlink "http://www.w3.org/1999/xlink"
:xmlns:penpot (when include-metadata "https://penpot.app/xmlns")
:style {:background bgcolor}
:fill "none"}
[:& shape-wrapper {:shape frame}]]]))

1
frontend/src/app/main/ui/auth.scss
View file

@ -15,6 +15,7 @@
height: 100%;
padding: $s-32;
width: 100%;
overflow: auto;
&.no-illustration {
display: flex;

16
frontend/src/app/main/ui/components/color_bullet_new.cljs
View file

@ -17,11 +17,13 @@
{::mf/wrap [mf/memo]
::mf/wrap-props false}
[{:keys [color on-click mini? area]}]
(let [on-click (mf/use-fn
(mf/deps color on-click)
(fn [event]
(when (fn? on-click)
(^function on-click color event))))]
(let [read-only? (nil? on-click)
on-click
(mf/use-fn
(mf/deps color on-click)
(fn [event]
(when (fn? on-click)
(^function on-click color event))))]
(if (uc/multiple? color)
[:div {:on-click on-click :class (stl/css :color-bullet :multiple)}]
@ -39,7 +41,9 @@
:is-not-library-color (nil? id)
:is-gradient (some? gradient)
:is-transparent (and opacity (> 1 opacity))
:grid-area area)
:grid-area area
:read-only read-only?)
:data-readonly (str read-only?)
:on-click on-click}
(cond

3
frontend/src/app/main/ui/components/color_bullet_new.scss
View file

@ -64,7 +64,7 @@
height: 100%;
background-color: var(--color-bullet-background-color);
}
&:hover {
&:hover:not(.read-only) {
border: $s-2 solid var(--color-bullet-border-color-selected);
}
}
@ -87,6 +87,7 @@
@include inspectValue;
color: var(--palette-text-color);
height: $s-16;
text-align: center;
}
.no-text {

1
frontend/src/app/main/ui/components/radio_buttons.scss
View file

@ -40,6 +40,7 @@
&.checked {
border: none;
background-color: var(--radio-btn-background-color-selected);
box-shadow: var(--radio-button-box-shadow);
svg {
stroke: var(--radio-btn-foreground-color-selected);
}

3
frontend/src/app/main/ui/components/title_bar.scss
View file

@ -24,6 +24,7 @@
height: 100%;
min-height: $s-32;
color: var(--title-foreground-color);
overflow: hidden;
}
.title-only {
margin-left: $s-8;
@ -36,6 +37,7 @@
padding: 0;
color: var(--title-foreground-color);
stroke: var(--title-foreground-color);
overflow: hidden;
.toggle-btn {
@include buttonStyle;
display: flex;
@ -44,6 +46,7 @@
padding: 0;
color: var(--title-foreground-color);
stroke: var(--title-foreground-color);
overflow: hidden;
.collapsabled-icon {
@include flexCenter;
height: $s-24;

2
frontend/src/app/main/ui/dashboard/grid.cljs
View file

@ -61,7 +61,7 @@
(rx/map (fn [styles]
(assoc result
:styles styles
:width 250))))))
:width 252))))))
(rx/mapcat thr/render)
(rx/mapcat (partial persist-thumbnail file-id revn))))

28
frontend/src/app/main/ui/dashboard/grid.scss
View file

@ -7,7 +7,7 @@
@import "refactor/common-refactor.scss";
$thumbnail-default-width: $s-252; // Default width
$thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
$thumbnail-default-height: $s-168; // Default width
.dashboard-grid {
font-size: $fs-14;
@ -44,10 +44,12 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
}
.grid-item-th {
border-radius: $br-4;
border-radius: $br-8;
text-align: initial;
width: var(--th-width, #{$thumbnail-default-width});
height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
height: var(--th-height, #{$thumbnail-default-height});
background-size: cover;
overflow: hidden;
img {
object-fit: contain;
@ -59,7 +61,7 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
outline: $br-4 solid $da-primary;
text-align: initial;
width: calc(var(--th-width) + $s-12);
height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
height: var(--th-height, #{$thumbnail-default-height});
}
&.overlay {
@ -131,10 +133,10 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
.item-badge {
background-color: $da-primary;
border: none;
border-radius: $br-4;
border-radius: $br-6;
position: absolute;
top: $s-8;
right: $s-8;
top: $s-12;
right: $s-12;
height: $s-32;
width: $s-32;
display: flex;
@ -258,17 +260,10 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
.grid-item-th {
border-radius: $br-4;
cursor: pointer;
background-position: center;
background-size: auto 80%;
background-repeat: no-repeat;
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
background-color: var(--canvas-color);
display: flex;
justify-content: center;
flex-direction: row;
@ -283,8 +278,9 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
width: 100%;
}
svg#loader-pencil {
fill: $db-cuaternary;
:global(svg#loader-pencil) {
stroke: $db-cuaternary;
width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25);
}
}

2
frontend/src/app/main/ui/dashboard/placeholder.scss
View file

@ -65,7 +65,7 @@
text-transform: uppercase;
border: $s-2 solid transparent;
width: var(--th-width, #{g.$thumbnail-default-width});
height: calc(var(--th-width, #{g.$thumbnail-default-width}) * #{g.$thumbnail-aspect-ration});
height: var(--th-height, #{g.$thumbnail-default-height});
svg {
width: $s-32;

34
frontend/src/app/main/ui/dashboard/projects.scss
View file

@ -33,7 +33,6 @@
.project {
align-items: center;
background: $df-primary;
border-radius: $br-4;
display: flex;
flex-direction: row;
@ -87,8 +86,8 @@
cursor: pointer;
font-size: $fs-16;
line-height: 0.8;
font-weight: $fw700;
color: $db-secondary;
font-weight: $fw400;
color: $df-primary;
margin-right: $s-4;
margin-right: $s-12;
}
@ -98,7 +97,7 @@
font-size: $fs-14;
line-height: 1.15;
font-weight: $fw400;
color: $db-primary;
color: $df-secondary;
@media (max-width: 760px) {
display: none;
}
@ -109,6 +108,9 @@
opacity: 1;
margin-left: $s-32;
svg {
fill: $df-primary;
}
.btn-small {
height: $s-32;
margin: 0 $s-8;
@ -139,7 +141,7 @@
&.active {
svg {
fill: $db-tertiary;
fill: $da-primary;
}
}
}
@ -188,28 +190,6 @@
}
}
.dashboard-project-row .project {
background-color: transparent;
h2 {
color: $df-primary;
font-weight: 400;
}
span,
.info,
.recent-files-row-title-info {
color: $df-secondary;
}
.project-actions {
svg {
fill: $df-primary;
}
.pin-icon svg {
fill: $df-secondary;
}
}
}
.team-hero {
background-color: $db-tertiary;
border-radius: $br-8;

7
frontend/src/app/main/ui/dashboard/sidebar.scss
View file

@ -335,7 +335,7 @@
transform: rotate(45deg);
&:hover {
fill: var(--warning-color);
fill: $da-primary;
}
}
}
@ -420,7 +420,10 @@
}
&:hover {
background-color: $db-cuaternary;
background-color: $db-secondary;
span {
color: $da-primary;
}
}
&.current {

8
frontend/src/app/main/ui/hooks.cljs
View file

@ -367,13 +367,17 @@
limit (mth/max 1 limit)
th-size (when width
(- (/ (- width 32 (* (dec limit) 24)) limit) 12))]
(mth/floor (- (/ (- width 32 (* (dec limit) 24)) limit) 12)))
;; Need an even value
th-size (if (odd? (int th-size)) (- th-size 1) th-size)]
(mf/with-effect
[th-size]
(when th-size
(let [node (mf/ref-val rowref)]
(.setProperty (.-style node) "--th-width" (str th-size "px")))))
(.setProperty (.-style node) "--th-width" (str th-size "px"))
(.setProperty (.-style node) "--th-height" (str (mth/ceil (* th-size (/ 2 3))) "px")))))
(mf/with-effect []
(let [node (mf/ref-val rowref)

110
frontend/src/app/main/ui/hooks/resize.cljs
View file

@ -24,62 +24,72 @@
(set! last-resize-type type))
(defn use-resize-hook
[key initial min-val max-val axis negate? resize-type]
([key initial min-val max-val axis negate? resize-type]
(use-resize-hook key initial min-val max-val axis negate? resize-type nil))
(let [current-file-id (mf/use-ctx ctx/current-file-id)
size-state (mf/use-state (or (get-in @storage [::saved-resize current-file-id key]) initial))
parent-ref (mf/use-ref nil)
([key initial min-val max-val axis negate? resize-type on-change-size]
(let [current-file-id (mf/use-ctx ctx/current-file-id)
size-state (mf/use-state (or (get-in @storage [::saved-resize current-file-id key]) initial))
parent-ref (mf/use-ref nil)
dragging-ref (mf/use-ref false)
start-size-ref (mf/use-ref nil)
start-ref (mf/use-ref nil)
dragging-ref (mf/use-ref false)
start-size-ref (mf/use-ref nil)
start-ref (mf/use-ref nil)
on-pointer-down
(mf/use-callback
(mf/deps @size-state)
(fn [event]
(dom/capture-pointer event)
(mf/set-ref-val! start-size-ref @size-state)
(mf/set-ref-val! dragging-ref true)
(mf/set-ref-val! start-ref (dom/get-client-position event))
(set! last-resize-type resize-type)))
on-pointer-down
(mf/use-callback
(mf/deps @size-state)
(fn [event]
(dom/capture-pointer event)
(mf/set-ref-val! start-size-ref @size-state)
(mf/set-ref-val! dragging-ref true)
(mf/set-ref-val! start-ref (dom/get-client-position event))
(set! last-resize-type resize-type)))
on-lost-pointer-capture
(mf/use-callback
(fn [event]
(dom/release-pointer event)
(mf/set-ref-val! start-size-ref nil)
(mf/set-ref-val! dragging-ref false)
(mf/set-ref-val! start-ref nil)
(set! last-resize-type nil)))
on-lost-pointer-capture
(mf/use-callback
(fn [event]
(dom/release-pointer event)
(mf/set-ref-val! start-size-ref nil)
(mf/set-ref-val! dragging-ref false)
(mf/set-ref-val! start-ref nil)
(set! last-resize-type nil)))
on-pointer-move
(mf/use-callback
(mf/deps min-val max-val negate?)
(fn [event]
(when (mf/ref-val dragging-ref)
(let [start (mf/ref-val start-ref)
pos (dom/get-client-position event)
delta (-> (gpt/to-vec start pos)
(cond-> negate? gpt/negate)
(get axis))
start-size (mf/ref-val start-size-ref)
new-size (-> (+ start-size delta) (max min-val) (min max-val))]
(reset! size-state new-size)
(swap! storage assoc-in [::saved-resize current-file-id key] new-size)))))
on-pointer-move
(mf/use-callback
(mf/deps min-val max-val negate?)
(fn [event]
(when (mf/ref-val dragging-ref)
(let [start (mf/ref-val start-ref)
pos (dom/get-client-position event)
delta (-> (gpt/to-vec start pos)
(cond-> negate? gpt/negate)
(get axis))
start-size (mf/ref-val start-size-ref)
new-size (-> (+ start-size delta) (max min-val) (min max-val))]
(reset! size-state new-size)
(swap! storage assoc-in [::saved-resize current-file-id key] new-size)
(when on-change-size (on-change-size new-size))))))
set-size
(mf/use-callback
(fn [new-size]
(let [new-size (mth/clamp new-size min-val max-val)]
(reset! size-state new-size)
(swap! storage assoc-in [::saved-resize current-file-id key] new-size))))]
{:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move
:parent-ref parent-ref
:set-size set-size
:size @size-state}))
set-size
(mf/use-callback
(mf/deps on-change-size)
(fn [new-size]
(let [new-size (mth/clamp new-size min-val max-val)]
(reset! size-state new-size)
(swap! storage assoc-in [::saved-resize current-file-id key] new-size)
(when on-change-size (on-change-size new-size)))))]
(mf/use-effect
(fn []
(when on-change-size (on-change-size @size-state))))
{:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move
:parent-ref parent-ref
:set-size set-size
:size @size-state})))
(defn use-resize-observer
[callback]

5
frontend/src/app/main/ui/viewer/inspect/code.cljs
View file

@ -261,7 +261,10 @@
:collapsabled-icon true
:rotated collapsed-css?)}
i/arrow-refactor]]
[:span {:class (stl/css :code-lang)} "CSS"]
[:& select {:default-value style-type
:class (stl/css :code-lang-select)
:options [{:label "CSS" :value "css"}]}]
[:div {:class (stl/css :action-btns)}
[:button {:class (stl/css :expand-button)

95
frontend/src/app/main/ui/viewer/inspect/code.scss
View file

@ -7,6 +7,12 @@
@import "refactor/common-refactor.scss";
.element-options {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
padding-bottom: $s-16;
.attributes-block {
.download-button {
@extend .button-secondary;
@ -17,46 +23,67 @@
}
}
.code-block {
@include codeTypography;
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
min-height: 0;
overflow: hidden;
padding: 0 $s-4 $s-8 0;
.code-row-lang {
display: flex;
justify-content: space-between;
gap: $s-4;
width: 100%;
.code-lang {
@include tabTitleTipography;
display: flex;
align-items: center;
}
.action-btns {
display: flex;
gap: $s-4;
flex: 1;
justify-content: end;
.expand-button {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
}
.code-lang-select {
@include tabTitleTipography;
width: $s-92;
border: $s-1 solid transparent;
background-color: transparent;
color: var(--menu-foreground-color-disabled);
}
pre {
border-radius: $br-8;
padding: $s-16;
max-height: var(--code-height);
overflow: auto;
height: 100%;
}
.code-row-display {
margin-bottom: $s-8;
// Overrides background setted in the theme
:global(.hljs) {
background: $db-tertiary;
}
}
.code-row-lang {
display: flex;
justify-content: space-between;
gap: $s-4;
width: 100%;
}
.code-lang {
@include tabTitleTipography;
display: flex;
align-items: center;
}
.action-btns {
display: flex;
gap: $s-4;
flex: 1;
justify-content: end;
.expand-button {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
}
.code-lang-select {
@include tabTitleTipography;
width: $s-72;
border: $s-1 solid transparent;
background-color: transparent;
color: var(--menu-foreground-color-disabled);
}
.code-row-display {
flex: 1;
min-height: 0;
overflow: hidden;
padding-bottom: $s-8;
}
}
.toggle-btn {

16
frontend/src/app/main/ui/workspace.cljs
View file

@ -61,7 +61,8 @@
(mf/defc workspace-content
{::mf/wrap-props false}
[{:keys [file layout page-id wglobal]}]
(let [selected (mf/deref refs/selected-shapes)
(let [palete-size (mf/use-state nil)
selected (mf/deref refs/selected-shapes)
{:keys [vport] :as wlocal} (mf/deref refs/workspace-local)
{:keys [options-mode]} wglobal
@ -78,11 +79,17 @@
(when (and vport (not= size vport))
(st/emit! (dw/update-viewport-size resize-type size)))))
on-resize-palette
(mf/use-fn
(fn [size]
(reset! palete-size size)))
node-ref (use-resize-observer on-resize)]
[:*
(if new-css-system
(when (not hide-ui?)
[:& palette {:layout layout}])
[:& palette {:layout layout
:on-change-palette-size on-resize-palette}])
[:*
(when (and colorpalette? (not hide-ui?))
[:& colorpalette])
@ -107,7 +114,10 @@
:wlocal wlocal
:wglobal wglobal
:selected selected
:layout layout}]]]
:layout layout
:palete-size
(when (and (or colorpalette? textpalette?) (not hide-ui?))
@palete-size)}]]]
(when-not hide-ui?
[:*

2
frontend/src/app/main/ui/workspace.scss
View file

@ -12,7 +12,7 @@
@include font-face("worksans", "WorkSans-Bold", bold);
// Space mono
@include font-face("spacemono", "SpaceMono-Regular", normal);
@include font-face("robotomono", "RobotoMono-Regular", normal);
:global(:root) {
--s-4: 0.25rem;

4
frontend/src/app/main/ui/workspace/left_header.scss
View file

@ -93,7 +93,9 @@
cursor: pointer;
}
.separator {
height: $s-12;
margin-top: $s-8;
height: $s-4;
border-top: 1px solid $db-secondary;
}
.shortcut {
@extend .shortcut;

14
frontend/src/app/main/ui/workspace/palette.cljs
View file

@ -46,7 +46,7 @@
"paddingRight" "calc(var(--s-4) * 70)"}))
(mf/defc palette
[{:keys [layout]}]
[{:keys [layout on-change-palette-size]}]
(let [color-palette? (:colorpalette layout)
text-palette? (:textpalette layout)
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
@ -57,10 +57,11 @@
on-select (mf/use-fn #(reset! selected %))
rulers? (mf/deref refs/rules?)
{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
(r/use-resize-hook :palette 72 54 80 :y true :bottom)
(r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-palette-size)
vport (mf/deref viewport)
vport-width (:width vport)
on-resize
(mf/use-callback
(fn [_]
@ -98,10 +99,11 @@
any-palette? (or color-palette? text-palette?)
size-classname (cond
(<= size 64) (css :small-palette)
(<= size 72) (css :mid-palette)
(<= size 80) (css :big-palette))]
size-classname
(cond
(<= size 64) (css :small-palette)
(<= size 72) (css :mid-palette)
(<= size 80) (css :big-palette))]
(mf/with-effect []
(let [key1 (events/listen js/window "resize" on-resize)]

7
frontend/src/app/main/ui/workspace/presence.cljs
View file

@ -8,6 +8,7 @@
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.config :as cfg]
[app.main.refs :as refs]
[app.main.ui.context :as ctx]
@ -49,15 +50,13 @@
(if new-css-system
[:*
(when (and (< 2 num-users) open?)
(when (and (> num-users 2) open?)
[:button
{:id "users-close"
:class (stl/css :active-users-opened)
:on-click close-users-widget
:on-blur close-users-widget}
[:ul {:class (stl/css :active-users-list)}
(when (< 2 num-users)
[:li [:span {:class (stl/css :users-num)} num-users]])
(for [session user-ids]
[:& session-widget
{:session session
@ -69,7 +68,7 @@
:on-click open-users-widget}
[:ul {:class (stl/css :active-users-list)}
(when (< 2 num-users) [:span {:class (stl/css :users-num)} num-users])
(when (> num-users 2) [:span {:class (stl/css :users-num)} (dm/str "+" (- num-users 2))])
(for [[index session] (d/enumerate first-users)]
[:& session-widget
{:session session

2
frontend/src/app/main/ui/workspace/right_header.cljs
View file

@ -203,6 +203,8 @@
[:& persistence-state-widget]
[:div {:class (stl/css :separator)}]
[:div {:class (stl/css :zoom-section)}
[:& zoom-widget-workspace

6
frontend/src/app/main/ui/workspace/right_header.scss
View file

@ -11,7 +11,7 @@
align-items: center;
min-width: $s-256;
padding: $s-8;
gap: $s-2;
gap: $s-8;
background-color: var(--panel-background-color);
.users-section {
position: relative;
@ -19,6 +19,9 @@
max-width: $s-72;
padding: $s-4 $s-6;
}
.separator {
flex: 1;
}
.zoom-section {
.zoom-widget {
@include buttonStyle;
@ -27,6 +30,7 @@
justify-content: center;
height: $s-28;
max-width: $s-48;
width: $s-48;
border-radius: $br-8;
.label {
@include titleTipography;

2
frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
View file

@ -88,8 +88,6 @@
}
.drop-space {
height: $s-12;
border-radius: $br-8;
background-color: var(--assets-item-background-color);
}
.dragging {
position: absolute;

6
frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
View file

@ -95,7 +95,7 @@
on-component-click
(mf/use-fn
(mf/deps component-id)
(mf/deps component-id on-asset-click)
(fn [event]
(dom/stop-propagation event)
(on-asset-click component-id unselect-all event)))
@ -141,7 +141,7 @@
on-context-menu
(mf/use-fn
(mf/deps component-id)
(mf/deps on-context-menu component-id)
(partial on-context-menu component-id))]
(if ^boolean new-css-system
@ -449,6 +449,7 @@
toggle-list-style (mf/use-ctx cmm/assets-toggle-list-style)
selected (:components selected)
selected-full (into #{} (filter #(contains? selected (:id %))) components)
multi-components? (> (count selected) 1)
multi-assets? (or (seq (:graphics selected))
@ -519,6 +520,7 @@
(mf/use-fn
(mf/deps selected on-clear-selection read-only?)
(fn [component-id event]
(dom/stop-propagation event)
(dom/prevent-default event)
(let [pos (dom/get-client-position event)]

6
frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
View file

@ -9,8 +9,6 @@
.component-group {
.drop-space {
height: $s-12;
border-radius: $br-8;
background-color: var(--color-foreground-secondary);
}
.asset-grid {
display: grid;
@ -22,7 +20,7 @@
@include flexCenter;
position: relative;
padding: $s-8;
border: $s-2 solid transparent;
border: $s-4 solid transparent;
border-radius: $br-8;
background-color: var(--color-foreground-secondary);
overflow: hidden;
@ -100,7 +98,7 @@
}
&.selected {
border: $s-1 solid var(--assets-item-border-color);
border: $s-4 solid var(--assets-item-border-color);
}
}
.grid-placeholder {

2
frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss
View file

@ -9,8 +9,6 @@
.graphics-group {
.drop-space {
height: $s-12;
border-radius: $br-8;
background-color: var(--color-foreground-secondary);
}
.asset-grid {
display: grid;

2
frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
View file

@ -22,8 +22,6 @@
padding: 0 0 0 $s-4;
.drop-space {
height: $s-12;
border-radius: $br-8;
background-color: var(--assets-item-background-color);
}
.grid-placeholder {
height: $s-2;

193
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
View file

@ -180,108 +180,109 @@
:on-click on-remove}
i/remove-refactor]]]
[:& advanced-options {:class (stl/css :grid-advanced-options)
:visible? open?
:on-close toggle-advanced-options}
;; square
(when (= :square type)
[:div {:class (stl/css :square-row)}
[:div {:class (stl/css :advanced-row)}
[:& color-row {:color (:color params)
:title (tr "workspace.options.grid.params.color")
:disable-gradient true
:disable-image true
:on-change handle-change-color
:on-detach handle-detach-color}]
[:button {:class (stl/css-case :show-more-options true
:selected show-more-options?)
:on-click toggle-more-options}
i/menu-refactor]]
(when show-more-options?
[:div {:class (stl/css :second-row)}
[:button {:class (stl/css-case :btn-options true
:disabled is-default)
:disabled is-default
:on-click handle-use-default}
[:span (tr "workspace.options.grid.params.use-default")]]
[:button {:class (stl/css-case :btn-options true
:disabled is-default)
:disabled is-default
:on-click handle-set-as-default}
[:span (tr "workspace.options.grid.params.set-default")]]])])
(when (:display grid)
[:& advanced-options {:class (stl/css :grid-advanced-options)
:visible? open?
:on-close toggle-advanced-options}
;; square
(when (= :square type)
[:div {:class (stl/css :square-row)}
[:div {:class (stl/css :advanced-row)}
[:& color-row {:color (:color params)
:title (tr "workspace.options.grid.params.color")
:disable-gradient true
:disable-image true
:on-change handle-change-color
:on-detach handle-detach-color}]
[:button {:class (stl/css-case :show-more-options true
:selected show-more-options?)
:on-click toggle-more-options}
i/menu-refactor]]
(when show-more-options?
[:div {:class (stl/css :second-row)}
[:button {:class (stl/css-case :btn-options true
:disabled is-default)
:disabled is-default
:on-click handle-use-default}
[:span (tr "workspace.options.grid.params.use-default")]]
[:button {:class (stl/css-case :btn-options true
:disabled is-default)
:disabled is-default
:on-click handle-set-as-default}
[:span (tr "workspace.options.grid.params.set-default")]]])])
(when (or (= :column type) (= :row type))
[:div {:class (stl/css :column-row)}
[:div {:class (stl/css :advanced-row)}
[:div {:class (stl/css :orientation-select-wrapper)}
[:& select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
:default-value (:type params)
:class (stl/css :orientation-select)
:options [{:value :stretch :label (tr "workspace.options.grid.params.type.stretch")}
{:value :left :label (if (= type :row)
(tr "workspace.options.grid.params.type.top")
(tr "workspace.options.grid.params.type.left"))}
{:value :center :label (tr "workspace.options.grid.params.type.center")}
{:value :right :label (if (= type :row)
(tr "workspace.options.grid.params.type.bottom")
(tr "workspace.options.grid.params.type.right"))}]
:on-change (handle-change :params :type)}]]
(when (or (= :column type) (= :row type))
[:div {:class (stl/css :column-row)}
[:div {:class (stl/css :advanced-row)}
[:div {:class (stl/css :orientation-select-wrapper)}
[:& select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
:default-value (:type params)
:class (stl/css :orientation-select)
:options [{:value :stretch :label (tr "workspace.options.grid.params.type.stretch")}
{:value :left :label (if (= type :row)
(tr "workspace.options.grid.params.type.top")
(tr "workspace.options.grid.params.type.left"))}
{:value :center :label (tr "workspace.options.grid.params.type.center")}
{:value :right :label (if (= type :row)
(tr "workspace.options.grid.params.type.bottom")
(tr "workspace.options.grid.params.type.right"))}]
:on-change (handle-change :params :type)}]]
[:div {:class (stl/css :color-wrapper)}
[:& color-row {:color (:color params)
:title (tr "workspace.options.grid.params.color")
:disable-gradient true
:disable-image true
:on-change handle-change-color
:on-detach handle-detach-color}]]]
[:div {:class (stl/css :color-wrapper)}
[:& color-row {:color (:color params)
:title (tr "workspace.options.grid.params.color")
:disable-gradient true
:disable-image true
:on-change handle-change-color
:on-detach handle-detach-color}]]]
[:div {:class (stl/css :advanced-row)}
[:div {:class (stl/css :height)
:title (if (= :row type)
(tr "workspace.options.grid.params.height")
(tr "workspace.options.grid.params.width"))}
[:span {:class (stl/css :icon-text)}
(if (= :row type)
"H"
"W")]
[:> numeric-input* {:placeholder "Auto"
:on-change handle-change-item-length
:nillable true
:className (stl/css :numeric-input)
:value (or (:item-length params) "")}]]
[:div {:class (stl/css :advanced-row)}
[:div {:class (stl/css :height)
:title (if (= :row type)
(tr "workspace.options.grid.params.height")
(tr "workspace.options.grid.params.width"))}
[:span {:class (stl/css :icon-text)}
(if (= :row type)
"H"
"W")]
[:> numeric-input* {:placeholder "Auto"
:on-change handle-change-item-length
:nillable true
:className (stl/css :numeric-input)
:value (or (:item-length params) "")}]]
[:div {:class (stl/css :gutter)
:title (tr "workspace.options.grid.params.gutter")}
[:span {:class (stl/css-case :icon true
:rotated (= type :row))} i/gap-horizontal-refactor]
[:> numeric-input* {:placeholder "0"
:on-change (handle-change :params :gutter)
:nillable true
:className (stl/css :numeric-input)
:value (or (:gutter params) 0)}]]
[:div {:class (stl/css :gutter)
:title (tr "workspace.options.grid.params.gutter")}
[:span {:class (stl/css-case :icon true
:rotated (= type :row))} i/gap-horizontal-refactor]
[:> numeric-input* {:placeholder "0"
:on-change (handle-change :params :gutter)
:nillable true
:className (stl/css :numeric-input)
:value (or (:gutter params) 0)}]]
[:div {:class (stl/css :margin)
:title (tr "workspace.options.grid.params.margin")}
[:span {:class (stl/css-case :icon true
:rotated (= type :column))} i/grid-margin-refactor]
[:> numeric-input* {:placeholder "0"
:on-change (handle-change :params :margin)
:nillable true
:className (stl/css :numeric-input)
:value (or (:margin params) 0)}]]
[:div {:class (stl/css :margin)
:title (tr "workspace.options.grid.params.margin")}
[:span {:class (stl/css-case :icon true
:rotated (= type :column))} i/grid-margin-refactor]
[:> numeric-input* {:placeholder "0"
:on-change (handle-change :params :margin)
:nillable true
:className (stl/css :numeric-input)
:value (or (:margin params) 0)}]]
[:button {:class (stl/css-case :show-more-options true
:selected show-more-options?)
:on-click toggle-more-options}
i/menu-refactor]
(when show-more-options?
[:div {:class (stl/css :more-options)}
[:button {:disabled is-default
: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)
:on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]])]])]]
[:button {:class (stl/css-case :show-more-options true
:selected show-more-options?)
:on-click toggle-more-options}
i/menu-refactor]
(when show-more-options?
[:div {:class (stl/css :more-options)}
[:button {:disabled is-default
: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)
:on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]])]])])]
[:div.grid-option
[:div.grid-option-main {:style {:display (when open? "none")}}

1
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
View file

@ -25,6 +25,7 @@
}
.help-content {
padding: $s-20;
.help-group {
margin-bottom: $s-40;
.interactions-help-icon {

10
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -1389,10 +1389,6 @@
:class (stl/css-case :title-spacing-layout (not has-layout?))}
(if (and (not multiple) (:layout values))
[:div {:class (stl/css :title-actions)}
[:button {:class (stl/css :remove-layout)
:on-click on-remove-layout}
i/remove-refactor]
(when ^boolean grid-enabled?
[:*
[:button {:class (stl/css :add-layout)
@ -1402,7 +1398,11 @@
[:& dropdown {:show show-layout-dropdown? :on-close handle-close-layout-options}
[:div {:class (stl/css :layout-options)}
[:button {:class (stl/css :layout-option) :on-click set-flex} "Flex layout"]
[:button {:class (stl/css :layout-option) :on-click set-grid} "Grid layout"]]]])]
[:button {:class (stl/css :layout-option) :on-click set-grid} "Grid layout"]]]])
[:button {:class (stl/css :remove-layout)
:on-click on-remove-layout}
i/remove-refactor]]
[:div {:class (stl/css :title-actions)}
(if ^boolean grid-enabled?

16
frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs
View file

@ -50,11 +50,21 @@
[:& layer-menu {:ids ids
:type type
:values layer-values}]
[:& measures-menu {:ids ids
:type type
:values measure-values
:shape shape}]
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layout-container-menu
{:type type
:ids [(:id shape)]
:values layout-container-values
:multiple false}]
(when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
[:& grid-cell/options
@ -71,10 +81,6 @@
:is-grid-parent? is-grid-parent?
:shape shape}])
(when (or (not is-layout-child?) is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& fill-menu {:ids ids
:type type
:values (select-keys shape fill-attrs)}]

15
frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs
View file

@ -52,11 +52,21 @@
[:& layer-menu {:ids ids
:type type
:values layer-values}]
[:& measures-menu {:ids ids
:type type
:values measure-values
:shape shape}]
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layout-container-menu
{:type type
:ids [(:id shape)]
:values layout-container-values
:multiple false}]
(when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
[:& grid-cell/options
@ -72,9 +82,6 @@
:is-flex-parent? is-flex-parent?
:is-grid-parent? is-grid-parent?
:shape shape}])
(when (or (not is-layout-child?) is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& fill-menu {:ids ids
:type type

11
frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs
View file

@ -62,11 +62,18 @@
:values measure-values
:type type
:shape shape}]
[:& component-menu {:shapes [shape]}]
(when (or (not is-layout-child?) is-layout-child-absolute?)
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
[:& layout-container-menu
{:type type
:ids [(:id shape)]
:values layout-container-values
:multiple false}]
(when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
[:& grid-cell/options

13
frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs
View file

@ -74,7 +74,15 @@
[:& layer-menu {:type type :ids layer-ids :values layer-values}]
[:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}]
[:& component-menu {:shapes [shape]}] ;;remove this in components-v2
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids constraint-ids :values constraint-values}])
[:& layout-container-menu
{:type type
:ids [(:id shape)]
:values layout-container-values
:multiple false}]
(when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
[:& grid-cell/options
@ -91,9 +99,6 @@
:is-grid-parent? is-grid-parent?
:values layout-item-values}])
(when (or (not is-layout-child?) is-layout-child-absolute?)
[:& constraints-menu {:ids constraint-ids :values constraint-values}])
(when-not (empty? fill-ids)
[:& fill-menu {:type type :ids fill-ids :values fill-values}])

18
frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs
View file

@ -52,11 +52,21 @@
[:& layer-menu {:ids ids
:type type
:values layer-values}]
[:& measures-menu {:ids ids
:type type
:values measure-values
:shape shape}]
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layout-container-menu
{:type type
:ids [(:id shape)]
:values layout-container-values
:multiple false}]
(when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
[:& grid-cell/options
@ -73,12 +83,6 @@
:is-grid-parent? is-grid-parent?
:shape shape}])
(when (or (not is-layout-child?) is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& fill-menu {:ids ids
:type type
:values fill-values}]

11
frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs
View file

@ -359,8 +359,14 @@
(when-not (empty? components)
[:& component-menu {:shapes components}])
[:& layout-container-menu {:type type :ids layout-container-ids :values layout-container-values :multiple true}]
(when-not (or (empty? constraint-ids) ^boolean is-layout-child?)
[:& constraints-menu {:ids constraint-ids :values constraint-values}])
[:& layout-container-menu
{:type type
:ids layout-container-ids
:values layout-container-values
:multiple true}]
(when (or is-layout-child? has-flex-layout-container?)
[:& layout-item-menu
@ -372,9 +378,6 @@
:is-grid-parent? is-grid-parent?
:values layout-item-values}])
(when-not (or (empty? constraint-ids) is-layout-child?)
[:& constraints-menu {:ids constraint-ids :values constraint-values}])
(when-not (empty? text-ids)
[:& ot/text-menu {:type type :ids text-ids :values text-values}])

14
frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs
View file

@ -56,7 +56,16 @@
:type type
:values measure-values
:shape shape}]
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layout-container-menu
{:type type
:ids [(:id shape)]
:values layout-container-values
:multiple false}]
(when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
[:& grid-cell/options
@ -72,9 +81,6 @@
:is-flex-parent? is-flex-parent?
:is-grid-parent? is-grid-parent?
:shape shape}])
(when (or (not is-layout-child?) is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& fill-menu {:ids ids
:type type

12
frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs
View file

@ -59,6 +59,11 @@
:type type
:values measure-values
:shape shape}]
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layout-container-menu
{:type type
:ids ids
@ -80,13 +85,6 @@
:is-grid-parent? is-grid-parent?
:shape shape}])
(when (or (not ^boolean is-layout-child?)
^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& fill-menu {:ids ids
:type type
:values fill-values}]

21
frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs
View file

@ -128,12 +128,21 @@
:type type
:values measure-values
:shape shape}]
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layout-container-menu
{:type type
:ids [(:id shape)]
:values layout-container-values
:multiple false}]
(when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
[:& grid-cell/options
{:shape (first parents)
:cell (ctl/get-cell-by-shape-id (first parents) (first ids))}])
[:& grid-cell/options
{:shape (first parents)
:cell (ctl/get-cell-by-shape-id (first parents) (first ids))}])
(when is-layout-child?
[:& layout-item-menu
@ -145,10 +154,6 @@
:is-grid-parent? is-grid-parent?
:shape shape}])
(when (or (not is-layout-child?) is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& fill-menu {:ids ids
:type type
:values fill-values}]

20
frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs
View file

@ -91,12 +91,23 @@
:type type
:values (select-keys shape measure-attrs)
:shape shape}]
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu
{:ids ids
:values (select-keys shape constraint-attrs)}])
[:& layout-container-menu
{:type type
:ids [(:id shape)]
:values layout-container-values
:multiple false}]
(when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
[:& grid-cell/options
{:shape (first parents)
:cell (ctl/get-cell-by-shape-id (first parents) (first ids))}])
(when is-layout-child?
[:& layout-item-menu
{:ids ids
@ -107,13 +118,6 @@
:is-grid-parent? is-grid-parent?
:shape shape}])
(when (or (not is-layout-child?) is-layout-child-absolute?)
[:& constraints-menu
{:ids ids
:values (select-keys shape constraint-attrs)}])
[:& text-menu
{:ids ids
:type type

5
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -69,7 +69,7 @@
selected))
(mf/defc viewport
[{:keys [selected wglobal wlocal layout file] :as props}]
[{:keys [selected wglobal wlocal layout file palete-size] :as props}]
(let [;; When adding data from workspace-local revisit `app.main.ui.workspace` to check
;; that the new parameter is sent
{:keys [edit-path
@ -535,7 +535,8 @@
[:& scroll-bars/viewport-scrollbars
{:objects base-objects
:zoom zoom
:vbox vbox}]
:vbox vbox
:bottom-padding (when palete-size (+ palete-size 8))}]
(when-not hide-ui?
[:& rules/rules

8
frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs
View file

@ -28,7 +28,7 @@
(mf/defc viewport-scrollbars
{::mf/wrap [mf/memo]}
[{:keys [objects zoom vbox]}]
[{:keys [objects zoom vbox bottom-padding]}]
(let [v-scrolling? (mf/use-state false)
h-scrolling? (mf/use-state false)
@ -56,6 +56,11 @@
(cfh/get-immediate-children)
(gsh/shapes->rect)))
;; Padding for bottom palette
vbox (cond-> vbox
(some? bottom-padding)
(update :height - (/ bottom-padding zoom)))
inv-zoom (/ 1 zoom)
vbox-height (- (:height vbox) (* inv-zoom scroll-height))
vbox-width (- (:width vbox) (* inv-zoom scroll-width))
@ -65,6 +70,7 @@
(max 0)
(* vbox-height)
(/ (:height base-objects-rect)))
;; left space hidden because of the scroll
left-offset (-> (- vbox-x (:x base-objects-rect))
(max 0)

4
frontend/src/app/main/ui/workspace/viewport/top_bar.cljs
View file

@ -35,9 +35,7 @@
[:& i18n/tr-html {:tag-name "span"
:label "workspace.top-bar.read-only"}]]
[:button {:class (stl/css :done-btn)
:on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]
[:button {:class (stl/css :close-btn)
:on-click handle-close-view-mode} i/close-refactor]]]
:on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]]]
;; OLD
[:div.viewport-actions

2
frontend/src/app/main/ui/workspace/viewport/top_bar.scss
View file

@ -22,7 +22,7 @@
margin-left: -50%;
padding: $s-8;
pointer-events: initial;
width: $s-512;
width: $s-400;
}
.viewport-actions-title {

18
frontend/src/app/worker/thumbnails.cljs
View file

@ -7,6 +7,7 @@
(ns app.worker.thumbnails
(:require
["react-dom/server" :as rds]
[app.common.data.macros :as dm]
[app.common.logging :as log]
[app.common.uri :as u]
[app.config :as cf]
@ -62,16 +63,27 @@
(binding [fonts/loaded-hints (l/atom #{})]
(let [objects (:objects page)
frame (some->> page :thumbnail-frame-id (get objects))
background-color (dm/get-in page [:options :background])
element (if frame
(mf/element render/frame-svg #js {:objects objects :frame frame :use-thumbnails true})
(mf/element render/page-svg #js {:data page :use-thumbnails true :embed true}))
(mf/element render/frame-svg #js
{:objects objects
:frame frame
:use-thumbnails true
:background-color background-color
:aspect-ratio (/ 2 3)})
(mf/element render/page-svg #js
{:data page
:use-thumbnails true
:embed true
:aspect-ratio (/ 2 3)}))
data (rds/renderToStaticMarkup element)]
{:data data
:fonts @fonts/loaded-hints
:file-id file-id
:revn revn}))
(catch :default cause
(js/console.error "unexpected erorr on rendering thumbnail" cause)
(js/console.error "unexpected error on rendering thumbnail" cause)
nil)))
(defmethod impl/handler :thumbnails/generate-for-file