376 lines
16 KiB
QML
376 lines
16 KiB
QML
// 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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|