UI is more inline with Sailfish design style

This commit is contained in:
mkiol 2015-04-12 17:15:21 +02:00
parent 1a7ee7a8ea
commit 9e44c94de8
7 changed files with 84 additions and 32 deletions

Binary file not shown.

View file

@ -25,7 +25,7 @@ Item {
property bool open: false
property bool openable: true
property int showTime: 6000
property int showTime: 7000
property real barShowMoveWidth: 20
property real barShowMoveWidthBack: height
@ -96,8 +96,11 @@ Item {
icon.source: "image://icons/vm0?"+Theme.highlightDimmerColor
highlighted: settings.viewMode==0
onClicked: {
settings.viewMode = 0;
show();
if (!app.progress && settings.viewMode!=0) {
app.progress = true;
settings.viewMode = 0;
}
}
}
@ -108,8 +111,11 @@ Item {
icon.source: "image://icons/vm1?"+Theme.highlightDimmerColor
highlighted: settings.viewMode==1
onClicked: {
settings.viewMode = 1;
show();
if (!app.progress && settings.viewMode!=1) {
app.progress = true;
settings.viewMode = 1;
}
}
}
@ -120,8 +126,11 @@ Item {
icon.source: "image://icons/vm3?"+Theme.highlightDimmerColor
highlighted: settings.viewMode==3
onClicked: {
settings.viewMode = 3;
show();
if (!app.progress && settings.viewMode!=3) {
app.progress = true;
settings.viewMode = 3;
}
}
}
@ -132,8 +141,11 @@ Item {
icon.source: "image://icons/vm4?"+Theme.highlightDimmerColor
highlighted: settings.viewMode==4
onClicked: {
settings.viewMode = 4;
show();
if (!app.progress && settings.viewMode!=4) {
app.progress = true;
settings.viewMode = 4;
}
}
}
@ -144,8 +156,11 @@ Item {
icon.source: "image://icons/vm5?"+(root.transparent ? Theme.primaryColor : Theme.highlightDimmerColor)
highlighted: settings.viewMode==5
onClicked: {
settings.viewMode = 5;
show();
if (!app.progress && settings.viewMode!=5) {
app.progress = true;
settings.viewMode = 5;
}
}
}

View file

@ -68,7 +68,7 @@ ListItem {
}
Rectangle {
anchors.top: parent.top; anchors.left: parent.left
anchors.top: parent.top; anchors.right: parent.right
width: Theme.paddingSmall; height: titleLabel.height
visible: root.fresh
radius: 10
@ -140,7 +140,7 @@ ListItem {
Item {
id: titleItem
anchors.left: parent.left; anchors.right: parent.right;
anchors.leftMargin: Theme.paddingLarge
//anchors.leftMargin: Theme.paddingLarge
anchors.rightMargin: star.width+Theme.paddingMedium
height: Math.max(titleLabel.height, icon.height)
@ -149,7 +149,8 @@ ListItem {
Label {
id: titleLabel
anchors.right: parent.right; anchors.left: icon.right;
anchors.leftMargin: icon.visible ? Theme.paddingMedium : 0
//anchors.leftMargin: icon.visible ? Theme.paddingMedium : 0
anchors.leftMargin: icon.visible ? Theme.paddingMedium : Theme.paddingLarge
font.pixelSize: Theme.fontSizeMedium
font.family: Theme.fontFamilyHeading
font.bold: !root.read || root.readlater
@ -171,9 +172,15 @@ ListItem {
// Feed Icon
Rectangle {
anchors.fill: icon
color: Theme.secondaryColor
opacity: 0.3
}
Image {
id: icon
width: visible ? Theme.iconSizeSmall: 0
width: visible ? 1.2*Theme.iconSizeSmall: 0
height: width
anchors.left: parent.left;
anchors.top: titleLabel.top; anchors.topMargin: Theme.paddingSmall
@ -202,23 +209,25 @@ ListItem {
Image {
id: entryImage
anchors.left: parent.left;
anchors.leftMargin: sourceSize.width>=root.width ? 0 : Theme.paddingLarge;
fillMode: Image.PreserveAspectFit
width: sourceSize.width>=root.width ? root.width : sourceSize.width-2*Theme.paddingLarge
enabled: source!="" && status==Image.Ready && settings.showTabIcons && sourceSize.width > 2*Theme.paddingLarge
width: sourceSize.width>=root.width ? root.width : sourceSize.width
enabled: source!="" && status==Image.Ready &&
settings.showTabIcons &&
sourceSize.width > Theme.iconSizeMedium &&
sourceSize.height > Theme.iconSizeMedium
visible: opacity>0
opacity: enabled ? 1.0 : 0.0
Behavior on opacity { FadeAnimation {} }
source: {
if (settings.showTabIcons && image!="")
return settings.offlineMode ? getUrlbyUrl(image) : dm.online ? image : getUrlbyUrl(image);
else
if (settings.showTabIcons && root.image!="") {
return settings.offlineMode ? getUrlbyUrl(root.image) : dm.online ? root.image : getUrlbyUrl(root.image);
} else {
return "";
}
}
}
Label {
id: contentLabel
anchors.left: parent.left; anchors.right: parent.right;

View file

@ -82,10 +82,10 @@ Page {
id: listItem
contentHeight: item.height + 2 * Theme.paddingMedium
contentHeight: Math.max(item.height, image.height) + 2 * Theme.paddingMedium
Rectangle {
anchors.top: parent.top; anchors.left: parent.left
anchors.top: parent.top; anchors.right: parent.right
width: Theme.paddingSmall; height: item.height
visible: model.fresh
radius: 10
@ -104,6 +104,7 @@ Page {
anchors.right: unreadbox.visible ? unreadbox.left : parent.right
Label {
id: itemLabel
wrapMode: Text.AlignLeft
anchors.left: parent.left; anchors.right: parent.right;
anchors.leftMargin: Theme.paddingLarge; anchors.rightMargin: Theme.paddingLarge
@ -118,7 +119,7 @@ Page {
Rectangle {
id: unreadbox
anchors.right: parent.right; anchors.rightMargin: Theme.paddingLarge
anchors.verticalCenter: parent.verticalCenter
y: Theme.paddingSmall
width: unreadlabel.width + 2 * Theme.paddingSmall
height: unreadlabel.height + 2 * Theme.paddingSmall
color: Theme.rgba(Theme.highlightBackgroundColor, 0.2)
@ -135,13 +136,19 @@ Page {
}
Rectangle {
anchors.fill: image
color: Theme.secondaryColor
opacity: 0.1
}
Image {
id: image
width: visible ? Theme.iconSizeSmall : 0
width: visible ? 1.2*Theme.iconSizeSmall : 0
height: width
anchors.left: parent.left; anchors.leftMargin: Theme.paddingLarge
anchors.top: item.top; anchors.topMargin: Theme.paddingSmall
anchors.left: parent.left; //anchors.leftMargin: Theme.paddingLarge
visible: status!=Image.Error && status!=Image.Null
y: Theme.paddingMedium
}
Connections {

View file

@ -84,10 +84,11 @@ Page {
id: listItem
anchors.top: parent.top
contentHeight: item.height + 2 * Theme.paddingMedium;
contentHeight: Math.max(item.height, image.height) + 2 * Theme.paddingMedium;
Rectangle {
anchors.top: parent.top; anchors.left: parent.left
//anchors.top: parent.top; anchors.left: parent.left
anchors.top: parent.top; anchors.right: parent.right
width: Theme.paddingSmall; height: item.height
visible: model.fresh
radius: 10
@ -121,7 +122,7 @@ Page {
Rectangle {
id: unreadbox
anchors.right: parent.right; anchors.rightMargin: Theme.paddingLarge
anchors.verticalCenter: parent.verticalCenter
y: Theme.paddingSmall
width: unreadlabel.width + 3 * Theme.paddingSmall
height: unreadlabel.height + 2 * Theme.paddingSmall
color: Theme.rgba(Theme.highlightBackgroundColor, 0.2)
@ -136,13 +137,19 @@ Page {
}
}
Rectangle {
anchors.fill: image
color: Theme.secondaryColor
opacity: 0.1
}
Image {
id: image
width: visible ? Theme.iconSizeSmall : 0
width: visible ? 1.2*Theme.iconSizeSmall : 0
height: width
anchors.left: parent.left; anchors.leftMargin: Theme.paddingLarge
anchors.top: item.top; anchors.topMargin: Theme.paddingSmall
anchors.left: parent.left; //anchors.leftMargin: Theme.paddingLarge
visible: status!=Image.Error && status!=Image.Null
y: Theme.paddingMedium
}
Connections {

View file

@ -23,6 +23,8 @@ import Sailfish.Silica 1.0
ApplicationWindow {
id: app
property bool progress: false
cover: CoverPage {}
Component.onCompleted: {
@ -37,6 +39,8 @@ ApplicationWindow {
}
utils.setRootModel();
pageStack.busyChanged.connect(resetViewDone);
switch (settings.viewMode) {
case 0:
case 1:
@ -53,6 +57,13 @@ ApplicationWindow {
}
}
function resetViewDone() {
if (!pageStack.busy) {
pageStack.busyChanged.disconnect(resetViewDone);
app.progress = false;
}
}
Connections {
target: settings

View file

@ -14,7 +14,7 @@ Name: harbour-kaktus
%{?qtc_builddir:%define _builddir %qtc_builddir}
Summary: Kaktus
Version: 1.3
Release: 3
Release: 4
Group: Qt/Qt
License: LICENSE
URL: https://github.com/mkiol/kaktus
@ -75,8 +75,11 @@ desktop-file-install --delete-original \
# << files
%changelog
* Wed Apr 08 2015 Michal Kosciesza 1.3-4
- BUG FIX: Segfault when view mode changing
- UI enhancements: UI is more inline with Sailfish design style
* Wed Apr 08 2015 Michal Kosciesza 1.3-2
* Wed Apr 08 2015 Michal Kosciesza 1.3-3
- BUG FIX: Wrong padding on entry list, if image size is very tiny
* Tue Apr 07 2015 Michal Kosciesza 1.3-2