mirror of
https://github.com/penpot/penpot.git
synced 2025-04-01 09:31:26 -05:00
💄 Fix some frontend bugs
This commit is contained in:
parent
92934c6cdd
commit
1a1e9b4ecd
38 changed files with 364 additions and 190 deletions
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -132,7 +132,7 @@
|
|||
"#faa6b7" ; salmon
|
||||
"#f9b489" ; orange
|
||||
"#fdcd79" ; soft-orange
|
||||
"#dee563" ; yellow
|
||||
"#dee563" ; yellow -> default presence color
|
||||
"#b1e96f" ; yellow-green
|
||||
})
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -220,6 +220,7 @@
|
|||
.team-icon {
|
||||
&.new-team {
|
||||
background-color: $da-primary;
|
||||
color: $db-primary;
|
||||
svg {
|
||||
fill: $db-secondary;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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));
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.element-set {
|
||||
margin: 0;
|
||||
.element-set-content {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.element-set {
|
||||
margin-bottom: $s-8;
|
||||
.element-set-content {
|
||||
display: flex;
|
||||
height: $s-32;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
.element-set {
|
||||
@include flexColumn;
|
||||
margin-bottom: $s-8;
|
||||
.presets {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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)}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -245,8 +245,9 @@
|
|||
}
|
||||
|
||||
.text-options {
|
||||
position: relative;
|
||||
@include flexColumn;
|
||||
position: relative;
|
||||
margin-bottom: $s-8;
|
||||
.font-option {
|
||||
@include titleTipography;
|
||||
@extend .asset-element;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
24
frontend/src/app/main/ui/workspace/viewport/comments.scss
Normal 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;
|
||||
}
|
|
@ -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)))
|
||||
|
|
Loading…
Add table
Reference in a new issue