mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 23:49:45 -05:00
💄 Toolbar redesign
This commit is contained in:
Eva
parent
b8dbd16b01
commit
481c67b1f8
16 changed files with 227 additions and 12 deletions
3
frontend/resources/images/icons/comments-refactor.svg
Normal file
3
frontend/resources/images/icons/comments-refactor.svg
Normal 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="M13.611 7.666a5.585 5.585 0 01-.6 2.534 5.67 5.67 0 01-5.066 3.134 5.586 5.586 0 01-2.534-.6L1.611 14l1.267-3.8a5.585 5.585 0 01-.6-2.534A5.67 5.67 0 017.945 2h.333a5.655 5.655 0 015.333 5.334v.332z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 330 B |
|
|
@ -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="M2.667 1.333v13.334zm10.666 0v13.334zm-5 2c1.104 0 2 .897 2 2v5.334a2 2 0 01-2 2h-.666a2 2 0 01-2-2V5.333c0-1.103.896-2 2-2h.666z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 257 B |
3
frontend/resources/images/icons/graphics-refactor.svg
Normal file
3
frontend/resources/images/icons/graphics-refactor.svg
Normal 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 1l6.404 7.071L8 15.142l-6.404-7.07L8 1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 174 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M4 12l8-8zm8-8H4zm0 0v8z"/>
|
||||
<path d="M4 12l8-8zm8-8H4zm0 0v8z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 156 B After Width: | Height: | Size: 155 B |
1
frontend/resources/images/icons/open-refactor.svg
Normal file
1
frontend/resources/images/icons/open-refactor.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="12" xmlns="http://www.w3.org/2000/svg" height="12" id="screenshot-c8a53282-38ff-8005-8002-95490755d8cd" viewBox="0 0 12 12" style="-webkit-print-color-adjust: exact;" fill="none" version="1.1"><g id="shape-c8a53282-38ff-8005-8002-95490755d8cd"><defs><clipPath class="frame-clip-def frame-clip" id="frame-clip-c8a53282-38ff-8005-8002-95490755d8cd-rumext-id-1"><rect rx="0" ry="0" x="0" y="0" width="12" height="12" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath></defs><g clip-path="url(#frame-clip-c8a53282-38ff-8005-8002-95490755d8cd-rumext-id-1)"><clipPath class="frame-clip-def frame-clip" id="frame-clip-c8a53282-38ff-8005-8002-95490755d8cd-rumext-id-1"><rect rx="0" ry="0" x="0" y="0" width="12" height="12" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath><g class="fills" id="fills-c8a53282-38ff-8005-8002-95490755d8cd"><rect rx="0" ry="0" x="0" y="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="12" height="12" class="frame-background"/></g><g class="frame-children"><g id="shape-c8a53282-38ff-8005-8002-95490755d8d0"><g class="fills" id="fills-c8a53282-38ff-8005-8002-95490755d8d0"><path rx="0" ry="0" d="M2.000,10.000L10.000,2.000M2.000,2.000L10.000,2.000L10.000,10.000" style="fill: rgb(0, 0, 0);"/></g><g id="strokes-c8a53282-38ff-8005-8002-95490755d8d0" class="strokes"><g class="stroke-shape"><path rx="0" ry="0" d="M2.000,10.000L10.000,2.000M2.000,2.000L10.000,2.000L10.000,10.000" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1;"/></g></g></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -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="M11.333 12H2m12-8H2m6.667 4H2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 161 B |
3
frontend/resources/images/icons/text-ltr-refactor.svg
Normal file
3
frontend/resources/images/icons/text-ltr-refactor.svg
Normal 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="M14.72 2.333H9.28c-1.788 0-3.333 1.493-3.333 3.334S7.492 9 9.28 9h2m0-6.667v11.334m2-11.334v11.334m-12-7.334l2 2-2 2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 248 B |
3
frontend/resources/images/icons/text-rtl-refactor.svg
Normal file
3
frontend/resources/images/icons/text-rtl-refactor.svg
Normal 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="M14.72 2.333H9.28c-1.788 0-3.333 1.493-3.333 3.334S7.492 9 9.28 9h2m0-6.667v11.334m2-11.334v11.334m-10-7.334l-2 2 2 2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 249 B |
|
|
@ -37,6 +37,7 @@ $s-104: calc(var(--s-4) * 25);
|
|||
$s-120: calc(var(--s-4) * 30);
|
||||
$s-136: calc(var(--s-4) * 34);
|
||||
$s-152: calc(var(--s-4) * 38);
|
||||
$s-160: calc(var(--s-4) * 40);
|
||||
$s-192: calc(var(--s-4) * 48);
|
||||
$s-196: calc(var(--s-4) * 49);
|
||||
$s-200: calc(var(--s-4) * 50);
|
||||
|
|
|
|||
|
|
@ -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
Reference in a new issue