Skip to content

Commit

Permalink
New design for Photo Gallery row
Browse files Browse the repository at this point in the history
  • Loading branch information
iiLubos committed Dec 4, 2023
1 parent 5aa531a commit 69b685d
Show file tree
Hide file tree
Showing 9 changed files with 365 additions and 1 deletion.
4 changes: 4 additions & 0 deletions app/icons/MorePhotos.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions app/icons/icons.qrc
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,6 @@
<file>Done.svg</file>
<file>Edit.svg</file>
<file>More.svg</file>
<file>MorePhotos.svg</file>
</qresource>
</RCC>
4 changes: 3 additions & 1 deletion app/mmstyle.h
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ class MMStyle: public QObject
Q_PROPERTY( QUrl doneIcon READ doneIcon CONSTANT )
Q_PROPERTY( QUrl editIcon READ editIcon CONSTANT )
Q_PROPERTY( QUrl moreIcon READ moreIcon CONSTANT )
Q_PROPERTY( QUrl morePhotosIcon READ morePhotosIcon CONSTANT )

// Images
Q_PROPERTY( QUrl uploadImage READ uploadImage CONSTANT )
Expand All @@ -114,7 +115,7 @@ class MMStyle: public QObject
QFont t1() {return fontFactory( 18, true );}
QFont t2() {return fontFactory( 16, true );}
QFont t3() {return fontFactory( 14, true );}
QFont t4() {return fontFactory( 18, true );}
QFont t4() {return fontFactory( 12, true );}
QFont t5() {return fontFactory( 10, true );}

QFont p1() {return fontFactory( 32, false );}
Expand Down Expand Up @@ -173,6 +174,7 @@ class MMStyle: public QObject
QUrl doneIcon() {return QUrl( "qrc:/Done.svg" );}
QUrl editIcon() {return QUrl( "qrc:/Edit.svg" );}
QUrl moreIcon() {return QUrl( "qrc:/More.svg" );}
QUrl morePhotosIcon() {return QUrl( "qrc:/MorePhotos.svg" );}

QUrl uploadImage() {return QUrl( "qrc:/UploadImage.svg" );}
QUrl reachedDataLimitImage() {return QUrl( "qrc:/ReachedDataLimitImage.svg" );}
Expand Down
105 changes: 105 additions & 0 deletions app/qml/components/MMMorePhoto.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
/***************************************************************************
* *
* This program is free software; you can redistribute it and/or modify *
* it under the terms of the GNU General Public License as published by *
* the Free Software Foundation; either version 2 of the License, or *
* (at your option) any later version. *
* *
***************************************************************************/

import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects
import "."

