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

🐛 Display animations only for allowed actions

Browse source
This commit is contained in:
Andrés Moya 2022-01-21 12:04:23 +01:00 • committed by Andrey Antukh
parent 7385445aa8
commit b4c23f3554
1 changed files with 86 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -433,95 +433,97 @@
[:label {:for (str "background-" index)} [:label {:for (str "background-" index)}
(tr "workspace.options.interaction-background")]]]]) (tr "workspace.options.interaction-background")]]]])
; Animation select (when (cti/has-animation? interaction)
[:div.interactions-element.separator [:*
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-animation")] ; Animation select
[:select.input-select [:div.interactions-element.separator
{:value (str (-> interaction :animation :animation-type)) [:span.element-set-subtitle.wide (tr "workspace.options.interaction-animation")]
:on-change change-animation-type} [:select.input-select
[:option {:value ""} (tr "workspace.options.interaction-animation-none")] {:value (str (-> interaction :animation :animation-type))
(for [[value name] (animation-type-names interaction)] :on-change change-animation-type}
[:option {:value (str value)} name])]] [:option {:value ""} (tr "workspace.options.interaction-animation-none")]
(for [[value name] (animation-type-names interaction)]
[:option {:value (str value)} name])]]
; Direction ; Direction
(when (cti/has-way? interaction) (when (cti/has-way? interaction)
[:div.interactions-element.interactions-way-buttons [:div.interactions-element.interactions-way-buttons
[:div.input-radio [:div.input-radio
[:input {:type "radio" [:input {:type "radio"
:id "way-in" :id "way-in"
:checked (= :in way) :checked (= :in way)
:name "animation-way" :name "animation-way"
:value ":in" :value ":in"
:on-change change-way}] :on-change change-way}]
[:label {:for "way-in"} (tr "workspace.options.interaction-in")]] [:label {:for "way-in"} (tr "workspace.options.interaction-in")]]
[:div.input-radio [:div.input-radio
[:input {:type "radio" [:input {:type "radio"
:id "way-out" :id "way-out"
:checked (= :out way) :checked (= :out way)
:name "animation-way" :name "animation-way"
:value ":out" :value ":out"
:on-change change-way}] :on-change change-way}]
[:label {:for "way-out"} (tr "workspace.options.interaction-out")]]]) [:label {:for "way-out"} (tr "workspace.options.interaction-out")]]])
; Direction ; Direction
(when (cti/has-direction? interaction) (when (cti/has-direction? interaction)
[:div.interactions-element.interactions-direction-buttons [:div.interactions-element.interactions-direction-buttons
[:div.element-set-actions-button [:div.element-set-actions-button
{:class (dom/classnames :active (= direction :right)) {:class (dom/classnames :active (= direction :right))
:on-click #(change-direction :right)} :on-click #(change-direction :right)}
i/animate-right] i/animate-right]
[:div.element-set-actions-button [:div.element-set-actions-button
{:class (dom/classnames :active (= direction :down)) {:class (dom/classnames :active (= direction :down))
:on-click #(change-direction :down)} :on-click #(change-direction :down)}
i/animate-down] i/animate-down]
[:div.element-set-actions-button [:div.element-set-actions-button
{:class (dom/classnames :active (= direction :left)) {:class (dom/classnames :active (= direction :left))
:on-click #(change-direction :left)} :on-click #(change-direction :left)}
i/animate-left] i/animate-left]
[:div.element-set-actions-button [:div.element-set-actions-button
{:class (dom/classnames :active (= direction :up)) {:class (dom/classnames :active (= direction :up))
:on-click #(change-direction :up)} :on-click #(change-direction :up)}
i/animate-up]]) i/animate-up]])
; Duration ; Duration
(when (cti/has-duration? interaction) (when (cti/has-duration? interaction)
[:div.interactions-element [:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-duration")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-duration")]
[:div.input-element {:title (tr "workspace.options.interaction-ms")} [:div.input-element {:title (tr "workspace.options.interaction-ms")}
[:> numeric-input {:ref ext-duration-ref [:> numeric-input {:ref ext-duration-ref
:on-click (select-text ext-duration-ref) :on-click (select-text ext-duration-ref)
:on-change change-duration :on-change change-duration
:value (-> interaction :animation :duration) :value (-> interaction :animation :duration)
:title (tr "workspace.options.interaction-ms")}] :title (tr "workspace.options.interaction-ms")}]
[:span.after (tr "workspace.options.interaction-ms")]]]) [:span.after (tr "workspace.options.interaction-ms")]]])
; Easing ; Easing
(when (cti/has-easing? interaction) (when (cti/has-easing? interaction)
[:div.interactions-element [:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-easing")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-easing")]
[:select.input-select [:select.input-select
{:value (str (-> interaction :animation :easing)) {:value (str (-> interaction :animation :easing))
:on-change change-easing} :on-change change-easing}
(for [[value name] (easing-names)] (for [[value name] (easing-names)]
[:option {:value (str value)} name])] [:option {:value (str value)} name])]
[:div.interactions-easing-icon [:div.interactions-easing-icon
(case (-> interaction :animation :easing) (case (-> interaction :animation :easing)
:linear i/easing-linear :linear i/easing-linear
:ease i/easing-ease :ease i/easing-ease
:ease-in i/easing-ease-in :ease-in i/easing-ease-in
:ease-out i/easing-ease-out :ease-out i/easing-ease-out
:ease-in-out i/easing-ease-in-out)]]) :ease-in-out i/easing-ease-in-out)]])
; Offset effect ; Offset effect
(when (cti/has-offset-effect? interaction) (when (cti/has-offset-effect? interaction)
[:div.interactions-element [:div.interactions-element
[:div.input-checkbox [:div.input-checkbox
[:input {:type "checkbox" [:input {:type "checkbox"
:id (str "offset-effect-" index) :id (str "offset-effect-" index)
:checked (-> interaction :animation :offset-effect) :checked (-> interaction :animation :offset-effect)
:on-change change-offset-effect}] :on-change change-offset-effect}]
[:label {:for (str "offset-effect-" index)} [:label {:for (str "offset-effect-" index)}
(tr "workspace.options.interaction-offset-effect")]]])])]])) (tr "workspace.options.interaction-offset-effect")]]])])])]]))
(mf/defc interactions-menu (mf/defc interactions-menu
[{:keys [shape] :as props}] [{:keys [shape] :as props}]