mirror of
https://github.com/zoriya/noctalia-shell.git
synced 2026-08-15 18:43:59 +00:00
Bar: improved "mini" density look
This commit is contained in:
@@ -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()
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user