import QtQuick import QtQuick.Controls import Quickshell.Widgets import qs.Common import qs.Services import qs.Widgets Item { id: dockTab DankFlickable { anchors.fill: parent anchors.topMargin: Theme.spacingL clip: true contentHeight: mainColumn.height contentWidth: width Column { id: mainColumn width: parent.width spacing: Theme.spacingXL // Dock Position StyledRect { width: parent.width height: dockPositionSection.implicitHeight + Theme.spacingL * 2 radius: Theme.cornerRadius color: Theme.surfaceContainerHigh border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2) border.width: 0 Column { id: dockPositionSection anchors.fill: parent anchors.margins: Theme.spacingL spacing: Theme.spacingM Row { width: parent.width spacing: Theme.spacingM DankIcon { name: "swap_vert" size: Theme.iconSize color: Theme.primary anchors.verticalCenter: parent.verticalCenter } StyledText { id: positionText text: I18n.tr("Dock Position") font.pixelSize: Theme.fontSizeLarge font.weight: Font.Medium color: Theme.surfaceText anchors.verticalCenter: parent.verticalCenter } Item { width: parent.width - Theme.iconSize - Theme.spacingM - positionText.width - positionButtonGroup.width - Theme.spacingM * 2 anchors.verticalCenter: parent.verticalCenter } DankButtonGroup { id: positionButtonGroup anchors.verticalCenter: parent.verticalCenter model: ["Top", "Bottom", "Left", "Right"] currentIndex: { switch (SettingsData.dockPosition) { case SettingsData.Position.Top: return 0 case SettingsData.Position.Bottom: return 1 case SettingsData.Position.Left: return 2 case SettingsData.Position.Right: return 3 default: return 1 } } onSelectionChanged: (index, selected) => { if (selected) { switch (index) { case 0: SettingsData.setDockPosition(SettingsData.Position.Top); break case 1: SettingsData.setDockPosition(SettingsData.Position.Bottom); break case 2: SettingsData.setDockPosition(SettingsData.Position.Left); break case 3: SettingsData.setDockPosition(SettingsData.Position.Right); break } } } } } } } // Dock Visibility Section StyledRect { width: parent.width height: dockVisibilitySection.implicitHeight + Theme.spacingL * 2 radius: Theme.cornerRadius color: Theme.surfaceContainerHigh border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2) border.width: 0 Column { id: dockVisibilitySection anchors.fill: parent anchors.margins: Theme.spacingL spacing: Theme.spacingM Row { width: parent.width spacing: Theme.spacingM DankIcon { name: "visibility_off" size: Theme.iconSize color: Theme.primary anchors.verticalCenter: parent.verticalCenter } Column { width: parent.width - Theme.iconSize - Theme.spacingM - autoHideToggle.width - Theme.spacingM spacing: Theme.spacingXS anchors.verticalCenter: parent.verticalCenter StyledText { text: I18n.tr("Auto-hide Dock") font.pixelSize: Theme.fontSizeLarge font.weight: Font.Medium color: Theme.surfaceText } StyledText { text: I18n.tr("Hide the dock when not in use and reveal it when hovering near the dock area") font.pixelSize: Theme.fontSizeSmall color: Theme.surfaceVariantText wrapMode: Text.WordWrap width: parent.width } } DankToggle { id: autoHideToggle anchors.verticalCenter: parent.verticalCenter checked: SettingsData.dockAutoHide onToggled: checked => { SettingsData.setDockAutoHide(checked) } } } Rectangle { width: parent.width height: 1 color: Theme.outline opacity: 0.2 } Row { width: parent.width spacing: Theme.spacingM DankIcon { name: "dock_to_bottom" size: Theme.iconSize color: Theme.primary anchors.verticalCenter: parent.verticalCenter } Column { width: parent.width - Theme.iconSize - Theme.spacingM - enableToggle.width - Theme.spacingM spacing: Theme.spacingXS anchors.verticalCenter: parent.verticalCenter StyledText { text: I18n.tr("Show Dock") font.pixelSize: Theme.fontSizeLarge font.weight: Font.Medium color: Theme.surfaceText } StyledText { text: I18n.tr("Display a dock with pinned and running applications that can be positioned at the top, bottom, left, or right edge of the screen") font.pixelSize: Theme.fontSizeSmall color: Theme.surfaceVariantText wrapMode: Text.WordWrap width: parent.width } } DankToggle { id: enableToggle anchors.verticalCenter: parent.verticalCenter checked: SettingsData.showDock onToggled: checked => { SettingsData.setShowDock(checked) } } } Rectangle { width: parent.width height: 1 color: Theme.outline opacity: 0.2 visible: CompositorService.isNiri } Row { width: parent.width spacing: Theme.spacingM visible: CompositorService.isNiri DankIcon { name: "fullscreen" size: Theme.iconSize color: Theme.primary anchors.verticalCenter: parent.verticalCenter } Column { width: parent.width - Theme.iconSize - Theme.spacingM - overviewToggle.width - Theme.spacingM spacing: Theme.spacingXS anchors.verticalCenter: parent.verticalCenter StyledText { text: I18n.tr("Show on Overview") font.pixelSize: Theme.fontSizeLarge font.weight: Font.Medium color: Theme.surfaceText } StyledText { text: I18n.tr("Always show the dock when niri's overview is open") font.pixelSize: Theme.fontSizeSmall color: Theme.surfaceVariantText wrapMode: Text.WordWrap width: parent.width } } DankToggle { id: overviewToggle anchors.verticalCenter: parent.verticalCenter checked: SettingsData.dockOpenOnOverview onToggled: checked => { SettingsData.setDockOpenOnOverview(checked) } } } } } // Group by App StyledRect { width: parent.width height: groupByAppSection.implicitHeight + Theme.spacingL * 2 radius: Theme.cornerRadius color: Theme.surfaceContainerHigh border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2) border.width: 0 visible: SettingsData.showDock opacity: visible ? 1 : 0 Column { id: groupByAppSection anchors.fill: parent anchors.margins: Theme.spacingL spacing: Theme.spacingM Row { width: parent.width spacing: Theme.spacingM DankIcon { name: "apps" size: Theme.iconSize color: Theme.primary anchors.verticalCenter: parent.verticalCenter } Column { width: parent.width - Theme.iconSize - Theme.spacingM - groupByAppToggle.width - Theme.spacingM spacing: Theme.spacingXS anchors.verticalCenter: parent.verticalCenter StyledText { text: I18n.tr("Group by App") font.pixelSize: Theme.fontSizeLarge font.weight: Font.Medium color: Theme.surfaceText } StyledText { text: I18n.tr("Group multiple windows of the same app together with a window count indicator") font.pixelSize: Theme.fontSizeSmall color: Theme.surfaceVariantText wrapMode: Text.WordWrap width: parent.width } } DankToggle { id: groupByAppToggle anchors.verticalCenter: parent.verticalCenter checked: SettingsData.dockGroupByApp onToggled: checked => { SettingsData.setDockGroupByApp(checked) } } } } Behavior on opacity { NumberAnimation { duration: Theme.mediumDuration easing.type: Theme.emphasizedEasing } } } // Icon Size Section StyledRect { width: parent.width height: iconSizeSection.implicitHeight + Theme.spacingL * 2 radius: Theme.cornerRadius color: Theme.surfaceContainerHigh border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2) border.width: 0 visible: SettingsData.showDock opacity: visible ? 1 : 0 Column { id: iconSizeSection anchors.fill: parent anchors.margins: Theme.spacingL spacing: Theme.spacingM Row { width: parent.width spacing: Theme.spacingM DankIcon { name: "photo_size_select_large" size: Theme.iconSize color: Theme.primary anchors.verticalCenter: parent.verticalCenter } StyledText { text: I18n.tr("Icon Size") font.pixelSize: Theme.fontSizeLarge font.weight: Font.Medium color: Theme.surfaceText anchors.verticalCenter: parent.verticalCenter } } DankSlider { width: parent.width height: 24 value: SettingsData.dockIconSize minimum: 24 maximum: 96 unit: "" showValue: true wheelEnabled: false thumbOutlineColor: Theme.surfaceContainerHigh onSliderValueChanged: newValue => { SettingsData.setDockIconSize(newValue) } } } Behavior on opacity { NumberAnimation { duration: Theme.mediumDuration easing.type: Theme.emphasizedEasing } } } // Dock Spacing Section StyledRect { width: parent.width height: dockSpacingSection.implicitHeight + Theme.spacingL * 2 radius: Theme.cornerRadius color: Theme.surfaceContainerHigh border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2) border.width: 0 visible: SettingsData.showDock opacity: visible ? 1 : 0 Column { id: dockSpacingSection anchors.fill: parent anchors.margins: Theme.spacingL spacing: Theme.spacingM Row { width: parent.width spacing: Theme.spacingM DankIcon { name: "space_bar" size: Theme.iconSize color: Theme.primary anchors.verticalCenter: parent.verticalCenter } StyledText { text: I18n.tr("Spacing") font.pixelSize: Theme.fontSizeLarge font.weight: Font.Medium color: Theme.surfaceText anchors.verticalCenter: parent.verticalCenter } } Column { width: parent.width spacing: Theme.spacingS StyledText { text: I18n.tr("Padding") font.pixelSize: Theme.fontSizeSmall color: Theme.surfaceText font.weight: Font.Medium } DankSlider { width: parent.width height: 24 value: SettingsData.dockSpacing minimum: 0 maximum: 32 unit: "" showValue: true wheelEnabled: false thumbOutlineColor: Theme.surfaceContainerHigh onSliderValueChanged: newValue => { SettingsData.setDockSpacing( newValue) } } } Column { width: parent.width spacing: Theme.spacingS StyledText { text: I18n.tr("Height to Edge Gap (Exclusive Zone)") font.pixelSize: Theme.fontSizeSmall color: Theme.surfaceText font.weight: Font.Medium } DankSlider { width: parent.width height: 24 value: SettingsData.dockBottomGap minimum: -100 maximum: 100 unit: "" showValue: true wheelEnabled: false thumbOutlineColor: Theme.surfaceContainerHigh onSliderValueChanged: newValue => { SettingsData.setDockBottomGap( newValue) } } } } Behavior on opacity { NumberAnimation { duration: Theme.mediumDuration easing.type: Theme.emphasizedEasing } } } // Dock Transparency Section StyledRect { width: parent.width height: transparencySection.implicitHeight + Theme.spacingL * 2 radius: Theme.cornerRadius color: Theme.surfaceContainerHigh border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2) border.width: 0 visible: SettingsData.showDock opacity: visible ? 1 : 0 Column { id: transparencySection anchors.fill: parent anchors.margins: Theme.spacingL spacing: Theme.spacingM Row { width: parent.width spacing: Theme.spacingM DankIcon { name: "opacity" size: Theme.iconSize color: Theme.primary anchors.verticalCenter: parent.verticalCenter } StyledText { text: I18n.tr("Dock Transparency") font.pixelSize: Theme.fontSizeLarge font.weight: Font.Medium color: Theme.surfaceText anchors.verticalCenter: parent.verticalCenter } } DankSlider { width: parent.width height: 32 value: Math.round(SettingsData.dockTransparency * 100) minimum: 0 maximum: 100 unit: "%" showValue: true wheelEnabled: false thumbOutlineColor: Theme.surfaceContainerHigh onSliderValueChanged: newValue => { SettingsData.setDockTransparency( newValue / 100) } } } Behavior on opacity { NumberAnimation { duration: Theme.mediumDuration easing.type: Theme.emphasizedEasing } } } } } }