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

Merge cb3ec19b8e into d412b338bc

Browse source
This commit is contained in:
Oversword 2023-07-02 12:37:19 +03:00 • committed by GitHub
commit 9671093ba0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 804 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
Main.qml
View file

@ -112,6 +112,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 }
@ -121,15 +122,17 @@ 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: debug.canPowerOff || debug.canReboot || debug.canSuspend || debug.canHibernate || debug.canHybridSleep
@ -137,32 +140,53 @@ Rectangle
onClicked: if (enabled) root.state = "statePower" onClicked: if (enabled) root.state = "statePower"
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 = "stateSessions"
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 = "stateUsers"
font: fonts.slicesTop font: fonts.slicesTop
paddingLeft: sizes.paddingLeftSlicesTop
paddingRight: sizes.paddingRightSlicesTop
paddingTop: sizes.paddingTopSlicesTop
paddingBottom: sizes.paddingBottomSlicesTop
} }
} }
@ -239,23 +263,34 @@ Rectangle
SlicedButton SlicedButton
{ {
id: buttonCapsLock id: buttonCapsLock
x: 5 x: sizes.offsetHorizontalSlicesBottomLeft
y: areaBottom.height - height - 5 y: areaBottom.height - height - sizes.offsetVerticalSlicesBottomLeft
skewLeft: 0 skewLeft: 0
skewRight: sizes.skewSlicesBottomLeft
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
@ -263,13 +298,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: {
@ -280,20 +323,32 @@ 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 - sizes.offsetHorizontalSlicesBottomRight
width: buttonWeekday.widthPartial + buttonDate.widthPartial + buttonTime.widthPartial + 21 width:
buttonWeekday.widthPartial +
buttonDate.widthPartial +
buttonTime.widthFull +
( sizes.spacingSlicesBottomRight * 2 )
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()
{ {
@ -302,14 +357,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()
{ {
@ -318,15 +381,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()
@ -336,6 +405,11 @@ Rectangle
} }
font: fonts.slicesBottomRight font: fonts.slicesBottomRight
paddingLeft: sizes.paddingLeftSlicesBottomRight
paddingRight: sizes.paddingRightSlicesBottomRight
paddingTop: sizes.paddingTopSlicesBottomRight
paddingBottom: sizes.paddingBottomSlicesBottomRight
} }
} }
@ -436,4 +510,3 @@ Rectangle
Keys.onLeftPressed: previousScreen() Keys.onLeftPressed: previousScreen()
Keys.onRightPressed: nextScreen() Keys.onRightPressed: nextScreen()
} }

16
README.md
View file

