diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json index d0f049c54..0f5fc0559 100644 --- a/frontend/resources/locales.json +++ b/frontend/resources/locales.json @@ -355,7 +355,7 @@ } }, "header.sitemap" : { - "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:68" ], + "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:67" ], "translations" : { "en" : null, "fr" : null @@ -822,91 +822,91 @@ } }, "workspace.header.menu.disable-dynamic-alignment" : { - "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:116" ], + "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:113" ], "translations" : { "en" : "Disable dynamic alignment" } }, "workspace.header.menu.disable-snap-grid" : { - "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:92" ], + "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:89" ], "translations" : { "en" : "Disable snap to grid" } }, "workspace.header.menu.enable-dynamic-alignment" : { - "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:117" ], + "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:114" ], "translations" : { "en" : "Enable dynamic aligment" } }, "workspace.header.menu.enable-snap-grid" : { - "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:93" ], + "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:90" ], "translations" : { "en" : "Snap to grid" } }, "workspace.header.menu.hide-grid" : { - "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:86" ], + "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:83" ], "translations" : { "en" : "Hide grid" } }, "workspace.header.menu.hide-layers" : { - "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:98" ], + "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:95" ], "translations" : { "en" : "Hide layers" } }, "workspace.header.menu.hide-libraries" : { - "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:110" ], + "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:107" ], "translations" : { "en" : "Hide libraries" } }, "workspace.header.menu.hide-palette" : { - "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:104" ], + "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:101" ], "translations" : { "en" : "Hide color palette" } }, "workspace.header.menu.hide-rules" : { - "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:80" ], + "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:77" ], "translations" : { "en" : "Hide rules" } }, "workspace.header.menu.show-grid" : { - "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:87" ], + "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:84" ], "translations" : { "en" : "Show grid" } }, "workspace.header.menu.show-layers" : { - "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:99" ], + "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:96" ], "translations" : { "en" : "Show layers" } }, "workspace.header.menu.show-libraries" : { - "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:111" ], + "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:108" ], "translations" : { "en" : "Show libraries" } }, "workspace.header.menu.show-palette" : { - "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:105" ], + "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:102" ], "translations" : { "en" : "Show color palette" } }, "workspace.header.menu.show-rules" : { - "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:81" ], + "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:78" ], "translations" : { "en" : "Show rules" } }, "workspace.header.viewer" : { - "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:154" ], + "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:151" ], "translations" : { "en" : "View mode (Ctrl + P)", "fr" : "Mode visualisation (Ctrl + P)" @@ -1104,6 +1104,120 @@ }, "unused" : true }, + "workspace.options.grid.auto" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:40" ], + "translations" : { + "en" : "Auto" + } + }, + "workspace.options.grid.column" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:125" ], + "translations" : { + "en" : "Columns" + } + }, + "workspace.options.grid.params.columns" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:164" ], + "translations" : { + "en" : "Columns" + } + }, + "workspace.options.grid.params.gutter" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:191" ], + "translations" : { + "en" : "Gutter" + } + }, + "workspace.options.grid.params.height" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:184" ], + "translations" : { + "en" : "Height" + } + }, + "workspace.options.grid.params.margin" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:196" ], + "translations" : { + "en" : "Margin" + } + }, + "workspace.options.grid.params.rows" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:156" ], + "translations" : { + "en" : "Rows" + } + }, + "workspace.options.grid.params.set-default" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:208" ], + "translations" : { + "en" : "Set as default" + } + }, + "workspace.options.grid.params.size" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:149" ], + "translations" : { + "en" : "Size" + } + }, + "workspace.options.grid.params.type" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:172" ], + "translations" : { + "en" : "Type" + } + }, + "workspace.options.grid.params.type.center" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:176" ], + "translations" : { + "en" : "Center" + } + }, + "workspace.options.grid.params.type.left" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:175" ], + "translations" : { + "en" : "Left" + } + }, + "workspace.options.grid.params.type.right" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:177" ], + "translations" : { + "en" : "Right" + } + }, + "workspace.options.grid.params.type.stretch" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:174" ], + "translations" : { + "en" : "Stretch" + } + }, + "workspace.options.grid.params.use-default" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:206" ], + "translations" : { + "en" : "Use default" + } + }, + "workspace.options.grid.params.width" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:183" ], + "translations" : { + "en" : "Width" + } + }, + "workspace.options.grid.row" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:126" ], + "translations" : { + "en" : "Rows" + } + }, + "workspace.options.grid.square" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:124" ], + "translations" : { + "en" : "Square" + } + }, + "workspace.options.grid.title" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:220" ], + "translations" : { + "en" : "Grid & Layouts" + } + }, "workspace.options.line-height-letter-spacing" : { "translations" : { "en" : "Line height and Letter spacing", diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 937432c47..6aec7138c 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -285,7 +285,6 @@ position: absolute; left: 0; z-index: 12; - // width: 200px; max-height: 30rem; min-width: 7rem; overflow-y: auto; diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index ac38e9efb..fb7ab40b4 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -21,7 +21,7 @@ [uxbox.main.ui.workspace.images :refer [import-image-modal]] [uxbox.main.ui.components.dropdown :refer [dropdown]] [uxbox.main.ui.workspace.presence :as presence] - [uxbox.util.i18n :as i18n :refer [tr t]] + [uxbox.util.i18n :as i18n :refer [t]] [uxbox.util.data :refer [classnames]] [uxbox.util.math :as mth] [uxbox.util.router :as rt])) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs index 5e835f44b..29588bad5 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs @@ -23,7 +23,8 @@ [uxbox.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]] [uxbox.main.ui.components.select :refer [select]] [uxbox.main.ui.components.editable-select :refer [editable-select]] - [uxbox.main.ui.components.dropdown :refer [dropdown]])) + [uxbox.main.ui.components.dropdown :refer [dropdown]] + [uxbox.util.i18n :as i18n :refer [tr t]])) (mf/defc advanced-options [{:keys [visible? on-close children]}] (when visible? @@ -36,12 +37,13 @@ children]])) (def ^:private size-options - [{:value :auto :label "Auto"} + [{:value :auto :label (tr "workspace.options.grid.auto")} :separator 18 12 10 8 6 4 3 2]) (mf/defc grid-options [{:keys [frame grid default-grid-params on-change on-remove on-save-grid]}] - (let [state (mf/use-state {:show-advanced-options false + (let [locale (i18n/use-locale) + state (mf/use-state {:show-advanced-options false :changes {}}) {:keys [type display params] :as grid} (d/deep-merge grid (:changes @state)) @@ -119,9 +121,9 @@ [:& select {:class "flex-grow" :default-value type - :options [{:value :square :label "Square"} - {:value :column :label "Columns"} - {:value :row :label "Rows"}] + :options [{:value :square :label (t locale "workspace.options.grid.square")} + {:value :column :label (t locale "workspace.options.grid.column")} + {:value :row :label (t locale "workspace.options.grid.row")}] :on-change handle-change-type}] (if (= type :square) @@ -144,14 +146,14 @@ [:& advanced-options {:visible? (:show-advanced-options @state) :on-close toggle-advanced-options} (when (= :square type) - [:& input-row {:label "Size" + [:& input-row {:label (t locale "workspace.options.grid.params.size") :class "pixels" :min 1 :value (:size params) :on-change (handle-change :params :size)}]) (when (= :row type) - [:& input-row {:label "Rows" + [:& input-row {:label (t locale "workspace.options.grid.params.rows") :type :editable-select :options size-options :value (:size params) @@ -159,7 +161,7 @@ :on-change handle-change-size}]) (when (= :column type) - [:& input-row {:label "Columns" + [:& input-row {:label (t locale "workspace.options.grid.params.columns") :type :editable-select :options size-options :value (:size params) @@ -167,29 +169,31 @@ :on-change handle-change-size}]) (when (#{:row :column} type) - [:& input-row {:label "Type" + [:& input-row {:label (t locale "workspace.options.grid.params.type") :type :select - :options [{:value :stretch :label "Stretch"} - {:value :left :label "Left"} - {:value :center :label "Center"} - {:value :right :label "Right"}] + :options [{:value :stretch :label (t locale "workspace.options.grid.params.type.stretch")} + {:value :left :label (t locale "workspace.options.grid.params.type.left")} + {:value :center :label (t locale "workspace.options.grid.params.type.center")} + {:value :right :label (t locale "workspace.options.grid.params.type.right")}] :value (:type params) :on-change (handle-change :params :type)}]) (when (#{:row :column} type) - [:& input-row {:label (if (= :row type) "Height" "Width") + [:& input-row {:label (if (= :row type) + (t locale "workspace.options.grid.params.width") + (t locale "workspace.options.grid.params.height")) :class "pixels" :value (or (:item-length params) "") :on-change handle-change-item-length}]) (when (#{:row :column} type) [:* - [:& input-row {:label "Gutter" + [:& input-row {:label (t locale "workspace.options.grid.params.gutter") :class "pixels" :value (:gutter params) :min 0 :on-change (handle-change :params :gutter)}] - [:& input-row {:label "Margin" + [:& input-row {:label (t locale "workspace.options.grid.params.margin") :class "pixels" :min 0 :value (:margin params) @@ -199,12 +203,13 @@ :on-change (handle-change :params :color)}] [:div.row-flex [:button.btn-options {:disabled is-default - :on-click handle-use-default} "Use default"] + :on-click handle-use-default} (t locale "workspace.options.grid.params.use-default")] [:button.btn-options {:disabled is-default - :on-click handle-set-as-default} "Set as default"]]]])) + :on-click handle-set-as-default} (t locale "workspace.options.grid.params.set-default")]]]])) (mf/defc frame-grid [{:keys [shape]}] - (let [id (:id shape) + (let [locale (i18n/use-locale) + id (:id shape) default-grid-params (merge dw/default-grid-params (mf/deref refs/workspace-saved-grids)) handle-create-grid #(st/emit! (dw/add-frame-grid id)) handle-remove-grid (fn [index] #(st/emit! (dw/remove-frame-grid id index))) @@ -212,7 +217,7 @@ handle-save-grid (fn [grid] (st/emit! (dw/set-default-grid (:type grid) (:params grid))))] [:div.element-set [:div.element-set-title - [:span "Grids"] + [:span (t locale "workspace.options.grid.title")] [:div.add-page {:on-click handle-create-grid} i/close]] (when (not (empty? (:grids shape)))