<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p>On 10/16/23 13:57, Gabriel Goller wrote:</p>
<blockquote type="cite"
cite="mid:907a68a9-5a68-4631-9a70-b13e570e3cf8@proxmox.com">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
[..]<br>
Ok, so I think I'll move the current `x-grid-row-loading` class to
the<br>
`proxmox-widget-toolkit/src/css/ext-6-pmx.css` file and create a
new<br>
class `x-grid-row-loading-left` (with the 10px margin left). I'll
also<br>
have to edit the `proxmox-dark/*.scss` files so that the logo is
shown<br>
correctly in the darkmode. To add the text I would simply return a
`<span>`<br>
tag with a margin left of 20px (more or less, to make place for
the icon)<br>
and have the translated text as a content.<br>
<p>Returning the icon directly as a `<img>` tag isn't that
simple, I'd had to<br>
attach the whole styling + the conditional dark mode stuff.<br>
<br>
LMK what you think!<br>
</p>
<span style="white-space: pre-wrap">
</span></blockquote>
Nevermind, turns out the `background-color: invert(...)` stuff also
inverts the<br>
gif in the `<img>` tag!<br>
So I could do something like this (e.g., for the rendering of the
job status, but it <br>
works the same way everywhere we use the loading-spinner):<br>
<br>
```<br>
if (!record.data['last-run-endtime']) {<br>
metadata.tdCls = 'x-grid-row-loading-left';<br>
return `<img
src="../extjs/theme-crisp/resources/images/loadmask/loading.gif"/>${gettext('Running')}`;<br>
}<br>
```<br>
Then in the `proxmox-widget-toolkit/src/css/ext-6-pmx.css` we add
the `x-grid-row-loading-left`<br>
class: <br>
```<br>
.x-grid-row-loading-left {<br>
text-align: left;<br>
display: flex;<br>
gap: 10px;<br>
}<br>
```<br>
Then obviously add the `x-grid-row-loading-left` class to the
`proxmox-dark/*.scss`<br>
overrides for the dark mode.<br>
<br>
Like this we only have to change the job-running spinners to return
the `<img>` and <br>
`<span>` elements (with the translation), and the other
spinners don't have to be changed!<br>
</body>
</html>