@ -46,6 +46,22 @@ There are also many font options, so there is now [font scheme](https://github.c
Info about other layers can be found on wiki: [layer 2](https://github.com/RadRussianRus/sddm-slice/wiki/Font-Scheme-Layer-2), [layer 3](https://github.com/RadRussianRus/sddm-slice/wiki/Font-Scheme-Layer-3). Info about other layers can be found on wiki: [layer 2](https://github.com/RadRussianRus/sddm-slice/wiki/Font-Scheme-Layer-2), [layer 3](https://github.com/RadRussianRus/sddm-slice/wiki/Font-Scheme-Layer-3).
### Size scheme
With [recent pull request](https://github.com/RadRussianRus/sddm-slice/pull/9) which introduced the [size scheme](https://github.com/RadRussianRus/sddm-slice/wiki/Size-Scheme) it is now possible to change the sizes and paddings of various elements. Most of them are optional, only mandatory option is from [layer 1](https://github.com/RadRussianRus/sddm-slice/wiki/Size-Scheme-Layer-1):
* `user_area_width` - width of the user page container area. Defaults to `450`.
* `power_area_width` - width of the power page container area. Defaults to `370`.
* `offset_slices` - vertical and horizontal offset for all groups of buttons (or "slices"). Defaults to `5`.
* `padding_slices` - internal padding of all slices. Defaults to `0`.
* `spacing_slices` - spacing between all slices. Defaults to `3`.
* `skew_slices` - skew (angle) of all slices. Defaults to `32`.
* `image_padding` - image padding for all images. Defaults to `2`.
* `spacing_item` - spacing between all types of list item. Defaults to `2`.
* `padding_item` - internal padding of all types of list item. Defaults to `2`.
Info about other layers can be found on wiki: [layer 2](https://github.com/RadRussianRus/sddm-slice/wiki/Size-Scheme-Layer-2), [layer 3](https://github.com/RadRussianRus/sddm-slice/wiki/Size-Scheme-Layer-3).
### Debug mode options ### Debug mode options
There are some things that can't be tested well in greeter (e.g. shutdown options or login error). So there is a debug mode. There are some things that can't be tested well in greeter (e.g. shutdown options or login error). So there is a debug mode.

45
slice/LoopListPowerItem.qml
View file

@ -7,15 +7,25 @@ Item
opacity: distance opacity: distance
property int duration: 100 property int duration: 100
width: parent.width width: parent.width
height: descriptionLabel.height + textBoxPaddingBottom + textBoxPaddingTop
property bool hover: false property bool hover: false
property int textBoxPaddingTop: sizes.paddingTopItemPower
property int textBoxPaddingLeft: sizes.paddingLeftItemPower
property int textBoxPaddingBottom: sizes.paddingBottomItemPower
property int textBoxPaddingRight: sizes.paddingRightItemPower
property int imagePadding: sizes.imagePaddingItemPower
property int textBoxMargin: sizes.spacingItemPower
signal clicked() signal clicked()
signal entered() signal entered()
transform: Scale transform: Scale
{ {
origin.x: descriptionLabel.height + 10 + 2 origin.x: itemRoot.height + textBoxMargin
origin.y: descriptionLabel.height + 10 / 2 origin.y: itemRoot.height / 2
xScale: distance xScale: distance
yScale: distance yScale: distance
} }
@ -28,11 +38,13 @@ Item
property real distance: 1.0 property real distance: 1.0
property string icon: "icons/no_avatar.svg" property string icon: "icons/no_avatar.svg"
property string title: "" property string title: ""
readonly property int imageWidth: itemRoot.height - (imagePadding * 2)
Rectangle Rectangle
{ {
width: descriptionLabel.height + 10 width: itemRoot.height
height: descriptionLabel.height + 10 height: itemRoot.height
color: ( hover ? colors.iconBgHover : colors.iconBg ) color: ( hover ? colors.iconBgHover : colors.iconBg )
} }
@ -40,10 +52,10 @@ Item
{ {
id: powerItemIcon id: powerItemIcon
source: icon source: icon
sourceSize.width: descriptionLabel.height + 10 - 4 sourceSize.width: imageWidth
sourceSize.height: descriptionLabel.height + 10 - 4 sourceSize.height: imageWidth
x: 2 x: imagePadding
y: 2 y: imagePadding
opacity: 0 opacity: 0
} }
@ -58,9 +70,10 @@ Item
Rectangle Rectangle
{ {
x: descriptionLabel.height + 10 + 2 id: textBackground
width: parent.width - descriptionLabel.height + 10 - 2 x: itemRoot.height + textBoxMargin
height: descriptionLabel.height + 10 width: parent.width - x
height: itemRoot.height
color: ( hover ? colors.textBgHover : colors.textBg ) color: ( hover ? colors.textBgHover : colors.textBg )
} }
@ -69,19 +82,19 @@ Item
id: descriptionLabel id: descriptionLabel
text: itemRoot.title text: itemRoot.title
color: ( hover ? colors.textHover : colors.text ) color: ( hover ? colors.textHover : colors.text )
width: parent.width - descriptionLabel.height + 10 - 2 - 24 width: parent.width - x - textBoxPaddingRight
font: fonts.listItemMed font: fonts.listItemMed
elide: Text.ElideRight elide: Text.ElideRight
x: descriptionLabel.height + 10 + 12 x: textBackground.x + textBoxPaddingLeft
y: 5 y: textBoxPaddingTop
} }
MouseArea MouseArea
{ {
width: descriptionLabel.x + descriptionLabel.width width: itemRoot.width
height: descriptionLabel.height + 10 height: itemRoot.height
hoverEnabled: true hoverEnabled: true
onClicked: itemRoot.clicked() onClicked: itemRoot.clicked()

17
slice/LoopListSessionItem.qml
View file

@ -13,12 +13,17 @@ Item
property string sessionName: "" property string sessionName: ""
property bool hover: false property bool hover: false
property int textBoxPaddingLeft: sizes.paddingLeftItemSession
property int textBoxPaddingRight: sizes.paddingRightItemSession
property int textBoxPaddingTop: sizes.paddingTopItemSession
property int textBoxPaddingBottom: sizes.paddingBottomItemSession
Rectangle Rectangle
{ {
x: sessionNameLabel.x - 10 x: sessionNameLabel.x - textBoxPaddingLeft
y: sessionNameLabel.y - 5 y: sessionNameLabel.y - textBoxPaddingTop
width: sessionNameLabel.width + 20 width: sessionNameLabel.width + textBoxPaddingLeft + textBoxPaddingRight
height: sessionNameLabel.height + 10 height: sessionNameLabel.height + textBoxPaddingBottom + textBoxPaddingTop
color: ( hover ? colors.textBgHover : colors.textBg ) color: ( hover ? colors.textBgHover : colors.textBg )
} }
@ -31,7 +36,7 @@ Item
font: fonts.listItemMed font: fonts.listItemMed
x: parent.x + 10 x: parent.x + textBoxPaddingLeft
y: 5 y: textBoxPaddingTop
} }
} }

47
slice/LoopListUserItem.qml
View file

@ -7,7 +7,7 @@ Item
id: itemRoot id: itemRoot
opacity: computedDistance opacity: computedDistance
width: parent.width width: parent.width
height: userName == "" ? userLoginText.height + 14 : userNameText.height + userLoginText.height - 4 height: loginIsMain ? userLoginText.height + 14 : userNameText.height + userLoginText.height - 4
property bool hover: false property bool hover: false
property bool hoverEnabled: true property bool hoverEnabled: true
@ -25,8 +25,22 @@ Item
property string userLogin: "" property string userLogin: ""
property string userAvatar: "icons/no_avatar.svg" property string userAvatar: "icons/no_avatar.svg"
property int imagePadding: sizes.imagePaddingItemUser
property int textBoxMargin: sizes.spacingItemUser
property int subHeadOffset: sizes.offsetSubHeadItemUser
property int lowerCaseOffset: sizes.offsetLowerCaseItemUser
property int textBoxPaddingTop: sizes.paddingTopItemUser
property int textBoxPaddingLeft: sizes.paddingLeftItemUser
property int textBoxPaddingBottom: sizes.paddingBottomItemUser
property int textBoxPaddingRight: sizes.paddingRightItemUser
property int minHeight: 64 + (imagePadding * 2)
readonly property int imageSize: itemRoot.height - (imagePadding * 2)
readonly property bool loginIsMain: userName == ""
Rectangle Rectangle
{ {
id: iconBackground
width: itemRoot.height width: itemRoot.height
height: itemRoot.height height: itemRoot.height
color: ( hoverEnabled && hover ? colors.iconBgHover : colors.iconBg ) color: ( hoverEnabled && hover ? colors.iconBgHover : colors.iconBg )
@ -36,17 +50,19 @@ Item
{ {
id: profilePicture id: profilePicture
source: userAvatar source: userAvatar
sourceSize.width: itemRoot.height - 8 sourceSize.width: imageSize
sourceSize.height: itemRoot.height - 8 sourceSize.height: imageSize
x: 4 x: iconBackground.x + imagePadding
y: 4 y: imagePadding
} }
Rectangle Rectangle
{ {
x: itemRoot.height + 2 id: textBackground
x: iconBackground.x + iconBackground.width + textBoxMargin
y: 0 y: 0
width: parent.width - itemRoot.height - 2 width: parent.width - x
height: itemRoot.height height: itemRoot.height
color: ( hoverEnabled && hover ? colors.textBgHover : colors.textBg ) color: ( hoverEnabled && hover ? colors.textBgHover : colors.textBg )
} }
@ -61,23 +77,24 @@ Item
elide: Text.ElideRight elide: Text.ElideRight
x: itemRoot.height + 12 x: textBackground.x + textBoxPaddingLeft
y: 0 y: textBackground.y + textBoxPaddingTop
width: itemRoot.width - itemRoot.height - 26 width: textBackground.width - textBoxPaddingLeft - textBoxPaddingRight
} }
Text Text
{ {
id: userLoginText id: userLoginText
text: userLogin text: userLogin
color: ( hoverEnabled && hover ? (userName == "" ? colors.textHover : colors.textDimmedHover ) : (userName == "" ? colors.text : colors.textDimmed ) ) color: ( hoverEnabled && hover ? (loginIsMain ? colors.textHover : colors.textDimmedHover ) : (loginIsMain ? colors.text : colors.textDimmed ) )
y: userName == "" ? 7 : userNameText.height * 0.8 font: loginIsMain ? fonts.listItemBig : fonts.listItemSub
font: userName == "" ? fonts.listItemBig : fonts.listItemSub
x: itemRoot.height + 12 y: userNameText.y + (loginIsMain ? lowerCaseOffset : (userNameText.height + subHeadOffset))
x: userNameText.x
elide: Text.ElideRight elide: Text.ElideRight
width: itemRoot.width - itemRoot.height - 26 width: userNameText.width
} }
} }

