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

119
Main.qml
View file

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

47
slice/LoopListPowerItem.qml
View file

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

19
slice/LoopListSessionItem.qml
View file

@ -13,12 +13,17 @@ Item
property string sessionName: ""
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
{
x: sessionNameLabel.x - 10
y: sessionNameLabel.y - 5
width: sessionNameLabel.width + 20
height: sessionNameLabel.height + 10
x: sessionNameLabel.x - textBoxPaddingLeft
y: sessionNameLabel.y - textBoxPaddingTop
width: sessionNameLabel.width + textBoxPaddingLeft + textBoxPaddingRight
height: sessionNameLabel.height + textBoxPaddingBottom + textBoxPaddingTop
color: ( hover ? colors.textBgHover : colors.textBg )
}
@ -31,7 +36,7 @@ Item
font: fonts.listItemMed
x: parent.x + 10
y: 5
x: parent.x + textBoxPaddingLeft
y: textBoxPaddingTop
}
}
}

53
slice/LoopListUserItem.qml
View file

@ -7,8 +7,8 @@ Item
id: itemRoot
opacity: computedDistance
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 hoverEnabled: true
@ -25,8 +25,22 @@ Item
property string userLogin: ""
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
{
id: iconBackground
width: itemRoot.height
height: itemRoot.height
color: ( hoverEnabled && hover ? colors.iconBgHover : colors.iconBg )
@ -36,17 +50,19 @@ Item
{
id: profilePicture
source: userAvatar
sourceSize.width: itemRoot.height - 8
sourceSize.height: itemRoot.height - 8
x: 4
y: 4
sourceSize.width: imageSize
sourceSize.height: imageSize
x: iconBackground.x + imagePadding
y: imagePadding
}
Rectangle
{
x: itemRoot.height + 2
id: textBackground
x: iconBackground.x + iconBackground.width + textBoxMargin
y: 0
width: parent.width - itemRoot.height - 2
width: parent.width - x
height: itemRoot.height
color: ( hoverEnabled && hover ? colors.textBgHover : colors.textBg )
}
@ -56,28 +72,29 @@ Item
id: userNameText
text: userName
color: ( hoverEnabled && hover ? colors.textHover : colors.text )
font: fonts.listItemMed
elide: Text.ElideRight
x: itemRoot.height + 12
y: 0
x: textBackground.x + textBoxPaddingLeft
y: textBackground.y + textBoxPaddingTop
width: itemRoot.width - itemRoot.height - 26
width: textBackground.width - textBoxPaddingLeft - textBoxPaddingRight
}
Text
{
id: userLoginText
text: userLogin
color: ( hoverEnabled && hover ? (userName == "" ? colors.textHover : colors.textDimmedHover ) : (userName == "" ? colors.text : colors.textDimmed ) )
y: userName == "" ? 7 : userNameText.height * 0.8
font: userName == "" ? fonts.listItemBig : fonts.listItemSub
x: itemRoot.height + 12
color: ( hoverEnabled && hover ? (loginIsMain ? colors.textHover : colors.textDimmedHover ) : (loginIsMain ? colors.text : colors.textDimmed ) )
font: loginIsMain ? fonts.listItemBig : fonts.listItemSub
y: userNameText.y + (loginIsMain ? lowerCaseOffset : (userNameText.height + subHeadOffset))
x: userNameText.x
elide: Text.ElideRight
width: itemRoot.width - itemRoot.height - 26
width: userNameText.width
}
}
}

6
slice/PagePower.qml
View file

@ -43,12 +43,12 @@ Item
break;
}
}
ColumnLayout
{
id: powerListContainer
anchors.horizontalCenter: parent.horizontalCenter
width: 370
width: sizes.powerAreaWidth
height: pageRoot.height
property int scrollDuration: 100
@ -240,4 +240,4 @@ Item
Keys.onDownPressed: scroll_up()
Keys.onEnterPressed: execute()
Keys.onReturnPressed: execute()
}
}

50
slice/PageUsers.qml
View file

