Aylur / dotfiles

My personal config files
Other
2.59k stars 135 forks source link

[Question] How to use HoverRevealer #127

Closed Balssh closed 10 months ago

Balssh commented 10 months ago

Hi again, I've been wanting to add a weather widget to a fork of this dots, but I struggle with the HoverRevealer component. The code I have now is something like this:

const WeatherRevealer = () =>
  PanelButton({
    class_name: "weather",
    content: Widget.Box({
      children: [
        HoverRevealer({
          indicator: Widget.Label({
            binds: [["label", WeatherService, "icon"]],
          }),
          child: Widget.Box({
            children: [
              Widget.Label({
                binds: [["label", WeatherService, "temp"]],
              }),
              Widget.Label({
                binds: [["label", WeatherService, "description"]],
              }),
              Widget.Label({
                binds: [["label", WeatherService, "city"]],
              }),
            ],
          }),
          connections: [
            [
              2000,
              (self) => {
                self.reveal_child = !self.reveal_child;
              },
            ],
          ],
        }),
      ],
    }),
  });

No matter how I tried I couldn't get the hover to expand on mouse hover over it, yet the connection callback works as expected. Am I missing something?

Balssh commented 10 months ago

Figured it out eventually. The way it works is:

const WeatherRevealer = () =>
  PanelButton({
    class_name: "weather",
    content: Widget.Box({
      children: [
        Widget.Box().hook(WeatherService, (box) => {
          box.children = [
            HoverRevealer({
              indicator: Widget.Label({
                binds: [["label", WeatherService, "city"]],
              }),
              child: Widget.Label({
                binds: [
                  [
                    "label",
                    WeatherService,
                    "weather_data",
                    (data) => data.current_condition[0].FeelsLikeC + "°C",
                  ],
                ],
              }),
            }),
          ];
        }),
      ],
    }),
  });