3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-06 18:11:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Make some design adjustments

Browse source
This commit is contained in:
Andrés Moya 2021-09-21 15:48:05 +02:00
parent bbdf1152c1
commit f8d09917a5
4 changed files with 98 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -908,12 +908,31 @@
&.selected { &.selected {
border: 1px solid $color-primary; 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, .exports-options,
.shadow-options{ .shadow-options {
.element-set-options-group { .element-set-options-group {
justify-content: space-between;
.delete-icon { .delete-icon {
display: flex; display: flex;
min-width: 40px; min-width: 40px;
@ -927,10 +946,6 @@
fill: $color-gray-20; fill: $color-gray-20;
} }
} }
&:not(:first-child) {
margin-top: 7px;
}
} }
.download-button { .download-button {

28
frontend/resources/styles/main/partials/sidebar-interactions.scss
View file

@ -7,8 +7,14 @@
.interactions-help { .interactions-help {
font-size: $fs12; font-size: $fs12;
margin: 0 $medium; padding: 7px $medium;
margin: 0 -7px;
text-align: center; text-align: center;
&.separator {
padding-bottom: $medium;
border-bottom: 1px solid $color-black;
}
} }
.interactions-help-icon { .interactions-help-icon {
@ -24,7 +30,9 @@
} }
.interactions-summary { .interactions-summary {
width: 100%; cursor: pointer;
flex-basis: 0;
flex-grow: 1;
.trigger-name { .trigger-name {
font-size: $fs12; font-size: $fs12;
@ -40,17 +48,31 @@
.interactions-element { .interactions-element {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0 -7px;
padding: 0 7px;
.element-label { .element-label {
color: $color-gray-20; color: $color-gray-20;
font-size: $fs11; font-size: $fs11;
width: 64px; width: 64px;
} }
&.separator {
border-top: 1px solid $color-black;
margin-top: $x-small;
}
} }
.interactions-pos-buttons { .interactions-pos-buttons {
margin-top: $small; 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 { svg {
width: 18px; width: 18px;

61
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

@ -65,8 +65,8 @@
action-type (:action-type interaction) action-type (:action-type interaction)
overlay-pos-type (:overlay-pos-type interaction) overlay-pos-type (:overlay-pos-type interaction)
close-click-outside? (:close-click-outside interaction) close-click-outside? (:close-click-outside interaction false)
background-overlay? (:background-overlay interaction) background-overlay? (:background-overlay interaction false)
extended-open? (mf/use-state false) extended-open? (mf/use-state false)
@ -106,31 +106,31 @@
(update-interaction index #(cti/set-background-overlay % value))))] (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)} [:div.element-set-actions-button {:on-click #(swap! extended-open? not)}
i/actions] i/actions]
[:div.interactions-summary [:div.interactions-summary {:on-click #(swap! extended-open? not)}
[:div.trigger-name (event-type-name interaction)] [:div.trigger-name (event-type-name interaction)]
[:div.action-summary (action-summary interaction destination)]] [:div.action-summary (action-summary interaction destination)]]
[:div.elemen-set-actions {:on-click #(remove-interaction index)} [:div.elemen-set-actions {:on-click #(remove-interaction index)}
[:div.element-set-actions-button i/minus]]] [:div.element-set-actions-button i/minus]]
(when @extended-open? (when @extended-open?
[:div.element-set
[:div.element-set-content [:div.element-set-content
[:div.interactions-element [:div.interactions-element.separator
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-trigger")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-trigger")]
[:select.input-select [:select.input-select
{:value (str (:event-type interaction)) {:value (str (:event-type interaction))
:on-change change-event-type} :on-change change-event-type}
(for [[value name] (event-type-names)] (for [[value name] (event-type-names)]
[:option {:value (str value)} name])]] [:option {:value (str value)} name])]]
[:div.interactions-element [:div.interactions-element.separator
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-action")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-action")]
[:select.input-select [:select.input-select
{:value (str (:action-type interaction)) {:value (str (:action-type interaction))
:on-change change-action-type} :on-change change-action-type}
(for [[value name] (action-type-names)] (for [[value name] (action-type-names)]
[:option {:value (str value)} name])]] [:option {:value (str value)} name])]]
(when (#{:navigate :open-overlay :close-overlay} action-type) (when (#{:navigate :open-overlay :close-overlay} action-type)
[:div.interactions-element [:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-destination")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-destination")]
@ -195,7 +195,7 @@
:checked background-overlay? :checked background-overlay?
:on-change change-background-overlay}] :on-change change-background-overlay}]
[:label {:for (str "background-" index)} [:label {:for (str "background-" index)}
(tr "workspace.options.interaction-background")]]]])]])])) (tr "workspace.options.interaction-background")]]]])])]]))
(mf/defc interactions-menu (mf/defc interactions-menu
[{:keys [shape] :as props}] [{:keys [shape] :as props}]
@ -218,7 +218,7 @@
(let [new-interactions (update interactions index update-fn)] (let [new-interactions (update interactions index update-fn)]
(st/emit! (dw/update-shape (:id shape) {:interactions new-interactions})))) ] (st/emit! (dw/update-shape (:id shape) {:interactions new-interactions})))) ]
[:div.element-set [:div.element-set.interactions-options
(when shape (when shape
[:div.element-set-title [:div.element-set-title
[:span (tr "workspace.options.interactions")] [:span (tr "workspace.options.interactions")]
@ -231,15 +231,16 @@
(when shape (when shape
[:* [:*
[:div.interactions-help-icon i/plus] [: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-icon i/interaction]
[:div.interactions-help (tr "workspace.options.select-a-shape")] [:div.interactions-help (tr "workspace.options.select-a-shape")]
[:div.interactions-help-icon i/play] [:div.interactions-help-icon i/play]
[:div.interactions-help (tr "workspace.options.use-play-button")]])] [:div.interactions-help (tr "workspace.options.use-play-button")]])]
(for [[index interaction] (d/enumerate interactions)] [:div.groups
[:& interaction-entry {:index index (for [[index interaction] (d/enumerate interactions)]
:shape shape [:& interaction-entry {:index index
:interaction interaction :shape shape
:update-interaction update-interaction :interaction interaction
:remove-interaction remove-interaction}])])) :update-interaction update-interaction
:remove-interaction remove-interaction}])]]))

