diff --git a/frontend/resources/styles/main/partials/inspect.scss b/frontend/resources/styles/main/partials/inspect.scss index 051835e3b..b2f8a9648 100644 --- a/frontend/resources/styles/main/partials/inspect.scss +++ b/frontend/resources/styles/main/partials/inspect.scss @@ -23,6 +23,11 @@ padding: 0; cursor: pointer; + .code-block & { + visibility: visible; + opacity: 1; + } + svg { width: 16px; height: 16px; diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index d18efce90..2dd4c8d4d 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -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; } diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs index 068d4aca0..c85cd0fa4 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs @@ -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)}]]))]))) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 5817a196d..5814a2b0e 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -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" diff --git a/frontend/src/app/main/ui/workspace/viewport/actions.cljs b/frontend/src/app/main/ui/workspace/viewport/actions.cljs index 1bc79a4dc..f77c73b34 100644 --- a/frontend/src/app/main/ui/workspace/viewport/actions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/actions.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs new file mode 100644 index 000000000..1413693a9 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs @@ -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]]]))) diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index 065984894..58fde157b 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs @@ -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) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 2a6673501..468fb6633 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -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)" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index bbbeef995..59eb67272 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -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)"