From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 76ED29AEB9 for ; Mon, 16 Oct 2023 14:41:33 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 566E717DA5 for ; Mon, 16 Oct 2023 14:41:33 +0200 (CEST) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS for ; Mon, 16 Oct 2023 14:41:32 +0200 (CEST) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 241414165F for ; Mon, 16 Oct 2023 14:41:32 +0200 (CEST) Content-Type: multipart/alternative; boundary="------------PFsoP7ExQX5sAf2lkeIPpzWH" Message-ID: <03a29c9e-9048-40ee-afd2-cca558bfd520@proxmox.com> Date: Mon, 16 Oct 2023 14:41:31 +0200 MIME-Version: 1.0 User-Agent: Mozilla Thunderbird Content-Language: en-US From: Gabriel Goller To: Thomas Lamprecht , Dominik Csapak , Proxmox Backup Server development discussion Reply-To: Proxmox Backup Server development discussion References: <20230913142045.240835-1-g.goller@proxmox.com> <9912014b-0ad8-4cf8-9ce7-8b46a553b55b@proxmox.com> <83b3341d-9b14-4c0d-9265-65fb9d95dcfe@proxmox.com> <92df7c1a-2691-4971-93a8-22bc9d260ed8@proxmox.com> <87356f09-673e-4ae8-ba0a-9cedc30e5572@proxmox.com> <5f00418c-adfe-4e4a-8f5c-8e0b80e1ff1c@proxmox.com> <1d8ff790-3e6c-435d-a58d-5a7ab32245fb@proxmox.com> <907a68a9-5a68-4631-9a70-b13e570e3cf8@proxmox.com> In-Reply-To: <907a68a9-5a68-4631-9a70-b13e570e3cf8@proxmox.com> X-SPAM-LEVEL: Spam detection results: 0 AWL -0.327 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy HTML_MESSAGE 0.001 HTML included in message KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: Re: [pbs-devel] [PATCH proxmox-backup] fix: ui: spinner position X-BeenThere: pbs-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Backup Server development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Mon, 16 Oct 2023 12:41:33 -0000 This is a multi-part message in MIME format. --------------PFsoP7ExQX5sAf2lkeIPpzWH Content-Type: text/plain; charset=UTF-8; format=flowed Content-Transfer-Encoding: 8bit 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 > `` > 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 `` 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 `` 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 `${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 `` and `` elements (with the translation), and the other spinners don't have to be changed! --------------PFsoP7ExQX5sAf2lkeIPpzWH Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: 8bit

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!
--------------PFsoP7ExQX5sAf2lkeIPpzWH--