diff --git a/slice/Main.qml b/slice/Main.qml index 0100847..baaed22 100644 --- a/slice/Main.qml +++ b/slice/Main.qml @@ -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() { diff --git a/slice/SlicedButton.qml b/slice/SlicedButton.qml index 02d3fa0..e644595 100644 --- a/slice/SlicedButton.qml +++ b/slice/SlicedButton.qml @@ -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()