mirror of
https://github.com/penpot/penpot.git
synced 2025-06-18 02:41:39 +02:00
💄 Toolbar redesign
This commit is contained in:
Eva
parent
b8dbd16b01
commit
481c67b1f8
16 changed files with 227 additions and 12 deletions
|
|
@ -288,6 +288,7 @@
|
|||
(def close-refactor (icon-xref :close-refactor))
|
||||
(def close-small-refactor (icon-xref :close-small-refactor))
|
||||
(def component-refactor (icon-xref :component-refactor))
|
||||
(def comments-refactor (icon-xref :comments-refactor))
|
||||
(def copy-refactor (icon-xref :copy-refactor))
|
||||
(def column-refactor (icon-xref :column-refactor))
|
||||
(def column-reverse-refactor (icon-xref :column-reverse-refactor))
|
||||
|
|
@ -296,6 +297,7 @@
|
|||
(def corner-radius-refactor (icon-xref :corner-radius-refactor))
|
||||
(def curve-refactor (icon-xref :curve-refactor))
|
||||
(def distribute-vertical-sapcing-refactor (icon-xref :distribute-vertical-spacing-refactor))
|
||||
(def distribute-horizontally-refactor (icon-xref :distribute-horizontally-refactor))
|
||||
(def delete-refactor (icon-xref :delete-refactor))
|
||||
(def delete-text-refactor (icon-xref :delete-text-refactor))
|
||||
(def desc-sort-refactor (icon-xref :desc-sort-refactor))
|
||||
|
|
@ -319,6 +321,7 @@
|
|||
(def grid-square-refactor (icon-xref :grid-square-refactor))
|
||||
(def grid-refactor (icon-xref :grid-refactor))
|
||||
(def group-refactor (icon-xref :group-refactor))
|
||||
(def graphics-refactor (icon-xref :graphics-refactor))
|
||||
(def gutter-horizontal-refactor (icon-xref :gutter-horizontal-refactor))
|
||||
(def gutter-vertical-refactor (icon-xref :gutter-vertical-refactor))
|
||||
(def hide-refactor (icon-xref :hide-refactor))
|
||||
|
|
@ -344,6 +347,7 @@
|
|||
(def menu-refactor (icon-xref :menu-refactor))
|
||||
(def move-refactor (icon-xref :move-refactor))
|
||||
(def open-link-refactor (icon-xref :open-link-refactor))
|
||||
(def open-refactor (icon-xref :open-refactor))
|
||||
(def padding-bottom-refactor (icon-xref :padding-bottom-refactor))
|
||||
(def padding-top-refactor (icon-xref :padding-top-refactor))
|
||||
(def padding-top-bottom-refactor (icon-xref :padding-top-bottom-refactor))
|
||||
|
|
@ -369,22 +373,22 @@
|
|||
(def text-align-right-refactor (icon-xref :text-align-right-refactor))
|
||||
(def text-auto-height-refactor (icon-xref :text-auto-height-refactor))
|
||||
(def text-auto-width-refactor (icon-xref :text-auto-width-refactor))
|
||||
|
||||
(def text-fixed-refactor (icon-xref :textfixed--refactor))
|
||||
(def text-justify-refactor (icon-xref :text-justify-refactor))
|
||||
(def text-letterspacing-refactor (icon-xref :text-letterspacing-refactor))
|
||||
(def text-lineheight-refactor (icon-xref :text-lineheight-refactor))
|
||||
(def text-lowercase-refactor (icon-xref :text-lowercase-refactor))
|
||||
(def text-LTR-refactor (icon-xref :text-LTR-refactor))
|
||||
(def text-middle-refactor (icon-xref :text-middle-refactor))
|
||||
(def text-mixed-refactor (icon-xref :text-mixed-refactor))
|
||||
(def text-palette-refactor (icon-xref :text-palette-refactor))
|
||||
(def text-paragraph-refactor (icon-xref :text-paragraph-refactor))
|
||||
(def text-refactor (icon-xref :text-refactor))
|
||||
(def text-RTL-refactor (icon-xref :text-RTL-refactor))
|
||||
(def text-bottom-refactor (icon-xref :text-bottom-refactor))
|
||||
(def text-ltr-refactor (icon-xref :text-ltr-refactor))
|
||||
(def text-rtl-refactor (icon-xref :text-rtl-refactor))
|
||||
(def text-middle-refactor (icon-xref :text-middle-refactor))
|
||||
(def text-mixed-refactor (icon-xref :text-mixed-refactor))
|
||||
(def text-stroked-refactor (icon-xref :text-stroked-refactor))
|
||||
(def text-top-refactor (icon-xref :text-top-refactor))
|
||||
(def text-underlined-refactor (icon-xref :text-underlined-refactor))
|
||||
(def text-underlined-refactor (icon-xref :text-undelined-refactor))
|
||||
(def text-uppercase-refactor (icon-xref :text-uppercase-refactor))
|
||||
(def tick-refactor (icon-xref :tick-refactor))
|
||||
(def unlock-refactor (icon-xref :unlock-refactor))
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.left-toolbar
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.media :as cm]
|
||||
|
|
@ -51,7 +52,7 @@
|
|||
{:title (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
|
||||
:aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
|
||||
:on-click on-click}
|
||||
i/image
|
||||
i/img-refactor
|
||||
[:& file-uploader
|
||||
{:input-id "image-upload"
|
||||
:accept cm/str-image-types
|
||||
|
|
@ -70,6 +71,8 @@
|
|||
read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
|
||||
show-palette-btn? (and (not ^boolean read-only?) (not ^boolean new-css-system))
|
||||
hide-toolbar* (mf/use-state false)
|
||||
hide-toolbar? (deref hide-toolbar*)
|
||||
|
||||
|
||||
interrupt
|
||||
|
|
@ -131,7 +134,111 @@
|
|||
(-> (dw/toggle-layout-flag :debug-panel)
|
||||
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))
|
||||
|
||||
]
|
||||
toggle-toolbar
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(swap! hide-toolbar* not)))]
|
||||
|
||||
(if new-css-system
|
||||
[:aside {:class (dom/classnames (css :main-toolbar) true
|
||||
(css :hidden-toolbar) hide-toolbar?)}
|
||||
[:ul {:class (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")
|
||||
:on-click interrupt}
|
||||
i/move-refactor]]
|
||||
(when-not ^boolean read-only?
|
||||
[:*
|
||||
[:li
|
||||
[: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")
|
||||
:on-click select-drawtool
|
||||
:data-tool "frame"
|
||||
:data-test "artboard-btn"}
|
||||
i/board-refactor]]
|
||||
[:li
|
||||
[: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")
|
||||
:on-click select-drawtool
|
||||
:data-tool "rect"
|
||||
:data-test "rect-btn"}
|
||||
i/rectangle-refactor]]
|
||||
[:li
|
||||
[: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")
|
||||
:on-click select-drawtool
|
||||
:data-tool "circle"
|
||||
:data-test "ellipse-btn"}
|
||||
i/elipse-refactor]]
|
||||
[:li
|
||||
[: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")
|
||||
:on-click select-drawtool
|
||||
:data-tool "text"}
|
||||
i/text-refactor]]
|
||||
|
||||
[:& image-upload]
|
||||
|
||||
[:li
|
||||
[: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")
|
||||
:on-click select-drawtool
|
||||
:data-tool "curve"
|
||||
:data-test "curve-btn"}
|
||||
i/curve-refactor]]
|
||||
[:li
|
||||
[: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")
|
||||
:on-click select-drawtool
|
||||
:data-tool "path"
|
||||
:data-test "path-btn"}
|
||||
i/pentool-refactor]]])
|
||||
|
||||
;; [:li
|
||||
;; [:button
|
||||
;; {:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
|
||||
;; :aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
|
||||
;; :class (when (= selected-drawtool :comments) "selected")
|
||||
;; :on-click select-drawtool
|
||||
;; :data-tool "comments"}
|
||||
;; i/comments-refactor]]
|
||||
]
|
||||
[:button {:class (dom/classnames (css :toolbar-handler) true)
|
||||
:on-click toggle-toolbar}
|
||||
[:div {:class (dom/classnames (css :toolbar-handler-btn) true)}]]
|
||||
|
||||
[:ul {:class (dom/classnames (css :main-toolbar-panels) true)}
|
||||
[: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])]]]
|
||||
|
||||
|
||||
[:aside.left-toolbar
|
||||
[:ul.left-toolbar-options
|
||||
|
|
@ -242,4 +349,6 @@
|
|||
{:title "Debugging tool"
|
||||
:class (when (contains? layout :debug-panel) "selected")
|
||||
:on-click toggle-debug-panel}
|
||||
i/bug])]]]))
|
||||
i/bug])]]])))
|
||||
|
||||
|
||||
|
|
|
|||
1
frontend/src/app/main/ui/workspace/left_toolbar.css.json
Normal file
1
frontend/src/app/main/ui/workspace/left_toolbar.css.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"workspace_left_toolbar_button-primary_cOfI2","main-toolbar":"workspace_left_toolbar_main-toolbar_QN5ne","main-toolbar-options":"workspace_left_toolbar_main-toolbar-options_xqFsj","button-secondary":"workspace_left_toolbar_button-secondary_yztFQ","button-tertiary":"workspace_left_toolbar_button-tertiary_ATxjs","button-tag":"workspace_left_toolbar_button-tag_uOY3P","button-icon":"workspace_left_toolbar_button-icon_QXZDp","button-icon-small":"workspace_left_toolbar_button-icon-small_p617J","asset-element":"workspace_left_toolbar_asset-element_vwVhJ","new-scrollbar":"workspace_left_toolbar_new-scrollbar_CDU0n","toolbar-handler":"workspace_left_toolbar_toolbar-handler_VfijE","toolbar-handler-btn":"workspace_left_toolbar_toolbar-handler-btn_vV1IT","hidden-toolbar":"workspace_left_toolbar_hidden-toolbar_w7tu-","main-toolbar-panels":"workspace_left_toolbar_main-toolbar-panels_zT3qk"}
|
||||
78
frontend/src/app/main/ui/workspace/left_toolbar.scss
Normal file
78
frontend/src/app/main/ui/workspace/left_toolbar.scss
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
// 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";
|
||||
|
||||
.main-toolbar {
|
||||
position: absolute;
|
||||
top: $s-28;
|
||||
left: calc(50% - $s-160);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
height: $s-56;
|
||||
padding: $s-8 $s-16;
|
||||
border-radius: $s-8;
|
||||
z-index: $z-index-20;
|
||||
background-color: var(--color-background-primary);
|
||||
transition: top 1s ease;
|
||||
|
||||
.main-toolbar-options {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
opacity: $op-10;
|
||||
transition: opacity 1s ease;
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
button {
|
||||
@extend .button-primary;
|
||||
height: $s-36;
|
||||
width: $s-36;
|
||||
flex-shrink: 0;
|
||||
background-color: transparent;
|
||||
border-radius: $s-8;
|
||||
border: none;
|
||||
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--color-foreground-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.toolbar-handler {
|
||||
@include flexCenter;
|
||||
@include buttonStyle;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: $s-12;
|
||||
width: 100%;
|
||||
|
||||
.toolbar-handler-btn {
|
||||
height: $s-4;
|
||||
width: 100%;
|
||||
max-width: $s-64;
|
||||
padding: 0;
|
||||
border-radius: $s-4;
|
||||
background-color: var(--palette-handler-background-color);
|
||||
}
|
||||
}
|
||||
&.hidden-toolbar {
|
||||
top: 0;
|
||||
z-index: $z-index-1;
|
||||
.main-toolbar-options {
|
||||
opacity: $op-0;
|
||||
}
|
||||
}
|
||||
|
||||
ul.main-toolbar-panels {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -19,6 +19,8 @@
|
|||
}
|
||||
|
||||
.special-title {
|
||||
@include textEllipsis;
|
||||
width: calc(var(--width, 256px) - $s-80);
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
.special-subtitle {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
@include flexCenter;
|
||||
position: absolute;
|
||||
top: $s-48;
|
||||
left: $s-48;
|
||||
left: 0;
|
||||
padding: $s-4;
|
||||
border-radius: $br-8;
|
||||
background: var(--color-background-primary);
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
border-radius: $br-5;
|
||||
svg {
|
||||
@include flexCenter;
|
||||
height: $s-12;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
color: transparent;
|
||||
fill: none;
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@
|
|||
transition: none;
|
||||
color: var(--layer-row-foreground-color);
|
||||
.page-name {
|
||||
@include textEllipsis;
|
||||
flex-grow: 1;
|
||||
padding-left: $s-2;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue