settings: move hero to qml-common

2026-10-10 13:27:21 -04:00 · 2026-10-09 16:20:59 -04:00
parent f988a57494
commit d0f9954361
4 changed files with 5 additions and 104 deletions
@@ -116,11 +116,6 @@ Item {

    SettingsPage {
        SettingsHeroCard {
-            Item {
-                width: parent.width
-                height: Theme.spacingS
-            }
-
            DButton {
                anchors.horizontalCenter: parent.horizontalCenter
                text: I18n.tr("Support DMS", "about page hero button, opens the Ko-fi donation page")
@@ -1,85 +1,15 @@
 import QtQuick
-import QtQuick.Effects
-import Quickshell.Widgets
 import qs.Common
 import qs.Services
 import qs.DCommon.Widgets

-DCard {
-    id: root
-
-    property string brand: "DMS"
-    property string accent: {
+DHeroCard {
+    brand: "DMS"
+    accent: {
        const semver = ShellVersionService.semverVersion.replace(/^v/, "");
        const base = semver.match(/^\d+\.\d+/);
        return base ? base[0] : semver || SystemUpdateService.shellRunning.replace(/^v/, "");
    }
-    property string caption: ShellVersionService.shellCodename.toUpperCase()
-    default property alias extra: heroColumn.data
-
-    width: parent?.width ?? 0
-    height: heroColumn.implicitHeight + SettingsMetrics.pagePaddingV * 2
-    restRadius: Theme.groupedListOuterRadius
+    caption: ShellVersionService.shellCodename.toUpperCase()
    color: SettingsMetrics.rowColor
-    pad: 0
-    showFocusRing: false
-
-    // Clips the image only: text inside a ClippingRectangle is drawn from a texture and blurs at fractional scales.
-    ClippingRectangle {
-        anchors.fill: parent
-        radius: root.bodyRadius
-        color: "transparent"
-
-        Image {
-            anchors.fill: parent
-            source: "file://" + Theme.shellDir + "/assets/release-banner.svg"
-            fillMode: Image.Stretch
-            asynchronous: true
-            cache: false
-            sourceSize.width: SettingsMetrics.windowWidth
-            opacity: Theme.pendingOpacity
-            layer.enabled: true
-            layer.effect: MultiEffect {
-                colorization: 1
-                colorizationColor: Theme.primary
-            }
-        }
-    }
-
-    Column {
-        id: heroColumn
-        anchors.centerIn: parent
-        width: parent.width - SettingsMetrics.heroPadding * 2
-        spacing: Theme.spacingS
-
-        Row {
-            anchors.horizontalCenter: parent.horizontalCenter
-            spacing: Theme.spacingS
-
-            StyledText {
-                id: brandText
-                text: root.brand
-                font.pixelSize: Theme.fontSizeDisplayLarge
-                font.weight: Theme.fontWeightBold
-                color: Theme.surfaceText
-            }
-
-            StyledText {
-                text: root.accent
-                font: brandText.font
-                color: Theme.primary
-            }
-        }
-
-        StyledText {
-            width: parent.width
-            visible: root.caption !== ""
-            text: root.caption
-            font.pixelSize: Theme.fontSizeMedium
-            font.weight: Theme.fontWeightMedium
-            color: Theme.primary
-            horizontalAlignment: Text.AlignHCenter
-            elide: Text.ElideRight
-        }
-    }
 }
@@ -1,24 +0,0 @@
-<!-- Release hero: the danklinux.com blog banner (diagonal bands, top/bottom glow, marble veins), white on transparent so the shell tints it. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="800" height="300" viewBox="0 0 800 300" preserveAspectRatio="none">
-  <defs>
-    <radialGradient id="top" cx="50%" cy="-20%" rx="80%" ry="50%"><stop offset="0" stop-color="#fff" stop-opacity="0.55"/><stop offset="0.6" stop-color="#fff" stop-opacity="0"/></radialGradient>
-    <radialGradient id="bottom" cx="50%" cy="100%" rx="120%" ry="60%"><stop offset="0" stop-color="#fff" stop-opacity="0.25"/><stop offset="0.7" stop-color="#fff" stop-opacity="0"/></radialGradient>
-    <linearGradient id="vein" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0.3"/><stop offset="0.35" stop-color="#fff" stop-opacity="0.9"/><stop offset="0.65" stop-color="#fff" stop-opacity="0.7"/><stop offset="1" stop-color="#fff" stop-opacity="0.3"/></linearGradient>
-    <pattern id="bands" width="190" height="190" patternUnits="userSpaceOnUse" patternTransform="rotate(22)"><rect width="70" height="190" fill="#fff" fill-opacity="0.16"/></pattern>
-    <radialGradient id="scrim" cx="50%" cy="50%" rx="30%" ry="35%"><stop offset="0" stop-color="#000" stop-opacity="1"/><stop offset="0.5" stop-color="#000" stop-opacity="0.6"/><stop offset="0.78" stop-color="#000" stop-opacity="0"/></radialGradient>
-    <mask id="clear"><rect width="800" height="300" fill="#fff"/><rect width="800" height="300" fill="url(#scrim)"/></mask>
-  </defs>
-  <rect width="800" height="300" fill="url(#bands)"/>
-  <rect width="800" height="300" fill="url(#top)"/>
-  <rect width="800" height="300" fill="url(#bottom)"/>
-  <g fill="none" stroke="url(#vein)" stroke-linecap="round" mask="url(#clear)">
-    <path stroke-width="2.4" d="M -20 34 C 130 60, 250 12, 410 44 S 690 84, 830 58"/>
-    <path stroke-width="1.8" d="M -20 268 C 120 240, 310 286, 510 252 S 740 226, 830 250"/>
-    <path stroke-width="1.1" stroke-opacity="0.55" d="M 92 44 C 122 106, 84 170, 126 232 S 150 290, 144 320"/>
-    <path stroke-width="1.1" stroke-opacity="0.55" d="M 692 66 C 722 126, 706 186, 738 244 S 758 296, 752 320"/>
-    <path stroke-width="0.9" stroke-opacity="0.45" d="M 762 24 C 736 62, 772 100, 752 140"/>
-    <path stroke-width="0.7" stroke-opacity="0.4" d="M 36 88 C 58 128, 44 172, 68 210"/>
-    <path stroke-width="0.6" stroke-opacity="0.35" d="M 330 262 C 358 280, 350 300, 372 318"/>
-    <path stroke-width="0.6" stroke-opacity="0.35" d="M 476 34 C 502 48, 498 72, 522 84"/>
-  </g>
-</svg>