1
0
Fork 0

Make buttons look better, improve misc QML.

This commit is contained in:
namedkitten 2020-04-22 12:53:42 +01:00
parent 84a84fd57d
commit 7e04c5c05e
22 changed files with 148 additions and 113 deletions

View file

@ -1,3 +0,0 @@
{
"editor.fontFamily": "monospace"
}

View file

@ -1,5 +1,5 @@
SOURCE_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null && pwd )"
pushd $SOURCE_DIR
qmlfmt -w src/qml/*.qml src/qml/*/*.qml
clang-format -style mozilla -i src/* src/Backends/*/*
popd
find . -name "*.qml" -exec qmlfmt -w {} \;
find . -name "*.cpp" -o -name "*.hpp" -o -name "*.c" -o -name "*.h" -exec clang-format90 -style mozilla -i {} \;
popdi i

1
spdlog Submodule

@ -0,0 +1 @@
Subproject commit 2b326e90b82f74492229b8d2b27d66d088386e74

View file

@ -1,7 +1,7 @@
#ifndef BackendInterface_H
#define BackendInterface_H
#include <QObject>
#include "enums.hpp"
#include <QObject>
class BackendInterface
{
public:

View file

@ -1,11 +1,11 @@
#ifndef LOGGER_HPP
#define LOGGER_HPP
#include <iosfwd> // IWYU pragma: keep
#include <memory> // IWYU pragma: keep
#include <spdlog/spdlog.h> // IWYU pragma: keep
#include <spdlog/sinks/basic_file_sink.h> // IWYU pragma: keep
#include <spdlog/sinks/daily_file_sink.h> // IWYU pragma: keep
#include <iosfwd> // IWYU pragma: keep
#include <memory> // IWYU pragma: keep
#include <spdlog/sinks/basic_file_sink.h> // IWYU pragma: keep
#include <spdlog/sinks/daily_file_sink.h> // IWYU pragma: keep
#include <spdlog/sinks/stdout_color_sinks.h> // IWYU pragma: keep
#include <spdlog/spdlog.h> // IWYU pragma: keep
std::shared_ptr<spdlog::logger>
initLogger(std::string name);

View file

@ -17,16 +17,16 @@ Item {
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 2
icon.width: parent.height / 2
iconHeight: parent.height / 2
iconWidth: parent.height / 2
}
VolumeButton {
id: volumeButton
anchors.left: playPauseButton.right
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 2
icon.width: parent.height / 2
iconHeight: parent.height / 2
iconWidth: parent.height / 2
}
VolumeSlider {
anchors.left: volumeButton.right
@ -39,16 +39,16 @@ Item {
anchors.right: backwardButton.left
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 2
icon.width: parent.height / 2
iconHeight: parent.height / 2
iconWidth: parent.height / 2
}
BackwardButton {
id: backwardButton
anchors.right: timeLabel.left
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 2
icon.width: parent.height / 2
iconHeight: parent.height / 2
iconWidth: parent.height / 2
}
TimeLabel {
id: timeLabel
@ -61,16 +61,16 @@ Item {
anchors.left: timeLabel.right
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 2
icon.width: parent.height / 2
iconHeight: parent.height / 2
iconWidth: parent.height / 2
}
PlaylistNextButton {
id: playlistNextButton
anchors.left: forwardButton.right
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 2
icon.width: parent.height / 2
iconHeight: parent.height / 2
iconWidth: parent.height / 2
}
FullscreenButton {
@ -78,15 +78,15 @@ Item {
anchors.right: settingsButton.left
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 2
icon.width: parent.height / 2
iconHeight: parent.height / 2
iconWidth: parent.height / 2
}
SettingsButton {
id: settingsButton
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 2
icon.width: parent.height / 2
iconHeight: parent.height / 2
iconWidth: parent.height / 2
}
}

View file

@ -16,22 +16,20 @@ Item {
id: playPauseButton
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 1.25
icon.width: parent.height / 1.25
iconHeight: parent.height / 1.25
iconWidth: parent.height / 1.25
}
MouseArea {
id: mouseAreaVolumeArea
anchors.bottom: volumeButton.bottom
anchors.left: volumeSliderArea.left
anchors.right: volumeSliderArea.right
anchors.top: volumeSliderArea.top
height: layout.height + volumeButton.height
+ (volumeSliderArea.visible ? volumeSliderArea.height : 0)
anchors.bottom: volumeButton.bottom
anchors.left: volumeButton.left
height: parent.height + (volumeSliderArea.visible ? volumeSliderArea.height : 0)
hoverEnabled: true
z: 500
propagateComposedEvents: true
acceptedButtons: Qt.NoButton
onEntered: {
mouseAreaPlayerTimer.stop()
}
@ -46,9 +44,10 @@ Item {
anchors.left: playPauseButton.right
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 1.25
icon.width: parent.height / 1.25
icon.color: hovered
iconHeight: parent.height / 1.25
iconWidth: parent.height / 1.25
hoverEnabled: true
iconColor: hovered
|| mouseAreaVolumeArea.containsMouse ? getAppearanceValueForTheme(
appearance.themeName,
"buttonHoverColor") : getAppearanceValueForTheme(
@ -95,15 +94,15 @@ Item {
anchors.right: settingsButton.left
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 1.25
icon.width: parent.height / 1.25
iconHeight: parent.height / 1.25
iconWidth: parent.height / 1.25
}
SettingsButton {
id: settingsButton
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 1.25
icon.width: parent.height / 1.25
iconHeight: parent.height / 1.25
iconWidth: parent.height / 1.25
}
}

View file

@ -7,19 +7,16 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Button {
SmoothButton {
id: backwardButton
icon.source: "icons/" + appearance.themeName + "/backward.svg"
iconSource: "icons/" + appearance.themeName + "/backward.svg"
hoverEnabled: true
icon.color: hovered ? getAppearanceValueForTheme(
iconColor: hovered ? getAppearanceValueForTheme(
appearance.themeName,
"buttonHoverColor") : getAppearanceValueForTheme(
appearance.themeName, "buttonColor")
display: AbstractButton.IconOnly
onClicked: {
player.playerCommand(Enums.Commands.Seek, "-10")
}
background: Item {
}
}

View file

@ -0,0 +1,21 @@
import QtQuick 2.0
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
Image {
id: root
smooth: true
property alias color: colorOverlay.color
property int size: 24
fillMode: Image.PreserveAspectFit
sourceSize.width: size
sourceSize.height: size
ColorOverlay {
id: colorOverlay
anchors.fill: root
source: root
color: "#000000"
}
}

View file

@ -7,18 +7,15 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Button {
SmoothButton {
id: forwardButton
icon.source: "icons/" + appearance.themeName + "/forward.svg"
iconSource: "icons/" + appearance.themeName + "/forward.svg"
hoverEnabled: true
icon.color: hovered ? getAppearanceValueForTheme(
iconColor: hovered ? getAppearanceValueForTheme(
appearance.themeName,
"buttonHoverColor") : getAppearanceValueForTheme(
appearance.themeName, "buttonColor")
display: AbstractButton.IconOnly
onClicked: {
player.playerCommand(Enums.Commands.Seek, "10")
}
background: Item {
}
}

View file

@ -7,21 +7,17 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Button {
SmoothButton {
id: fullscreenButton
icon.source: "icons/" + appearance.themeName + "/fullscreen.svg"
iconSource: "icons/" + appearance.themeName + "/fullscreen.svg"
hoverEnabled: true
icon.color: hovered ? getAppearanceValueForTheme(
iconColor: hovered ? getAppearanceValueForTheme(
appearance.themeName,
"buttonHoverColor") : getAppearanceValueForTheme(
appearance.themeName, "buttonColor")
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
display: AbstractButton.IconOnly
onClicked: {
toggleFullscreen()
}
background: Item {
}
}

View file

@ -7,27 +7,24 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Button {
SmoothButton {
id: playPauseButton
icon.source: "icons/" + appearance.themeName + "/pause.svg"
iconSource: "icons/" + appearance.themeName + "/pause.svg"
hoverEnabled: true
icon.color: hovered ? getAppearanceValueForTheme(
iconColor: hovered ? getAppearanceValueForTheme(
appearance.themeName,
"buttonHoverColor") : getAppearanceValueForTheme(
appearance.themeName, "buttonColor")
display: AbstractButton.IconOnly
onClicked: {
player.playerCommand(Enums.Commands.TogglePlayPause)
}
background: Item {
}
Connections {
target: player
onPlayStatusChanged: function (status) {
if (status == Enums.PlayStatus.Playing) {
icon.source = "qrc:/icons/" + appearance.themeName + "/pause.svg"
iconSource = "qrc:/icons/" + appearance.themeName + "/pause.svg"
} else if (status == Enums.PlayStatus.Paused) {
icon.source = "qrc:/icons/" + appearance.themeName + "/play.svg"
iconSource = "qrc:/icons/" + appearance.themeName + "/play.svg"
}
}
}

View file

@ -7,19 +7,16 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Button {
SmoothButton {
id: playlistNextButton
//icon.name: "next"
icon.source: "icons/" + appearance.themeName + "/next.svg"
iconSource: "icons/" + appearance.themeName + "/next.svg"
hoverEnabled: true
icon.color: hovered ? getAppearanceValueForTheme(
iconColor: hovered ? getAppearanceValueForTheme(
appearance.themeName,
"buttonHoverColor") : getAppearanceValueForTheme(
appearance.themeName, "buttonColor")
display: AbstractButton.IconOnly
onClicked: {
player.playerCommand(Enums.Commands.NextPlaylistItem)
}
background: Item {
}
}

View file

@ -7,22 +7,19 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Button {
SmoothButton {
id: playlistPrevButton
objectName: "playlistPrevButton"
icon.source: "icons/" + appearance.themeName + "/prev.svg"
iconSource: "icons/" + appearance.themeName + "/prev.svg"
hoverEnabled: true
icon.color: hovered ? getAppearanceValueForTheme(
iconColor: hovered ? getAppearanceValueForTheme(
appearance.themeName,
"buttonHoverColor") : getAppearanceValueForTheme(
appearance.themeName, "buttonColor")
display: AbstractButton.IconOnly
visible: appearance.themeName == "Youtube" ? false : true
onClicked: {
player.playerCommand(Enums.Commands.PreviousPlaylistItem)
}
background: Item {
}
Connections {
target: player
onPlaylistPositionChanged: function (position) {

View file

@ -7,23 +7,18 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Button {
SmoothButton {
id: settingsButton
//icon.name: "settings"
icon.source: "icons/" + appearance.themeName + "/settings.svg"
iconSource: "icons/" + appearance.themeName + "/settings.svg"
hoverEnabled: true
icon.color: hovered ? getAppearanceValueForTheme(
iconColor: hovered ? getAppearanceValueForTheme(
appearance.themeName,
"buttonHoverColor") : getAppearanceValueForTheme(
appearance.themeName, "buttonColor")
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
display: AbstractButton.IconOnly
onClicked: {
var aptn = appearance.themeName
appearance.themeName = aptn == "YouTube" ? "RoosterTeeth" : aptn
== "RoosterTeeth" ? "Niconico" : "YouTube"
}
background: Item {
}
}

View file

@ -0,0 +1,39 @@
import QtQuick 2.0
import QtQuick.Controls 2.3
import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.2
import QtQuick.Window 2.2
import Qt.labs.settings 1.0
import QtQuick 2.0
Control {
id: root
property alias iconSource: icon.source
property alias iconColor: icon.color
property alias iconHeight: icon.size
property alias iconWidth: icon.size
background: Item {}
property bool iconRight: false
focusPolicy: Qt.NoFocus
signal clicked();
//onClicked: print('buttonClick')
leftPadding: appearance.themeName == "YouTube" ? iconWidth / 12 : appearance.themeName == "RoosterTeeth" ? iconWidth / 12 : iconWidth / 2.5
rightPadding: root.leftPadding
contentItem: ButtonImage {
id: icon
source: "cup.svg"
}
MouseArea {
id: mouseArea
anchors.fill: parent
propagateComposedEvents: true
onClicked: root.clicked()
}
}

View file

@ -7,29 +7,25 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Button {
SmoothButton {
id: volumeButton
objectName: "volumeButton"
icon.source: "icons/" + appearance.themeName + "/volume-up.svg"
iconSource: "icons/" + appearance.themeName + "/volume-up.svg"
hoverEnabled: true
icon.color: hovered ? getAppearanceValueForTheme(
iconColor: hovered ? getAppearanceValueForTheme(
appearance.themeName,
"buttonHoverColor") : getAppearanceValueForTheme(
appearance.themeName, "buttonColor")
display: AbstractButton.IconOnly
onClicked: {
player.playerCommand(Enums.Commands.ToggleMute)
}
background: Item {
}
function updateStatus(status) {
if (status == Enums.VolumeStatus.Muted) {
volumeButton.icon.source = "qrc:/icons/" + appearance.themeName + "/volume-mute.svg"
volumeButton.iconSource = "qrc:/icons/" + appearance.themeName + "/volume-mute.svg"
} else if (status == Enums.VolumeStatus.Low) {
volumeButton.icon.source = "qrc:/icons/" + appearance.themeName + "/volume-down.svg"
volumeButton.iconSource = "qrc:/icons/" + appearance.themeName + "/volume-down.svg"
} else if (status == Enums.VolumeStatus.Normal) {
volumeButton.icon.source = "qrc:/icons/" + appearance.themeName + "/volume-up.svg"
volumeButton.iconSource = "qrc:/icons/" + appearance.themeName + "/volume-up.svg"
}
}

View file

@ -12,6 +12,7 @@ Slider {
to: 100
value: 100
palette.dark: "#f00"
hoverEnabled: true
implicitWidth: Math.max(background ? background.implicitWidth : 0,
(handle ? handle.implicitWidth : 0)

View file

@ -19,24 +19,24 @@ Item {
anchors.top: parent.top
anchors.bottom: parent.bottom
width: visible ? playlistNextButton.width : 0
icon.height: parent.height / 1.25
icon.width: parent.height / 1.25
iconHeight: parent.height / 1.25
iconWidth: parent.height / 1.25
}
PlayPauseButton {
id: playPauseButton
anchors.left: playlistPrevButton.right
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 1.25
icon.width: parent.height / 1.25
iconHeight: parent.height / 1.25
iconWidth: parent.height / 1.25
}
PlaylistNextButton {
id: playlistNextButton
anchors.left: playPauseButton.right
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 1.25
icon.width: parent.height / 1.25
iconHeight: parent.height / 1.25
iconWidth: parent.height / 1.25
}
MouseArea {
@ -49,6 +49,7 @@ Item {
hoverEnabled: true
propagateComposedEvents: true
acceptedButtons: Qt.NoButton
z: 500
}
VolumeButton {
@ -56,8 +57,8 @@ Item {
anchors.left: playlistNextButton.right
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 1.25
icon.width: parent.height / 1.25
iconHeight: parent.height / 1.25
iconWidth: parent.height / 1.25
}
VolumeSlider {
id: volumeSlider
@ -79,15 +80,15 @@ Item {
anchors.right: fullscreenButton.left
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 1.25
icon.width: parent.height / 1.25
iconHeight: parent.height / 1.25
iconWidth: parent.height / 1.25
}
FullscreenButton {
id: fullscreenButton
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: parent.height / 1.25
icon.width: parent.height / 1.25
iconHeight: parent.height / 1.25
iconWidth: parent.height / 1.25
}
}

View file

@ -226,7 +226,7 @@ Window {
}
function startPlayer() {
console.info(qmlDebugger.properties(player))
//console.info(qmlDebugger.properties(player))
console.info("OwO!")
var args = Qt.application.arguments

View file

@ -8,6 +8,8 @@
<file>YouTubeButtonLayout.qml</file>
<file>NiconicoButtonLayout.qml</file>
<file>RoosterTeethButtonLayout.qml</file>
<file alias="SmoothButton.qml">UIComponents/SmoothButton.qml</file>
<file alias="ButtonImage.qml">UIComponents/ButtonImage.qml</file>
<file alias="VerticalVolume.qml">UIComponents/VerticalVolume.qml</file>
<file alias="SpeedText.qml">UIComponents/SpeedText.qml</file>
<file alias="ForwardButton.qml">UIComponents/ForwardButton.qml</file>

View file

@ -8,6 +8,8 @@
<file>YouTubeButtonLayout.qml</file>
<file>NiconicoButtonLayout.qml</file>
<file>RoosterTeethButtonLayout.qml</file>
<file alias="SmoothButton.qml">UIComponents/SmoothButton.qml</file>
<file alias="ButtonImage.qml">UIComponents/ButtonImage.qml</file>
<file alias="VerticalVolume.qml">UIComponents/VerticalVolume.qml</file>
<file alias="SpeedText.qml">UIComponents/SpeedText.qml</file>
<file alias="ForwardButton.qml">UIComponents/ForwardButton.qml</file>