Skip to content

Feat/floating bar edge radius #2352

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tibssy wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Feat/floating bar edge radius #2352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e60c890
feat(bar): flatten floating bar corners that touch screen edges at ze…
tibssy Mar 29, 2026
6c26ba0
feat(bar): add optional outer-edge rounding for floating bars that to…
tibssy Mar 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions Assets/Translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -849,6 +849,8 @@
"appearance-margins-description": "Adjust the margins around the floating bar.",
"appearance-margins-horizontal": "Horizontal Margin ",
"appearance-margins-vertical": "Vertical Margin",
"appearance-floating-outer-edge-rounding-description": "When the floating bar touches a screen edge, draw outward rounding on that edge. Requires the opposite margin to be at least {minMargin}px (container radius + screen corners radius).",
"appearance-floating-outer-edge-rounding-label": "Outer rounding on touching edge",
"appearance-outer-corners-description": "Display outwardly curved corners on the bar.",
"appearance-outer-corners-label": "Outer corners",
"appearance-position-description": "Choose where to place the bar on the screen.",
Expand Down
1 change: 1 addition & 0 deletions Assets/settings-default.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"useSeparateOpacity": false,
"marginVertical": 4,
"marginHorizontal": 4,
"floatingOuterEdgeRounding": false,
"frameThickness": 8,
"frameRadius": 12,
"outerCorners": true,
Expand Down
12 changes: 12 additions & 0 deletions Assets/settings-search-index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -371,6 +371,18 @@
"Settings.data.bar.barType === \"floating\""
]
},
{
"labelKey": "panels.bar.appearance-floating-outer-edge-rounding-label",
"descriptionKey": "panels.bar.appearance-floating-outer-edge-rounding-description",
"widget": "NToggle",
"tab": 4,
"tabLabel": "panels.bar.title",
"subTab": 0,
"subTabLabel": "common.appearance",
"visibleWhen": [
"Settings.data.bar.barType === \"floating\""
]
},
{
"labelKey": "panels.bar.appearance-auto-hide-delay-label",
"descriptionKey": "panels.bar.appearance-auto-hide-delay-description",
Expand Down
1 change: 1 addition & 0 deletions Commons/Settings.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,7 @@ Singleton {
// Floating bar settings
property int marginVertical: 4
property int marginHorizontal: 4
property bool floatingOuterEdgeRounding: false

// Framed bar settings
property int frameThickness: 8
Expand Down
41 changes: 33 additions & 8 deletions Modules/Bar/Bar.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,11 @@ Item {
readonly property string barPosition: Settings.getBarPositionForScreen(screen?.name)
readonly property bool barIsVertical: barPosition === "left" || barPosition === "right"
readonly property bool barFloating: Settings.data.bar.barType === "floating"
readonly property bool floatingOuterEdgeRounding: barFloating && (Settings.data.bar.floatingOuterEdgeRounding ?? false)
readonly property real barFloatMarginH: barFloating ? (Settings.data.bar.marginHorizontal ?? 0) : 0
readonly property real barFloatMarginV: barFloating ? (Settings.data.bar.marginVertical ?? 0) : 0
readonly property real floatingOuterRoundingThreshold: Style.radiusL + Style.screenRadius
readonly property bool floatingOuterRoundingAllowed: barIsVertical ? (barFloatMarginV >= floatingOuterRoundingThreshold) : (barFloatMarginH >= floatingOuterRoundingThreshold)

// Bar density (per-screen)
readonly property string barDensity: Settings.getBarDensityForScreen(screen?.name)
Expand Down Expand Up @@ -224,9 +229,14 @@ Item {
// State 1: Horizontal inversion (outer curve on X-axis)
// State 2: Vertical inversion (outer curve on Y-axis)
readonly property int topLeftCornerState: {
// Floating bar: always simple rounded corners
if (barFloating)
// Floating bar: flatten corners only on side touching screen edge
if (barFloating) {
if (barPosition === "top" && root.barFloatMarginV <= 0)
return (root.floatingOuterEdgeRounding && root.floatingOuterRoundingAllowed) ? 1 : -1;
if (barPosition === "left" && root.barFloatMarginH <= 0)
return (root.floatingOuterEdgeRounding && root.floatingOuterRoundingAllowed) ? 2 : -1;
return 0;
}
// Top bar: top corners against screen edge = no radius
if (barPosition === "top")
return -1;
Expand All @@ -242,9 +252,14 @@ Item {
}

readonly property int topRightCornerState: {
// Floating bar: always simple rounded corners
if (barFloating)
// Floating bar: flatten corners only on side touching screen edge
if (barFloating) {
if (barPosition === "top" && root.barFloatMarginV <= 0)
return (root.floatingOuterEdgeRounding && root.floatingOuterRoundingAllowed) ? 1 : -1;
if (barPosition === "right" && root.barFloatMarginH <= 0)
return (root.floatingOuterEdgeRounding && root.floatingOuterRoundingAllowed) ? 2 : -1;
return 0;
}
// Top bar: top corners against screen edge = no radius
if (barPosition === "top")
return -1;
Expand All @@ -260,9 +275,14 @@ Item {
}

readonly property int bottomLeftCornerState: {
// Floating bar: always simple rounded corners
if (barFloating)
// Floating bar: flatten corners only on side touching screen edge
if (barFloating) {
if (barPosition === "bottom" && root.barFloatMarginV <= 0)
return (root.floatingOuterEdgeRounding && root.floatingOuterRoundingAllowed) ? 1 : -1;
if (barPosition === "left" && root.barFloatMarginH <= 0)
return (root.floatingOuterEdgeRounding && root.floatingOuterRoundingAllowed) ? 2 : -1;
return 0;
}
// Bottom bar: bottom corners against screen edge = no radius
if (barPosition === "bottom")
return -1;
Expand All @@ -278,9 +298,14 @@ Item {
}

readonly property int bottomRightCornerState: {
// Floating bar: always simple rounded corners
if (barFloating)
// Floating bar: flatten corners only on side touching screen edge
if (barFloating) {
if (barPosition === "bottom" && root.barFloatMarginV <= 0)
return (root.floatingOuterEdgeRounding && root.floatingOuterRoundingAllowed) ? 1 : -1;
if (barPosition === "right" && root.barFloatMarginH <= 0)
return (root.floatingOuterEdgeRounding && root.floatingOuterRoundingAllowed) ? 2 : -1;
return 0;
}
// Bottom bar: bottom corners against screen edge = no radius
if (barPosition === "bottom")
return -1;
Expand Down
33 changes: 29 additions & 4 deletions Modules/MainScreen/MainScreen.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -440,8 +440,13 @@ PanelWindow {
readonly property bool isFramed: Settings.data.bar.barType === "framed"
readonly property real frameThickness: Settings.data.bar.frameThickness ?? 12
readonly property bool barFloating: Settings.data.bar.barType === "floating"
readonly property bool floatingOuterEdgeRounding: barFloating && (Settings.data.bar.floatingOuterEdgeRounding ?? false)
readonly property real barMarginH: barFloating ? Math.floor(Settings.data.bar.marginHorizontal) : 0
readonly property real barMarginV: barFloating ? Math.floor(Settings.data.bar.marginVertical) : 0
readonly property real barFloatMarginH: barFloating ? (Settings.data.bar.marginHorizontal ?? 0) : 0
readonly property real barFloatMarginV: barFloating ? (Settings.data.bar.marginVertical ?? 0) : 0
readonly property real floatingOuterRoundingThreshold: Style.radiusL + Style.screenRadius
readonly property bool floatingOuterRoundingAllowed: barIsVertical ? (barFloatMarginV >= floatingOuterRoundingThreshold) : (barFloatMarginH >= floatingOuterRoundingThreshold)
readonly property real barHeight: Style.getBarHeightForScreen(screen?.name)

// Auto-hide properties (read by AllBackgrounds for background fade)
Expand Down Expand Up @@ -492,8 +497,13 @@ PanelWindow {

// Corner states (same as Bar.qml)
readonly property int topLeftCornerState: {
if (barFloating)
if (barFloating) {
if (barPosition === "top" && barFloatMarginV <= 0)
return (floatingOuterEdgeRounding && floatingOuterRoundingAllowed) ? 1 : -1;
if (barPosition === "left" && barFloatMarginH <= 0)
return (floatingOuterEdgeRounding && floatingOuterRoundingAllowed) ? 2 : -1;
return 0;
}
if (barPosition === "top")
return -1;
if (barPosition === "left")
Expand All @@ -505,8 +515,13 @@ PanelWindow {
}

readonly property int topRightCornerState: {
if (barFloating)
if (barFloating) {
if (barPosition === "top" && barFloatMarginV <= 0)
return (floatingOuterEdgeRounding && floatingOuterRoundingAllowed) ? 1 : -1;
if (barPosition === "right" && barFloatMarginH <= 0)
return (floatingOuterEdgeRounding && floatingOuterRoundingAllowed) ? 2 : -1;
return 0;
}
if (barPosition === "top")
return -1;
if (barPosition === "right")
Expand All @@ -518,8 +533,13 @@ PanelWindow {
}

readonly property int bottomLeftCornerState: {
if (barFloating)
if (barFloating) {
if (barPosition === "bottom" && barFloatMarginV <= 0)
return (floatingOuterEdgeRounding && floatingOuterRoundingAllowed) ? 1 : -1;
if (barPosition === "left" && barFloatMarginH <= 0)
return (floatingOuterEdgeRounding && floatingOuterRoundingAllowed) ? 2 : -1;
return 0;
}
if (barPosition === "bottom")
return -1;
if (barPosition === "left")
Expand All @@ -531,8 +551,13 @@ PanelWindow {
}

readonly property int bottomRightCornerState: {
if (barFloating)
if (barFloating) {
if (barPosition === "bottom" && barFloatMarginV <= 0)
return (floatingOuterEdgeRounding && floatingOuterRoundingAllowed) ? 1 : -1;
if (barPosition === "right" && barFloatMarginH <= 0)
return (floatingOuterEdgeRounding && floatingOuterRoundingAllowed) ? 2 : -1;
return 0;
}
if (barPosition === "bottom")
return -1;
if (barPosition === "right")
Expand Down
18 changes: 18 additions & 0 deletions Modules/Panels/Settings/Tabs/Bar/AppearanceSubTab.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,10 +297,16 @@ ColumnLayout {
}

ColumnLayout {
id: floatingSettings
visible: Settings.data.bar.barType === "floating"
spacing: Style.marginL
Layout.fillWidth: true

readonly property real floatingOuterRoundingThreshold: Style.radiusL + Style.screenRadius
readonly property bool floatingOuterRoundingAllowed: (Settings.data.bar.position === "top" || Settings.data.bar.position === "bottom")
? Settings.data.bar.marginHorizontal >= floatingOuterRoundingThreshold
: Settings.data.bar.marginVertical >= floatingOuterRoundingThreshold

NDivider {
Layout.fillWidth: true
}
Expand All @@ -326,6 +332,18 @@ ColumnLayout {
defaultValue: Settings.getDefaultValue("bar.marginHorizontal")
onValueChanged: Settings.data.bar.marginHorizontal = value
}

NToggle {
Layout.fillWidth: true
label: I18n.tr("panels.bar.appearance-floating-outer-edge-rounding-label")
description: I18n.tr("panels.bar.appearance-floating-outer-edge-rounding-description", {
minMargin: Math.ceil(floatingSettings.floatingOuterRoundingThreshold)
})
checked: Settings.data.bar.floatingOuterEdgeRounding
enabled: floatingSettings.floatingOuterRoundingAllowed
defaultValue: Settings.getDefaultValue("bar.floatingOuterEdgeRounding")
onToggled: checked => Settings.data.bar.floatingOuterEdgeRounding = checked
}
}

NDivider {
Expand Down