Add a living Prism component gallery
This commit is contained in:
Gabriel Brown
@@ -0,0 +1,375 @@
|
||||
// A living reference for Panama's shared visual language. This deliberately
|
||||
// renders the production widgets instead of lookalike mock components, so a
|
||||
// change to a control or Theme token is visible here immediately.
|
||||
|
||||
import Quickshell
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import qs.config
|
||||
import qs.widgets
|
||||
|
||||
ShellRoot {
|
||||
FloatingWindow {
|
||||
id: galleryWindow
|
||||
|
||||
title: "Panama Prism Gallery"
|
||||
visible: true
|
||||
implicitWidth: 1120
|
||||
implicitHeight: 760
|
||||
minimumSize: Qt.size(920, 640)
|
||||
color: Theme.bg
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: Theme.bg
|
||||
|
||||
PrismEdge {
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
inset: 0
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 34
|
||||
spacing: 34
|
||||
|
||||
// Quiet editorial rail: enough context to make screenshots
|
||||
// self-explanatory without competing with the components.
|
||||
ColumnLayout {
|
||||
Layout.preferredWidth: 222
|
||||
Layout.fillHeight: true
|
||||
spacing: 0
|
||||
|
||||
Rectangle {
|
||||
Layout.preferredWidth: 38
|
||||
Layout.preferredHeight: 38
|
||||
radius: 12
|
||||
color: Theme.alpha(Theme.fg, 0.07)
|
||||
|
||||
ThemedIcon {
|
||||
anchors.centerIn: parent
|
||||
size: 20
|
||||
icon: "applications-graphics-symbolic"
|
||||
tint: Theme.accent
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
Layout.topMargin: 20
|
||||
text: "PRISM"
|
||||
color: Theme.fg
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 26
|
||||
font.weight: Font.DemiBold
|
||||
font.letterSpacing: 1.4
|
||||
}
|
||||
|
||||
Text {
|
||||
Layout.topMargin: 5
|
||||
Layout.maximumWidth: 210
|
||||
text: "Panama's living interface reference. Calm by default, vivid with purpose."
|
||||
color: Theme.fgDim
|
||||
wrapMode: Text.WordWrap
|
||||
lineHeight: 1.25
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: Theme.fontSize
|
||||
}
|
||||
|
||||
Item { Layout.preferredHeight: 36 }
|
||||
|
||||
Repeater {
|
||||
model: [
|
||||
{ label: "Tokyo Night Moon", color: Theme.bgHighlight },
|
||||
{ label: "Signal blue", color: Theme.accent },
|
||||
{ label: "Prism orchid", color: Theme.accentSecondary }
|
||||
]
|
||||
|
||||
RowLayout {
|
||||
required property var modelData
|
||||
Layout.topMargin: 10
|
||||
spacing: 10
|
||||
|
||||
Rectangle {
|
||||
Layout.preferredWidth: 12
|
||||
Layout.preferredHeight: 12
|
||||
radius: 6
|
||||
color: modelData.color
|
||||
}
|
||||
|
||||
Text {
|
||||
text: modelData.label
|
||||
color: Theme.fgDim
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item { Layout.fillHeight: true }
|
||||
|
||||
Text {
|
||||
text: "REAL COMPONENTS · LIVE TOKENS"
|
||||
color: Theme.fgMuted
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 10
|
||||
font.weight: Font.DemiBold
|
||||
font.letterSpacing: 1.1
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
radius: Theme.popoverRadius
|
||||
color: Theme.alpha(Theme.bgPopover, Theme.popoverAlpha)
|
||||
border.width: 1
|
||||
border.color: Theme.alpha(Theme.fg, 0.08)
|
||||
|
||||
PrismEdge {
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
inset: parent.radius
|
||||
}
|
||||
|
||||
Flickable {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 30
|
||||
contentWidth: width
|
||||
contentHeight: content.implicitHeight
|
||||
clip: true
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
|
||||
ColumnLayout {
|
||||
id: content
|
||||
width: parent.width
|
||||
spacing: 28
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 4
|
||||
|
||||
Text {
|
||||
text: "Interface inventory"
|
||||
color: Theme.fg
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: Theme.fontSizeTitle
|
||||
font.weight: Font.DemiBold
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Production controls in their canonical states"
|
||||
color: Theme.fgDim
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: Theme.fontSize
|
||||
}
|
||||
}
|
||||
|
||||
Item { Layout.fillWidth: true }
|
||||
|
||||
Pill {
|
||||
interactive: false
|
||||
horizontalPadding: 12
|
||||
|
||||
ThemedIcon {
|
||||
size: 14
|
||||
icon: "emblem-ok-symbolic"
|
||||
tint: Theme.green
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "TOKYO NIGHT MOON"
|
||||
color: Theme.fgDim
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 10
|
||||
font.weight: Font.DemiBold
|
||||
font.letterSpacing: 0.8
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 12
|
||||
|
||||
Text {
|
||||
text: "QUICK CONTROLS"
|
||||
color: Theme.fgMuted
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 10
|
||||
font.weight: Font.DemiBold
|
||||
font.letterSpacing: 1.1
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 12
|
||||
|
||||
Toggle {
|
||||
id: wifiToggle
|
||||
Layout.fillWidth: true
|
||||
icon: "network-wireless-signal-excellent-symbolic"
|
||||
label: "Wi-Fi"
|
||||
sublabel: active ? "Connected" : "Off"
|
||||
active: true
|
||||
onToggled: active = !active
|
||||
}
|
||||
|
||||
Toggle {
|
||||
id: bluetoothToggle
|
||||
Layout.fillWidth: true
|
||||
icon: "bluetooth-active-symbolic"
|
||||
label: "Bluetooth"
|
||||
sublabel: active ? "2 devices" : "Off"
|
||||
active: false
|
||||
onToggled: active = !active
|
||||
}
|
||||
|
||||
Toggle {
|
||||
id: focusToggle
|
||||
Layout.fillWidth: true
|
||||
icon: "weather-clear-night-symbolic"
|
||||
label: "Focus"
|
||||
sublabel: active ? "Until 5:30" : "Available"
|
||||
active: false
|
||||
onToggled: active = !active
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 12
|
||||
|
||||
Text {
|
||||
text: "CONTINUOUS VALUES"
|
||||
color: Theme.fgMuted
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 10
|
||||
font.weight: Font.DemiBold
|
||||
font.letterSpacing: 1.1
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 126
|
||||
radius: Theme.cardRadius
|
||||
color: Theme.alpha(Theme.fg, 0.045)
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 18
|
||||
spacing: 12
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
|
||||
Text {
|
||||
text: "System audio"
|
||||
color: Theme.fg
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: Theme.fontSize
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
Item { Layout.fillWidth: true }
|
||||
|
||||
Text {
|
||||
text: Math.round(volumeSlider.value * 100) + "%"
|
||||
color: Theme.fgDim
|
||||
font.family: Theme.fontFamily
|
||||
font.features: Theme.tabularFigures
|
||||
font.pixelSize: Theme.fontSize
|
||||
}
|
||||
}
|
||||
|
||||
ValueSlider {
|
||||
id: volumeSlider
|
||||
Layout.fillWidth: true
|
||||
value: 0.68
|
||||
icon: "audio-volume-high-symbolic"
|
||||
onMoved: newValue => volumeSlider.value = newValue
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 12
|
||||
|
||||
Text {
|
||||
text: "BAR MATERIAL"
|
||||
color: Theme.fgMuted
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 10
|
||||
font.weight: Font.DemiBold
|
||||
font.letterSpacing: 1.1
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 74
|
||||
radius: Theme.cardRadius
|
||||
color: Theme.alpha(Theme.bg, 0.62)
|
||||
|
||||
Row {
|
||||
anchors.centerIn: parent
|
||||
spacing: 8
|
||||
|
||||
Pill {
|
||||
ThemedIcon {
|
||||
size: 15
|
||||
icon: "view-grid-symbolic"
|
||||
tint: Theme.accent
|
||||
}
|
||||
Text {
|
||||
text: "1 2 3"
|
||||
color: Theme.fg
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
}
|
||||
}
|
||||
|
||||
Pill {
|
||||
ThemedIcon {
|
||||
size: 15
|
||||
icon: "edit-copy-symbolic"
|
||||
tint: Theme.fgDim
|
||||
}
|
||||
Text {
|
||||
text: "Clipboard"
|
||||
color: Theme.fg
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
}
|
||||
}
|
||||
|
||||
Pill {
|
||||
ThemedIcon {
|
||||
size: 15
|
||||
icon: "appointment-soon-symbolic"
|
||||
tint: Theme.fgDim
|
||||
}
|
||||
Text {
|
||||
text: "Tue Aug 18 · 4:46 AM"
|
||||
color: Theme.fg
|
||||
font.family: Theme.fontFamily
|
||||
font.features: Theme.tabularFigures
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user