diff --git a/slice/Main.qml b/slice/Main.qml index 9b80ee9..100a9c7 100644 --- a/slice/Main.qml +++ b/slice/Main.qml @@ -7,54 +7,154 @@ Rectangle id: root color: colors.background property variant geometry: screenModel.geometry(screenModel.primary) - - state: "stateUsers" + property string powerState: "statePower" + property string sessionsState: "stateSessions" + property string usersState: "stateUsers" + + property string firstStateReal: + { + if (normalizeState(config.first_state)) + return normalizeState(config.first_state) + else return powerState + } + property string secondStateReal: + { + if (normalizeState(config.second_state)) + return normalizeState(config.second_state) + else return sessionsState + } + property string thirdStateReal: + { + if (normalizeState(config.third_state)) + return normalizeState(config.third_state) + else return usersState + } + + property string firstState: + { + if (firstStateReal === powerState + && ! powerStateEnabled) return secondStateReal + else return firstStateReal + } + property string secondState: + { + if ((secondStateReal === powerState || firstStateReal === powerState) + && ! powerStateEnabled) return thirdStateReal + else return secondStateReal + } + property string thirdState: + { + if ((thirdStateReal === powerState || secondStateReal === powerState || firstStateReal === powerState) + && ! powerStateEnabled) return false + else return thirdStateReal + } + function normalizeState(state) { + if (! state) return false; + state = state.toLowerCase(); + switch (state) + { + case "statepower": + case "pagepower": + case "power": + case "system": + return powerState; + break; + case "statesessions": + case "pagesessions": + case "sessions": + case "desktop": + case "environment": + return sessionsState; + break; + case "stateusers": + case "pageusers": + case "users": + case "login": + return usersState; + break; + } + return false; + } + function getPage(state) { + switch (normalizeState(state)) + { + case powerState: + return pagePower; + break; + case sessionsState: + return pageSessions; + break; + case usersState: + return pageUsers; + break; + } + return false; + } + function getButton(state) { + switch (normalizeState(state)) + { + case powerState: + return buttonPagePower; + break; + case sessionsState: + return buttonPageSessions; + break; + case usersState: + return buttonPageUsers; + break; + } + return false; + } + + state: usersState states: [ State { - name: "statePower" + name: firstStateReal PropertyChanges { target: background; x: (config.parallax_bg_shift < 0 ? geometry.x - Math.abs(config.parallax_bg_shift*2) : geometry.x ) } - PropertyChanges { target: pagePower; enabled: true ; focus: true ; x: 0 } - PropertyChanges { target: pageSessions; enabled: false; focus: false; x: areaMain.width } - PropertyChanges { target: pageUsers; enabled: false; focus: false; x: areaMain.width * 2 } + PropertyChanges { target: getPage(firstStateReal); enabled: true ; focus: true ; x: 0 } + PropertyChanges { target: getPage(secondStateReal); enabled: false; focus: false; x: areaMain.width } + PropertyChanges { target: getPage(thirdStateReal); enabled: false; focus: false; x: areaMain.width * 2 } - PropertyChanges { target: buttonPagePower; highlighted: true } - PropertyChanges { target: buttonPageSessions; highlighted: false } - PropertyChanges { target: buttonPageUsers; highlighted: false } + PropertyChanges { target: getButton(firstStateReal); highlighted: true } + PropertyChanges { target: getButton(secondStateReal); highlighted: false } + PropertyChanges { target: getButton(thirdStateReal); highlighted: false } }, State { - name: "stateSessions" + name: secondStateReal PropertyChanges { target: background; x: geometry.x - Math.abs(config.parallax_bg_shift) } - PropertyChanges { target: pagePower; enabled: false; focus: false; x: -areaMain.width } - PropertyChanges { target: pageSessions; enabled: true ; focus: true ; x: 0 } - PropertyChanges { target: pageUsers; enabled: false; focus: false; x: areaMain.width } + PropertyChanges { target: getPage(firstStateReal); enabled: false; focus: false; x: -areaMain.width } + PropertyChanges { target: getPage(secondStateReal); enabled: true ; focus: true ; x: 0 } + PropertyChanges { target: getPage(thirdStateReal); enabled: false; focus: false; x: areaMain.width } - PropertyChanges { target: buttonPagePower; highlighted: false } - PropertyChanges { target: buttonPageSessions; highlighted: true } - PropertyChanges { target: buttonPageUsers; highlighted: false } + PropertyChanges { target: getButton(firstStateReal); highlighted: false } + PropertyChanges { target: getButton(secondStateReal); highlighted: true } + PropertyChanges { target: getButton(thirdStateReal); highlighted: false } }, State { - name: "stateUsers" + name: thirdStateReal PropertyChanges { target: background; x: (config.parallax_bg_shift > 0 ? geometry.x - Math.abs(config.parallax_bg_shift*2) : geometry.x ) } - PropertyChanges { target: pagePower; enabled: false; focus: false; x: -areaMain.width * 2 } - PropertyChanges { target: pageSessions; enabled: false; focus: false; x: -areaMain.width } - PropertyChanges { target: pageUsers; enabled: true ; focus: true ; x: 0 } + PropertyChanges { target: getPage(firstStateReal); enabled: false; focus: false; x: -areaMain.width * 2 } + PropertyChanges { target: getPage(secondStateReal); enabled: false; focus: false; x: -areaMain.width } + PropertyChanges { target: getPage(thirdStateReal); enabled: true ; focus: true ; x: 0 } - PropertyChanges { target: buttonPagePower; highlighted: false } - PropertyChanges { target: buttonPageSessions; highlighted: false } - PropertyChanges { target: buttonPageUsers; highlighted: true } + PropertyChanges { target: getButton(firstStateReal); highlighted: false } + PropertyChanges { target: getButton(secondStateReal); highlighted: false } + PropertyChanges { target: getButton(thirdStateReal); highlighted: true } } ] + + property bool powerStateEnabled: debug.canPowerOff || debug.canReboot || debug.canSuspend || debug.canHibernate || debug.canHybridSleep function bool(str) { if (str === null || str === undefined) @@ -109,6 +209,7 @@ Rectangle Behavior on x { NumberAnimation { duration: 150 } } } + SizeScheme { id: sizes } ColorScheme { id: colors } FontScheme { id: fonts } @@ -118,48 +219,71 @@ Rectangle x: 0 y: 0 width: root.width - height: Math.max(buttonPagePower.height, buttonPageSessions.height, buttonPageUsers.height) + 10 + height: Math.max(buttonPagePower.height, buttonPageSessions.height, buttonPageUsers.height) + sizes.offsetVerticalSlicesTop + 5 SlicedButton { id: buttonPagePower - x: 5 - y: 5 - + x: sizes.offsetHorizontalSlicesTop + y: sizes.offsetVerticalSlicesTop + + skewRight: sizes.skewSlicesTop skewLeft: 0 + text: debug.hostName ? debug.hostName : "Hostname" - enabled: debug.canPowerOff || debug.canReboot || debug.canSuspend || debug.canHibernate || debug.canHybridSleep + enabled: powerStateEnabled - onClicked: if (enabled) root.state = "statePower" + onClicked: if (enabled) root.state = powerState font: fonts.slicesTop + + paddingLeft: sizes.paddingLeftSlicesTop + paddingRight: sizes.paddingRightSlicesTop + paddingTop: sizes.paddingTopSlicesTop + paddingBottom: sizes.paddingBottomSlicesTop } SlicedButton { id: buttonPageSessions - x: buttonPagePower.x + buttonPagePower.widthPartial + 3 - y: 5 + x: buttonPagePower.x + buttonPagePower.widthPartial + sizes.spacingSlicesTop + y: sizes.offsetVerticalSlicesTop + + skewLeft: sizes.skewSlicesTop + skewRight: sizes.skewSlicesTop text: pageSessions.currentSessionName - onClicked: root.state = "stateSessions" + onClicked: root.state = sessionsState font: fonts.slicesTop + + paddingLeft: sizes.paddingLeftSlicesTop + paddingRight: sizes.paddingRightSlicesTop + paddingTop: sizes.paddingTopSlicesTop + paddingBottom: sizes.paddingBottomSlicesTop } SlicedButton { id: buttonPageUsers - x: buttonPagePower.x + buttonPagePower.widthPartial + buttonPageSessions.widthPartial + 6 - y: 5 + x: buttonPagePower.x + buttonPagePower.widthPartial + buttonPageSessions.widthPartial + ( sizes.spacingSlicesTop * 2) + y: sizes.offsetVerticalSlicesTop + + skewLeft: sizes.skewSlicesTop + skewRight: sizes.skewSlicesTop text: pageUsers.currentUserLogin - onClicked: root.state = "stateUsers" + onClicked: root.state = usersState font: fonts.slicesTop + + paddingLeft: sizes.paddingLeftSlicesTop + paddingRight: sizes.paddingRightSlicesTop + paddingTop: sizes.paddingTopSlicesTop + paddingBottom: sizes.paddingBottomSlicesTop } } @@ -190,7 +314,7 @@ Rectangle onSelectedIndexChanged: pageUsers.selectedSessionIndex = selectedIndex - onSessionSelected: root.state = "stateUsers" + onSessionSelected: root.state = usersState } PageUsers @@ -224,23 +348,33 @@ Rectangle SlicedButton { id: buttonCapsLock - x: 5 - y: areaBottom.height - height - 5 + x: sizes.offsetHorizontalSlicesBottomLeft + y: areaBottom.height - height - sizes.offsetVerticalSlicesBottomLeft + skewRight: sizes.skewSlicesBottomLeft skewLeft: 0 + text: "Caps Lock" highlighted: keyboard.capsLock onClicked: keyboard.capsLock = !keyboard.capsLock font: fonts.slicesBottomLeft + + paddingLeft: sizes.paddingLeftSlicesBottomLeft + paddingRight: sizes.paddingRightSlicesBottomLeft + paddingTop: sizes.paddingTopSlicesBottomLeft + paddingBottom: sizes.paddingBottomSlicesBottomLeft } SlicedButton { id: buttonNumLock - x: buttonCapsLock.x + buttonCapsLock.widthPartial + 3 - y: areaBottom.height - height - 5 + x: buttonCapsLock.x + buttonCapsLock.widthPartial + sizes.spacingSlicesBottomLeft + y: areaBottom.height - height - sizes.offsetVerticalSlicesBottomLeft + + skewLeft: sizes.skewSlicesBottomLeft + skewRight: sizes.skewSlicesBottomLeft text: "Num Lock" highlighted: keyboard.numLock @@ -248,13 +382,21 @@ Rectangle onClicked: keyboard.numLock = !keyboard.numLock font: fonts.slicesBottomLeft + + paddingLeft: sizes.paddingLeftSlicesBottomLeft + paddingRight: sizes.paddingRightSlicesBottomLeft + paddingTop: sizes.paddingTopSlicesBottomLeft + paddingBottom: sizes.paddingBottomSlicesBottomLeft } SlicedButton { id: buttonKeyboardLayout - x: buttonNumLock.x + buttonNumLock.widthPartial + 3 - y: areaBottom.height - height - 5 + x: buttonNumLock.x + buttonNumLock.widthPartial + sizes.spacingSlicesBottomLeft + y: areaBottom.height - height - sizes.offsetVerticalSlicesBottomLeft + + skewLeft: sizes.skewSlicesBottomLeft + skewRight: sizes.skewSlicesBottomLeft text: keyboard.layouts[keyboard.currentLayout].longName onClicked: { @@ -265,20 +407,28 @@ Rectangle } font: fonts.slicesBottomLeft + + paddingLeft: sizes.paddingLeftSlicesBottomLeft + paddingRight: sizes.paddingRightSlicesBottomLeft + paddingTop: sizes.paddingTopSlicesBottomLeft + paddingBottom: sizes.paddingBottomSlicesBottomLeft } Item { id: dateTimeArea x: areaBottom.width - width - width: buttonWeekday.widthPartial + buttonDate.widthPartial + buttonTime.widthPartial + 21 + width: buttonWeekday.widthPartial + buttonDate.widthPartial + buttonTime.widthPartial + ( sizes.spacingSlicesBottomRight * 2 ) + sizes.offsetHorizontalSlicesBottomRight SlicedButton { id: buttonWeekday enabled: false - x: 5 - y: areaBottom.height - height - 5 + x: 0 + y: areaBottom.height - height - sizes.offsetVerticalSlicesBottomRight + + skewLeft: sizes.skewSlicesBottomRight + skewRight: sizes.skewSlicesBottomRight function updateTime() { @@ -287,14 +437,22 @@ Rectangle } font: fonts.slicesBottomRight + + paddingLeft: sizes.paddingLeftSlicesBottomRight + paddingRight: sizes.paddingRightSlicesBottomRight + paddingTop: sizes.paddingTopSlicesBottomRight + paddingBottom: sizes.paddingBottomSlicesBottomRight } SlicedButton { id: buttonDate enabled: false - x: buttonWeekday.x + buttonWeekday.widthPartial + 3 - y: areaBottom.height - height - 5 + x: buttonWeekday.x + buttonWeekday.widthPartial + sizes.spacingSlicesBottomRight + y: areaBottom.height - height - sizes.offsetVerticalSlicesBottomRight + + skewLeft: sizes.skewSlicesBottomRight + skewRight: sizes.skewSlicesBottomRight function updateTime() { @@ -303,15 +461,21 @@ Rectangle } font: fonts.slicesBottomRight + + paddingLeft: sizes.paddingLeftSlicesBottomRight + paddingRight: sizes.paddingRightSlicesBottomRight + paddingTop: sizes.paddingTopSlicesBottomRight + paddingBottom: sizes.paddingBottomSlicesBottomRight } SlicedButton { id: buttonTime enabled: false - x: buttonDate.x + buttonDate.widthPartial + 3 - y: areaBottom.height - height - 5 + x: buttonDate.x + buttonDate.widthPartial + sizes.spacingSlicesBottomRight + y: areaBottom.height - height - sizes.offsetVerticalSlicesBottomRight + skewLeft: sizes.skewSlicesBottomRight skewRight: 0 function updateTime() @@ -321,6 +485,11 @@ Rectangle } font: fonts.slicesBottomRight + + paddingLeft: sizes.paddingLeftSlicesBottomRight + paddingRight: sizes.paddingRightSlicesBottomRight + paddingTop: sizes.paddingTopSlicesBottomRight + paddingBottom: sizes.paddingBottomSlicesBottomRight } } @@ -350,26 +519,26 @@ Rectangle id: scrollMouseArea anchors.fill: parent propagateComposedEvents: true - enabled: root.state != "stateUsers" || !pageUsers.hasLoginShown + enabled: root.state != usersState || !pageUsers.hasLoginShown onWheel: { switch (root.state) { - case "statePower": + case powerState: if (wheel.angleDelta.y < 0) pagePower.scroll_up() else pagePower.scroll_down() break - case "stateSessions": + case sessionsState: if (wheel.angleDelta.y < 0) pageSessions.scroll_up() else pageSessions.scroll_down() break - case "stateUsers": + case usersState: if (!pageUsers.hasLoginShown) { if (wheel.angleDelta.y < 0) @@ -385,16 +554,16 @@ Rectangle function nextScreen() { switch(root.state) { - case "statePower": - root.state = "stateSessions"; + case firstState: + root.state = secondState; break; - case "stateSessions": - root.state = "stateUsers"; + case secondState: + root.state = (thirdState) ? thirdState : firstState; break; - case "stateUsers": - root.state = (buttonPagePower.enabled) ? "statePower" : "stateSessions"; + case thirdState: + root.state = firstState; break; } } @@ -402,16 +571,16 @@ Rectangle function previousScreen() { switch(root.state) { - case "statePower": - root.state = "stateUsers"; + case firstState: + root.state = (thirdState) ? thirdState : secondState; + break; + + case secondState: + root.state = firstState; break; - case "stateSessions": - root.state = (buttonPagePower.enabled) ? "statePower" : "stateUsers"; - break; - - case "stateUsers": - root.state = "stateSessions"; + case thirdState: + root.state = secondState; break; } } diff --git a/slice/PageUsers.qml b/slice/PageUsers.qml index 8df9feb..750fb75 100644 --- a/slice/PageUsers.qml +++ b/slice/PageUsers.qml @@ -302,6 +302,7 @@ Item selectedTextColor: colors.inputSelectionText echoMode: TextInput.Password + passwordCharacter: config.password_character ? config.password_character : false clip: true selectByMouse: true @@ -373,9 +374,12 @@ Item SlicedButton { id: buttonUserLogin - x: userListContainer.width - widthFull - y: progressBar.y + progressBar.height + 2 - paddingTop: 2 + x: userListContainer.width - widthFull - sizes.offsetHorizontalSlicesLoginButtons + y: progressBar.y + progressBar.height + sizes.offsetVerticalSlicesLoginButtons + + skewLeft: sizes.skewSlicesLoginButtons + skewRight: sizes.skewSlicesLoginButtons + highlighted: true opacity: hasLoginShown ? 1 : 0 @@ -384,14 +388,22 @@ Item onClicked: select_or_login() font: fonts.slicesLoginButtons + + paddingLeft: sizes.paddingLeftSlicesLoginButtons + paddingRight: sizes.paddingRightSlicesLoginButtons + paddingTop: sizes.paddingTopSlicesLoginButtons + paddingBottom: sizes.paddingBottomSlicesLoginButtons } SlicedButton { id: buttonUserBack - x: userListContainer.width - widthFull - buttonUserLogin.widthPartial - 3 + x: userListContainer.width - widthFull - buttonUserLogin.widthPartial - sizes.spacingSlicesLoginButtons - sizes.offsetHorizontalSlicesLoginButtons y: buttonUserLogin.y - paddingTop: 2 + + skewLeft: sizes.skewSlicesLoginButtons + skewRight: sizes.skewSlicesLoginButtons + opacity: hasLoginShown ? 1 : 0 visible: !manual @@ -400,6 +412,11 @@ Item onClicked: back_to_selection() font: fonts.slicesLoginButtons + + paddingLeft: sizes.paddingLeftSlicesLoginButtons + paddingRight: sizes.paddingRightSlicesLoginButtons + paddingTop: sizes.paddingTopSlicesLoginButtons + paddingBottom: sizes.paddingBottomSlicesLoginButtons } } @@ -754,4 +771,4 @@ Item } Keys.onEscapePressed: back_to_selection() -} \ No newline at end of file +} diff --git a/slice/SizeScheme.qml b/slice/SizeScheme.qml new file mode 100644 index 0000000..9b434e5 --- /dev/null +++ b/slice/SizeScheme.qml @@ -0,0 +1,355 @@ +import QtQuick 2.7 + +Item +{ + /* * * * * * * * * * * * * * * * * * + * + * Functions + * + * * * * * * * * * * * * * * * * * */ + function not_null(str) { + return !(str === null || str === undefined); + } + + /* * * * * * * * * * * * * * * * * * + * + * Layer 0 options + * Defaults / Fallbacks + * + * * * * * * * * * * * * * * * * * */ + + property int defaultSkewSlices: 26 + property int defaultPaddingSlices: 0 + property int defaultSpacingSlices: 3 + property int defaultOffsetSlices: 5 + + + /* * * * * * * * * * * * * * * * * * + * + * Layer 2 options + * Common + * + * * * * * * * * * * * * * * * * * */ + // Offset + property int offsetSlices: + { + if (not_null(config.offset_slices)) return config.offset_slices + else return defaultOffsetSlices + } + + property int offsetSlicesTop: + { + if (not_null(config.offset_slices_top)) return config.offset_slices_top + else return offsetSlices + } + + property int offsetHorizontalSlicesTop: + { + if (not_null(config.offset_horizontal_slices_top)) return config.offset_horizontal_slices_top + else return offsetSlicesTop + } + + property int offsetVerticalSlicesTop: + { + if (not_null(config.offset_vertical_slices_top)) return config.offset_vertical_slices_top + else return offsetSlicesTop + } + + property int offsetSlicesBottomRight: + { + if (not_null(config.offset_slices_bottom_right)) return config.offset_slices_bottom_right + else return offsetSlices + } + + property int offsetHorizontalSlicesBottomRight: + { + if (not_null(config.offset_horizontal_slices_bottom_right)) return config.offset_horizontal_slices_bottom_right + else return offsetSlicesBottomRight + } + + property int offsetVerticalSlicesBottomRight: + { + if (not_null(config.offset_vertical_slices_bottom_right)) return config.offset_vertical_slices_bottom_right + else return offsetSlicesBottomRight + } + + property int offsetSlicesBottomLeft: + { + if (not_null(config.offset_slices_bottom_left)) return config.offset_slices_bottom_left + else return offsetSlices + } + + property int offsetHorizontalSlicesBottomLeft: + { + if (not_null(config.offset_horizontal_slices_bottom_left)) return config.offset_horizontal_slices_bottom_left + else return offsetSlicesBottomLeft + } + + property int offsetVerticalSlicesBottomLeft: + { + if (not_null(config.offset_vertical_slices_bottom_left)) return config.offset_vertical_slices_bottom_left + else return offsetSlicesBottomLeft + } + + property int offsetSlicesLoginButtons: + { + if (not_null(config.offset_slices_login_buttons)) return config.offset_slices_login_buttons + else return offsetSlices + } + + property int offsetHorizontalSlicesLoginButtons: + { + if (not_null(config.offset_horizontal_slices_login_buttons)) return config.offset_horizontal_slices_login_buttons + else return offsetSlicesLoginButtons + } + + property int offsetVerticalSlicesLoginButtons: + { + if (not_null(config.offset_vertical_slices_login_buttons)) return config.offset_vertical_slices_login_buttons + else return offsetSlicesLoginButtons + } + + // Spacing + property int spacingSlices: + { + if (not_null(config.spacing_slices)) return config.spacing_slices + else return defaultSpacingSlices + } + + property int spacingSlicesTop: + { + if (not_null(config.spacing_slices_top)) return config.spacing_slices_top + else return spacingSlices + } + + property int spacingSlicesBottomRight: + { + if (not_null(config.spacing_slices_bottom_right)) return config.spacing_slices_bottom_right + else return spacingSlices + } + + property int spacingSlicesBottomLeft: + { + if (not_null(config.spacing_slices_bottom_left)) return config.spacing_slices_bottom_left + else return spacingSlices + } + + property int spacingSlicesLoginButtons: + { + if (not_null(config.spacing_slices_login_buttons)) return config.spacing_slices_login_buttons + else return spacingSlices + } + + // Skew + property int skewSlices: + { + if (not_null(config.skew_slices)) return config.skew_slices + else return defaultSkewSlices + } + + property int skewSlicesTop: + { + if (not_null(config.skew_slices_top)) return config.skew_slices_top + else return skewSlices + } + + property int skewSlicesBottomLeft: + { + if (not_null(config.skew_slices_bottom_left)) return config.skew_slices_bottom_left + else return skewSlices + } + + property int skewSlicesBottomRight: + { + if (not_null(config.skew_slices_bottom_right)) return config.skew_slices_bottom_right + else return skewSlices + } + + property int skewSlicesLoginButtons: + { + if (not_null(config.skew_slices_login_buttons)) return config.skew_slices_login_buttons + else return skewSlices + } + + // Padding + property int paddingSlices: + { + if (not_null(config.padding_slices)) return config.padding_slices + else return defaultPaddingSlices + } + + property int paddingHorizontalSlices: + { + if (not_null(config.padding_horizontal_slices)) return config.padding_horizontal_slices + else return paddingSlices + } + + property int paddingVerticalSlices: + { + if (not_null(config.padding_vertical_slices)) return config.padding_vertical_slices + else return paddingSlices + } + + property int paddingLeftSlices: + { + if (not_null(config.padding_left_slices)) return config.padding_left_slices + else if (not_null(config.padding_horizontal_slices)) return config.padding_horizontal_slices + else return paddingSlices + } + + property int paddingRightSlices: + { + if (not_null(config.padding_right_slices)) return config.padding_right_slices + else if (not_null(config.padding_horizontal_slices)) return config.padding_horizontal_slices + else return paddingSlices + } + + property int paddingTopSlices: + { + if (not_null(config.padding_top_slices)) return config.padding_top_slices + else if (not_null(config.padding_vertical_slices)) return config.padding_vertical_slices + else return paddingSlices + } + + property int paddingBottomSlices: + { + if (not_null(config.padding_bottom_slices)) return config.padding_bottom_slices + else if (not_null(config.padding_vertical_slices)) return config.padding_vertical_slices + else return paddingSlices + } + + /* * * * * * * * * * * * * * * * * * + * + * Layer 3 options + * Control types + * + * * * * * * * * * * * * * * * * * */ + + property int paddingLeftSlicesTop: + { + if (not_null(config.padding_left_slices_top)) return config.padding_left_slices_top + else if (not_null(config.padding_horizontal_slices_top)) return config.padding_horizontal_slices_top + else if (not_null(config.padding_slices_top)) return config.padding_slices_top + else return paddingLeftSlices + } + + property int paddingLeftSlicesBottomRight: + { + if (not_null(config.padding_left_slices_bottom_right)) return config.padding_left_slices_bottom_right + else if (not_null(config.padding_horizontal_slices_bottom_right)) return config.padding_horizontal_slices_bottom_right + else if (not_null(config.padding_slices_bottom_right)) return config.padding_slices_bottom_right + else return paddingLeftSlices + } + + property int paddingLeftSlicesBottomLeft: + { + if (not_null(config.padding_left_slices_bottom_left)) return config.padding_left_slices_bottom_left + else if (not_null(config.padding_horizontal_slices_bottom_left)) return config.padding_horizontal_slices_bottom_left + else if (not_null(config.padding_slices_bottom_left)) return config.padding_slices_bottom_left + else return paddingLeftSlices + } + + property int paddingLeftSlicesLoginButtons: + { + if (not_null(config.padding_left_slices_login_buttons)) return config.padding_left_slices_login_buttons + else if (not_null(config.padding_horizontal_slices_login_buttons)) return config.padding_horizontal_slices_login_buttons + else if (not_null(config.padding_slices_login_buttons)) return config.padding_slices_login_buttons + else return paddingLeftSlices + } + + property int paddingRightSlicesTop: + { + if (not_null(config.padding_right_slices_top)) return config.padding_right_slices_top + else if (not_null(config.padding_horizontal_slices_top)) return config.padding_horizontal_slices_top + else if (not_null(config.padding_slices_top)) return config.padding_slices_top + else return paddingRightSlices + } + + property int paddingRightSlicesBottomRight: + { + if (not_null(config.padding_right_slices_bottom_right)) return config.padding_right_slices_bottom_right + else if (not_null(config.padding_horizontal_slices_bottom_right)) return config.padding_horizontal_slices_bottom_right + else if (not_null(config.padding_slices_bottom_right)) return config.padding_slices_bottom_right + else return paddingRightSlices + } + + property int paddingRightSlicesBottomLeft: + { + if (not_null(config.padding_right_slices_bottom_left)) return config.padding_right_slices_bottom_left + else if (not_null(config.padding_horizontal_slices_bottom_left)) return config.padding_horizontal_slices_bottom_left + else if (not_null(config.padding_slices_bottom_left)) return config.padding_slices_bottom_left + else return paddingRightSlices + } + + property int paddingRightSlicesLoginButtons: + { + if (not_null(config.padding_right_slices_login_buttons)) return config.padding_right_slices_login_buttons + else if (not_null(config.padding_horizontal_slices_login_buttons)) return config.padding_horizontal_slices_login_buttons + else if (not_null(config.padding_slices_login_buttons)) return config.padding_slices_login_buttons + else return paddingRightSlices + } + + property int paddingBottomSlicesTop: + { + if (not_null(config.padding_bottom_slices_top)) return config.padding_bottom_slices_top + else if (not_null(config.padding_vertical_slices_top)) return config.padding_vertical_slices_top + else if (not_null(config.padding_slices_top)) return config.padding_slices_top + else return paddingBottomSlices + } + + property int paddingBottomSlicesBottomRight: + { + if (not_null(config.padding_bottom_slices_bottom_right)) return config.padding_bottom_slices_bottom_right + else if (not_null(config.padding_vertical_slices_bottom_right)) return config.padding_vertical_slices_bottom_right + else if (not_null(config.padding_slices_bottom_right)) return config.padding_slices_bottom_right + else return paddingBottomSlices + } + + property int paddingBottomSlicesBottomLeft: + { + if (not_null(config.padding_bottom_slices_bottom_left)) return config.padding_bottom_slices_bottom_left + else if (not_null(config.padding_vertical_slices_bottom_left)) return config.padding_vertical_slices_bottom_left + else if (not_null(config.padding_slices_bottom_left)) return config.padding_slices_bottom_left + else return paddingBottomSlices + } + + property int paddingBottomSlicesLoginButtons: + { + if (not_null(config.padding_bottom_slices_login_buttons)) return config.padding_bottom_slices_login_buttons + else if (not_null(config.padding_vertical_slices_login_buttons)) return config.padding_vertical_slices_login_buttons + else if (not_null(config.padding_slices_login_buttons)) return config.padding_slices_login_buttons + else return paddingBottomSlices + } + + property int paddingTopSlicesTop: + { + if (not_null(config.padding_top_slices_top)) return config.padding_top_slices_top + else if (not_null(config.padding_vertical_slices_top)) return config.padding_vertical_slices_top + else if (not_null(config.padding_slices_top)) return config.padding_slices_top + else return paddingTopSlices + } + + property int paddingTopSlicesBottomRight: + { + if (not_null(config.padding_top_slices_bottom_right)) return config.padding_top_slices_bottom_right + else if (not_null(config.padding_vertical_slices_bottom_right)) return config.padding_vertical_slices_bottom_right + else if (not_null(config.padding_slices_bottom_right)) return config.padding_slices_bottom_right + else return paddingTopSlices + } + + property int paddingTopSlicesBottomLeft: + { + if (not_null(config.padding_top_slices_bottom_left)) return config.padding_top_slices_bottom_left + else if (not_null(config.padding_vertical_slices_bottom_left)) return config.padding_vertical_slices_bottom_left + else if (not_null(config.padding_slices_bottom_left)) return config.padding_slices_bottom_left + else return paddingTopSlices + } + + property int paddingTopSlicesLoginButtons: + { + if (not_null(config.padding_top_slices_login_buttons)) return config.padding_top_slices_login_buttons + else if (not_null(config.padding_vertical_slices_login_buttons)) return config.padding_vertical_slices_login_buttons + else if (not_null(config.padding_slices_login_buttons)) return config.padding_slices_login_buttons + else return paddingTopSlices + } +} diff --git a/slice/SlicedButton.qml b/slice/SlicedButton.qml index e644595..d57815a 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 + + property int skew: sizes.skewSlices + property int skewLeft: skew + property int skewRight: skew + + property int paddingTop: sizes.paddingTopSlices + property int paddingBottom: sizes.paddingBottomSlices + property int paddingLeft: sizes.paddingLeftSlices + property int paddingRight: sizes.paddingRightSlices + + + readonly property int skewSizeLeft: Math.round(height * Math.abs(skewLeft)/45) + readonly property int skewSizeRight: Math.round(height * Math.abs(skewRight)/45) + + readonly property int skewPaddingLeft: Math.max(skewSizeLeft, 5) + readonly property int skewPaddingRight: Math.max(skewSizeRight, 5) - readonly property int paddingLeft: Math.max(Math.abs(skewLeft), 5) - property int paddingTop: 3 - readonly property int paddingRight: Math.max(Math.abs(skewRight), 5) + readonly property int totalPaddingLeft: skewPaddingLeft + paddingLeft + readonly property int totalPaddingRight: skewPaddingRight + paddingRight - readonly property int widthFull: buttonText.width + paddingLeft + paddingRight - readonly property int widthPartial: buttonText.width + paddingLeft + readonly property int widthFull: buttonText.width + totalPaddingLeft + totalPaddingRight + readonly property int widthPartial: buttonText.width + totalPaddingLeft + paddingRight + (skewPaddingRight - skewSizeRight) property color bgIdle: colors.buttonBg property color bgHover: colors.buttonBgHover @@ -38,7 +51,6 @@ Item property color textIdleHighlighted: colors.buttonTextHighlighted property color textHoverHighlighted: colors.buttonTextHoverHighlighted - signal clicked() Behavior on x @@ -106,13 +118,13 @@ Item context.fillStyle = bgColor context.beginPath() - context.moveTo(paddingLeft, height); + context.moveTo(totalPaddingLeft, height); if (skewLeft > 0) { context.lineTo(0, height); - context.lineTo(skewLeft, 0); + context.lineTo(skewSizeLeft, 0); } else if (skewLeft < 0) { - context.lineTo(Math.abs(skewLeft), height); + context.lineTo(skewSizeLeft, height); context.lineTo(0, 0); } else { context.lineTo(0, height); @@ -123,16 +135,16 @@ Item if (skewRight > 0) { context.lineTo(width, 0); - context.lineTo(width-skewRight, height); + context.lineTo(width-skewSizeRight, height); } else if (skewRight < 0) { - context.lineTo(width+skewRight, 0); + context.lineTo(width-skewSizeRight, 0); context.lineTo(width, height); } else { context.lineTo(width, 0); context.lineTo(width, height); } - context.lineTo(paddingLeft, height); + context.lineTo(totalPaddingLeft, height); context.closePath() context.fill() @@ -153,7 +165,7 @@ Item Text { id: buttonText - x: paddingLeft + x: totalPaddingLeft y: paddingTop color: colors.buttonText @@ -184,4 +196,4 @@ Item onClicked: buttonRoot.clicked() } -} \ No newline at end of file +} diff --git a/slice/theme.conf b/slice/theme.conf index f72ac50..e533165 100644 --- a/slice/theme.conf +++ b/slice/theme.conf @@ -7,4 +7,7 @@ color_bg=#222222 color_main=#dddddd color_dimmed=#888888 color_contrast=#1f1f1f -manual=false \ No newline at end of file +padding_top_slices=3 +padding_bottom_slices=3 +offset_vertical_slices_login_buttons=2 +manual=false