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

💄 Fix some frontend bugs

Browse source
This commit is contained in:
Eva 2023-12-27 10:07:31 +01:00
parent 92934c6cdd
commit 1a1e9b4ecd
38 changed files with 364 additions and 190 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,7 +25,8 @@
--dark-ok-color: var(--strong-green);
--dark-warning-color: #ff6432;
--dark-pending-color: var(--lilac);
--dark-error-color: #ec1f1f;
--dark-error-color: #ff3277;
--default-presence-color: #dee563;
// LIGHT
--light-gray-1: #fff;

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

@ -14,6 +14,7 @@
--scrollbar-background-color: var(--color-foreground-secondary);
--panel-background-color: var(--color-background-primary);
--panel-title-background-color: var(--color-background-secondary);
--presence-color: var(--default-presence-color);
// BUTTONS
--button-foreground-hover: var(--color-accent-primary);
@ -298,6 +299,9 @@
--link-foreground-color: var(--color-accent-primary);
--resize-area-background-color: var(--color-background-primary);
--resize-area-border-color: var(--color-background-quaternary);
// VIEWER
--viewer-background-color: var(--color-background-secondary);
--viewer-paginator-background-color: var(--color-background-tertiary);

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

@ -132,7 +132,7 @@
"#faa6b7" ; salmon
"#f9b489" ; orange
"#fdcd79" ; soft-orange
"#dee563" ; yellow
"#dee563" ; yellow -> default presence color
"#b1e96f" ; yellow-green
})

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

