diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss index 410437ae6..e0b0ed178 100644 --- a/frontend/resources/styles/main/partials/colorpicker.scss +++ b/frontend/resources/styles/main/partials/colorpicker.scss @@ -480,6 +480,7 @@ .color-data { align-items: center; display: flex; + margin-bottom: $small; position: relative; .color-name { diff --git a/frontend/resources/styles/main/partials/sidebar-assets.scss b/frontend/resources/styles/main/partials/sidebar-assets.scss index 4389cf8b6..122f5e8aa 100644 --- a/frontend/resources/styles/main/partials/sidebar-assets.scss +++ b/frontend/resources/styles/main/partials/sidebar-assets.scss @@ -400,6 +400,15 @@ top: 10px; left: 10px; } + + .advanced-options { + border-color: $color-black; + background-color: $color-gray-60; + + .input-text, .input-select, .adv-typography-name { + background-color: $color-gray-60; + } + } } } diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index ff8060411..8b5606eec 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -543,7 +543,7 @@ padding: 0 $x-small; &:first-child { - justify-content: space-between; + justify-content: flex-start; margin-left: 0; } @@ -733,6 +733,16 @@ .grid-option { margin-bottom: 0.5rem; + .advanced-options { + .row-flex { + justify-content: flex-end; + } + .custom-button { + left: 0; + position: absolute; + top: 12px; + } + } } .element-set-content .custom-select.input-option { @@ -816,13 +826,13 @@ .advanced-options-wrapper { width: 100%; - padding-left: 0.25rem; } .advanced-options { - background-color: #303236; + border: 1px solid $color-gray-60; + background-color: $color-gray-50; border-radius: 4px; - padding: 0.5rem; + padding: 8px; position: relative; top: 2px; width: 100%; @@ -897,6 +907,22 @@ .download-button { margin-top: 10px; } + + .input-element { + width: 100%; + flex-shrink: initial; + } + + .row-grid-2 { + grid-column-gap: 1em; + } + + .color-info { + input { + margin-right: 1em; + width: 74px; + } + } } .shadow-options .color-row-wrap { @@ -920,6 +946,10 @@ &:hover svg { fill: $color-primary; } + &.actions-inside { + position: absolute; + right: 0; + } } .element-set-label { @@ -985,6 +1015,7 @@ .spacing-options { display: flex; + width: 100%; } .asset-section { @@ -1007,7 +1038,7 @@ width: 100%; max-width: none; margin: 0; - background: #303236; + background-color: #303236; border-top: none; border-left: none; border-right: none; @@ -1045,17 +1076,16 @@ .go-to-lib-button { transition: border 0.3s, color 0.3s; text-align: center; - background: $color-gray-60; + background: $color-gray-50; padding: 0.5rem; border-radius: 2px; cursor: pointer; font-size: 14px; margin-top: 1rem; - border: 1px solid $color-gray-60; &:hover { - border: 1px solid $color-primary; - color: $color-primary; + background: $color-primary; + color: $color-black; } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs index 5fbabea12..6468e1b4d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs @@ -22,9 +22,7 @@ (.scrollIntoViewIfNeeded ^js node))))) (when visible? - [:* - [:div.focus-overlay {:on-click handle-click}] - [:div.advanced-options-wrapper {:ref ref} - [:div.advanced-options {} - children]]]))) + [:div.advanced-options-wrapper {:ref ref} + [:div.advanced-options {} + children]]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs index f6c8698ca..cb2e9fd80 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs @@ -13,7 +13,6 @@ [app.main.data.workspace.changes :as dch] [app.main.store :as st] [app.main.ui.icons :as i] - [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [t]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs index 40bbe0a24..1c30246c8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs @@ -117,11 +117,13 @@ (on-save-grid grid))) is-default (= (->> grid :params) - (->> grid :type default-grid-params))] + (->> grid :type default-grid-params)) + + open? (:show-advanced-options @state)] [:div.grid-option - [:div.grid-option-main - [:button.custom-button {:class (when (:show-advanced-options @state) "is-active") + [:div.grid-option-main {:style {:display (when open? "none")}} + [:button.custom-button {:class (when open? "is-active") :on-click toggle-advanced-options} i/actions] [:& select {:class "flex-grow" @@ -148,8 +150,9 @@ [:button.custom-button {:on-click handle-toggle-visibility} (if display i/eye i/eye-closed)] [:button.custom-button {:on-click handle-remove-grid} i/minus]]] - [:& advanced-options {:visible? (:show-advanced-options @state) + [:& advanced-options {:visible? open? :on-close toggle-advanced-options} + [:button.custom-button {:on-click toggle-advanced-options} i/actions] (when (= :square type) [:& input-row {:label (t locale "workspace.options.grid.params.size") :class "pixels" diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index 0f84e67c6..9b6e48735 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -98,25 +98,32 @@ (fn [] (st/emit! (dch/update-shapes ids #(update-in % [:shadow index :hidden] not)))))] [:* - [:div.element-set-options-group - + [:div.element-set-options-group {:style {:display (when @open-shadow "none")}} [:div.element-set-actions-button {:on-click #(reset! open-shadow true)} i/actions] - [:> numeric-input {:ref basic-offset-x-ref - :on-change (update-attr index :offset-x valid-number?) - :on-click (select-text basic-offset-x-ref) - :value (:offset-x value)}] - [:> numeric-input {:ref basic-offset-y-ref - :on-change (update-attr index :offset-y valid-number?) - :on-click (select-text basic-offset-y-ref) - :value (:offset-y value)}] - [:> numeric-input {:ref basic-blur-ref - :on-click (select-text basic-blur-ref) - :on-change (update-attr index :blur valid-number?) - :min 0 - :value (:blur value)}] + ;; [:> numeric-input {:ref basic-offset-x-ref + ;; :on-change (update-attr index :offset-x valid-number?) + ;; :on-click (select-text basic-offset-x-ref) + ;; :value (:offset-x value)}] + ;; [:> numeric-input {:ref basic-offset-y-ref + ;; :on-change (update-attr index :offset-y valid-number?) + ;; :on-click (select-text basic-offset-y-ref) + ;; :value (:offset-y value)}] + ;; [:> numeric-input {:ref basic-blur-ref + ;; :on-click (select-text basic-blur-ref) + ;; :on-change (update-attr index :blur valid-number?) + ;; :min 0 + ;; :value (:blur value)}] + + [:select.input-select + {:default-value (str (:style value)) + :on-change (fn [event] + (let [value (-> event dom/get-target dom/get-value d/read-string)] + (st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))} + [:option {:value ":drop-shadow"} (t locale "workspace.options.shadow-options.drop-shadow")] + [:option {:value ":inner-shadow"} (t locale "workspace.options.shadow-options.inner-shadow")]] [:div.element-set-actions [:div.element-set-actions-button {:on-click (toggle-visibility index)} @@ -126,7 +133,10 @@ [:& advanced-options {:visible? @open-shadow :on-close #(reset! open-shadow false)} - [:div.row-grid-2 + [:div.color-data + [:div.element-set-actions-button + {:on-click #(reset! open-shadow false)} + i/actions] [:select.input-select {:default-value (str (:style value)) :on-change (fn [event] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 5fa6300e6..36e8acdf0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -424,7 +424,8 @@ [:div.element-set-content [:> font-options opts] [:div.row-flex - [:> spacing-options opts] + [:> spacing-options opts]] + [:div.row-flex [:> text-transform-options opts]]])) @@ -467,7 +468,8 @@ [:* [:div.element-set-options-group.typography-entry - {:class (when selected? "selected")} + {:class (when selected? "selected") + :style {:display (when @open? "none")}} [:div.typography-selection-wrapper {:class (when on-click "is-selectable") :on-click on-click @@ -501,6 +503,10 @@ [:span.label (tr "workspace.assets.typography.font-id")] [:span (:font-id typography)]] + [:div.element-set-actions-button.actions-inside + {:on-click #(reset! open? false)} + i/actions] + [:div.row-flex [:span.label (tr "workspace.assets.typography.font-variant-id")] [:span (:font-variant-id typography)]] @@ -532,6 +538,11 @@ {:type "text" :ref name-input-ref :default-value (cp/merge-path-item (:path typography) (:name typography)) - :on-blur on-name-blur}]]] + :on-blur on-name-blur}] + + [:div.element-set-actions-button + {:on-click #(reset! open? false)} + i/actions]]] + [:& typography-options {:values typography :on-change on-change}]])]]))