From f8d09917a53b54081b848ac422af2a4c826f8435 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Tue, 21 Sep 2021 15:48:05 +0200 Subject: [PATCH] :lipstick: Make some design adjustments --- .../partials/sidebar-element-options.scss | 27 ++++++-- .../main/partials/sidebar-interactions.scss | 28 ++++++++- .../sidebar/options/menus/interactions.cljs | 61 ++++++++++--------- .../ui/workspace/viewport/interactions.cljs | 35 ++++++----- 4 files changed, 98 insertions(+), 53 deletions(-) diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 1c38124e5..5a36e748f 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -908,12 +908,31 @@ &.selected { border: 1px solid $color-primary; } + + &:not(:first-child) { + margin-top: 7px; + } + + &.open { + &:hover { + background: unset; + } + } +} + +.interactions-options { + &.element-set { + border-bottom: 0; + } + + .element-set-options-group { + flex-wrap: wrap; + } } .exports-options, -.shadow-options{ +.shadow-options { .element-set-options-group { - justify-content: space-between; .delete-icon { display: flex; min-width: 40px; @@ -927,10 +946,6 @@ fill: $color-gray-20; } } - - &:not(:first-child) { - margin-top: 7px; - } } .download-button { diff --git a/frontend/resources/styles/main/partials/sidebar-interactions.scss b/frontend/resources/styles/main/partials/sidebar-interactions.scss index d2c9cb1dc..c01779e32 100644 --- a/frontend/resources/styles/main/partials/sidebar-interactions.scss +++ b/frontend/resources/styles/main/partials/sidebar-interactions.scss @@ -7,8 +7,14 @@ .interactions-help { font-size: $fs12; - margin: 0 $medium; + padding: 7px $medium; + margin: 0 -7px; text-align: center; + + &.separator { + padding-bottom: $medium; + border-bottom: 1px solid $color-black; + } } .interactions-help-icon { @@ -24,7 +30,9 @@ } .interactions-summary { - width: 100%; + cursor: pointer; + flex-basis: 0; + flex-grow: 1; .trigger-name { font-size: $fs12; @@ -40,17 +48,31 @@ .interactions-element { display: flex; align-items: center; + margin: 0 -7px; + padding: 0 7px; .element-label { color: $color-gray-20; font-size: $fs11; width: 64px; } + + &.separator { + border-top: 1px solid $color-black; + margin-top: $x-small; + } } .interactions-pos-buttons { margin-top: $small; - justify-content: space-around; + padding-top: $small; + padding-bottom: $small; + justify-content: space-between; + + .element-set-actions-button { + min-width: 18px; + min-height: 18px; + } svg { width: 18px; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs index 7a77359d8..545eea731 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs @@ -65,8 +65,8 @@ action-type (:action-type interaction) overlay-pos-type (:overlay-pos-type interaction) - close-click-outside? (:close-click-outside interaction) - background-overlay? (:background-overlay interaction) + close-click-outside? (:close-click-outside interaction false) + background-overlay? (:background-overlay interaction false) extended-open? (mf/use-state false) @@ -106,31 +106,31 @@ (update-interaction index #(cti/set-background-overlay % value))))] [:* - [:div.element-set-options-group + [:div.element-set-options-group {:class (dom/classnames + :open @extended-open?)} [:div.element-set-actions-button {:on-click #(swap! extended-open? not)} i/actions] - [:div.interactions-summary + [:div.interactions-summary {:on-click #(swap! extended-open? not)} [:div.trigger-name (event-type-name interaction)] [:div.action-summary (action-summary interaction destination)]] [:div.elemen-set-actions {:on-click #(remove-interaction index)} - [:div.element-set-actions-button i/minus]]] - (when @extended-open? - [:div.element-set + [:div.element-set-actions-button i/minus]] + (when @extended-open? [:div.element-set-content - [:div.interactions-element - [:span.element-set-subtitle.wide (tr "workspace.options.interaction-trigger")] - [:select.input-select - {:value (str (:event-type interaction)) - :on-change change-event-type} - (for [[value name] (event-type-names)] - [:option {:value (str value)} name])]] - [:div.interactions-element - [:span.element-set-subtitle.wide (tr "workspace.options.interaction-action")] - [:select.input-select - {:value (str (:action-type interaction)) - :on-change change-action-type} - (for [[value name] (action-type-names)] - [:option {:value (str value)} name])]] + [:div.interactions-element.separator + [:span.element-set-subtitle.wide (tr "workspace.options.interaction-trigger")] + [:select.input-select + {:value (str (:event-type interaction)) + :on-change change-event-type} + (for [[value name] (event-type-names)] + [:option {:value (str value)} name])]] + [:div.interactions-element.separator + [:span.element-set-subtitle.wide (tr "workspace.options.interaction-action")] + [:select.input-select + {:value (str (:action-type interaction)) + :on-change change-action-type} + (for [[value name] (action-type-names)] + [:option {:value (str value)} name])]] (when (#{:navigate :open-overlay :close-overlay} action-type) [:div.interactions-element [:span.element-set-subtitle.wide (tr "workspace.options.interaction-destination")] @@ -195,7 +195,7 @@ :checked background-overlay? :on-change change-background-overlay}] [:label {:for (str "background-" index)} - (tr "workspace.options.interaction-background")]]]])]])])) + (tr "workspace.options.interaction-background")]]]])])]])) (mf/defc interactions-menu [{:keys [shape] :as props}] @@ -218,7 +218,7 @@ (let [new-interactions (update interactions index update-fn)] (st/emit! (dw/update-shape (:id shape) {:interactions new-interactions})))) ] - [:div.element-set + [:div.element-set.interactions-options (when shape [:div.element-set-title [:span (tr "workspace.options.interactions")] @@ -231,15 +231,16 @@ (when shape [:* [:div.interactions-help-icon i/plus] - [:div.interactions-help (tr "workspace.options.add-interaction")]]) + [:div.interactions-help.separator (tr "workspace.options.add-interaction")]]) [:div.interactions-help-icon i/interaction] [:div.interactions-help (tr "workspace.options.select-a-shape")] [:div.interactions-help-icon i/play] [:div.interactions-help (tr "workspace.options.use-play-button")]])] - (for [[index interaction] (d/enumerate interactions)] - [:& interaction-entry {:index index - :shape shape - :interaction interaction - :update-interaction update-interaction - :remove-interaction remove-interaction}])])) + [:div.groups + (for [[index interaction] (d/enumerate interactions)] + [:& interaction-entry {:index index + :shape shape + :interaction interaction + :update-interaction update-interaction + :remove-interaction remove-interaction}])]])) diff --git a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs index a5ec3e378..e041bd773 100644 --- a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs @@ -97,17 +97,15 @@ [:* [:circle {:cx 0 :cy 0 - :r 8 - :stroke stroke - :stroke-width 2 - :fill "#FFFFFF" + :r (if (some? action-type) 8 4) + :fill stroke :transform (str "scale(" inv-zoom ", " inv-zoom ") " "translate(" (* zoom x) ", " (* zoom y) ")")}] (when icon-pdata - [:path {:stroke stroke - :fill "none" - :stroke-width 2 + [:path {:fill stroke + :stroke-width 1 + :stroke "#FFFFFF" :d icon-pdata :transform (str "scale(" inv-zoom ", " inv-zoom ") " @@ -115,7 +113,7 @@ (mf/defc interaction-path - [{:keys [index orig-shape dest-shape dest-point selected? action-type zoom] :as props}] + [{:keys [index level orig-shape dest-shape dest-point selected? action-type zoom] :as props}] (let [[orig-pos orig-x orig-y dest-pos dest-x dest-y] (cond dest-shape @@ -127,7 +125,8 @@ :else (connect-to-point orig-shape {:x (+ (:x2 (:selrect orig-shape)) 100) - :y (- (:y1 (:selrect orig-shape)) 50)})) + :y (+ (- (:y1 (:selrect orig-shape)) 50) + (* level 16))})) orig-dx (if (= orig-pos :right) 100 -100) dest-dx (if (= dest-pos :right) 100 -100) @@ -144,8 +143,7 @@ :pointer-events "visible" :stroke-width (/ 2 zoom) :d pdata}] - (when (and (not dest-shape) - (= action-type :close-overlay)) + (when (not dest-shape) [:& interaction-marker {:index index :x dest-x :y dest-y @@ -237,17 +235,24 @@ draw-interaction-to-frame (:draw-interaction-to-frame local) move-overlay-to (:move-overlay-to local) move-overlay-index (:move-overlay-index local) - first-selected (first selected-shapes)] + first-selected (first selected-shapes) + + calc-level (fn [index interactions] + (->> (subvec interactions 0 index) + (filter #(nil? (:destination %))) + (count)))] [:g.interactions [:g.non-selected (for [shape active-shapes] (for [[index interaction] (d/enumerate (:interactions shape))] (let [dest-shape (get objects (:destination interaction)) - selected? (contains? selected (:id shape))] + selected? (contains? selected (:id shape)) + level (calc-level index (:interactions shape))] (when-not selected? [:& interaction-path {:key (str (:id shape) "-" index) :index index + :level level :orig-shape shape :dest-shape dest-shape :selected selected @@ -269,10 +274,12 @@ (if (seq (:interactions shape)) (for [[index interaction] (d/enumerate (:interactions shape))] (when-not (= index editing-interaction-index) - (let [dest-shape (get objects (:destination interaction))] + (let [dest-shape (get objects (:destination interaction)) + level (calc-level index (:interactions shape))] [:* [:& interaction-path {:key (str (:id shape) "-" index) :index index + :level level :orig-shape shape :dest-shape dest-shape :selected selected