Skip to content

Commit

Permalink
Use SVG attributes for fill colors instead of CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@leplatrem
leplatrem committed Feb 25, 2020
1 parent 7afcc9d commit 27f9d71
Showing 1 changed file with 1 addition and 4 deletions.
5 changes: 1 addition & 4 deletions poucave/html/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,12 +315,9 @@ class SystemDiagram extends Component {
}

indicator.removeAttribute("fill");
indicator.classList.remove("fill-gray", "fill-red", "fill-green");
let fillClass = "fill-gray"
if (!r.isLoading) {
fillClass = r.success ? "fill-green" : "fill-red";
indicator.setAttribute("fill", r.success ? "green" : "red");
}
indicator.classList.add(fillClass);
}
});
}
Expand Down

4 comments on commit 27f9d71

@rehandalal
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should probably be reverted when we put in the new SVG

@leplatrem
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should probably be reverted when we put in the new SVG

Oh, the classes are defined inside the SVG?

@rehandalal
Copy link
Contributor

@rehandalal rehandalal commented on 27f9d71 Feb 26, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, the classes are defined inside the SVG?

Yeah I have a plan to inject that CSS but it allows us to do things like have the SVG adapt to light/dark mode and add little things like animations

@leplatrem
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could open the .drawio file, but apparently all objects IDs etc. weren't set.

What I did with the current SVG is this:

  • have a bottom layer with the drawing
  • have a top layer with the dots, with proper IDs, edited with Inkscape

When editing the diagram, I do this:

Please sign in to comment.