Commit a17a3934 authored by Camilo Higuita's avatar Camilo Higuita

use kirigami to draw widgets on desktop and material to draw them on mobile

parent e0a0c8e1
......@@ -5,8 +5,12 @@ QT += widgets
QT += websockets
QT += network
QT += xml
QT += qml
QT += quickcontrols2
android: QT += androidextras
unix:linux:!android:
{
include(kde/kde.pri)
......@@ -203,8 +207,8 @@ SOURCES += main.cpp \
RESOURCES += qml.qrc \
# kirigami-icons.qrc
RESOURCES += qml.qrc
android: RESOURCES += android.qrc
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =
......@@ -229,7 +233,7 @@ DISTFILES += \
android/res/values/libs.xml \
android/build.gradle \
android/gradle/wrapper/gradle-wrapper.properties \
android/gradlew.bat
android/gradlew.bat \
HEADERS += \
......
<RCC>
<qresource prefix="/">
<file>qtquickcontrols2.conf</file>
</qresource>
</RCC>
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -6,6 +6,7 @@
#include "babe.h"
#include "services/local/player.h"
#include <QLibrary>
#include <QQuickStyle>
#ifdef Q_OS_ANDROID
#include "./3rdparty/kirigami/src/kirigamiplugin.h"
......@@ -20,6 +21,7 @@ int main(int argc, char *argv[])
app.setApplicationVersion(BAE::Version);
app.setWindowIcon(QIcon("qrc:/assets/babe.png"));
QFontDatabase::addApplicationFont(":/utils/materialdesignicons-webfont.ttf");
// QQuickStyle::setStyle("org.kde.desktop");
QQmlApplicationEngine engine;
......@@ -35,8 +37,6 @@ int main(int argc, char *argv[])
context->setContextProperty("bae", &bae);
context->setContextProperty("player", &player);
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
......
......@@ -30,7 +30,7 @@ Kirigami.ApplicationWindow
/*THEMING*/
property int toolBarIconSize: bae.loadSetting("ICON_SIZE", "BABE", isMobile ? 24 : 22)
property int toolBarHeight : isMobile ? 48 : toolBarIconSize *2
property string babeColor : bae.babeColor()
property string babeAltColor : bae.babeAltColor()
property string backgroundColor : bae.backgroundColor()
......@@ -211,8 +211,8 @@ Kirigami.ApplicationWindow
id: mainToolbar
visible: true
currentIndex: currentView
bgColor: pageStack.currentIndex === 0 && !pageStack.wideMode ? babeColor : babeAltColor
textColor: pageStack.currentIndex === 0 && !pageStack.wideMode ? "#FFF" : bae.foregroundColor()
bgColor: isMobile && pageStack.currentIndex === 0 && !pageStack.wideMode ? babeColor : babeAltColor
textColor: isMobile && pageStack.currentIndex === 0 && !pageStack.wideMode ? "#FFF" : bae.foregroundColor()
onPlaylistViewClicked:
{
......@@ -271,8 +271,7 @@ Kirigami.ApplicationWindow
footer: Rectangle
{
id: searchBox
width: parent.width
height: 48
height: toolBarHeight
color: searchInput.activeFocus ? midColor : midLightColor
Kirigami.Separator
{
......@@ -294,31 +293,11 @@ Kirigami.ApplicationWindow
{
anchors.fill: parent
BabeButton
{
id: searchBtn
Layout.fillHeight: true
iconColor: currentView === 5 ? babeColor : foregroundColor
// visible: !(searchInput.focus || searchInput.text)
iconName: "edit-find" //"search"
onClicked:
{
if(searchView.count>0)
{
currentView = 5
pageStack.currentIndex = 1
}else
searchInput.forceActiveFocus()
}
}
Item
{
Layout.fillHeight: true
Layout.fillWidth: true
Layout.fillHeight: true
TextInput
{
......@@ -347,12 +326,21 @@ Kirigami.ApplicationWindow
BabeButton
{
id: settingsIcon
Layout.fillHeight: true
id: searchBtn
iconColor: currentView === 5 ? babeColor : foregroundColor
// visible: !(searchInput.focus || searchInput.text)
iconName: "edit-find" //"search"
onClicked:
{
if(searchView.count>0)
{
currentView = 5
pageStack.currentIndex = 1
iconName: "games-config-options"
iconColor: settingsDrawer.visible ? babeColor : foregroundColor
onClicked: settingsDrawer.visible ? settingsDrawer.close() : settingsDrawer.open()
}else
searchInput.forceActiveFocus()
}
}
}
......
<RCC>
<qresource prefix="/">
<file>main.qml</file>
<file>qtquickcontrols2.conf</file>
<file>widgets/BabeBar.qml</file>
<file>utils/Icons.js</file>
<file>utils/materialdesignicons-webfont.ttf</file>
......@@ -61,5 +60,9 @@
<file>view_models/BabeMenu/BabeMenu.qml</file>
<file>view_models/BabeDialog/BabeMessage.qml</file>
<file>view_models/BabeDialog/BabeDialog.qml</file>
<file>widgets/SettingsView/SourcesDialog.qml</file>
<file>view_models/BabePopup.qml</file>
<file>assets/banner.png</file>
<file>assets/banner.svg</file>
</qresource>
</RCC>
import QtQuick 2.0
import QtQuick 2.9
import QtQuick.Controls 2.2
import "../utils"
import org.kde.kirigami 2.2 as Kirigami
ToolButton
{
id: babeButton
property string iconName
property int iconSize : toolBarIconSize
property string iconColor: foregroundColor
readonly property string defaultColor : foregroundColor
icon.name: isMobile ? "" : babeButton.iconName
icon.width: isMobile ? 0 : babeButton.iconSize
// icon.height: isMobile ? 0 : babeButton.iconSize
icon.color: isMobile ? "transparent" : (iconColor || defaultColor)
// icon.name: isMobile ? "" : babeButton.iconName
// icon.width: isMobile ? 0 : babeButton.iconSize
//// icon.height: isMobile ? 0 : babeButton.iconSize
// icon.color: isMobile ? "transparent" : (iconColor || defaultColor)
Kirigami.Icon
{
id: kirigamIcon
anchors.centerIn: parent
width: iconSize
height: iconSize
visible: !isMobile
source: isMobile ? "" : iconName
isMask: true
smooth: true
color: isMobile ? "transparent" : (iconColor || defaultColor)
}
BabeIcon
{
......
......@@ -10,17 +10,12 @@ Dialog
parent: ApplicationWindow.overlay
modal: true
padding: 10
Material.accent: babeColor
Material.background: backgroundColor
Material.primary: backgroundColor
Material.foreground: foregroundColor
background: Rectangle
{
color: backgroundColor
border.color: midLightColor
border.width: 1
radius: 3
}
}
......@@ -2,30 +2,23 @@ import QtQuick 2.0
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.1
Menu
{
x: parent.width / 2 - width / 2
y: parent.height / 2 - height / 2
modal: root.isMobile
modal: true
focus: true
parent: ApplicationWindow.overlay
// padding: 10
enter: Transition {
enter: Transition
{
NumberAnimation { property: "opacity"; from: 0.0; to: 1.0 }
}
background: Rectangle
{
implicitWidth: 200
implicitHeight: 40
color: altColor
border.color: midLightColor
border.width: 1
radius: 3
}
Material.accent: babeColor
Material.background: backgroundColor
Material.primary: backgroundColor
Material.foreground: foregroundColor
}
......@@ -5,30 +5,6 @@ import QtQuick.Layouts 1.3
MenuItem
{
property string txt
property int menuItemHeight : root.isMobile ? 48 : 32;
property int assetsize : menuItemHeight/2
// hoverEnabled: true
// background: Rectangle
// {
// color: tableMenuItemRoot.hovered ? palette.highlight : palette.background
// }
height: menuItemHeight
hoverEnabled: true
// font.pointSize: isMobile ? 12 : 10
padding: 10
// elide: Text.ElideRight
// Label
// {
// width: parent.width
// height: parent.height
// text: txt
//// padding: 10
// color: "red"
// horizontalAlignment: Qt.AlignLeft
// verticalAlignment: Qt.AlignVCenter
// }
}
import QtQuick 2.9
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.2
import QtQuick.Controls.Material 2.1
Popup
{
width: parent.width *0.8
height: parent.height *0.8
x: parent.width / 2 - width / 2
y: parent.height / 2 - height / 2
parent: ApplicationWindow.overlay
z: 999
modal: true
focus: true
clip: true
enter: Transition {
NumberAnimation { property: "opacity"; from: 0.0; to: 1.0 }
}
Material.accent: babeColor
Material.background: backgroundColor
Material.primary: backgroundColor
Material.foreground: foregroundColor
}
......@@ -89,7 +89,7 @@ ListView
{
id: tableHeader
width: parent.width
height: headerBar ? 48 : 0
height: visible ? toolBarHeight : 0
color: midLightColor
visible: headerBar
z: 999
......@@ -111,7 +111,6 @@ ListView
BabeButton
{
id: playAllBtn
Layout.fillHeight: true
visible: headerBar && count > 0
iconName: /*"amarok_clock"*/ "media-playback-start"
......@@ -137,7 +136,6 @@ ListView
BabeButton
{
id: appendBtn
Layout.fillHeight: true
visible: headerBar && count > 0
iconName : "archive-insert"//"media-repeat-track-amarok"
......@@ -147,7 +145,6 @@ ListView
BabeButton
{
id: menuBtn
Layout.fillHeight: true
iconName: /*"application-menu"*/ "overflow-menu"
onClicked: {}
}
......
......@@ -95,66 +95,52 @@ BabeMenu
BabeMenuItem
{
id: starsRow
hoverEnabled: true
padding: 10
width: parent.width
RowLayout
{
anchors.fill: parent
width: parent.width
BabeButton
{
Layout.fillHeight: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
iconName: starIcon
iconColor: rate >= 1 ? starColor :starReg
iconSize: starsRow.assetsize
onClicked: rateIt(1)
}
BabeButton
{
Layout.fillHeight: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
iconName: starIcon
iconColor: rate >= 2 ? starColor :starReg
iconSize: starsRow.assetsize
onClicked: rateIt(2)
}
BabeButton
{
Layout.fillHeight: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
iconName: starIcon
iconColor: rate >= 3 ? starColor :starReg
iconSize: starsRow.assetsize
onClicked: rateIt(3)
}
BabeButton
{
Layout.fillHeight: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
iconName: starIcon
iconColor: rate >= 4 ? starColor :starReg
iconSize: starsRow.assetsize
onClicked: rateIt(4)
}
BabeButton
{
Layout.fillHeight: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
iconName: starIcon
iconColor: rate >= 5 ? starColor :starReg
iconSize: starsRow.assetsize
onClicked: rateIt(5)
}
......@@ -165,12 +151,11 @@ BabeMenu
BabeMenuItem
{
id: colorsRow
hoverEnabled: true
padding: 10
width: parent.width
ColorTagsBar
{
anchors.fill: parent
recSize: colorsRow.assetsize
onColorClicked: moodIt(color)
}
}
......
......@@ -9,6 +9,7 @@ Item
RowLayout
{
width: parent.width
anchors.fill: parent
anchors.centerIn: parent
ToolButton
......
......@@ -3,27 +3,8 @@ import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import "../../view_models"
Popup
BabePopup
{
width: parent.width *0.8
height: parent.height *0.8
x: parent.width / 2 - width / 2
y: parent.height / 2 - height / 2
parent: ApplicationWindow.overlay
z: 999
modal: true
focus: true
clip: true
enter: Transition {
NumberAnimation { property: "opacity"; from: 0.0; to: 1.0 }
}
property int current : 0
property alias dirList : dirList
signal pathClicked(var path)
signal accepted(var path)
......
......@@ -51,16 +51,22 @@ ToolBar
RowLayout
{
anchors.fill: parent
anchors.centerIn: parent
// spacing: 0
// Layout.margins: 0
Row
Item
{
Layout.alignment: Qt.AlignLeft
Layout.fillWidth: true
BabeButton
{
id: playlistView
anchors.centerIn: parent
iconName: /*"headphones"*/ "media-optical-audio"
iconColor: textColor
iconColor: (pageStack.wideMode || pageStack.currentIndex === 0 ) && !isMobile ? accentColor : textColor
onClicked: playlistViewClicked()
hoverEnabled: !isMobile
......@@ -71,9 +77,6 @@ ToolBar
}
}
Row
{
Layout.alignment: Qt.AlignCenter
BabeButton
{
......@@ -133,14 +136,18 @@ ToolBar
ToolTip.visible: hovered && !isMobile
ToolTip.text: qsTr("Playlists")
}
}
Row
Item
{
Layout.alignment: Qt.AlignRight
Layout.fillWidth: true
BabeButton
{
Layout.alignment: Qt.AlignRight
anchors.centerIn: parent
iconName: "love"
iconColor: accent && currentIndex === 4? accentColor : textColor
......
......@@ -22,7 +22,6 @@ Item
property int prevTrackIndex : 0
property string currentArtwork
property bool shuffle : false
property int playbackIconSize: isMobile ? 24 : 22
property alias progressBar : progressBar
property alias cover : cover
......@@ -144,10 +143,8 @@ Item
Layout.row: 2
Layout.column: 1
Layout.fillWidth: true
Layout.preferredHeight: 48
// height: 48
// anchors.top: cover.bottom
Layout.preferredHeight: toolBarHeight
// anchors.top: cover.bottom
visible: list.count > 0
Rectangle
......@@ -157,19 +154,6 @@ Item
opacity: 0.8
z: -999
}
// onYChanged:
// {
// if(playbackControls.y<coverSize/4)
// {
// cover.visible = false
// playbackControls.y = 0
// }else
// {
// cover.visible = true
// playbackControls.y = coverSize
// }
// }
PlaylistMenu
{
......@@ -186,12 +170,6 @@ Item
drag.axis: Drag.YAxis
drag.minimumY: 0
drag.maximumY: coverSize
// onClicked:
// {
// if(!root.isMobile)
// cover.visible = !cover.visible
// }
onMouseYChanged:
{
......@@ -210,25 +188,30 @@ Item
{
anchors.fill: parent
anchors.centerIn: parent
spacing: 0
Layout.margins: 0
// spacing: 0
// Layout.margins: 0
BabeButton
Item
{
id: infoBtn
Layout.fillHeight: true
Layout.fillWidth: true
iconName: stackView.currentItem === list ? "documentinfo" : "arrow-left"
onClicked:
BabeButton
{
if( stackView.currentItem !== list)
id: infoBtn
anchors.centerIn: parent
iconName: stackView.currentItem === list ? "documentinfo" : "arrow-left"
onClicked:
{
cover.visible = true
stackView.pop(list) }
else {
cover.visible = false
stackView.push(infoView)
if( stackView.currentItem !== list)
{
cover.visible = true
stackView.pop(list) }
else {
cover.visible = false
stackView.push(infoView)
}
}
}
}
......@@ -236,8 +219,6 @@ Item
BabeButton
{
Layout.fillHeight: true
id: babeBtnIcon
iconName: "love" //"love-amarok"
iconColor: defaultColor
......@@ -246,19 +227,14 @@ Item
BabeButton
{
Layout.fillHeight: true
id: previousBtn
iconName: "media-skip-backward"
onClicked: Player.previousTrack()
onPressAndHold: Player.playAt(prevTrackIndex)
}
BabeButton
{
Layout.fillHeight: true
id: playIcon
iconName: "media-playback-start"
onClicked:
......@@ -270,8 +246,6 @@ Item
BabeButton
{
Layout.fillHeight: true
id: nextBtn
iconName: "media-skip-forward"
onClicked: Player.nextTrack()
......@@ -280,22 +254,23 @@ Item
BabeButton
{
Layout.fillHeight: true
id: shuffleBtn
iconName: shuffle ? "media-playlist-shuffle" : "media-playlist-repeat"
onClicked: shuffle = !shuffle
}
BabeButton
Item
{
id: menuBtn
Layout.fillHeight: true
Layout.fillWidth: true
iconName: /*"application-menu"*/ "overflow-menu"
onClicked: root.isMobile ? playlistMenu.open() : playlistMenu.popup()
BabeButton
{
id: menuBtn
anchors.centerIn: parent
Layout.fillWidth: true
iconName: /*"application-menu"*/ "overflow-menu"
onClicked: root.isMobile ? playlistMenu.open() : playlistMenu.popup()
}
}
}
......
......@@ -58,7 +58,7 @@ ListView
header: Rectangle
{
height: 48
height: toolBarHeight
width: parent.width
color: midLightColor
z: 999
......@@ -71,9 +71,6 @@ ListView
BabeButton
{
id: createPlaylistBtn
Layout.fillHeight: true
width: parent.height
height: parent.height
iconName: "list-add"
onClicked: newPlaylistDialog.open()
......@@ -83,11 +80,6 @@ ListView
BabeButton
{
id: removePlaylist
Layout.fillHeight: true
width: parent.height
height: parent.height
iconName: "list-remove"