35
frontend/src/app/main/ui/workspace/viewport/interactions.cljs
View file

@ -97,17 +97,15 @@
[:* [:*
[:circle {:cx 0 [:circle {:cx 0
:cy 0 :cy 0
:r 8 :r (if (some? action-type) 8 4)
:stroke stroke :fill stroke
:stroke-width 2
:fill "#FFFFFF"
:transform (str :transform (str
"scale(" inv-zoom ", " inv-zoom ") " "scale(" inv-zoom ", " inv-zoom ") "
"translate(" (* zoom x) ", " (* zoom y) ")")}] "translate(" (* zoom x) ", " (* zoom y) ")")}]
(when icon-pdata (when icon-pdata
[:path {:stroke stroke [:path {:fill stroke
:fill "none" :stroke-width 1
:stroke-width 2 :stroke "#FFFFFF"
:d icon-pdata :d icon-pdata
:transform (str :transform (str
"scale(" inv-zoom ", " inv-zoom ") " "scale(" inv-zoom ", " inv-zoom ") "
@ -115,7 +113,7 @@
(mf/defc interaction-path (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] (let [[orig-pos orig-x orig-y dest-pos dest-x dest-y]
(cond (cond
dest-shape dest-shape
@ -127,7 +125,8 @@
:else :else
(connect-to-point orig-shape (connect-to-point orig-shape
{:x (+ (:x2 (:selrect orig-shape)) 100) {: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) orig-dx (if (= orig-pos :right) 100 -100)
dest-dx (if (= dest-pos :right) 100 -100) dest-dx (if (= dest-pos :right) 100 -100)
@ -144,8 +143,7 @@
:pointer-events "visible" :pointer-events "visible"
:stroke-width (/ 2 zoom) :stroke-width (/ 2 zoom)
:d pdata}] :d pdata}]
(when (and (not dest-shape) (when (not dest-shape)
(= action-type :close-overlay))
[:& interaction-marker {:index index [:& interaction-marker {:index index
:x dest-x :x dest-x
:y dest-y :y dest-y
@ -237,17 +235,24 @@
draw-interaction-to-frame (:draw-interaction-to-frame local) draw-interaction-to-frame (:draw-interaction-to-frame local)
move-overlay-to (:move-overlay-to local) move-overlay-to (:move-overlay-to local)
move-overlay-index (:move-overlay-index 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.interactions
[:g.non-selected [:g.non-selected
(for [shape active-shapes] (for [shape active-shapes]
(for [[index interaction] (d/enumerate (:interactions shape))] (for [[index interaction] (d/enumerate (:interactions shape))]
(let [dest-shape (get objects (:destination interaction)) (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? (when-not selected?
[:& interaction-path {:key (str (:id shape) "-" index) [:& interaction-path {:key (str (:id shape) "-" index)
:index index :index index
:level level
:orig-shape shape :orig-shape shape
:dest-shape dest-shape :dest-shape dest-shape
:selected selected :selected selected
@ -269,10 +274,12 @@
(if (seq (:interactions shape)) (if (seq (:interactions shape))
(for [[index interaction] (d/enumerate (:interactions shape))] (for [[index interaction] (d/enumerate (:interactions shape))]
(when-not (= index editing-interaction-index) (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) [:& interaction-path {:key (str (:id shape) "-" index)
:index index :index index
:level level
:orig-shape shape :orig-shape shape
:dest-shape dest-shape :dest-shape dest-shape
:selected selected :selected selected