diff --git a/dots/.config/quickshell/ii/modules/common/widgets/PrimaryTabBar.qml b/dots/.config/quickshell/ii/modules/common/widgets/PrimaryTabBar.qml deleted file mode 100644 index d606c9e17..000000000 --- a/dots/.config/quickshell/ii/modules/common/widgets/PrimaryTabBar.qml +++ /dev/null @@ -1,92 +0,0 @@ -import qs.modules.common -import qs.services -import QtQuick -import QtQuick.Controls -import QtQuick.Layouts -import Qt.labs.synchronizer - -ColumnLayout { - id: root - spacing: 0 - required property var tabButtonList // Something like [{"icon": "notifications", "name": Translation.tr("Notifications")}, {"icon": "volume_up", "name": Translation.tr("Volume mixer")}] - property alias currentIndex: tabBar.currentIndex - property bool enableIndicatorAnimation: false - property color colIndicator: Appearance?.colors.colPrimary ?? "#65558F" - property color colBorder: Appearance?.m3colors.m3outlineVariant ?? "#C6C6D0" - - onCurrentIndexChanged: { - enableIndicatorAnimation = true - } - - property bool centerTabBar: parent.width > 500 - Layout.fillWidth: !centerTabBar - Layout.alignment: Qt.AlignHCenter - implicitWidth: Math.max(tabBar.implicitWidth, 600) - - TabBar { - id: tabBar - Layout.fillWidth: true - - background: Item { - WheelHandler { - onWheel: (event) => { - if (event.angleDelta.y < 0) - tabBar.incrementCurrentIndex() - else if (event.angleDelta.y > 0) - tabBar.decrementCurrentIndex() - } - acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad - } - } - - Repeater { - model: root.tabButtonList - delegate: PrimaryTabButton { - selected: (index == root.currentIndex) - buttonText: modelData.name - buttonIcon: modelData.icon - minimumWidth: 160 - onClicked: tabBar.setCurrentIndex(index) - } - } - } - - Item { // Tab indicator - id: tabIndicator - Layout.fillWidth: true - height: 3 - - Rectangle { - id: indicator - property int tabCount: root.tabButtonList.length - property real fullTabSize: root.width / tabCount; - property real targetWidth: tabBar.contentItem?.children[0]?.children[tabBar.currentIndex]?.tabContentWidth ?? 0 - - implicitWidth: targetWidth - anchors { - top: parent.top - bottom: parent.bottom - } - - x: tabBar.currentIndex * fullTabSize + (fullTabSize - targetWidth) / 2 - - color: root.colIndicator - radius: Appearance?.rounding.full ?? 9999 - - Behavior on x { - animation: Appearance?.animation.elementMove.numberAnimation.createObject(this) - } - - Behavior on implicitWidth { - animation: Appearance?.animation.elementMove.numberAnimation.createObject(this) - } - } - } - - Rectangle { // Tabbar bottom border - id: tabBarBottomBorder - Layout.fillWidth: true - implicitHeight: 1 - color: root.colBorder - } -} diff --git a/dots/.config/quickshell/ii/modules/common/widgets/PrimaryTabButton.qml b/dots/.config/quickshell/ii/modules/common/widgets/PrimaryTabButton.qml deleted file mode 100644 index bedcc2d92..000000000 --- a/dots/.config/quickshell/ii/modules/common/widgets/PrimaryTabButton.qml +++ /dev/null @@ -1,172 +0,0 @@ -import qs.modules.common -import qs.modules.common.widgets -import qs.modules.common.functions -import Qt5Compat.GraphicalEffects -import QtQuick -import QtQuick.Controls -import QtQuick.Layouts - -TabButton { - id: button - property string buttonText - property string buttonIcon - property real minimumWidth: 110 - property bool selected: false - property int tabContentWidth: contentItem.children[0].implicitWidth - property int rippleDuration: 1200 - height: buttonBackground.height - implicitWidth: Math.max(tabContentWidth, buttonBackground.implicitWidth, minimumWidth) - - property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "transparent" - property color colBackgroundHover: Appearance?.colors.colLayer1Hover ?? "#E5DFED" - property color colRipple: Appearance?.colors.colLayer1Active ?? "#D6CEE2" - property color colActive: Appearance?.colors.colPrimary ?? "#65558F" - property color colInactive: Appearance?.colors.colOnLayer1 ?? "#45464F" - - component RippleAnim: NumberAnimation { - duration: rippleDuration - easing.type: Appearance?.animation.elementMoveEnter.type - easing.bezierCurve: Appearance?.animationCurves.standardDecel - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onPressed: (event) => { - button.click() // Because the MouseArea already consumed the event - const {x,y} = event - const stateY = buttonBackground.y; - rippleAnim.x = x; - rippleAnim.y = y - stateY; - - const dist = (ox,oy) => ox*ox + oy*oy - const stateEndY = stateY + buttonBackground.height - rippleAnim.radius = Math.sqrt(Math.max(dist(0, stateY), dist(0, stateEndY), dist(width, stateY), dist(width, stateEndY))) - - rippleFadeAnim.complete(); - rippleAnim.restart(); - } - onReleased: (event) => { - rippleFadeAnim.restart(); - } - } - - RippleAnim { - id: rippleFadeAnim - duration: rippleDuration * 2 - target: ripple - property: "opacity" - to: 0 - } - - SequentialAnimation { - id: rippleAnim - - property real x - property real y - property real radius - - PropertyAction { - target: ripple - property: "x" - value: rippleAnim.x - } - PropertyAction { - target: ripple - property: "y" - value: rippleAnim.y - } - PropertyAction { - target: ripple - property: "opacity" - value: 1 - } - ParallelAnimation { - RippleAnim { - target: ripple - properties: "implicitWidth,implicitHeight" - from: 0 - to: rippleAnim.radius * 2 - } - } - } - - background: Rectangle { - id: buttonBackground - radius: Appearance?.rounding.small - implicitHeight: 50 - color: (button.hovered ? button.colBackgroundHover : button.colBackground) - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: buttonBackground.width - height: buttonBackground.height - radius: buttonBackground.radius - } - } - - Behavior on color { - animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this) - } - - Item { - id: ripple - width: ripple.implicitWidth - height: ripple.implicitHeight - opacity: 0 - - property real implicitWidth: 0 - property real implicitHeight: 0 - visible: width > 0 && height > 0 - - Behavior on opacity { - animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this) - } - - RadialGradient { - anchors.fill: parent - gradient: Gradient { - GradientStop { position: 0.0; color: button.colRipple } - GradientStop { position: 0.3; color: button.colRipple } - GradientStop { position: 0.5 ; color: Qt.rgba(button.colRipple.r, button.colRipple.g, button.colRipple.b, 0) } - } - } - - transform: Translate { - x: -ripple.width / 2 - y: -ripple.height / 2 - } - } - } - - contentItem: Item { - anchors.centerIn: buttonBackground - ColumnLayout { - anchors.centerIn: parent - spacing: 0 - MaterialSymbol { - visible: buttonIcon?.length > 0 - Layout.alignment: Qt.AlignHCenter - horizontalAlignment: Text.AlignHCenter - text: buttonIcon - iconSize: Appearance?.font.pixelSize.hugeass ?? 25 - fill: selected ? 1 : 0 - color: selected ? button.colActive : button.colInactive - Behavior on color { - animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this) - } - } - StyledText { - id: buttonTextWidget - Layout.alignment: Qt.AlignHCenter - horizontalAlignment: Text.AlignHCenter - font.pixelSize: Appearance?.font.pixelSize.small - color: selected ? button.colActive : button.colInactive - text: buttonText - Behavior on color { - animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this) - } - } - } - } -} \ No newline at end of file