Add NWidgetCard, fix some BarTab things
This commit is contained in:
Ly-sec
parent
377ed4a627
commit
cbbfbcf671
2 changed files with 182 additions and 374 deletions
|
|
@ -162,386 +162,36 @@ ColumnLayout {
|
|||
spacing: Style.marginM * scaling
|
||||
|
||||
// Left Section
|
||||
NCard {
|
||||
Layout.fillWidth: true
|
||||
Layout.minimumHeight: {
|
||||
var widgetCount = Settings.data.bar.widgets.left.length
|
||||
if (widgetCount === 0)
|
||||
return 140 * scaling
|
||||
|
||||
var availableWidth = scrollView.availableWidth - (Style.marginM * scaling * 2) // Card margins
|
||||
var avgWidgetWidth = 150 * scaling // Estimated widget width including spacing
|
||||
var widgetsPerRow = Math.max(1, Math.floor(availableWidth / avgWidgetWidth))
|
||||
var rows = Math.ceil(widgetCount / widgetsPerRow)
|
||||
|
||||
// Header (50) + spacing (20) + (rows * widget height) + (rows-1 * spacing) + bottom margin (20)
|
||||
return (50 + 20 + (rows * 48) + ((rows - 1) * Style.marginS) + 20) * scaling
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: Style.marginM * scaling
|
||||
spacing: Style.marginM * scaling
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
text: "Left Section"
|
||||
font.pointSize: Style.fontSizeL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
NComboBox {
|
||||
id: leftComboBox
|
||||
width: 120 * scaling
|
||||
model: availableWidgets
|
||||
label: ""
|
||||
description: ""
|
||||
placeholder: "Add widget to left section"
|
||||
onSelected: key => {
|
||||
addWidgetToSection(key, "left")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Flow {
|
||||
id: leftWidgetsFlow
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.minimumHeight: 65 * scaling
|
||||
spacing: Style.marginS * scaling
|
||||
flow: Flow.LeftToRight
|
||||
|
||||
Repeater {
|
||||
model: Settings.data.bar.widgets.left
|
||||
delegate: Rectangle {
|
||||
width: widgetContent.implicitWidth + 16 * scaling
|
||||
height: 48 * scaling
|
||||
radius: Style.radiusS * scaling
|
||||
color: Color.mPrimary
|
||||
border.color: Color.mOutline
|
||||
border.width: Math.max(1, Style.borderS * scaling)
|
||||
|
||||
RowLayout {
|
||||
id: widgetContent
|
||||
anchors.centerIn: parent
|
||||
spacing: Style.marginXS * scaling
|
||||
|
||||
NIconButton {
|
||||
icon: "chevron_left"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
enabled: index > 0
|
||||
onClicked: {
|
||||
if (index > 0) {
|
||||
reorderWidgetInSection("left", index, index - 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
NText {
|
||||
text: modelData
|
||||
font.pointSize: Style.fontSizeS * scaling
|
||||
color: Color.mOnPrimary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
NIconButton {
|
||||
icon: "chevron_right"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
enabled: index < Settings.data.bar.widgets.left.length - 1
|
||||
onClicked: {
|
||||
if (index < Settings.data.bar.widgets.left.length - 1) {
|
||||
reorderWidgetInSection("left", index, index + 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
NIconButton {
|
||||
icon: "close"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
onClicked: {
|
||||
removeWidgetFromSection("left", index)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
NWidgetCard {
|
||||
sectionName: "Left"
|
||||
widgetModel: Settings.data.bar.widgets.left
|
||||
availableWidgets: availableWidgets
|
||||
scrollView: scrollView
|
||||
onAddWidget: (widgetName, section) => addWidgetToSection(widgetName, section)
|
||||
onRemoveWidget: (section, index) => removeWidgetFromSection(section, index)
|
||||
onReorderWidget: (section, fromIndex, toIndex) => reorderWidgetInSection(section, fromIndex, toIndex)
|
||||
}
|
||||
|
||||
// Center Section
|
||||
NCard {
|
||||
Layout.fillWidth: true
|
||||
Layout.minimumHeight: {
|
||||
var widgetCount = Settings.data.bar.widgets.center.length
|
||||
if (widgetCount === 0)
|
||||
return 140 * scaling
|
||||
|
||||
var availableWidth = scrollView.availableWidth - (Style.marginM * scaling * 2) // Card margins
|
||||
var avgWidgetWidth = 150 * scaling // Estimated widget width including spacing
|
||||
var widgetsPerRow = Math.max(1, Math.floor(availableWidth / avgWidgetWidth))
|
||||
var rows = Math.ceil(widgetCount / widgetsPerRow)
|
||||
|
||||
// Header (50) + spacing (20) + (rows * widget height) + (rows-1 * spacing) + bottom margin (20)
|
||||
return (50 + 20 + (rows * 48) + ((rows - 1) * Style.marginS) + 20) * scaling
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: Style.marginM * scaling
|
||||
spacing: Style.marginM * scaling
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
text: "Center Section"
|
||||
font.pointSize: Style.fontSizeL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
NComboBox {
|
||||
id: centerComboBox
|
||||
width: 120 * scaling
|
||||
model: availableWidgets
|
||||
label: ""
|
||||
description: ""
|
||||
placeholder: "Add widget to center section"
|
||||
onSelected: key => {
|
||||
addWidgetToSection(key, "center")
|
||||
reset() // Reset selection
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Flow {
|
||||
id: centerWidgetsFlow
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.minimumHeight: 65 * scaling
|
||||
spacing: Style.marginS * scaling
|
||||
flow: Flow.LeftToRight
|
||||
|
||||
Repeater {
|
||||
model: Settings.data.bar.widgets.center
|
||||
delegate: Rectangle {
|
||||
width: widgetContent.implicitWidth + 16 * scaling
|
||||
height: 48 * scaling
|
||||
radius: Style.radiusS * scaling
|
||||
color: Color.mPrimary
|
||||
border.color: Color.mOutline
|
||||
border.width: Math.max(1, Style.borderS * scaling)
|
||||
|
||||
RowLayout {
|
||||
id: widgetContent
|
||||
anchors.centerIn: parent
|
||||
spacing: Style.marginXS * scaling
|
||||
|
||||
NIconButton {
|
||||
icon: "chevron_left"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
enabled: index > 0
|
||||
onClicked: {
|
||||
if (index > 0) {
|
||||
reorderWidgetInSection("center", index, index - 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
NText {
|
||||
text: modelData
|
||||
font.pointSize: Style.fontSizeS * scaling
|
||||
color: Color.mOnPrimary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
NIconButton {
|
||||
icon: "chevron_right"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
enabled: index < Settings.data.bar.widgets.center.length - 1
|
||||
onClicked: {
|
||||
if (index < Settings.data.bar.widgets.center.length - 1) {
|
||||
reorderWidgetInSection("center", index, index + 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
NIconButton {
|
||||
icon: "close"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
onClicked: {
|
||||
removeWidgetFromSection("center", index)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
NWidgetCard {
|
||||
sectionName: "Center"
|
||||
widgetModel: Settings.data.bar.widgets.center
|
||||
availableWidgets: availableWidgets
|
||||
scrollView: scrollView
|
||||
onAddWidget: (widgetName, section) => addWidgetToSection(widgetName, section)
|
||||
onRemoveWidget: (section, index) => removeWidgetFromSection(section, index)
|
||||
onReorderWidget: (section, fromIndex, toIndex) => reorderWidgetInSection(section, fromIndex, toIndex)
|
||||
}
|
||||
|
||||
// Right Section
|
||||
NCard {
|
||||
Layout.fillWidth: true
|
||||
Layout.minimumHeight: {
|
||||
var widgetCount = Settings.data.bar.widgets.right.length
|
||||
if (widgetCount === 0)
|
||||
return 140 * scaling
|
||||
|
||||
var availableWidth = scrollView.availableWidth - (Style.marginM * scaling * 2) // Card margins
|
||||
var avgWidgetWidth = 150 * scaling // Estimated widget width including spacing
|
||||
var widgetsPerRow = Math.max(1, Math.floor(availableWidth / avgWidgetWidth))
|
||||
var rows = Math.ceil(widgetCount / widgetsPerRow)
|
||||
|
||||
// Header (50) + spacing (20) + (rows * widget height) + (rows-1 * spacing) + bottom margin (20)
|
||||
return (50 + 20 + (rows * 48) + ((rows - 1) * Style.marginS) + 20) * scaling
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: Style.marginM * scaling
|
||||
spacing: Style.marginM * scaling
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
text: "Right Section"
|
||||
font.pointSize: Style.fontSizeL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
NComboBox {
|
||||
id: rightComboBox
|
||||
width: 120 * scaling
|
||||
model: availableWidgets
|
||||
label: ""
|
||||
description: ""
|
||||
placeholder: "Add widget to right section"
|
||||
onSelected: key => {
|
||||
addWidgetToSection(key, "right")
|
||||
reset() // Reset selection
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Flow {
|
||||
id: rightWidgetsFlow
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.minimumHeight: 65 * scaling
|
||||
spacing: Style.marginS * scaling
|
||||
flow: Flow.LeftToRight
|
||||
|
||||
Repeater {
|
||||
model: Settings.data.bar.widgets.right
|
||||
delegate: Rectangle {
|
||||
width: widgetContent.implicitWidth + 16 * scaling
|
||||
height: 48 * scaling
|
||||
radius: Style.radiusS * scaling
|
||||
color: Color.mPrimary
|
||||
border.color: Color.mOutline
|
||||
border.width: Math.max(1, Style.borderS * scaling)
|
||||
|
||||
RowLayout {
|
||||
id: widgetContent
|
||||
anchors.centerIn: parent
|
||||
spacing: Style.marginXS * scaling
|
||||
|
||||
NIconButton {
|
||||
icon: "chevron_left"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
enabled: index > 0
|
||||
onClicked: {
|
||||
if (index > 0) {
|
||||
reorderWidgetInSection("right", index, index - 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
NText {
|
||||
text: modelData
|
||||
font.pointSize: Style.fontSizeS * scaling
|
||||
color: Color.mOnPrimary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
NIconButton {
|
||||
icon: "chevron_right"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
enabled: index < Settings.data.bar.widgets.right.length - 1
|
||||
onClicked: {
|
||||
if (index < Settings.data.bar.widgets.right.length - 1) {
|
||||
reorderWidgetInSection("right", index, index + 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
NIconButton {
|
||||
icon: "close"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
onClicked: {
|
||||
removeWidgetFromSection("right", index)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
NWidgetCard {
|
||||
sectionName: "Right"
|
||||
widgetModel: Settings.data.bar.widgets.right
|
||||
availableWidgets: availableWidgets
|
||||
scrollView: scrollView
|
||||
onAddWidget: (widgetName, section) => addWidgetToSection(widgetName, section)
|
||||
onRemoveWidget: (section, index) => removeWidgetFromSection(section, index)
|
||||
onReorderWidget: (section, fromIndex, toIndex) => reorderWidgetInSection(section, fromIndex, toIndex)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue