mirror of
https://github.com/penpot/penpot.git
synced 2025-03-11 23:31:21 -05:00
♻️ Remove new-css-system from workspace toolbar
This commit is contained in:
Eva
Alonso Torres
parent
93a7a8e856
commit
7d2da6ef80
7 changed files with 292 additions and 522 deletions
|
|
@ -68,7 +68,6 @@
|
|||
@import "main/partials/dashboard-fonts";
|
||||
@import "main/partials/debug-icons-preview";
|
||||
@import "main/partials/editable-label";
|
||||
@import "main/partials/left-toolbar";
|
||||
@import "main/partials/loader";
|
||||
@import "main/partials/project-bar";
|
||||
@import "main/partials/sidebar";
|
||||
|
|
|
|||
|
|
@ -1,71 +0,0 @@
|
|||
// 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
|
||||
|
||||
.left-toolbar {
|
||||
background-color: $color-gray-50;
|
||||
align-items: center;
|
||||
border-right: 1px solid $color-gray-60;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: visible;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left-toolbar-options {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
color: $color-gray-20;
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: inherit;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
color: $color-gray-50;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: $color-gray-60;
|
||||
color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.separator {
|
||||
border-top: 1px solid $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.panels {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -23,13 +23,13 @@
|
|||
[app.main.ui.workspace.colorpicker]
|
||||
[app.main.ui.workspace.context-menu :refer [context-menu]]
|
||||
[app.main.ui.workspace.coordinates :as coordinates]
|
||||
[app.main.ui.workspace.left-toolbar :refer [left-toolbar]]
|
||||
[app.main.ui.workspace.libraries]
|
||||
[app.main.ui.workspace.nudge]
|
||||
[app.main.ui.workspace.palette :refer [palette]]
|
||||
[app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
|
||||
[app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]]
|
||||
[app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
|
||||
[app.main.ui.workspace.top-toolbar :refer [top-toolbar]]
|
||||
[app.main.ui.workspace.viewport :refer [viewport]]
|
||||
[app.util.debug :as dbg]
|
||||
[app.util.dom :as dom]
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
|
||||
(when-not hide-ui?
|
||||
[:*
|
||||
[:& left-toolbar {:layout layout}]
|
||||
[:& top-toolbar {:layout layout}]
|
||||
(if (:collapse-left-sidebar layout)
|
||||
[:& collapsed-button]
|
||||
[:& left-sidebar {:layout layout
|
||||
|
|
|
|||
|
|
@ -1,350 +0,0 @@
|
|||
;; 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
|
||||
|
||||
(ns app.main.ui.workspace.left-toolbar
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.media :as cm]
|
||||
[app.main.data.events :as ev]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.common :as dwc]
|
||||
[app.main.data.workspace.media :as dwm]
|
||||
[app.main.data.workspace.shortcuts :as sc]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.file-uploader :refer [file-uploader]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.hooks.resize :as r]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.timers :as ts]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc image-upload
|
||||
{::mf/wrap [mf/memo]}
|
||||
[]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
ref (mf/use-ref nil)
|
||||
file-id (mf/use-ctx ctx/current-file-id)
|
||||
|
||||
on-click
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(st/emit! :interrupt dw/clear-edition-mode)
|
||||
(dom/click (mf/ref-val ref))))
|
||||
|
||||
on-selected
|
||||
(mf/use-fn
|
||||
(mf/deps file-id)
|
||||
(fn [blobs]
|
||||
;; We don't want to add a ref because that redraws the component
|
||||
;; for everychange. Better direct access on the callback.
|
||||
(let [vbox (deref refs/vbox)
|
||||
x (+ (:x vbox) (/ (:width vbox) 2))
|
||||
y (+ (:y vbox) (/ (:height vbox) 2))
|
||||
params {:file-id file-id
|
||||
:blobs (seq blobs)
|
||||
:position (gpt/point x y)}]
|
||||
(st/emit! (dwm/upload-media-workspace params)))))]
|
||||
[:li
|
||||
[:button
|
||||
{: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}
|
||||
(if new-css-system
|
||||
i/img-refactor
|
||||
i/image)
|
||||
[:& file-uploader
|
||||
{:input-id "image-upload"
|
||||
:accept cm/str-image-types
|
||||
:multi true
|
||||
:ref ref
|
||||
:on-selected on-selected}]]]))
|
||||
|
||||
(mf/defc left-toolbar
|
||||
{::mf/wrap [mf/memo]
|
||||
::mf/wrap-props false}
|
||||
[{:keys [layout]}]
|
||||
(let [selected-drawtool (mf/deref refs/selected-drawing-tool)
|
||||
edition (mf/deref refs/selected-edition)
|
||||
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
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
|
||||
(mf/use-fn #(st/emit! :interrupt))
|
||||
|
||||
select-drawtool
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
(let [tool (-> (dom/get-current-target event)
|
||||
(dom/get-data "tool")
|
||||
(keyword))]
|
||||
(st/emit! :interrupt
|
||||
dw/clear-edition-mode)
|
||||
|
||||
;; Delay so anything that launched :interrupt can finish
|
||||
(ts/schedule 100 #(st/emit! (dw/select-for-drawing tool))))))
|
||||
|
||||
toggle-text-palette
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(r/set-resize-type! :bottom)
|
||||
(-> (dom/get-element-by-class "color-palette")
|
||||
(dom/add-class! "fade-out-down"))
|
||||
(ts/schedule 300 #(st/emit! (dw/remove-layout-flag :colorpalette)
|
||||
(-> (dw/toggle-layout-flag :textpalette)
|
||||
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))
|
||||
|
||||
toggle-color-palette
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(r/set-resize-type! :bottom)
|
||||
(-> (dom/get-element-by-class "color-palette")
|
||||
(dom/add-class! "fade-out-down"))
|
||||
(ts/schedule 300 #(st/emit! (dw/remove-layout-flag :textpalette)
|
||||
(-> (dw/toggle-layout-flag :colorpalette)
|
||||
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))
|
||||
|
||||
toggle-shortcuts
|
||||
(mf/use-fn
|
||||
(mf/deps layout)
|
||||
(fn []
|
||||
(let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)]
|
||||
(when is-sidebar-closed?
|
||||
(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
|
||||
(st/emit!
|
||||
(dw/remove-layout-flag :debug-panel)
|
||||
(-> (dw/toggle-layout-flag :shortcuts)
|
||||
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))
|
||||
|
||||
toggle-debug-panel
|
||||
(mf/use-fn
|
||||
(mf/deps layout)
|
||||
(fn []
|
||||
(let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)]
|
||||
(when is-sidebar-closed?
|
||||
(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
|
||||
(st/emit!
|
||||
(dw/remove-layout-flag :shortcuts)
|
||||
(-> (dw/toggle-layout-flag :debug-panel)
|
||||
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))
|
||||
|
||||
toggle-toolbar
|
||||
(mf/use-fn
|
||||
#(st/emit! (dwc/toggle-toolbar-visibility)))]
|
||||
|
||||
(if new-css-system
|
||||
(when-not ^boolean read-only?
|
||||
[: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 (stl/css-case :selected (and (nil? selected-drawtool)
|
||||
(not edition)))
|
||||
:on-click interrupt}
|
||||
i/move-refactor]]
|
||||
[:*
|
||||
[:li
|
||||
[:button
|
||||
{:title (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
|
||||
:aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
|
||||
:class (stl/css-case :selected (= selected-drawtool :frame))
|
||||
: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 (stl/css-case :selected (= selected-drawtool :rect))
|
||||
: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 (stl/css-case :selected (= selected-drawtool :circle))
|
||||
: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 (stl/css-case :selected (= selected-drawtool :text))
|
||||
: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 (stl/css-case :selected (= selected-drawtool :curve))
|
||||
: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 (stl/css-case :selected (= selected-drawtool :path))
|
||||
:on-click select-drawtool
|
||||
:data-tool "path"
|
||||
:data-test "path-btn"}
|
||||
i/path-refactor]]
|
||||
|
||||
(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]]]])
|
||||
|
||||
[:aside.left-toolbar
|
||||
[:ul.left-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/pointer-inner]]
|
||||
(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/artboard]]
|
||||
[: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/box]]
|
||||
[: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/circle]]
|
||||
[: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]]
|
||||
|
||||
[:& 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/pencil]]
|
||||
[: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/pen]]])
|
||||
|
||||
[: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/chat]]]
|
||||
|
||||
[:ul.left-toolbar-options.panels
|
||||
(when ^boolean show-palette-btn?
|
||||
[:*
|
||||
[:li
|
||||
[:button
|
||||
{:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
|
||||
:aria-label (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
|
||||
:class (when (contains? layout :textpalette) "selected")
|
||||
:on-click toggle-text-palette}
|
||||
"Ag"]]
|
||||
|
||||
[:li
|
||||
[:button
|
||||
{:title (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
|
||||
:aria-label (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
|
||||
:class (when (contains? layout :colorpalette) "selected")
|
||||
:on-click toggle-color-palette}
|
||||
i/palette]]])
|
||||
[: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])]]])))
|
||||
|
||||
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
// 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-2;
|
||||
background-color: var(--color-background-primary);
|
||||
transition:
|
||||
top 0.3s,
|
||||
height 0.3s,
|
||||
opacity 0.3s;
|
||||
|
||||
.main-toolbar-options {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
opacity: $op-10;
|
||||
transition: opacity 0.3s ease;
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
button {
|
||||
@extend .button-tertiary;
|
||||
height: $s-36;
|
||||
width: $s-36;
|
||||
flex-shrink: 0;
|
||||
background-color: transparent;
|
||||
border-radius: $s-8;
|
||||
border: none;
|
||||
margin: 0 $s-2;
|
||||
|
||||
svg {
|
||||
@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;
|
||||
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: $s-20;
|
||||
height: $s-16;
|
||||
z-index: $z-index-1;
|
||||
border-radius: 0 0 $s-8 $s-8;
|
||||
.main-toolbar-options {
|
||||
opacity: $op-0;
|
||||
}
|
||||
}
|
||||
&.not-rulers-present {
|
||||
top: $s-8;
|
||||
&.hidden-toolbar {
|
||||
top: $s-0;
|
||||
}
|
||||
}
|
||||
|
||||
ul.main-toolbar-panels {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
191
frontend/src/app/main/ui/workspace/top_toolbar.cljs
Normal file
191
frontend/src/app/main/ui/workspace/top_toolbar.cljs
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
;; 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
|
||||
|
||||
(ns app.main.ui.workspace.top-toolbar
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.media :as cm]
|
||||
[app.main.data.events :as ev]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.common :as dwc]
|
||||
[app.main.data.workspace.media :as dwm]
|
||||
[app.main.data.workspace.shortcuts :as sc]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.file-uploader :refer [file-uploader]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.timers :as ts]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc image-upload
|
||||
{::mf/wrap [mf/memo]}
|
||||
[]
|
||||
(let [ref (mf/use-ref nil)
|
||||
file-id (mf/use-ctx ctx/current-file-id)
|
||||
|
||||
on-click
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(st/emit! :interrupt dw/clear-edition-mode)
|
||||
(dom/click (mf/ref-val ref))))
|
||||
|
||||
on-selected
|
||||
(mf/use-fn
|
||||
(mf/deps file-id)
|
||||
(fn [blobs]
|
||||
;; We don't want to add a ref because that redraws the component
|
||||
;; for everychange. Better direct access on the callback.
|
||||
(let [vbox (deref refs/vbox)
|
||||
x (+ (:x vbox) (/ (:width vbox) 2))
|
||||
y (+ (:y vbox) (/ (:height vbox) 2))
|
||||
params {:file-id file-id
|
||||
:blobs (seq blobs)
|
||||
:position (gpt/point x y)}]
|
||||
(st/emit! (dwm/upload-media-workspace params)))))]
|
||||
[:li
|
||||
[:button
|
||||
{: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/img-refactor
|
||||
[:& file-uploader
|
||||
{:input-id "image-upload"
|
||||
:accept cm/str-image-types
|
||||
:multi true
|
||||
:ref ref
|
||||
:on-selected on-selected}]]]))
|
||||
|
||||
(mf/defc top-toolbar
|
||||
{::mf/wrap [mf/memo]
|
||||
::mf/wrap-props false}
|
||||
[{:keys [layout]}]
|
||||
(let [selected-drawtool (mf/deref refs/selected-drawing-tool)
|
||||
edition (mf/deref refs/selected-edition)
|
||||
|
||||
read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
|
||||
rulers? (mf/deref refs/rules?)
|
||||
hide-toolbar? (mf/deref refs/toolbar-visibility)
|
||||
|
||||
interrupt
|
||||
(mf/use-fn #(st/emit! :interrupt))
|
||||
|
||||
select-drawtool
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
(let [tool (-> (dom/get-current-target event)
|
||||
(dom/get-data "tool")
|
||||
(keyword))]
|
||||
(st/emit! :interrupt
|
||||
dw/clear-edition-mode)
|
||||
|
||||
;; Delay so anything that launched :interrupt can finish
|
||||
(ts/schedule 100 #(st/emit! (dw/select-for-drawing tool))))))
|
||||
|
||||
toggle-debug-panel
|
||||
(mf/use-fn
|
||||
(mf/deps layout)
|
||||
(fn []
|
||||
(let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)]
|
||||
(when is-sidebar-closed?
|
||||
(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
|
||||
(st/emit!
|
||||
(dw/remove-layout-flag :shortcuts)
|
||||
(-> (dw/toggle-layout-flag :debug-panel)
|
||||
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))
|
||||
|
||||
toggle-toolbar
|
||||
(mf/use-fn
|
||||
#(st/emit! (dwc/toggle-toolbar-visibility)))]
|
||||
|
||||
(when-not ^boolean read-only?
|
||||
[: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 (stl/css-case :selected (and (nil? selected-drawtool)
|
||||
(not edition)))
|
||||
:on-click interrupt}
|
||||
i/move-refactor]]
|
||||
[:*
|
||||
[:li
|
||||
[:button
|
||||
{:title (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
|
||||
:aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
|
||||
:class (stl/css-case :selected (= selected-drawtool :frame))
|
||||
: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 (stl/css-case :selected (= selected-drawtool :rect))
|
||||
: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 (stl/css-case :selected (= selected-drawtool :circle))
|
||||
: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 (stl/css-case :selected (= selected-drawtool :text))
|
||||
: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 (stl/css-case :selected (= selected-drawtool :curve))
|
||||
: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 (stl/css-case :selected (= selected-drawtool :path))
|
||||
:on-click select-drawtool
|
||||
:data-tool "path"
|
||||
:data-test "path-btn"}
|
||||
i/path-refactor]]
|
||||
|
||||
(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)}]]])))
|
||||
|
||||
|
||||
99
frontend/src/app/main/ui/workspace/top_toolbar.scss
Normal file
99
frontend/src/app/main/ui/workspace/top_toolbar.scss
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
// 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-2;
|
||||
background-color: var(--color-background-primary);
|
||||
transition:
|
||||
top 0.3s,
|
||||
height 0.3s,
|
||||
opacity 0.3s;
|
||||
}
|
||||
|
||||
.main-toolbar-options {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
opacity: $op-10;
|
||||
transition: opacity 0.3s ease;
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
button {
|
||||
@extend .button-tertiary;
|
||||
height: $s-36;
|
||||
width: $s-36;
|
||||
flex-shrink: 0;
|
||||
background-color: transparent;
|
||||
border-radius: $s-8;
|
||||
border: none;
|
||||
margin: 0 $s-2;
|
||||
|
||||
svg {
|
||||
@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;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.main-toolbar.hidden-toolbar {
|
||||
top: $s-20;
|
||||
height: $s-16;
|
||||
z-index: $z-index-1;
|
||||
border-radius: 0 0 $s-8 $s-8;
|
||||
.main-toolbar-options {
|
||||
opacity: $op-0;
|
||||
}
|
||||
}
|
||||
|
||||
.main-toolbar.not-rulers-present {
|
||||
top: $s-8;
|
||||
&.hidden-toolbar {
|
||||
top: $s-0;
|
||||
}
|
||||
}
|
||||
|
||||
ul.main-toolbar-panels {
|
||||
display: none;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue