Bar: improved "mini" density look

This commit is contained in:
ItsLemmy
2025-10-13 20:16:18 -04:00
parent 4e11f4e2e6
commit 00509170ef
29 changed files with 95 additions and 54 deletions
+3 -3
View File
@@ -12,13 +12,13 @@ Item {
property string text: ""
property string suffix: ""
property string tooltipText: ""
property string density: ""
property bool autoHide: false
property bool forceOpen: false
property bool forceClose: false
property bool disableOpen: false
property bool rightOpen: false
property bool hovered: false
property bool compact: false
readonly property string barPosition: Settings.data.bar.position
readonly property bool isVerticalBar: barPosition === "left" || barPosition === "right"
@@ -54,7 +54,7 @@ Item {
disableOpen: root.disableOpen
rightOpen: root.rightOpen
hovered: root.hovered
compact: root.compact
density: root.density
onShown: root.shown()
onHidden: root.hidden()
onEntered: root.entered()
@@ -79,7 +79,7 @@ Item {
disableOpen: root.disableOpen
rightOpen: root.rightOpen
hovered: root.hovered
compact: root.compact
density: root.density
onShown: root.shown()
onHidden: root.hidden()
onEntered: root.entered()
+25 -8
View File
@@ -14,13 +14,13 @@ Item {
property string text: ""
property string suffix: ""
property string tooltipText: ""
property string density: ""
property bool autoHide: false
property bool forceOpen: false
property bool forceClose: false
property bool disableOpen: false
property bool rightOpen: false
property bool hovered: false
property bool compact: false
// Effective shown state (true if hovered/animated open or forced)
readonly property bool revealed: !forceClose && (forceOpen || showPill)
@@ -41,10 +41,25 @@ Item {
readonly property int pillHeight: Style.capsuleHeight
readonly property int pillPaddingHorizontal: Math.round(Style.capsuleHeight * 0.2)
readonly property int pillOverlap: Math.round(Style.capsuleHeight * 0.5)
readonly property int pillMaxWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap)
readonly property int pillMaxWidth: Math.max(1, Math.round(textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap))
readonly property real iconSize: Math.max(1, compact ? pillHeight * 0.65 : pillHeight * 0.48)
readonly property real textSize: Math.max(1, compact ? pillHeight * 0.45 : pillHeight * 0.33)
readonly property real iconSize: {
switch (root.density) {
case "compact":
return Math.max(1, Math.round(pillHeight * 0.65))
default:
return Math.max(1, Math.round(pillHeight * 0.48))
}
}
readonly property real textSize: {
switch (root.density) {
case "compact":
return Math.max(1, Math.round(pillHeight * 0.45))
default:
return Math.max(1, Math.round(pillHeight * 0.33))
}
}
width: pillHeight + Math.max(0, pill.width - pillOverlap)
height: pillHeight
@@ -68,10 +83,12 @@ Item {
opacity: revealed ? Style.opacityFull : Style.opacityNone
color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
topLeftRadius: rightOpen ? 0 : pillHeight * 0.5
bottomLeftRadius: rightOpen ? 0 : pillHeight * 0.5
topRightRadius: rightOpen ? pillHeight * 0.5 : 0
bottomRightRadius: rightOpen ? pillHeight * 0.5 : 0
readonly property int halfPillHeight: Math.round(pillHeight * 0.5)
topLeftRadius: rightOpen ? 0 : halfPillHeight
bottomLeftRadius: rightOpen ? 0 : halfPillHeight
topRightRadius: rightOpen ? halfPillHeight : 0
bottomRightRadius: rightOpen ? halfPillHeight : 0
anchors.verticalCenter: parent.verticalCenter
NText {
+27 -10
View File
@@ -12,13 +12,13 @@ Item {
property string text: ""
property string suffix: ""
property string tooltipText: ""
property string density: ""
property bool autoHide: false
property bool forceOpen: false
property bool forceClose: false
property bool disableOpen: false
property bool rightOpen: false
property bool hovered: false
property bool compact: false
// Bar position detection for pill direction
readonly property string barPosition: Settings.data.bar.position
@@ -48,12 +48,27 @@ Item {
readonly property int buttonSize: Style.capsuleHeight
readonly property int pillHeight: buttonSize
readonly property int pillPaddingVertical: 3 * 2 // Very precise adjustment don't replace by Style.margin
readonly property int pillOverlap: buttonSize * 0.5
readonly property int pillOverlap: Math.round(buttonSize * 0.5)
readonly property int maxPillWidth: buttonSize
readonly property int maxPillHeight: Math.max(1, textItem.implicitHeight + pillPaddingVertical * 4)
readonly property int maxPillHeight: Math.max(1, Math.round(textItem.implicitHeight + pillPaddingVertical * 4))
readonly property real iconSize: Math.max(1, compact ? pillHeight * 0.65 : pillHeight * 0.48)
readonly property real textSize: Math.max(1, compact ? pillHeight * 0.38 : pillHeight * 0.33)
readonly property real iconSize: {
switch (root.density) {
case "compact":
return Math.max(1, Math.round(pillHeight * 0.65))
default:
return Math.max(1, Math.round(pillHeight * 0.48))
}
}
readonly property real textSize: {
switch (root.density) {
case "compact":
return Math.max(1, Math.round(pillHeight * 0.38))
default:
return Math.max(1, Math.round(pillHeight * 0.33))
}
}
// For vertical bars: width is just icon size, height includes pill space
width: buttonSize
@@ -79,11 +94,13 @@ Item {
opacity: revealed ? Style.opacityFull : Style.opacityNone
color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
readonly property int halfButtonSize: Math.round(buttonSize * 0.5)
// Radius logic for vertical expansion - rounded on the side that connects to icon
topLeftRadius: openUpward ? buttonSize * 0.5 : 0
bottomLeftRadius: openDownward ? buttonSize * 0.5 : 0
topRightRadius: openUpward ? buttonSize * 0.5 : 0
bottomRightRadius: openDownward ? buttonSize * 0.5 : 0
topLeftRadius: openUpward ? halfButtonSize : 0
bottomLeftRadius: openDownward ? halfButtonSize : 0
topRightRadius: openUpward ? halfButtonSize : 0
bottomRightRadius: openDownward ? halfButtonSize : 0
anchors.horizontalCenter: parent.horizontalCenter
@@ -92,7 +109,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: {
var offset = openDownward ? pillPaddingVertical * 0.75 : -pillPaddingVertical * 0.75
var offset = openDownward ? Math.round(pillPaddingVertical * 0.75) : -Math.round(pillPaddingVertical * 0.75)
if (forceOpen) {
// If its force open, the icon disc background is the same color as the bg pill move text slightly
offset += rightOpen ? -Style.marginXXS : Style.marginXXS