[pbs-devel] [PATCH proxmox-backup] fix: ui: spinner position

[Gabriel Goller]

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!
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.proxmox.com/pipermail/pbs-devel/attachments/20231016/d672d868/attachment.htm>