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

29
slice/PageUsers.qml
View file

@ -302,6 +302,7 @@ Item
selectedTextColor: colors.inputSelectionText selectedTextColor: colors.inputSelectionText
echoMode: TextInput.Password echoMode: TextInput.Password
passwordCharacter: config.password_character ? config.password_character : false
clip: true clip: true
selectByMouse: true selectByMouse: true
@ -373,9 +374,12 @@ Item
SlicedButton SlicedButton
{ {
id: buttonUserLogin id: buttonUserLogin
x: userListContainer.width - widthFull x: userListContainer.width - widthFull - sizes.offsetHorizontalSlicesLoginButtons
y: progressBar.y + progressBar.height + 2 y: progressBar.y + progressBar.height + sizes.offsetVerticalSlicesLoginButtons
paddingTop: 2
skewLeft: sizes.skewSlicesLoginButtons
skewRight: sizes.skewSlicesLoginButtons
highlighted: true highlighted: true
opacity: hasLoginShown ? 1 : 0 opacity: hasLoginShown ? 1 : 0
@ -384,14 +388,22 @@ Item
onClicked: select_or_login() onClicked: select_or_login()
font: fonts.slicesLoginButtons font: fonts.slicesLoginButtons
paddingLeft: sizes.paddingLeftSlicesLoginButtons
paddingRight: sizes.paddingRightSlicesLoginButtons
paddingTop: sizes.paddingTopSlicesLoginButtons
paddingBottom: sizes.paddingBottomSlicesLoginButtons
} }
SlicedButton SlicedButton
{ {
id: buttonUserBack id: buttonUserBack
x: userListContainer.width - widthFull - buttonUserLogin.widthPartial - 3 x: userListContainer.width - widthFull - buttonUserLogin.widthPartial - sizes.spacingSlicesLoginButtons - sizes.offsetHorizontalSlicesLoginButtons
y: buttonUserLogin.y y: buttonUserLogin.y
paddingTop: 2
skewLeft: sizes.skewSlicesLoginButtons
skewRight: sizes.skewSlicesLoginButtons
opacity: hasLoginShown ? 1 : 0 opacity: hasLoginShown ? 1 : 0
visible: !manual visible: !manual
@ -400,6 +412,11 @@ Item
onClicked: back_to_selection() onClicked: back_to_selection()
font: fonts.slicesLoginButtons 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() 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 Item
{ {
id: buttonRoot id: buttonRoot
height: paddingTop * 2 + buttonText.height height: paddingTop + paddingBottom + buttonText.height
property font font: Qt.font({ property font font: Qt.font({
family: config.font, family: config.font,
@ -16,15 +16,28 @@ Item
property string text: "" property string text: ""
property bool highlighted: false 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) readonly property int totalPaddingLeft: skewPaddingLeft + paddingLeft
property int paddingTop: 3 readonly property int totalPaddingRight: skewPaddingRight + paddingRight
readonly property int paddingRight: Math.max(Math.abs(skewRight), 5)
readonly property int widthFull: buttonText.width + paddingLeft + paddingRight readonly property int widthFull: buttonText.width + totalPaddingLeft + totalPaddingRight
readonly property int widthPartial: buttonText.width + paddingLeft readonly property int widthPartial: buttonText.width + totalPaddingLeft + paddingRight + (skewPaddingRight - skewSizeRight)
property color bgIdle: colors.buttonBg property color bgIdle: colors.buttonBg
property color bgHover: colors.buttonBgHover property color bgHover: colors.buttonBgHover
@ -38,7 +51,6 @@ Item
property color textIdleHighlighted: colors.buttonTextHighlighted property color textIdleHighlighted: colors.buttonTextHighlighted
property color textHoverHighlighted: colors.buttonTextHoverHighlighted property color textHoverHighlighted: colors.buttonTextHoverHighlighted
signal clicked() signal clicked()
Behavior on x Behavior on x
@ -106,13 +118,13 @@ Item
context.fillStyle = bgColor context.fillStyle = bgColor
context.beginPath() context.beginPath()
context.moveTo(paddingLeft, height); context.moveTo(totalPaddingLeft, height);
if (skewLeft > 0) { if (skewLeft > 0) {
context.lineTo(0, height); context.lineTo(0, height);
context.lineTo(skewLeft, 0); context.lineTo(skewSizeLeft, 0);
} else if (skewLeft < 0) { } else if (skewLeft < 0) {
context.lineTo(Math.abs(skewLeft), height); context.lineTo(skewSizeLeft, height);
context.lineTo(0, 0); context.lineTo(0, 0);
} else { } else {
context.lineTo(0, height); context.lineTo(0, height);
@ -123,16 +135,16 @@ Item
if (skewRight > 0) { if (skewRight > 0) {
context.lineTo(width, 0); context.lineTo(width, 0);
context.lineTo(width-skewRight, height); context.lineTo(width-skewSizeRight, height);
} else if (skewRight < 0) { } else if (skewRight < 0) {
context.lineTo(width+skewRight, 0); context.lineTo(width-skewSizeRight, 0);
context.lineTo(width, height); context.lineTo(width, height);
} else { } else {
context.lineTo(width, 0); context.lineTo(width, 0);
context.lineTo(width, height); context.lineTo(width, height);
} }
context.lineTo(paddingLeft, height); context.lineTo(totalPaddingLeft, height);
context.closePath() context.closePath()
context.fill() context.fill()
@ -153,7 +165,7 @@ Item
Text Text
{ {
id: buttonText id: buttonText
x: paddingLeft x: totalPaddingLeft
y: paddingTop y: paddingTop
color: colors.buttonText color: colors.buttonText
@ -184,4 +196,4 @@ Item
onClicked: buttonRoot.clicked() onClicked: buttonRoot.clicked()
} }
} }

5
slice/theme.conf
View file

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