Commit 6bc561c7 authored by camilo higuita's avatar camilo higuita

initial work on the viewer tag bar and tags dialog #16 #19

parent 22d909f0
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE QtCreatorProject>
<!-- Written by QtCreator 4.4.1, 2018-03-28T01:01:06. -->
<!-- Written by QtCreator 4.4.1, 2018-03-31T15:14:34. -->
<qtcreator>
<data>
<variable>EnvironmentId</variable>
......
......@@ -5,5 +5,7 @@
<file>assets/face-sleeping.png</file>
<file>assets/face-hug.png</file>
<file>assets/pix.png</file>
<file>assets/tag.png</file>
<file>assets/tag.svg</file>
</qresource>
</RCC>
assets/tag.png

321 Bytes

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="32.000805"
height="10.000002"
viewBox="0 0 32.000805 10.000002"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="tag.svg">
<defs
id="defs3051">
<style
type="text/css"
id="current-color-scheme">
.ColorScheme-Text {
color:#4d4d4d;
}
</style>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="9.6022728"
inkscape:cx="-12.691433"
inkscape:cy="-9.2461746"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:showpageshadow="false"
borderlayer="true"
showguides="false"
inkscape:guide-bbox="true"
inkscape:window-width="1920"
inkscape:window-height="1016"
inkscape:window-x="0"
inkscape:window-y="34"
inkscape:window-maximized="1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0">
<inkscape:grid
type="xygrid"
id="grid4136"
empspacing="2"
originx="-1.999195"
originy="-5.9999982" />
<sodipodi:guide
position="-1.999195,14.000002"
orientation="0,1"
id="guide4140"
inkscape:label="Icon Max Height"
inkscape:color="rgb(233,30,99)"
inkscape:locked="false" />
<sodipodi:guide
position="-1.999195,-3.9999982"
orientation="0,1"
id="guide4142"
inkscape:label="Icon Baseline"
inkscape:color="rgb(233,30,99)"
inkscape:locked="false" />
<sodipodi:guide
position="9.000805,-5.9999982"
orientation="1,0"
id="guide4144"
inkscape:label="Center Vertical"
inkscape:color="rgb(221,44,0)"
inkscape:locked="false" />
<sodipodi:guide
position="13.000805,5.0000019"
orientation="0,1"
id="guide4146"
inkscape:label="Center Horizontal"
inkscape:color="rgb(221,44,0)"
inkscape:locked="false" />
</sodipodi:namedview>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Capa 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-1.999195,-1036.3622)">
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.27900002;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 6.0003906,6 C 5.6852934,5.9998619 5.3885573,6.1482299 5.1996094,6.4003906 l -3,4.0000004 c -0.2672192,0.355805 -0.2672192,0.845366 0,1.201171 l 3,4 C 5.3889656,15.852987 5.6856368,16.000599 6.0003906,16 l 2,0 L 32,16 c 1.10801,0 2,-0.89199 2,-2 L 34,8 C 34,6.8919904 33.10801,6 32,6 L 8.0003906,6 Z m -1,4 c 0.5522847,0 1,0.447715 1,1 0,0.552285 -0.4477153,1 -1,1 -0.5522847,0 -1,-0.447715 -1,-1 0,-0.552285 0.4477153,-1 1,-1 z"
id="path841"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccssssccsssss"
transform="translate(0,1030.3622)"
inkscape:export-filename="/home/camilo/Coding/qml/pix-qml/assets/tag.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
</g>
</svg>
var Query = {
allPics : "select * from images order by strftime(\"%s\", addDate) desc",
picLikeUrl_ : "select * from images where url like \"%1%\" "
picLikeUrl_ : "select * from images where url like \"%1%\" ",
picTags_ : "select * from images_tags where url = \"%1\"",
allTags : "select * from tags"
}
......@@ -121,6 +121,26 @@ bool DBActions::isFav(const QString &url)
return data.first()[PIX::KEY::FAV] == "1" ? true : false;
}
bool DBActions::picTag(const QString &tag, const QString &url)
{
QVariantMap tagMap
{
{PIX::KEYMAP[PIX::KEY::TAG], tag}
};
if(this->insert(PIX::TABLEMAP[PIX::TABLE::TAGS], tagMap))
{
QVariantMap taggedPic
{
{PIX::KEYMAP[PIX::KEY::URL], url},
{PIX::KEYMAP[PIX::KEY::TAG], tag}
};
return this->insert(PIX::TABLEMAP[PIX::TABLE::IMAGES_TAGS], taggedPic);
}
return false;
}
QVariantList DBActions::getFolders()
{
QVariantList res;
......@@ -132,7 +152,7 @@ QVariantList DBActions::getFolders()
map.insert(PIX::KEYMAP[PIX::KEY::URL], i[PIX::KEY::URL]);
map.insert("folder", QFileInfo(i[PIX::KEY::URL]).baseName());
res << map;
}
}
return res;
}
......@@ -21,6 +21,9 @@ class DBActions : public DB
Q_INVOKABLE bool favPic(const QString &url, const bool &fav);
Q_INVOKABLE bool isFav(const QString &url);
Q_INVOKABLE bool picTag(const QString &tag, const QString &url);
/* utils */
Q_INVOKABLE QVariantList getFolders();
Q_INVOKABLE QVariantList get(const QString &queryTxt);
......
......@@ -86,6 +86,9 @@ Kirigami.ApplicationWindow
onSearchViewClicked: {}
}
footer: PixFooter
{
}
SwipeView
{
......
......@@ -30,5 +30,12 @@
<file>widgets/dialogs/share/ShareGrid.qml</file>
<file>widgets/dialogs/share/ShareDelegate.qml</file>
<file>widgets/views/Pix.js</file>
<file>widgets/PixFooter.qml</file>
<file>widgets/custom/TagBar/TagBar.qml</file>
<file>widgets/custom/TagBar/TagDelegate.qml</file>
<file>widgets/custom/TagBar/TagList.qml</file>
<file>widgets/dialogs/Tags/TagsDialog.qml</file>
<file>widgets/dialogs/Tags/TagsList.qml</file>
<file>view_models/PixDelegate.qml</file>
</qresource>
</RCC>
import QtQuick 2.9
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.2
import org.kde.kirigami 2.2 as Kirigami
ItemDelegate
{
width: parent.width
height: 22
property bool isSection : false
property bool boldLabel : false
property alias label: labelTxt.text
property string labelColor: ListView.isCurrentItem ? highlightedTextColor : textColor
Rectangle
{
anchors.fill: parent
color: isSection ? viewBackgroundColor : (index % 2 === 0 ? Qt.darker(backgroundColor) : "transparent")
opacity: 0.1
}
ColumnLayout
{
anchors.fill: parent
Label
{
id: labelTxt
Layout.margins: contentMargins
anchors.verticalCenter: parent.verticalCenter
width: parent.width
height: parent.height
horizontalAlignment: Qt.AlignLeft
verticalAlignment: Qt.AlignVCenter
text: labelTxt.text
elide: Text.ElideRight
color: labelColor
font.pointSize: fontSizes.medium
font.bold: boldLabel
font.weight : boldLabel ? Font.Bold : Font.Normal
}
}
}
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ItemDelegate
{
height: picSize
width: picSize
{
property int picSize : 150
property int picRadius : 2
Image
{
id: img
anchors.centerIn: parent
height: picSize-contentMargins
width: picSize-contentMargins
sourceSize.height: picSize-contentMargins
sourceSize.width: picSize-contentMargins
cache: true
antialiasing: true
fillMode: Image.PreserveAspectCrop
source: (url && url.length>0)? "file://"+encodeURIComponent(url) : "qrc:/../assets/face.png"
asynchronous: true
height: picSize
width: picSize
background: Rectangle
{
color: "transparent"
}
ColumnLayout
{
anchors.fill: parent
Image
{
Layout.fillHeight: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
sourceSize.height: picSize-contentMargins
sourceSize.width: picSize-contentMargins
cache: true
antialiasing: true
fillMode: Image.PreserveAspectCrop
source: (url && url.length>0)?
"file://"+encodeURIComponent(url) :
"qrc:/../assets/face.png"
asynchronous: true
}
Label
{
text: title
width: parent.width
Layout.fillWidth: true
horizontalAlignment: Qt.AlignHCenter
elide: Qt.ElideRight
font.pointSize: fontSizes.default
}
}
}
import QtQuick 2.0
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import "../view_models"
import "../widgets/views/Viewer/Viewer.js" as VIEWER
import "dialogs/share"
ToolBar
{
id: footerToolbar
visible: !pixViewer.holder.visible && currentView === views.viewer
position: ToolBar.Footer
ShareDialog
{
id: shareDialog
}
RowLayout
{
anchors.fill: parent
Item
{
Layout.alignment: Qt.AlignLeft
Layout.fillWidth: true
Layout.fillHeight: true
PixButton
{
anchors.centerIn: parent
iconName: "document-share"
hoverEnabled: !isMobile
ToolTip.delay: 1000
ToolTip.timeout: 5000
ToolTip.visible: hovered
ToolTip.text: qsTr("Share")
onClicked:
{
shareDialog.picUrl = pixViewer.currentPic.url
shareDialog.open()
}
}
}
Item { Layout.fillWidth: true }
Item
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.maximumWidth: iconSize*2
PixButton
{
anchors.centerIn: parent
iconName: "go-previous"
hoverEnabled: !isMobile
ToolTip.delay: 1000
ToolTip.timeout: 5000
ToolTip.visible: hovered
ToolTip.text: qsTr("Previous")
onClicked: VIEWER.previous()
}
}
Item
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.maximumWidth: iconSize*2
PixButton
{
id: favIcon
anchors.centerIn: parent
iconName: "love"
iconColor: pixViewer.currentPicFav? pix.pixColor() : textColor
hoverEnabled: !isMobile
ToolTip.delay: 1000
ToolTip.timeout: 5000
ToolTip.visible: hovered
ToolTip.text: qsTr("Fav")
onClicked: pixViewer.currentPicFav = VIEWER.fav(pixViewer.currentPic.url)
}
}
Item
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.maximumWidth: iconSize*2
PixButton
{
anchors.centerIn: parent
iconName: "go-next"
hoverEnabled: !isMobile
ToolTip.delay: 1000
ToolTip.timeout: 5000
ToolTip.visible: hovered
ToolTip.text: qsTr("Next")
onClicked: VIEWER.next()
}
}
Item { Layout.fillWidth: true }
Item
{
Layout.alignment: Qt.AlignRight
Layout.fillWidth: true
Layout.fillHeight: true
PixButton
{
anchors.centerIn: parent
iconName: "view-fullscreen"
hoverEnabled: !isMobile
ToolTip.delay: 1000
ToolTip.timeout: 5000
ToolTip.visible: hovered
ToolTip.text: qsTr("Fullscreen")
}
}
}
}
......@@ -35,6 +35,7 @@ ToolBar
Layout.alignment: Qt.AlignLeft
Layout.fillWidth: true
Layout.fillHeight: true
Layout.maximumWidth: 44
PixButton
{
......@@ -58,6 +59,7 @@ ToolBar
Layout.alignment: Qt.AlignLeft
Layout.fillWidth: true
Layout.fillHeight: true
Layout.maximumWidth: 44
PixButton
{
......@@ -80,6 +82,7 @@ ToolBar
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.maximumWidth: 44
PixButton
{
......@@ -88,7 +91,7 @@ ToolBar
iconColor: currentIndex === views.gallery? accentColor : textColor
iconName: "image-frames"
iconName: "image-multiple"
onClicked: galleryViewClicked()
hoverEnabled: !isMobile
......@@ -103,6 +106,7 @@ ToolBar
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.maximumWidth: 44
PixButton
{
......@@ -126,6 +130,7 @@ ToolBar
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.maximumWidth: 44
PixButton
{
......@@ -134,7 +139,7 @@ ToolBar
iconColor: currentIndex === views.albums? accentColor : textColor
iconName: "image-multiple"
iconName: "image-frames"
onClicked: albumsViewClicked()
hoverEnabled: !isMobile
......@@ -149,6 +154,7 @@ ToolBar
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.maximumWidth: 44
PixButton
{
......@@ -174,6 +180,7 @@ ToolBar
Layout.alignment: Qt.AlignRight
Layout.fillWidth: true
Layout.fillHeight: true
Layout.maximumWidth: 44
PixButton
......
import QtQuick 2.0
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import "../../../view_models"
import "../../dialogs/Tags"
import "../../../db/Query.js" as Q
ToolBar
{
position: ToolBar.Footer
clip : true
TagsDialog
{
id: tagsDialog
onPicTagged: tagsList.model.append({"tag": tag})
}
RowLayout
{
anchors.fill: parent
PixButton
{
Layout.alignment: Qt.AlignLeft
iconName: "list-add"
onClicked:
{
tagsDialog.picUrl = pixViewer.currentPic.url
tagsDialog.open()
}
}
TagList
{
id: tagsList
Layout.leftMargin: contentMargins
Layout.alignment: Qt.AlignCenter
Layout.fillHeight: true
Layout.fillWidth: true
}
}
function populate(url)
{
console.log("trying ot get tag for ", Q.Query.picTags_.arg(url))
tagsList.model.clear()
var tags = pix.get(Q.Query.picTags_.arg(url))
if(tags.length > 0)
for(var i in tags)
tagsList.model.append(tags[i])
}
}
import QtQuick 2.0
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import "../../../view_models"
ItemDelegate
{
clip: true
property int tagWidth: 100
property int tagHeight: 24
height: tagHeight
width: tagWidth
anchors.verticalCenter: parent.verticalCenter
background: Image
{
source: "qrc:/img/assets/tag.svg"
sourceSize.width: tagWidth
width: tagWidth
}
RowLayout
{
anchors.fill: parent
Label
{
id: tagLabel
text: tag
height: parent.height
Layout.fillWidth: true
Layout.fillHeight: true
Layout.leftMargin: contentMargins*2
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
elide: Qt.ElideRight
font.pointSize: fontSizes.small
}
PixButton
{
iconName: "window-close"
iconSize: 16
Layout.fillHeight: true
}
}
}
import QtQuick 2.0
ListView
{
orientation: ListView.Horizontal
clip: true
model: ListModel{ ListElement{tag: "test"}}
delegate: TagDelegate
{
}
}
import QtQuick 2.0
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import "../../../view_models"
import "../../../db/Query.js" as Q
PixPopup
{
padding: contentMargins*2
width: 200
property string picUrl : ""
onOpened: populate()
signal picTagged(string tag)
ColumnLayout
{
anchors.fill: parent
TagsList
{
id: tagsList
Layout.fillHeight: true
Layout.fillWidth: true
width: parent.width
height: parent.height
}
TextField
{
id: tagText
placeholderText: "New tag..."
Layout.fillWidth: true
}
Button
{
text: qsTr("Add")
Layout.alignment: Qt.AlignRight
onClicked: addTag(tagText.text, picUrl)
}
}
function addTag(tag, url)
{
if(pix.picTag(tag, url))
picTagged(tag)
close()
}
function populate()
{
tagsList.model.clear()
var tags = pix.get(Q.Query.allTags)
if(tags.length > 0)
for(var i in tags)
tagsList.model.append(tags[i])
}
}
import QtQuick 2.0
import QtQuick.Controls 2.2
import "../../../view_models"
ListView
{
id: tagListRoot
highlight: Rectangle