EricKotato/sddm-slice
1
0
Fork 0
Code Issues Releases 7 Wiki Activity

SlicedButton rework

Browse source
This commit is contained in:
Eric Kotato 2018-09-10 17:03:24 +03:00
parent c2d2a37074
commit a554c49b75
2 changed files with 45 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
slice/Main.qml
View file

@ -126,7 +126,7 @@ Rectangle
x: 5
y: 5
hasLeftSlice: false
skewLeft: 0
text: debug.hostName ? debug.hostName : "Hostname"
enabled: debug.canPowerOff || debug.canReboot || debug.canSuspend || debug.canHibernate || debug.canHybridSleep
@ -248,7 +248,7 @@ Rectangle
x: 5
y: areaBottom.height - height - 5
hasLeftSlice: false
skewLeft: 0
text: "Caps Lock"
highlighted: keyboard.capsLock
@ -291,6 +291,7 @@ Rectangle
SlicedButton
{
id: buttonWeekday
enabled: false
x: 5
y: areaBottom.height - height - 5
@ -306,6 +307,7 @@ Rectangle
SlicedButton
{
id: buttonDate
enabled: false
x: buttonWeekday.x + buttonWeekday.widthPartial + 3
y: areaBottom.height - height - 5
@ -321,10 +323,11 @@ Rectangle
SlicedButton
{
id: buttonTime
enabled: false
x: buttonDate.x + buttonDate.widthPartial + 3
y: areaBottom.height - height - 5
hasRightSlice: false
skewRight: 0
function updateTime()
{

151
slice/SlicedButton.qml
View file

@ -15,15 +15,13 @@ Item
property string text: ""
property bool hasLeftSlice: true
property bool hasRightSlice: true
property bool highlighted: false
readonly property int skew: 15
property int skewLeft: 15
property int skewRight: 15
readonly property int paddingLeft: hasLeftSlice ? skew : 5
readonly property int paddingLeft: Math.max(Math.abs(skewLeft), 5)
property int paddingTop: 3
readonly property int paddingRight: hasRightSlice ? skew : 5
readonly property int paddingRight: Math.max(Math.abs(skewRight), 5)
readonly property int widthFull: buttonText.width + paddingLeft + paddingRight
readonly property int widthPartial: buttonText.width + paddingLeft
@ -50,8 +48,7 @@ Item
onHighlightedChanged:
{
buttonBgSliceLeft.requestPaint()
buttonBgSliceRight.requestPaint()
buttonBg.requestPaint()
}
onTextChanged:
@ -67,19 +64,7 @@ Item
name: "idle"
PropertyChanges
{
target: buttonBgSliceLeft;
bgColor: highlighted ? bgIdleHighlighted : bgIdle
}
PropertyChanges
{
target: buttonBgCenter;
color: highlighted ? bgIdleHighlighted : bgIdle
}
PropertyChanges
{
target: buttonBgSliceRight;
target: buttonBg;
bgColor: highlighted ? bgIdleHighlighted : bgIdle
}
@ -94,19 +79,7 @@ Item
name: "hover"
PropertyChanges
{
target: buttonBgSliceLeft;
bgColor: highlighted ? bgHoverHighlighted : bgHover
}
PropertyChanges
{
target: buttonBgCenter;
color: highlighted ? bgHoverHighlighted : bgHover
}
PropertyChanges
{
target: buttonBgSliceRight;
target: buttonBg;
bgColor: highlighted ? bgHoverHighlighted : bgHover
}
@ -120,107 +93,63 @@ Item
Canvas
{
id: buttonBgSliceLeft
id: buttonBg
width: paddingLeft
width: widthFull
height: parent.height
property string bgColor: colors.buttonBg
onPaint:
{
var context = getContext("2d")
var context = getContext("2d");
context.clearRect(0, 0, width, height);
context.fillStyle = bgColor
context.beginPath()
if (buttonRoot.hasLeftSlice)
context.moveTo(paddingLeft, 0)
else
{
context.moveTo(0, 0)
context.lineTo(paddingLeft, 0)
context.moveTo(paddingLeft, height);
if (skewLeft > 0) {
context.lineTo(0, height);
context.lineTo(skewLeft, 0);
} else if (skewLeft < 0) {
context.lineTo(Math.abs(skewLeft), height);
context.lineTo(0, 0);
} else {
context.lineTo(0, height);
context.lineTo(0, 0);
}
context.lineTo(paddingLeft, height)
context.lineTo(0, height)
context.lineTo(widthPartial, 0);
if (skewRight > 0) {
context.lineTo(width, 0);
context.lineTo(width-skewRight, height);
} else if (skewRight < 0) {
context.lineTo(width+skewRight, 0);
context.lineTo(width, height);
} else {
context.lineTo(width, 0);
context.lineTo(width, height);
}
context.lineTo(paddingLeft, height);
context.closePath()
context.fill()
}
Behavior on x
{
PropertyAnimation { duration: 100 }
}
}
Rectangle
{
id: buttonBgCenter
color: colors.buttonBg
x: paddingLeft
width: buttonText.width
height: parent.height
Behavior on width
{
PropertyAnimation
{
duration: 100
onStopped:
{
buttonRoot.showTextAnimation.start()
}
}
}
Behavior on x
{
PropertyAnimation { duration: 100 }
}
}
Canvas
{
id: buttonBgSliceRight
x: widthPartial
width: paddingRight
height: parent.height
property string bgColor: colors.buttonBg
onPaint:
{
var context = getContext("2d")
context.clearRect(0, 0, paddingRight, height);
context.fillStyle = bgColor
context.beginPath()
context.moveTo(0, 0)
context.lineTo(paddingRight, 0)
if (!buttonRoot.hasRightSlice)
context.lineTo(paddingRight, height)
context.lineTo(0, height)
context.closePath()
context.fill()
}
Behavior on x
{
PropertyAnimation { duration: 100 }
}
}
Text
{
id: buttonText
@ -244,15 +173,13 @@ Item
onEntered:
{
buttonRoot.state = "hover"
buttonBgSliceLeft.requestPaint()
buttonBgSliceRight.requestPaint()
buttonBg.requestPaint()
}
onExited:
{
buttonRoot.state = "idle"
buttonBgSliceLeft.requestPaint()
buttonBgSliceRight.requestPaint()
buttonBg.requestPaint()
}
onClicked: buttonRoot.clicked()