diff --git a/frontend/resources/styles/main/layouts/inspect.scss b/frontend/resources/styles/main/layouts/inspect.scss index 41f261ad5..b0ad47bd2 100644 --- a/frontend/resources/styles/main/layouts/inspect.scss +++ b/frontend/resources/styles/main/layouts/inspect.scss @@ -119,7 +119,7 @@ $width-settings-bar: 256px; } } - &.settings-bar-right, { + &.settings-bar-right { width: 100%; } } diff --git a/frontend/resources/styles/main/partials/inspect.scss b/frontend/resources/styles/main/partials/inspect.scss index 9b2a29ea7..df0e22357 100644 --- a/frontend/resources/styles/main/partials/inspect.scss +++ b/frontend/resources/styles/main/partials/inspect.scss @@ -421,7 +421,6 @@ visibility: visible; } } - } .code-row-display { diff --git a/frontend/src/app/main/features.cljs b/frontend/src/app/main/features.cljs index 4b0735c79..a922dac97 100644 --- a/frontend/src/app/main/features.cljs +++ b/frontend/src/app/main/features.cljs @@ -20,7 +20,7 @@ (log/set-level! :warn) (def available-features - #{:auto-layout :components-v2 :new-css-system}) + #{:components-v2 :new-css-system :grid-layout}) (defn- toggle-feature [feature] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index ab490b749..2d030cdff 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -12,6 +12,7 @@ [app.common.types.shape.layout :as ctl] [app.main.data.workspace :as udw] [app.main.data.workspace.shape-layout :as dwsl] + [app.main.features :as features] [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input]] @@ -602,20 +603,20 @@ (if (= type :row) (st/emit! (dwsl/update-layout ids {:layout-justify-content value})) (st/emit! (dwsl/update-layout ids {:layout-align-content value})))))] - [:div.element-set [:div.element-set-title [:* [:span "Layout"] (if (and (not multiple) (:layout values)) [:div.title-actions - [:div.layout-btns + (when (features/active-feature? :grid-layout) + [:div.layout-btns [:button {:on-click set-flex :class (dom/classnames :active (= :flex layout-type))} "Flex"] [:button {:on-click set-grid :class (dom/classnames - :active (= :grid layout-type))} "Grid"]] + :active (= :grid layout-type))} "Grid"]]) [:button.remove-layout {:on-click on-remove-layout} i/minus]] [:button.add-page {:on-click #(on-add-layout :flex)} i/close])]] diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss index 443498da2..97269139b 100644 --- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss +++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss @@ -32,7 +32,7 @@ } .grid-frame { - fill: #F6F6F6; + fill: #f6f6f6; stroke: var(--color-distance); stroke-width: calc(1 / var(--zoom)); } diff --git a/frontend/src/features.cljs b/frontend/src/features.cljs index c129ae84e..ebce21ba7 100644 --- a/frontend/src/features.cljs +++ b/frontend/src/features.cljs @@ -19,3 +19,6 @@ (defn ^:export new-css-system [] (features/toggle-feature! :new-css-system)) + +(defn ^:export grid [] + (features/toggle-feature! :grid-layout))