On 10/16/23 13:57, Gabriel Goller wrote:

[..]
Ok, so I think I'll move the current `x-grid-row-loading` class to the
`proxmox-widget-toolkit/src/css/ext-6-pmx.css` file and create a new
class `x-grid-row-loading-left` (with the 10px margin left). I'll also
have to edit the `proxmox-dark/*.scss` files so that the logo is shown
correctly in the darkmode. To add the text I would simply return a `<span>`
tag with a margin left of 20px (more or less, to make place for the icon)
and have the translated text as a content.

Returning the icon directly as a `<img>` tag isn't that simple, I'd had to
attach the whole styling + the conditional dark mode stuff.

LMK what you think!

Nevermind, turns out the `background-color: invert(...)` stuff also inverts the
gif in the `<img>` tag!
So I could do something like this (e.g., for the rendering of the job status, but it
works the same way everywhere we use the loading-spinner):

```
if (!record.data['last-run-endtime']) {
    metadata.tdCls = 'x-grid-row-loading-left';
    return `<img src="../extjs/theme-crisp/resources/images/loadmask/loading.gif"/>${gettext('Running')}`;
}
```
Then in the `proxmox-widget-toolkit/src/css/ext-6-pmx.css` we add the `x-grid-row-loading-left`
class:
```
.x-grid-row-loading-left {
    text-align: left;
    display: flex;
    gap: 10px;
}
```
Then obviously add the `x-grid-row-loading-left` class to the `proxmox-dark/*.scss`
overrides for the dark mode.

Like this we only have to change the job-running spinners to return the `<img>` and
`<span>` elements (with the translation), and the other spinners don't have to be changed!