;; 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.viewer.inspect.right-sidebar (:require-macros [app.main.style :as stl]) (:require [app.common.data.macros :as dm] [app.common.types.component :as ctk] [app.main.data.event :as ev] [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.shape-icon :as sir] [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]] [app.main.ui.icons :as i] [app.main.ui.viewer.inspect.attributes :refer [attributes]] [app.main.ui.viewer.inspect.code :refer [code]] [app.main.ui.viewer.inspect.selection-feedback :refer [resolve-shapes]] [app.util.dom :as dom] [app.util.i18n :refer [tr]] [potok.v2.core :as ptk] [rumext.v2 :as mf])) (defn- get-libraries "Retrieve all libraries, including the local file, on workspace or viewer" [from] (if (= from :workspace) (let [workspace-data (deref refs/workspace-data) {:keys [id] :as local} workspace-data libraries (deref refs/workspace-libraries)] (-> libraries (assoc id {:id id :data local}))) (let [viewer-data (deref refs/viewer-data) local (get-in viewer-data [:file :data]) id (deref refs/current-file-id) libraries (:libraries viewer-data)] (-> libraries (assoc id {:id id :data local}))))) (mf/defc right-sidebar [{:keys [frame page objects file selected shapes page-id file-id share-id from on-change-section on-expand] :or {from :viewer}}] (let [section (mf/use-state :info #_:code) objects (or objects (:objects page)) shapes (or shapes (resolve-shapes objects selected)) first-shape (first shapes) page-id (or page-id (:id page)) file-id (or file-id (:id file)) libraries (get-libraries from) file (mf/deref refs/viewer-file) components-v2 (dm/get-in file [:data :options :components-v2]) main-instance? (if components-v2 (ctk/main-instance? first-shape) true) handle-change-tab (mf/use-fn (mf/deps from on-change-section) (fn [new-section] (reset! section (keyword new-section)) (when on-change-section (on-change-section (keyword new-section)) (st/emit! (ptk/event ::ev/event {::ev/name "change-inspect-tab" :tab new-section}))))) handle-expand (mf/use-fn (mf/deps on-expand) (fn [] (when on-expand (on-expand)))) navigate-to-help (mf/use-fn (fn [] (dom/open-new-window "https://help.penpot.app/user-guide/inspect/"))) info-content (mf/html [:& attributes {:page-id page-id :objects objects :file-id file-id :frame frame :shapes shapes :from from :libraries libraries :share-id share-id}]) code-content (mf/html [:& code {:frame frame :shapes shapes :on-expand handle-expand :from from}]) tabs #js [#js {:label (tr "inspect.tabs.info") :id "info" :content info-content} #js {:label (tr "inspect.tabs.code") :data-testid "code" :id "code" :content code-content}]] (mf/use-effect (mf/deps shapes handle-change-tab) (fn [] (when-not (seq shapes) (handle-change-tab :info)))) [:aside {:class (stl/css-case :settings-bar-right true :viewer-code (= from :viewer))} (if (seq shapes) [:div {:class (stl/css :tool-windows)} [:div {:class (stl/css :shape-row)} (if (> (count shapes) 1) [:* [:span {:class (stl/css :layers-icon)} i/layers] [:span {:class (stl/css :layer-title)} (tr "inspect.tabs.code.selected.multiple" (count shapes))]] [:* [:span {:class (stl/css :shape-icon)} [:& sir/element-icon {:shape first-shape :main-instance? main-instance?}]] ;; Execution time translation strings: ;; (tr "inspect.tabs.code.selected.circle") ;; (tr "inspect.tabs.code.selected.component") ;; (tr "inspect.tabs.code.selected.curve") ;; (tr "inspect.tabs.code.selected.frame") ;; (tr "inspect.tabs.code.selected.group") ;; (tr "inspect.tabs.code.selected.image") ;; (tr "inspect.tabs.code.selected.mask") ;; (tr "inspect.tabs.code.selected.path") ;; (tr "inspect.tabs.code.selected.rect") ;; (tr "inspect.tabs.code.selected.svg-raw") ;; (tr "inspect.tabs.code.selected.text") [:span {:class (stl/css :layer-title)} (:name first-shape)]])] [:div {:class (stl/css :inspect-content)} [:> tab-switcher* {:tabs tabs :default-selected "info" :on-change-tab handle-change-tab :class (stl/css :viewer-tab-switcher)}]]] [:div {:class (stl/css :empty)} [:div {:class (stl/css :code-info)} [:span {:class (stl/css :placeholder-icon)} i/code] [:span {:class (stl/css :placeholder-label)} (tr "inspect.empty.select")]] [:div {:class (stl/css :help-info)} [:span {:class (stl/css :placeholder-icon)} i/help] [:span {:class (stl/css :placeholder-label)} (tr "inspect.empty.help")]] [:button {:class (stl/css :more-info-btn) :on-click navigate-to-help} (tr "inspect.empty.more-info")]])]))