Bar density: leftover files from previous commit
This commit is contained in:
parent
ac1902c76a
commit
b52451fde5
4 changed files with 34 additions and 22 deletions
|
|
@ -14,6 +14,7 @@ Rectangle {
|
||||||
property bool enabled: true
|
property bool enabled: true
|
||||||
property bool allowClickWhenDisabled: false
|
property bool allowClickWhenDisabled: false
|
||||||
property bool hovering: false
|
property bool hovering: false
|
||||||
|
property bool compact: false
|
||||||
|
|
||||||
property color colorBg: Color.mSurfaceVariant
|
property color colorBg: Color.mSurfaceVariant
|
||||||
property color colorFg: Color.mPrimary
|
property color colorFg: Color.mPrimary
|
||||||
|
|
@ -32,7 +33,7 @@ Rectangle {
|
||||||
implicitHeight: Math.round(baseSize * scaling)
|
implicitHeight: Math.round(baseSize * scaling)
|
||||||
|
|
||||||
opacity: root.enabled ? Style.opacityFull : Style.opacityMedium
|
opacity: root.enabled ? Style.opacityFull : Style.opacityMedium
|
||||||
color: root.enabled && root.hovering ? colorBgHover : colorBg
|
color: root.enabled && root.hovering ? colorBgHover : root.compact ? Color.transparent : colorBg
|
||||||
radius: width * 0.5
|
radius: width * 0.5
|
||||||
border.color: root.enabled && root.hovering ? colorBorderHover : colorBorder
|
border.color: root.enabled && root.hovering ? colorBorderHover : colorBorder
|
||||||
border.width: Math.max(1, Style.borderS * scaling)
|
border.width: Math.max(1, Style.borderS * scaling)
|
||||||
|
|
@ -46,7 +47,7 @@ Rectangle {
|
||||||
|
|
||||||
NIcon {
|
NIcon {
|
||||||
icon: root.icon
|
icon: root.icon
|
||||||
font.pointSize: Math.max(1, root.width * 0.48)
|
font.pointSize: Math.max(1, root.compact ? root.width * 0.65 : root.width * 0.48)
|
||||||
color: root.enabled && root.hovering ? colorFgHover : colorFg
|
color: root.enabled && root.hovering ? colorFgHover : colorFg
|
||||||
// Center horizontally
|
// Center horizontally
|
||||||
x: (root.width - width) / 2
|
x: (root.width - width) / 2
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@ Item {
|
||||||
property bool disableOpen: false
|
property bool disableOpen: false
|
||||||
property bool rightOpen: false
|
property bool rightOpen: false
|
||||||
property bool hovered: false
|
property bool hovered: false
|
||||||
|
property bool compact: false
|
||||||
|
|
||||||
readonly property string barPosition: Settings.data.bar.position
|
readonly property string barPosition: Settings.data.bar.position
|
||||||
readonly property bool isVerticalBar: barPosition === "left" || barPosition === "right"
|
readonly property bool isVerticalBar: barPosition === "left" || barPosition === "right"
|
||||||
|
|
@ -51,6 +52,7 @@ Item {
|
||||||
disableOpen: root.disableOpen
|
disableOpen: root.disableOpen
|
||||||
rightOpen: root.rightOpen
|
rightOpen: root.rightOpen
|
||||||
hovered: root.hovered
|
hovered: root.hovered
|
||||||
|
compact: root.compact
|
||||||
onShown: root.shown()
|
onShown: root.shown()
|
||||||
onHidden: root.hidden()
|
onHidden: root.hidden()
|
||||||
onEntered: root.entered()
|
onEntered: root.entered()
|
||||||
|
|
@ -75,6 +77,7 @@ Item {
|
||||||
disableOpen: root.disableOpen
|
disableOpen: root.disableOpen
|
||||||
rightOpen: root.rightOpen
|
rightOpen: root.rightOpen
|
||||||
hovered: root.hovered
|
hovered: root.hovered
|
||||||
|
compact: root.compact
|
||||||
onShown: root.shown()
|
onShown: root.shown()
|
||||||
onHidden: root.hidden()
|
onHidden: root.hidden()
|
||||||
onEntered: root.entered()
|
onEntered: root.entered()
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@ Item {
|
||||||
property bool disableOpen: false
|
property bool disableOpen: false
|
||||||
property bool rightOpen: false
|
property bool rightOpen: false
|
||||||
property bool hovered: false
|
property bool hovered: false
|
||||||
|
property bool compact: false
|
||||||
|
|
||||||
// Effective shown state (true if hovered/animated open or forced)
|
// Effective shown state (true if hovered/animated open or forced)
|
||||||
readonly property bool revealed: forceOpen || showPill
|
readonly property bool revealed: forceOpen || showPill
|
||||||
|
|
@ -38,6 +39,9 @@ Item {
|
||||||
readonly property int pillOverlap: Math.round(Style.capsuleHeight * 0.5 * scaling)
|
readonly property int pillOverlap: Math.round(Style.capsuleHeight * 0.5 * scaling)
|
||||||
readonly property int pillMaxWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap)
|
readonly property int pillMaxWidth: Math.max(1, 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)
|
||||||
|
|
||||||
width: pillHeight + Math.max(0, pill.width - pillOverlap)
|
width: pillHeight + Math.max(0, pill.width - pillOverlap)
|
||||||
height: pillHeight
|
height: pillHeight
|
||||||
|
|
||||||
|
|
@ -50,7 +54,7 @@ Item {
|
||||||
(iconCircle.x + iconCircle.width / 2) - width // Opens left
|
(iconCircle.x + iconCircle.width / 2) - width // Opens left
|
||||||
|
|
||||||
opacity: revealed ? Style.opacityFull : Style.opacityNone
|
opacity: revealed ? Style.opacityFull : Style.opacityNone
|
||||||
color: Color.mSurfaceVariant
|
color: compact ? Color.transparent : Color.mSurfaceVariant
|
||||||
|
|
||||||
topLeftRadius: rightOpen ? 0 : pillHeight * 0.5
|
topLeftRadius: rightOpen ? 0 : pillHeight * 0.5
|
||||||
bottomLeftRadius: rightOpen ? 0 : pillHeight * 0.5
|
bottomLeftRadius: rightOpen ? 0 : pillHeight * 0.5
|
||||||
|
|
@ -73,7 +77,7 @@ Item {
|
||||||
}
|
}
|
||||||
text: root.text + root.suffix
|
text: root.text + root.suffix
|
||||||
font.family: Settings.data.ui.fontFixed
|
font.family: Settings.data.ui.fontFixed
|
||||||
font.pointSize: Math.max(1, root.pillHeight * 0.33)
|
font.pointSize: textSize
|
||||||
font.weight: Style.fontWeightBold
|
font.weight: Style.fontWeightBold
|
||||||
color: forceOpen ? Color.mOnSurface : Color.mPrimary
|
color: forceOpen ? Color.mOnSurface : Color.mPrimary
|
||||||
visible: revealed
|
visible: revealed
|
||||||
|
|
@ -100,7 +104,7 @@ Item {
|
||||||
width: pillHeight
|
width: pillHeight
|
||||||
height: pillHeight
|
height: pillHeight
|
||||||
radius: width * 0.5
|
radius: width * 0.5
|
||||||
color: hovered ? Color.mTertiary : Color.mSurfaceVariant
|
color: hovered ? Color.mTertiary : compact ? Color.transparent : Color.mSurfaceVariant
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
|
||||||
x: rightOpen ? 0 : (parent.width - width)
|
x: rightOpen ? 0 : (parent.width - width)
|
||||||
|
|
@ -114,7 +118,7 @@ Item {
|
||||||
|
|
||||||
NIcon {
|
NIcon {
|
||||||
icon: root.icon
|
icon: root.icon
|
||||||
font.pointSize: Math.max(1, pillHeight * 0.5)
|
font.pointSize: iconSize
|
||||||
color: hovered ? Color.mOnTertiary : Color.mOnSurface
|
color: hovered ? Color.mOnTertiary : Color.mOnSurface
|
||||||
// Center horizontally
|
// Center horizontally
|
||||||
x: (iconCircle.width - width) / 2
|
x: (iconCircle.width - width) / 2
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@ Item {
|
||||||
property bool disableOpen: false
|
property bool disableOpen: false
|
||||||
property bool rightOpen: false
|
property bool rightOpen: false
|
||||||
property bool hovered: false
|
property bool hovered: false
|
||||||
|
property bool compact: false
|
||||||
|
|
||||||
// Bar position detection for pill direction
|
// Bar position detection for pill direction
|
||||||
readonly property string barPosition: Settings.data.bar.position
|
readonly property string barPosition: Settings.data.bar.position
|
||||||
|
|
@ -42,16 +43,19 @@ Item {
|
||||||
property bool shouldAnimateHide: false
|
property bool shouldAnimateHide: false
|
||||||
|
|
||||||
// Sizing logic for vertical bars
|
// Sizing logic for vertical bars
|
||||||
readonly property int iconSize: Math.round(Style.capsuleHeight * scaling)
|
readonly property int buttonSize: Math.round(Style.capsuleHeight * scaling)
|
||||||
readonly property int pillHeight: iconSize
|
readonly property int pillHeight: buttonSize
|
||||||
readonly property int pillPaddingVertical: 3 * 2 * scaling // Very precise adjustment don't replace by Style.margin
|
readonly property int pillPaddingVertical: 3 * 2 * scaling // Very precise adjustment don't replace by Style.margin
|
||||||
readonly property int pillOverlap: iconSize * 0.5
|
readonly property int pillOverlap: buttonSize * 0.5
|
||||||
readonly property int maxPillWidth: iconSize
|
readonly property int maxPillWidth: buttonSize
|
||||||
readonly property int maxPillHeight: Math.max(1, textItem.implicitHeight + pillPaddingVertical * 4)
|
readonly property int maxPillHeight: Math.max(1, 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)
|
||||||
|
|
||||||
// For vertical bars: width is just icon size, height includes pill space
|
// For vertical bars: width is just icon size, height includes pill space
|
||||||
width: iconSize
|
width: buttonSize
|
||||||
height: revealed ? (iconSize + maxPillHeight - pillOverlap) : iconSize
|
height: revealed ? (buttonSize + maxPillHeight - pillOverlap) : buttonSize
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: pill
|
id: pill
|
||||||
|
|
@ -63,13 +67,13 @@ Item {
|
||||||
y: openUpward ? (iconCircle.y + iconCircle.height / 2 - height) : (iconCircle.y + iconCircle.height / 2)
|
y: openUpward ? (iconCircle.y + iconCircle.height / 2 - height) : (iconCircle.y + iconCircle.height / 2)
|
||||||
|
|
||||||
opacity: revealed ? Style.opacityFull : Style.opacityNone
|
opacity: revealed ? Style.opacityFull : Style.opacityNone
|
||||||
color: Color.mSurfaceVariant
|
color: compact ? Color.transparent : Color.mSurfaceVariant
|
||||||
|
|
||||||
// Radius logic for vertical expansion - rounded on the side that connects to icon
|
// Radius logic for vertical expansion - rounded on the side that connects to icon
|
||||||
topLeftRadius: openUpward ? iconSize * 0.5 : 0
|
topLeftRadius: openUpward ? buttonSize * 0.5 : 0
|
||||||
bottomLeftRadius: openDownward ? iconSize * 0.5 : 0
|
bottomLeftRadius: openDownward ? buttonSize * 0.5 : 0
|
||||||
topRightRadius: openUpward ? iconSize * 0.5 : 0
|
topRightRadius: openUpward ? buttonSize * 0.5 : 0
|
||||||
bottomRightRadius: openDownward ? iconSize * 0.5 : 0
|
bottomRightRadius: openDownward ? buttonSize * 0.5 : 0
|
||||||
|
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
|
||||||
|
|
@ -87,7 +91,7 @@ Item {
|
||||||
}
|
}
|
||||||
text: root.text + root.suffix
|
text: root.text + root.suffix
|
||||||
font.family: Settings.data.ui.fontFixed
|
font.family: Settings.data.ui.fontFixed
|
||||||
font.pointSize: Style.fontSizeXXS * scaling
|
font.pointSize: textSize
|
||||||
font.weight: Style.fontWeightMedium
|
font.weight: Style.fontWeightMedium
|
||||||
horizontalAlignment: Text.AlignHCenter
|
horizontalAlignment: Text.AlignHCenter
|
||||||
verticalAlignment: Text.AlignVCenter
|
verticalAlignment: Text.AlignVCenter
|
||||||
|
|
@ -120,10 +124,10 @@ Item {
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: iconCircle
|
id: iconCircle
|
||||||
width: iconSize
|
width: buttonSize
|
||||||
height: iconSize
|
height: buttonSize
|
||||||
radius: width * 0.5
|
radius: width * 0.5
|
||||||
color: hovered ? Color.mTertiary : Color.mSurfaceVariant
|
color: hovered ? Color.mTertiary : compact ? Color.transparent : Color.mSurfaceVariant
|
||||||
|
|
||||||
// Icon positioning based on direction
|
// Icon positioning based on direction
|
||||||
x: 0
|
x: 0
|
||||||
|
|
@ -139,7 +143,7 @@ Item {
|
||||||
|
|
||||||
NIcon {
|
NIcon {
|
||||||
icon: root.icon
|
icon: root.icon
|
||||||
font.pointSize: Style.fontSizeM * scaling
|
font.pointSize: iconSize
|
||||||
color: hovered ? Color.mOnTertiary : Color.mOnSurface
|
color: hovered ? Color.mOnTertiary : Color.mOnSurface
|
||||||
// Center horizontally
|
// Center horizontally
|
||||||
x: (iconCircle.width - width) / 2
|
x: (iconCircle.width - width) / 2
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue