1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-05 21:15:38 -05:00

Some styling consistencies

This commit is contained in:
bbedward
2025-09-25 15:57:56 -04:00
parent a4a59fd586
commit 25565af5f9
8 changed files with 64 additions and 92 deletions

View File

@@ -77,15 +77,12 @@ Item {
width: parent.width width: parent.width
height: parent.height - ClipboardConstants.headerHeight - 70 height: parent.height - ClipboardConstants.headerHeight - 70
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: Theme.surfaceLight color: "transparent"
border.color: Theme.outlineLight
border.width: 1
clip: true clip: true
DankListView { DankListView {
id: clipboardListView id: clipboardListView
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingS
model: filteredModel model: filteredModel
currentIndex: clipboardContent.modal ? clipboardContent.modal.selectedIndex : 0 currentIndex: clipboardContent.modal ? clipboardContent.modal.selectedIndex : 0

View File

@@ -24,17 +24,10 @@ Rectangle {
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: { color: {
if (isSelected) { if (isSelected) {
return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.2) return Theme.primaryPressed
} }
return mouseArea.containsMouse ? Theme.primaryHover : Theme.primaryBackground return mouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
} }
border.color: {
if (isSelected) {
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.5)
}
return Theme.outlineStrong
}
border.width: isSelected ? 1.5 : 1
Row { Row {
anchors.fill: parent anchors.fill: parent

View File

@@ -59,23 +59,21 @@ Item {
Column { Column {
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingL anchors.margins: Theme.spacingM
spacing: Theme.spacingL spacing: Theme.spacingM
Rectangle { Rectangle {
width: parent.width width: parent.width
height: categorySelector.height + Theme.spacingM * 2 height: categorySelector.height + Theme.spacingS * 2
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: Theme.surfaceVariantAlpha color: "transparent"
border.color: Theme.outlineMedium
border.width: 1
visible: appLauncher.categories.length > 1 || appLauncher.model.count > 0 visible: appLauncher.categories.length > 1 || appLauncher.model.count > 0
CategorySelector { CategorySelector {
id: categorySelector id: categorySelector
anchors.centerIn: parent anchors.centerIn: parent
width: parent.width - Theme.spacingM * 2 width: parent.width - Theme.spacingS * 2
categories: appLauncher.categories categories: appLauncher.categories
selectedCategory: appLauncher.selectedCategory selectedCategory: appLauncher.selectedCategory
compact: false compact: false
@@ -88,11 +86,12 @@ Item {
Row { Row {
width: parent.width width: parent.width
spacing: Theme.spacingM spacing: Theme.spacingM
leftPadding: Theme.spacingS
DankTextField { DankTextField {
id: searchField id: searchField
width: parent.width - 80 - Theme.spacingM width: parent.width - 80 - Theme.spacingL
height: 56 height: 56
cornerRadius: Theme.cornerRadius cornerRadius: Theme.cornerRadius
backgroundColor: Theme.surfaceContainerHigh backgroundColor: Theme.surfaceContainerHigh
@@ -141,8 +140,6 @@ Item {
height: 36 height: 36
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: appLauncher.viewMode === "list" ? Theme.primaryHover : listViewArea.containsMouse ? Theme.surfaceHover : "transparent" color: appLauncher.viewMode === "list" ? Theme.primaryHover : listViewArea.containsMouse ? Theme.surfaceHover : "transparent"
border.color: appLauncher.viewMode === "list" ? Theme.primarySelected : "transparent"
border.width: 1
DankIcon { DankIcon {
anchors.centerIn: parent anchors.centerIn: parent
@@ -168,8 +165,6 @@ Item {
height: 36 height: 36
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: appLauncher.viewMode === "grid" ? Theme.primaryHover : gridViewArea.containsMouse ? Theme.surfaceHover : "transparent" color: appLauncher.viewMode === "grid" ? Theme.primaryHover : gridViewArea.containsMouse ? Theme.surfaceHover : "transparent"
border.color: appLauncher.viewMode === "grid" ? Theme.primarySelected : "transparent"
border.width: 1
DankIcon { DankIcon {
anchors.centerIn: parent anchors.centerIn: parent

View File

@@ -13,9 +13,7 @@ Rectangle {
width: parent.width width: parent.width
height: parent.height - y height: parent.height - y
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: Theme.surfaceContainerHigh color: "transparent"
border.color: Theme.outlineLight
border.width: 1
DankListView { DankListView {
id: resultsList id: resultsList
@@ -75,9 +73,7 @@ Rectangle {
width: ListView.view.width width: ListView.view.width
height: resultsList.itemHeight height: resultsList.itemHeight
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: ListView.isCurrentItem ? Theme.primaryPressed : listMouseArea.containsMouse ? Theme.primaryHoverLight : "transparent" color: ListView.isCurrentItem ? Theme.primaryPressed : listMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
border.color: ListView.isCurrentItem ? Theme.primarySelected : Theme.outlineMedium
border.width: ListView.isCurrentItem ? 2 : 1
Row { Row {
anchors.fill: parent anchors.fill: parent
@@ -238,9 +234,7 @@ Rectangle {
width: resultsGrid.cellWidth - resultsGrid.cellPadding width: resultsGrid.cellWidth - resultsGrid.cellPadding
height: resultsGrid.cellHeight - resultsGrid.cellPadding height: resultsGrid.cellHeight - resultsGrid.cellPadding
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: resultsGrid.currentIndex === index ? Theme.primaryPressed : gridMouseArea.containsMouse ? Theme.primaryHoverLight : "transparent" color: resultsGrid.currentIndex === index ? Theme.primaryPressed : gridMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
border.color: resultsGrid.currentIndex === index ? Theme.primarySelected : Theme.outlineMedium
border.width: resultsGrid.currentIndex === index ? 2 : 1
Column { Column {
anchors.centerIn: parent anchors.centerIn: parent

View File

@@ -136,15 +136,16 @@ DankPopout {
} }
Column { Column {
width: parent.width - Theme.spacingL * 2 width: parent.width - Theme.spacingS * 2
height: parent.height - Theme.spacingL * 2 height: parent.height - Theme.spacingS * 2
x: Theme.spacingL x: Theme.spacingS
y: Theme.spacingL y: Theme.spacingS
spacing: Theme.spacingL spacing: Theme.spacingS
Row { Row {
width: parent.width width: parent.width
height: 40 height: 40
leftPadding: Theme.spacingS
StyledText { StyledText {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@@ -170,7 +171,8 @@ DankPopout {
DankTextField { DankTextField {
id: searchField id: searchField
width: parent.width width: parent.width - Theme.spacingS * 2
anchors.horizontalCenter: parent.horizontalCenter
height: 52 height: 52
cornerRadius: Theme.cornerRadius cornerRadius: Theme.cornerRadius
backgroundColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.7) backgroundColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.7)
@@ -231,6 +233,8 @@ DankPopout {
height: 40 height: 40
spacing: Theme.spacingM spacing: Theme.spacingM
visible: searchField.text.length === 0 visible: searchField.text.length === 0
leftPadding: Theme.spacingS
topPadding: Theme.spacingXS
Item { Item {
width: 200 width: 200
@@ -238,6 +242,9 @@ DankPopout {
DankDropdown { DankDropdown {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: Theme.spacingS
anchors.rightMargin: Theme.spacingS
anchors.bottomMargin: Theme.spacingS
text: "" text: ""
currentValue: appLauncher.selectedCategory currentValue: appLauncher.selectedCategory
options: appLauncher.categories options: appLauncher.categories
@@ -249,7 +256,7 @@ DankPopout {
} }
Item { Item {
width: parent.width - 300 width: parent.width - 310
height: 1 height: 1
} }
@@ -286,15 +293,13 @@ DankPopout {
Rectangle { Rectangle {
width: parent.width width: parent.width
height: { height: {
let usedHeight = 40 + Theme.spacingL let usedHeight = 40 + Theme.spacingS
usedHeight += 52 + Theme.spacingL usedHeight += 52 + Theme.spacingS
usedHeight += (searchField.text.length === 0 ? 40 + Theme.spacingL : 0) usedHeight += (searchField.text.length === 0 ? 40 : 0)
return parent.height - usedHeight return parent.height - usedHeight
} }
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1) color: "transparent"
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
border.width: 0
DankListView { DankListView {
id: appList id: appList
@@ -323,7 +328,9 @@ DankPopout {
} }
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingS anchors.leftMargin: Theme.spacingS
anchors.rightMargin: Theme.spacingS
anchors.bottomMargin: Theme.spacingS
visible: appLauncher.viewMode === "list" visible: appLauncher.viewMode === "list"
model: appLauncher.model model: appLauncher.model
currentIndex: appLauncher.selectedIndex currentIndex: appLauncher.selectedIndex
@@ -353,9 +360,7 @@ DankPopout {
width: ListView.view.width width: ListView.view.width
height: appList.itemHeight height: appList.itemHeight
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: ListView.isCurrentItem ? Theme.primaryPressed : listMouseArea.containsMouse ? Theme.primaryHoverLight : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.03) color: ListView.isCurrentItem ? Theme.primaryPressed : listMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
border.color: ListView.isCurrentItem ? Theme.primarySelected : Theme.outlineMedium
border.width: ListView.isCurrentItem ? 2 : 1
Row { Row {
anchors.fill: parent anchors.fill: parent
@@ -371,6 +376,7 @@ DankPopout {
id: listIconImg id: listIconImg
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingXS
source: Quickshell.iconPath(model.icon, true) source: Quickshell.iconPath(model.icon, true)
smooth: true smooth: true
asynchronous: true asynchronous: true
@@ -379,6 +385,9 @@ DankPopout {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: Theme.spacingS
anchors.rightMargin: Theme.spacingS
anchors.bottomMargin: Theme.spacingM
visible: !listIconImg.visible visible: !listIconImg.visible
color: Theme.surfaceLight color: Theme.surfaceLight
radius: Theme.cornerRadius radius: Theme.cornerRadius
@@ -425,6 +434,9 @@ DankPopout {
id: listMouseArea id: listMouseArea
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: Theme.spacingS
anchors.rightMargin: Theme.spacingS
anchors.bottomMargin: Theme.spacingM
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton acceptedButtons: Qt.LeftButton | Qt.RightButton
@@ -484,7 +496,9 @@ DankPopout {
} }
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingS anchors.leftMargin: Theme.spacingS
anchors.rightMargin: Theme.spacingS
anchors.bottomMargin: Theme.spacingS
visible: appLauncher.viewMode === "grid" visible: appLauncher.viewMode === "grid"
model: appLauncher.model model: appLauncher.model
clip: true clip: true
@@ -516,9 +530,7 @@ DankPopout {
width: appGrid.cellWidth - appGrid.cellPadding width: appGrid.cellWidth - appGrid.cellPadding
height: appGrid.cellHeight - appGrid.cellPadding height: appGrid.cellHeight - appGrid.cellPadding
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: appGrid.currentIndex === index ? Theme.primaryPressed : gridMouseArea.containsMouse ? Theme.primaryHoverLight : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.03) color: appGrid.currentIndex === index ? Theme.primaryPressed : gridMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
border.color: appGrid.currentIndex === index ? Theme.primarySelected : Theme.outlineMedium
border.width: appGrid.currentIndex === index ? 2 : 1
Column { Column {
anchors.centerIn: parent anchors.centerIn: parent
@@ -535,6 +547,9 @@ DankPopout {
id: gridIconImg id: gridIconImg
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: Theme.spacingS
anchors.rightMargin: Theme.spacingS
anchors.bottomMargin: Theme.spacingS
source: Quickshell.iconPath(model.icon, true) source: Quickshell.iconPath(model.icon, true)
smooth: true smooth: true
asynchronous: true asynchronous: true
@@ -543,6 +558,9 @@ DankPopout {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: Theme.spacingS
anchors.rightMargin: Theme.spacingS
anchors.bottomMargin: Theme.spacingS
visible: !gridIconImg.visible visible: !gridIconImg.visible
color: Theme.surfaceLight color: Theme.surfaceLight
radius: Theme.cornerRadius radius: Theme.cornerRadius
@@ -577,6 +595,9 @@ DankPopout {
id: gridMouseArea id: gridMouseArea
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: Theme.spacingS
anchors.rightMargin: Theme.spacingS
anchors.bottomMargin: Theme.spacingS
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton acceptedButtons: Qt.LeftButton | Qt.RightButton

View File

@@ -15,7 +15,7 @@ Item {
readonly property int maxCompactItems: 8 readonly property int maxCompactItems: 8
readonly property int itemHeight: 36 readonly property int itemHeight: 36
readonly property color selectedBorderColor: "transparent" readonly property color selectedBorderColor: "transparent"
readonly property color unselectedBorderColor: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3) readonly property color unselectedBorderColor: "transparent"
function handleCategoryClick(category) { function handleCategoryClick(category) {
selectedCategory = category selectedCategory = category
@@ -42,8 +42,7 @@ Item {
height: root.itemHeight height: root.itemHeight
width: root.getButtonWidth(itemCount, parent.width) width: root.getButtonWidth(itemCount, parent.width)
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: selectedCategory === modelData ? Theme.primary : "transparent" color: selectedCategory === modelData ? Theme.primary : Theme.surfaceContainerHigh
border.color: selectedCategory === modelData ? selectedBorderColor : unselectedBorderColor
StyledText { StyledText {
anchors.centerIn: parent anchors.centerIn: parent
@@ -82,7 +81,7 @@ Item {
height: root.itemHeight height: root.itemHeight
width: root.getButtonWidth(itemCount, parent.width) width: root.getButtonWidth(itemCount, parent.width)
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: selectedCategory === modelData ? Theme.primary : "transparent" color: selectedCategory === modelData ? Theme.primary : Theme.surfaceContainerHigh
border.color: selectedCategory === modelData ? selectedBorderColor : unselectedBorderColor border.color: selectedCategory === modelData ? selectedBorderColor : unselectedBorderColor
StyledText { StyledText {
@@ -118,7 +117,7 @@ Item {
height: root.itemHeight height: root.itemHeight
width: root.getButtonWidth(itemCount, parent.width) width: root.getButtonWidth(itemCount, parent.width)
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: selectedCategory === modelData ? Theme.primary : "transparent" color: selectedCategory === modelData ? Theme.primary : Theme.surfaceContainerHigh
border.color: selectedCategory === modelData ? selectedBorderColor : unselectedBorderColor border.color: selectedCategory === modelData ? selectedBorderColor : unselectedBorderColor
StyledText { StyledText {

View File

@@ -34,12 +34,6 @@ Rectangle {
} }
radius: Theme.cornerRadius radius: Theme.cornerRadius
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
Behavior on border.color { Behavior on border.color {
ColorAnimation { ColorAnimation {
@@ -50,12 +44,12 @@ Rectangle {
color: { color: {
if (isGroupSelected && keyboardNavigationActive) { if (isGroupSelected && keyboardNavigationActive) {
return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.2) return Theme.primaryPressed
} }
if (keyboardNavigationActive && expanded && selectedNotificationIndex >= 0) { if (keyboardNavigationActive && expanded && selectedNotificationIndex >= 0) {
return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.12) return Theme.primaryHoverLight
} }
return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1) return Theme.surfaceContainerHigh
} }
border.color: { border.color: {
if (isGroupSelected && keyboardNavigationActive) { if (isGroupSelected && keyboardNavigationActive) {
@@ -350,16 +344,10 @@ Rectangle {
return baseHeight return baseHeight
} }
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: isSelected ? Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.25) : "transparent" color: isSelected ? Theme.primaryPressed : Theme.surfaceContainerHigh
border.color: isSelected ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.4) : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05) border.color: isSelected ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.4) : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
border.width: isSelected ? 1 : 1 border.width: isSelected ? 1 : 1
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
Behavior on border.color { Behavior on border.color {
ColorAnimation { ColorAnimation {

View File

@@ -106,9 +106,7 @@ Item {
height: 28 height: 28
radius: Theme.cornerRadius radius: Theme.cornerRadius
visible: NotificationService.notifications.length > 0 visible: NotificationService.notifications.length > 0
color: clearArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3) color: clearArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
border.color: clearArea.containsMouse ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
border.width: 1
Row { Row {
anchors.centerIn: parent anchors.centerIn: parent
@@ -139,19 +137,6 @@ Item {
onClicked: NotificationService.clearAllNotifications() onClicked: NotificationService.clearAllNotifications()
} }
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
Behavior on border.color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
} }
} }
} }