Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-19 21:22:31 -05:00
Code Issues Activity

Merge pull request #3805 from penpot/alotor-ui-polish-2

Browse source 
💄 New UI polishing
This commit is contained in:
Eva Marco 2023-11-15 17:38:35 +01:00 • committed by GitHub
commit 59162e4f80
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 84 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -65,7 +65,8 @@
stroke: var(--button-primary-foreground-color-active);
}
}
&:global(.disabled) {
&:global(.disabled),
&[disabled] {
background-color: var(--button-background-color-disabled);
border: $s-1 solid var(--button-border-color-disabled);
color: var(--button-foreground-color-disabled);
@ -105,7 +106,8 @@
stroke: var(--button-secondary-foreground-color-active);
}
}
&:global(.disabled) {
&:global(.disabled),
&[disabled] {
background-color: var(--button-background-color-disabled);
border: $s-1 solid var(--button-border-color-disabled);
color: var(--button-foreground-color-disabled);
@ -144,11 +146,16 @@
stroke: var(--button-tertiary-foreground-color-active);
}
}
&:global(.disabled) {
background-color: var(--button-background-color-disabled);
border: $s-1 solid var(--button-border-color-disabled);
&:global(.disabled),
&[disabled] {
color: var(--button-foreground-color-disabled);
cursor: unset;
pointer-events: none;
svg,
span svg {
stroke: var(--button-background-color-disabled);
}
}
}

5
frontend/src/app/main/ui/components/tab_container.scss
View file

