🐛 Fix color format does not switch in the view mode (#7923)

* 🐛 Fix color format does not switch in the inspect mode of the view mode

* ♻️ Update components
This commit is contained in:
Luis de Dios
2025-12-09 14:38:15 +01:00
committed by GitHub
parent b0351be724
commit 6ce3249c6d
3 changed files with 30 additions and 31 deletions

View File

@@ -36,7 +36,7 @@
:text [:visibility :geometry :text :shadow :blur :stroke :layout-element] :text [:visibility :geometry :text :shadow :blur :stroke :layout-element]
:variant [:variant :geometry :fill :stroke :shadow :blur :layout :layout-element]}) :variant [:variant :geometry :fill :stroke :shadow :blur :layout :layout-element]})
(mf/defc attributes (mf/defc attributes*
[{:keys [page-id file-id shapes frame from libraries share-id objects color-space]}] [{:keys [page-id file-id shapes frame from libraries share-id objects color-space]}]
(let [shapes (hooks/use-equal-memo shapes) (let [shapes (hooks/use-equal-memo shapes)
first-shape (first shapes) first-shape (first shapes)

View File

@@ -96,7 +96,7 @@
embed-images? (replace-map images-data))] embed-images? (replace-map images-data))]
(str/format page-template style-code markup-code))) (str/format page-template style-code markup-code)))
(mf/defc code (mf/defc code*
[{:keys [shapes frame on-expand from]}] [{:keys [shapes frame on-expand from]}]
(let [style-type* (mf/use-state "css") (let [style-type* (mf/use-state "css")
markup-type* (mf/use-state "html") markup-type* (mf/use-state "html")

View File

@@ -16,8 +16,8 @@
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]] [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
[app.main.ui.icons :as deprecated-icon] [app.main.ui.icons :as deprecated-icon]
[app.main.ui.inspect.attributes :refer [attributes]] [app.main.ui.inspect.attributes :refer [attributes*]]
[app.main.ui.inspect.code :refer [code]] [app.main.ui.inspect.code :refer [code*]]
[app.main.ui.inspect.selection-feedback :refer [resolve-shapes]] [app.main.ui.inspect.selection-feedback :refer [resolve-shapes]]
[app.main.ui.inspect.styles :refer [styles-tab*]] [app.main.ui.inspect.styles :refer [styles-tab*]]
[app.util.dom :as dom] [app.util.dom :as dom]
@@ -122,8 +122,7 @@
(fn [] (fn []
(if (seq shapes) (if (seq shapes)
(st/emit! (ptk/event ::ev/event {::ev/name "inspect-mode-click-element"})) (st/emit! (ptk/event ::ev/event {::ev/name "inspect-mode-click-element"}))
(handle-change-tab (if (contains? cf/flags :inspect-styles) :styles :info))) (handle-change-tab (if (contains? cf/flags :inspect-styles) :styles :info)))))
(reset! color-space* "hex")))
[:aside {:class (stl/css-case :settings-bar-right true [:aside {:class (stl/css-case :settings-bar-right true
:viewer-code (= from :viewer))} :viewer-code (= from :viewer))}
@@ -189,41 +188,41 @@
:libraries libraries :libraries libraries
:file-id file-id}] :file-id file-id}]
:computed :computed
[:& attributes {:color-space color-space [:> attributes* {:color-space color-space
:page-id page-id :page-id page-id
:objects objects :objects objects
:file-id file-id :file-id file-id
:frame frame :frame frame
:shapes shapes :shapes shapes
:from from :from from
:libraries libraries :libraries libraries
:share-id share-id}] :share-id share-id}]
:code :code
[:& code {:frame frame [:> code* {:frame frame
:shapes shapes :shapes shapes
:on-expand handle-expand :on-expand handle-expand
:from from}])] :from from}])]
[:> tab-switcher* {:tabs tabs [:> tab-switcher* {:tabs tabs
:selected (name @section) :selected (name @section)
:on-change handle-change-tab :on-change handle-change-tab
:class (stl/css :viewer-tab-switcher)} :class (stl/css :viewer-tab-switcher)}
(case @section (case @section
:info :info
[:& attributes {:page-id page-id [:> attributes* {:page-id page-id
:objects objects :objects objects
:file-id file-id :file-id file-id
:frame frame :frame frame
:shapes shapes :shapes shapes
:from from :from from
:libraries libraries :libraries libraries
:share-id share-id}] :share-id share-id}]
:code :code
[:& code {:frame frame [:> code* {:frame frame
:shapes shapes :shapes shapes
:on-expand handle-expand :on-expand handle-expand
:from from}])])]] :from from}])])]]
[:div {:class (stl/css :empty)} [:div {:class (stl/css :empty)}
[:div {:class (stl/css :code-info)} [:div {:class (stl/css :code-info)}
[:span {:class (stl/css :placeholder-icon)} [:span {:class (stl/css :placeholder-icon)}