Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-22 22:49:01 -05:00
Code Issues Activity

🐛 Fix color palette animation

Browse source
This commit is contained in:
Eva 2022-02-23 17:13:09 +01:00
parent 07e8d110a2
commit ddae26b48b
5 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -12,6 +12,7 @@
### :bug: Bugs fixed ### :bug: Bugs fixed
- Fix color palette animation [Taiga #2852](https://tree.taiga.io/project/penpot/issue/2852)
- Fix display code icon on preview hover [Taiga #2838](https://tree.taiga.io/project/penpot/us/2838) - Fix display code icon on preview hover [Taiga #2838](https://tree.taiga.io/project/penpot/us/2838)
### :arrow_up: Deps updates ### :arrow_up: Deps updates

2
frontend/resources/styles/common/dependencies/animations.scss
View file

@ -1494,6 +1494,7 @@
opacity: 0; opacity: 0;
-webkit-transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
max-height: 0px;
} }
100% { 100% {
@ -1587,6 +1588,7 @@
opacity: 0; opacity: 0;
-webkit-transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
max-height: 0px;
} }
} }

4
frontend/resources/styles/main/partials/color-palette.scss
View file

@ -5,7 +5,7 @@
// Copyright (c) UXBOX Labs SL // Copyright (c) UXBOX Labs SL
.color-palette { .color-palette {
@include animation(0, 0.5s, fadeInUp); @include animation(0, 0.3s, fadeInUp);
align-items: center; align-items: center;
background-color: $color-gray-50; background-color: $color-gray-50;
border-top: 1px solid $color-gray-60; border-top: 1px solid $color-gray-60;
@ -42,7 +42,7 @@
} }
&.fade-out-down { &.fade-out-down {
@include animation(0, 0.5s, fadeOutDown); @include animation(0, 0.3s, fadeOutDown);
} }
& .context-menu-items { & .context-menu-items {

1
frontend/resources/styles/main/partials/workspace.scss
View file

@ -63,7 +63,6 @@ $height-palette-max: 80px;
.color-palette { .color-palette {
grid-area: color-palette; grid-area: color-palette;
min-height: $height-palette-min;
max-height: $height-palette-max; max-height: $height-palette-max;
height: var(--height, $height-palette); height: var(--height, $height-palette);
} }

11
frontend/src/app/main/ui/workspace/left_toolbar.cljs
View file

@ -19,6 +19,7 @@
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[app.util.object :as obj] [app.util.object :as obj]
[app.util.timers :as ts]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(mf/defc image-upload (mf/defc image-upload
@ -124,8 +125,9 @@
:class (when (contains? layout :textpalette) "selected") :class (when (contains? layout :textpalette) "selected")
:on-click (fn [] :on-click (fn []
(r/set-resize-type! :bottom) (r/set-resize-type! :bottom)
(st/emit! (dw/remove-layout-flags :colorpalette) (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
(dw/toggle-layout-flags :textpalette)))} (ts/schedule 300 #(st/emit! (dw/remove-layout-flags :colorpalette)
(dw/toggle-layout-flags :textpalette))))}
"Ag"] "Ag"]
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
@ -133,6 +135,7 @@
:class (when (contains? layout :colorpalette) "selected") :class (when (contains? layout :colorpalette) "selected")
:on-click (fn [] :on-click (fn []
(r/set-resize-type! :bottom) (r/set-resize-type! :bottom)
(st/emit! (dw/remove-layout-flags :textpalette) (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
(dw/toggle-layout-flags :colorpalette)))} (ts/schedule 300 #(st/emit! (dw/remove-layout-flags :textpalette)
(dw/toggle-layout-flags :colorpalette))))}
i/palette]]]])) i/palette]]]]))