From 79493a1cbaf83088edb4d0af0d82e47f5d687083 Mon Sep 17 00:00:00 2001 From: NamedKitten Date: Fri, 30 Nov 2018 16:42:19 +0000 Subject: [PATCH] [UI] Made UI more scalable. --- src/qml/ControlsBar.qml | 6 ++-- src/qml/MainMenu.qml | 9 ++---- src/qml/NiconicoButtonLayout.qml | 39 ++++++++++++++------------ src/qml/UIComponents/TimeLabel.qml | 2 +- src/qml/UIComponents/VideoProgress.qml | 14 ++++----- src/qml/UIComponents/VolumeSlider.qml | 10 +++---- src/qml/YouTubeButtonLayout.qml | 15 ++++++++++ src/qml/main.qml | 21 ++++++++++++-- 8 files changed, 72 insertions(+), 44 deletions(-) diff --git a/src/qml/ControlsBar.qml b/src/qml/ControlsBar.qml index 0c1558c..723e1e0 100644 --- a/src/qml/ControlsBar.qml +++ b/src/qml/ControlsBar.qml @@ -75,7 +75,7 @@ Item { color: "white" anchors.horizontalCenter: parent.horizontalCenter wrapMode: Text.WrapAtWordBoundaryOrAnywhere - font.pixelSize: Screen.height / 24 + font.pixelSize: mainWindow.virtualHeight / 24 font.family: appearance.fontName horizontalAlignment: Text.AlignHCenter opacity: 1 @@ -112,13 +112,13 @@ Item { Item { id: controlsBar - height: controlsBar.visible ? Screen.height / 24 : 0 + height: controlsBar.visible ? mainWindow.virtualHeight / 24 : 0 anchors.right: parent.right anchors.rightMargin: parent.width / 128 anchors.left: parent.left anchors.leftMargin: parent.width / 128 anchors.bottom: parent.bottom - anchors.bottomMargin: 2 + anchors.bottomMargin: 0 visible: controlsOverlay.controlsShowing VideoProgress { id: progressBar diff --git a/src/qml/MainMenu.qml b/src/qml/MainMenu.qml index 66a6fad..f1fb8d7 100644 --- a/src/qml/MainMenu.qml +++ b/src/qml/MainMenu.qml @@ -11,7 +11,7 @@ import "codes.js" as LanguageCodes MenuBar { id: menuBar //width: parent.width - height: Screen.height / 32 + height: mainWindow.virtualHeight / 32 function anythingOpen() { for (var i = 0, len = menuBar.count; i < len; i++) { if (menuBar.menuAt(i).opened) { @@ -145,7 +145,7 @@ MenuBar { id: menuBarItemText text: menuBarItem.text font.family: appearance.fontName - font.pixelSize: 14 + font.pixelSize: menuBar.height / 2 font.bold: menuBarItem.highlighted opacity: 1 color: menuBarItem.highlighted ? "#5a50da" : "white" @@ -496,11 +496,6 @@ MenuBar { playlistDialog.open() } } - } - CustomMenu { - id: aboutMenuBarItem - title: translate.getTranslation("ABOUT", i18n.language) - Action { text: translate.getTranslation("ABOUT_QT", i18n.language) onTriggered: { diff --git a/src/qml/NiconicoButtonLayout.qml b/src/qml/NiconicoButtonLayout.qml index 8973f76..de5bca3 100644 --- a/src/qml/NiconicoButtonLayout.qml +++ b/src/qml/NiconicoButtonLayout.qml @@ -16,18 +16,16 @@ Item { id: playPauseButton anchors.top: parent.top anchors.bottom: parent.bottom - height: 16 - width: 26 - icon.height: 16 - icon.width: 26 + icon.height: parent.height / 2 + icon.width: parent.height / 2 } VolumeButton { id: volumeButton anchors.left: playPauseButton.right anchors.top: parent.top anchors.bottom: parent.bottom - icon.height: 16 - icon.width: 16 + icon.height: parent.height / 2 + icon.width: parent.height / 2 } VolumeSlider { anchors.left: volumeButton.right @@ -40,16 +38,17 @@ Item { anchors.right: backwardButton.left anchors.top: parent.top anchors.bottom: parent.bottom - icon.height: 16 - icon.width: 16 + icon.height: parent.height / 2 + icon.width: parent.height / 2 + } BackwardButton { id: backwardButton anchors.right: timeLabel.left anchors.top: parent.top anchors.bottom: parent.bottom - icon.height: 32 - icon.width: 32 + icon.height: parent.height / 2 + icon.width: parent.height / 2 } TimeLabel { id: timeLabel @@ -62,16 +61,18 @@ Item { anchors.left: timeLabel.right anchors.top: parent.top anchors.bottom: parent.bottom - icon.height: 32 - icon.width: 32 + icon.height: parent.height / 2 + icon.width: parent.height / 2 + } PlaylistNextButton { id: playlistNextButton anchors.left: forwardButton.right anchors.top: parent.top anchors.bottom: parent.bottom - icon.height: 16 - icon.width: 16 + icon.height: parent.height / 2 + icon.width: parent.height / 2 + } FullscreenButton { @@ -79,15 +80,17 @@ Item { anchors.right: settingsButton.left anchors.top: parent.top anchors.bottom: parent.bottom - icon.height: 16 - icon.width: 16 + icon.height: parent.height / 2 + icon.width: parent.height / 2 + } SettingsButton { id: settingsButton anchors.right: parent.right anchors.top: parent.top anchors.bottom: parent.bottom - icon.height: 16 - icon.width: 16 + icon.height: parent.height / 2 + icon.width: parent.height / 2 + } } diff --git a/src/qml/UIComponents/TimeLabel.qml b/src/qml/UIComponents/TimeLabel.qml index 76eed2a..4aad007 100644 --- a/src/qml/UIComponents/TimeLabel.qml +++ b/src/qml/UIComponents/TimeLabel.qml @@ -14,7 +14,7 @@ Text { color: "white" padding: 2 font.family: appearance.fontName - font.pixelSize: 14 + font.pixelSize: layout.height / 2.5 verticalAlignment: Text.AlignVCenter renderType: Text.NativeRendering Connections { diff --git a/src/qml/UIComponents/VideoProgress.qml b/src/qml/UIComponents/VideoProgress.qml index 39a9af9..cec364c 100644 --- a/src/qml/UIComponents/VideoProgress.qml +++ b/src/qml/UIComponents/VideoProgress.qml @@ -32,7 +32,7 @@ Slider { } function getProgressBarHeight(nyan, isMouse) { - var x = Math.max(Screen.height / 256, fun.nyanCat ? 12 : 2) + var x = fun.nyanCat ? mainWindow.virtualHeight / 64 : Screen.height / 380 if (appearance.themeName == "Niconico" && !fun.nyanCat) { return x * 2 } else if (isMouse & !fun.nyanCat) { @@ -78,12 +78,12 @@ Slider { color: appearance.progressBackgroundColor Rectangle { - x: (mouseAreaProgressBar.mouseX - width / 2) + progressBar.leftPadding - y: progressBackground.y - 20 - height + x: (mouseAreaProgressBar.mouseX - hoverProgressLabel.width / 2) + y: progressBackground.y - 20 - hoverProgressLabel.height visible: mouseAreaProgressBar.containsMouse color: appearance.mainBackground - height: 20 - width: 50 + height: hoverProgressLabel.height + width: hoverProgressLabel.width z: 80 Text { id: hoverProgressLabel @@ -91,7 +91,7 @@ Slider { color: "white" padding: 2 font.family: appearance.fontName - font.pixelSize: 14 + font.pixelSize: mainWindow.virtualHeight / 50 verticalAlignment: Text.AlignVCenter renderType: Text.NativeRendering } @@ -168,7 +168,7 @@ Slider { z: 80 visible: fun.nyanCat paused: progressBar.pressed - height: 30 + height: mainWindow.virtualHeight / 28 id: nyanimation anchors.centerIn: parent source: "qrc:/icons/nyancat.gif" diff --git a/src/qml/UIComponents/VolumeSlider.qml b/src/qml/UIComponents/VolumeSlider.qml index 495a059..41eee3a 100644 --- a/src/qml/UIComponents/VolumeSlider.qml +++ b/src/qml/UIComponents/VolumeSlider.qml @@ -33,9 +33,9 @@ Slider { handle: Rectangle { x: volumeBar.leftPadding + volumeBar.visualPosition * (volumeBar.availableWidth - width) y: volumeBar.topPadding + volumeBar.availableHeight / 2 - height / 2 - implicitWidth: 12 - implicitHeight: 12 - radius: 12 + implicitWidth: height + implicitHeight: layout.height / 2.6 + radius: height visible: appearance.themeName == "Niconico" ? false : true color: "#f6f6f6" border.color: "#f6f6f6" @@ -44,8 +44,8 @@ Slider { background: Rectangle { x: volumeBar.leftPadding y: volumeBar.topPadding + volumeBar.availableHeight / 2 - height / 2 - implicitWidth: appearance.themeName == "Niconico" ? 80 : 60 - implicitHeight: appearance.themeName == "Niconico" ? 4 : 3 + implicitWidth: layout.width / 11 + implicitHeight: appearance.themeName == "Niconico" ? layout.height / 8 : layout.height / 10 width: volumeBar.availableWidth height: implicitHeight color: appearance.progressBackgroundColor diff --git a/src/qml/YouTubeButtonLayout.qml b/src/qml/YouTubeButtonLayout.qml index 87be0c6..06e1bc7 100644 --- a/src/qml/YouTubeButtonLayout.qml +++ b/src/qml/YouTubeButtonLayout.qml @@ -11,6 +11,7 @@ Item { objectName: "buttonLayout" id: layout anchors.fill: controlsBar + height: parent.height PlaylistPrevButton { id: playlistPrevButton @@ -18,18 +19,25 @@ Item { anchors.top: parent.top anchors.bottom: parent.bottom width: visible ? playlistNextButton.width : 0 + icon.height: parent.height / 2 + icon.width: parent.height / 2 } PlayPauseButton { id: playPauseButton anchors.left: playlistPrevButton.right anchors.top: parent.top anchors.bottom: parent.bottom + icon.height: parent.height / 2 + icon.width: parent.height / 2 + } PlaylistNextButton { id: playlistNextButton anchors.left: playPauseButton.right anchors.top: parent.top anchors.bottom: parent.bottom + icon.height: parent.height / 2 + icon.width: parent.height / 2 } VolumeButton { @@ -37,12 +45,15 @@ Item { anchors.left: playlistNextButton.right anchors.top: parent.top anchors.bottom: parent.bottom + icon.height: parent.height / 2 + icon.width: parent.height / 2 } VolumeSlider { id: volumeSlider anchors.left: volumeButton.right anchors.top: parent.top anchors.bottom: parent.bottom + height: parent.height } TimeLabel { anchors.left: volumeSlider.right @@ -55,11 +66,15 @@ Item { anchors.right: fullscreenButton.left anchors.top: parent.top anchors.bottom: parent.bottom + icon.height: parent.height / 2 + icon.width: parent.height / 2 } FullscreenButton { id: fullscreenButton anchors.right: parent.right anchors.top: parent.top anchors.bottom: parent.bottom + icon.height: parent.height / 2 + icon.width: parent.height / 2 } } diff --git a/src/qml/main.qml b/src/qml/main.qml index 2ee4460..7605bb7 100644 --- a/src/qml/main.qml +++ b/src/qml/main.qml @@ -15,6 +15,8 @@ Window { visible: true width: 720 height: 480 + property int virtualHeight: Screen.height * appearance.scaleFactor + property int virtualWidth: Screen.width * appearance.scaleFactor property bool onTop: false @@ -43,6 +45,7 @@ Window { property string progressSliderColor: "red" property string chapterMarkerColor: "#fc0" property string volumeSliderBackground: "white" + property double scaleFactor: 1.0 } Settings { @@ -234,6 +237,19 @@ Window { mouseAreaPlayerTimer.stop() } } + + Action { + onTriggered: { + appearance.scaleFactor += 0.1 + } + shortcut: "Ctrl+Shift+=" + } + Action { + onTriggered: { + appearance.scaleFactor -= 0.1 + } + shortcut: "Ctrl+Shift+-" + } MouseArea { id: mouseAreaPlayer @@ -315,11 +331,10 @@ Window { anchors.left: parent.left anchors.leftMargin: 10 anchors.bottom: parent.bottom - topPadding: 4 - bottomPadding: 4 + anchors.bottomMargin: 8 anchors.top: parent.top font.family: appearance.fontName - font.pixelSize: 14 + font.pixelSize: menuBar.height - (anchors.bottomMargin + anchors.topMargin) font.bold: true opacity: 1 visible: controlsOverlay.controlsShowing