@ -14,10 +14,13 @@
.tab-container-content {
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.tab-element {
height: fit-content;
flex: 1;
height: 100%;
}
}
.tab-container-tabs {

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

@ -17,6 +17,7 @@
}
}
.code-block {
padding: 0 $s-4 $s-8 0;
.code-row-lang {
display: flex;
justify-content: space-between;

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

@ -7,6 +7,8 @@
@import "refactor/common-refactor.scss";
.element-set {
padding-bottom: $s-16;
.element-title {
.title-spacing-export-viewer {
@extend .attr-title;

8
frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
View file

@ -15,6 +15,9 @@
right: unset;
grid-area: right-sidebar;
.tool-windows {
height: 100%;
display: flex;
flex-direction: column;
.shape-row {
display: flex;
gap: $s-8;
@ -61,4 +64,9 @@
padding: $s-8 $s-24;
}
}
.inspect-content {
flex: 1;
overflow: hidden;
}
}

7
frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss
View file

@ -8,6 +8,8 @@
.color-values {
@include flexColumn;
margin-top: $s-8;
&.disable-opacity {
grid-template-columns: 3.5rem repeat(3, 1fr);
}
@ -16,6 +18,8 @@
.input-wrapper {
@extend .input-element;
width: $s-84;
display: flex;
align-items: baseline;
}
}
.hex-alpha-wrapper {
@ -25,6 +29,9 @@
width: $s-84;
&.hex {
width: $s-172;
display: flex;
align-items: baseline;
gap: $s-8;
}
}
}

5
frontend/src/app/main/ui/workspace/colorpicker/ramp.scss
View file

@ -12,7 +12,7 @@
height: $s-140;
width: $s-256;
margin-top: $s-12;
margin-bottom: $s-6;
margin-bottom: $s-12;
cursor: pointer;
.handler {
@ -44,3 +44,6 @@
height: $s-52;
cursor: pointer;
}
.sliders-wrapper {
@include flexColumn;
}

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

@ -62,7 +62,7 @@
flex-direction: column;
height: calc(100% - $s-12);
.title-spacing-lib {
margin: 0 0 $s-24 calc(-1 * $s-8);
margin: 0 0 0 calc(-1 * $s-8);
}
.section-list,
.section-list-shared {
@ -70,6 +70,7 @@
max-height: $s-320;
margin-top: $s-12;
overflow: auto;
padding-right: $s-8;
.section-list-item {
display: grid;
grid-template-columns: 1fr auto;

1
frontend/src/app/main/ui/workspace/palette.scss
View file

@ -112,6 +112,7 @@
.palette {
grid-area: palette;
width: 100%;
min-width: 0;
}
.handler {
@include buttonStyle;

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

@ -32,18 +32,16 @@ $width-settings-bar-max: $s-500;
left: 0;
width: 100%;
height: $s-12;
border-top: 2px solid var(--color-background-secondary);
border-top: 2px solid var(--color-background-quaternary);
background-color: var(--color-background-primary);
cursor: ns-resize;
&:hover {
border-color: var(--color-background-quaternary);
}
}
.settings-bar-inside {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100%;
height: calc(100vh - $s-52);
overflow: hidden;
.tabs-wrapper {
.layers-tab {
display: grid;
@ -63,6 +61,8 @@ $width-settings-bar-max: $s-500;
width: $width-settings-bar;
background-color: var(--panel-background-color);
height: 100%;
display: flex;
flex-direction: column;
&.not-expand {
max-width: $width-settings-bar;
}

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

@ -11,6 +11,7 @@
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding-left: $s-12;
.tab-spacing {
@ -27,6 +28,7 @@
.element-options {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: $s-16;

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

@ -98,6 +98,7 @@
@extend .input-element;
width: $s-60;
min-width: $s-60;
align-items: baseline;
input {
width: $s-32;
}
@ -109,6 +110,9 @@
width: $s-44;
}
}
.spread-input {
gap: $s-8;
}
}
}
}

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

@ -24,6 +24,10 @@
border-radius: $br-8 0 0 $br-8;
padding: 0;
margin-right: 0;
gap: $s-4;
input {
padding: 0;
}
&.no-opacity {
border-radius: $br-8;
}

5
frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
View file

@ -12,13 +12,12 @@
@include flexRow;
.stroke-width-input-element {
@extend .input-element;
width: $s-60;
width: $s-96;
border-radius: $br-8;
.icon {
@include flexCenter;
height: $s-32;
width: $s-12;
margin-right: $s-4;
width: $s-20;
}
}
.select-wrapper {

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

@ -115,14 +115,14 @@
[:div {:class (stl/css :sub-actions)}
[:div {:class (stl/css :sub-actions-group)}
;; Draw Mode
;; Draw Mode
[:button
{:class (stl/css-case :is-toggled (= edit-mode :draw))
:title (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
:on-click on-select-draw-mode}
i/pentool-refactor]
;; Edit mode
;; Edit mode
[:button
{:class (stl/css-case :is-toggled (= edit-mode :move))
:title (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
@ -130,59 +130,58 @@
i/move-refactor]]
[:div {:class (stl/css :sub-actions-group)}
;; Add Node
;; Add Node
[:button
{:class (stl/css-case :is-disabled (not (:add-node enabled-buttons)))
{:disabled (not (:add-node enabled-buttons))
:title (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
:on-click on-add-node}
i/add-refactor]
;; Remove node
;; Remove node
[:button
{:class (stl/css-case :is-disabled (not (:remove-node enabled-buttons)))
{:disabled (not (:remove-node enabled-buttons))
:title (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
:on-click on-remove-node}
i/remove-refactor]]
[:div {:class (stl/css :sub-actions-group)}
;; Merge Nodes
;; Merge Nodes
[:button
{:class (stl/css-case :is-disabled (not (:merge-nodes enabled-buttons)))
{:disabled (not (:merge-nodes enabled-buttons))
:title (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
:on-click on-merge-nodes}
i/merge-nodes-refactor]
;; Join Nodes
;; Join Nodes
[:button
{:class (stl/css-case :is-disabled (not (:join-nodes enabled-buttons)))
{:disabled (not (:join-nodes enabled-buttons))
:title (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
:on-click on-join-nodes}
i/join-nodes-refactor]
;; Separate Nodes
;; Separate Nodes
[:button
{:class (stl/css-case :is-disabled (not (:separate-nodes enabled-buttons)))
{:disabled (not (:separate-nodes enabled-buttons))
:title (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
:on-click on-separate-nodes}
i/separate-nodes-refactor]]
;; Make Corner
;; Make Corner
[:div {:class (stl/css :sub-actions-group)}
[:button
{:class (stl/css-case :is-disabled (not (:make-corner enabled-buttons)))
{:disabled (not (:make-corner enabled-buttons))
:title (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner))
:on-click on-make-corner}
i/to-corner-refactor]
;; Make Curve
;; Make Curve
[:button
{:class (stl/css-case :is-disabled (not (:make-curve enabled-buttons)))
{:disabled (not (:make-curve enabled-buttons))
:title (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
:on-click on-make-curve}
i/to-curve-refactor]]
;; Toggle snap
;; Toggle snap
[:div {:class (stl/css :sub-actions-group)}
[:button
{:class (stl/css-case :is-toggled snap-toggled)
@ -195,14 +194,14 @@
[:div.path-actions
[:div.viewport-actions-group
;; Draw Mode
;; Draw Mode
[:div.viewport-actions-entry.tooltip.tooltip-bottom
{:class (when (= edit-mode :draw) "is-toggled")
:alt (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
:on-click on-select-draw-mode}
i/pen]
;; Edit mode
;; Edit mode
[:div.viewport-actions-entry.tooltip.tooltip-bottom
{:class (when (= edit-mode :move) "is-toggled")
:alt (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
@ -210,14 +209,14 @@
i/pointer-inner]]
[:div.viewport-actions-group
;; Add Node
;; Add Node
[:div.viewport-actions-entry.tooltip.tooltip-bottom
{:class (when-not (:add-node enabled-buttons) "is-disabled")
:alt (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
:on-click on-add-node}
i/nodes-add]
;; Remove node
;; Remove node
[:div.viewport-actions-entry.tooltip.tooltip-bottom
{:class (when-not (:remove-node enabled-buttons) "is-disabled")
:alt (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
@ -225,28 +224,28 @@
i/nodes-remove]]
[:div.viewport-actions-group
;; Merge Nodes
;; Merge Nodes
[:div.viewport-actions-entry.tooltip.tooltip-bottom
{:class (when-not (:merge-nodes enabled-buttons) "is-disabled")
:alt (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
:on-click on-merge-nodes}
i/nodes-merge]
;; Join Nodes
;; Join Nodes
[:div.viewport-actions-entry.tooltip.tooltip-bottom
{:class (when-not (:join-nodes enabled-buttons) "is-disabled")
:alt (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
:on-click on-join-nodes}
i/nodes-join]
;; Separate Nodes
;; Separate Nodes
[:div.viewport-actions-entry.tooltip.tooltip-bottom
{:class (when-not (:separate-nodes enabled-buttons) "is-disabled")
:alt (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
:on-click on-separate-nodes}
i/nodes-separate]]
;; Make Corner
;; Make Corner
[:div.viewport-actions-group
[:div.viewport-actions-entry.tooltip.tooltip-bottom
{:class (when-not (:make-corner enabled-buttons) "is-disabled")
@ -254,14 +253,14 @@
:on-click on-make-corner}
i/nodes-corner]
;; Make Curve
;; Make Curve
[:div.viewport-actions-entry.tooltip.tooltip-bottom
{:class (when-not (:make-curve enabled-buttons) "is-disabled")
:alt (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
:on-click on-make-curve}
i/nodes-curve]]
;; Toggle snap
;; Toggle snap
[:div.viewport-actions-group
[:div.viewport-actions-entry.tooltip.tooltip-bottom
{:class (when snap-toggled "is-toggled")

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

@ -41,10 +41,6 @@
border-radius: $s-8;
border: none;
margin: 0 $s-2;
&.is-disabled {
pointer-events: none;
opacity: 40%;
}
&.is-toggled {
background-color: var(--button-radio-background-color-active);
svg {