2
slice/PagePower.qml
View file

@ -48,7 +48,7 @@ Item
{ {
id: powerListContainer id: powerListContainer
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
width: 370 width: sizes.powerAreaWidth
height: pageRoot.height height: pageRoot.height
property int scrollDuration: 100 property int scrollDuration: 100

28
slice/PageUsers.qml
View file

@ -80,7 +80,7 @@ Item
{ {
id: userListContainer id: userListContainer
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
width: 450 width: sizes.userAreaWidth
property int scrollDuration: 100 property int scrollDuration: 100
@ -373,9 +373,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 +387,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 +411,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
} }
} }

520
slice/SizeScheme.qml Normal file
View file

@ -0,0 +1,520 @@
import QtQuick 2.7
Item
{
/* * * * * * * * * * * * * * * * * *
*
* Functions
*
* * * * * * * * * * * * * * * * * */
function not_null(str) {
if (str === false || str === 0 || str === "") return true
return !(str === null || str === undefined);
}
/* * * * * * * * * * * * * * * * * *
*
* Layer 1 options
* Base values, Required
*
* * * * * * * * * * * * * * * * * */
property int userAreaWidth: config.user_area_width
property int powerAreaWidth: config.power_area_width
// Offset
property int offsetSlices: config.offset_slices
// Padding
property int paddingSlices: config.padding_slices
// Spacing
property int spacingSlices: config.spacing_slices
// Skew
property int skewSlices: config.skew_slices
// Image padding
property int imagePadding: config.image_padding
// LoopList item spacing
property int spacingItem: config.spacing_item
// LoopList item padding
property int paddingItem: config.padding_item
/* * * * * * * * * * * * * * * * * *
*
* Layer 2 options
* Section specific values
*
* * * * * * * * * * * * * * * * * */
// Offset
property int offsetSlicesTop:
{
if (not_null(config.offset_slices_top)) return config.offset_slices_top
else return offsetSlices
}
property int offsetSlicesBottomRight:
{
if (not_null(config.offset_slices_bottom_right)) return config.offset_slices_bottom_right
else return offsetSlices
}
property int offsetSlicesBottomLeft:
{
if (not_null(config.offset_slices_bottom_left)) return config.offset_slices_bottom_left
else return offsetSlices
}
property int offsetSlicesLoginButtons:
{
if (not_null(config.offset_slices_login_buttons)) return config.offset_slices_login_buttons
else return offsetSlices
}
// Padding - this is direction specific here, and section specific in level 3
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
}
// Spacing
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 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
}
//// LoopList item image padding
property int imagePaddingItemPower:
{
if (not_null(config.image_padding_item_power)) return config.image_padding_item_power
else return imagePadding
}
property int imagePaddingItemUser:
{
if (not_null(config.image_padding_item_user)) return config.image_padding_item_user
else return imagePadding
}
//// LoopList item spacing
property int spacingItemPower:
{
if (not_null(config.spacing_item_power)) return config.spacing_item_power
else return spacingItem
}
property int spacingItemUser:
{
if (not_null(config.spacing_item_user)) return config.spacing_item_user
else return spacingItem
}
//// LoopList item padding
property int paddingLeftItem:
{
if (not_null(config.padding_left_item)) return config.padding_left_item
else if (not_null(config.padding_horizontal_item)) return config.padding_horizontal_item
else return paddingItem
}
property int paddingRightItem:
{
if (not_null(config.padding_right_item)) return config.padding_right_item
else if (not_null(config.padding_horizontal_item)) return config.padding_horizontal_item
else return paddingItem
}
property int paddingTopItem:
{
if (not_null(config.padding_top_item)) return config.padding_top_item
else if (not_null(config.padding_vertical_item)) return config.padding_vertical_item
else return paddingItem
}
property int paddingBottomItem:
{
if (not_null(config.padding_bottom_item)) return config.padding_bottom_item
else if (not_null(config.padding_vertical_item)) return config.padding_vertical_item
else return paddingItem
}
//// LoopList item section offsets
property int offsetSubHeadItemUser:
{
if (not_null(config.offset_sub_head_item_user)) return config.offset_sub_head_item_user
else return 0
}
property int offsetLowerCaseItemUser:
{
if (not_null(config.offset_lower_case_item_user)) return config.offset_lower_case_item_user
else return 0
}
/* * * * * * * * * * * * * * * * * *
*
* Layer 3 options
* Direction specific values
*
* * * * * * * * * * * * * * * * * */
// Offset
//// Top
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
}
//// Bottom Right
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
}
//// Bottom Left
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
}
//// Login Buttons
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
}
// Padding
//// Top
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 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 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 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
}
//// Bottom Right
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 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 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 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
}
//// Bottom Left
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 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 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 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
}
//// LoginButtons
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 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 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
}
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
}
//// LoopList item padding
// Power LoopList items
property int paddingTopItemPower:
{
if (not_null(config.padding_top_item_power)) return config.padding_top_item_power
else if (not_null(config.padding_vertical_item_power)) return config.padding_vertical_item_power
else if (not_null(config.padding_item_power)) return config.padding_item_power
else return paddingTopItem
}
property int paddingLeftItemPower:
{
if (not_null(config.padding_left_item_power)) return config.padding_left_item_power
else if (not_null(config.padding_horizontal_item_power)) return config.padding_horizontal_item_power
else if (not_null(config.padding_item_power)) return config.padding_item_power
else return paddingLeftItem
}
property int paddingBottomItemPower:
{
if (not_null(config.padding_bottom_item_power)) return config.padding_bottom_item_power
else if (not_null(config.padding_vertical_item_power)) return config.padding_vertical_item_power
else if (not_null(config.padding_item_power)) return config.padding_item_power
else return paddingBottomItem
}
property int paddingRightItemPower:
{
if (not_null(config.padding_right_item_power)) return config.padding_right_item_power
else if (not_null(config.padding_horizontal_item_power)) return config.padding_horizontal_item_power
else if (not_null(config.padding_item_power)) return config.padding_item_power
else return paddingRightItem
}
//// Session LoopList items
property int paddingLeftItemSession:
{
if (not_null(config.padding_left_item_session)) return config.padding_left_item_session
else if (not_null(config.padding_horizontal_item_session)) return config.padding_horizontal_item_session
else if (not_null(config.padding_item_session)) return config.padding_item_session
else return paddingLeftItem
}
property int paddingBottomItemSession:
{
if (not_null(config.padding_bottom_item_session)) return config.padding_bottom_item_session
else if (not_null(config.padding_vertical_item_session)) return config.padding_vertical_item_session
else if (not_null(config.padding_item_session)) return config.padding_item_session
else return paddingBottomItem
}
property int paddingRightItemSession:
{
if (not_null(config.padding_right_item_session)) return config.padding_right_item_session
else if (not_null(config.padding_horizontal_item_session)) return config.padding_horizontal_item_session
else if (not_null(config.padding_item_session)) return config.padding_item_session
else return paddingRightItem
}
property int paddingTopItemSession:
{
if (not_null(config.padding_top_item_session)) return config.padding_top_item_session
else if (not_null(config.padding_vertical_item_session)) return config.padding_vertical_item_session
else if (not_null(config.padding_item_session)) return config.padding_item_session
else return paddingTopItem
}
//// User LoopList items
property int paddingLeftItemUser:
{
if (not_null(config.padding_left_item_user)) return config.padding_left_item_user
else if (not_null(config.padding_horizontal_item_user)) return config.padding_horizontal_item_user
else if (not_null(config.padding_item_user)) return config.padding_item_user
else return paddingLeftItem
}
property int paddingRightItemUser:
{
if (not_null(config.padding_right_item_user)) return config.padding_right_item_user
else if (not_null(config.padding_horizontal_item_user)) return config.padding_horizontal_item_user
else if (not_null(config.padding_item_user)) return config.padding_item_user
else return paddingRightItem
}
property int paddingBottomItemUser:
{
if (not_null(config.padding_bottom_item_user)) return config.padding_bottom_item_user
else if (not_null(config.padding_vertical_item_user)) return config.padding_vertical_item_user
else if (not_null(config.padding_item_user)) return config.padding_item_user
else return paddingBottomItem
}
property int paddingTopItemUser:
{
if (not_null(config.padding_top_item_user)) return config.padding_top_item_user
else if (not_null(config.padding_vertical_item_user)) return config.padding_vertical_item_user
else if (not_null(config.padding_item_user)) return config.padding_item_user
else return paddingTopItem
}
}

