Commit 1c67de46 authored by Camilo Higuita's avatar Camilo Higuita

move to kirigami units for plasma mobile and the rest #35

parent e5f03232
......@@ -20,6 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QQuickStyle>
#include <QIcon>
#include <QCommandLineParser>
#include <QFileInfo>
......
QT += qml
QT += quick
QT += sql
QT += quickcontrols2
QT += sql
QT += widgets
CONFIG += ordered
......
......@@ -63,6 +63,7 @@ Kirigami.ApplicationWindow
/*READONLY PROPS*/
readonly property bool isMobile : Kirigami.Settings.isMobile
readonly property bool isAndroid : pix.isAndroid();
readonly property var views : ({
viewer: 0,
gallery: 1,
......@@ -76,18 +77,69 @@ Kirigami.ApplicationWindow
property int currentView : views.gallery
property bool fullScreen : false
/*UI PROPS*/
readonly property int contentMargins: isMobile ? 8 : 10
/***************************************************/
/******************** UI UNITS ********************/
/*************************************************/
property int iconSize : iconSizes.medium
readonly property real factor : Kirigami.Units.gridUnit * (isMobile ? 0.2 : 0.2)
readonly property int contentMargins: space.tiny * factor
readonly property int defaultFontSize: Kirigami.Theme.defaultFont.pointSize
readonly property var fontSizes: ({
tiny: defaultFontSize - 2,
small: defaultFontSize -1,
small: defaultFontSize - 1,
default: defaultFontSize,
big: defaultFontSize + 1,
large: defaultFontSize + 2
})
readonly property var space : ({
tiny: Kirigami.Units.smallSpacing,
small: Kirigami.Units.smallSpacing*2,
medium: Kirigami.Units.largeSpacing,
big: Kirigami.Units.largeSpacing*2,
large: Kirigami.Units.largeSpacing*3,
huge: Kirigami.Units.largeSpacing*4,
enormus: Kirigami.Units.largeSpacing*5
})
readonly property var iconSizes : ({
tiny : Kirigami.Units.iconSizes.small*0.5,
small : (isMobile ? Kirigami.Units.iconSizes.small*0.5:
Kirigami.Units.iconSizes.small),
medium : (isMobile ? Kirigami.Units.iconSizes.small :
Kirigami.Units.iconSizes.smallMedium),
big: (isMobile ? Kirigami.Units.iconSizes.smallMedium :
Kirigami.Units.iconSizes.medium),
large: (isMobile ? Kirigami.Units.iconSizes.medium :
Kirigami.Units.iconSizes.large),
huge: (isMobile ? Kirigami.Units.iconSizes.large :
Kirigami.Units.iconSizes.huge),
enormous: (isMobile ? Kirigami.Units.iconSizes.huge :
Kirigami.Units.iconSizes.enormous)
})
property int rowHeight : defaultFontSize + space.large
/***************************************************/
/**************************************************/
/*************************************************/
/***************************************************/
/******************** UI COLORS *******************/
/*************************************************/
property string backgroundColor: Kirigami.Theme.backgroundColor
property string textColor: Kirigami.Theme.textColor
property string highlightColor: Kirigami.Theme.highlightColor
......@@ -97,18 +149,9 @@ Kirigami.ApplicationWindow
property string altColor: Kirigami.Theme.complementaryBackgroundColor
property string pixColor : pix.pixColor()
property int iconSize : iconSizes.medium
property var iconSizes : ({
small : 16,
medium : 22,
large: 48,
})
property int rowHeight : 32
// pageStack.defaultColumnWidth: 400
// pageStack.initialPage: [mainPage]
// pageStack.interactive: isMobile
// pageStack.separatorVisible: pageStack.wideMode
/***************************************************/
/**************************************************/
/*************************************************/
overlay.modal: Rectangle {
color: isMobile ? altColor : "transparent"
......@@ -138,7 +181,7 @@ Kirigami.ApplicationWindow
onAlbumsViewClicked: currentView = views.albums
onTagsViewClicked: currentView = views.tags
onSearchViewClicked: currentView = views.search
onMenuClicked: globalDrawer.open()
onMenuClicked: globalDrawer.visible ? globalDrawer.close() : globalDrawer.open()
}
footer: PixFooter
......
......@@ -70,6 +70,11 @@ Pix::~Pix()
delete this->fileLoader;
}
bool Pix::isAndroid()
{
return PIX::isAndroid();
}
void Pix::openPics(const QStringList &pics)
{
QVariantList data;
......
......@@ -46,6 +46,9 @@ public:
explicit Pix(QObject* parent = nullptr);
~Pix();
/*UTILS*/
Q_INVOKABLE bool isAndroid();
Q_INVOKABLE void openPics(const QStringList &pics);
Q_INVOKABLE void refreshCollection();
......
......@@ -302,6 +302,25 @@ inline bool isMobile()
#endif
}
inline bool isAndroid()
{
#if defined(Q_OS_ANDROID)
return true;
#elif defined(Q_OS_LINUX)
return false;
#elif defined(Q_OS_WIN32)
return false;
#elif defined(Q_OS_WIN64)
return false;
#elif defined(Q_OS_MACOS)
return false;
#elif defined(Q_OS_IOS)
return true;
#elif defined(Q_OS_HAIKU)
return false;
#endif
}
}
......
......@@ -9,7 +9,7 @@ ToolButton
property alias kirigamiIcon : pixIcon
property string iconName
property int iconSize : 22
property int size : iconSize
property color iconColor: textColor
readonly property string defaultColor : textColor
property bool anim : false
......@@ -18,8 +18,8 @@ ToolButton
{
id: pixIcon
anchors.centerIn: parent
width: iconSize
height: iconSize
width: size
height: size
visible: true
color: iconColor
source: iconName
......
......@@ -8,9 +8,9 @@ PixPage
id: gridPage
/*props*/
property int itemSize : isMobile ? 80 : 150
property int itemSpacing: isMobile ? 10 : 50
property int itemRadius : 4
property int itemSize : iconSizes.huge
property int itemSpacing: space.huge
property int itemRadius : itemSize*0.05
property alias grid: grid
property alias holder: holder
......
......@@ -5,7 +5,7 @@ import QtGraphicalEffects 1.0
ItemDelegate
{
property int picSize : 150
property int picSize : iconSizes.enormous
property int picRadius : 0
property bool showLabel : true
property bool showIndicator : false
......@@ -24,7 +24,6 @@ ItemDelegate
signal rightClicked();
signal emblemClicked();
height: picSize
width: picSize
......@@ -50,9 +49,9 @@ ItemDelegate
PixButton
{
id: emblem
iconSize: iconSizes.medium
size: iconSizes.medium
iconName: (keepEmblemOverlay && emblemAdded) ? "emblem-remove" : "emblem-added"
visible: parent.hovered /*|| (keepEmblemOverlay && emblemAdded)*/
visible: parent.hovered || (keepEmblemOverlay && emblemAdded)
kirigamiIcon.isMask: false
z: 999
anchors.top: parent.top
......@@ -76,8 +75,8 @@ ItemDelegate
Layout.alignment: Qt.AlignCenter
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
sourceSize.height: picSize-contentMargins
sourceSize.width: picSize-contentMargins
sourceSize.height: picSize
sourceSize.width: picSize
cache: false
antialiasing: true
smooth: true
......@@ -93,8 +92,8 @@ ItemDelegate
anchors.horizontalCenter: parent.horizontalCenter
visible: showIndicator
color: indicatorColor
height: 12
width: 12
height: iconSizes.small
width: iconSizes.small
radius: Math.min(width, height)
}
......
......@@ -11,7 +11,7 @@ Item
property bool selectionMode : false
property var selectedPaths : []
property int barHeight : 64
property int barHeight : iconSizes.large
property color animColor : "black"
height: barHeight
......@@ -23,7 +23,7 @@ Item
anchors.fill: parent
z:-1
color: Kirigami.Theme.complementaryBackgroundColor
radius: 4
radius: barHeight*0.08
opacity: 0.6
border.color: "black"
......@@ -47,8 +47,8 @@ Item
anchors.fill: parent
Rectangle
{
height: 22
width: 22
height: iconSizes.medium
width: iconSizes.medium
radius: Math.min(width, height)
color: Kirigami.Theme.complementaryBackgroundColor
......@@ -60,7 +60,7 @@ Item
anchors.centerIn: parent
iconName: "window-close"
iconColor: "white"
iconSize: 16
size: iconSizes.small
flat: true
onClicked: clearSelection()
}
......@@ -77,7 +77,7 @@ Item
orientation: ListView.Horizontal
clip: true
spacing: 10
spacing: space.small
focus: true
interactive: true
......@@ -88,8 +88,9 @@ Item
{
id: delegate
anchors.verticalCenter: parent.verticalCenter
height: 48
picSize: 48
// height: barHeight
// width: barHeight + space.big
picSize: barHeight-space.small
showLabel: false
emblemAdded: true
keepEmblemOverlay: true
......@@ -109,7 +110,7 @@ Item
Layout.alignment: Qt.AlignRight
Layout.fillWidth: true
Layout.fillHeight: true
Layout.maximumWidth: 44
Layout.maximumWidth: iconSize
PixButton
{
anchors.centerIn: parent
......@@ -121,8 +122,8 @@ Item
Rectangle
{
height: 22
width: 22
height: iconSizes.medium
width: iconSizes.medium
radius: Math.min(width, height)
color: highlightColor
......
......@@ -7,8 +7,8 @@ ItemDelegate
{
clip: true
property int tagWidth: 100
property int tagHeight: 24
property int tagWidth: iconSizes.medium*4
property int tagHeight: iconSizes.medium
signal removeTag(int index)
......@@ -34,6 +34,7 @@ ItemDelegate
{
Layout.fillHeight: true
Layout.fillWidth: true
Layout.leftMargin: tagWidth *0.2
Label
{
id: tagLabel
......@@ -51,15 +52,15 @@ ItemDelegate
Item
{
Layout.fillHeight: true
width: 16
Layout.maximumWidth: 16
Layout.margins: 5
width: iconSizes.small
Layout.maximumWidth: iconSizes.small
Layout.margins: space.small
PixButton
{
anchors.centerIn: parent
iconName: "window-close"
iconSize: 16
size: iconSizes.small
onClicked: removeTag(index)
}
......
......@@ -6,10 +6,11 @@ import org.kde.kirigami 2.2 as Kirigami
ItemDelegate
{
property int albumSize : 32
property int albumSize : iconSizes.large
property color hightlightedColor : GridView.isCurrentItem || hovered ? highlightColor : "transparent"
property color labelColor : GridView.isCurrentItem && !hovered ? highlightedTextColor : textColor
height: albumSize*2
width: albumSize*3
hoverEnabled: !isMobile
background: Rectangle
{
......@@ -18,22 +19,29 @@ ItemDelegate
ColumnLayout
{
anchors.fill: parent
height: parent.height * 0.8
width: parent.width * 0.9
spacing: space.medium
Image
Item
{
Layout.fillHeight: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
source: "qrc:/img/assets/album_bg_normal.png"
height: albumSize
sourceSize.height: albumSize
sourceSize.width: albumSize
cache: true
antialiasing: true
fillMode: Image.PreserveAspectFit
Image
{
anchors.centerIn: parent
source: "qrc:/img/assets/album_bg_normal.png"
height: albumSize
sourceSize.height: albumSize
sourceSize.width: albumSize
cache: true
antialiasing: true
fillMode: Image.PreserveAspectFit
}
}
Label
......@@ -44,6 +52,17 @@ ItemDelegate
horizontalAlignment: Qt.AlignHCenter
elide: Qt.ElideRight
font.pointSize: fontSizes.default
color: labelColor
Rectangle
{
visible: parent.visible
anchors.fill: parent
z: -1
radius: 3
color: hightlightedColor
opacity: hovered ? 0.25 : 1
}
}
}
......
......@@ -7,7 +7,9 @@ GridView
{
id: albumsGridRoot
property int gridSize : 80
property int itemSize : iconSizes.huge
property int itemSpacing: space.huge
property string currentAlbum : ""
signal albumClicked(int index)
......@@ -17,8 +19,8 @@ GridView
width: parent.width
height: parent.height
cellHeight: gridSize*2
cellWidth: gridSize*2
cellWidth: itemSize + itemSpacing
cellHeight: itemSize + itemSpacing*2
focus: true
......@@ -39,12 +41,17 @@ GridView
delegate: AlbumDelegate
{
id: delegate
albumSize : 64
albumSize : itemSize
width: cellWidth
height: cellHeight
Connections
{
target: delegate
onClicked: albumClicked(index)
onClicked:
{
albumsGridRoot.currentIndex = index
albumClicked(index)
}
}
}
......
......@@ -5,10 +5,12 @@ import org.kde.kirigami 2.2 as Kirigami
ItemDelegate
{
property int folderSize : 32
property int folderSize : iconSizes.big
height: folderSize*2
width: folderSize*3
property color hightlightedColor : GridView.isCurrentItem || hovered ? highlightColor : "transparent"
property color labelColor : GridView.isCurrentItem && !hovered ? highlightedTextColor : textColor
hoverEnabled: !isMobile
background: Rectangle
{
......@@ -17,20 +19,27 @@ ItemDelegate
ColumnLayout
{
anchors.fill: parent
height: parent.height * 0.8
width: parent.width * 0.9
spacing: space.medium
Kirigami.Icon
Item
{
Layout.fillHeight: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
source: "folder"
isMask: false
height: folderSize
Kirigami.Icon
{
anchors.centerIn: parent
source: "folder"
isMask: false
height: folderSize
width: folderSize
}
}
Label
{
text: folder
......@@ -39,6 +48,17 @@ ItemDelegate
horizontalAlignment: Qt.AlignHCenter
elide: Qt.ElideRight
font.pointSize: fontSizes.default
color: labelColor
Rectangle
{
visible: parent.visible
anchors.fill: parent
z: -1
radius: 3
color: hightlightedColor
opacity: hovered ? 0.25 : 1
}
}
}
......
......@@ -6,7 +6,10 @@ import QtQuick.Layouts 1.3
GridView
{
id: folderGridRoot
property int gridSize : 48
property int itemSize : iconSizes.large
property int itemSpacing: space.enormus
signal folderClicked(int index)
clip: true
......@@ -14,8 +17,8 @@ GridView
width: parent.width
height: parent.height
cellHeight: gridSize*2
cellWidth: gridSize*2
cellWidth: itemSize + itemSpacing
cellHeight: itemSize + (itemSpacing)
focus: true
......@@ -29,22 +32,29 @@ GridView
delegate: FoldersDelegate
{
id: delegate
folderSize : 32
folderSize : itemSize
width: cellWidth
height: cellHeight
Connections
{
target: delegate
onClicked: folderClicked(index)
onClicked:
{
folderGridRoot.currentIndex = index
folderClicked(index)
}
}
}
onWidthChanged:
{
var amount = parseInt(width/(gridSize*2),10)
var leftSpace = parseInt(width-(amount*(gridSize*2)), 10)
var size = parseInt((gridSize*2)+(parseInt(leftSpace/amount, 10)), 10)
var amount = parseInt(width/(itemSize + itemSpacing),10)
var leftSpace = parseInt(width-(amount*(itemSize + itemSpacing)), 10)
var size = parseInt((itemSize + itemSpacing)+(parseInt(leftSpace/amount, 10)), 10)
size = size > gridSize*2 ? size : gridSize*2
size = size > itemSize + itemSpacing ? size : itemSize + itemSpacing
cellWidth = size
// grid.cellHeight = size
......
......@@ -4,7 +4,6 @@ import "../../../view_models"
Page
{
topPadding: contentMargins
StackView
{
id: stackView
......@@ -16,6 +15,8 @@ Page
id: foldersPage
headerbarVisible: false
headerbarExit: false
topPadding: contentMargins
content: FoldersGrid
{
id: folderGrid
......
......@@ -11,8 +11,6 @@ PixGrid
headerbarExit: false
visible: true
// picSize: Math.sqrt(root.width*root.height)*0.25
// picRadius: 2
function populate()
{
......
......@@ -8,8 +8,8 @@ Item
{
property alias rollList : rollList
property int rollHeight : 54
property int rollPicSize : rollHeight-6
property int rollHeight : iconSizes.large
property int rollPicSize : rollHeight-space.tiny
signal picClicked(int index)
......@@ -36,7 +36,7 @@ Item
orientation: ListView.Horizontal
clip: true
spacing: 2
spacing: space.tiny
focus: true
interactive: true
......@@ -77,5 +77,4 @@ Item
rollList.positionViewAtIndex(index, ListView.Center)
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment