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

Padding, spacing & offset configs added; skew changed to be a gradient instead of a distance; arbitrary numbers reduced and better math implemented

Browse source
This commit is contained in:
Cam B 2020-01-01 10:16:55 +00:00
parent 5c7b0f62a3
commit c793cd06bd
5 changed files with 647 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

303
slice/Main.qml
View file

@ -7,54 +7,154 @@ Rectangle
id: root
color: colors.background
property variant geometry: screenModel.geometry(screenModel.primary)
state: "stateUsers"
property string powerState: "statePower"
property string sessionsState: "stateSessions"
property string usersState: "stateUsers"
property string firstStateReal:
{
if (normalizeState(config.first_state))
return normalizeState(config.first_state)
else return powerState
}
property string secondStateReal:
{
if (normalizeState(config.second_state))
return normalizeState(config.second_state)
else return sessionsState
}
property string thirdStateReal:
{
if (normalizeState(config.third_state))
return normalizeState(config.third_state)
else return usersState
}
property string firstState:
{
if (firstStateReal === powerState
&& ! powerStateEnabled) return secondStateReal
else return firstStateReal
}
property string secondState:
{
if ((secondStateReal === powerState || firstStateReal === powerState)
&& ! powerStateEnabled) return thirdStateReal
else return secondStateReal
}
property string thirdState:
{
if ((thirdStateReal === powerState || secondStateReal === powerState || firstStateReal === powerState)
&& ! powerStateEnabled) return false
else return thirdStateReal
}
function normalizeState(state) {
if (! state) return false;
state = state.toLowerCase();
switch (state)
{
case "statepower":
case "pagepower":
case "power":
case "system":
return powerState;
break;
case "statesessions":
case "pagesessions":
case "sessions":
case "desktop":
case "environment":
return sessionsState;
break;
case "stateusers":
case "pageusers":
case "users":
case "login":
return usersState;
break;
}
return false;
}
function getPage(state) {
switch (normalizeState(state))
{
case powerState:
return pagePower;
break;
case sessionsState:
return pageSessions;
break;
case usersState:
return pageUsers;
break;
}
return false;
}
function getButton(state) {
switch (normalizeState(state))
{
case powerState:
return buttonPagePower;
break;
case sessionsState:
return buttonPageSessions;
break;
case usersState:
return buttonPageUsers;
break;
}
return false;
}
state: usersState
states:
[
State
{
name: "statePower"
name: firstStateReal
PropertyChanges { target: background; x: (config.parallax_bg_shift < 0 ? geometry.x - Math.abs(config.parallax_bg_shift*2) : geometry.x ) }
PropertyChanges { target: pagePower; enabled: true ; focus: true ; x: 0 }
PropertyChanges { target: pageSessions; enabled: false; focus: false; x: areaMain.width }
PropertyChanges { target: pageUsers; enabled: false; focus: false; x: areaMain.width * 2 }
PropertyChanges { target: getPage(firstStateReal); enabled: true ; focus: true ; x: 0 }
PropertyChanges { target: getPage(secondStateReal); enabled: false; focus: false; x: areaMain.width }
PropertyChanges { target: getPage(thirdStateReal); enabled: false; focus: false; x: areaMain.width * 2 }
PropertyChanges { target: buttonPagePower; highlighted: true }
PropertyChanges { target: buttonPageSessions; highlighted: false }
PropertyChanges { target: buttonPageUsers; highlighted: false }
PropertyChanges { target: getButton(firstStateReal); highlighted: true }
PropertyChanges { target: getButton(secondStateReal); highlighted: false }
PropertyChanges { target: getButton(thirdStateReal); highlighted: false }
},
State
{
name: "stateSessions"
name: secondStateReal
PropertyChanges { target: background; x: geometry.x - Math.abs(config.parallax_bg_shift) }
PropertyChanges { target: pagePower; enabled: false; focus: false; x: -areaMain.width }
PropertyChanges { target: pageSessions; enabled: true ; focus: true ; x: 0 }
PropertyChanges { target: pageUsers; enabled: false; focus: false; x: areaMain.width }
PropertyChanges { target: getPage(firstStateReal); enabled: false; focus: false; x: -areaMain.width }
PropertyChanges { target: getPage(secondStateReal); enabled: true ; focus: true ; x: 0 }
PropertyChanges { target: getPage(thirdStateReal); enabled: false; focus: false; x: areaMain.width }
PropertyChanges { target: buttonPagePower; highlighted: false }
PropertyChanges { target: buttonPageSessions; highlighted: true }
PropertyChanges { target: buttonPageUsers; highlighted: false }
PropertyChanges { target: getButton(firstStateReal); highlighted: false }
PropertyChanges { target: getButton(secondStateReal); highlighted: true }
PropertyChanges { target: getButton(thirdStateReal); highlighted: false }
},
State
{
name: "stateUsers"
name: thirdStateReal
PropertyChanges { target: background; x: (config.parallax_bg_shift > 0 ? geometry.x - Math.abs(config.parallax_bg_shift*2) : geometry.x ) }
PropertyChanges { target: pagePower; enabled: false; focus: false; x: -areaMain.width * 2 }
PropertyChanges { target: pageSessions; enabled: false; focus: false; x: -areaMain.width }
PropertyChanges { target: pageUsers; enabled: true ; focus: true ; x: 0 }
PropertyChanges { target: getPage(firstStateReal); enabled: false; focus: false; x: -areaMain.width * 2 }
PropertyChanges { target: getPage(secondStateReal); enabled: false; focus: false; x: -areaMain.width }
PropertyChanges { target: getPage(thirdStateReal); enabled: true ; focus: true ; x: 0 }
PropertyChanges { target: buttonPagePower; highlighted: false }
PropertyChanges { target: buttonPageSessions; highlighted: false }
PropertyChanges { target: buttonPageUsers; highlighted: true }
PropertyChanges { target: getButton(firstStateReal); highlighted: false }
PropertyChanges { target: getButton(secondStateReal); highlighted: false }
PropertyChanges { target: getButton(thirdStateReal); highlighted: true }
}
]
property bool powerStateEnabled: debug.canPowerOff || debug.canReboot || debug.canSuspend || debug.canHibernate || debug.canHybridSleep
function bool(str) {
if (str === null || str === undefined)
@ -109,6 +209,7 @@ Rectangle
Behavior on x { NumberAnimation { duration: 150 } }
}
SizeScheme { id: sizes }
ColorScheme { id: colors }
FontScheme { id: fonts }
@ -118,48 +219,71 @@ Rectangle
x: 0
y: 0
width: root.width
height: Math.max(buttonPagePower.height, buttonPageSessions.height, buttonPageUsers.height) + 10
height: Math.max(buttonPagePower.height, buttonPageSessions.height, buttonPageUsers.height) + sizes.offsetVerticalSlicesTop + 5
SlicedButton
{
id: buttonPagePower
x: 5
y: 5
x: sizes.offsetHorizontalSlicesTop
y: sizes.offsetVerticalSlicesTop
skewRight: sizes.skewSlicesTop
skewLeft: 0
text: debug.hostName ? debug.hostName : "Hostname"
enabled: debug.canPowerOff || debug.canReboot || debug.canSuspend || debug.canHibernate || debug.canHybridSleep
enabled: powerStateEnabled
onClicked: if (enabled) root.state = "statePower"
onClicked: if (enabled) root.state = powerState
font: fonts.slicesTop
paddingLeft: sizes.paddingLeftSlicesTop
paddingRight: sizes.paddingRightSlicesTop
paddingTop: sizes.paddingTopSlicesTop
paddingBottom: sizes.paddingBottomSlicesTop
}
SlicedButton
{
id: buttonPageSessions
x: buttonPagePower.x + buttonPagePower.widthPartial + 3
y: 5
x: buttonPagePower.x + buttonPagePower.widthPartial + sizes.spacingSlicesTop
y: sizes.offsetVerticalSlicesTop
skewLeft: sizes.skewSlicesTop
skewRight: sizes.skewSlicesTop
text: pageSessions.currentSessionName
onClicked: root.state = "stateSessions"
onClicked: root.state = sessionsState
font: fonts.slicesTop
paddingLeft: sizes.paddingLeftSlicesTop
paddingRight: sizes.paddingRightSlicesTop
paddingTop: sizes.paddingTopSlicesTop
paddingBottom: sizes.paddingBottomSlicesTop
}
SlicedButton
{
id: buttonPageUsers
x: buttonPagePower.x + buttonPagePower.widthPartial + buttonPageSessions.widthPartial + 6
y: 5
x: buttonPagePower.x + buttonPagePower.widthPartial + buttonPageSessions.widthPartial + ( sizes.spacingSlicesTop * 2)
y: sizes.offsetVerticalSlicesTop
skewLeft: sizes.skewSlicesTop
skewRight: sizes.skewSlicesTop
text: pageUsers.currentUserLogin
onClicked: root.state = "stateUsers"
onClicked: root.state = usersState
font: fonts.slicesTop
paddingLeft: sizes.paddingLeftSlicesTop
paddingRight: sizes.paddingRightSlicesTop
paddingTop: sizes.paddingTopSlicesTop
paddingBottom: sizes.paddingBottomSlicesTop
}
}
@ -190,7 +314,7 @@ Rectangle
onSelectedIndexChanged: pageUsers.selectedSessionIndex = selectedIndex
onSessionSelected: root.state = "stateUsers"
onSessionSelected: root.state = usersState
}
PageUsers
@ -224,23 +348,33 @@ Rectangle
SlicedButton
{
id: buttonCapsLock
x: 5
y: areaBottom.height - height - 5
x: sizes.offsetHorizontalSlicesBottomLeft
y: areaBottom.height - height - sizes.offsetVerticalSlicesBottomLeft
skewRight: sizes.skewSlicesBottomLeft
skewLeft: 0
text: "Caps Lock"
highlighted: keyboard.capsLock
onClicked: keyboard.capsLock = !keyboard.capsLock
font: fonts.slicesBottomLeft
paddingLeft: sizes.paddingLeftSlicesBottomLeft
paddingRight: sizes.paddingRightSlicesBottomLeft
paddingTop: sizes.paddingTopSlicesBottomLeft
paddingBottom: sizes.paddingBottomSlicesBottomLeft
}
SlicedButton
{
id: buttonNumLock
x: buttonCapsLock.x + buttonCapsLock.widthPartial + 3
y: areaBottom.height - height - 5
x: buttonCapsLock.x + buttonCapsLock.widthPartial + sizes.spacingSlicesBottomLeft
y: areaBottom.height - height - sizes.offsetVerticalSlicesBottomLeft
skewLeft: sizes.skewSlicesBottomLeft
skewRight: sizes.skewSlicesBottomLeft
text: "Num Lock"
highlighted: keyboard.numLock
@ -248,13 +382,21 @@ Rectangle
onClicked: keyboard.numLock = !keyboard.numLock
font: fonts.slicesBottomLeft
paddingLeft: sizes.paddingLeftSlicesBottomLeft
paddingRight: sizes.paddingRightSlicesBottomLeft
paddingTop: sizes.paddingTopSlicesBottomLeft
paddingBottom: sizes.paddingBottomSlicesBottomLeft
}
SlicedButton
{
id: buttonKeyboardLayout
x: buttonNumLock.x + buttonNumLock.widthPartial + 3
y: areaBottom.height - height - 5
x: buttonNumLock.x + buttonNumLock.widthPartial + sizes.spacingSlicesBottomLeft
y: areaBottom.height - height - sizes.offsetVerticalSlicesBottomLeft
skewLeft: sizes.skewSlicesBottomLeft
skewRight: sizes.skewSlicesBottomLeft
text: keyboard.layouts[keyboard.currentLayout].longName
onClicked: {
@ -265,20 +407,28 @@ Rectangle
}
font: fonts.slicesBottomLeft
paddingLeft: sizes.paddingLeftSlicesBottomLeft
paddingRight: sizes.paddingRightSlicesBottomLeft
paddingTop: sizes.paddingTopSlicesBottomLeft
paddingBottom: sizes.paddingBottomSlicesBottomLeft
}
Item
{
id: dateTimeArea
x: areaBottom.width - width
width: buttonWeekday.widthPartial + buttonDate.widthPartial + buttonTime.widthPartial + 21
width: buttonWeekday.widthPartial + buttonDate.widthPartial + buttonTime.widthPartial + ( sizes.spacingSlicesBottomRight * 2 ) + sizes.offsetHorizontalSlicesBottomRight
SlicedButton
{
id: buttonWeekday
enabled: false
x: 5
y: areaBottom.height - height - 5
x: 0
y: areaBottom.height - height - sizes.offsetVerticalSlicesBottomRight
skewLeft: sizes.skewSlicesBottomRight
skewRight: sizes.skewSlicesBottomRight
function updateTime()
{
@ -287,14 +437,22 @@ Rectangle
}
font: fonts.slicesBottomRight
paddingLeft: sizes.paddingLeftSlicesBottomRight
paddingRight: sizes.paddingRightSlicesBottomRight
paddingTop: sizes.paddingTopSlicesBottomRight
paddingBottom: sizes.paddingBottomSlicesBottomRight
}
SlicedButton
{
id: buttonDate
enabled: false
x: buttonWeekday.x + buttonWeekday.widthPartial + 3
y: areaBottom.height - height - 5
x: buttonWeekday.x + buttonWeekday.widthPartial + sizes.spacingSlicesBottomRight
y: areaBottom.height - height - sizes.offsetVerticalSlicesBottomRight
skewLeft: sizes.skewSlicesBottomRight
skewRight: sizes.skewSlicesBottomRight
function updateTime()
{
@ -303,15 +461,21 @@ Rectangle
}
font: fonts.slicesBottomRight
paddingLeft: sizes.paddingLeftSlicesBottomRight
paddingRight: sizes.paddingRightSlicesBottomRight
paddingTop: sizes.paddingTopSlicesBottomRight
paddingBottom: sizes.paddingBottomSlicesBottomRight
}
SlicedButton
{
id: buttonTime
enabled: false
x: buttonDate.x + buttonDate.widthPartial + 3
y: areaBottom.height - height - 5
x: buttonDate.x + buttonDate.widthPartial + sizes.spacingSlicesBottomRight
y: areaBottom.height - height - sizes.offsetVerticalSlicesBottomRight
skewLeft: sizes.skewSlicesBottomRight
skewRight: 0
function updateTime()
@ -321,6 +485,11 @@ Rectangle
}
font: fonts.slicesBottomRight
paddingLeft: sizes.paddingLeftSlicesBottomRight
paddingRight: sizes.paddingRightSlicesBottomRight
paddingTop: sizes.paddingTopSlicesBottomRight
paddingBottom: sizes.paddingBottomSlicesBottomRight
}
}
@ -350,26 +519,26 @@ Rectangle
id: scrollMouseArea
anchors.fill: parent
propagateComposedEvents: true
enabled: root.state != "stateUsers" || !pageUsers.hasLoginShown
enabled: root.state != usersState || !pageUsers.hasLoginShown
onWheel:
{
switch (root.state)
{
case "statePower":
case powerState:
if (wheel.angleDelta.y < 0)
pagePower.scroll_up()
else
pagePower.scroll_down()
break
case "stateSessions":
case sessionsState:
if (wheel.angleDelta.y < 0)
pageSessions.scroll_up()
else
pageSessions.scroll_down()
break
case "stateUsers":
case usersState:
if (!pageUsers.hasLoginShown)
{
if (wheel.angleDelta.y < 0)
@ -385,16 +554,16 @@ Rectangle
function nextScreen() {
switch(root.state)
{
case "statePower":
root.state = "stateSessions";
case firstState:
root.state = secondState;
break;
case "stateSessions":
root.state = "stateUsers";
case secondState:
root.state = (thirdState) ? thirdState : firstState;
break;
case "stateUsers":
root.state = (buttonPagePower.enabled) ? "statePower" : "stateSessions";
case thirdState:
root.state = firstState;
break;
}
}
@ -402,16 +571,16 @@ Rectangle
function previousScreen() {
switch(root.state)
{
case "statePower":
root.state = "stateUsers";
case firstState:
root.state = (thirdState) ? thirdState : secondState;
break;
case secondState:
root.state = firstState;
break;
case "stateSessions":
root.state = (buttonPagePower.enabled) ? "statePower" : "stateUsers";
break;
case "stateUsers":
root.state = "stateSessions";
case thirdState:
root.state = secondState;
break;
}
}

29
slice/PageUsers.qml
View file

@ -302,6 +302,7 @@ Item
selectedTextColor: colors.inputSelectionText
echoMode: TextInput.Password
passwordCharacter: config.password_character ? config.password_character : false
clip: true
selectByMouse: true
@ -373,9 +374,12 @@ Item
SlicedButton
{
id: buttonUserLogin
x: userListContainer.width - widthFull
y: progressBar.y + progressBar.height + 2
paddingTop: 2
x: userListContainer.width - widthFull - sizes.offsetHorizontalSlicesLoginButtons
y: progressBar.y + progressBar.height + sizes.offsetVerticalSlicesLoginButtons
skewLeft: sizes.skewSlicesLoginButtons
skewRight: sizes.skewSlicesLoginButtons
highlighted: true
opacity: hasLoginShown ? 1 : 0
@ -384,14 +388,22 @@ Item
onClicked: select_or_login()
font: fonts.slicesLoginButtons
paddingLeft: sizes.paddingLeftSlicesLoginButtons
paddingRight: sizes.paddingRightSlicesLoginButtons
paddingTop: sizes.paddingTopSlicesLoginButtons
paddingBottom: sizes.paddingBottomSlicesLoginButtons
}
SlicedButton
{
id: buttonUserBack
x: userListContainer.width - widthFull - buttonUserLogin.widthPartial - 3
x: userListContainer.width - widthFull - buttonUserLogin.widthPartial - sizes.spacingSlicesLoginButtons - sizes.offsetHorizontalSlicesLoginButtons
y: buttonUserLogin.y
paddingTop: 2
skewLeft: sizes.skewSlicesLoginButtons
skewRight: sizes.skewSlicesLoginButtons
opacity: hasLoginShown ? 1 : 0
visible: !manual
@ -400,6 +412,11 @@ Item
onClicked: back_to_selection()
font: fonts.slicesLoginButtons
paddingLeft: sizes.paddingLeftSlicesLoginButtons
paddingRight: sizes.paddingRightSlicesLoginButtons
paddingTop: sizes.paddingTopSlicesLoginButtons
paddingBottom: sizes.paddingBottomSlicesLoginButtons
}
}
@ -754,4 +771,4 @@ Item
}
Keys.onEscapePressed: back_to_selection()
}
}

355
slice/SizeScheme.qml Normal file
View file

@ -0,0 +1,355 @@
import QtQuick 2.7
Item
{
/* * * * * * * * * * * * * * * * * *
*
* Functions
*
* * * * * * * * * * * * * * * * * */
function not_null(str) {
return !(str === null || str === undefined);
}
/* * * * * * * * * * * * * * * * * *
*
* Layer 0 options
* Defaults / Fallbacks
*
* * * * * * * * * * * * * * * * * */
property int defaultSkewSlices: 26
property int defaultPaddingSlices: 0
property int defaultSpacingSlices: 3
property int defaultOffsetSlices: 5
/* * * * * * * * * * * * * * * * * *
*
* Layer 2 options
* Common
*
* * * * * * * * * * * * * * * * * */
// Offset
property int offsetSlices:
{
if (not_null(config.offset_slices)) return config.offset_slices
else return defaultOffsetSlices
}
property int offsetSlicesTop:
{
if (not_null(config.offset_slices_top)) return config.offset_slices_top
else return offsetSlices
}
property int offsetHorizontalSlicesTop:
{
if (not_null(config.offset_horizontal_slices_top)) return config.offset_horizontal_slices_top
else return offsetSlicesTop
}
property int offsetVerticalSlicesTop:
{
if (not_null(config.offset_vertical_slices_top)) return config.offset_vertical_slices_top
else return offsetSlicesTop
}
property int offsetSlicesBottomRight:
{
if (not_null(config.offset_slices_bottom_right)) return config.offset_slices_bottom_right
else return offsetSlices
}
property int offsetHorizontalSlicesBottomRight:
{
if (not_null(config.offset_horizontal_slices_bottom_right)) return config.offset_horizontal_slices_bottom_right
else return offsetSlicesBottomRight
}
property int offsetVerticalSlicesBottomRight:
{
if (not_null(config.offset_vertical_slices_bottom_right)) return config.offset_vertical_slices_bottom_right
else return offsetSlicesBottomRight
}
property int offsetSlicesBottomLeft:
{
if (not_null(config.offset_slices_bottom_left)) return config.offset_slices_bottom_left
else return offsetSlices
}
property int offsetHorizontalSlicesBottomLeft:
{
if (not_null(config.offset_horizontal_slices_bottom_left)) return config.offset_horizontal_slices_bottom_left
else return offsetSlicesBottomLeft
}
property int offsetVerticalSlicesBottomLeft:
{
if (not_null(config.offset_vertical_slices_bottom_left)) return config.offset_vertical_slices_bottom_left
else return offsetSlicesBottomLeft
}
property int offsetSlicesLoginButtons:
{
if (not_null(config.offset_slices_login_buttons)) return config.offset_slices_login_buttons
else return offsetSlices
}
property int offsetHorizontalSlicesLoginButtons:
{
if (not_null(config.offset_horizontal_slices_login_buttons)) return config.offset_horizontal_slices_login_buttons
else return offsetSlicesLoginButtons
}
property int offsetVerticalSlicesLoginButtons:
{
if (not_null(config.offset_vertical_slices_login_buttons)) return config.offset_vertical_slices_login_buttons
else return offsetSlicesLoginButtons
}
// Spacing
property int spacingSlices:
{
if (not_null(config.spacing_slices)) return config.spacing_slices
else return defaultSpacingSlices
}
property int spacingSlicesTop:
{
if (not_null(config.spacing_slices_top)) return config.spacing_slices_top
else return spacingSlices
}
property int spacingSlicesBottomRight:
{
if (not_null(config.spacing_slices_bottom_right)) return config.spacing_slices_bottom_right
else return spacingSlices
}
property int spacingSlicesBottomLeft:
{
if (not_null(config.spacing_slices_bottom_left)) return config.spacing_slices_bottom_left
else return spacingSlices
}
property int spacingSlicesLoginButtons:
{
if (not_null(config.spacing_slices_login_buttons)) return config.spacing_slices_login_buttons
else return spacingSlices
}
// Skew
property int skewSlices:
{
if (not_null(config.skew_slices)) return config.skew_slices
else return defaultSkewSlices
}
property int skewSlicesTop:
{
if (not_null(config.skew_slices_top)) return config.skew_slices_top
else return skewSlices
}
property int skewSlicesBottomLeft:
{
if (not_null(config.skew_slices_bottom_left)) return config.skew_slices_bottom_left
else return skewSlices
}
property int skewSlicesBottomRight:
{
if (not_null(config.skew_slices_bottom_right)) return config.skew_slices_bottom_right
else return skewSlices
}
property int skewSlicesLoginButtons:
{
if (not_null(config.skew_slices_login_buttons)) return config.skew_slices_login_buttons
else return skewSlices
}
// Padding
property int paddingSlices:
{
if (not_null(config.padding_slices)) return config.padding_slices
else return defaultPaddingSlices
}
property int paddingHorizontalSlices:
{
if (not_null(config.padding_horizontal_slices)) return config.padding_horizontal_slices
else return paddingSlices
}
property int paddingVerticalSlices:
{
if (not_null(config.padding_vertical_slices)) return config.padding_vertical_slices
else return paddingSlices
}
property int paddingLeftSlices:
{
if (not_null(config.padding_left_slices)) return config.padding_left_slices
else if (not_null(config.padding_horizontal_slices)) return config.padding_horizontal_slices
else return paddingSlices
}
property int paddingRightSlices:
{
if (not_null(config.padding_right_slices)) return config.padding_right_slices
else if (not_null(config.padding_horizontal_slices)) return config.padding_horizontal_slices
else return paddingSlices
}
property int paddingTopSlices:
{
if (not_null(config.padding_top_slices)) return config.padding_top_slices
else if (not_null(config.padding_vertical_slices)) return config.padding_vertical_slices
else return paddingSlices
}
property int paddingBottomSlices:
{
if (not_null(config.padding_bottom_slices)) return config.padding_bottom_slices
else if (not_null(config.padding_vertical_slices)) return config.padding_vertical_slices
else return paddingSlices
}
/* * * * * * * * * * * * * * * * * *
*
* Layer 3 options
* Control types
*
* * * * * * * * * * * * * * * * * */
property int paddingLeftSlicesTop:
{
if (not_null(config.padding_left_slices_top)) return config.padding_left_slices_top
else if (not_null(config.padding_horizontal_slices_top)) return config.padding_horizontal_slices_top
else if (not_null(config.padding_slices_top)) return config.padding_slices_top
else return paddingLeftSlices
}
property int paddingLeftSlicesBottomRight:
{
if (not_null(config.padding_left_slices_bottom_right)) return config.padding_left_slices_bottom_right
else if (not_null(config.padding_horizontal_slices_bottom_right)) return config.padding_horizontal_slices_bottom_right
else if (not_null(config.padding_slices_bottom_right)) return config.padding_slices_bottom_right
else return paddingLeftSlices
}
property int paddingLeftSlicesBottomLeft:
{
if (not_null(config.padding_left_slices_bottom_left)) return config.padding_left_slices_bottom_left
else if (not_null(config.padding_horizontal_slices_bottom_left)) return config.padding_horizontal_slices_bottom_left
else if (not_null(config.padding_slices_bottom_left)) return config.padding_slices_bottom_left
else return paddingLeftSlices
}
property int paddingLeftSlicesLoginButtons:
{
if (not_null(config.padding_left_slices_login_buttons)) return config.padding_left_slices_login_buttons
else if (not_null(config.padding_horizontal_slices_login_buttons)) return config.padding_horizontal_slices_login_buttons
else if (not_null(config.padding_slices_login_buttons)) return config.padding_slices_login_buttons
else return paddingLeftSlices
}
property int paddingRightSlicesTop:
{
if (not_null(config.padding_right_slices_top)) return config.padding_right_slices_top
else if (not_null(config.padding_horizontal_slices_top)) return config.padding_horizontal_slices_top
else if (not_null(config.padding_slices_top)) return config.padding_slices_top
else return paddingRightSlices
}
property int paddingRightSlicesBottomRight:
{
if (not_null(config.padding_right_slices_bottom_right)) return config.padding_right_slices_bottom_right
else if (not_null(config.padding_horizontal_slices_bottom_right)) return config.padding_horizontal_slices_bottom_right
else if (not_null(config.padding_slices_bottom_right)) return config.padding_slices_bottom_right
else return paddingRightSlices
}
property int paddingRightSlicesBottomLeft:
{
if (not_null(config.padding_right_slices_bottom_left)) return config.padding_right_slices_bottom_left
else if (not_null(config.padding_horizontal_slices_bottom_left)) return config.padding_horizontal_slices_bottom_left
else if (not_null(config.padding_slices_bottom_left)) return config.padding_slices_bottom_left
else return paddingRightSlices
}
property int paddingRightSlicesLoginButtons:
{
if (not_null(config.padding_right_slices_login_buttons)) return config.padding_right_slices_login_buttons
else if (not_null(config.padding_horizontal_slices_login_buttons)) return config.padding_horizontal_slices_login_buttons
else if (not_null(config.padding_slices_login_buttons)) return config.padding_slices_login_buttons
else return paddingRightSlices
}
property int paddingBottomSlicesTop:
{
if (not_null(config.padding_bottom_slices_top)) return config.padding_bottom_slices_top
else if (not_null(config.padding_vertical_slices_top)) return config.padding_vertical_slices_top
else if (not_null(config.padding_slices_top)) return config.padding_slices_top
else return paddingBottomSlices
}
property int paddingBottomSlicesBottomRight:
{
if (not_null(config.padding_bottom_slices_bottom_right)) return config.padding_bottom_slices_bottom_right
else if (not_null(config.padding_vertical_slices_bottom_right)) return config.padding_vertical_slices_bottom_right
else if (not_null(config.padding_slices_bottom_right)) return config.padding_slices_bottom_right
else return paddingBottomSlices
}
property int paddingBottomSlicesBottomLeft:
{
if (not_null(config.padding_bottom_slices_bottom_left)) return config.padding_bottom_slices_bottom_left
else if (not_null(config.padding_vertical_slices_bottom_left)) return config.padding_vertical_slices_bottom_left
else if (not_null(config.padding_slices_bottom_left)) return config.padding_slices_bottom_left
else return paddingBottomSlices
}
property int paddingBottomSlicesLoginButtons:
{
if (not_null(config.padding_bottom_slices_login_buttons)) return config.padding_bottom_slices_login_buttons
else if (not_null(config.padding_vertical_slices_login_buttons)) return config.padding_vertical_slices_login_buttons
else if (not_null(config.padding_slices_login_buttons)) return config.padding_slices_login_buttons
else return paddingBottomSlices
}
property int paddingTopSlicesTop:
{
if (not_null(config.padding_top_slices_top)) return config.padding_top_slices_top
else if (not_null(config.padding_vertical_slices_top)) return config.padding_vertical_slices_top
else if (not_null(config.padding_slices_top)) return config.padding_slices_top
else return paddingTopSlices
}
property int paddingTopSlicesBottomRight:
{
if (not_null(config.padding_top_slices_bottom_right)) return config.padding_top_slices_bottom_right
else if (not_null(config.padding_vertical_slices_bottom_right)) return config.padding_vertical_slices_bottom_right
else if (not_null(config.padding_slices_bottom_right)) return config.padding_slices_bottom_right
else return paddingTopSlices
}
property int paddingTopSlicesBottomLeft:
{
if (not_null(config.padding_top_slices_bottom_left)) return config.padding_top_slices_bottom_left
else if (not_null(config.padding_vertical_slices_bottom_left)) return config.padding_vertical_slices_bottom_left
else if (not_null(config.padding_slices_bottom_left)) return config.padding_slices_bottom_left
else return paddingTopSlices
}
property int paddingTopSlicesLoginButtons:
{
if (not_null(config.padding_top_slices_login_buttons)) return config.padding_top_slices_login_buttons
else if (not_null(config.padding_vertical_slices_login_buttons)) return config.padding_vertical_slices_login_buttons
else if (not_null(config.padding_slices_login_buttons)) return config.padding_slices_login_buttons
else return paddingTopSlices
}
}