Row {
id: control

property int hiddenPhotoCount: 0
property alias source: image.source
property int space: 0

signal clicked()

// left space
Item { width: control.space; height: 1 }

Image {
id: image

width: control.width - control.space
height: width
asynchronous: true
layer.enabled: true
layer {
effect: OpacityMask {
maskSource: Item {
width: image.width
height: width
Rectangle {
anchors.centerIn: parent
width: image.width
height: parent.height
radius: 20 * __dp
}
}
}
}

MouseArea {
anchors.fill: parent
onClicked: control.clicked()
}

Rectangle {
anchors.centerIn: parent
width: image.width
height: parent.height
radius: 20 * __dp
color: __style.transparentColor
border.color: __style.forestColor
border.width: 1 * __dp
}

Image {
id: bluredImage

anchors.fill: parent
source: image.source
asynchronous: true
layer.enabled: true

layer {
effect: FastBlur {
anchors.fill: bluredImage
source: bluredImage
radius: 32
}
}
}

Column {
anchors.centerIn: parent

Image {
source: __style.morePhotosIcon
anchors.horizontalCenter: parent.horizontalCenter
}

Text {
font: __style.t4
text: qsTr("+%1 more").arg(control.hiddenPhotoCount)
color: __style.whiteColor
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
}

onStatusChanged: {
if (status === Image.Error) {
console.error("MMMorePhoto: Error loading image");
}
}
}
}
59 changes: 59 additions & 0 deletions app/qml/components/MMPhoto.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/***************************************************************************
* *
* This program is free software; you can redistribute it and/or modify *
* it under the terms of the GNU General Public License as published by *
* the Free Software Foundation; either version 2 of the License, or *
* (at your option) any later version. *
* *
***************************************************************************/

import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects
import "."

Image {
id: control

signal clicked( var path )

height: width
source: model.modelData
asynchronous: true
layer.enabled: true
layer {
effect: OpacityMask {
maskSource: Item {
width: control.width
height: control.height
Rectangle {
anchors.centerIn: parent
width: parent.width
height: parent.height
radius: 20 * __dp
}
}
}
}

MouseArea {
anchors.fill: parent
onClicked: control.clicked(model.modelData)
}

Rectangle {
anchors.centerIn: parent
width: parent.width
height: parent.height
radius: 20 * __dp
color: __style.transparentColor
border.color: __style.forestColor
border.width: 1 * __dp
}

onStatusChanged: {
if (status === Image.Error) {
console.error("MMPhoto: Error loading image: " + model.modelData);
}
}
}
114 changes: 114 additions & 0 deletions app/qml/components/MMPhotoGallery.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
/***************************************************************************
* *
* This program is free software; you can redistribute it and/or modify *
* it under the terms of the GNU General Public License as published by *
* the Free Software Foundation; either version 2 of the License, or *
* (at your option) any later version. *
* *
***************************************************************************/

import QtQuick
import QtQuick.Controls
import "."

Item {
id: control

width: parent.width
height: column.height

required property var model
property string title
property string warningMsg
property string errorMsg
property int maxVisiblePhotos: 5 // -1 for showing all photos

signal showAll()
signal clicked( var path )

Column {
id: column

padding: 20 * __dp
spacing: 10 * __dp
width: parent.width - 40 * __dp

Item {
width: parent.width
height: 15 * __dp

Text {
text: control.title
font: __style.p6
elide: Text.ElideRight
width: column.width - showAllButton.width - 10 * __dp
color: __style.nightColor
}

Text {
id: showAllButton

text: qsTr("Show all")
anchors.right: parent.right
font: __style.t4
color: __style.forestColor

MouseArea {
anchors.fill: parent
onClicked: control.showAll()
}
}
}

ListView {
id: rowView

model: {
if(control.maxVisiblePhotos >= 0 && control.model.length > control.maxVisiblePhotos) {
return control.model.slice(0, control.maxVisiblePhotos)
}
return control.model
}
spacing: control.maxVisiblePhotos !== 0 ? 20 * __dp : 0
orientation: ListView.Horizontal
height: 120 * __dp
width: parent.width

delegate: MMPhoto {
width: rowView.height
onClicked: function(path) { control.clicked(path) }
}

footer: MMMorePhoto {
hiddenPhotoCount: control.model.length - control.maxVisiblePhotos
visible: control.maxVisiblePhotos >= 0 && control.model.length > control.maxVisiblePhotos
source: visible ? model[control.maxVisiblePhotos] : ""
width: visible ? rowView.height + rowView.spacing: 0
space: visible ? rowView.spacing : 0
onClicked: control.showAll()
}
}

Row {
id: msgRow

spacing: 4 * __dp

MMIcon {
id: msgIcon

source: visible ? __style.errorIcon : ""
color: errorMsg.length > 0 ? __style.negativeColor : __style.warningColor
visible: errorMsg.length > 0 || warningMsg.length > 0
}

Text {
text: errorMsg.length > 0 ? errorMsg : warningMsg
font: __style.t4
wrapMode: Text.WordWrap
width: column.width - msgRow.spacing - msgIcon.width
visible: errorMsg.length > 0 || warningMsg.length > 0
}
}
}
}
4 changes: 4 additions & 0 deletions gallery/qml.qrc
Original file line number Diff line number Diff line change
Expand Up @@ -38,5 +38,9 @@
<file>../app/qml/components/MMMenuDrawer.qml</file>
<file>../app/qml/components/MMToolbarMenuButton.qml</file>
<file>../app/qml/components/MMToolbarLongButton.qml</file>
<file>../app/qml/components/MMMorePhoto.qml</file>
<file>../app/qml/components/MMPhoto.qml</file>
<file>../app/qml/components/MMPhotoGallery.qml</file>
<file>qml/pages/PhotosPage.qml</file>
</qresource>
</RCC>
4 changes: 4 additions & 0 deletions gallery/qml/Main.qml
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,10 @@ ApplicationWindow {
title: "Drawers"
source: "DrawerPage.qml"
}
ListElement {
title: "Photos"
source: "PhotosPage.qml"
}
ListElement {
title: "Map"
source: "MapPage.qml"
Expand Down
Loading

1 comment on commit 69b685d

@inputapp-bot
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

iOS - version 23.12.492511 just submitted!

Please sign in to comment.