From: Gabriel Goller <g.goller@proxmox.com>
To: Thomas Lamprecht <t.lamprecht@proxmox.com>,
Dominik Csapak <d.csapak@proxmox.com>,
Proxmox Backup Server development discussion
<pbs-devel@lists.proxmox.com>
Subject: Re: [pbs-devel] [PATCH proxmox-backup] fix: ui: spinner position
Date: Mon, 16 Oct 2023 14:41:31 +0200 [thread overview]
Message-ID: <03a29c9e-9048-40ee-afd2-cca558bfd520@proxmox.com> (raw)
In-Reply-To: <907a68a9-5a68-4631-9a70-b13e570e3cf8@proxmox.com>
[-- Attachment #1: Type: text/plain, Size: 1673 bytes --]
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!
[-- Attachment #2: Type: text/html, Size: 2464 bytes --]
next prev parent reply other threads:[~2023-10-16 12:41 UTC|newest]
Thread overview: 13+ messages / expand[flat|nested] mbox.gz Atom feed top
2023-09-13 14:20 Gabriel Goller
2023-10-11 11:06 ` Gabriel Goller
2023-10-12 9:28 ` Dominik Csapak
2023-10-12 11:49 ` Gabriel Goller
2023-10-12 12:34 ` Dominik Csapak
2023-10-12 12:40 ` Gabriel Goller
2023-10-13 12:38 ` Thomas Lamprecht
2023-10-13 13:04 ` Dominik Csapak
2023-10-16 9:51 ` Gabriel Goller
2023-10-16 10:04 ` Thomas Lamprecht
2023-10-16 11:57 ` Gabriel Goller
2023-10-16 12:41 ` Gabriel Goller [this message]
2023-10-18 10:09 ` Gabriel Goller
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=03a29c9e-9048-40ee-afd2-cca558bfd520@proxmox.com \
--to=g.goller@proxmox.com \
--cc=d.csapak@proxmox.com \
--cc=pbs-devel@lists.proxmox.com \
--cc=t.lamprecht@proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox