diff --git a/frontend/src/app/main/data/workspace/path/drawing.cljs b/frontend/src/app/main/data/workspace/path/drawing.cljs index 2e926e315..c5760e99f 100644 --- a/frontend/src/app/main/data/workspace/path/drawing.cljs +++ b/frontend/src/app/main/data/workspace/path/drawing.cljs @@ -276,7 +276,8 @@ (cond-> (some? drop-index) (with-meta {:index drop-index}))))))))) -(defn handle-new-shape-result [shape-id] +(defn handle-new-shape-result + [shape-id] (ptk/reify ::handle-new-shape-result ptk/UpdateEvent (update [_ state] @@ -293,7 +294,7 @@ ptk/WatchEvent (watch [_ state _] (let [content (get-in state [:workspace-drawing :object :content] [])] - (if (seq content) + (if (and (seq content) (> (count content) 1)) (rx/of (setup-frame) (dwdc/handle-finish-drawing) (dwe/start-edition-mode shape-id) diff --git a/frontend/src/app/main/data/workspace/path/edition.cljs b/frontend/src/app/main/data/workspace/path/edition.cljs index 8f83f67ee..7053aab62 100644 --- a/frontend/src/app/main/data/workspace/path/edition.cljs +++ b/frontend/src/app/main/data/workspace/path/edition.cljs @@ -319,9 +319,9 @@ (= (ptk/type %) ::start-path-edit)))) interrupt (->> stream (rx/filter #(= % :interrupt)) (rx/take 1))] (rx/concat - (rx/of (dwc/hide-toolbar)) - (rx/of (undo/start-path-undo)) - (rx/of (drawing/change-edit-mode mode)) + (rx/of (dwc/hide-toolbar) + (undo/start-path-undo) + (drawing/change-edit-mode mode)) (->> interrupt (rx/map #(stop-path-edit id)) (rx/take-until stopper))))))) diff --git a/frontend/src/app/main/data/workspace/path/shortcuts.cljs b/frontend/src/app/main/data/workspace/path/shortcuts.cljs index ffbf36578..74e095468 100644 --- a/frontend/src/app/main/data/workspace/path/shortcuts.cljs +++ b/frontend/src/app/main/data/workspace/path/shortcuts.cljs @@ -8,6 +8,7 @@ (:require [app.main.data.shortcuts :as ds] [app.main.data.workspace :as dw] + [app.main.data.workspace.common :as dwc] [app.main.data.workspace.path :as drp] [app.main.store :as st] [beicon.v2.core :as rx] @@ -26,10 +27,13 @@ ;; Not interrupt when we're editing a path (let [edition-id (or (get-in state [:workspace-drawing :object :id]) (get-in state [:workspace-local :edition])) + content (get-in state [:workspace-drawing :object :content]) path-edit-mode (get-in state [:workspace-local :edit-path edition-id :edit-mode])] (if-not (= :draw path-edit-mode) (rx/of :interrupt) - (rx/empty)))))) + (if (<= (count content) 1) + (rx/of (dwc/show-toolbar)) + (rx/empty))))))) (def shortcuts {:move-nodes {:tooltip "M" diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index 647248651..22137758a 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/frontend/src/app/main/ui/viewer.cljs @@ -376,7 +376,6 @@ wrapper (dom/get-element "inspect-svg-wrapper") section (dom/get-element "inspect-svg-container") target (.-target event)] - ;; TODO: Reemplazar el dom/class? por un data-attribute (when (or (dom/child? target wrapper) (dom/id? target "inspect-svg-container")) (let [norm-event ^js (nw/normalize-wheel event) mod? (kbd/mod? event) @@ -458,7 +457,9 @@ fullscreen-dom? (dom/fullscreen?)] (when (not= fullscreen? fullscreen-dom?) (if fullscreen? - (wapi/request-fullscreen wrapper) + (let [layout (dom/get-element "viewer-layout")] + (dom/set-data! layout "force-visible" false) + (wapi/request-fullscreen wrapper)) (wapi/exit-fullscreen)))))) (mf/use-effect @@ -543,16 +544,9 @@ :data-fullscreen fullscreen? :data-force-visible (:show-thumbnails local)} + [:div {:class (stl/css :viewer-content)} - [:& header/header {:project project - :index index - :file file - :page page - :frame frame - :permissions permissions - :zoom zoom - :section section - :interactions-mode interactions-mode}] + [:button {:on-click on-thumbnails-close :class (stl/css-case :thumbnails-close true @@ -609,7 +603,17 @@ :overlays overlays :zoom zoom :section section - :index index}]]))]]])) + :index index}]]))]] + + [:& header/header {:project project + :index index + :file file + :page page + :frame frame + :permissions permissions + :zoom zoom + :section section + :interactions-mode interactions-mode}]])) ;; --- Component: Viewer diff --git a/frontend/src/app/main/ui/viewer.scss b/frontend/src/app/main/ui/viewer.scss index cc1ad4d38..3a4e36d3f 100644 --- a/frontend/src/app/main/ui/viewer.scss +++ b/frontend/src/app/main/ui/viewer.scss @@ -86,6 +86,7 @@ top: calc(50vh - $s-32); z-index: $z-index-2; background-color: var(--viewer-controls-background-color); + transition: transform 400ms ease 300ms; svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -199,3 +200,19 @@ [data-force-visible="true"] .viewer-bottom { transform: translateY(0); } + +[data-fullscreen="true"] .viewer-go-next { + transform: translateX($s-40); +} + +[data-fullscreen="true"] .viewer-go-prev { + transform: translateX(-$s-40); +} + +[data-force-visible="true"] .viewer-go-next { + transform: translateX(0); +} + +[data-force-visible="true"] .viewer-go-prev { + transform: translateX(0); +} diff --git a/frontend/src/app/main/ui/viewer/header.scss b/frontend/src/app/main/ui/viewer/header.scss index 6eebe53ba..da758dffe 100644 --- a/frontend/src/app/main/ui/viewer/header.scss +++ b/frontend/src/app/main/ui/viewer/header.scss @@ -303,10 +303,20 @@ } /** FULLSCREEN */ +[data-fullscreen="true"] .viewer-header::after { + content: " "; + position: absolute; + width: 100%; + height: $s-48; + left: 0; + top: $s-48; +} + [data-fullscreen="true"] .viewer-header { transform: translateY(-$s-48); } -[data-force-visible="true"] .viewer-header { +[data-force-visible="true"] .viewer-header, +[data-fullscreen="true"] .viewer-header:hover { transform: translateY(0); } diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index c12f88a18..8363e438f 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -29,7 +29,6 @@ [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 +109,6 @@ (when-not hide-ui? [:* - [:& top-toolbar {:layout layout}] (if (:collapse-left-sidebar layout) [:& collapsed-button] [:& left-sidebar {:layout layout diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 7fdc82f6c..23c5714e8 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -274,6 +274,7 @@ (hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox) [:div.viewport {:style #js {"--zoom" zoom}} + [:& top-bar/top-bar {:layout layout}] [:div.viewport-overlays ;; The behaviour inside a foreign object is a bit different that in plain HTML so we wrap ;; inside a foreign object "dummy" so this awkward behaviour is take into account @@ -302,9 +303,7 @@ :vbox vbox :options options :layout layout - :viewport-ref viewport-ref}]) - - [:& top-bar/top-bar]] + :viewport-ref viewport-ref}])] [:svg.render-shapes {:id "render" diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs index 04eeb79d1..d7b7776f7 100644 --- a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs @@ -13,6 +13,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.context :as ctx] + [app.main.ui.workspace.top-toolbar :refer [top-toolbar]] [app.main.ui.workspace.viewport.grid-layout-editor :refer [grid-edition-actions]] [app.main.ui.workspace.viewport.path-actions :refer [path-actions]] [app.util.i18n :as i18n :refer [tr]] @@ -36,7 +37,7 @@ (mf/defc top-bar {::mf/wrap [mf/memo]} - [] + [{:keys [layout]}] (let [edition (mf/deref refs/selected-edition) selected (mf/deref refs/selected-objects) drawing (mf/deref refs/workspace-drawing) @@ -50,6 +51,7 @@ (not= :curve (:tool drawing))) workspace-read-only? (mf/use-ctx ctx/workspace-read-only?) + hide-ui? (:hide-ui layout) path-edition? (or (and single? editing? (and (not (cfh/text-shape? shape)) @@ -58,13 +60,17 @@ grid-edition? (and single? editing? (ctl/grid-layout? shape))] - (cond - workspace-read-only? - [:& view-only-actions] + [:* + (when-not hide-ui? + [:& top-toolbar {:layout layout}]) - path-edition? - [:div.viewport-actions - [:& path-actions {:shape shape}]] + (cond + workspace-read-only? + [:& view-only-actions] - grid-edition? - [:& grid-edition-actions {:shape shape}]))) + path-edition? + [:div.viewport-actions + [:& path-actions {:shape shape}]] + + grid-edition? + [:& grid-edition-actions {:shape shape}])]))