diff --git a/src/qml/AlbumDelegate.qml b/src/qml/AlbumDelegate.qml index 0b9a35c..75eec59 100644 --- a/src/qml/AlbumDelegate.qml +++ b/src/qml/AlbumDelegate.qml @@ -1,137 +1,138 @@ /* * Copyright (C) 2017 Atul Sharma * * This library is free software; you can redistribute it and/or * modify it under the terms of the GNU Lesser General Public * License as published by the Free Software Foundation; either * version 2.1 of the License, or (at your option) version 3, or any * later version accepted by the membership of KDE e.V. (or its * successor approved by the membership of KDE e.V.), which shall * act as a proxy defined in Section 6 of version 3 of the license. * * This library is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public * License along with this library. If not, see . * */ import QtQuick 2.7 import QtQuick.Controls 2.1 as Controls import org.kde.kquickcontrolsaddons 2.0 as KQA import org.kde.kirigami 2.1 as Kirigami import org.kde.koko 0.1 as Koko Item { id: albumDelegate width: gridView.cellWidth height: gridView.cellHeight signal clicked(var mouse) signal pressAndHold(var mouse) signal activated property alias containsMouse: albumThumbnailMouseArea.containsMouse + property QtObject modelData Rectangle { anchors { fill: image margins: -1 } radius: 2 color: Kirigami.Theme.textColor opacity: 0.2 - visible: model.itemType != Koko.Types.Folder + visible: modelData.itemType != Koko.Types.Folder } KQA.QImageItem { id: image anchors.centerIn: parent width: kokoConfig.iconSize height: width smooth: true - image: model.thumbnail + image: modelData.thumbnail fillMode: KQA.QImageItem.PreserveAspectCrop } Rectangle { anchors { top: image.top left: image.left right: image.right } visible: textLabel.visible width: image.width height: textLabel.contentHeight + (Kirigami.Units.smallSpacing * 2) color: Kirigami.Theme.viewBackgroundColor opacity: 0.8 } Controls.Label { id: textLabel anchors { left: image.left right: image.right top: image.top bottom: countRect.visible ? countRect.top : image.bottom } - visible: model.itemType == Koko.Types.Folder || model.itemType == Koko.Types.Album + visible: modelData.itemType == Koko.Types.Folder || modelData.itemType == Koko.Types.Album verticalAlignment: Text.AlignTop padding: Kirigami.Units.smallSpacing elide: Text.ElideRight maximumLineCount: 4 wrapMode: Text.WordWrap color: Kirigami.Theme.textColor - text: model.display + text: modelData.display } Rectangle { id: countRect anchors { bottom: image.bottom left: image.left right: image.right } - visible: model.fileCount && model.itemType == Koko.Types.Folder || model.itemType == Koko.Types.Album + visible: modelData.fileCount && modelData.itemType == Koko.Types.Folder || modelData.itemType == Koko.Types.Album height: countLabel.contentHeight + (Kirigami.Units.smallSpacing * 2) color: Kirigami.Theme.viewBackgroundColor opacity: 0.8 Controls.Label { id: countLabel padding: Kirigami.Units.smallSpacing elide: Text.ElideRight maximumLineCount: 4 wrapMode: Text.WordWrap color: Kirigami.Theme.textColor - text: i18np("1 Image", "%1 Images", model.fileCount) + text: i18np("1 Image", "%1 Images", modelData.fileCount) } } SelectionDelegateHighlight { id: selectionHighlight - visible: model.selected + visible: modelData.selected } MouseArea { id: albumThumbnailMouseArea anchors.fill: parent hoverEnabled: true onPressAndHold: albumDelegate.pressAndHold(mouse) onClicked: albumDelegate.clicked(mouse) } Keys.onPressed: { switch (event.key) { case Qt.Key_Enter: case Qt.Key_Return: case Qt.Key_Space: activated(); break; default: break; } } } diff --git a/src/qml/AlbumView.qml b/src/qml/AlbumView.qml index 80f098f..6bd712d 100644 --- a/src/qml/AlbumView.qml +++ b/src/qml/AlbumView.qml @@ -1,227 +1,228 @@ /* * Copyright (C) 2017 Atul Sharma * * This library is free software; you can redistribute it and/or * modify it under the terms of the GNU Lesser General Public * License as published by the Free Software Foundation; either * version 2.1 of the License, or (at your option) version 3, or any * later version accepted by the membership of KDE e.V. (or its * successor approved by the membership of KDE e.V.), which shall * act as a proxy defined in Section 6 of version 3 of the license. * * This library is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public * License along with this library. If not, see . * */ import QtQuick 2.7 import QtQuick.Controls 2.1 as Controls import org.kde.kirigami 2.1 as Kirigami import org.kde.koko 0.1 as Koko Kirigami.ScrollablePage { id: page property alias model: gridView.model signal collectionSelected(QtObject selectedModel, string cover) signal imageSelected(int currentIndex) signal folderSelected(QtObject selectedModel, string cover) keyboardNavigationEnabled: true focus: true states: [ State { name: "browsing" when: !model.hasSelectedImages }, State { name: "selecting" when: model.hasSelectedImages && Kirigami.Settings.tabletMode } ] actions { main: Kirigami.Action { iconName: "edit-select-none" text: i18n("Deselect All") tooltip: i18n("De-selects all the selected images") enabled: model.hasSelectedImages visible: model.hasSelectedImages && Kirigami.Settings.tabletMode onTriggered: model.clearSelections() } contextualActions: [ Kirigami.Action { iconName: "edit-select-all" text: i18n("Select All") tooltip: i18n("Selects all the images in the current view") enabled: model.containImages onTriggered: model.selectAll() }, Kirigami.Action { iconName: "edit-select-none" text: i18n("Deselect All") tooltip: i18n("De-selects all the selected images") enabled: model.hasSelectedImages onTriggered: model.clearSelections() }, Kirigami.Action { iconName: "emblem-shared-symbolic" text: i18n("Share") tooltip: i18n("Share the selected images") enabled: model.hasSelectedImages onTriggered: { shareMenu.open(); shareMenu.inputData = { "urls": model.selectedImages(), "mimeType": "image/" } } }, Kirigami.Action { iconName: "group-delete" text: i18n("Delete Selection") tooltip: i18n("Move selected items to trash") enabled: model.hasSelectedImages onTriggered: model.deleteSelection() } ] } background: Rectangle { color: Kirigami.Theme.viewBackgroundColor } Keys.onPressed: { switch (event.key) { case Qt.Key_Escape: gridView.model.clearSelections() break; default: break; } } ShareDialog { id: shareMenu inputData: { "urls": [], "mimeType": ["image/"] } onFinished: { if (error==0 && output.url !== "") { console.assert(output.url !== undefined); var resultUrl = output.url; console.log("Received", resultUrl) notificationManager.showNotification( true, resultUrl); clipboard.content = resultUrl; } else { notificationManager.showNotification( false); } } } GridView { id: gridView //FIXME: right now if those two objects are out of this, the whole page breaks Koko.SortModel { id: sortedListModel } Koko.ImageFolderModel { id: imageFolderModel } keyNavigationEnabled: true property real widthToApproximate: (applicationWindow().wideScreen ? applicationWindow().pageStack.defaultColumnWidth : page.width) - (1||Kirigami.Settings.tabletMode ? Kirigami.Units.gridUnit : 0) cellWidth: Math.floor(width/Math.floor(width/(kokoConfig.iconSize + Kirigami.Units.largeSpacing * 2))) cellHeight: kokoConfig.iconSize + Kirigami.Units.largeSpacing * 2 highlightMoveDuration: 0 highlight: Item { Rectangle { anchors.centerIn: parent width: Math.min(parent.width, parent.height) height: width color: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.3) border.color: Kirigami.Theme.highlightColor radius: 2 } } delegate: AlbumDelegate { id: delegate + modelData: model onClicked: { if (page.state == "selecting" || (mouse.modifiers & Qt.ControlModifier ) && (model.itemType == Koko.Types.Image)) { gridView.model.toggleSelected(model.index) } else { activated(); } } onPressAndHold: { gridView.model.toggleSelected(model.index) } onActivated: { gridView.model.clearSelections() gridView.currentIndex = model.index; switch( model.itemType) { case Koko.Types.Album: { imageListModel.query = imageListModel.queryForIndex( model.sourceIndex) sortedListModel.sourceModel = imageListModel collectionSelected( sortedListModel, model.display) break; } case Koko.Types.Folder: { imageFolderModel.url = model.imageurl sortedListModel.sourceModel = imageFolderModel folderSelected( sortedListModel, model.display) break; } case Koko.Types.Image: { imageSelected( model.sourceIndex) break; } default: { console.log("Unknown") break; } } } SelectionButton { id: selectionButton opacity: ( delegate.containsMouse || page.state == "selecting") && !(model.itemType == Koko.Types.Folder || model.itemType == Koko.Types.Album) Behavior on opacity { OpacityAnimator { duration: Kirigami.Units.longDuration easing.type: Easing.InOutQuad } } } } Controls.Label { anchors.centerIn: parent text: i18n("No Images Found") visible: gridView.count == 0 font.pixelSize: Kirigami.Units.gridUnit * 1 } } onCollectionSelected: pageStack.push( Qt.resolvedUrl("AlbumView.qml"), { "model": selectedModel, "title": i18n(cover)}) onFolderSelected: pageStack.push( Qt.resolvedUrl("AlbumView.qml"), { "model": selectedModel, "title": i18n(cover)}) onImageSelected: { currentImage.model = model.sourceModel currentImage.index = currentIndex applicationWindow().pageStack.layers.push(imageViewerComponent); } } diff --git a/src/qml/ImageViewer.qml b/src/qml/ImageViewer.qml index b4c09ab..6242f82 100644 --- a/src/qml/ImageViewer.qml +++ b/src/qml/ImageViewer.qml @@ -1,378 +1,379 @@ /* * Copyright (C) 2017 Marco Martin * Copyright (C) 2017 Atul Sharma * Copyright (C) 2015 Vishesh Handa * * This library is free software; you can redistribute it and/or * modify it under the terms of the GNU Lesser General Public * License as published by the Free Software Foundation; either * version 2.1 of the License, or (at your option) version 3, or any * later version accepted by the membership of KDE e.V. (or its * successor approved by the membership of KDE e.V.), which shall * act as a proxy defined in Section 6 of version 3 of the license. * * This library is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public * License along with this library. If not, see . * */ import QtQuick 2.12 import QtQuick.Window 2.2 import QtQuick.Controls 2.0 as Controls import QtGraphicalEffects 1.0 as Effects import QtQuick.Layouts 1.3 import org.kde.kirigami 2.5 as Kirigami import org.kde.koko 0.1 as Koko import org.kde.kquickcontrolsaddons 2.0 as KQA Kirigami.Page { id: root title: listView.currentItem.display property alias sourceModel: imagesListModel.sourceModel property int indexValue property int imageWidth property int imageHeight leftPadding: 0 rightPadding: 0 KQA.MimeDatabase { id: mimeDB } Kirigami.ContextDrawer { id: contextDrawer title: i18n("Edit image") handleVisible: true } actions { main: Kirigami.Action { id: shareAction iconName: "document-share" tooltip: i18n("Share Image") onTriggered: { shareDialog.open(); shareDialog.inputData = { "urls": [ listView.currentItem.currentImageSource.toString() ], "mimeType": mimeDB.mimeTypeForUrl( listView.currentItem.currentImageSource).name } } } right: Kirigami.Action { id: editingAction iconName: "edit-entry" tooltip: i18n("Edit Image") onTriggered: { applicationWindow().pageStack.layers.push(editorComponent) } } } Component.onCompleted: { applicationWindow().controlsVisible = false; listView.forceActiveFocus(); applicationWindow().header.visible = false; applicationWindow().footer.visible = false; applicationWindow().globalDrawer.visible = false; applicationWindow().globalDrawer.enabled = false; } function close() { applicationWindow().controlsVisible = true; if (applicationWindow().footer) { applicationWindow().footer.visible = true; } applicationWindow().globalDrawer.enabled = true; applicationWindow().visibility = Window.Windowed; applicationWindow().pageStack.layers.pop(); } background: Rectangle { color: "black" } Keys.onPressed: { switch(event.key) { case Qt.Key_Escape: root.close(); break; case Qt.Key_F: applicationWindow().visibility = applicationWindow().visibility == Window.FullScreen ? Window.Windowed : Window.FullScreen break; default: break; } } ShareDialog { id: shareDialog inputData: { "urls": [], "mimeType": ["image/"] } onFinished: { if (error==0 && output.url !== "") { console.assert(output.url !== undefined); var resultUrl = output.url; console.log("Received", resultUrl) notificationManager.showNotification( true, resultUrl); clipboard.content = resultUrl; } else { notificationManager.showNotification( false); } } } ListView { id: thumbnailView z: 100 anchors { left: parent.left right: parent.right bottom: parent.bottom bottomMargin: applicationWindow().controlsVisible ? 0 : -thumbnailView.height/2 Behavior on bottomMargin { NumberAnimation { duration: Kirigami.Units.longDuration easing.type: Easing.InOutQuad } } } opacity: applicationWindow().controlsVisible height: kokoConfig.iconSize orientation: Qt.Horizontal snapMode: ListView.SnapOneItem currentIndex: listView.currentIndex Behavior on opacity { OpacityAnimator { duration: Kirigami.Units.longDuration easing.type: Easing.InOutQuad } } model: Koko.SortModel { sourceModel: root.sourceModel filterRole: Koko.Roles.MimeTypeRole filterRegExp: /image\// } delegate: AlbumDelegate { width: kokoConfig.iconSize + Kirigami.Units.largeSpacing height: width onClicked: activated() onActivated: listView.currentIndex = index + modelData: model } highlightMoveDuration: 0 highlight: Item { Rectangle { anchors.centerIn: parent width: Math.min(parent.width, parent.height) height: width color: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.3) border.color: Kirigami.Theme.highlightColor radius: 2 } } } ListView { id: listView anchors.fill: parent orientation: Qt.Horizontal snapMode: ListView.SnapOneItem onMovementEnded: currentImage.index = model.sourceIndex(indexAt(contentX+1, 1)) interactive: true model: Koko.SortModel { id: imagesListModel filterRole: Koko.Roles.MimeTypeRole filterRegExp: /image\// } currentIndex: model.proxyIndex( indexValue) onCurrentIndexChanged: { currentImage.index = model.sourceIndex( currentIndex) listView.positionViewAtIndex(currentIndex, ListView.Beginning) shareDialog.close(); } delegate: Flickable { id: flick readonly property string currentImageSource: model.imageurl readonly property string display: model.display property alias image: image width: imageWidth height: imageHeight contentWidth: imageWidth contentHeight: imageHeight boundsBehavior: Flickable.StopAtBounds boundsMovement: Flickable.StopAtBounds interactive: contentWidth > width || contentHeight > height //onInteractiveChanged: listView.interactive = !interactive; clip: true z: index == listView.currentIndex ? 1000 : 0 Controls.ScrollBar.vertical: Controls.ScrollBar {} Controls.ScrollBar.horizontal: Controls.ScrollBar {} PinchArea { width: Math.max(flick.contentWidth, flick.width) height: Math.max(flick.contentHeight, flick.height) property real initialWidth property real initialHeight onPinchStarted: { initialWidth = flick.contentWidth initialHeight = flick.contentHeight } onPinchUpdated: { // adjust content pos due to drag flick.contentX += pinch.previousCenter.x - pinch.center.x flick.contentY += pinch.previousCenter.y - pinch.center.y // resize content flick.resizeContent(Math.max(imageWidth*0.7, initialWidth * pinch.scale), Math.max(imageHeight*0.7, initialHeight * pinch.scale), pinch.center) } onPinchFinished: { // Move its content within bounds. if (flick.contentWidth < root.imageWidth || flick.contentHeight < root.imageHeight) { zoomAnim.x = 0; zoomAnim.y = 0; zoomAnim.width = root.imageWidth; zoomAnim.height = root.imageHeight; zoomAnim.running = true; } else { flick.returnToBounds(); } } ParallelAnimation { id: zoomAnim property real x: 0 property real y: 0 property real width: root.imageWidth property real height: root.imageHeight NumberAnimation { target: flick property: "contentWidth" from: flick.contentWidth to: zoomAnim.width duration: Kirigami.Units.longDuration easing.type: Easing.InOutQuad } NumberAnimation { target: flick property: "contentHeight" from: flick.contentHeight to: zoomAnim.height duration: Kirigami.Units.longDuration easing.type: Easing.InOutQuad } NumberAnimation { target: flick property: "contentY" from: flick.contentY to: zoomAnim.y duration: Kirigami.Units.longDuration easing.type: Easing.InOutQuad } NumberAnimation { target: flick property: "contentX" from: flick.contentX to: zoomAnim.x duration: Kirigami.Units.longDuration easing.type: Easing.InOutQuad } } Image { id: image width: flick.contentWidth height: flick.contentHeight fillMode: Image.PreserveAspectFit source: currentImageSource autoTransform: true asynchronous: true Timer { id: doubleClickTimer interval: 150 onTriggered: applicationWindow().controlsVisible = !applicationWindow().controlsVisible } MouseArea { anchors.fill: parent onClicked: { contextDrawer.drawerOpen = false doubleClickTimer.restart(); } onDoubleClicked: { doubleClickTimer.running = false; applicationWindow().controlsVisible = false; if (flick.interactive) { zoomAnim.x = 0; zoomAnim.y = 0; zoomAnim.width = root.imageWidth; zoomAnim.height = root.imageHeight; zoomAnim.running = true; } else { zoomAnim.x = mouse.x * 2; zoomAnim.y = mouse.y *2; zoomAnim.width = root.imageWidth * 3; zoomAnim.height = root.imageHeight * 3; zoomAnim.running = true; } } onWheel: { if (wheel.modifiers & Qt.ControlModifier) { if (wheel.angleDelta.y != 0) { var factor = 1 + wheel.angleDelta.y / 600; zoomAnim.running = false; zoomAnim.width = Math.min(Math.max(root.imageWidth, zoomAnim.width * factor), root.imageWidth * 4); zoomAnim.height = Math.min(Math.max(root.imageHeight, zoomAnim.height * factor), root.imageHeight * 4); //actual factors, may be less than factor var xFactor = zoomAnim.width / flick.contentWidth; var yFactor = zoomAnim.height / flick.contentHeight; zoomAnim.x = flick.contentX * xFactor + (((wheel.x - flick.contentX) * xFactor) - (wheel.x - flick.contentX)) zoomAnim.y = flick.contentY * yFactor + (((wheel.y - flick.contentY) * yFactor) - (wheel.y - flick.contentY)) zoomAnim.running = true; } else if (wheel.pixelDelta.y != 0) { flick.resizeContent(Math.min(Math.max(root.imageWidth, flick.contentWidth + wheel.pixelDelta.y), root.imageWidth * 4), Math.min(Math.max(root.imageHeight, flick.contentHeight + wheel.pixelDelta.y), root.imageHeight * 4), wheel); } } } } } } } } Component { id: editorComponent EditorView { width: root.imageWidth height: root.imageHeight imagePath: listView.currentItem.currentImageSource } } }