@ -13,7 +13,6 @@
height: $s-32;
width: 100%;
min-height: $s-32;
margin: $s-4 0;
background-color: var(--title-background-color);
.title,
.title-only {

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

@ -220,6 +220,7 @@
.team-icon {
&.new-team {
background-color: $da-primary;
color: $db-primary;
svg {
fill: $db-secondary;
}

4
frontend/src/app/main/ui/viewer/inspect/exports.scss
View file

@ -8,10 +8,12 @@
.element-set {
padding-bottom: $s-16;
margin: 0;
.element-title {
margin: 0;
.title-spacing-export-viewer {
@extend .attr-title;
margin: 0;
}
.add-export {
@extend .button-tertiary;

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

@ -289,7 +289,7 @@
:type "button"
:data-library-id (dm/str id)
:on-click unlink-library}
i/delete-refactor]])]]
i/detach-refactor]])]]
[:div {:class (stl/css :section)}
[:& title-bar {:collapsable? false

8
frontend/src/app/main/ui/workspace/libraries.scss
View file

@ -119,15 +119,15 @@
height: $s-32;
border-radius: $br-8;
margin-right: $s-2;
padding: $s-8;
width: $s-32;
margin-left: $s-8;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.item-button-shared {
padding: $s-8;
width: $s-32;
}
.item-button-icon {
width: $s-28;
height: $s-28;

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

@ -32,8 +32,8 @@ $width-settings-bar-max: $s-500;
left: 0;
width: 100%;
height: $s-12;
border-top: 2px solid var(--color-background-quaternary);
background-color: var(--color-background-primary);
border-top: $s-2 solid var(--resize-area-border-color);
background-color: var(--resize-area-background-color);
cursor: ns-resize;
}
.settings-bar-inside {
@ -54,7 +54,7 @@ $width-settings-bar-max: $s-500;
}
}
.tab-spacing {
margin: $s-4 $s-12 0 $s-12;
margin: $s-4 $s-8 0 $s-8;
}
.right-settings-bar {
grid-area: right-sidebar;

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

@ -163,10 +163,7 @@
(when (and (some? root-shape)
(some? container))
[:*
[:& cmm/component-item-thumbnail {:file-id file-id
:root-shape root-shape
:component component
:container container}]
(let [renaming? (= renaming (:id component))]
[:*
[:& editable-label
@ -183,7 +180,11 @@
:on-cancel cancel-rename}]
(when ^boolean dragging?
[:div {:class (dom/classnames (css :dragging) true)}])])])]
[:div {:class (dom/classnames (css :dragging) true)}])])
[:& cmm/component-item-thumbnail {:file-id file-id
:root-shape root-shape
:component component
:container container}]])]
[:div {:ref item-ref
:class (dom/classnames

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

@ -22,7 +22,7 @@
padding: $s-8;
border: $s-4 solid transparent;
border-radius: $br-8;
background-color: var(--color-foreground-secondary);
background-color: var(--assets-component-background-color);
overflow: hidden;
cursor: pointer;
img {
@ -44,7 +44,6 @@
bottom: 0;
width: 100%;
padding: $s-2;
&.editing {
display: flex;
align-items: center;

16
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View file

@ -18,10 +18,8 @@
justify-content: space-between;
height: $s-32;
min-height: $s-32;
margin-top: $s-2;
margin-bottom: $s-4;
margin: $s-4 0 $s-4 $s-8;
padding-right: $s-8;
margin-left: $s-8;
.page-name {
@include tabTitleTipography;
padding: 0 $s-12;
@ -30,7 +28,7 @@
.icon-search {
@extend .button-tertiary;
height: $s-32;
width: calc($s-24 + $s-4);
width: $s-28;
border-radius: $br-8;
margin-right: $s-8;
padding: 0;
@ -48,7 +46,7 @@
height: $s-32;
width: $s-32;
margin: 0;
border: 1px solid var(--color-background-tertiary);
border: $s-1 solid var(--color-background-tertiary);
border-radius: $br-8 $br-2 $br-2 $br-8;
background-color: var(--color-background-tertiary);
svg {
@ -57,7 +55,7 @@
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);
@ -66,7 +64,7 @@
}
}
&:hover {
border: 1px solid var(--input-background-color-hover);
border: $s-1 solid var(--input-background-color-hover);
background-color: var(--input-background-color-hover);
svg {
background-color: var(--input-background-color-hover);
@ -122,7 +120,7 @@
@include titleTipography;
height: $s-20;
padding: $s-4 $s-6;
border: 1px solid var(--tag-background-color);
border: $s-1 solid var(--tag-background-color);
border-radius: $br-6;
color: var(--tag-background-color);
}
@ -235,7 +233,7 @@
}
}
.tool-window-content {
--calculated-height: calc(128px + var(--height, 200px));
--calculated-height: calc($s-128 + var(--height, $s-200));
display: flex;
flex-direction: column;
height: calc(100vh - var(--calculated-height));

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

@ -16,7 +16,7 @@
.tab-spacing {
margin-right: $s-12;
margin-bottom: $s-16;
margin-bottom: $s-8;
}
.content-class {
@ -31,6 +31,6 @@
height: 100%;
display: flex;
flex-direction: column;
gap: $s-16;
gap: $s-8;
}
}

6
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
View file

@ -7,9 +7,11 @@
@import "refactor/common-refactor.scss";
.element-set {
margin: 0;
.element-title {
.title-spacing-blur {
padding-left: $s-12;
padding-left: $s-2;
margin: 0;
}
.add-blur {
@extend .button-tertiary;
@ -22,7 +24,7 @@
}
.element-set-content {
@include flexColumn;
margin-bottom: $s-4;
margin-bottom: $s-8;
.first-row {
@include flexRow;
width: 100%;

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss
View file

@ -7,9 +7,11 @@
@import "refactor/common-refactor.scss";
.element-set {
margin: 0;
.element-title {
.title-spacing-selected-colors {
padding-left: $s-12;
padding-left: $s-2;
margin: 0;
}
.add-fill {
@extend .button-tertiary;
@ -22,6 +24,7 @@
}
.element-content {
@include flexColumn;
margin-bottom: $s-8;
.selected-color-group {
@include flexColumn;
.more-colors-btn {

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
View file

@ -6,8 +6,10 @@
@import "refactor/common-refactor.scss";
.element-set {
margin: 0;
.element-content {
@include flexColumn;
margin-bottom: $s-8;
.component-wrapper {
display: flex;
margin: 0 $s-4 0 $s-8;

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

@ -7,6 +7,7 @@
@import "refactor/common-refactor.scss";
.element-set {
margin: 0;
.element-set-content {
display: flex;
gap: $s-4;

6
frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
View file

@ -7,9 +7,11 @@
@import "refactor/common-refactor.scss";
.element-set {
margin: 0;
.element-title {
.title-spacing-export {
padding-left: $s-12;
padding-left: $s-2;
margin: 0;
}
.add-export {
@extend .button-tertiary;
@ -22,7 +24,7 @@
}
.element-set-content {
@include flexColumn;
margin-bottom: $s-4;
margin: $s-4 0 $s-8 0;
.multiple-exports {
@include flexRow;
.label {

15
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss
View file

@ -7,9 +7,12 @@
@import "refactor/common-refactor.scss";
.element-set {
margin: 0;
.element-title {
margin: 0;
.title-spacing-fill {
padding-left: $s-12;
padding-left: $s-2;
margin: 0;
}
.add-fill {
@extend .button-tertiary;
@ -24,6 +27,7 @@
display: flex;
flex-direction: column;
gap: $s-12;
margin: $s-4 0 $s-8 0;
.element-set-options-group {
@include flexRow;
.group-label {
@ -40,9 +44,14 @@
}
.checkbox {
@extend .input-checkbox;
margin-bottom: $s-8;
margin-top: calc(-1 * $s-4);
padding-left: $s-8;
span.checked {
background-color: var(--input-border-color-active);
svg {
@extend .button-icon-small;
stroke: var(--input-details-color);
}
}
}
}
}

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
View file

@ -7,8 +7,10 @@
@import "refactor/common-refactor.scss";
.element-set {
margin: 0;
.title-spacing-board-grid {
padding-left: $s-12;
padding-left: $s-2;
margin: 0;
}
.add-grid {
@extend .button-tertiary;
@ -20,6 +22,7 @@
}
.element-set-content {
@include flexColumn;
margin: $s-4 0 $s-8 0;
.grid-option {
.grid-title {
@include flexRow;

35
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

@ -173,26 +173,23 @@
nil))
(if new-css-system
[:div {:class (stl/css :flow-element)}
[:button {:class (stl/css :start-flow-btn)
:on-click start-flow}
[:span {:class (stl/css :button-icon)}
i/play-refactor]]
[:span {:class (stl/css :flow-info)}
[:span {:class (stl/css :flow-name-wrapper)}
[:button {:class (stl/css :start-flow-btn)
:on-click start-flow}
[:span {:class (stl/css :button-icon)}
i/play-refactor]]
[:span {:class (stl/css :flow-input-wrapper)}
[:input
{:class (stl/css :flow-input)
:type "text"
:ref name-ref
:on-blur accept-edit
:on-key-down on-key-down
:default-value (:name flow "")}]]]]
(if @editing?
[:input
{:class (stl/css :input-text)
:type "text"
:ref name-ref
:on-blur accept-edit
:on-key-down on-key-down
:auto-focus true
:default-value (:name flow "")}]
[:span
{:class (stl/css :flow-name-label)
:on-double-click rename-flow}
(:name flow)])
[:div {:class (stl/css :remove-flow-btn)
:on-click remove-flow}
[:button {:class (stl/css :remove-flow-btn)
:on-click remove-flow}
i/remove-refactor]]
[:div.flow-element

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

@ -230,27 +230,90 @@
}
.flow-element {
@extend .asset-element;
padding: 0;
gap: $s-4;
.start-flow-btn {
@extend .button-tertiary;
@include flexRow;
.flow-info {
display: flex;
align-items: center;
gap: $s-2;
border-radius: $s-8;
background-color: var(--input-details-color);
height: $s-32;
width: $s-28;
svg {
@extend .button-icon;
width: 100%;
flex-grow: 1;
.flow-name-wrapper {
@include titleTipography;
@include focusInput;
display: flex;
align-items: center;
gap: $s-4;
flex-grow: 1;
height: $s-32;
width: 100%;
border-radius: $br-8;
padding: 0;
margin-right: 0;
background-color: var(--input-background-color);
border: $s-1 solid var(--input-background-color);
color: var(--input-foreground-color);
.start-flow-btn {
@include buttonStyle;
height: $s-32;
width: $s-28;
padding: 0 $s-2 0 $s-8;
border-radius: $br-8 0 0 $br-8;
background-color: transparent;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
&:hover {
stroke: var(--input-foreground-color-active);
}
}
}
.flow-input {
@extend .input-base;
background-color: transparent;
height: $s-28;
}
.flow-input-wrapper {
@include titleTipography;
display: flex;
align-items: center;
height: $s-28;
padding: 0;
width: 100%;
margin: 0;
flex-grow: 1;
background-color: transparent;
color: var(--input-foreground-color);
border-radius: $br-8;
}
&:hover {
background-color: var(--input-background-color-hover);
border: $s-1 solid var(--input-background-color-hover);
&:active {
background-color: var(--input-background-color-active);
.flow-input-wrapper {
background-color: var(--input-background-color-active);
}
}
}
&:focus,
&:focus-within {
background-color: var(--input-background-color-active);
}
&.editing {
background-color: var(--input-background-color-active);
}
}
}
.input-text {
@extend .input-base;
}
.flow-name-label {
flex-grow: 1;
}
.remove-flow-btn {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
min-width: $s-28;
svg {
@extend .button-icon;
}

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

@ -7,6 +7,7 @@
@import "refactor/common-refactor.scss";
.element-set {
margin-bottom: $s-8;
.element-set-content {
display: flex;
height: $s-32;

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
View file

@ -7,9 +7,11 @@
@import "refactor/common-refactor.scss";
.element-set {
margin: 0;
.element-title {
.title-spacing-layout {
padding-left: $s-12;
padding-left: $s-2;
margin: 0;
}
.title-actions {
@ -36,6 +38,7 @@
}
}
.flex-layout-menu {
margin-bottom: $s-8;
.first-row {
display: flex;
gap: $s-4;

150
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

@ -509,17 +509,17 @@
:title-spacing-empty (not has-content?))}]]
(when open?
[:div {:class (stl/css :flex-element-menu)}
[:div {:class (stl/css :row)}
(when (or is-layout-child? is-absolute?)
[:div {:class (stl/css :position-options)}
[:& radio-buttons {:selected (if is-absolute? "absolute" "static")
:on-change on-change-position
:name "layout-style"
:wide true}
[:& radio-button {:value "static"
:id :static-position}]
[:& radio-button {:value "absolute"
:id :absolute-position}]]])
(when (or is-layout-child? is-absolute?)
[:div {:class (stl/css :row)}
[:div {:class (stl/css :position-options)}
[:& radio-buttons {:selected (if is-absolute? "absolute" "static")
:on-change on-change-position
:name "layout-style"
:wide true}
[:& radio-button {:value "static"
:id :static-position}]
[:& radio-button {:value "absolute"
:id :absolute-position}]]]
(when is-absolute?
[:div {:class (stl/css :z-index-wrapper)
@ -533,7 +533,7 @@
:on-focus #(dom/select-target %)
:on-change #(on-change-z-index %)
:nillable true
:value (:layout-item-z-index values)}]])]
:value (:layout-item-z-index values)}]])])
[:div {:class (stl/css :row)}
[:& element-behaviour {:fill? is-layout-child?
@ -556,73 +556,75 @@
:change-margin-style change-margin-style
:on-margin-change on-margin-change}]])
[:div {:class (stl/css :row)}
[:div {:class (stl/css :advanced-options)}
(when (= (:layout-item-h-sizing values) :fill)
[:div {:class (stl/css :horizontal-fill)}
[:div {:class (stl/css :layout-item-min-w)
:title (tr "workspace.options.layout-item.layout-item-min-w")}
(when (or (= (:layout-item-h-sizing values) :fill)
(= (:layout-item-v-sizing values) :fill))
[:div {:class (stl/css :row)}
[:div {:class (stl/css :advanced-options)}
(when (= (:layout-item-h-sizing values) :fill)
[:div {:class (stl/css :horizontal-fill)}
[:div {:class (stl/css :layout-item-min-w)
:title (tr "workspace.options.layout-item.layout-item-min-w")}
[:span {:class (stl/css :icon-text)}
"MIN W"]
[:> numeric-input*
{:className (stl/css :numeric-input)
:no-validate true
:min 0
:data-wrap true
:placeholder "--"
:on-focus #(dom/select-target %)
:on-change (partial on-size-change :layout-item-min-w)
:value (get values :layout-item-min-w)
:nillable true}]]
[:span {:class (stl/css :icon-text)}
"MIN W"]
[:> numeric-input*
{:className (stl/css :numeric-input)
:no-validate true
:min 0
:data-wrap true
:placeholder "--"
:on-focus #(dom/select-target %)
:on-change (partial on-size-change :layout-item-min-w)
:value (get values :layout-item-min-w)
:nillable true}]]
[:div {:class (stl/css :layout-item-max-w)
:title (tr "workspace.options.layout-item.layout-item-max-w")}
[:span {:class (stl/css :icon-text)}
"MAX W"]
[:> numeric-input*
{:className (stl/css :numeric-input)
:no-validate true
:min 0
:data-wrap true
:placeholder "--"
:on-focus #(dom/select-target %)
:on-change (partial on-size-change :layout-item-max-w)
:value (get values :layout-item-max-w)
:nillable true}]]])
(when (= (:layout-item-v-sizing values) :fill)
[:div {:class (stl/css :vertical-fill)}
[:div {:class (stl/css :layout-item-min-h)
:title (tr "workspace.options.layout-item.layout-item-min-h")}
[:div {:class (stl/css :layout-item-max-w)
:title (tr "workspace.options.layout-item.layout-item-max-w")}
[:span {:class (stl/css :icon-text)}
"MAX W"]
[:> numeric-input*
{:className (stl/css :numeric-input)
:no-validate true
:min 0
:data-wrap true
:placeholder "--"
:on-focus #(dom/select-target %)
:on-change (partial on-size-change :layout-item-max-w)
:value (get values :layout-item-max-w)
:nillable true}]]])
(when (= (:layout-item-v-sizing values) :fill)
[:div {:class (stl/css :vertical-fill)}
[:div {:class (stl/css :layout-item-min-h)
:title (tr "workspace.options.layout-item.layout-item-min-h")}
[:span {:class (stl/css :icon-text)}
"MIN H"]
[:> numeric-input*
{:className (stl/css :numeric-input)
:no-validate true
:min 0
:data-wrap true
:placeholder "--"
:on-focus #(dom/select-target %)
:on-change (partial on-size-change :layout-item-min-h)
:value (get values :layout-item-min-h)
:nillable true}]]
[:span {:class (stl/css :icon-text)}
"MIN H"]
[:> numeric-input*
{:className (stl/css :numeric-input)
:no-validate true
:min 0
:data-wrap true
:placeholder "--"
:on-focus #(dom/select-target %)
:on-change (partial on-size-change :layout-item-min-h)
:value (get values :layout-item-min-h)
:nillable true}]]
[:div {:class (stl/css :layout-item-max-h)
:title (tr "workspace.options.layout-item.layout-item-max-h")}
[:div {:class (stl/css :layout-item-max-h)
:title (tr "workspace.options.layout-item.layout-item-max-h")}
[:span {:class (stl/css :icon-text)}
"MAX H"]
[:> numeric-input*
{:className (stl/css :numeric-input)
:no-validate true
:min 0
:data-wrap true
:placeholder "--"
:on-focus #(dom/select-target %)
:on-change (partial on-size-change :layout-item-max-h)
:value (get values :layout-item-max-h)
:nillable true}]]])]]])]
[:span {:class (stl/css :icon-text)}
"MAX H"]
[:> numeric-input*
{:className (stl/css :numeric-input)
:no-validate true
:min 0
:data-wrap true
:placeholder "--"
:on-focus #(dom/select-target %)
:on-change (partial on-size-change :layout-item-max-h)
:value (get values :layout-item-max-h)
:nillable true}]]])]])])]
[:div.element-set

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
View file

@ -7,12 +7,13 @@
@import "refactor/common-refactor.scss";
.element-set {
margin: 0;
.element-title {
.title-spacing-layout-element {
margin: 0 0 $s-4 0;
}
.title-spacing-empty {
padding-left: $s-12;
padding-left: $s-2;
}
}
.flex-element-menu {
@ -62,6 +63,7 @@
.position-options {
width: $s-188;
}
.margin-row {
display: flex;
align-items: flex-start;

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

@ -8,6 +8,7 @@
.element-set {
@include flexColumn;
margin-bottom: $s-8;
.presets {
display: flex;
align-items: flex-start;

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss
View file

@ -7,9 +7,11 @@
@import "refactor/common-refactor.scss";
.element-set {
margin: 0;
.element-title {
.title-spacing-shadow {
padding-left: $s-12;
margin: 0;
padding-left: $s-2;
}
.add-shadow {
@extend .button-tertiary;
@ -21,6 +23,7 @@
}
}
.element-set-content {
margin-top: $s-4;
@include flexColumn;
.multiple-shadows {
@include flexRow;

3
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
View file

@ -219,7 +219,8 @@
[:button {:class (stl/css :add-stroke)
:on-click on-add-stroke} i/add-refactor]]]
(when open?
[:div {:class (stl/css :element-content)}
[:div {:class (stl/css-case :element-content true
:empty-content (not has-strokes?))}
(cond
(= :multiple strokes)
[:div {:class (stl/css :element-set-options-group)}

9
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss
View file

@ -7,9 +7,12 @@
@import "refactor/common-refactor.scss";
.element-set {
margin: 0;
.element-title {
margin: 0;
.title-spacing-stroke {
padding-left: $s-12;
padding-left: $s-2;
margin: 0;
}
.add-stroke {
@extend .button-tertiary;
@ -25,6 +28,7 @@
display: flex;
flex-direction: column;
gap: $s-12;
margin: $s-4 0 $s-8 0;
.element-set-options-group {
@include flexRow;
.group-label {
@ -39,5 +43,8 @@
}
}
}
&.empty-content {
margin: 0;
}
}
}

6
frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
View file

@ -7,12 +7,14 @@
@import "refactor/common-refactor.scss";
.element-set {
margin: 0;
.title-spacing-svg-attrs {
padding-left: $s-12;
padding-left: $s-2;
margin: 0;
}
.element-set-content {
@include flexColumn;
margin: $s-4 0 0 0;
.attr-content {
display: flex;
gap: $s-4;

3
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
View file

@ -7,7 +7,9 @@
@import "refactor/common-refactor.scss";
.element-set {
margin: 0;
.element-title {
margin: 0;
.add-typography {
@extend .button-tertiary;
height: $s-32;
@ -19,6 +21,7 @@
}
.element-content {
@include flexColumn;
margin-top: $s-4;
.multiple-typography {
@extend .mixed-bar;
.multiple-text {

3
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
View file

@ -245,8 +245,9 @@
}
.text-options {
position: relative;
@include flexColumn;
position: relative;
margin-bottom: $s-8;
.font-option {
@include titleTipography;
@extend .asset-element;

2
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View file

@ -89,6 +89,7 @@
(reset! editing-text* false)
(when on-blur
(on-blur event))))
parse-color
(mf/use-fn
(fn [color]
@ -162,7 +163,6 @@
(modal/show! :colorpicker props))))
prev-color (h/use-previous color)
on-drop

24
frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
View file

@ -12,18 +12,19 @@
flex-direction: column;
flex: 1;
width: 100%;
height: var(--height, 200px);
height: var(--height, $s-200);
.title-bar {
.title {
margin-left: $s-2;
color: var(--title-foreground-color-hover);
}
}
.add-page {
@extend .button-tertiary;
height: $s-32;
width: calc($s-24 + $s-4);
margin-right: $s-8;
width: $s-28;
margin-right: $s-12;
padding: 0;
border-radius: $br-8;
svg {
@ -37,7 +38,7 @@
@include titleTipography;
height: $s-20;
padding: $s-4 $s-6;
border: 1px solid var(--tag-background-color);
border: $s-1 solid var(--tag-background-color);
border-radius: $br-6;
color: var(--tag-background-color);
}
@ -47,11 +48,11 @@
left: 0;
width: 100%;
height: $s-12;
border-top: 2px solid var(--color-background-secondary);
background-color: var(--color-background-primary);
border-top: $s-2 solid var(--resize-area-border-color);
background-color: var(--resize-area-background-color);
cursor: ns-resize;
&:hover {
border-color: var(--color-background-quaternary);
border-color: var(--resize-area-border-color);
}
}
.tool-window-content {
@ -61,7 +62,7 @@
overflow-x: hidden;
scrollbar-gutter: stable;
overflow-y: overlay;
height: calc(-38px + var(--height, 200px));
height: calc(-38px + var(--height, $s-200));
width: 100%;
.pages-list {
@ -74,13 +75,13 @@
width: 100%;
cursor: pointer;
&.dnd-over-top {
border-top: 1px solid var(--layer-row-foreground-color-drag);
border-top: $s-1 solid var(--layer-row-foreground-color-drag);
}
&.dnd-over-bot {
border-bottom: 1px solid var(--layer-row-foreground-color-drag);
border-bottom: $s-1 solid var(--layer-row-foreground-color-drag);
}
.dnd-over > .element-list-body {
border: 1px solid var(--layer-row-foreground-color-drag);
border: $s-1 solid var(--layer-row-foreground-color-drag);
}
.element-list-body {
display: flex;
@ -232,5 +233,6 @@
}
.title-spacing-sitemap {
padding-left: $s-8;
margin-top: $s-8;
}
}

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

@ -5,19 +5,22 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.viewport.comments
(:require-macros [app.main.style :as stl])
(:require
[app.main.data.comments :as dcm]
[app.main.data.workspace.comments :as dwcm]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.comments :as cmt]
[app.main.ui.context :as ctx]
[cuerdas.core :as str]
[okulary.core :as l]
[rumext.v2 :as mf]))
(mf/defc comments-layer
[{:keys [vbox vport zoom file-id page-id drawing] :as props}]
(let [pos-x (* (- (:x vbox)) zoom)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
pos-x (* (- (:x vbox)) zoom)
pos-y (* (- (:y vbox)) zoom)
profile (mf/deref refs/profile)
@ -54,26 +57,54 @@
(st/emit! (dwcm/initialize-comments file-id))
(fn []
(st/emit! ::dwcm/finalize))))
(if new-css-system
[:div {:class (stl/css :comments-section)}
[:div
{:class (stl/css :workspace-comments-container)
:style {:width (str (:width vport) "px")
:height (str (:height vport) "px")}}
[:div {:class (stl/css :threads)
:style {:transform (str/format "translate(%spx, %spx)" pos-x pos-y)}}
(for [item threads]
[:& cmt/thread-bubble {:thread item
:zoom zoom
:open? (= (:id item) (:open local))
:key (:seqn item)}])
[:div.comments-section
[:div.workspace-comments-container
{:style {:width (str (:width vport) "px")
:height (str (:height vport) "px")}}
[:div.threads {:style {:transform (str/format "translate(%spx, %spx)" pos-x pos-y)}}
(for [item threads]
[:& cmt/thread-bubble {:thread item
:zoom zoom
:open? (= (:id item) (:open local))
:key (:seqn item)}])
(when-let [id (:open local)]
(when-let [thread (get threads-map id)]
[:& cmt/thread-comments {:thread (update-thread-position thread)
:users users
:zoom zoom}]))
(when-let [id (:open local)]
(when-let [thread (get threads-map id)]
[:& cmt/thread-comments {:thread (update-thread-position thread)
:users users
:zoom zoom}]))
(when-let [draft (:comment drawing)]
[:& cmt/draft-thread {:draft draft
:on-cancel on-draft-cancel
:on-submit on-draft-submit
:zoom zoom}])]]]
(when-let [draft (:comment drawing)]
[:& cmt/draft-thread {:draft draft
:on-cancel on-draft-cancel
:on-submit on-draft-submit
:zoom zoom}])]]]))
;; OLD
[:div.comments-section
[:div.workspace-comments-container
{:style {:width (str (:width vport) "px")
:height (str (:height vport) "px")}}
[:div.threads {:style {:transform (str/format "translate(%spx, %spx)" pos-x pos-y)}}
(for [item threads]
[:& cmt/thread-bubble {:thread item
:zoom zoom
:open? (= (:id item) (:open local))
:key (:seqn item)}])
(when-let [id (:open local)]
(when-let [thread (get threads-map id)]
[:& cmt/thread-comments {:thread (update-thread-position thread)
:users users
:zoom zoom}]))
(when-let [draft (:comment drawing)]
[:& cmt/draft-thread {:draft draft
:on-cancel on-draft-cancel
:on-submit on-draft-submit
:zoom zoom}])]]])
))

24
frontend/src/app/main/ui/workspace/viewport/comments.scss Normal file
View file

@ -0,0 +1,24 @@
// 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";
.workspace-comments-container {
width: 100%;
height: 100%;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
z-index: 1000;
pointer-events: none;
overflow: hidden;
user-select: text;
}
.threads {
position: absolute;
top: $s-0;
left: $s-0;
}

10
frontend/src/app/util/avatars.cljs
View file

@ -11,14 +11,18 @@
(defn generate*
[{:keys [name color size]
:or {color "#000000" size 128}}]
:or {size 128}}]
(let [parts (str/words (str/upper name))
letters (if (= 1 (count parts))
(ffirst parts)
(str (ffirst parts) (first (second parts))))
canvas (.createElement js/document "canvas")
context (.getContext canvas "2d")]
context (.getContext canvas "2d")
text-color (if color
"#2e3434"
"#fff")
color (or color "#000000")]
(obj/set! canvas "width" size)
(obj/set! canvas "height" size)
@ -28,7 +32,7 @@
(obj/set! context "font" (str (/ size 2) "px Arial"))
(obj/set! context "textAlign" "center")
(obj/set! context "fillStyle" "#2e3434")
(obj/set! context "fillStyle" text-color)
(.fillText context letters (/ size 2) (/ size 1.5))
(.toDataURL canvas)))