diff --git a/README.md b/README.md index 4a7d12e..a9019a8 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,6 @@ Create file `theme.conf.user` in theme folder. See `slice/theme.conf` for refere ### Base options -* `font` - overall font. Defaults to `Roboto`. * `background` - path to background image. If not set, falls back to `color_bg`. Not set by default. * `bg_mode` - background image fill mode. Can be either `aspect`, `fill`, `tile` or `none`. Defaults to `aspect`. * `parallax_bg_shift` - shifting of parallax background on tab change in pixels. `0` disables parallax motion. Negative values will scroll background in opposite direction. Default is `20`. @@ -51,14 +50,22 @@ There are some things that can't be tested well in greeter (e.g. shutdown option ### Color scheme -There are many color options. In fact, too many. So now they are grouped by layers in [color scheme](https://github.com/RadRussianRus/sddm-slice/wiki/Color-scheme). Most of them are optional, only mandatory options are from [layer 1](https://github.com/RadRussianRus/sddm-slice/wiki/Layer-1): +There are many color options. In fact, too many. So now they are grouped by layers in [color scheme](https://github.com/RadRussianRus/sddm-slice/wiki/Color-Scheme). Most of them are optional, only mandatory options are from [layer 1](https://github.com/RadRussianRus/sddm-slice/wiki/Color-Scheme-Layer-1): * `color_bg` - background color. Defaults to `#222222`. * `color_main` - main color. Defaults to `#dddddd`. * `color_dimmed` - dimmed main color. Defaults to `#888888`. * `color_contrast` - color that contrasting to both main and dimmed. Defaults to `#1f1f1f`. -Info about other layers can be found on wiki: [layer 2](https://github.com/RadRussianRus/sddm-slice/wiki/Layer-2), [layer 3](https://github.com/RadRussianRus/sddm-slice/wiki/Layer-3). +Info about other layers can be found on wiki: [layer 2](https://github.com/RadRussianRus/sddm-slice/wiki/Color-Scheme-Layer-2), [layer 3](https://github.com/RadRussianRus/sddm-slice/wiki/Color-Scheme-Layer-3). + +### Font scheme + +There are also many font options, so there is now [font scheme](https://github.com/RadRussianRus/sddm-slice/wiki/Font-Scheme) too. Most of them are optional, only mandatory option is from [layer 1](https://github.com/RadRussianRus/sddm-slice/wiki/Font-Scheme-Layer-1): + +* `font` - overall font. Defaults to `Roboto`. + +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). ## License diff --git a/slice/FontScheme.qml b/slice/FontScheme.qml new file mode 100644 index 0000000..9b7a101 --- /dev/null +++ b/slice/FontScheme.qml @@ -0,0 +1,169 @@ +import QtQuick 2.7 + +Item +{ + /* * * * * * * * * * * * * * * * * * + * + * Functions + * + * * * * * * * * * * * * * * * * * */ + + function cap(str) + { + str = str.toLowerCase(); + + switch (str) + { + case 'upper': + return Font.AllUppercase; + + case 'lower': + return Font.AllLowercase; + + case 'smallcaps': + return Font.SmallCaps; + + case 'capitalize': + return Font.Capitalize; + + default: + return Font.MixedCase; + } + } + + + /* * * * * * * * * * * * * * * * * * + * + * Layer 1 options + * Required + * + * * * * * * * * * * * * * * * * * */ + + property string main: config.font + + + /* * * * * * * * * * * * * * * * * * + * + * Layer 2 options + * Common + * + * * * * * * * * * * * * * * * * * */ + + property font slices: Qt.font({ + family: config.font_slices ? config.font_slices : config.font, + pointSize: config.font_slices_size ? Number(config.font_slices_size) : 13, + bold: not_null(config.font_slices_bold) ? bool(config.font_slices_bold) : true, + italic: not_null(config.font_slices_italic) ? bool(config.font_slices_italic) : false, + underline: not_null(config.font_slices_underline) ? bool(config.font_slices_underline) : false, + capitalization: not_null(config.font_slices_capitalize) ? cap(config.font_slices_capitalize) : Font.AllUppercase + }); + + property font inputGroup: Qt.font({ + family: config.font_input_group ? config.font_input_group : config.font, + pointSize: config.font_input_group_size ? Number(config.font_input_group_size) : 18, + bold: not_null(config.font_input_group_bold) ? bool(config.font_input_group_bold) : false, + italic: not_null(config.font_input_group_italic) ? bool(config.font_input_group_italic) : false, + underline: not_null(config.font_input_group_underline) ? bool(config.font_input_group_underline) : false, + capitalization: not_null(config.font_input_group_capitalize) ? cap(config.font_input_group_capitalize) : Font.MixedCase + }); + + property font listItemBig: Qt.font({ + family: config.font_list_item_big ? config.font_list_item_big : config.font, + pointSize: config.font_list_item_big_size ? Number(config.font_list_item_big_size) : 36, + bold: not_null(config.font_list_item_big_bold) ? bool(config.font_list_item_big_bold) : true, + italic: not_null(config.font_list_item_big_italic) ? bool(config.font_list_item_big_italic) : false, + underline: not_null(config.font_list_item_big_underline) ? bool(config.font_list_item_big_underline) : false, + capitalization: not_null(config.font_list_item_big_capitalize) ? cap(config.font_list_item_big_capitalize) : Font.MixedCase + }); + + property font listItemMed: Qt.font({ + family: config.font_list_item_med ? config.font_list_item_med : config.font, + pointSize: config.font_list_item_med_size ? Number(config.font_list_item_med_size) : 28, + bold: not_null(config.font_list_item_med_bold) ? bool(config.font_list_item_med_bold) : true, + italic: not_null(config.font_list_item_med_italic) ? bool(config.font_list_item_med_italic) : false, + underline: not_null(config.font_list_item_med_underline) ? bool(config.font_list_item_med_underline) : false, + capitalization: not_null(config.font_list_item_med_capitalize) ? cap(config.font_list_item_med_capitalize) : Font.MixedCase + }); + + property font listItemSub: Qt.font({ + family: config.font_list_item_sub ? config.font_list_item_sub : config.font, + pointSize: config.font_list_item_sub_size ? Number(config.font_list_item_sub_size) : 20, + bold: not_null(config.font_list_item_sub_bold) ? bool(config.font_list_item_sub_bold) : false, + italic: not_null(config.font_list_item_sub_italic) ? bool(config.font_list_item_sub_italic) : false, + underline: not_null(config.font_list_item_sub_underline) ? bool(config.font_list_item_sub_underline) : false, + capitalization: not_null(config.font_list_item_sub_capitalize) ? cap(config.font_list_item_sub_capitalize) : Font.MixedCase + }); + + property font error: Qt.font({ + family: config.font_error ? config.font_error : config.font, + pointSize: config.font_error_size ? Number(config.font_error_size) : 18, + bold: not_null(config.font_error_bold) ? bool(config.font_error_bold) : true, + italic: not_null(config.font_error_italic) ? bool(config.font_error_italic) : false, + underline: not_null(config.font_error_underline) ? bool(config.font_error_underline) : false, + capitalization: not_null(config.font_error_capitalize) ? cap(config.font_error_capitalize) : Font.MixedCase + }); + + /* * * * * * * * * * * * * * * * * * + * + * Layer 3 options + * Control types + * + * * * * * * * * * * * * * * * * * */ + + // Slices + property font slicesTop: Qt.font({ + family: config.font_slices_top ? config.font_slices_top : slices.family, + pointSize: config.font_slices_top_size ? Number(config.font_slices_top_size) : slices.pointSize, + bold: not_null(config.font_slices_top_bold) ? bool(config.font_slices_top_bold) : slices.bold, + italic: not_null(config.font_slices_top_italic) ? bool(config.font_slices_top_italic) : slices.italic, + underline: not_null(config.font_slices_top_underline) ? bool(config.font_slices_top_underline) : slices.underline, + capitalization: not_null(config.font_slices_top_capitalize) ? cap(config.font_slices_top_capitalize) : slices.capitalization + }); + + property font slicesBottomLeft: Qt.font({ + family: config.font_slices_bottom_left ? config.font_slices_bottom_left : slices.family, + pointSize: config.font_slices_bottom_left_size ? Number(config.font_slices_bottom_left_size) : slices.pointSize, + bold: not_null(config.font_slices_bottom_left_bold) ? bool(config.font_slices_bottom_left_bold) : slices.bold, + italic: not_null(config.font_slices_bottom_left_italic) ? bool(config.font_slices_bottom_left_italic) : slices.italic, + underline: not_null(config.font_slices_bottom_left_underline) ? bool(config.font_slices_bottom_left_underline) : slices.underline, + capitalization: not_null(config.font_slices_bottom_left_capitalize) ? cap(config.font_slices_bottom_left_capitalize) : slices.capitalization + }); + + property font slicesBottomRight: Qt.font({ + family: config.font_slices_bottom_right ? config.font_slices_bottom_right : slices.family, + pointSize: config.font_slices_bottom_right_size ? Number(config.font_slices_bottom_right_size) : slices.pointSize, + bold: not_null(config.font_slices_bottom_right_bold) ? bool(config.font_slices_bottom_right_bold) : slices.bold, + italic: not_null(config.font_slices_bottom_right_italic) ? bool(config.font_slices_bottom_right_italic) : slices.italic, + underline: not_null(config.font_slices_bottom_right_underline) ? bool(config.font_slices_bottom_right_underline) : slices.underline, + capitalization: not_null(config.font_slices_bottom_right_capitalize) ? cap(config.font_slices_bottom_right_capitalize) : slices.capitalization + }); + + property font slicesLoginButtons: Qt.font({ + family: config.font_slices_login_buttons ? config.font_slices_login_buttons : slices.family, + pointSize: config.font_slices_login_buttons_size ? Number(config.font_slices_login_buttons_size) : slices.pointSize, + bold: not_null(config.font_slices_login_buttons_bold) ? bool(config.font_slices_login_buttons_bold) : slices.bold, + italic: not_null(config.font_slices_login_buttons_italic) ? bool(config.font_slices_login_buttons_italic) : slices.italic, + underline: not_null(config.font_slices_login_buttons_underline) ? bool(config.font_slices_login_buttons_underline) : slices.underline, + capitalization: not_null(config.font_slices_login_buttons_capitalize) ? cap(config.font_slices_login_buttons_capitalize) : slices.capitalization + }); + + // Input group + property font input: Qt.font({ + family: config.font_input ? config.font_input : inputGroup.family, + pointSize: config.font_input_size ? Number(config.font_input_size) : inputGroup.pointSize, + bold: not_null(config.font_input_bold) ? bool(config.font_input_bold) : inputGroup.bold, + italic: not_null(config.font_input_italic) ? bool(config.font_input_italic) : inputGroup.italic, + underline: not_null(config.font_input_underline) ? bool(config.font_input_underline) : inputGroup.underline, + capitalization: not_null(config.font_input_capitalize) ? cap(config.font_input_capitalize) : inputGroup.capitalization + }); + + property font placeholder: Qt.font({ + family: config.font_placeholder ? config.font_placeholder : inputGroup.family, + pointSize: config.font_placeholder_size ? Number(config.font_placeholder_size) : inputGroup.pointSize, + bold: not_null(config.font_placeholder_bold) ? bool(config.font_placeholder_bold) : inputGroup.bold, + italic: not_null(config.font_placeholder_italic) ? bool(config.font_placeholder_italic) : inputGroup.italic, + underline: not_null(config.font_placeholder_underline) ? bool(config.font_placeholder_underline) : inputGroup.underline, + capitalization: not_null(config.font_placeholder_capitalize) ? cap(config.font_placeholder_capitalize) : inputGroup.capitalization + }); + +} \ No newline at end of file diff --git a/slice/LoopListPowerItem.qml b/slice/LoopListPowerItem.qml index b0e8b3d..8354b0b 100644 --- a/slice/LoopListPowerItem.qml +++ b/slice/LoopListPowerItem.qml @@ -14,8 +14,8 @@ Item transform: Scale { - origin.x: 54 - origin.y: 29 + origin.x: descriptionLabel.height + 10 + 2 + origin.y: descriptionLabel.height + 10 / 2 xScale: distance yScale: distance } @@ -33,8 +33,8 @@ Item { id: powerItemIcon source: icon - sourceSize.width: 48 - sourceSize.height: 48 + sourceSize.width: descriptionLabel.height + 10 - 4 + sourceSize.height: descriptionLabel.height + 10 - 4 x: 2 y: 2 } @@ -49,8 +49,8 @@ Item Rectangle { - width: 52 - height: 52 + width: descriptionLabel.height + 10 + height: descriptionLabel.height + 10 color: ( hover ? colors.iconBgHover : colors.iconBg ) } @@ -59,30 +59,27 @@ Item id: descriptionLabel text: itemRoot.title color: ( hover ? colors.textHover : colors.text ) + width: parent.width - descriptionLabel.height + 10 - 2 - 24 - font - { - family: config.font - pointSize: 28 - bold: true - } + font: fonts.listItemMed + elide: Text.ElideRight - x: 64 + x: descriptionLabel.height + 10 + 12 y: 5 } Rectangle { - x: 54 - width: parent.width - 54 - height: 52 + x: descriptionLabel.height + 10 + 2 + width: parent.width - descriptionLabel.height + 10 - 2 + height: descriptionLabel.height + 10 color: ( hover ? colors.textBgHover : colors.textBg ) } MouseArea { width: descriptionLabel.x + descriptionLabel.width - height: 52 + height: descriptionLabel.height + 10 hoverEnabled: true onClicked: itemRoot.clicked() diff --git a/slice/LoopListSessionItem.qml b/slice/LoopListSessionItem.qml index 982f263..459a1e8 100644 --- a/slice/LoopListSessionItem.qml +++ b/slice/LoopListSessionItem.qml @@ -19,12 +19,7 @@ Item text: sessionName color: ( hover ? colors.textHover : colors.text ) - font - { - family: config.font - pointSize: 28 - bold: true - } + font: fonts.listItemMed x: parent.x + 10 y: 5 diff --git a/slice/LoopListUserItem.qml b/slice/LoopListUserItem.qml index 43480ae..319f05f 100644 --- a/slice/LoopListUserItem.qml +++ b/slice/LoopListUserItem.qml @@ -7,13 +7,14 @@ Item id: itemRoot opacity: distance width: parent.width + height: userName == "" ? userLoginText.height + 14 : userNameText.height + userLoginText.height - 4 property bool hover: false property bool hoverEnabled: true transform: Scale { - origin.x: 80 + origin.x: itemRoot.height + 12 xScale: distance yScale: distance } @@ -27,56 +28,56 @@ Item { id: profilePicture source: userAvatar - sourceSize.width: 60 - sourceSize.height: 60 + sourceSize.width: itemRoot.height - 8 + sourceSize.height: itemRoot.height - 8 x: 4 y: 4 } Rectangle { - width: 68 - height: 68 + width: itemRoot.height + height: itemRoot.height color: ( hoverEnabled && hover ? colors.iconBgHover : colors.iconBg ) } Text { + id: userNameText text: userName color: ( hoverEnabled && hover ? colors.textHover : colors.text ) - font - { - family: config.font - pointSize: 28 - bold: true - } + font: fonts.listItemMed - x: 80 + elide: Text.ElideRight + + x: itemRoot.height + 12 y: 0 + + width: itemRoot.width - itemRoot.height - 26 } Text { + id: userLoginText text: userLogin color: ( hoverEnabled && hover ? (userName == "" ? colors.textHover : colors.textDimmedHover ) : (userName == "" ? colors.text : colors.textDimmed ) ) - y: userName == "" ? 6 : 36 - font - { - family: config.font - pointSize: userName == "" ? 36 : 20 - bold: userName == "" - } - x: 80 + y: userName == "" ? 7 : userNameText.height * 0.8 + font: userName == "" ? fonts.listItemBig : fonts.listItemSub + x: itemRoot.height + 12 + + elide: Text.ElideRight + + width: itemRoot.width - itemRoot.height - 26 } Rectangle { - x: 70 + x: itemRoot.height + 2 y: 0 - width: parent.width - 70 - height: 68 + width: parent.width - itemRoot.height - 2 + height: itemRoot.height color: ( hoverEnabled && hover ? colors.textBgHover : colors.textBg ) } } \ No newline at end of file diff --git a/slice/Main.qml b/slice/Main.qml index f91a8e6..0100847 100644 --- a/slice/Main.qml +++ b/slice/Main.qml @@ -70,6 +70,10 @@ Rectangle return Boolean(Number(str).valueOf()).valueOf(); } + function not_null(str) { + return !(str === null || str === undefined); + } + TextConstants { id: localeText } Debug { id: debug } @@ -106,6 +110,7 @@ Rectangle } ColorScheme { id: colors } + FontScheme { id: fonts } Item { @@ -113,7 +118,7 @@ Rectangle x: 0 y: 0 width: root.width - height: 35 + height: Math.max(buttonPagePower.height, buttonPageSessions.height, buttonPageUsers.height) + 10 SlicedButton { @@ -127,6 +132,8 @@ Rectangle enabled: debug.canPowerOff || debug.canReboot || debug.canSuspend || debug.canHibernate || debug.canHybridSleep onClicked: if (enabled) root.state = "statePower" + + font: fonts.slicesTop } SlicedButton @@ -138,6 +145,8 @@ Rectangle text: pageSessions.currentSessionName onClicked: root.state = "stateSessions" + + font: fonts.slicesTop } SlicedButton @@ -149,6 +158,8 @@ Rectangle text: pageUsers.currentUserLogin onClicked: root.state = "stateUsers" + + font: fonts.slicesTop } } @@ -158,7 +169,7 @@ Rectangle x: 0 y: areaTop.height width: root.width - height: root.height - (areaTop.height * 2) + height: root.height - areaTop.height - areaBottom.height PagePower { @@ -220,42 +231,55 @@ Rectangle { id: areaBottom x: 0 - y: areaTop.height + areaMain.height + y: root.height - height width: root.width - height: 35 + height: Math.max( + buttonCapsLock.height, + buttonNumLock.height, + buttonKeyboardLayout.height, + buttonWeekday.height, + buttonDate.height, + buttonTime.height + ) + 10 SlicedButton { id: buttonCapsLock x: 5 - y: 5 + y: areaBottom.height - height - 5 hasLeftSlice: false text: "Caps Lock" highlighted: keyboard.capsLock onClicked: keyboard.capsLock = !keyboard.capsLock + + font: fonts.slicesBottomLeft } SlicedButton { id: buttonNumLock x: buttonCapsLock.x + buttonCapsLock.widthPartial + 3 - y: 5 + y: areaBottom.height - height - 5 text: "Num Lock" highlighted: keyboard.numLock onClicked: keyboard.numLock = !keyboard.numLock + + font: fonts.slicesBottomLeft } SlicedButton { id: buttonKeyboardLayout x: buttonNumLock.x + buttonNumLock.widthPartial + 3 - y: 5 + y: areaBottom.height - height - 5 text: keyboard.layouts[keyboard.currentLayout].longName + + font: fonts.slicesBottomLeft } Item @@ -268,33 +292,37 @@ Rectangle { id: buttonWeekday x: 5 - y: 5 + y: areaBottom.height - height - 5 function updateTime() { text = new Date().toLocaleString(Qt.locale(), "dddd") } + + font: fonts.slicesBottomRight } SlicedButton { id: buttonDate x: buttonWeekday.x + buttonWeekday.widthPartial + 3 - y: 5 + y: areaBottom.height - height - 5 function updateTime() { text = new Date().toLocaleString(Qt.locale(), "dd.MM.yyyy") } + + font: fonts.slicesBottomRight } SlicedButton { id: buttonTime x: buttonDate.x + buttonDate.widthPartial + 3 - y: 5 + y: areaBottom.height - height - 5 hasRightSlice: false @@ -303,6 +331,8 @@ Rectangle text = new Date().toLocaleString(Qt.locale(), "hh:mm:ss") } + + font: fonts.slicesBottomRight } } diff --git a/slice/PageUsers.qml b/slice/PageUsers.qml index 2e3b007..2801db2 100644 --- a/slice/PageUsers.qml +++ b/slice/PageUsers.qml @@ -187,7 +187,7 @@ Item LoopListUserItem { id: middleItem - y: hasLoginShown ? pageRoot.height / 2.3 - 40 : pageRoot.height / 2.3 + y: hasLoginShown ? pageRoot.height / 2.3 - (middleItem.height / 2 + passwordFieldBg.height + progressBar.height + 2 + buttonUserLogin.height) / 2 : pageRoot.height / 2.3 userName: get_name(0) userLogin: get_login(0) userAvatar: get_avatar(0) @@ -227,9 +227,8 @@ Item { id: passwordField x: 10 - y: hasLoginShown ? pageRoot.height / 2.3 + 37 : pageRoot.height / 2.3 + 62 + y: (passwordFieldBg.height - height) / 2 + passwordFieldBg.y width: parent.width - 20 - height: 25 opacity: hasLoginShown ? 1 : 0 color: colors.inputText selectionColor: colors.inputSelectionBg @@ -239,12 +238,7 @@ Item clip: true selectByMouse: true - font - { - family: config.font - bold: true - pointSize: 18 - } + font: fonts.input Component.onCompleted: forceActiveFocus() @@ -254,28 +248,23 @@ Item { id: passwordFieldPlaceholder x: passwordField.x - y: passwordField.y + y: (passwordFieldBg.height - height) / 2 + passwordFieldBg.y width: passwordField.width opacity: hasLoginShown ? 1 : 0 visible: passwordField.text.length <= 0 color: colors.inputPlaceholderText - font - { - family: config.font - bold: true - pointSize: 18 - } + font: fonts.placeholder text: localeText.password } Rectangle { id: passwordFieldBg - y: hasLoginShown ? pageRoot.height / 2.3 + 30 : pageRoot.height / 2.3 + 55 + y: middleItem.y + middleItem.height + 2 width: parent.width - height: 40 + height: Math.max(fonts.input.pointSize, fonts.placeholder.pointSize) + 20 opacity: hasLoginShown ? 1 : 0 color: colors.inputBg } @@ -283,7 +272,7 @@ Item Rectangle { id: progressBar - y: hasLoginShown ? pageRoot.height / 2.3 + 70 : pageRoot.height / 2.3 + 105 + y: passwordFieldBg.y + passwordFieldBg.height width: parent.width height: 2 opacity: hasLoginShown ? 1 : 0 @@ -326,7 +315,7 @@ Item { id: buttonUserLogin x: userListContainer.width - widthFull - y: hasLoginShown ? pageRoot.height / 2.3 + 74 : pageRoot.height / 2.3 + 109 + y: progressBar.y + progressBar.height + 2 paddingTop: 2 highlighted: true opacity: hasLoginShown ? 1 : 0 @@ -334,19 +323,23 @@ Item text: localeText.login onClicked: select_or_login() + + font: fonts.slicesLoginButtons } SlicedButton { id: buttonUserBack x: userListContainer.width - widthFull - buttonUserLogin.widthPartial - 3 - y: hasLoginShown ? pageRoot.height / 2.3 + 74 : pageRoot.height / 2.3 + 109 + y: buttonUserLogin.y paddingTop: 2 opacity: hasLoginShown ? 1 : 0 text: qsTr("Back") onClicked: back_to_selection() + + font: fonts.slicesLoginButtons } Text @@ -359,12 +352,7 @@ Item color: colors.errorText - font - { - family: config.font - bold: true - pointSize: 18 - } + font: fonts.error Behavior on opacity { NumberAnimation { duration: userListContainer.scrollDuration } } @@ -428,7 +416,7 @@ Item NumberAnimation { target: botMidItem; property: "distance"; to: 0; duration: userListContainer.scrollDuration } NumberAnimation { target: botFarItem; property: "distance"; to: 0; duration: userListContainer.scrollDuration } - NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3 - 40; duration: userListContainer.scrollDuration } + NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3 - (middleItem.height / 2 + passwordFieldBg.height + progressBar.height + 2 + buttonUserLogin.height) / 2; duration: userListContainer.scrollDuration } NumberAnimation { target: passwordField; property: "opacity"; to: 1; duration: userListContainer.scrollDuration } NumberAnimation { target: passwordFieldPlaceholder; property: "opacity"; to: 1; duration: userListContainer.scrollDuration } @@ -437,12 +425,6 @@ Item NumberAnimation { target: buttonUserBack; property: "opacity"; to: 1; duration: userListContainer.scrollDuration } NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 1; duration: userListContainer.scrollDuration } - NumberAnimation { target: passwordField; property: "y"; to: pageRoot.height / 2.3 + 37; duration: userListContainer.scrollDuration } - NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 + 30; duration: userListContainer.scrollDuration } - NumberAnimation { target: progressBar; property: "y"; to: pageRoot.height / 2.3 + 70; duration: userListContainer.scrollDuration } - NumberAnimation { target: buttonUserBack; property: "y"; to: pageRoot.height / 2.3 + 74; duration: userListContainer.scrollDuration } - NumberAnimation { target: buttonUserLogin; property: "y"; to: pageRoot.height / 2.3 + 74; duration: userListContainer.scrollDuration } - onStopped: { hasLoginShown = true @@ -467,12 +449,6 @@ Item NumberAnimation { target: buttonUserBack; property: "opacity"; to: 0; duration: userListContainer.scrollDuration } NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 0; duration: userListContainer.scrollDuration } - NumberAnimation { target: passwordField; property: "y"; to: pageRoot.height / 2.3 + 62; duration: userListContainer.scrollDuration } - NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 + 55; duration: userListContainer.scrollDuration } - NumberAnimation { target: progressBar; property: "y"; to: pageRoot.height / 2.3 + 105; duration: userListContainer.scrollDuration } - NumberAnimation { target: buttonUserBack; property: "y"; to: pageRoot.height / 2.3 + 109; duration: userListContainer.scrollDuration } - NumberAnimation { target: buttonUserLogin; property: "y"; to: pageRoot.height / 2.3 + 109; duration: userListContainer.scrollDuration } - onStopped: { hasLoginShown = false @@ -561,7 +537,7 @@ Item id: loginEnterAnimation NumberAnimation { target: passwordField; property: "opacity"; to: 0; duration: userListContainer.scrollDuration } NumberAnimation { target: passwordFieldBg; property: "height"; to: 0; duration: userListContainer.scrollDuration } - NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 + 70; duration: userListContainer.scrollDuration } + NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 - (middleItem.height / 2 + progressBar.height + 2) / 2; duration: userListContainer.scrollDuration } NumberAnimation { target: passwordFieldPlaceholder; property: "opacity"; to: 0; duration: userListContainer.scrollDuration } NumberAnimation { target: buttonUserBack; property: "opacity"; to: 0; duration: userListContainer.scrollDuration } NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 0; duration: userListContainer.scrollDuration } @@ -578,7 +554,7 @@ Item id: loginExitAnimation NumberAnimation { target: passwordField; property: "opacity"; to: 1; duration: userListContainer.scrollDuration } NumberAnimation { target: passwordFieldBg; property: "height"; to: 40; duration: userListContainer.scrollDuration } - NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 + 30; duration: userListContainer.scrollDuration } + NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 - (middleItem.height / 2 + passwordFieldBg.height + progressBar.height + 2 + buttonUserLogin.height) / 2; duration: userListContainer.scrollDuration } NumberAnimation { target: passwordFieldPlaceholder; property: "opacity"; to: 1; duration: userListContainer.scrollDuration } NumberAnimation { target: buttonUserBack; property: "opacity"; to: 1; duration: userListContainer.scrollDuration } NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 1; duration: userListContainer.scrollDuration } @@ -586,7 +562,7 @@ Item NumberAnimation { target: progressBarSlider1; property: "opacity"; to: 0; duration: userListContainer.scrollDuration } NumberAnimation { target: progressBarSlider2; property: "opacity"; to: 0; duration: userListContainer.scrollDuration } NumberAnimation { target: progressBarBg; property: "opacity"; to: 0; duration: userListContainer.scrollDuration } - NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3 - 40; duration: userListContainer.scrollDuration } + NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3 - (middleItem.height / 2 + passwordFieldBg.height + progressBar.height + 2 + buttonUserLogin.height) / 2; duration: userListContainer.scrollDuration } onStopped: { diff --git a/slice/SlicedButton.qml b/slice/SlicedButton.qml index 82ace63..02d3fa0 100644 --- a/slice/SlicedButton.qml +++ b/slice/SlicedButton.qml @@ -3,9 +3,16 @@ import QtQuick 2.7 Item { id: buttonRoot - height: 25 + height: paddingTop * 2 + buttonText.height + + property font font: Qt.font({ + family: config.font, + bold: true, + pointSize: 13, + capitalization: Font.AllUppercase, + smooth: false + }); - property real fontSize: 13 property string text: "" property bool hasLeftSlice: true @@ -221,16 +228,9 @@ Item y: paddingTop color: colors.buttonText - font - { - family: config.font - bold: true - pointSize: fontSize - capitalization: Font.AllUppercase - } + font: buttonRoot.font text: "" - } MouseArea