Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-26 00:19:07 -05:00
Code Issues Activity

✨ Adds grid to the actibable features

Browse source
This commit is contained in:
alonso.torres 2023-07-10 11:27:43 +02:00
parent ac184a7c8f
commit da9fa31c27
6 changed files with 10 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/resources/styles/main/layouts/inspect.scss
View file

@ -119,7 +119,7 @@ $width-settings-bar: 256px;
} }
} }
&.settings-bar-right, { &.settings-bar-right {
width: 100%; width: 100%;
} }
} }

1
frontend/resources/styles/main/partials/inspect.scss
View file

@ -421,7 +421,6 @@
visibility: visible; visibility: visible;
} }
} }
} }
.code-row-display { .code-row-display {

2
frontend/src/app/main/features.cljs
View file

@ -20,7 +20,7 @@
(log/set-level! :warn) (log/set-level! :warn)
(def available-features (def available-features
#{:auto-layout :components-v2 :new-css-system}) #{:components-v2 :new-css-system :grid-layout})
(defn- toggle-feature (defn- toggle-feature
[feature] [feature]

7
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -12,6 +12,7 @@
[app.common.types.shape.layout :as ctl] [app.common.types.shape.layout :as ctl]
[app.main.data.workspace :as udw] [app.main.data.workspace :as udw]
[app.main.data.workspace.shape-layout :as dwsl] [app.main.data.workspace.shape-layout :as dwsl]
[app.main.features :as features]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input]]
@ -602,20 +603,20 @@
(if (= type :row) (if (= type :row)
(st/emit! (dwsl/update-layout ids {:layout-justify-content value})) (st/emit! (dwsl/update-layout ids {:layout-justify-content value}))
(st/emit! (dwsl/update-layout ids {:layout-align-content value})))))] (st/emit! (dwsl/update-layout ids {:layout-align-content value})))))]
[:div.element-set [:div.element-set
[:div.element-set-title [:div.element-set-title
[:* [:*
[:span "Layout"] [:span "Layout"]
(if (and (not multiple) (:layout values)) (if (and (not multiple) (:layout values))
[:div.title-actions [:div.title-actions
[:div.layout-btns (when (features/active-feature? :grid-layout)
[:div.layout-btns
[:button {:on-click set-flex [:button {:on-click set-flex
:class (dom/classnames :class (dom/classnames
:active (= :flex layout-type))} "Flex"] :active (= :flex layout-type))} "Flex"]
[:button {:on-click set-grid [:button {:on-click set-grid
:class (dom/classnames :class (dom/classnames
:active (= :grid layout-type))} "Grid"]] :active (= :grid layout-type))} "Grid"]])
[:button.remove-layout {:on-click on-remove-layout} i/minus]] [:button.remove-layout {:on-click on-remove-layout} i/minus]]
[:button.add-page {:on-click #(on-add-layout :flex)} i/close])]] [:button.add-page {:on-click #(on-add-layout :flex)} i/close])]]

2
frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
View file

@ -32,7 +32,7 @@
} }
.grid-frame { .grid-frame {
fill: #F6F6F6; fill: #f6f6f6;
stroke: var(--color-distance); stroke: var(--color-distance);
stroke-width: calc(1 / var(--zoom)); stroke-width: calc(1 / var(--zoom));
} }

3
frontend/src/features.cljs
View file

@ -19,3 +19,6 @@
(defn ^:export new-css-system [] (defn ^:export new-css-system []
(features/toggle-feature! :new-css-system)) (features/toggle-feature! :new-css-system))
(defn ^:export grid []
(features/toggle-feature! :grid-layout))