ControlCenter: toggle to hide/show volume sliders + getting ready for more modularity soon

This commit is contained in:
ItsLemmy
2025-10-13 10:04:47 -04:00
parent 962811db0e
commit a0907a5b96
19 changed files with 186 additions and 381 deletions
+15 -14
View File
@@ -725,26 +725,22 @@
"description": "Wählen Sie aus, wo das Kontrollzentrum angezeigt wird, wenn es geöffnet wird.",
"label": "Position"
},
"quickSettingsStyle": {
"section": {
"description": "Passen Sie das Aussehen und Verhalten der Schnelleinstellungen im Kontrollzentrum an.",
"label": "Schnelleinstellungen-Stil"
},
"style": {
"description": "Wählen Sie den visuellen Stil für Schnellzugriff-Umschalter und -Steuerelemente.",
"label": "Schnelleinstellungen-Stil"
}
},
"section": {
"description": "Konfigurieren Sie die Positionierung und das Verhalten des Control Center-Panels.",
"label": "Aussehen"
},
"title": "Kontrollzentrum",
"widgets": {
"audio-controls": {
"description": "Verschiedene Audio-Lautstärken sofort über das Kontrollzentrum anpassen.",
"label": "Lautstärkeregler"
},
"quick-settings": {
"section": {
"description": "Control Center Widgets und ihre Anzeigeoptionen konfigurieren und verwalten.",
"label": "Widgets"
}
"description": "Konfigurieren und verwalten Sie die Schnellzugriff-Widgets.",
"label": "Schnelleinstellungen-Widgets"
},
"sectionLeft": "Links",
"sectionRight": "Richtig"
}
},
"user-interface": {
@@ -1385,6 +1381,11 @@
"microphone-input": "Mikrofon-Eingabe",
"both": "System-Ausgabe + Mikrofon-Eingabe"
}
},
"hide-modes": {
"hidden": "Ausblenden, wenn leer",
"transparent": "Transparent, wenn leer",
"visible": "Immer sichtbar"
}
},
"session-menu": {
+8 -12
View File
@@ -731,21 +731,17 @@
"label": "Position",
"description": "Choose where the Control Center panel appears when opened."
},
"quickSettingsStyle": {
"quick-settings": {
"section": {
"label": "Quick Settings Style",
"description": "Customize the appearance and behavior of quick settings in the Control Center."
"label": "Quick settings widgets",
"description": "Configure and manage the quick settings widgets."
},
"style": {
"label": "Quick Settings Style",
"description": "Choose the visual style for quick settings toggles and controls."
}
"sectionLeft": "Left",
"sectionRight": "Right"
},
"widgets": {
"section": {
"label": "Widgets",
"description": "Configure and manage Control Center widgets and their display options."
}
"audio-controls": {
"label": "Volume sliders",
"description": "Instantly adjust different audio volumes from the Control Center."
}
},
"user-interface": {
+15 -14
View File
@@ -725,26 +725,22 @@
"description": "Elige dónde aparece el panel del Centro de control cuando se abre.",
"label": "Posición"
},
"quickSettingsStyle": {
"section": {
"description": "Personaliza la apariencia y el comportamiento de los ajustes rápidos en el Centro de control.",
"label": "Estilo de configuración rápida"
},
"style": {
"description": "Elige el estilo visual para los interruptores y controles de configuración rápida.",
"label": "Estilo de ajustes rápidos"
}
},
"section": {
"description": "Configurar el posicionamiento y el comportamiento del panel del Centro de control.",
"label": "Apariencia"
},
"title": "Centro de control",
"widgets": {
"audio-controls": {
"description": "Ajusta instantáneamente diferentes volúmenes de audio desde el Centro de control.",
"label": "Deslizadores de volumen"
},
"quick-settings": {
"section": {
"description": "Configurar y administrar los widgets del Centro de control y sus opciones de visualización.",
"label": "Widgets"
}
"description": "Configurar y administrar los widgets de configuración rápida.",
"label": "Widgets de configuración rápida"
},
"sectionLeft": "Izquierda",
"sectionRight": "Derecha"
}
},
"user-interface": {
@@ -1368,6 +1364,11 @@
"microphone-input": "Entrada del micrófono",
"both": "Salida del sistema + entrada del micrófono"
}
},
"hide-modes": {
"hidden": "Ocultar cuando esté vacío",
"transparent": "Transparente cuando está vacío",
"visible": "Siempre visible"
}
},
"session-menu": {
+15 -14
View File
@@ -725,26 +725,22 @@
"description": "Choisissez où le panneau du Centre de contrôle apparaît lorsqu'il est ouvert.",
"label": "Position"
},
"quickSettingsStyle": {
"section": {
"description": "Personnaliser l'apparence et le comportement des réglages rapides dans le Centre de contrôle.",
"label": "Style des paramètres rapides"
},
"style": {
"description": "Choisissez le style visuel des bascules et des commandes des paramètres rapides.",
"label": "Style des paramètres rapides"
}
},
"section": {
"description": "Configurer le positionnement et le comportement du panneau du Centre de contrôle.",
"label": "Apparence"
},
"title": "Centre de contrôle",
"widgets": {
"audio-controls": {
"description": "Ajustez instantanément différents volumes audio depuis le Centre de contrôle.",
"label": "Curseurs de volume"
},
"quick-settings": {
"section": {
"description": "Configurer et gérer les widgets du Centre de contrôle et leurs options d'affichage.",
"label": "Widgets"
}
"description": "Configurer et gérer les widgets des paramètres rapides.",
"label": "Widgets de paramètres rapides"
},
"sectionLeft": "Gauche",
"sectionRight": "Droite"
}
},
"user-interface": {
@@ -1368,6 +1364,11 @@
"microphone-input": "Entrée microphone",
"both": "Sortie système + entrée microphone"
}
},
"hide-modes": {
"hidden": "Masquer si vide",
"transparent": "Transparent quand vide",
"visible": "Toujours visible"
}
},
"session-menu": {
+15 -14
View File
@@ -725,26 +725,22 @@
"description": "Escolha onde o painel da Central de Controle aparece quando aberto.",
"label": "Posição"
},
"quickSettingsStyle": {
"section": {
"description": "Personalize a aparência e o comportamento das configurações rápidas na Central de Controle.",
"label": "Estilo das Configurações Rápidas"
},
"style": {
"description": "Escolha o estilo visual para as opções e controles de configurações rápidas.",
"label": "Estilo das Configurações Rápidas"
}
},
"section": {
"description": "Configurar o posicionamento e o comportamento do painel da Central de Controle.",
"label": "Aparência"
},
"title": "Central de Controle",
"widgets": {
"audio-controls": {
"description": "Ajuste instantaneamente diferentes volumes de áudio a partir da Central de Controle.",
"label": "Controles deslizantes de volume"
},
"quick-settings": {
"section": {
"description": "Configure e gerencie widgets da Central de Controle e suas opções de exibição.",
"label": "Widgets"
}
"description": "Configure e gerencie os widgets de configurações rápidas.",
"label": "Widgets de configurações rápidas"
},
"sectionLeft": "Esquerda",
"sectionRight": "Direito/Certo/Correto"
}
},
"user-interface": {
@@ -1368,6 +1364,11 @@
"microphone-input": "Entrada do microfone",
"both": "Saída do sistema + entrada do microfone"
}
},
"hide-modes": {
"hidden": "Ocultar Quando Vazio",
"transparent": "Transparente quando vazio",
"visible": "Sempre Visível"
}
},
"session-menu": {
+15 -14
View File
@@ -725,26 +725,22 @@
"description": "选择打开控制中心时面板出现的位置。",
"label": "位置"
},
"quickSettingsStyle": {
"section": {
"description": "自定义控制中心中快速设置的外观和行为。",
"label": "快速设置样式"
},
"style": {
"description": "选择快速设置开关和控件的视觉样式。",
"label": "快速设置样式"
}
},
"section": {
"description": "配置控制中心面板的位置和行为。",
"label": "外观"
},
"title": "控制中心",
"widgets": {
"audio-controls": {
"description": "从控制中心即时调整不同的音频音量。",
"label": "音量滑块"
},
"quick-settings": {
"section": {
"description": "配置和管理控制中心小组件及其显示选项。",
"label": "小部件"
}
"description": "配置和管理快速设置小部件。",
"label": "快速设置小部件"
},
"sectionLeft": "左",
"sectionRight": "右"
}
},
"user-interface": {
@@ -1368,6 +1364,11 @@
"microphone-input": "麦克风输入",
"both": "系统输出 + 麦克风输入"
}
},
"hide-modes": {
"hidden": "当为空时隐藏",
"transparent": "空时透明",
"visible": "始终可见"
}
},
"session-menu": {
+4 -3
View File
@@ -245,16 +245,17 @@ Singleton {
property JsonObject controlCenter: JsonObject {
// Position: close_to_bar_button, center, top_left, top_right, bottom_left, bottom_right, bottom_center, top_center
property string position: "close_to_bar_button"
property string quickSettingsStyle: "compact" // "compact", "classic", or "modern"
property bool audioControlsEnabled: true
property JsonObject widgets
widgets: JsonObject {
property list<var> quickSettings: [{
property list<var> left: [{
"id": "WiFi"
}, {
"id": "Bluetooth"
}, {
"id": "Notifications"
}, {
}]
property list<var> right: [{
"id": "ScreenRecorder"
}, {
"id": "PowerProfile"
+42 -32
View File
@@ -10,9 +10,17 @@ import qs.Widgets
NPanel {
id: root
preferredWidth: Math.round(460 * Style.uiScaleRatio)
preferredHeight: (profileHeight + weatherHeight + mediaSysMonHeight + audioHeight + bottomHeight) + 6 * Style.marginL
panelKeyboardFocus: true
preferredWidth: Math.round(460 * Style.uiScaleRatio)
preferredHeight: {
let height = profileHeight + weatherHeight + mediaSysMonHeight + utilsHeight
let count = 4
if (Settings.data.controlCenter.audioControlsEnabled) {
count++
height += audioHeight
}
return height + (count + 1) * Style.marginL
}
// Positioning
readonly property string controlCenterPosition: Settings.data.controlCenter.position
@@ -27,7 +35,7 @@ NPanel {
readonly property int weatherHeight: Math.round(190 * Style.uiScaleRatio)
readonly property int mediaSysMonHeight: Math.round(260 * Style.uiScaleRatio)
readonly property int audioHeight: Math.round(120 * Style.uiScaleRatio)
readonly property int bottomHeight: Math.round(52 * Style.uiScaleRatio)
readonly property int utilsHeight: Math.round(52 * Style.uiScaleRatio)
panelContent: Item {
id: content
@@ -40,18 +48,47 @@ NPanel {
width: parent.width - (Style.marginL * 2)
spacing: Style.marginL
// Cards (consistent inter-card spacing via ColumnLayout spacing)
// Profile
ProfileCard {
Layout.fillWidth: true
Layout.preferredHeight: profileHeight
}
// Utils
RowLayout {
Layout.fillWidth: true
Layout.preferredHeight: utilsHeight
spacing: Style.marginL
// Power Profiles switcher
PowerProfilesCard {
Layout.fillWidth: true
Layout.fillHeight: true
spacing: Style.marginL
}
// Utilities buttons
UtilitiesCard {
Layout.fillWidth: true
Layout.fillHeight: true
spacing: Style.marginL
}
}
// Audio controls
AudioCard {
visible: Settings.data.controlCenter.audioControlsEnabled
Layout.fillWidth: true
Layout.preferredHeight: audioHeight
}
// Weather
WeatherCard {
Layout.fillWidth: true
Layout.preferredHeight: weatherHeight
}
// Middle section: media + stats column
// Media + SysMon
RowLayout {
Layout.fillWidth: true
Layout.preferredHeight: mediaSysMonHeight
@@ -69,33 +106,6 @@ NPanel {
Layout.fillHeight: true
}
}
// Audio card below media and system monitor
AudioCard {
Layout.fillWidth: true
Layout.preferredHeight: audioHeight
}
// Bottom actions (two grouped rows of round buttons)
RowLayout {
Layout.fillWidth: true
Layout.preferredHeight: bottomHeight
spacing: Style.marginL
// Power Profiles switcher
PowerProfilesCard {
Layout.fillWidth: true
Layout.fillHeight: true
spacing: Style.marginL
}
// Utilities buttons
UtilitiesCard {
Layout.fillWidth: true
Layout.fillHeight: true
spacing: Style.marginL
}
}
}
}
}
@@ -7,9 +7,7 @@ import qs.Widgets
NQuickSetting {
property ShellScreen screen
text: I18n.tr("quickSettings.bluetooth.label.enabled")
icon: BluetoothService.enabled ? "bluetooth" : "bluetooth-off"
tooltipText: I18n.tr("quickSettings.bluetooth.tooltip.action")
style: Settings.data.controlCenter.quickSettingsStyle || "modern"
onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(this)
}
@@ -7,11 +7,8 @@ import qs.Widgets
NQuickSetting {
property ShellScreen screen
text: I18n.tr("quickSettings.keepAwake.label.enabled")
icon: IdleInhibitorService.isInhibited ? "keep-awake-on" : "keep-awake-off"
hot: IdleInhibitorService.isInhibited
tooltipText: I18n.tr("quickSettings.keepAwake.tooltip.action")
style: Settings.data.controlCenter.quickSettingsStyle || "modern"
onClicked: IdleInhibitorService.manualToggle()
}
@@ -8,10 +8,8 @@ NQuickSetting {
property ShellScreen screen
enabled: ProgramCheckerService.wlsunsetAvailable
text: I18n.tr("quickSettings.nightLight.label.enabled")
icon: Settings.data.nightLight.enabled ? (Settings.data.nightLight.forced ? "nightlight-forced" : "nightlight-on") : "nightlight-off"
hot: !Settings.data.nightLight.enabled || Settings.data.nightLight.forced
style: Settings.data.controlCenter.quickSettingsStyle || "modern"
tooltipText: I18n.tr("quickSettings.nightLight.tooltip.action")
onClicked: {
@@ -7,12 +7,9 @@ import qs.Widgets
NQuickSetting {
property ShellScreen screen
text: Settings.data.notifications.doNotDisturb ? I18n.tr("quickSettings.notifications.label.disabled") : I18n.tr("quickSettings.notifications.label.enabled")
icon: Settings.data.notifications.doNotDisturb ? "bell-off" : "bell"
hot: Settings.data.notifications.doNotDisturb
tooltipText: I18n.tr("quickSettings.notifications.tooltip.action")
style: Settings.data.controlCenter.quickSettingsStyle || "modern"
onClicked: PanelService.getPanel("notificationHistoryPanel")?.toggle(this)
onRightClicked: Settings.data.notifications.doNotDisturb = !Settings.data.notifications.doNotDisturb
}
@@ -12,12 +12,9 @@ NQuickSetting {
readonly property bool hasPP: PowerProfileService.available
enabled: hasPP
text: hasPP ? PowerProfileService.getName() : I18n.tr("quickSettings.powerProfile.label.unavailable")
icon: PowerProfileService.getIcon()
hot: !PowerProfileService.isDefault()
tooltipText: I18n.tr("quickSettings.powerProfile.tooltip.action")
style: Settings.data.controlCenter.quickSettingsStyle || "modern"
onClicked: {
PowerProfileService.cycleProfile()
}
@@ -9,10 +9,8 @@ NQuickSetting {
enabled: ProgramCheckerService.gpuScreenRecorderAvailable
icon: "camera-video"
text: ScreenRecorderService.isRecording ? I18n.tr("quickSettings.screenRecorder.label.recording") : I18n.tr("quickSettings.screenRecorder.label.stopped")
hot: ScreenRecorderService.isRecording
tooltipText: I18n.tr("quickSettings.screenRecorder.tooltip.action")
style: Settings.data.controlCenter.quickSettingsStyle || "modern"
// Force hover state when recording to get hover colors
property bool originalHovered: hovered
@@ -9,10 +9,7 @@ NQuickSetting {
enabled: Settings.data.wallpaper.enabled
icon: "wallpaper-selector"
text: I18n.tr("quickSettings.wallpaperSelector.label")
tooltipText: I18n.tr("quickSettings.wallpaperSelector.tooltip.action")
style: Settings.data.controlCenter.quickSettingsStyle || "modern"
onClicked: PanelService.getPanel("wallpaperPanel")?.toggle(this)
onRightClicked: WallpaperService.setRandomWallpaper()
}
-15
View File
@@ -28,21 +28,6 @@ NQuickSetting {
}
}
text: {
if (NetworkService.ethernetConnected) {
return I18n.tr("quickSettings.wifi.label.ethernet")
}
let connected = false
for (const net in NetworkService.networks) {
if (NetworkService.networks[net].connected) {
connected = true
break
}
}
return connected ? I18n.tr("quickSettings.wifi.label.wifi") : I18n.tr("quickSettings.wifi.label.disconnected")
}
style: Settings.data.controlCenter.quickSettingsStyle || "modern"
tooltipText: I18n.tr("quickSettings.wifi.tooltip.action")
onClicked: PanelService.getPanel("wifiPanel")?.toggle(this)
}
+12 -12
View File
@@ -33,14 +33,14 @@ NBox {
Layout.minimumHeight: {
var widgetCount = widgetModel.length
if (widgetCount === 0)
return 140
return 140 * Style.uiScaleRatio
var availableWidth = parent.width
var avgWidgetWidth = 150
var avgWidgetWidth = 150 * Style.uiScaleRatio
var widgetsPerRow = Math.max(1, Math.floor(availableWidth / avgWidgetWidth))
var rows = Math.ceil(widgetCount / widgetsPerRow)
return (50 + 20 + (rows * 48) + ((rows - 1) * Style.marginS) + 20)
return ((50 + 20 + (rows * 48)) * Style.uiScaleRatio + ((rows - 1) * Style.marginS) + 20 * Style.uiScaleRatio)
}
// Generate widget color from name checksum
@@ -73,7 +73,7 @@ NBox {
Layout.fillWidth: true
NText {
text: sectionName + " Section"
text: sectionName
pointSize: Style.fontSizeL
font.weight: Style.fontWeightBold
color: Color.mOnSurface
@@ -131,7 +131,7 @@ NBox {
Item {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: 65
Layout.minimumHeight: 65 * Style.uiScaleRatio
clip: false // Don't clip children so ghost can move freely
Flow {
@@ -180,7 +180,7 @@ NBox {
NContextMenu {
id: contextMenu
parent: Overlay.overlay
width: 240
width: 240 * Style.uiScaleRatio
model: [{
"label": I18n.tr("tooltips.move-to-left-section"),
"action": "left",
@@ -227,16 +227,16 @@ NBox {
NText {
text: modelData.id
pointSize: Style.fontSizeS
pointSize: Style.fontSizeXS
color: root.getWidgetColor(modelData)[1]
horizontalAlignment: Text.AlignHCenter
elide: Text.ElideRight
Layout.preferredWidth: 80
Layout.preferredWidth: 60 * Style.uiScaleRatio
}
RowLayout {
spacing: 0
Layout.preferredWidth: buttonsCount * buttonsWidth
Layout.preferredWidth: buttonsCount * buttonsWidth * Style.uiScaleRatio
Loader {
active: root.widgetRegistry && root.widgetRegistry.widgetHasUserSettings(modelData.id)
@@ -261,19 +261,19 @@ NBox {
if (dialog) {
dialog.open()
} else {
Logger.error("WidgetSectionEditor", "Failed to create settings dialog instance")
Logger.error("SectionEditor", "Failed to create settings dialog instance")
}
}
if (component.status === Component.Ready) {
instantiateAndOpen()
} else if (component.status === Component.Error) {
Logger.error("WidgetSectionEditor", component.errorString())
Logger.error("SectionEditor", component.errorString())
} else {
component.statusChanged.connect(function () {
if (component.status === Component.Ready) {
instantiateAndOpen()
} else if (component.status === Component.Error) {
Logger.error("WidgetSectionEditor", component.errorString())
Logger.error("SectionEditor", component.errorString())
}
})
}
+31 -39
View File
@@ -70,44 +70,19 @@ ColumnLayout {
}
}
NToggle {
label: I18n.tr("settings.control-center.audio-controls.label")
description: I18n.tr("settings.control-center.audio-controls.description")
checked: Settings.data.controlCenter.audioControlsEnabled
onToggled: checked => Settings.data.controlCenter.audioControlsEnabled = checked
}
NDivider {
Layout.fillWidth: true
Layout.topMargin: Style.marginXL
Layout.bottomMargin: Style.marginXL
}
// // Quick Settings Style Section
// ColumnLayout {
// spacing: Style.marginL
// Layout.fillWidth: true
// NHeader {
// label: I18n.tr("settings.control-center.quickSettingsStyle.section.label")
// description: I18n.tr("settings.control-center.quickSettingsStyle.section.description")
// }
// NComboBox {
// id: quickSettingsStyle
// label: I18n.tr("settings.control-center.quickSettingsStyle.style.label")
// description: I18n.tr("settings.control-center.quickSettingsStyle.style.description")
// Layout.fillWidth: true
// model: [{
// "key": "compact",
// "name": I18n.tr("options.control-center.quickSettingsStyle.compact")
// }, {
// "key": "classic",
// "name": I18n.tr("options.control-center.quickSettingsStyle.classic")
// }, {
// "key": "modern",
// "name": I18n.tr("options.control-center.quickSettingsStyle.modern")
// }]
// currentKey: Settings.data.controlCenter.quickSettingsStyle || "compact"
// onSelected: function (key) {
// Settings.data.controlCenter.quickSettingsStyle = key
// }
// }
// }
// NDivider {
// Layout.fillWidth: true
// Layout.topMargin: Style.marginXL
@@ -120,24 +95,41 @@ ColumnLayout {
// Layout.fillWidth: true
// NHeader {
// label: I18n.tr("settings.control-center.widgets.section.label")
// description: I18n.tr("settings.control-center.widgets.section.description")
// label: I18n.tr("settings.control-center.quickSettings.section.label")
// description: I18n.tr("settings.control-center.quickSettings.section.description")
// }
// // Bar Sections
// // Sections
// ColumnLayout {
// Layout.fillWidth: true
// Layout.fillHeight: true
// Layout.topMargin: Style.marginM
// spacing: Style.marginM
// // Quick Settings
// // Left
// SectionEditor {
// sectionName: I18n.tr("settings.control-center.quickSettings.sectionName")
// sectionId: "quickSettings"
// sectionName: I18n.tr("settings.control-center.quickSettings.sectionLeft")
// sectionId: "left"
// settingsDialogComponent: ""
// widgetRegistry: ControlCenterWidgetRegistry
// widgetModel: Settings.data.controlCenter.widgets["quickSettings"]
// widgetModel: Settings.data.controlCenter.widgets["left"]
// availableWidgets: availableWidgets
// enableMoveBetweenSections: false
// onAddWidget: (widgetId, section) => _addWidgetToSection(widgetId, section)
// onRemoveWidget: (section, index) => _removeWidgetFromSection(section, index)
// onReorderWidget: (section, fromIndex, toIndex) => _reorderWidgetInSection(section, fromIndex, toIndex)
// onUpdateWidgetSettings: (section, index, settings) => _updateWidgetSettingsInSection(section, index, settings)
// onDragPotentialStarted: root.handleDragStart()
// onDragPotentialEnded: root.handleDragEnd()
// }
// // Right
// SectionEditor {
// sectionName: I18n.tr("settings.control-center.quickSettings.sectionRight")
// sectionId: "right"
// settingsDialogComponent: ""
// widgetRegistry: ControlCenterWidgetRegistry
// widgetModel: Settings.data.controlCenter.widgets["right"]
// availableWidgets: availableWidgets
// enableMoveBetweenSections: false
// onAddWidget: (widgetId, section) => _addWidgetToSection(widgetId, section)
+14 -180
View File
@@ -9,24 +9,20 @@ Rectangle {
id: root
// Public properties
property string text: ""
property string icon: ""
property string tooltipText: ""
property bool enabled: true
property bool hot: false
property string style: "modern" // "modern", "classic", or "compact"
// Styling properties
property real fontSize: (style === "classic") ? Style.fontSizeXS : Style.fontSizeS
property int fontWeight: Style.fontWeightMedium
property real iconSize: Style.fontSizeL
property real cornerRadius: Style.radiusM
property real iconSize: Style.fontSizeM
property real cornerRadius: Style.radiusS
// Internal properties
property bool hovered: false
property bool pressed: false
// Colors - Style-dependent colors
// Colors
property color backgroundColor: {
if (pressed) {
return Color.mTertiary
@@ -34,21 +30,8 @@ Rectangle {
if (hot) {
return Color.mPrimary
}
if (style === "classic")
return Color.mSurfaceVariant
if (style === "compact")
return Color.mSurface
return Color.mSurface
}
property color textColor: {
if (pressed) {
return Color.mOnTertiary
}
if (hot) {
return Color.mOnPrimary
}
return Color.mOnSurface
}
property color iconColor: {
if (pressed) {
return Color.mOnTertiary
@@ -56,13 +39,9 @@ Rectangle {
if (hot) {
return Color.mOnPrimary
}
if (style !== "compact")
return Color.mPrimary
return Color.mOnSurface
}
property color borderColor: Color.mOutline
property color hoverColor: Color.mTertiary
property color hoverTextColor: Color.mOnTertiary
property color hoverIconColor: Color.mOnTertiary
// Signals
@@ -70,34 +49,12 @@ Rectangle {
signal rightClicked
signal middleClicked
// Dimensions - Style-dependent sizing
implicitWidth: {
if (style === "classic") {
return Style.baseWidgetSize
}
if (style === "compact") {
return Style.baseWidgetSize * 0.8
}
return Math.max(120, contentRow.implicitWidth + (Style.marginL))
}
implicitHeight: {
if (style === "classic") {
return Style.baseWidgetSize
}
if (style === "compact") {
return Style.baseWidgetSize * 0.8
}
return Math.max(48, contentRow.implicitHeight + (Style.marginL))
}
// Dimensions
implicitWidth: Style.baseWidgetSize * 0.8
implicitHeight: Style.baseWidgetSize * 0.8
// Appearance - Style-dependent styling
radius: {
if (style === "classic")
return width * 0.5
if (style === "compact")
return Style.radiusS // Smaller radius for compact
return cornerRadius
}
// Appearance
radius: cornerRadius
color: {
if (!enabled)
return Qt.lighter(Color.mSurface, 1.1)
@@ -106,32 +63,13 @@ Rectangle {
return backgroundColor
}
border.width: {
if (style === "classic")
return Math.max(1, Style.borderS)
if (style === "compact")
return 0
return 0
}
border.color: {
if (style === "classic")
return borderColor
return "transparent"
}
opacity: enabled ? (style === "classic" ? Style.opacityFull : 1.0) : (style === "classic" ? Style.opacityMedium : 0.6)
border.width: 0
opacity: enabled ? 1.0 : 0.6
Behavior on color {
ColorAnimation {
duration: Style.animationFast
easing.type: style === "classic" ? Easing.InOutQuad : Easing.OutCubic
}
}
Behavior on border.color {
ColorAnimation {
duration: Style.animationFast
easing.type: style === "classic" ? Easing.InOutQuad : Easing.OutCubic
easing.type: Easing.OutCubic
}
}
@@ -142,67 +80,12 @@ Rectangle {
}
}
// Modern style - icon above text
ColumnLayout {
id: contentRow
anchors.centerIn: parent
spacing: Style.marginXXS
visible: root.style !== "classic" && root.style !== "compact"
// Icon
NIcon {
Layout.alignment: Qt.AlignHCenter
visible: root.icon !== ""
icon: root.icon
pointSize: root.iconSize
color: {
if (!root.enabled)
return Color.mOnSurfaceVariant
if (root.hovered)
return root.hoverIconColor
return root.iconColor
}
Behavior on color {
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.OutCubic
}
}
}
// Modern - Text content
NText {
Layout.alignment: Qt.AlignHCenter
visible: root.text !== ""
text: root.text
pointSize: root.fontSize
font.weight: root.fontWeight
color: {
if (!root.enabled)
return Color.mOnSurfaceVariant
if (root.hovered)
return root.hoverTextColor
return root.textColor
}
elide: Text.ElideRight
Behavior on color {
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.OutCubic
}
}
}
}
// Compact style - icon only, small square button
// Icon
NIcon {
id: compactIcon
anchors.centerIn: parent
visible: root.style === "compact" && root.icon !== ""
visible: root.icon !== ""
icon: root.icon
pointSize: Style.fontSizeM // Smaller icon for compact
pointSize: root.iconSize
color: {
if (!root.enabled)
return Color.mOnSurfaceVariant
@@ -219,55 +102,6 @@ Rectangle {
}
}
// Classic style - EXACTLY like NIconButton (icon + text)
RowLayout {
anchors.centerIn: parent
visible: root.style === "classic"
spacing: Style.marginXS
NIcon {
visible: root.icon !== ""
icon: root.icon
pointSize: Style.fontSizeM
color: {
if (!root.enabled)
return Color.mOnSurfaceVariant
if (root.hovered)
return root.hoverIconColor
return root.iconColor
}
Behavior on color {
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.OutCubic
}
}
}
// Classic - Text content
NText {
visible: root.text !== ""
text: root.text
pointSize: root.fontSize
font.weight: root.fontWeight
color: {
if (!root.enabled)
return Color.mOnSurfaceVariant
if (root.hovered)
return root.hoverTextColor
return root.textColor
}
Behavior on color {
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.OutCubic
}
}
}
}
MouseArea {
id: mouseArea
anchors.fill: parent