From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <g.goller@proxmox.com>
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 <pbs-devel@lists.proxmox.com>; 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 <pbs-devel@lists.proxmox.com>; 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 <pbs-devel@lists.proxmox.com>; 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 <pbs-devel@lists.proxmox.com>; 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 <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>
Reply-To: Proxmox Backup Server development discussion
<pbs-devel@lists.proxmox.com>
References: <20230913142045.240835-1-g.goller@proxmox.com>
<bc2a187c-aa42-4fa8-967f-02b15ac23097@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
<pbs-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pbs-devel>,
<mailto:pbs-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pbs-devel/>
List-Post: <mailto:pbs-devel@lists.proxmox.com>
List-Help: <mailto:pbs-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel>,
<mailto:pbs-devel-request@lists.proxmox.com?subject=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
> `<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
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: 8bit
<!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>
--------------PFsoP7ExQX5sAf2lkeIPpzWH--