Commit c567df17 authored by Camilo Higuita's avatar Camilo Higuita

more work towards ui scaling on plasma mobile

parent fcd971f9
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
#include "services/local/linking.h" #include "services/local/linking.h"
#ifdef Q_OS_ANDROID #ifdef Q_OS_ANDROID
#include "./3rdparty/kirigami/src/kirigamiplugin.h"
#include <QtWebView/QtWebView> #include <QtWebView/QtWebView>
#else #else
#include <QtWebEngine> #include <QtWebEngine>
...@@ -84,6 +85,7 @@ int main(int argc, char *argv[]) ...@@ -84,6 +85,7 @@ int main(int argc, char *argv[])
); );
#ifdef Q_OS_ANDROID #ifdef Q_OS_ANDROID
KirigamiPlugin::getInstance().registerTypes();
QtWebView::initialize(); QtWebView::initialize();
#else #else
// if(QQuickStyle::availableStyles().contains("nomad")) // if(QQuickStyle::availableStyles().contains("nomad"))
......
...@@ -92,8 +92,8 @@ Kirigami.ApplicationWindow { ...@@ -92,8 +92,8 @@ Kirigami.ApplicationWindow {
property int miniArtSize: iconSizes.large property int miniArtSize: iconSizes.large
property int columnWidth: Kirigami.Units.gridUnit * 17 property int columnWidth: Kirigami.Units.gridUnit * 17
property int coverSize: isMobile ? Math.sqrt( property int coverSize: isAndroid ? Math.sqrt(root.width * root.height) * 0.4 :
root.width * root.height) * 0.4 : columnWidth * 0.6 columnWidth * (isMobile ? 0.5 : 0.6)
/***************************************************/ /***************************************************/
...@@ -146,11 +146,21 @@ Kirigami.ApplicationWindow { ...@@ -146,11 +146,21 @@ Kirigami.ApplicationWindow {
readonly property int defaultFontSize: Kirigami.Theme.defaultFont.pointSize readonly property int defaultFontSize: Kirigami.Theme.defaultFont.pointSize
readonly property var fontSizes: ({ readonly property var fontSizes: ({
tiny: defaultFontSize * 0.4, tiny: defaultFontSize * 0.4,
small: defaultFontSize * 0.6,
medium: defaultFontSize * 0.8, small: (isMobile ? defaultFontSize * 0.4 :
default: defaultFontSize, defaultFontSize * 0.6),
big: defaultFontSize * 1.2,
large: defaultFontSize * 1.4 medium: (isMobile ? defaultFontSize * 0.6 :
defaultFontSize * 0.8),
default: (isMobile ? defaultFontSize * 0.8 :
defaultFontSize),
big: (isMobile ? defaultFontSize :
defaultFontSize * 1.2),
large: (isMobile ? defaultFontSize * 1.2 :
defaultFontSize * 1.4)
}) })
readonly property var space : ({ readonly property var space : ({
...@@ -232,7 +242,7 @@ Kirigami.ApplicationWindow { ...@@ -232,7 +242,7 @@ Kirigami.ApplicationWindow {
pageStack.separatorVisible: pageStack.wideMode pageStack.separatorVisible: pageStack.wideMode
overlay.modal: Rectangle { overlay.modal: Rectangle {
color: isMobile ? darkColor : "transparent" color: isAndroid ? darkColor : "transparent"
opacity: 0.5 opacity: 0.5
height: root.height - playbackControls.height - toolbar.height height: root.height - playbackControls.height - toolbar.height
y: toolbar.height y: toolbar.height
...@@ -374,7 +384,7 @@ Kirigami.ApplicationWindow { ...@@ -374,7 +384,7 @@ Kirigami.ApplicationWindow {
Slider { Slider {
id: progressBar id: progressBar
height: 10 height: iconSizes.small
width: parent.width width: parent.width
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
...@@ -392,14 +402,14 @@ Kirigami.ApplicationWindow { ...@@ -392,14 +402,14 @@ Kirigami.ApplicationWindow {
x: progressBar.leftPadding x: progressBar.leftPadding
y: progressBar.y y: progressBar.y
implicitWidth: 200 implicitWidth: 200
implicitHeight: 10 implicitHeight: iconSizes.tiny*0.1
width: progressBar.availableWidth width: progressBar.availableWidth
height: implicitHeight height: implicitHeight
color: "transparent" color: "transparent"
Rectangle { Rectangle {
width: progressBar.visualPosition * parent.width width: progressBar.visualPosition * parent.width
height: 4 height: iconSizes.tiny*0.1
color: babeColor color: babeColor
} }
} }
...@@ -408,9 +418,9 @@ Kirigami.ApplicationWindow { ...@@ -408,9 +418,9 @@ Kirigami.ApplicationWindow {
x: progressBar.leftPadding + progressBar.visualPosition x: progressBar.leftPadding + progressBar.visualPosition
* (progressBar.availableWidth - width) * (progressBar.availableWidth - width)
y: progressBar.y - (height / 2) y: progressBar.y - (height / 2)
implicitWidth: progressBar.pressed ? 16 : 0 implicitWidth: progressBar.pressed ? iconSizes.medium : 0
implicitHeight: progressBar.pressed ? 16 : 0 implicitHeight: progressBar.pressed ? iconSizes.medium : 0
radius: progressBar.pressed ? 16 : 0 radius: progressBar.pressed ? iconSizes.medium : 0
color: babeColor color: babeColor
} }
} }
...@@ -441,8 +451,8 @@ Kirigami.ApplicationWindow { ...@@ -441,8 +451,8 @@ Kirigami.ApplicationWindow {
Rectangle { Rectangle {
visible: miniArtwork.visible visible: miniArtwork.visible
anchors.centerIn: parent anchors.centerIn: parent
height: miniArtSize + 4 height: miniArtSize + miniArtSize*0.05
width: miniArtSize + 4 width: miniArtSize + miniArtSize*0.05
color: darktextColor color: darktextColor
opacity: opacityLevel opacity: opacityLevel
......
...@@ -52,7 +52,7 @@ BabeDialog ...@@ -52,7 +52,7 @@ BabeDialog
text:qsTr("Linking allows to connect two devices on the same network. Just provide the device IP address to which you want to connect") text:qsTr("Linking allows to connect two devices on the same network. Just provide the device IP address to which you want to connect")
verticalAlignment: Qt.AlignVCenter verticalAlignment: Qt.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
font.pointSize: fontSizes.medium font.pointSize: fontSizes.default
wrapMode: Text.Wrap wrapMode: Text.Wrap
Layout.fillWidth: true Layout.fillWidth: true
} }
...@@ -69,7 +69,7 @@ BabeDialog ...@@ -69,7 +69,7 @@ BabeDialog
text: qsTr("IP Address") text: qsTr("IP Address")
verticalAlignment: Qt.AlignVCenter verticalAlignment: Qt.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
font.pointSize: fontSizes.medium font.pointSize: fontSizes.default
Layout.fillWidth: true Layout.fillWidth: true
} }
......
...@@ -63,7 +63,7 @@ ColumnLayout ...@@ -63,7 +63,7 @@ ColumnLayout
{ {
id: linkingFilter id: linkingFilter
headerBarExitIcon: "arrow-left" headerBarExitIcon: "go-previous"
model : ListModel {} model : ListModel {}
delegate: BabeDelegate delegate: BabeDelegate
...@@ -99,7 +99,7 @@ ColumnLayout ...@@ -99,7 +99,7 @@ ColumnLayout
trackDuration: false trackDuration: false
allowMenu: false allowMenu: false
headerBarVisible: true headerBarVisible: true
headerBarExitIcon: "arrow-left" headerBarExitIcon: "go-previous"
headerBarExit: !linkingPage.wideMode headerBarExit: !linkingPage.wideMode
headerBarTitle: linkingPage.wideMode ? "" : linkingModel.model.get(linkingModel.currentIndex).playlist headerBarTitle: linkingPage.wideMode ? "" : linkingModel.model.get(linkingModel.currentIndex).playlist
onExit: if(!linkingPage.wideMode) onExit: if(!linkingPage.wideMode)
......
...@@ -5,44 +5,49 @@ ...@@ -5,44 +5,49 @@
#include <QByteArray> #include <QByteArray>
#include <QObject> #include <QObject>
#if defined(Q_OS_ANDROID)
#include <./3rdparty/taglib/tag.h>
#include <./3rdparty/taglib/fileref.h>
#else
#include <taglib/tag.h> #include <taglib/tag.h>
#include <taglib/fileref.h> #include <taglib/fileref.h>
#endif
namespace TagLib namespace TagLib
{ {
class FileRef; class FileRef;
} }
class TagInfo : public QObject class TagInfo : public QObject
{ {
Q_OBJECT Q_OBJECT
public: public:
TagInfo(QObject *parent = nullptr); TagInfo(QObject *parent = nullptr);
~TagInfo(); ~TagInfo();
bool feed(const QString &url); bool feed(const QString &url);
QString getAlbum() const; QString getAlbum() const;
QString getTitle() const; QString getTitle() const;
QString getArtist() const; QString getArtist() const;
int getTrack() const; int getTrack() const;
QString getGenre() const; QString getGenre() const;
QString fileName() const; QString fileName() const;
QString getComment() const; QString getComment() const;
QByteArray getCover() const; QByteArray getCover() const;
int getDuration() const; int getDuration() const;
uint getYear() const; uint getYear() const;
void setAlbum(const QString &album) ; void setAlbum(const QString &album) ;
void setTitle(const QString &title); void setTitle(const QString &title);
void setTrack(const int &track); void setTrack(const int &track);
void setArtist(const QString &artist); void setArtist(const QString &artist);
void setGenre(const QString &genre); void setGenre(const QString &genre);
void setComment(const QString &comment); void setComment(const QString &comment);
void setCover(const QByteArray &array); void setCover(const QByteArray &array);
private: private:
TagLib::FileRef file; TagLib::FileRef file;
QString path; QString path;
}; };
#endif // TAGINFO_H #endif // TAGINFO_H
...@@ -87,7 +87,7 @@ Page ...@@ -87,7 +87,7 @@ Page
Loader Loader
{ {
id: youtubePlayer id: youtubePlayer
source: isMobile ? "qrc:/services/web/YoutubePlayer_A.qml" : "qrc:/services/web/YoutubePlayer.qml" source: isAndroid ? "qrc:/services/web/YoutubePlayer_A.qml" : "qrc:/services/web/YoutubePlayer.qml"
} }
BabePopup BabePopup
...@@ -117,7 +117,7 @@ Page ...@@ -117,7 +117,7 @@ Page
text: qsTr("Custom API Key") text: qsTr("Custom API Key")
verticalAlignment: Qt.AlignVCenter verticalAlignment: Qt.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
font.pointSize: fontSizes.medium font.pointSize: fontSizes.default
Layout.column: 1 Layout.column: 1
Layout.row: 2 Layout.row: 2
Layout.fillWidth: true Layout.fillWidth: true
...@@ -136,7 +136,7 @@ Page ...@@ -136,7 +136,7 @@ Page
text: qsTr("Search results") text: qsTr("Search results")
verticalAlignment: Qt.AlignVCenter verticalAlignment: Qt.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
font.pointSize: fontSizes.medium font.pointSize: fontSizes.default
Layout.column: 1 Layout.column: 1
Layout.row: 4 Layout.row: 4
Layout.fillWidth: true Layout.fillWidth: true
...@@ -283,23 +283,12 @@ Page ...@@ -283,23 +283,12 @@ Page
{ {
id: searchBox id: searchBox
Layout.fillWidth: true Layout.fillWidth: true
// width: parent.width position: ToolBar.Footer
// height: toolBarHeight
position: ToolBar.Footer
Rectangle
{
anchors.fill: parent
z: -999
color: backgroundColor
}
RowLayout RowLayout
{ {
anchors.fill: parent anchors.fill: parent
TextInput TextInput
{ {
id: searchInput id: searchInput
......
...@@ -18,27 +18,12 @@ Page ...@@ -18,27 +18,12 @@ Page
spacing: 0 spacing: 0
Rectangle ToolBar
{ {
id: headerRoot id: headerRoot
width: parent.width width: parent.width
height: visible ? toolBarHeight : 0
Layout.fillWidth: true Layout.fillWidth: true
focus: true focus: true
color: darkDarkColor
Kirigami.Separator
{
visible: !isMobile
width: parent.width
height: 1
anchors
{
left: parent.left
right: parent.right
bottom: parent.bottom
}
}
RowLayout RowLayout
{ {
...@@ -50,8 +35,7 @@ Page ...@@ -50,8 +35,7 @@ Page
Layout.alignment : Qt.AlignLeft Layout.alignment : Qt.AlignLeft
Layout.leftMargin: contentMargins Layout.leftMargin: contentMargins
width: rowHeight width: rowHeight
iconName : "arrow-left" iconName : "go-previous"
iconColor: darktextColor
onClicked: stackView.pop(youtubeList) onClicked: stackView.pop(youtubeList)
} }
...@@ -64,7 +48,6 @@ Page ...@@ -64,7 +48,6 @@ Page
elide : Text.ElideRight elide : Text.ElideRight
font.bold : false font.bold : false
color : darktextColor
font.pointSize: fontSizes.big font.pointSize: fontSizes.big
horizontalAlignment : Text.AlignHCenter horizontalAlignment : Text.AlignHCenter
verticalAlignment : Text.AlignVCenter verticalAlignment : Text.AlignVCenter
...@@ -75,7 +58,6 @@ Page ...@@ -75,7 +58,6 @@ Page
Layout.alignment : Qt.AlignLeft Layout.alignment : Qt.AlignLeft
width: rowHeight width: rowHeight
iconName : "link" iconName : "link"
iconColor: darktextColor
onClicked: webView.url = currentYt.url.replace("embed/", "watch?v=") onClicked: webView.url = currentYt.url.replace("embed/", "watch?v=")
} }
...@@ -84,7 +66,6 @@ Page ...@@ -84,7 +66,6 @@ Page
Layout.alignment : Qt.AlignLeft Layout.alignment : Qt.AlignLeft
width: rowHeight width: rowHeight
iconName : "download" iconName : "download"
iconColor: darktextColor
onClicked: bae.getYoutubeTrack(JSON.stringify(currentYt)) onClicked: bae.getYoutubeTrack(JSON.stringify(currentYt))
} }
...@@ -95,7 +76,6 @@ Page ...@@ -95,7 +76,6 @@ Page
Layout.rightMargin: contentMargins Layout.rightMargin: contentMargins
width: rowHeight width: rowHeight
iconName : "overflow-menu" iconName : "overflow-menu"
iconColor: darktextColor
} }
} }
} }
...@@ -106,7 +86,7 @@ Page ...@@ -106,7 +86,7 @@ Page
clip: true clip: true
Layout.fillHeight: true Layout.fillHeight: true
Layout.fillWidth: true Layout.fillWidth: true
source: isMobile ? "qrc:/services/web/WebView_A.qml" : "qrc:/services/web/WebView.qml" source: isAndroid ? "qrc:/services/web/WebView_A.qml" : "qrc:/services/web/WebView.qml"
onVisibleChanged: onVisibleChanged:
{ {
if(!visible) webView.url = "about:blank" if(!visible) webView.url = "about:blank"
......
...@@ -1699,7 +1699,7 @@ var Babe = { ...@@ -1699,7 +1699,7 @@ var Babe = {
"media-playlist-repeat": "\uf49E", "media-playlist-repeat": "\uf49E",
"babe" : Icon.heart, "babe" : Icon.heart,
"arrow-left": Icon.arrowLeft, "go-previous": Icon.arrowLeft,
"overflow-menu": Icon.dotsVertical, "overflow-menu": Icon.dotsVertical,
"player-time": "\uf40C", "player-time": "\uf40C",
......
...@@ -44,7 +44,7 @@ ItemDelegate ...@@ -44,7 +44,7 @@ ItemDelegate
text: labelTxt.text text: labelTxt.text
elide: Text.ElideRight elide: Text.ElideRight
color: labelColor color: labelColor
font.pointSize: fontSizes.medium font.pointSize: fontSizes.default
font.bold: boldLabel font.bold: boldLabel
font.weight : boldLabel ? Font.Bold : Font.Normal font.weight : boldLabel ? Font.Bold : Font.Normal
......
...@@ -4,25 +4,30 @@ import QtQuick.Controls 2.2 ...@@ -4,25 +4,30 @@ import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
ColumnLayout ItemDelegate
{ {
id: babeAlbumRoot id: babeAlbumRoot
signal albumClicked(int index) signal albumClicked(int index)
signal albumPressed(int index) signal albumPressed(int index)
property int albumSize : 150 property int albumSize : iconSizes.huge
property int borderRadius : 2 property int borderRadius : albumSize*0.05
property int albumRadius : 0 property int albumRadius : 0
property bool albumCard : true property bool albumCard : true
property string fillColor: backgroundColor property string fillColor: backgroundColor
property string labelColor: textColor
property bool hide : false property bool hide : false
property color labelColor : GridView.isCurrentItem || hovered ? highlightColor : textColor
// height: typeof album === 'undefined' ? parseInt(albumSize+(albumSize*0.3)) : parseInt(albumSize+(albumSize*0.4)) // height: typeof album === 'undefined' ? parseInt(albumSize+(albumSize*0.3)) : parseInt(albumSize+(albumSize*0.4))
visible: !hide visible: !hide
spacing: 0 hoverEnabled: !isMobile
// spacing: 0
background: Rectangle
{
color: "transparent"
}
DropShadow DropShadow
{ {
...@@ -40,88 +45,125 @@ ColumnLayout ...@@ -40,88 +45,125 @@ ColumnLayout
{ {
id: card id: card
visible: albumCard visible: albumCard
anchors.fill: parent width: albumSize
height:albumSize
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
color: fillColor color: fillColor
radius: borderRadius radius: borderRadius
} }
Item
{
height: albumSize
width: albumSize
Layout.fillWidth: true ColumnLayout
Layout.alignment: Qt.AlignHCenter {
anchors.fill: parent
anchors.centerIn: parent
Image Item
{ {
id: img Layout.fillHeight: true
width: albumSize Layout.fillWidth: true
height: albumSize Layout.alignment: Qt.AlignHCenter
Layout.maximumHeight: albumSize
Layout.minimumHeight: albumSize
sourceSize.width: albumSize Image
sourceSize.height: albumSize {
id: img
width: albumSize
height: albumSize
fillMode: Image.PreserveAspectFit anchors.centerIn: parent
cache: true
antialiasing: true
source: sourceSize.width: albumSize
{ sourceSize.height: albumSize
if(artwork)
(artwork.length > 0 && artwork !== "NONE")? "file://"+encodeURIComponent(artwork) : "qrc:/assets/cover.png" fillMode: Image.PreserveAspectFit
else "qrc:/assets/cover.png" cache: true
} // antialiasing: true
layer.enabled: albumRadius > 0
layer.effect: OpacityMask source:
{
maskSource: Item
{ {
width: img.width if(artwork)
height: img.height (artwork.length > 0 && artwork !== "NONE")? "file://"+encodeURIComponent(artwork) : "qrc:/assets/cover.png"
Rectangle else "qrc:/assets/cover.png"
}
layer.enabled: albumRadius > 0
layer.effect: OpacityMask
{
maskSource: Item
{ {
anchors.centerIn: parent width: img.width
width: img.adapt ? img.width : Math.min(img.width, img.height) height: img.height
height: img.adapt ? img.height : width Rectangle
radius: albumRadius {
// radius: Math.min(width, height) anchors.centerIn: parent
width: img.adapt ? img.width : Math.min(img.width, img.height)
height: img.adapt ? img.height : width
radius: albumRadius
// radius: Math.min(width, height)
}
} }
} }
} }
} }
}
Column Item
{
id: albumInfoRow
Layout.maximumHeight: rowHeight
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: contentMargins
spacing: 5
Label