From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id 1CD171FF142 for ; Tue, 05 May 2026 09:32:10 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 72F2517E44; Tue, 5 May 2026 09:32:09 +0200 (CEST) From: Dominik Csapak To: pdm-devel@lists.proxmox.com Subject: [PATCH yew-widget-toolkit-assets v2 1/1] charts: add necessary classes for Map Date: Tue, 5 May 2026 09:31:55 +0200 Message-ID: <20260505073203.398548-5-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20260505073203.398548-1-d.csapak@proxmox.com> References: <20260505073203.398548-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.050 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 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 Message-ID-Hash: Y4Q2NATLZ4FWCEE42SA2KWM4LLC6KMAC X-Message-ID-Hash: Y4Q2NATLZ4FWCEE42SA2KWM4LLC6KMAC X-MailFrom: d.csapak@proxmox.com X-Mailman-Rule-Misses: dmarc-mitigation; no-senders; approved; loop; banned-address; emergency; member-moderation; nonmember-moderation; administrivia; implicit-dest; max-recipients; max-size; news-moderation; no-subject; digests; suspicious-header X-Mailman-Version: 3.3.10 Precedence: list List-Id: Proxmox Datacenter Manager development discussion List-Help: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: these classes are used by the new Map widget. The map contains several widget that need some styling: * map info: we need to set the z-index and reset transition in case this is set somewhere. * the map itself: needs to disable touch actions and set it's width and height to 100% * the map-location: is a circle with a color specified via the 'pwt-location-color' variable (so it's easier to set in a nested element) * the interaction-panel: is placed on the top right * the location-pulse: a small animation that represents loading and highlights a selected element. Signed-off-by: Dominik Csapak --- scss/_charts.scss | 63 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/scss/_charts.scss b/scss/_charts.scss index 0f5e87e..ad51b0e 100644 --- a/scss/_charts.scss +++ b/scss/_charts.scss @@ -12,3 +12,66 @@ .pwt-legend-color { color: var(--pwt-legend-color) } + +/// Class `pwt-map-info` +/// +/// This is used for the info panel when a point is clicked on a map +.pwt-map-info { + transition: 0s; + z-index: 100; +} + +/// Class `pwt-map` +/// +/// This is used for the base SVG element of the map +.pwt-map { + width: 100%; + height: 100%; + touch-action: none; + display: block; +} + +/// Class `pwt-location` +/// +/// This is used for a location displayed on a `Map` +/// It uses the `--pwt-location-color` so it can be easily +/// overwritten via css.' +.pwt-map-location { + --pwt-location-color: var(--pwt-color-primary); + cursor: pointer; + + & > circle { + fill: color-mix(in lab, var(--pwt-location-color), transparent 80%); + stroke: var(--pwt-location-color); + stroke-width: 2px; + r: calc(var(--pwt-location-radius) - 2px); + vector-effect: non-scaling-stroke; + } +} + +/// Class `pwt-map-interaction-panel` +/// +/// Is used for positioning the panel containing the interactive elements of +/// a map +.pwt-map-interaction-panel { + position: absolute; + inset: var(--pwt-spacer-2) var(--pwt-spacer-2) auto auto; +} + +/// Class `pwt-location-animated` +/// +/// This is used for animating a selected Location +.pwt-map-location-animated { + animation: pwt-location-pulse 1.2s infinite; +} + +@keyframes pwt-location-pulse { + from { + r: var(--pwt-location-radius); + opacity:100%; + } + to { + r: calc(var(--pwt-location-radius) * 1.5); + opacity:0%; + } +} -- 2.47.3