[BUG] Slide animations don't work

umi2002 commented 1 month ago

Checklist before submitting an issue

[X] I have searched through the existing closed and open issues for eww and made sure this is not a duplicate
[X] I have specifically verified that this bug is not a common user error
[X] I am providing as much relevant information as I am able to in this bug report (Minimal config to reproduce the issue for example, if applicable)

Description of the bug

The slide animations for the revealer don't work. The revealer works fine with crossfade and no animation.

Reproducing the issue

In eww.yuck:

(defwindow test
  :monitor 0
  :geometry (geometry :x "0%"
                      :y "20px"
                      :width "90%"
                      :height "30px"
                      :anchor "bottom center")
  :stacking "fg"
  (eventbox
    :orientation "h"
    :halign "center"
    :onhover `${EWW_CMD} update test=true`
    :onhoverlost `${EWW_CMD} update test=false`
    (box
      :orientation "v"
      :halign "center"
      (revealer 
        :orientation "h"
        :reveal test
        :duration "100ms"
        :transition "slideup"
        (label
          :class "test1"
          :text "test1"))
      (label
        :class "test2"
        :text "test2"))))

(defvar test false)

In eww.scss:

* {
  all: unset;
}

@mixin default {
  font-family: "Fira Mono Nerd Font";
  font-size: 18px;
  color: #e0def4;
  background-color: #232136;
  border: 2px solid #569fba;
  border-radius: 10px;
  opacity: 0.9;
}

.test {
  background: rgba(0, 0, 0, 0);
  border: none;
}

.test1 {
  @include default;
}

.test2 {
  @include default;
}

Expected behaviour

The revealer should reveal the child with a slide up animation.

Additional context

OS: Arch Linux x86_64 Kernel: 6.9.3-arch1-1 DE: Hyprland

https://github.com/elkowar/eww/assets/95059040/65cbdaf4-7e2a-46f3-b3bb-c594604a254f

newor0599 commented 3 weeks ago

Here are the requirement for Gtk revealer to work

Orientation of revealer's parent have to be parallel to the animation direction
Root of the revealer ( window, event box, etc) have to have a minimum of 1px padding.

umi2002 commented 3 weeks ago

I modified the config to satisfy those conditions but I get the same results. eww.yuck:

(defwindow test
  :monitor 0
  :geometry (geometry :x "0%"
                      :y "20px"
                      :width "90%"
                      :height "30px"
                      :anchor "bottom center")
  :stacking "fg"
  (eventbox
    :orientation "v"
    :halign "center"
    :onhover `${EWW_CMD} update test=true`
    :onhoverlost `${EWW_CMD} update test=false`
    :class "testeventbox"
    (box
      :orientation "v"
      :halign "center"
      :class "testbox"
      (revealer 
        :orientation "v"
        :reveal test
        :duration "100ms"
        :transition "slideup"
        (label
          :class "test1"
          :text "test1"))
      (label
        :class "test2"
        :text "test2"))))

(defvar test false)

eww.scss:

* {
  all: unset;
}

@mixin default {
  font-family: "Fira Mono Nerd Font";
  font-size: 18px;
  color: #e0def4;
  background-color: #232136;
  border: 2px solid #569fba;
  border-radius: 10px;
  opacity: 0.9;
}

.test {
  background: rgba(0, 0, 0, 0);
  border: none;
  padding: 1px;
}

.testbox {
  padding: 1px;
}

.testeventbox {
  padding: 1px;
}

.test1 {
  @include default;
}

.test2 {
  @include default;
}

newor0599 commented 3 weeks ago

Try putting the label inside a box

umi2002 commented 3 weeks ago

This yields the same results.

      (revealer 
        :orientation "v"
        :reveal test
        :duration "100ms"
        :transition "slideup"
        (box
          (label
            :class "test1"
            :text "test1")))

newor0599 commented 3 weeks ago

You might want to consider reading Issue#196

elkowar / eww