Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 00:40:30 -05:00
Code Issues Activity

Merge pull request #3732 from penpot/alotor-improve-inspect-grid

Browse source 
✨ Add read-only pill to the workspace
This commit is contained in:
Aitor Moreno 2023-10-31 16:34:37 +01:00 committed by GitHub
commit 218e08c919
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 95 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/resources/styles/main/partials/inspect.scss
View file

@ -23,6 +23,11 @@
padding: 0;
cursor: pointer;
.code-block & {
visibility: visible;
opacity: 1;
}
svg {
width: 16px;
height: 16px;

6
frontend/resources/styles/main/partials/workspace.scss
View file

@ -366,7 +366,7 @@ $height-palette-max: 80px;
pointer-events: none;
.path-actions,
.grid-actions {
.viewport-actions-container {
pointer-events: initial;
display: flex;
flex-direction: row;
@ -377,7 +377,7 @@ $height-palette-max: 80px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.grid-actions {
.viewport-actions-container {
padding-left: 1rem;
gap: 12px;
color: var(--color-gray-60);
@ -389,7 +389,7 @@ $height-palette-max: 80px;
height: 24px;
}
.grid-edit-title {
.viewport-actions-title {
margin-right: 2rem;
}

5
frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs
View file

@ -37,7 +37,8 @@
(for [property properties]
(when-let [value (css/get-css-value objects shape property)]
[:div {:class (stl/css :layout-row)}
[:div {:class (stl/css :global/attr-label)} (d/name property)]
[:div {:title (d/name property)
:class (stl/css :global/attr-label)} (d/name property)]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects shape property)}
@ -47,7 +48,7 @@
(for [property properties]
(when-let [value (css/get-css-value objects shape property)]
[:div.attributes-unit-row
[:div.attributes-label (d/name property)]
[:div.attributes-label {:title (d/name property)} (d/name property)]
[:div.attributes-value value]
[:& copy-button {:data (css/get-css-property objects shape property)}]]))])))

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

@ -42,6 +42,7 @@
[app.main.ui.workspace.viewport.selection :as selection]
[app.main.ui.workspace.viewport.snap-distances :as snap-distances]
[app.main.ui.workspace.viewport.snap-points :as snap-points]
[app.main.ui.workspace.viewport.top-bar :as top-bar]
[app.main.ui.workspace.viewport.utils :as utils]
[app.main.ui.workspace.viewport.viewport-ref :refer [create-viewport-ref]]
[app.main.ui.workspace.viewport.widgets :as widgets]
@ -299,7 +300,7 @@
:layout layout
:viewport-ref viewport-ref}])
[:& widgets/viewport-actions]]
[:& top-bar/top-bar]]
[:svg.render-shapes
{:id "render"

2
frontend/src/app/main/ui/workspace/viewport/actions.cljs
View file

@ -228,7 +228,7 @@
(do (reset! hover selected-shape)
(st/emit! (dw/select-shape (:id selected-shape))))
(and (not selected-shape) (some? grid-layout-id))
(and (not selected-shape) (some? grid-layout-id) (not workspace-read-only?))
(st/emit! (dw/start-edition-mode grid-layout-id)))))))))))
(defn on-context-menu

73
frontend/src/app/main/ui/workspace/viewport/top_bar.cljs Normal file
View file

@ -0,0 +1,73 @@
; 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.viewport.top-bar
(:require
[app.common.pages.helpers :as cph]
[app.common.types.shape.layout :as ctl]
[app.main.data.workspace :as dw]
[app.main.data.workspace.grid-layout.editor :as dwge]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.workspace.viewport.path-actions :refer [path-actions]]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
(mf/defc top-bar
{::mf/wrap [mf/memo]}
[]
(let [edition (mf/deref refs/selected-edition)
selected (mf/deref refs/selected-objects)
drawing (mf/deref refs/workspace-drawing)
drawing-obj (:object drawing)
shape (or drawing-obj (-> selected first))
single? (= (count selected) 1)
editing? (= (:id shape) edition)
draw-path? (and (some? drawing-obj)
(cph/path-shape? drawing-obj)
(not= :curve (:tool drawing)))
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
path-edition? (or (and single? editing?
(and (not (cph/text-shape? shape))
(not (cph/frame-shape? shape))))
draw-path?)
grid-edition? (and single? editing? (ctl/grid-layout? shape))
handle-close-view-mode
(mf/use-callback
(fn []
(st/emit! :interrupt
(dw/set-options-mode :design)
(dw/set-workspace-read-only false))))]
(cond
workspace-read-only?
[:div.viewport-actions
[:div.viewport-actions-container
[:div.viewport-actions-title
[:& i18n/tr-html {:tag-name "span"
:label "workspace.top-bar.read-only"}]]
[:button.btn-primary {:on-click handle-close-view-mode} "Done"]
[:button.btn-icon-basic {:on-click handle-close-view-mode} i/close]]]
path-edition?
[:div.viewport-actions
[:& path-actions {:shape shape}]]
grid-edition?
[:div.viewport-actions
[:div.viewport-actions-container
[:div.viewport-actions-title
(tr "workspace.layout_grid.editor.title") " " [:span.grid-edit-board-name (:name shape)]]
[:button.btn-secondary {:on-click #(st/emit! (dwge/locate-board (:id shape)))} "Locate"]
[:button.btn-primary {:on-click #(st/emit! dw/clear-edition-mode)} "Done"]
[:button.btn-icon-basic {:on-click #(st/emit! dw/clear-edition-mode)} i/close]]])))

40
frontend/src/app/main/ui/workspace/viewport/widgets.cljs
View file

@ -9,14 +9,12 @@
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.point :as gpt]
[app.common.pages.helpers :as cph]
[app.common.types.component :as ctk]
[app.common.types.container :as ctn]
[app.common.types.shape-tree :as ctt]
[app.common.types.shape.layout :as ctl]
[app.common.uuid :as uuid]
[app.main.data.workspace :as dw]
[app.main.data.workspace.grid-layout.editor :as dwge]
[app.main.data.workspace.interactions :as dwi]
[app.main.refs :as refs]
[app.main.store :as st]
@ -24,11 +22,9 @@
[app.main.ui.context :as ctx]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.main.ui.workspace.viewport.path-actions :refer [path-actions]]
[app.main.ui.workspace.viewport.utils :as vwu]
[app.util.debug :as dbg]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.timers :as ts]
[rumext.v2 :as mf]))
@ -53,42 +49,6 @@
:fill (str "url(#pixel-grid)")
:style {:pointer-events "none"}}]])
(mf/defc viewport-actions
{::mf/wrap [mf/memo]}
[]
(let [edition (mf/deref refs/selected-edition)
selected (mf/deref refs/selected-objects)
drawing (mf/deref refs/workspace-drawing)
drawing-obj (:object drawing)
shape (or drawing-obj (-> selected first))
single? (= (count selected) 1)
editing? (= (:id shape) edition)
draw-path? (and (some? drawing-obj)
(cph/path-shape? drawing-obj)
(not= :curve (:tool drawing)))
path-edition? (or (and single? editing?
(and (not (cph/text-shape? shape))
(not (cph/frame-shape? shape))))
draw-path?)
grid-edition? (and single? editing? (ctl/grid-layout? shape))]
(cond
path-edition?
[:div.viewport-actions
[:& path-actions {:shape shape}]]
grid-edition?
[:div.viewport-actions
[:div.grid-actions
[:div.grid-edit-title
(tr "workspace.layout_grid.editor.title") " " [:span.grid-edit-board-name (:name shape)]]
[:button.btn-secondary {:on-click #(st/emit! (dwge/locate-board (:id shape)))} "Locate"]
[:button.btn-primary {:on-click #(st/emit! dw/clear-edition-mode)} "Done"]
[:button.btn-icon-basic {:on-click #(st/emit! dw/clear-edition-mode)} i/close]]])))
(mf/defc cursor-tooltip
[{:keys [zoom tooltip] :as props}]
(let [coords (some-> (hooks/use-rxsub ms/mouse-position)

4
frontend/translations/en.po
View file

@ -5007,3 +5007,7 @@ msgstr "Update"
msgid "workspace.viewport.click-to-close-path"
msgstr "Click to close the path"
#, markdown
msgid "workspace.top-bar.read-only"
msgstr "**Inspect mode** (View Only)"

4
frontend/translations/es.po
View file

@ -5112,3 +5112,7 @@ msgstr "Actualizar"
msgid "workspace.viewport.click-to-close-path"
msgstr "Pulsar para cerrar la ruta"
#, markdown
msgid "workspace.top-bar.read-only"
msgstr "**Modo inspección** (View only)"