Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 08:50:57 -05:00
Code Issues 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
Show stats 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 {
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 {

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

@ -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;

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

@ -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}])]]))

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

@ -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