jarek-foksa/xel

"decrement-arrow" has wrong rotation

Opened this issue · 7 comments

Hi

First of all, thank you very much for providing such a nice widget library!

Now the small issue: the "decrement-arrow" has an the wrong rotation in the following css-files:
adwaita.css
adwaita-dark.css
cupertino.css

I fixed it by simply removing the unnecessary "rotate"-command in the css.
It would be nice if you could include this fix in your main branch and upcoming releases.

Regards,
Stefan

In case of adwaita.css and adwaita-dark.css the transform is redundant since the arrow icon is the "-" (minus) sign. But I'm not sure what's wrong with cupertino.css, the transform (180deg rotation) seems correct.

Hmm, the strange thing is, I'm not geting +/- as signs. My signs are ^/v (up and down). On your website, I also see the +/- signs...
No idea why this is happening. I just used the latest version today - the change log is 0.25.11 (2024-04-01).

Are you sure you are loading the themes correctly? My guess is that you have both Adwaita and Cupertino themes loaded simultaneously or you placed the widget inside a shadow root without adoptedStyleSheets.

I'm pretty sure I use Xel the correct way, the only references are in my index.html with the following usages:
xel.js
adwaita.css

I'm using it in an Electron app with the following packages on a M2 Mac:
├── @electron-forge/cli@7.4.0
├── @electron-forge/maker-deb@7.4.0
├── @electron-forge/maker-rpm@7.4.0
├── @electron-forge/maker-squirrel@7.4.0
├── @electron-forge/maker-zip@7.4.0
├── @electron-forge/plugin-auto-unpack-natives@7.4.0
├── @electron-forge/plugin-fuses@7.4.0
├── @electron/fuses@1.8.0
├── electron-reload@2.0.0-alpha.1
├── electron-reloader@1.2.3
├── electron-squirrel-startup@1.0.0
├── electron@30.0.1
└── xel@0.25.11

I still can't reproduce this issue. Could you please attach your index.html file? Also, what is your web browser name and version?

Here you go:

index.html.zip

The result looks like this (after the rotation fix):
Screenshot 2024-04-29 at 18 14 28

The following libraries are used:

  • Chromium 124.0.6367.60
  • Node.js 20.11.1
  • Electron 30.0.1

The HTML file looks fine, I guess it is a problem with the tooling that you use to generate the Electron app bundle.