Members of the KDE Community are recommended to subscribe to the kde-community mailing list at https://mail.kde.org/mailman/listinfo/kde-community to allow them to participate in important discussions and receive other important announcements

Commit 7b26061f authored by Nate Graham's avatar Nate Graham 🔩

[Kickoff] Add a subtle separator line between the header and the content view

Summary: This is another idea that shook out of D15011: add subtle lines to separate the main content area from both the tab bar and the header, giving Kickoff some much-needed structure while still not overwhelming the user with lines and frames and chrome.

Test Plan:
Tested with Kickoff on a panel on all four different sides of the screen, and with Breeze light and Breeze dark themes.

Examples with the default panel:
{F6348699}
{F6347337}

Example with the panel on the right side: {F6347340}

Reviewers: #plasma, #vdg

Subscribers: abetts, mmustac, hein, plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D15206
parent 7e4a07d2
......@@ -32,6 +32,7 @@ import org.kde.plasma.private.kicker 0.1 as Kicker
Item {
anchors.fill: parent
anchors.topMargin: units.largeSpacing
objectName: "FavoritesView"
......
......@@ -116,6 +116,20 @@ Item {
id: header
}
Rectangle {
id: headerSeparator
height: Math.floor(units.devicePixelRatio)
color: Qt.tint(PlasmaCore.ColorScope.textColor, Qt.rgba(PlasmaCore.ColorScope.backgroundColor.r, PlasmaCore.ColorScope.backgroundColor.g, PlasmaCore.ColorScope.backgroundColor.b, 0.7))
width: root.width
anchors {
top: header.top
horizontalCenter: header.horizontalCenter
}
}
Item {
id: mainArea
anchors.topMargin: mainTabGroup.state == "top" ? units.smallSpacing : 0
......@@ -213,6 +227,20 @@ Item {
bottom: header.top
}
}
PropertyChanges {
target:tabBarSeparator
width: Math.floor(units.devicePixelRatio)
height: root.height
}
AnchorChanges {
target: tabBarSeparator
anchors {
left: tabBar.right
top: tabBar.top
right: undefined
bottom: tabBar.bottom
}
}
},
State {
name: "top"
......@@ -249,6 +277,20 @@ Item {
bottom: undefined
}
}
PropertyChanges {
target:tabBarSeparator
width: root.width
height: Math.floor(units.devicePixelRatio)
}
AnchorChanges {
target: tabBarSeparator
anchors {
left: root.left
top: tabBar.bottom
right: root.right
bottom: undefined
}
}
},
State {
name: "right"
......@@ -285,6 +327,20 @@ Item {
bottom: header.top
}
}
PropertyChanges {
target:tabBarSeparator
width: Math.floor(units.devicePixelRatio)
height: root.height
}
AnchorChanges {
target: tabBarSeparator
anchors {
left: undefined
top: tabBar.top
right: tabBar.left
bottom: tabBar.bottom
}
}
},
State {
name: "bottom"
......@@ -301,6 +357,14 @@ Item {
target: header
height: header.implicitHeight
}
AnchorChanges {
target: headerSeparator
anchors {
top: undefined
bottom: header.bottom
horizontalCenter: header.horizontalCenter
}
}
AnchorChanges {
target: mainArea
......@@ -321,6 +385,20 @@ Item {
bottom: root.bottom
}
}
PropertyChanges {
target:tabBarSeparator
width: root.width
height: Math.floor(units.devicePixelRatio)
}
AnchorChanges {
target: tabBarSeparator
anchors {
left: root.left
top: undefined
right: root.right
bottom: tabBar.top
}
}
}
]
} // mainTabGroup
......@@ -396,6 +474,20 @@ Item {
}
} // tabBar
Rectangle {
id: tabBarSeparator
width: root.width
height: Math.floor(units.devicePixelRatio)
color: Qt.tint(PlasmaCore.ColorScope.textColor, Qt.rgba(PlasmaCore.ColorScope.backgroundColor.r, PlasmaCore.ColorScope.backgroundColor.g, PlasmaCore.ColorScope.backgroundColor.b, 0.7))
anchors {
top: header.top
left: root.left
right: root.right
}
}
MouseArea {
anchors.fill: tabBar
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment