mirror of
https://github.com/end-4/dots-hyprland.git
synced 2026-06-05 14:59:27 -05:00
nuke primarytab
This commit is contained in:
end-4
@@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user