@ -63,7 +63,7 @@ Item
pageRoot.unlockNav()
loginExitAnimation.start()
passwordField.text = ""
}
}
}
onFocusChanged:
@ -80,7 +80,7 @@ Item
{
id: userListContainer
anchors.horizontalCenter: parent.horizontalCenter
width: 450
width: sizes.userAreaWidth
property int scrollDuration: 100
@ -125,7 +125,7 @@ Item
height: pageRoot.height / 4
//enabled: !hasLoginShown
onClicked: { (hasLoginShown ? back_to_selection() : select_or_login()) }
onClicked: { (hasLoginShown ? back_to_selection() : select_or_login()) }
}
@ -257,7 +257,7 @@ Item
clip: true
selectByMouse: true
font: fonts.loginInput
Component.onCompleted: if (manual) forceActiveFocus()
@ -304,7 +304,7 @@ Item
echoMode: TextInput.Password
clip: true
selectByMouse: true
font: fonts.input
Component.onCompleted: forceActiveFocus()
@ -373,9 +373,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 +387,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 +411,11 @@ Item
onClicked: back_to_selection()
font: fonts.slicesLoginButtons
paddingLeft: sizes.paddingLeftSlicesLoginButtons
paddingRight: sizes.paddingRightSlicesLoginButtons
paddingTop: sizes.paddingTopSlicesLoginButtons
paddingBottom: sizes.paddingBottomSlicesLoginButtons
}
}
@ -461,7 +477,7 @@ Item
}
}
onStopped:
onStopped:
{
progressBarSlider1.x = 0
progressBarSlider1.width = userListContainer.width / 5
@ -490,7 +506,7 @@ Item
NumberAnimation { target: buttonUserBack; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
onStopped:
onStopped:
{
hasLoginShown = true
passwordField.forceActiveFocus()
@ -529,7 +545,7 @@ Item
id: userListScrollUp
NumberAnimation { target: topFarItem; property: "y"; to: 0; duration: userListContainer.scrollDuration }
NumberAnimation { target: topFarItem; property: "distance"; to: 0; duration: userListContainer.scrollDuration }
NumberAnimation { target: topMidItem; property: "y"; to: pageRoot.height / 18; duration: userListContainer.scrollDuration }
NumberAnimation { target: topMidItem; property: "distance"; to: 0.4; duration: userListContainer.scrollDuration }
@ -570,7 +586,7 @@ Item
NumberAnimation { target: topFarItem; property: "y"; to: pageRoot.height / 4.7; duration: userListContainer.scrollDuration }
NumberAnimation { target: topFarItem; property: "distance"; to: 0.7; duration: userListContainer.scrollDuration }
NumberAnimation { target: topMidItem; property: "y"; to: pageRoot.height / 2.3; duration: userListContainer.scrollDuration }
NumberAnimation { target: topMidItem; property: "distance"; to: 1; duration: userListContainer.scrollDuration }
@ -589,7 +605,7 @@ Item
selectedIndex = userModel.count - 1
else
selectedIndex--
reset_items()
if (scrollRepeat > 0)
@ -753,5 +769,5 @@ Item
select_or_login()
}
Keys.onEscapePressed: back_to_selection()
}
}

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
}
}

53
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
readonly property int paddingLeft: Math.max(Math.abs(skewLeft), 5)
property int paddingTop: 3
readonly property int paddingRight: Math.max(Math.abs(skewRight), 5)
property int skew: sizes.skewSlices
property int skewLeft: skew
property int skewRight: skew
property int defaultSkewPadding: 5
readonly property int widthFull: buttonText.width + paddingLeft + paddingRight
readonly property int widthPartial: buttonText.width + paddingLeft
property int paddingTop: sizes.paddingTopSlices
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 bgHover: colors.buttonBgHover
@ -103,16 +116,15 @@ Item
{
var context = getContext("2d");
context.clearRect(0, 0, width, height);
context.fillStyle = bgColor
context.beginPath()
context.fillStyle = bgColor;
context.beginPath();
context.moveTo(paddingLeft, height);
context.moveTo(skewPaddingLeft, height);
if (skewLeft > 0) {
context.lineTo(0, height);
context.lineTo(skewLeft, 0);
context.lineTo(skewPaddingLeft, 0);
} else if (skewLeft < 0) {
context.lineTo(Math.abs(skewLeft), height);
context.lineTo(0, 0);
} else {
context.lineTo(0, height);
@ -123,19 +135,18 @@ Item
if (skewRight > 0) {
context.lineTo(width, 0);
context.lineTo(width-skewRight, height);
context.lineTo(widthPartial, height);
} else if (skewRight < 0) {
context.lineTo(width+skewRight, 0);
context.lineTo(width, height);
} else {
context.lineTo(width, 0);
context.lineTo(width, height);
}
context.lineTo(paddingLeft, height);
context.lineTo(skewPaddingLeft, height);
context.closePath()
context.fill()
context.closePath();
context.fill();
}
Behavior on x
@ -153,7 +164,7 @@ Item
Text
{
id: buttonText
x: paddingLeft
x: paddingLeft + skewPaddingLeft
y: paddingTop
color: colors.buttonText
@ -170,7 +181,7 @@ Item
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered:
onEntered:
{
buttonRoot.state = "hover"
buttonBg.requestPaint()
@ -184,4 +195,4 @@ Item
onClicked: buttonRoot.clicked()
}
}
}

27
theme.conf
View file

@ -8,3 +8,30 @@ color_main=#dddddd
color_dimmed=#888888
color_contrast=#1f1f1f
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