3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-13 06:16:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix small interface errors

Browse source
This commit is contained in:
Eva 2023-11-15 17:04:22 +01:00 • committed by Alonso Torres
parent dcd347ab4f
commit 617edd0fa8
42 changed files with 338 additions and 228 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/images/icons/bug-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 14.188V4.925m0 9.262c2.599 0 4.706-1.978 4.706-4.419V4.925H8m0 9.262c-2.599 0-4.706-1.978-4.706-4.419V4.925H8m4.706 1.824l2.275-2.311m-.32 9.624l-2.276-2.312M15.5 9.312h-2.794M3.294 6.75L1.02 4.438m.32 9.624l2.276-2.312M.5 9.312h2.794m7.301-4.387h-5.19v-.488C5.405 3.091 6.567 2 8 2c1.433 0 2.595 1.091 2.595 2.438v.487z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 455 B

2
frontend/resources/styles/common/dependencies/colors.scss
View file

@ -50,7 +50,7 @@ $color-gray-60: #1f1f1f;
// UI colors
$color-select: #1fdea7;
$color-distance: #db00ff;
$color-distance: #ff6fe0;
$color-snap: #d383da;
// Mixing Color variable for creating both light and dark colors

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

@ -162,6 +162,16 @@
}
}
.button-icon-selected {
outline: none;
border: $s-1 solid transparent;
background-color: var(--button-tertiary-background-color-hover);
color: var(--button-tertiary-foreground-color-active);
svg {
stroke: var(--button-tertiary-foreground-color-active);
}
}
.button-radio {
@include buttonStyle;
@include flexCenter;
@ -321,6 +331,7 @@
}
&:hover {
border: $s-1 solid var(--input-background-color-hover);
span {
color: var(--input-foreground-color);
}
@ -619,6 +630,7 @@
height: $s-24;
width: $s-24;
border-radius: $br-circle;
margin-left: calc(-1 * $s-4);
img {
border-radius: $br-circle;
border: $s-2 solid var(--user-count-foreground-color);
@ -823,7 +835,7 @@
max-height: $s-300;
padding: $s-2;
margin: 0;
margin-top: $s-4;
margin-top: $s-1;
border-radius: $br-8;
z-index: $z-index-3;
overflow-y: auto;

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

@ -221,8 +221,8 @@
--empty-message-background-color: var(--color-background-tertiary);
--empty-message-foreground-color: var(--color-foreground-secondary);
--user-count-background-color: var(--color-background-secondary);
--user-count-foreground-color: var(--color-accent-primary);
--user-count-background-color: var(--color-accent-primary);
--user-count-foreground-color: var(--color-background-secondary);
// COLORPICKER
--colorpicker-details-color: var(--color-background-quaternary);

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

@ -101,6 +101,15 @@
box-sizing: border-box;
}
@mixin hiddenElement {
cursor: default;
pointer-events: none;
box-sizing: border-box;
color: var(--input-foreground-color-disabled);
stroke: var(--input-foreground-color-disabled);
background-color: transparent;
}
@keyframes spin-animation {
0% {
transform: rotate(0deg);

4
frontend/src/app/config.cljs
View file

@ -131,9 +131,9 @@
(= candidate platform))
(defn resolve-profile-photo-url
[{:keys [photo-id fullname name] :as profile}]
[{:keys [photo-id fullname name color] :as profile}]
(if (nil? photo-id)
(avatars/generate {:name (or fullname name)})
(avatars/generate {:name (or fullname name) :color color})
(dm/str (u/join public-uri "assets/by-id/" photo-id))))
(defn resolve-team-photo-url

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

@ -123,17 +123,17 @@
;; --- Handle: Presence
(def ^:private presence-palette
#{"#02bf51" ; darkpastelgreen text white
"#00fa9a" ; mediumspringgreen text black
"#b22222" ; firebrick text white
"#ff8c00" ; darkorage text white
"#ffd700" ; gold text black
"#ba55d3" ; mediumorchid text white
"#dda0dd" ; plum text black
"#008ab8" ; blueNCS text white
"#00bfff" ; deepskyblue text white
"#ff1493" ; deeppink text white
"#ffafda" ; carnationpink text black
#{"#82e590" ; green
"#7ad7c5" ; blue-green
"#75cafc" ; blue
"#a9bdfa" ; blue-purple
"#cbaaff" ; purple
"#f49ef7" ; pink
"#faa6b7" ; salmon
"#f9b489" ; orange
"#fdcd79" ; soft-orange
"#dee563" ; yellow
"#b1e96f" ; yellow-green
})
(defn handle-presence
@ -158,10 +158,7 @@
(assoc :updated-at (dt/now))
(assoc :version version)
(update :color update-color presence)
(assoc :text-color (if (contains? ["#00fa9a" "#ffd700" "#dda0dd" "#ffafda"]
(update-color (:color presence) presence))
"#000"
"#fff"))))
(assoc :text-color "#000")))
(update-presence [presence]
(-> presence

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

@ -85,6 +85,7 @@
.big-text {
@include inspectValue;
color: var(--palette-text-color);
height: $s-16;
}

2
frontend/src/app/main/ui/components/editable_select.cljs
View file

@ -205,7 +205,7 @@
[:li
{:key (str element-id "-" index)
:class (stl/css-case :dropdown-element true
:is-selected (= value current-value))
:is-selected (= (dm/str value) current-value))
:data-value value
:on-click select-item}
[:span {:class (stl/css :label)} label]

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

@ -36,7 +36,7 @@
}
.dropdown-element {
@extend .dropdown-element-base;
color: var(--menu-foreground-color);
color: var(--menu-foreground-color-rest);
.label {
flex-grow: 1;
width: 100%;
@ -52,6 +52,7 @@
}
&.is-selected {
color: var(--menu-foreground-color);
.check-icon svg {
stroke: var(--menu-foreground-color);
visibility: visible;

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

@ -51,7 +51,6 @@
}
.checked-element {
@extend .dropdown-element-base;
.icon {
@include flexCenter;
height: $s-24;

11
frontend/src/app/main/ui/components/shape_icon_refactor.cljs
View file

@ -22,12 +22,13 @@
(case (:type shape)
:frame (cond
(and (ctl/flex-layout? shape) (ctl/col? shape))
i/flex-vertical-refactor
(and (ctl/flex-layout? shape) (ctl/row? shape))
i/flex-horizontal-refactor
;; TODO: GRID ICON
(and (ctl/flex-layout? shape) (ctl/row? shape))
i/flex-vertical-refactor
(ctl/grid-layout? shape)
i/flex-grid-refactor
:else
i/board-refactor)
@ -35,7 +36,7 @@
:image i/img-refactor
:line (if (cts/has-images? shape) i/img-refactor i/path-refactor)
:circle (if (cts/has-images? shape) i/img-refactor i/elipse-refactor)
:path (if (cts/has-images? shape) i/img-refactor i/curve-refactor)
:path (if (cts/has-images? shape) i/img-refactor i/path-refactor)
:rect (if (cts/has-images? shape) i/img-refactor i/rectangle-refactor)
:text i/text-refactor
:group (if (:masked-group shape)

1
frontend/src/app/main/ui/icons.cljs
View file

@ -307,6 +307,7 @@
(def boolean-flatten-refactor (icon-xref :boolean-flatten-refactor))
(def boolean-intersection-refactor (icon-xref :boolean-intersection-refactor))
(def boolean-union-refactor (icon-xref :boolean-union-refactor))
(def bug-refactor (icon-xref :bug-refactor))
(def clip-content-refactor (icon-xref :clip-content-refactor))
(def clipboard-refactor (icon-xref :clipboard-refactor))
(def close-refactor (icon-xref :close-refactor))

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

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.left-toolbar
(:require-macros [app.main.style :refer [css]])
(:require-macros [app.main.style :as stl])
(:require
[app.common.geom.point :as gpt]
[app.common.media :as cm]
@ -77,7 +77,7 @@
read-only? (mf/use-ctx ctx/workspace-read-only?)
show-palette-btn? (and (not ^boolean read-only?) (not ^boolean new-css-system))
rulers? (mf/deref refs/rules?)
hide-toolbar? (mf/deref refs/toolbar-visibility)
interrupt
@ -145,15 +145,16 @@
(if new-css-system
(when-not ^boolean read-only?
[:aside {:class (dom/classnames (css :main-toolbar) true
(css :hidden-toolbar) hide-toolbar?)}
[:ul {:class (css :main-toolbar-options)}
[:aside {:class (stl/css-case :main-toolbar true
:not-rulers-present (not rulers?)
:hidden-toolbar hide-toolbar?)}
[:ul {:class (stl/css :main-toolbar-options)}
[:li
[:button
{:title (tr "workspace.toolbar.move" (sc/get-tooltip :move))
:aria-label (tr "workspace.toolbar.move" (sc/get-tooltip :move))
:class (when (and (nil? selected-drawtool)
(not edition)) "selected")
:class (stl/css-case :selected (and (nil? selected-drawtool)
(not edition)))
:on-click interrupt}
i/move-refactor]]
[:*
@ -161,7 +162,7 @@
[:button
{:title (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
:aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
:class (when (= selected-drawtool :frame) "selected")
:class (stl/css-case :selected (= selected-drawtool :frame))
:on-click select-drawtool
:data-tool "frame"
:data-test "artboard-btn"}
@ -170,7 +171,7 @@
[:button
{:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
:aria-label (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
:class (when (= selected-drawtool :rect) "selected")
:class (stl/css-case :selected (= selected-drawtool :rect))
:on-click select-drawtool
:data-tool "rect"
:data-test "rect-btn"}
@ -179,7 +180,7 @@
[:button
{:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
:aria-label (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
:class (when (= selected-drawtool :circle) "selected")
:class (stl/css-case :selected (= selected-drawtool :circle))
:on-click select-drawtool
:data-tool "circle"
:data-test "ellipse-btn"}
@ -188,7 +189,7 @@
[:button
{:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
:aria-label (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
:class (when (= selected-drawtool :text) "selected")
:class (stl/css-case :selected (= selected-drawtool :text))
:on-click select-drawtool
:data-tool "text"}
i/text-refactor]]
@ -199,7 +200,7 @@
[:button
{:title (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
:aria-label (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
:class (when (= selected-drawtool :curve) "selected")
:class (stl/css-case :selected (= selected-drawtool :curve))
:on-click select-drawtool
:data-tool "curve"
:data-test "curve-btn"}
@ -208,30 +209,32 @@
[:button
{:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
:aria-label (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
:class (when (= selected-drawtool :path) "selected")
:class (stl/css-case :selected (= selected-drawtool :path))
:on-click select-drawtool
:data-tool "path"
:data-test "path-btn"}
i/pentool-refactor]]]]
[:button {:class (dom/classnames (css :toolbar-handler) true)
:on-click toggle-toolbar}
[:div {:class (dom/classnames (css :toolbar-handler-btn) true)}]]
i/path-refactor]]
[:ul {:class (dom/classnames (css :main-toolbar-panels) true)}
(when *assert*
[:li
[:button
{:title "Debugging tool"
:class (stl/css-case :selected (contains? layout :debug-panel))
:on-click toggle-debug-panel}
i/bug-refactor]])]]
[:button {:class (stl/css :toolbar-handler)
:on-click toggle-toolbar}
[:div {:class (stl/css :toolbar-handler-btn)}]]
[:ul {:class (stl/css :main-toolbar-panels)}
[:li
[:button
{:title (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
:aria-label (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
:class (when (contains? layout :shortcuts) "selected")
:on-click toggle-shortcuts}
i/shortcut]
(when *assert*
[:button
{:title "Debugging tool"
:class (when (contains? layout :debug-panel) "selected")
:on-click toggle-debug-panel}
i/bug])]]])
i/shortcut]]]])
[:aside.left-toolbar
[:ul.left-toolbar-options

14
frontend/src/app/main/ui/workspace/left_toolbar.scss
View file

@ -47,9 +47,16 @@
@extend .button-icon;
stroke: var(--color-foreground-secondary);
}
&.selected {
background-color: var(--button-radio-background-color-active);
svg {
stroke: var(--button-radio-foreground-color-active);
}
}
}
}
}
.toolbar-handler {
@include flexCenter;
@include buttonStyle;
@ -68,6 +75,7 @@
background-color: var(--palette-handler-background-color);
}
}
&.hidden-toolbar {
top: $s-20;
height: $s-16;
@ -77,6 +85,12 @@
opacity: $op-0;
}
}
&.not-rulers-present {
top: $s-8;
&.hidden-toolbar {
top: $s-0;
}
}
ul.main-toolbar-panels {
display: none;

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

@ -81,12 +81,7 @@
stroke: var(--icon-foreground);
}
&.selected {
border: $s-2 solid var(--palette-btn-border-color-selected);
background-color: var(--palette-btn-background-color-selected);
color: var(--palette-btn-foreground-color-selected);
svg {
stroke: var(--palette-btn-foreground-color-selected);
}
@extend .button-icon-selected;
}
&:hover {
border: $s-2 solid transparent;

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

@ -19,13 +19,14 @@
(mf/defc session-widget
[{:keys [session profile index] :as props}]
[:li.tooltip.tooltip-bottom
{:class (stl/css :session-icon)
:style #js {"zIndex" (str (or (+ 1 (* -1 index)) 0))}
:alt (:fullname profile)}
(let [profile (assoc profile :color (:color session))]
[:li {:class (stl/css :session-icon)
:style #js {"zIndex" (str (or (+ 1 (* -1 index)) 0)),
"background-color" (:color session)}
:title (:fullname profile)}
[:img {:alt (:fullname profile)
:style {:border-color (:color session)}
:src (cfg/resolve-profile-photo-url profile)}]])
:style {:background-color (:color session)}
:src (cfg/resolve-profile-photo-url profile)}]]))
(mf/defc active-sessions
{::mf/wrap [mf/memo]}
@ -56,7 +57,7 @@
:on-blur close-users-widget}
[:ul {:class (stl/css :active-users-list)}
(when (< 2 num-users)
[:span {:class (stl/css :users-num)} num-users])
[:li [:span {:class (stl/css :users-num)} num-users]])
(for [session user-ids]
[:& session-widget
{:session session

14
frontend/src/app/main/ui/workspace/presence.scss
View file

@ -13,8 +13,8 @@
flex-direction: row-reverse;
justify-content: flex-end;
align-items: center;
margin: 0 0 0 $s-4;
padding: $s-4;
margin: 0;
padding: 0 $s-4;
border-radius: $br-8;
.active-users-list {
display: flex;
@ -24,24 +24,20 @@
.users-num {
@extend .user-icon;
height: $s-28;
width: $s-28;
background-color: var(--user-count-background-color);
color: var(--user-count-foreground-color);
margin-left: calc(-1 * $s-4);
z-index: $z-index-2;
margin-top: calc(-1 * $s-1);
border: $s-2 solid var(--user-count-foreground-color);
}
.session-icon {
@extend .user-icon;
margin-left: calc(-1 * $s-4);
}
}
}
.active-users-opened {
position: absolute;
right: calc(-1 * $s-4);
top: calc(-1 * $s-4);
right: calc(-1 * $s-2);
top: calc(-1 * $s-2);
padding: $s-8;
margin: calc(-1 * $s-2) calc(-1 * $s-4) 0 0;
background-color: var(--menu-background-color);

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

@ -104,8 +104,7 @@
:class (stl/css-case :zoom-widget true
:selected open?)
:title (tr "workspace.header.zoom")}
[:span {:class (stl/css :label)} zoom]
[:span {:class (stl/css :icon)} i/arrow-refactor]]
[:span {:class (stl/css :label)} zoom]]
[:& dropdown {:show open? :on-close close-dropdown}
[:ul {:class (stl/css :dropdown)}
[:li {:class (stl/css :basic-zoom-bar)}
@ -202,6 +201,9 @@
[:div {:class (stl/css :users-section)}
[:& active-sessions]]
[:& persistence-state-widget]
[:div {:class (stl/css :zoom-section)}
[:& zoom-widget-workspace
{:zoom zoom
@ -211,7 +213,6 @@
:on-zoom-fit on-zoom-fit
:on-zoom-selected on-zoom-selected}]]
[:& persistence-state-widget]
[:& export-progress-widget]
[:div {:class (stl/css :comments-section)}
@ -232,6 +233,7 @@
:history-button true)
:on-click toggle-history}
i/history-refactor]])
[:a {:class (stl/css :viewer-btn)
:title (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer))
:on-click nav-to-viewer}

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

@ -16,56 +16,39 @@
.users-section {
position: relative;
min-width: $s-32;
max-width: $s-72;
padding: $s-4 $s-6;
}
.zoom-section {
.zoom-widget {
@include buttonStyle;
display: flex;
align-items: center;
justify-content: flex-end;
justify-content: center;
height: $s-28;
width: $s-72;
max-width: $s-72;
padding: $s-4;
max-width: $s-48;
border-radius: $br-8;
.label {
@include titleTipography;
color: var(--menu-foreground-color);
}
.icon {
@include flexCenter;
svg {
@extend .button-icon;
stroke: var(--menu-foreground-color);
transform: rotate(90deg);
}
color: var(--button-tertiary-foreground-color-rest);
}
&:hover {
background-color: var(--button-tertiary-background-color-hover);
.label {
color: var(--button-tertiary-foreground-color-hover);
}
.icon svg {
stroke: var(--button-tertiary-foreground-color-hover);
color: var(--button-tertiary-foreground-color-focus);
}
}
&.selected {
background-color: var(--button-tertiary-background-color-selected);
border: $s-2 solid var(--button-tertiary-border-color-selected);
.label {
color: var(--button-tertiary-foreground-color-active);
}
.icon svg {
stroke: var(--button-tertiary-foreground-color-active);
color: var(--button-tertiary-foreground-color-focus);
}
}
}
.dropdown {
@extend .menu-dropdown;
right: 0;
top: $s-48;
width: $s-280;
right: $s-2;
top: calc($s-2 + $s-48);
width: $s-272;
.basic-zoom-bar {
display: flex;
justify-content: space-between;
@ -94,14 +77,15 @@
.zoom-text {
@include flexCenter;
height: 100%;
min-width: $s-68;
padding: 0 $s-8;
margin: 0;
min-width: $s-48;
padding: 0;
margin: 0 $s-2;
color: var(--modal-title-foreground-color);
}
}
.reset-btn {
@extend .button-tertiary;
color: var(--button-tertiary-foreground-color-hover);
height: $s-28;
border-radius: $br-8;
}
@ -138,6 +122,10 @@
height: $s-16;
width: $s-16;
}
&:hover {
background-color: transparent;
border: none;
}
&.selected {
background-color: var(--button-tertiary-background-color-selected);
border: $s-2 solid var(--button-tertiary-border-color-selected);
@ -160,6 +148,10 @@
height: $s-16;
width: $s-16;
}
&:hover {
background-color: transparent;
border: none;
}
&.selected {
background-color: var(--button-tertiary-background-color-selected);
border: $s-2 solid var(--button-tertiary-border-color-selected);
@ -215,5 +207,8 @@
height: $s-16;
width: $s-16;
}
&:hover {
background-color: transparent;
}
}
}

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

@ -112,7 +112,7 @@
height: calc(100vh - $s-180);
}
.assets-header {
padding: $s-8 0 $s-12 $s-12;
padding: $s-8 $s-12 $s-12 $s-12;
.search-wrapper {
display: flex;
gap: $s-4;

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

@ -12,7 +12,6 @@
align-items: center;
width: 100%;
background-color: var(--layer-row-background-color);
padding-left: $s-8;
.element-list-body {
display: flex;
@ -144,6 +143,7 @@
--context-hover-color: var(--layer-row-foreground-color-hover);
--context-hover-opacity: $op-10;
background-color: var(--layer-row-background-color-hover);
box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-hover);
&.hidden {
opacity: $op-10;
}
@ -197,6 +197,7 @@
}
&.selected {
background-color: var(--layer-row-background-color-selected);
box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-selected);
.element-list-body {
.button-content {
.toggle-content {

8
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
View file

@ -42,6 +42,7 @@
toggle-content (mf/use-fn #(swap! state* update :show-content not))
toggle-more-options (mf/use-fn #(swap! state* update :show-more-options not))
hidden? (:hidden blur)
change!
(mf/use-fn
@ -94,7 +95,8 @@
:on-click handle-add} i/add-refactor])]]
(when (and open? has-value?)
[:div {:class (stl/css :element-set-content)}
[:div {:class (stl/css :first-row)}
[:div {:class (stl/css-case :first-row true
:hidden hidden?)}
[:div {:class (stl/css :blur-info)}
[:button {:class (stl/css-case :show-more true
:selected more-options?)
@ -105,7 +107,7 @@
[:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn)
:on-click handle-toggle-visibility}
(if (:hidden blur)
(if hidden?
i/hide-refactor
i/shown-refactor)]
[:button {:class (stl/css :action-btn)
@ -135,7 +137,7 @@
[:div.element-set-title-actions
(when (and has-value? (not multiple?))
[:div.add-page {:on-click handle-toggle-visibility}
(if (:hidden blur) i/eye-closed i/eye)])
(if hidden? i/eye-closed i/eye)])
(if has-value?
[:div.add-page {:on-click handle-delete} i/minus]

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

@ -38,19 +38,20 @@
height: $s-32;
width: $s-28;
border-radius: $br-8 0 0 $br-8;
box-sizing: border-box;
border: $s-1 solid var(--button-secondary-background-color-rest);
svg {
@extend .button-icon;
}
&.selected {
background-color: var(--button-tertiary-background-color-hover);
color: var(--button-tertiary-foreground-color-active);
background-color: var(--button-radio-background-color-active);
svg {
stroke: var(--button-tertiary-foreground-color-active);
stroke: var(--button-radio-foreground-color-active);
}
}
}
.label {
@include tabTitleTipography;
@include titleTipography;
flex-grow: 1;
display: flex;
align-items: center;
@ -58,12 +59,17 @@
padding: 0 $s-8;
border-radius: 0 $br-8 $br-8 0;
background-color: var(--input-background-color);
color: var(--menu-foreground-color);
box-sizing: border-box;
border: $s-1 solid var(--input-background-color);
}
}
.actions {
@include flexRow;
.action-btn {
@extend .button-tertiary;
box-sizing: border-box;
border: $s-1 solid var(--button-tertiary-background-color-rest);
height: $s-32;
width: $s-28;
svg {
@ -71,6 +77,20 @@
}
}
}
&.hidden {
.blur-info {
@include hiddenElement;
.show-more {
@include hiddenElement;
border: $s-1 solid var(--input-border-color-disabled);
}
.label {
@include hiddenElement;
border: $s-1 solid var(--input-border-color-disabled);
}
}
}
}
.second-row {
@extend .input-element;

9
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
View file

@ -61,7 +61,9 @@
toggle-content (mf/use-fn #(swap! state* not))
open-content (mf/use-fn #(reset! state* true))
close-content (mf/use-fn #(reset! state* false))
hide-fill-on-export? (:hide-fill-on-export values false)
@ -72,7 +74,9 @@
(mf/deps ids)
(fn [_]
(st/emit! (dc/add-fill ids {:color default-color
:opacity 1}))))
:opacity 1}))
(when (not (some? (seq fills))) (open-content))))
on-change
(mf/use-fn
@ -92,7 +96,8 @@
(fn [index]
(fn []
(st/emit! (dc/remove-fill ids {:color default-color
:opacity 1} index))))
:opacity 1} index))
(when (= 1 (count (seq fills))) (close-content))))
on-remove-all
(fn [_]
(st/emit! (dc/remove-all-fills ids {:color clr/black

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

@ -193,7 +193,8 @@
:disable-image true
:on-change handle-change-color
:on-detach handle-detach-color}]
[:button {:class (stl/css :show-more-options)
[: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?
@ -212,10 +213,10 @@
(when (or (= :column type) (= :row type))
[:div {:class (stl/css :column-row)}
[:div {:class (stl/css :advanced-row)}
[:div {:class (stl/css :select-wrapper)}
[: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)
: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")
@ -269,7 +270,8 @@
:className (stl/css :numeric-input)
:value (or (:margin params) 0)}]]
[:button {:class (stl/css :show-more-options)
[: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?

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

@ -34,15 +34,13 @@
height: $s-32;
width: $s-28;
border-radius: $br-8 0 0 $br-8;
box-sizing: border-box;
border: $s-1 solid var(--input-background-color);
svg {
@extend .button-icon;
}
&.selected {
background-color: var(--button-secondary-background-color-active);
color: var(--button-secondary-foreground-color-active);
svg {
stroke: var(--button-secondary-foreground-color-active);
}
@extend .button-icon-selected;
}
}
.type-select-wrapper {
@ -52,6 +50,12 @@
height: $s-32;
.grid-type-select {
border-radius: 0;
height: 100%;
box-sizing: border-box;
border: $s-1 solid var(--input-background-color);
&:hover {
border: $s-1 solid var(--input-background-color-hover);
}
}
}
.grid-size {
@ -70,11 +74,13 @@
width: $s-60;
margin: 0;
padding: 0;
border: $s-1 solid var(--input-background-color);
position: relative;
border-radius: 0 $br-8 $br-8 0;
.column-select {
height: $s-32;
border-radius: 0 $br-8 $br-8 0;
box-sizing: border-box;
border: $s-1 solid var(--input-background-color);
.numeric-input {
@extend .input-base;
margin: 0;
@ -90,22 +96,29 @@
}
&.hidden {
.show-options,
.show-options {
@include hiddenElement;
border: $s-1 solid var(--input-border-color-disabled);
}
.type-select-wrapper,
.editable-select-wrapper {
background-color: transparent;
border: $s-1 solid var(--input-border-color-disabled);
color: var(--input-foreground-color-disabled);
@include hiddenElement;
.column-select,
.grid-type-select {
background-color: transparent;
@include hiddenElement;
border: $s-1 solid var(--input-border-color-disabled);
}
.column-select {
@include hiddenElement;
border-radius: 0 $br-8 $br-8 0;
.numeric-input {
@include hiddenElement;
}
}
}
.grid-size {
background-color: transparent;
@include hiddenElement;
border: $s-1 solid var(--input-border-color-disabled);
color: var(--input-foreground-color-disabled);
.icon {
stroke: var(--input-foreground-color-disabled);
}
@ -149,7 +162,7 @@
position: relative;
display: flex;
gap: $s-4;
.select-wrapper {
.orientation-select-wrapper {
width: $s-92;
padding: 0;
}
@ -163,6 +176,9 @@
svg {
@extend .button-icon;
}
&.selected {
@extend .button-icon-selected;
}
}
.height {
@extend .input-element;
@ -185,7 +201,7 @@
@include menuShadow;
@include flexColumn;
position: absolute;
top: $s-36;
top: calc($s-2 + $s-28);
right: 0;
width: $s-156;
max-height: $s-300;

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

@ -175,7 +175,8 @@
[:div {:class (stl/css :flow-element)}
[:button {:class (stl/css :start-flow-btn)
:on-click start-flow}
i/play-refactor]
[:span {:class (stl/css :button-icon)}
i/play-refactor]]
(if @editing?
[:input
@ -509,7 +510,8 @@
:open extended-open?)}
; Summary
[:div {:class (stl/css :interactions-summary)}
[:div {:class (stl/css :extend-btn)
[:div {:class (stl/css-case :extend-btn true
:extended extended-open?)
:on-click toggle-extended}
i/menu-refactor]
@ -614,7 +616,8 @@
:on-change change-overlay-pos-type}]]]
;; Overlay position (buttons)
[:div {:class (stl/css :property-row)}
[:div {:class (stl/css-case :property-row true
:big-row true)}
[:div {:class (stl/css :position-btns-wrapper)}
[:button {:class (stl/css-case :direction-btn true
:center-btn true
@ -767,6 +770,7 @@
[:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-easing")]
[:div {:class (stl/css :select-wrapper)}
[:& select {:class (stl/css :easing-select)
:dropdown-class (stl/css :dropdown-upwards)
:default-value (-> interaction :animation :easing)
:options easing-options
:on-change change-easing}]]])

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

@ -56,6 +56,9 @@
@include flexColumn;
.property-row {
@extend .attr-row;
&.big-row {
height: 100%;
}
.interaction-name {
@include twoLineTextEllipsis;
@include titleTipography;
@ -68,6 +71,15 @@
display: flex;
align-items: center;
grid-area: content;
.easing-select {
width: $s-156;
padding: 0 $s-8;
.dropdown-upwards {
bottom: $s-36;
width: $s-156;
top: unset;
}
}
}
.input-element-wrapper {
@extend .input-element;
@ -163,11 +175,17 @@
gap: $s-4;
.extend-btn {
@extend .button-tertiary;
height: $s-32;
height: 100%;
width: $s-28;
svg {
@extend .button-icon;
}
&.extended {
background-color: var(--button-radio-background-color-active);
svg {
stroke: var(--button-radio-foreground-color-active);
}
}
}
.interactions-info {
@ -184,7 +202,7 @@
height: $s-32;
width: $s-28;
svg {
@extend .button-icon;
@extend .button-icon-small;
}
}
}

9
frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
View file

@ -151,16 +151,14 @@
(if new-css-system
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css-case :element-set-content true
:hidden (or hidden?
blocked?))}
:hidden hidden?)}
[:div {:class (stl/css :select)}
[:& select
{:default-value selected-blend-mode
:options options
:on-change handle-change-blend-mode
:is-open? option-highlighted?
:class (stl/css-case :hidden-select (or hidden?
blocked?))
:class (stl/css-case :hidden-select hidden?)
:on-pointer-enter-option handle-blend-mode-enter
:on-pointer-leave-option handle-blend-mode-leave}]]
[:div {:class (stl/css :input)
@ -192,7 +190,8 @@
:else
[:button {:on-click handle-set-unblocked
:class (stl/css :lock-btn)} i/lock-refactor])]]]
:class (stl/css-case :lock-btn true
:locked blocked?)} i/lock-refactor])]]]
[:div.element-set
[:div.element-set-title

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

@ -37,15 +37,12 @@
&.hidden {
.hidden-select {
background-color: transparent;
@include hiddenElement;
border: $s-1 solid var(--input-border-color-disabled);
color: var(--input-foreground-color-disabled);
}
.input {
background-color: transparent;
@include hiddenElement;
border: $s-1 solid var(--input-border-color-disabled);
color: var(--input-foreground-color-disabled);
.icon {
stroke: var(--input-foreground-color-disabled);
}
@ -53,15 +50,6 @@
color: var(--input-foreground-color-disabled);
}
}
.actions {
.hidden-btn,
.lock-btn {
background-color: transparent;
svg {
stroke: var(--input-foreground-color-disabled);
}
}
}
}
}
}

12
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View file

@ -368,18 +368,20 @@
:class (stl/css-case :dropdown-element true
:disabled true)}
[:span {:class (stl/css :preset-name)} (:name size-preset)]]
(let [preset-match (and (= (:width size-preset) (d/parse-integer (:width values) 0))
(= (:height size-preset) (d/parse-integer (:height values) 0)))]
[:li {:key (:name size-preset)
:class (stl/css :dropdown-element)
:class (stl/css-case :dropdown-element true
:match preset-match)
:data-width (:width size-preset)
:data-height (:height size-preset)
:on-click on-preset-selected}
[:div {:class (stl/css :name-wrapper)}
[:span {:class (stl/css :preset-name)} (:name size-preset)]
[:span {:class (stl/css :preset-size)} (:width size-preset) " x " (:height size-preset)]]
(when (and (= (:width size-preset) (d/parse-integer (:width values) 0))
(= (:height size-preset) (d/parse-integer (:height values) 0)))
[:span {:class (stl/css :check-icon)} i/tick-refactor])]))]]]
(when preset-match
[:span {:class (stl/css :check-icon)} i/tick-refactor])])))]]]
[:& radio-buttons {:selected (or (d/name orientation) "")
:on-change on-orientation-change-refactor

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

@ -32,40 +32,26 @@
@include flexCenter;
cursor: pointer;
svg {
@extend .button-icon;
@extend .button-icon-small;
stroke: var(--icon-foreground);
transform: rotate(90deg);
}
}
.custom-select-dropdown {
@extend .dropdown-wrapper;
margin-top: $s-2;
width: $s-252;
.dropdown-element {
@extend .dropdown-element-base;
&.disabled {
pointer-events: none;
cursor: default;
.preset-name {
color: var(--menu-foreground-color);
}
&:hover {
background-color: var(--menu-background-color);
.preset-name {
color: var(--menu-foreground-color);
}
}
}
.name-wrapper {
display: flex;
gap: $s-8;
flex-grow: 1;
.preset-name {
color: var(--menu-foreground-color-hover);
color: var(--menu-foreground-color-rest);
}
.preset-size {
color: var(--menu-foreground-color);
color: var(--menu-foreground-color-rest);
}
}
@ -76,8 +62,29 @@
stroke: var(--icon-foreground);
}
}
&.disabled {
pointer-events: none;
cursor: default;
.preset-name {
color: var(--menu-foreground-color);
}
}
&.match {
.name-wrapper .preset-name {
color: var(--menu-foreground-color-hover);
}
.check-icon svg {
stroke: var(--menu-foreground-color-hover);
}
}
&:hover {
background-color: var(--menu-background-color-hover);
.name-wrapper .preset-name {
color: var(--menu-foreground-color-hover);
}
.check-icon svg {
stroke: var(--menu-foreground-color-hover);
}
@ -113,6 +120,9 @@
@extend .button-icon;
stroke: var(--icon-foreground);
}
&.selected {
@extend .button-icon-selected;
}
}
}
.position {

11
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

@ -71,6 +71,7 @@
(-> (l/key shadow-id)
(l/derived open-state-ref)))
open-shadow (mf/deref open-status-ref)
hidden? (:hidden value)
on-remove-shadow
(mf/use-fn
@ -163,8 +164,10 @@
(if new-css-system
[:*
[:div {:class (stl/css :basic-options)}
[:div {:class (stl/css :shadow-info)}
[:button {:class (stl/css :more-options)
[:div {:class (stl/css-case :shadow-info true
:hidden hidden?)}
[:button {:class (stl/css-case :more-options true
:selected open-shadow)
:on-click on-toggle-open-shadow}
i/menu-refactor]
[:div {:class (stl/css :type-select)}
@ -176,7 +179,7 @@
[:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn)
:on-click toggle-visibility}
(if (:hidden value)
(if hidden?
i/hide-refactor
i/shown-refactor)]
[:button {:class (stl/css :action-btn)
@ -268,7 +271,7 @@
[:div.shadow-option-main-actions
[:div.element-set-actions-button {:on-click toggle-visibility}
(if (:hidden value) i/eye-closed i/eye)]
(if hidden? i/eye-closed i/eye)]
[:div.element-set-actions-button
{:data-index index
:on-click on-remove-shadow}

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

@ -57,10 +57,9 @@
@extend .button-icon;
}
&.selected {
background-color: var(--button-tertiary-background-color-hover);
color: var(--button-tertiary-foreground-color-active);
background-color: var(--button-radio-background-color-active);
svg {
stroke: var(--button-tertiary-foreground-color-active);
stroke: var(--button-radio-foreground-color-active);
}
}
}
@ -73,6 +72,20 @@
border-radius: 0 $br-8 $br-8 0;
}
}
&.hidden {
.more-options {
@include hiddenElement;
border: $s-1 solid var(--input-border-color-disabled);
}
.type-select {
@include hiddenElement;
.shadow-type-select {
@include hiddenElement;
border: $s-1 solid var(--input-border-color-disabled);
}
}
}
}
.actions {
@include flexRow;

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

@ -48,6 +48,8 @@
open? (deref state*)
toggle-content (mf/use-fn #(swap! state* not))
open-content (mf/use-fn #(reset! state* true))
strokes (:strokes values)
has-strokes? (or (= :multiple strokes) (some? (seq strokes)))
@ -70,6 +72,7 @@
(fn [index]
(fn []
(st/emit! (dc/remove-stroke ids index)))))
on-remove-refactor
(mf/use-fn
(mf/deps ids)
@ -193,7 +196,8 @@
(st/emit! (dc/add-stroke ids {:stroke-style :solid
:stroke-color clr/black
:stroke-opacity 1
:stroke-width 1})))
:stroke-width 1}))
(when (not (some? (seq strokes))) (open-content)))
disable-drag (mf/use-state false)

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

@ -279,17 +279,18 @@
border: $s-1 solid var(--input-background-color);
position: relative;
.font-size-select {
@include removeInputStyle;
@include titleTipography;
height: $s-32;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
.numeric-input {
@extend .input-base;
}
span {
@include flexCenter;
svg {
@extend .button-icon-small;
}
}
}
.icon {
@include flexCenter;
height: $s-28;
@ -300,14 +301,6 @@
transform: rotate(90deg);
}
}
.font-size-select {
@include removeInputStyle;
@include titleTipography;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
}
.font-variant-options {
padding: 0;

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

@ -193,7 +193,8 @@
:ref dref}
[:span {:class (stl/css :color-info)}
[:span {:class (stl/css-case :color-name-wrapper true
:no-opacity (not opacity?)
:no-opacity (or disable-opacity
(not opacity?))
:library-name-wrapper library-color?
:editing editing-text?
:gradient-name-wrapper gradient-color?)}

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

@ -28,9 +28,6 @@
input {
padding: 0;
}
&.no-opacity {
border-radius: $br-8;
}
.color-bullet-wrapper {
height: $s-28;
padding: 0 $s-2 0 $s-8;
@ -74,8 +71,15 @@
color: var(--input-foreground-color);
border-radius: $br-0;
}
&.no-opacity {
border-radius: $br-8;
.color-input-wrapper {
border-radius: $br-8;
}
}
&:hover {
background-color: var(--input-background-color-hover);
border: $s-1 solid var(--input-background-color-hover);
.color-bullet-wrapper,
.color-name,
.detach-btn,

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

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

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

@ -13,7 +13,6 @@
flex: 1;
width: 100%;
height: var(--height, 200px);
padding-left: $s-8;
.title-bar {
.title {
margin-left: $s-2;
@ -166,6 +165,7 @@
.element-list-body {
color: var(--layer-row-foreground-color-selected);
background-color: var(--layer-row-background-color-selected);
box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-selected);
.page-actions button {
svg {
stroke: var(--layer-row-foreground-color-selected);
@ -181,6 +181,7 @@
.element-list-body {
color: var(--layer-row-foreground-color-hover);
background-color: var(--layer-row-background-color-hover);
box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-hover);
.page-actions button {
opacity: $op-10;
svg {

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

@ -28,7 +28,7 @@
(obj/set! context "font" (str (/ size 2) "px Arial"))
(obj/set! context "textAlign" "center")
(obj/set! context "fillStyle" "#ffffff")
(obj/set! context "fillStyle" "#2e3434")
(.fillText context letters (/ size 2) (/ size 1.5))
(.toDataURL canvas)))