Commit d848874a authored by Camilo Higuita's avatar Camilo Higuita

update gallery view and quicker miniature image loading

parent 5a227aa8
......@@ -23,7 +23,7 @@ int main(int argc, char *argv[])
QQmlApplicationEngine engine;
auto context = engine.rootContext();
QQuickStyle::setStyle("qqc2-desktop-style");
QQuickStyle::setStyle("nomad");
Pix pix;
context->setContextProperty("pix", &pix);
......
......@@ -14,12 +14,32 @@ Kirigami.ApplicationWindow
height: 500
title: qsTr("Pixs")
property int currentView : 0
property int columnWidth: 32
pageStack.defaultColumnWidth: columnWidth
pageStack.initialPage: [sidebar, stackView]
pageStack.separatorVisible: pageStack.wideMode
/*READONLY PROPS*/
readonly property bool isMobile : Kirigami.Settings.isMobile
readonly property var views : ({
viewer: 0,
gallery: 1,
folders: 2,
albums: 3,
tags: 4,
search: 5
})
/*PROPS*/
property int currentView : views.gallery
/*UI PROPS*/
readonly property int contentMargins: isMobile ? 8 : 10
readonly property int defaultFontSize: Kirigami.Theme.defaultFont.pointSize
readonly property var fontSizes: ({
tiny: defaultFontSize - 2,
small: defaultFontSize -1,
standar: defaultFontSize,
big: defaultFontSize + 1,
large: defaultFontSize + 2
})
property string backgroundColor: Kirigami.Theme.backgroundColor
property string textColor: Kirigami.Theme.textColor
......@@ -27,34 +47,32 @@ Kirigami.ApplicationWindow
property string highlightedTextColor: Kirigami.Theme.highlightedTextColor
property string buttonBackgroundColor: Kirigami.Theme.buttonBackgroundColor
property string viewBackgroundColor: Kirigami.Theme.viewBackgroundColor
property string altColor: Kirigami.Theme.complementaryBackgroundColor
// header: PixsBar
// {
// id: toolBar
// visible: true
// size: 24
// currentIndex: currentView
// onViewerViewClicked: currentView = 0
// onGalleryViewClicked: currentView = 1
// onFoldersViewClicked: currentView = 2
// onAlbumsViewClicked: currentView = 3
// onTagsViewClicked: currentView = 4
// onSettingsViewClicked: {}
// }
header: PixsBar
{
id: toolBar
visible: true
currentIndex: currentView
SideBar
{
id: sidebar
onViewerViewClicked: currentView = 0
onGalleryViewClicked: currentView = 1
onFoldersViewClicked: currentView = 2
onAlbumsViewClicked: currentView = 3
onTagsViewClicked: currentView = 4
onSearchViewClicked: {}
}
StackView
{
id: stackView
clip: true
anchors.fill: parent
initialItem: SwipeView
{
id: swipeView
......
......@@ -22,5 +22,6 @@
<file>db/Query.js</file>
<file>view_models/SideBar.qml</file>
<file>view_models/PixButton.qml</file>
<file>view_models/PixPage.qml</file>
</qresource>
</RCC>
import QtQuick.Controls 2.2
import QtQuick 2.9
Pane
PixPage
{
id: gridPage
/*props*/
property int picSize : 150
property int picSpacing: 20
property int picSpacing: 50
property int picRadius : 4
property alias gridModel: gridModel
......@@ -16,40 +16,30 @@ Pane
/*signals*/
signal picClicked(string url)
width: 500
height: 400
headerbarTitle: gridModel.count+" "+qsTr("images")
Rectangle
{
anchors.fill: parent
color: pix.altColor()
z: -999
}
headerBarRight: [
PixButton
{
id: menuBtn
iconName: "overflow-menu"
}
]
function clearGrid()
{
gridModel.clear()
}
PixHolder
{
visible: grid.count === 0
message: "No pics..."
}
ListModel {id: gridModel}
GridView
content: GridView
{
id: grid
clip: true
// width: Math.min(model.count, Math.floor(parent.width/cellWidth))*cellWidth
width: parent.width
height: parent.height
// anchors.horizontalCenter: parent.horizontalCenter
// anchors.horizontalCenter: parent.horizontalCenter
cellWidth: picSize + picSpacing
cellHeight: picSize + picSpacing
highlightFollowsCurrentItem: false
focus: true
boundsBehavior: Flickable.StopAtBounds
......@@ -60,17 +50,20 @@ Pane
// flow: GridView.FlowTopToBottom
// maximumFlickVelocity: albumSize*8
model: gridModel
model: ListModel {id: gridModel}
highlight: Rectangle
{
id: highlight
width: picSize
height: picSize
color: pix.hightlightColor()
radius: 2
color: "pink"
radius: 5
}
highlightFollowsCurrentItem: true
onWidthChanged:
{
var amount = parseInt(grid.width/(picSize + picSpacing),10)
......@@ -101,7 +94,12 @@ Pane
}
}
ScrollBar.vertical: ScrollBar{ visible: !pix.isMobile()}
ScrollBar.vertical: ScrollBar{ visible: !isMobile}
}
function clearGrid()
{
gridModel.clear()
}
}
......@@ -13,10 +13,8 @@ Item
GridLayout
{
id:placeHolder
width: parent.width
height: parent.height
id: placeHolder
anchors.fill: parent
columns: 1
rows: 2
......
import QtQuick 2.0
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import org.kde.kirigami 2.2 as Kirigami
Page
{
property int toolbarHeight: 48
property bool headerbarVisible : true
property bool headerbarExit : true
property string headerbarExitIcon : "dialog-close"
property string headerbarTitle: ""
property alias headerBarRight : headerbarActionsRight.children
property alias headerBarLeft : headerbarActionsLeft.children
property alias content : pageContent.children
property alias holder : holder
signal exit();
clip: true
PixHolder
{
id: holder
visible: grid.count === 0
message: "No pics..."
}
ColumnLayout
{
anchors.fill: parent
spacing: 0
Rectangle
{
id: header
height: toolbarHeight
Layout.fillWidth: true
visible: headerbarVisible
focus: true
color: backgroundColor
Kirigami.Separator
{
visible: !isMobile
width: parent.width
height: 1
anchors
{
left: parent.left
right: parent.right
bottom: parent.bottom
}
}
RowLayout
{
id: headerbarLayout
anchors.fill: parent
PixButton
{
id: exitBtn
Layout.alignment : Qt.AlignLeft
Layout.leftMargin: contentMargins
visible: headerbarExit
anim : true
iconName : headerbarExitIcon
onClicked : exit()
}
Row
{
id: headerbarActionsLeft
Layout.alignment : Qt.AlignLeft
Layout.leftMargin: headerbarExit ? 0 : contentMargins
}
Label
{
text : headerbarTitle || ""
Layout.fillHeight : true
Layout.fillWidth : true
Layout.alignment : Qt.AlignCenter
elide : Text.ElideRight
font.bold : false
color : textColor
font.pointSize: fontSizes.big
horizontalAlignment : Text.AlignHCenter
verticalAlignment : Text.AlignVCenter
}
Row
{
id: headerbarActionsRight
Layout.alignment : Qt.AlignRight
Layout.rightMargin: contentMargins
}
}
}
Column
{
id: pageContent
Layout.fillHeight: true
Layout.fillWidth: true
}
}
}
import QtQuick 2.9
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.2
Image
ItemDelegate
{
id: img
height: picSize
width: picSize
signal picClicked(int index)
property int picSize : 150
property int picRadius : 2
width: picSize
height: picSize
cache: false
antialiasing: true
fillMode: Image.PreserveAspectFit
source: (url && url.length>0)? "file://"+encodeURIComponent(url) : "qrc:/../assets/face.png"
Rectangle {
id: border; color: 'white'; anchors.centerIn: parent; antialiasing: true
width: img.paintedWidth + 6; height: img.paintedHeight + 6
z: -999
}
MouseArea
Image
{
anchors.fill: parent
onClicked:
{
parent.GridView.view.currentIndex = index
img.picClicked(index)
}
id: img
anchors.centerIn: parent
height: picSize-contentMargins
width: picSize-contentMargins
sourceSize.height: picSize-contentMargins
sourceSize.width: picSize-contentMargins
cache: false
antialiasing: true
fillMode: Image.PreserveAspectCrop
source: (url && url.length>0)? "file://"+encodeURIComponent(url) : "qrc:/../assets/face.png"
asynchronous: true
verticalAlignment: Qt.AlignVCenter
}
}
......@@ -3,14 +3,13 @@ import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import "../utils/Icons.js" as MdiFont
import "../utils"
import "../view_models"
ToolBar
{
property string accentColor : pix.pixColor()
property string textColor : pix.foregroundColor()
property string backgroundColor : pix.backgroundColor()
property int size
property int currentIndex : 0
......@@ -19,163 +18,159 @@ ToolBar
signal albumsViewClicked()
signal tagsViewClicked()
signal foldersViewClicked()
signal settingsViewClicked()
signal searchViewClicked()
id: pixBar
Rectangle
{
anchors.fill: parent
color: backgroundColor
}
RowLayout
{
anchors.fill: parent
Row
Item
{
Layout.alignment: Qt.AlignLeft
Layout.fillWidth: true
Layout.fillHeight: true
ToolButton
PixButton
{
id: viewerView
anchors.centerIn: parent
iconColor: currentIndex === views.viewer? accentColor : textColor
Icon
{
id: viewerIcon
text: MdiFont.Icon.image
color: currentIndex === 0? accentColor : textColor
iconSize: size
}
iconName: "view-preview"
onClicked: viewerViewClicked()
hoverEnabled: true
hoverEnabled: !isMobile
ToolTip.delay: 1000
ToolTip.timeout: 5000
ToolTip.visible: hovered
ToolTip.text: qsTr("Settings")
ToolTip.text: qsTr("Viewer")
}
}
Row
Item { Layout.fillWidth: true }
Item
{
Layout.alignment: Qt.AlignCenter
Layout.fillWidth: true
Layout.fillHeight: true
ToolButton
PixButton
{
id: galleryBtn
Icon
{
text: MdiFont.Icon.imageFilterFrames
color: currentIndex === 1? accentColor : textColor
iconSize: size
}
anchors.centerIn: parent
iconColor: currentIndex === views.gallery? accentColor : textColor
iconName: "image-frames"
onClicked: galleryViewClicked()
hoverEnabled: true
hoverEnabled: !isMobile
ToolTip.delay: 1000
ToolTip.timeout: 5000
ToolTip.visible: hovered
ToolTip.text: qsTr("Gallery")
}
}
Item
{
Layout.fillWidth: true
Layout.fillHeight: true
ToolButton
PixButton
{
id: foldersView
anchors.centerIn: parent
Icon
{
id: foldersIcon
text: MdiFont.Icon.folderMultipleImage
color: currentIndex === 2? accentColor : textColor
iconSize: size
}
iconColor: currentIndex === views.folders? accentColor : textColor
iconName: "image-folder-view"
onClicked: foldersViewClicked()
hoverEnabled: true
hoverEnabled: !isMobile
ToolTip.delay: 1000
ToolTip.timeout: 5000
ToolTip.visible: hovered
ToolTip.text: qsTr("Tags")
ToolTip.text: qsTr("Folders")
}
}
Item
{
Layout.fillWidth: true
Layout.fillHeight: true
ToolButton
PixButton
{
id: albumsView
Icon
{
id: albumsIcon
text: MdiFont.Icon.imageMultiple
color: currentIndex === 3? accentColor : textColor
iconSize: size
anchors.centerIn: parent
}
iconColor: currentIndex === views.albums? accentColor : textColor
iconName: "image-multiple"
onClicked: albumsViewClicked()
hoverEnabled: true
hoverEnabled: !isMobile
ToolTip.delay: 1000
ToolTip.timeout: 5000
ToolTip.visible: hovered
ToolTip.text: qsTr("Albums")
}
}
Item
{
Layout.fillWidth: true
Layout.fillHeight: true
ToolButton
PixButton
{
id: tagsView
anchors.centerIn: parent
Icon
{
id: tagsIcon
text: MdiFont.Icon.tag
color: currentIndex === 4? accentColor : textColor
iconSize: size
}
iconColor: currentIndex === views.tags? accentColor : textColor
iconName: "tag"
onClicked: tagsViewClicked()
hoverEnabled: true
hoverEnabled: !isMobile
ToolTip.delay: 1000
ToolTip.timeout: 5000
ToolTip.visible: hovered
ToolTip.text: qsTr("Tags")
}
}
Item { Layout.fillWidth: true }
Row
Item
{
Layout.alignment: Qt.AlignRight
Layout.fillWidth: true
Layout.fillHeight: true
ToolButton
{
id: settingsView
Icon
{
id: settingsIcon
text: MdiFont.Icon.dotsVertical
color: currentIndex === 5? accentColor : textColor
iconSize: size
PixButton
{
id: searchView
anchors.centerIn: parent
}
iconColor: currentIndex === views.search? accentColor : textColor
onClicked: settingsViewClicked()
iconName: "edit-find"
onClicked: searchViewClicked()
hoverEnabled: true
hoverEnabled: !isMobile
ToolTip.delay: 1000
ToolTip.timeout: 5000
ToolTip.visible: hovered
ToolTip.text: qsTr("Settings")
ToolTip.text: qsTr("Search")
}
}
}
}
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