chaos/VideoPlayer
1
0
Fork 0
Code Activity

[UI] Made UI more scalable.

Browse source
This commit is contained in:
NamedKitten 2018-11-30 16:42:19 +00:00
parent 5a5674b832
commit 79493a1cba
8 changed files with 72 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/qml/ControlsBar.qml
View file

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

9
src/qml/MainMenu.qml
View file

@ -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: {

39
src/qml/NiconicoButtonLayout.qml
View file

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

2
src/qml/UIComponents/TimeLabel.qml
View file

@ -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 {

14
src/qml/UIComponents/VideoProgress.qml
View file

@ -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"

10
src/qml/UIComponents/VolumeSlider.qml
View file

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

15
src/qml/YouTubeButtonLayout.qml
View file

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

21
src/qml/main.qml
View file

@ -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 {
@ -235,6 +238,19 @@ Window {
}
}
Action {
onTriggered: {
appearance.scaleFactor += 0.1
}
shortcut: "Ctrl+Shift+="
}
Action {
onTriggered: {
appearance.scaleFactor -= 0.1
}
shortcut: "Ctrl+Shift+-"
}
MouseArea {
id: mouseAreaPlayer
z: 1000
@ -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