elkowar / eww

ElKowars wacky widgets
https://elkowar.github.io/eww
MIT License
9.3k stars 382 forks source link

I can't get the eww scale works properly #762

Closed imindMan closed 1 year ago

imindMan commented 1 year ago

Here's my volume "test" widget, the only problem is that I can't get the scale widget working.

(defwidget volume [] 
  (eventbox :orientation "h" :space-evenly false
            :onhover "${eww} update vol_rev=true"
            :onhoverlost "${eww} update vol_rev=false"
  (box :orientation "h" :space-evenly false :spacing 10
      (button "a")
    (revealer :transition "slideleft" 
              :reveal vol_rev 
              :duration "350ms"
     (scale :value 100
            :min 0
            :max 101
            :timeout "200ms"
            :onchange "amixer set Master {}%"
            :orientation "h"
            ))

    )
  )
)
SpomJ commented 1 year ago

what exactly can't you do? is the slider not appearing? please give more details.

I noticed you don't have a :width specified and the parent box has space-evenly=false. Try defining width and reloading. Hope this helps!

imindMan commented 1 year ago

what exactly can't you do? is the slider not appearing? please give more details.

I noticed you don't have a :width specified and the parent box has space-evenly=false. Try defining width and reloading. Hope this helps!

Yea, the slider not appearing. I'll try it out.

imindMan commented 1 year ago

So basically It didn't show up the slider, it just shows the empty spot.

elkowar commented 1 year ago

With scale, generally there's some weird CSS quirks -- do check the eww inspector for the CSS structure and any styling that might be missing. Feel free to re-open if you notice any actual concrete bugs.

baracunatana commented 9 months ago

This is the scss bit that solved the same issue for me:

* {
  all: unset; 
}

trough highlight {
  background-image: linear-gradient(to right, #8FBCBB 30%, #88C0D0 50%, #81A1C1 100% *50);
  border-radius: 4px;
}

scale trough {
  all: unset;
  background-color: #2E3440;
  box-shadow: 0 1px 2px 1px #06060b;
  border-radius: 9px;
  min-height: 8px;
  min-width: 70px;
  margin: 0px 10px 0px 5px;
}

slider{
  border-radius: 10px;
  background-color: #D8DEE9;
  margin: -7px -7px -7px -7px;
}