create icon type

This commit is contained in:
Benjamin Palko 2025-07-19 22:08:28 -04:00
parent ed9861e57d
commit 375ded5e81
2 changed files with 33 additions and 13 deletions

View file

@ -1,7 +1,9 @@
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Effects
import Quickshell.Hyprland import Quickshell.Hyprland
import "../../../config" import "../../../config"
import "../../../styled/"
Item { Item {
id: workspace id: workspace
@ -20,7 +22,7 @@ Item {
radius: Dimensions.radius radius: Dimensions.radius
states: State { states: State {
name: "hovered" name: "hovered"
when: button.hovered when: mouseArea.containsMouse
PropertyChanges { PropertyChanges {
rectangle { rectangle {
color: Theme.palette.primary color: Theme.palette.primary
@ -39,25 +41,21 @@ Item {
} }
} }
Button { Icon {
id: button id: icon
source: "/home/baobeld/dotfiles/quickshell/assets/triangle.svg"
anchors.centerIn: parent anchors.centerIn: parent
size: Dimensions.workspace.iconSize
verticalPadding: Dimensions.workspace.verticalPadding
horizontalPadding: Dimensions.workspace.horizontalPadding
background: undefined
icon.source: "/home/baobeld/dotfiles/quickshell/assets/triangle.svg"
icon.color: Theme.palette.basecontent
states: State { states: State {
name: "active" name: "active"
when: workspace.modelData.active when: workspace.modelData.active
PropertyChanges { PropertyChanges {
button { icon {
rotation: 180 rotation: 180
icon.color: button.hovered ? Theme.palette.basecontent : Theme.palette.primary color: mouseArea.containsMouse ? Theme.palette.basecontent : Theme.palette.primary
} }
} }
} }
@ -85,6 +83,7 @@ Item {
anchors.fill: parent anchors.fill: parent
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onClicked: workspace.modelData.activate() onClicked: workspace.modelData.activate()
} }
} }

21
styled/Icon.qml Normal file
View file

@ -0,0 +1,21 @@
import QtQuick
import QtQuick.Effects
import "../config/"
Image {
id: root
property int size: 18
property color color: Theme.palette.basecontent
width: size
height: size
MultiEffect {
id: effect
source: root
anchors.fill: root
colorization: 1.0
colorizationColor: color
}
}