diff --git a/Main.qml b/Main.qml index 39a2a5b..61facc3 100644 --- a/Main.qml +++ b/Main.qml @@ -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() } - diff --git a/README.md b/README.md index f1f2fbf..52094da 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/slice/LoopListPowerItem.qml b/slice/LoopListPowerItem.qml index 1adbd6b..2c95f3d 100644 --- a/slice/LoopListPowerItem.qml +++ b/slice/LoopListPowerItem.qml @@ -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() } -} \ No newline at end of file +} diff --git a/slice/LoopListSessionItem.qml b/slice/LoopListSessionItem.qml index cc82f5f..6225a7a 100644 --- a/slice/LoopListSessionItem.qml +++ b/slice/LoopListSessionItem.qml @@ -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 } -} \ No newline at end of file +} diff --git a/slice/LoopListUserItem.qml b/slice/LoopListUserItem.qml index a4a48c3..76c7a0a 100644 --- a/slice/LoopListUserItem.qml +++ b/slice/LoopListUserItem.qml @@ -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 } -} \ No newline at end of file +} diff --git a/slice/PagePower.qml b/slice/PagePower.qml index d434075..0230007 100644 --- a/slice/PagePower.qml +++ b/slice/PagePower.qml @@ -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() -} \ No newline at end of file +} diff --git a/slice/PageUsers.qml b/slice/PageUsers.qml index 8df9feb..f217383 100644 --- a/slice/PageUsers.qml +++ b/slice/PageUsers.qml @@ -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() - -} \ No newline at end of file + +} diff --git a/slice/SizeScheme.qml b/slice/SizeScheme.qml new file mode 100644 index 0000000..63540aa --- /dev/null +++ b/slice/SizeScheme.qml @@ -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 + } +} diff --git a/slice/SlicedButton.qml b/slice/SlicedButton.qml index e644595..9c4a4eb 100644 --- a/slice/SlicedButton.qml +++ b/slice/SlicedButton.qml @@ -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() } -} \ No newline at end of file +} diff --git a/theme.conf b/theme.conf index e39b7d0..88ebc44 100644 --- a/theme.conf +++ b/theme.conf @@ -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