From d4b02e36a7a2df514acb9926925f96895c4223c0 Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Thu, 3 Jun 2021 18:35:01 +0200 Subject: [PATCH 1/4] :lipstick: Change shadow options css --- .../partials/sidebar-element-options.scss | 22 +++++++++-- .../sidebar/options/menus/shadow.cljs | 39 ++++++++++++------- 2 files changed, 44 insertions(+), 17 deletions(-) diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index af2a9d22a..446a97c62 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -816,13 +816,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 3px; position: relative; top: 2px; width: 100%; @@ -897,6 +897,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 { 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..edb662256 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 @@ -104,19 +104,27 @@ {: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 +134,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] From 64049076991917fa9ca04f55614401a8fe9b93b0 Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Mon, 7 Jun 2021 07:55:21 +0200 Subject: [PATCH 2/4] :sparkles: Add new asset advanced optios css --- .../styles/main/partials/sidebar-assets.scss | 9 +++++++++ .../main/partials/sidebar-element-options.scss | 5 +++-- .../sidebar/options/menus/typography.cljs | 14 ++++++++++++-- 3 files changed, 24 insertions(+), 4 deletions(-) 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 446a97c62..31bf7f4ed 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; } @@ -1001,6 +1001,7 @@ .spacing-options { display: flex; + width: 100%; } .asset-section { @@ -1023,7 +1024,7 @@ width: 100%; max-width: none; margin: 0; - background: #303236; + background-color: #303236; border-top: none; border-left: none; border-right: none; 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..3d6a77929 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]]])) @@ -501,6 +502,10 @@ [:span.label (tr "workspace.assets.typography.font-id")] [:span (:font-id typography)]] + [:div.element-set-actions-button + {:on-click #(reset! open? true)} + i/actions] + [:div.row-flex [:span.label (tr "workspace.assets.typography.font-variant-id")] [:span (:font-variant-id typography)]] @@ -532,6 +537,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}]])]])) From a2b03051622f685c5fde25cd982cc203e34288a0 Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Mon, 7 Jun 2021 18:14:49 +0200 Subject: [PATCH 3/4] :sparkles: Add new text and grid advanced opt css --- .../styles/main/partials/colorpicker.scss | 1 + .../partials/sidebar-element-options.scss | 23 +++++++++++++++---- .../sidebar/options/menus/frame_grid.cljs | 2 ++ .../sidebar/options/menus/typography.cljs | 4 ++-- 4 files changed, 23 insertions(+), 7 deletions(-) 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-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 31bf7f4ed..efb9c084e 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -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 { @@ -822,7 +832,7 @@ border: 1px solid $color-gray-60; background-color: $color-gray-50; border-radius: 4px; - padding: 8px 3px; + padding: 8px; position: relative; top: 2px; width: 100%; @@ -936,6 +946,10 @@ &:hover svg { fill: $color-primary; } + &.actions-inside { + position: absolute; + right: 0; + } } .element-set-label { @@ -1062,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/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs index 40bbe0a24..f5aaa4524 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 @@ -150,6 +150,8 @@ [:& advanced-options {:visible? (:show-advanced-options @state) :on-close toggle-advanced-options} + [:button.custom-button {:class (when (:show-advanced-options @state) "is-active") + :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/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 3d6a77929..9c15b74db 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 @@ -502,8 +502,8 @@ [:span.label (tr "workspace.assets.typography.font-id")] [:span (:font-id typography)]] - [:div.element-set-actions-button - {:on-click #(reset! open? true)} + [:div.element-set-actions-button.actions-inside + {:on-click #(reset! open? false)} i/actions] [:div.row-flex From c4b4976be07ea89e52186b30375c39cdafb058d4 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 9 Jun 2021 11:18:47 +0200 Subject: [PATCH 4/4] :sparkles: Remove advanced options overlay and single option when advanced options displayed --- .../main/ui/workspace/sidebar/options/common.cljs | 8 +++----- .../ui/workspace/sidebar/options/menus/blur.cljs | 1 - .../workspace/sidebar/options/menus/frame_grid.cljs | 13 +++++++------ .../ui/workspace/sidebar/options/menus/shadow.cljs | 3 +-- .../workspace/sidebar/options/menus/typography.cljs | 3 ++- 5 files changed, 13 insertions(+), 15 deletions(-) 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 f5aaa4524..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,10 +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 {:class (when (:show-advanced-options @state) "is-active") - :on-click toggle-advanced-options} i/actions] + [: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 edb662256..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,8 +98,7 @@ (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] 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 9c15b74db..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 @@ -468,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