49
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
readonly property int paddingLeft: Math.max(Math.abs(skewLeft), 5) property int skew: sizes.skewSlices
property int paddingTop: 3 property int skewLeft: skew
readonly property int paddingRight: Math.max(Math.abs(skewRight), 5) property int skewRight: skew
property int defaultSkewPadding: 5
readonly property int widthFull: buttonText.width + paddingLeft + paddingRight property int paddingTop: sizes.paddingTopSlices
readonly property int widthPartial: buttonText.width + paddingLeft property int paddingBottom: sizes.paddingBottomSlices
property int paddingLeft: sizes.paddingLeftSlices
property int paddingRight: sizes.paddingRightSlices
readonly property int baseWidth: buttonText.width + paddingLeft + paddingRight
readonly property int baseHeight: buttonText.height
readonly property int skewSizeLeft: Math.round(baseHeight * Math.abs(skewLeft)/45)
readonly property int skewSizeRight: Math.round(baseHeight * Math.abs(skewRight)/45)
readonly property int skewPaddingLeft: Math.max(skewSizeLeft, defaultSkewPadding)
readonly property int skewPaddingRight: Math.max(skewSizeRight, defaultSkewPadding)
readonly property int widthFull: baseWidth + skewPaddingLeft + skewPaddingRight
readonly property int widthPartial: baseWidth + skewPaddingLeft + (skewPaddingRight - skewSizeRight)
property color bgIdle: colors.buttonBg property color bgIdle: colors.buttonBg
property color bgHover: colors.buttonBgHover property color bgHover: colors.buttonBgHover
@ -103,16 +116,15 @@ Item
{ {
var context = getContext("2d"); var context = getContext("2d");
context.clearRect(0, 0, width, height); context.clearRect(0, 0, width, height);
context.fillStyle = bgColor context.fillStyle = bgColor;
context.beginPath() context.beginPath();
context.moveTo(paddingLeft, height); context.moveTo(skewPaddingLeft, height);
if (skewLeft > 0) { if (skewLeft > 0) {
context.lineTo(0, height); context.lineTo(0, height);
context.lineTo(skewLeft, 0); context.lineTo(skewPaddingLeft, 0);
} else if (skewLeft < 0) { } else if (skewLeft < 0) {
context.lineTo(Math.abs(skewLeft), height);
context.lineTo(0, 0); context.lineTo(0, 0);
} else { } else {
context.lineTo(0, height); context.lineTo(0, height);
@ -123,19 +135,18 @@ Item
if (skewRight > 0) { if (skewRight > 0) {
context.lineTo(width, 0); context.lineTo(width, 0);
context.lineTo(width-skewRight, height); context.lineTo(widthPartial, height);
} else if (skewRight < 0) { } else if (skewRight < 0) {
context.lineTo(width+skewRight, 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(skewPaddingLeft, height);
context.closePath() context.closePath();
context.fill() context.fill();
} }
Behavior on x Behavior on x
@ -153,7 +164,7 @@ Item
Text Text
{ {
id: buttonText id: buttonText
x: paddingLeft x: paddingLeft + skewPaddingLeft
y: paddingTop y: paddingTop
color: colors.buttonText color: colors.buttonText

27
theme.conf
View file

@ -8,3 +8,30 @@ color_main=#dddddd
color_dimmed=#888888 color_dimmed=#888888
color_contrast=#1f1f1f color_contrast=#1f1f1f
manual=false manual=false
user_area_width=450
power_area_width=370
offset_slices=5
padding_slices=0
spacing_slices=3
skew_slices=32
image_padding=2
spacing_item=2
padding_item=2
padding_vertical_slices=3
padding_vertical_slices_login_buttons=2
offset_vertical_slices_login_buttons=2
offset_horizontal_slices_login_buttons=0
padding_horizontal_item_session=10
padding_vertical_item_session=5
padding_horizontal_item_power=10
padding_vertical_item_power=5
padding_top_item_user=0
padding_bottom_item_user=-4
padding_horizontal_item_user=10
image_padding_item_user=4
offset_sub_head_item_user=-9
offset_lower_case_item_user=7