diff --git a/frontend/src/app/main/ui/inspect/attributes/layout.cljs b/frontend/src/app/main/ui/inspect/attributes/layout.cljs index 6a697f2425..545efdc9fa 100644 --- a/frontend/src/app/main/ui/inspect/attributes/layout.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/layout.cljs @@ -29,7 +29,10 @@ :row-gap :column-gap :gap - :padding]) + :padding-inline-start + :padding-inline-end + :padding-block-start + :padding-block-end]) (mf/defc layout-block [{:keys [objects shape]}] diff --git a/frontend/src/app/main/ui/inspect/right_sidebar.scss b/frontend/src/app/main/ui/inspect/right_sidebar.scss index fac452cc97..5b88d57ba7 100644 --- a/frontend/src/app/main/ui/inspect/right_sidebar.scss +++ b/frontend/src/app/main/ui/inspect/right_sidebar.scss @@ -145,6 +145,10 @@ .viewer-tab-switcher { --tabs-nav-padding-inline-start: 0; --tabs-nav-padding-inline-end: var(--sp-m); + --max-inspect-tab-height: calc(100vh - 12rem); + + max-block-size: var(--max-inspect-tab-height); + overflow: auto; } .viewer-tab-switcher-layout { diff --git a/frontend/src/app/main/ui/inspect/styles.cljs b/frontend/src/app/main/ui/inspect/styles.cljs index d048e5cb0e..9f0630bd4d 100644 --- a/frontend/src/app/main/ui/inspect/styles.cljs +++ b/frontend/src/app/main/ui/inspect/styles.cljs @@ -5,10 +5,12 @@ [app.common.data.macros :as dm] [app.common.types.component :as ctc] [app.common.types.components-list :as ctkl] + [app.common.types.shape.layout :as ctl] [app.common.types.tokens-lib :as ctob] [app.main.data.style-dictionary :as sd] [app.main.refs :as refs] [app.main.ui.inspect.styles.panels.geometry :refer [geometry-panel*]] + [app.main.ui.inspect.styles.panels.layout :refer [layout-panel*]] [app.main.ui.inspect.styles.panels.tokens-panel :refer [tokens-panel*]] [app.main.ui.inspect.styles.panels.variants-panel :refer [variants-panel*]] [app.main.ui.inspect.styles.style-box :refer [style-box*]] @@ -41,6 +43,7 @@ (let [data (dm/get-in libraries [file-id :data]) first-shape (first shapes) first-component (ctkl/get-component data (:component-id first-shape)) + layout-shapes (->> shapes (filter ctl/any-layout?)) type (get-shape-type shapes first-shape first-component) tokens-lib (mf/deref refs/tokens-lib) active-themes (mf/deref refs/workspace-active-theme-paths-no-hidden) @@ -62,16 +65,22 @@ [:> tokens-panel* {:theme-paths active-themes :set-names active-sets}]]]) (for [panel panels] [:li {:key (d/name panel)} - [:> style-box* {:panel panel} - (case panel - :variant [:> variants-panel* {:component first-component - :objects objects - :shape first-shape - :data data}] - :geometry [:> geometry-panel* {:shapes shapes - :objects objects - :resolved-tokens resolved-active-tokens}] - color-space)]])])) + (if (not (= panel :layout)) + [:> style-box* {:panel panel} + (case panel + :variant [:> variants-panel* {:component first-component + :objects objects + :shape first-shape + :data data}] + :geometry [:> geometry-panel* {:shapes shapes + :objects objects + :resolved-tokens resolved-active-tokens}] + color-space)] + (when (seq layout-shapes) + [:> style-box* {:panel :layout} + [:> layout-panel* {:shapes layout-shapes + :objects objects + :resolved-tokens resolved-active-tokens}]]))])])) ;; WIP diff --git a/frontend/src/app/main/ui/inspect/styles/panels/geometry.cljs b/frontend/src/app/main/ui/inspect/styles/panels/geometry.cljs index 156285c6d3..f3512d41b3 100644 --- a/frontend/src/app/main/ui/inspect/styles/panels/geometry.cljs +++ b/frontend/src/app/main/ui/inspect/styles/panels/geometry.cljs @@ -24,7 +24,7 @@ (mf/defc geometry-panel* [{:keys [shapes objects resolved-tokens]}] - [:div {:class (stl/css :variants-panel)} + [:div {:class (stl/css :geometry-panel)} (for [shape shapes] [:div {:key (:id shape) :class "geometry-shape"} (for [property properties] diff --git a/frontend/src/app/main/ui/inspect/styles/panels/layout.cljs b/frontend/src/app/main/ui/inspect/styles/panels/layout.cljs new file mode 100644 index 0000000000..0ad53d88e7 --- /dev/null +++ b/frontend/src/app/main/ui/inspect/styles/panels/layout.cljs @@ -0,0 +1,63 @@ +(ns app.main.ui.inspect.styles.panels.layout + (:require-macros [app.main.style :as stl]) + (:require + [app.common.data.macros :as dm] + [app.main.ui.inspect.attributes.common :as cmm] + [app.main.ui.inspect.styles.properties-row :refer [properties-row*]] + [app.util.code-gen.style-css :as css] + [rumext.v2 :as mf])) + +(def ^:private properties + [:display + :flex-direction + :flex-wrap + :grid-template-rows + :grid-template-columns + :align-items + :align-content + :justify-items + :justify-content + :row-gap + :column-gap + :gap + :padding-inline-start + :padding-inline-end + :padding-block-start + :padding-block-end]) + +(def ^:private shape-prop->padding-prop + {:padding-block-start :p1 + :padding-inline-end :p2 + :padding-block-end :p3 + :padding-inline-start :p4}) + +(defn- get-applied-tokens-in-shape + [shape-tokens property] + (let [padding-prop (get shape-prop->padding-prop property)] + (if padding-prop + (get shape-tokens padding-prop) + (get shape-tokens property)))) + +(defn- get-resolved-token + [property shape resolved-tokens] + (let [shape-tokens (:applied-tokens shape) + applied-tokens-in-shape (get-applied-tokens-in-shape shape-tokens property) + token (get resolved-tokens applied-tokens-in-shape)] + token)) + +(mf/defc layout-panel* + [{:keys [shapes objects resolved-tokens]}] + [:div {:class (stl/css :variants-panel)} + (for [shape shapes] + [:div {:key (:id shape) :class "layout-shape"} + (for [property properties] + (when-let [value (css/get-css-value objects shape property)] + (let [property-name (cmm/get-css-rule-humanized property) + resolved-token (get-resolved-token property shape resolved-tokens) + property-value (if (not resolved-token) (css/get-css-property objects shape property) "")] + [:> properties-row* {:key (dm/str "layout-property-" property) + :term property-name + :detail value + :token resolved-token + :property property-value + :copiable true}])))])]) diff --git a/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.cljs b/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.cljs index 47af96207a..9557948284 100644 --- a/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.cljs +++ b/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.cljs @@ -1,7 +1,7 @@ (ns app.main.ui.inspect.styles.property-detail-copiable (:require-macros [app.main.style :as stl]) (:require - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -22,6 +22,8 @@ [:span {:class (stl/css :property-detail-text :property-detail-text-token)} (:name token)] [:span {:class (stl/css :property-detail-text)} detail]) [:> icon* {:class (stl/css :property-detail-icon) - :icon-id (if copied "tick" "clipboard") + :icon-id (if copied i/tick i/clipboard) :size "s" :aria-label (tr "inspect.tabs.styles.panel.copy-to-clipboard")}]]) + + diff --git a/frontend/src/app/util/code_gen/style_css.cljs b/frontend/src/app/util/code_gen/style_css.cljs index 2e47e882ed..b3f8090eff 100644 --- a/frontend/src/app/util/code_gen/style_css.cljs +++ b/frontend/src/app/util/code_gen/style_css.cljs @@ -89,7 +89,10 @@ body { :gap :column-gap :row-gap - :padding + :padding-inline-start + :padding-inline-end + :padding-block-start + :padding-block-end :z-index ;; Flex related properties diff --git a/frontend/src/app/util/code_gen/style_css_formats.cljs b/frontend/src/app/util/code_gen/style_css_formats.cljs index 66e5d3b726..fe9079fbe3 100644 --- a/frontend/src/app/util/code_gen/style_css_formats.cljs +++ b/frontend/src/app/util/code_gen/style_css_formats.cljs @@ -33,6 +33,10 @@ :row-gap :size-array :column-gap :size-array :padding :size-array + :padding-inline-start :size-array + :padding-inline-end :size-array + :padding-block-start :size-array + :padding-block-end :size-array :margin :size-array :grid-template-rows :tracks :grid-template-columns :tracks}) diff --git a/frontend/src/app/util/code_gen/style_css_values.cljs b/frontend/src/app/util/code_gen/style_css_values.cljs index 13ee25bc83..2537db5000 100644 --- a/frontend/src/app/util/code_gen/style_css_values.cljs +++ b/frontend/src/app/util/code_gen/style_css_values.cljs @@ -282,6 +282,26 @@ (when (or (not= p1 0) (not= p2 0) (not= p3 0) (not= p4 0)) [p1 p2 p3 p4])))) +(defmethod get-value :padding-block-start + [_ {:keys [layout-padding]} _ _] + (when (and (:p1 layout-padding) (not= (:p1 layout-padding) 0)) + [(:p1 layout-padding)])) + +(defmethod get-value :padding-inline-end + [_ {:keys [layout-padding]} _ _] + (when (and (:p2 layout-padding) (not= (:p2 layout-padding) 0)) + [(:p2 layout-padding)])) + +(defmethod get-value :padding-block-end + [_ {:keys [layout-padding]} _ _] + (when (and (:p3 layout-padding) (not= (:p3 layout-padding) 0)) + [(:p3 layout-padding)])) + +(defmethod get-value :padding-inline-start + [_ {:keys [layout-padding]} _ _] + (when (and (:p4 layout-padding) (not= (:p4 layout-padding) 0)) + [(:p4 layout-padding)])) + (defmethod get-value :grid-template-rows [_ shape _ _] (:layout-grid-rows shape))