46
slice/SlicedButton.qml
View file

@ -3,7 +3,7 @@ import QtQuick 2.7
Item
{
id: buttonRoot
height: paddingTop * 2 + buttonText.height
height: paddingTop + paddingBottom + buttonText.height
property font font: Qt.font({
family: config.font,
@ -16,15 +16,28 @@ Item
property string text: ""
property bool highlighted: false
property int skewLeft: 15
property int skewRight: 15
property int skew: sizes.skewSlices
property int skewLeft: skew
property int skewRight: skew
property int paddingTop: sizes.paddingTopSlices
property int paddingBottom: sizes.paddingBottomSlices
property int paddingLeft: sizes.paddingLeftSlices
property int paddingRight: sizes.paddingRightSlices
readonly property int skewSizeLeft: Math.round(height * Math.abs(skewLeft)/45)
readonly property int skewSizeRight: Math.round(height * Math.abs(skewRight)/45)
readonly property int skewPaddingLeft: Math.max(skewSizeLeft, 5)
readonly property int skewPaddingRight: Math.max(skewSizeRight, 5)
readonly property int paddingLeft: Math.max(Math.abs(skewLeft), 5)
property int paddingTop: 3
readonly property int paddingRight: Math.max(Math.abs(skewRight), 5)
readonly property int totalPaddingLeft: skewPaddingLeft + paddingLeft
readonly property int totalPaddingRight: skewPaddingRight + paddingRight
readonly property int widthFull: buttonText.width + paddingLeft + paddingRight
readonly property int widthPartial: buttonText.width + paddingLeft
readonly property int widthFull: buttonText.width + totalPaddingLeft + totalPaddingRight
readonly property int widthPartial: buttonText.width + totalPaddingLeft + paddingRight + (skewPaddingRight - skewSizeRight)
property color bgIdle: colors.buttonBg
property color bgHover: colors.buttonBgHover
@ -38,7 +51,6 @@ Item
property color textIdleHighlighted: colors.buttonTextHighlighted
property color textHoverHighlighted: colors.buttonTextHoverHighlighted
signal clicked()
Behavior on x
@ -106,13 +118,13 @@ Item
context.fillStyle = bgColor
context.beginPath()
context.moveTo(paddingLeft, height);
context.moveTo(totalPaddingLeft, height);
if (skewLeft > 0) {
context.lineTo(0, height);
context.lineTo(skewLeft, 0);
context.lineTo(skewSizeLeft, 0);
} else if (skewLeft < 0) {
context.lineTo(Math.abs(skewLeft), height);
context.lineTo(skewSizeLeft, height);
context.lineTo(0, 0);
} else {
context.lineTo(0, height);
@ -123,16 +135,16 @@ Item
if (skewRight > 0) {
context.lineTo(width, 0);
context.lineTo(width-skewRight, height);
context.lineTo(width-skewSizeRight, height);
} else if (skewRight < 0) {
context.lineTo(width+skewRight, 0);
context.lineTo(width-skewSizeRight, 0);
context.lineTo(width, height);
} else {
context.lineTo(width, 0);
context.lineTo(width, height);
}
context.lineTo(paddingLeft, height);
context.lineTo(totalPaddingLeft, height);
context.closePath()
context.fill()
@ -153,7 +165,7 @@ Item
Text
{
id: buttonText
x: paddingLeft
x: totalPaddingLeft
y: paddingTop
color: colors.buttonText
@ -184,4 +196,4 @@ Item
onClicked: buttonRoot.clicked()
}
}
}

5
slice/theme.conf
View file

@ -7,4 +7,7 @@ color_bg=#222222
color_main=#dddddd
color_dimmed=#888888
color_contrast=#1f1f1f
manual=false
padding_top_slices=3
padding_bottom_slices=3
offset_vertical_slices_login_buttons=2
manual=false