Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[v-play] add venue description implementation #65

Merged
merged 6 commits into from Feb 19, 2017
Merged

[v-play] add venue description implementation #65

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
99e8cd0
Add BVApp.Theme where it is still missing
Feb 18, 2017
3c997f2
Add framework specific IconButton implementation
Feb 19, 2017
3387449
Add more properties to BVApp.Theme
Feb 19, 2017
bbbbc1d
[v-play] add first VenueDescription implementation
Feb 19, 2017
9132749
[v-play] enable navigation stack in v-play builds
Feb 19, 2017
4cb6ba7
Move iconBy() function into Theme.qml
Feb 19, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
30 changes: 30 additions & 0 deletions qml/components-Sailfish/IconButton.qml
View file
Open in desktop
@@ -0,0 +1,30 @@
import Sailfish.Silica 1.0
import "." as BVApp

IconButton {
function iconBy(type) {
Copy link
Owner

@micuintus micuintus Feb 19, 2017 •
edited

Choose a reason for hiding this comment

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

That IconButton abstraction is amazing, nice! I have also already thought about this a bit (when thinking about the Theme), and I head exactly something like this in mind ;). Of course, I haven't implemented it / tried it out. Very nice work!

One idea: What would you think about moving this iconBy() function to the Theme class? Maybe we could do sth. like

Theme
{
...
  function icon(type, scale)
...
}

I see the following advantages with that approach:

  1. We don't have provide a wrapper for the IconButton implementation.
  2. We can use this function outside of the IconButton use case, when we need icons with native look and feel.

Copy link
Collaborator Author

@jmastr jmastr Feb 19, 2017 •
edited

Choose a reason for hiding this comment

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

Thanks. I think it's a good idea to move it into the Themes, but shall the function then return an array with [iconString, scalingFactor] or what did you think of?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I'd suggest just to move the functions iconBy(type) into the according Themes and set the scaling factor from the outside, as it is now already.

Copy link
Owner

Choose a reason for hiding this comment

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

My idea was that it actually returns the icon type that is used on the corresponding platform: A string on v-play and a (scaled) icon on Sailfish, which both can be directly assigned to the icon object of the IconButton. But I just saw that we then need to export the pressed property as a parameter of this function, as well, right? Does v-play have sth. like this? I assume yes, and I assume it is named differently. ;)

Copy link
Collaborator Author

@jmastr jmastr Feb 19, 2017 •
edited

Choose a reason for hiding this comment

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

They have something how the icon should look like AFTER it was pressed (what we actually need for the upcoming favourites feature), but not for the pressed state itself.

I am not quite sure, what you want to achieve. So I'd suggest to move the function as it is, so it is at the right place and to postpone further improvements. I have to think about the whole VenueDetails-design anyways.

Ok?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Oh, I was wrong, I think pressed is called selected in v-play...

Copy link
Owner

@micuintus micuintus Feb 19, 2017 •
edited

Choose a reason for hiding this comment

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

OK. Lets do it scrummy-iteratively step by step. (I still steer towards removing the IconButton abtraction in a later step ;))

switch (type) {
case "answer":
return "image://theme/icon-l-answer?"+ (pressed
? BVApp.Theme.highlightColor
: BVApp.Theme.primaryColor)
case "favorite":
return "image://theme/icon-m-favorite?" + (pressed
? BVApp.Theme.highlightColor
: BVApp.Theme.primaryColor)
case "home":
return "image://theme/icon-m-home?" + (pressed
? BVApp.Theme.highlightColor
: BVApp.Theme.primaryColor)
case "location":
return "image://theme/icon-m-location?" + BVApp.Theme.highlightBackgroundColor
}
}

property string type
property real scale

icon.source: iconBy(type)
icon.scale: scale ? scale : 1

}
3 changes: 3 additions & 0 deletions qml/components-Sailfish/Theme.qml
View file
Open in desktop
Expand Up @@ -17,6 +17,9 @@ QtObject {
readonly property int fontSizeExtraSmall: Silica.Theme.fontSizeExtraSmall
readonly property int fontSizeSmall: Silica.Theme.fontSizeSmall

readonly property int iconSizeMedium : Silica.Theme.iconSizeMedium
readonly property int iconSizeLarge : Silica.Theme.iconSizeLarge

readonly property int paddingSmall: Silica.Theme.paddingSmall
readonly property int paddingMedium: Silica.Theme.paddingMedium
readonly property int paddingLarge: Silica.Theme.paddingLarge
Expand Down
1 change: 1 addition & 0 deletions qml/components-Sailfish/qmldir
View file
Open in desktop
@@ -1,2 +1,3 @@
module BerlinVegan.components
IconButton 1.0 IconButton.qml
singleton Theme 1.0 Theme.qml
1 change: 1 addition & 0 deletions qml/components-Sailfish/resources-components-Sailfish.qrc
View file
Open in desktop
@@ -1,5 +1,6 @@
<RCC>
<qresource prefix="/qt-project.org/imports/BerlinVegan/components">
<file>IconButton.qml</file>
<file>Theme.qml</file>
<file>qmldir</file>
</qresource>
Expand Down
25 changes: 10 additions & 15 deletions qml/components-generic/IconToolBar.qml
View file
Open in desktop
Expand Up @@ -25,6 +25,7 @@
import QtQuick 2.2
import QtQuick.Layouts 1.1
import Sailfish.Silica 1.0
import BerlinVegan.components 1.0 as BVApp

Column {
property var restaurant
Expand All @@ -34,7 +35,7 @@ Column {
Separator {
width: column.width
horizontalAlignment: Qt.AlignCenter
color: Theme.secondaryHighlightColor
color: BVApp.Theme.secondaryHighlightColor
height: 2
}

Expand All @@ -47,33 +48,27 @@ Column {

width: column.width

IconButton {
icon.source: "image://theme/icon-l-answer?" + (pressed
? Theme.highlightColor
: Theme.primaryColor)
icon.scale: Theme.iconSizeMedium / Theme.iconSizeLarge
BVApp.IconButton {
type: "answer"
scale: BVApp.Theme.iconSizeMedium / BVApp.Theme.iconSizeLarge

onClicked: Qt.openUrlExternally("tel:/" + restaurant.telephone)
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
enabled: typeof restaurant["telephone"] !== "undefined"
}

IconButton {
icon.source: "image://theme/icon-m-favorite?" + (pressed
? Theme.highlightColor
: Theme.primaryColor)
BVApp.IconButton {
type: "favorite"
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
enabled: false
visible: false
}


IconButton {
icon.source: "image://theme/icon-m-home?" + (pressed
? Theme.highlightColor
: Theme.primaryColor)
BVApp.IconButton {
type: "home"

onClicked: Qt.openUrlExternally(restaurant.website.slice(0,4) === "http"
? restaurant.website
Expand All @@ -88,7 +83,7 @@ Column {
Separator {
width: column.width
horizontalAlignment: Qt.AlignCenter
color: Theme.secondaryHighlightColor
color: BVApp.Theme.secondaryHighlightColor
height: 2
}
}
Expand Down
17 changes: 9 additions & 8 deletions qml/components-generic/VenueDescriptionHeader.qml
View file
Open in desktop
Expand Up @@ -26,6 +26,7 @@ import QtQuick 2.2
import Sailfish.Silica 1.0
import QtPositioning 5.2

import BerlinVegan.components 1.0 as BVApp
import "../components-generic/distance.js" as Distance


Expand Down Expand Up @@ -62,7 +63,7 @@ Item {
height: nameLabel.childrenRect.height + yMargin*2
width: (nameLabel.childrenRect.width - nameLabel.extraContent.width) + xMargin*2
radius: 5
color: Theme.highlightDimmerColor
color: BVApp.Theme.highlightDimmerColor
opacity: 0.6
}

Expand All @@ -82,7 +83,7 @@ Item {
bottom: image.bottom
}

color: Theme.highlightDimmerColor
color: BVApp.Theme.highlightDimmerColor

// relative to parent opacity!
opacity: 0.6
Expand All @@ -91,14 +92,14 @@ Item {
Label {
id: streetLabel
text: street
font.pixelSize: Theme.fontSizeExtraSmall
color: Theme.highlightColor
font.pixelSize: BVApp.Theme.fontSizeExtraSmall
color: BVApp.Theme.highlightColor
truncationMode: TruncationMode.Fade

anchors {
left: image.left
right: distanceLabel.left
margins: Theme.paddingLarge
margins: BVApp.Theme.paddingLarge
}

y: parent.height - height
Expand All @@ -110,12 +111,12 @@ Item {
? Distance.humanReadableDistanceString(positionSource.position.coordinate,
restaurantCoordinate)
: ""
font.pixelSize: Theme.fontSizeExtraSmall
color: Theme.highlightColor
font.pixelSize: BVApp.Theme.fontSizeExtraSmall
color: BVApp.Theme.highlightColor

anchors {
right: parent.right
margins: Theme.paddingLarge
margins: BVApp.Theme.paddingLarge
}

y: parent.height - height
Expand Down
23 changes: 23 additions & 0 deletions qml/components-v-play/IconButton.qml
View file
Open in desktop
@@ -0,0 +1,23 @@
import VPlayApps 1.0

IconButton {

function iconBy(type) {
switch (type) {
case "answer":
return IconType.phone
case "favorite":
return IconType.hearto
case "home":
return IconType.home
case "location":
return IconType.mapmarker
}
}

property string type
property real scale

icon: iconBy(type)

}
8 changes: 8 additions & 0 deletions qml/components-v-play/Theme.qml
View file
Open in desktop
Expand Up @@ -13,11 +13,19 @@ QtObject {

property color primaryColor: Theme.textColor
property color secondaryColor: Theme.secondaryTextColor
property color highlightDimmerColor: "white"
property color highlightColor: Theme.secondaryTextColor
property color secondaryHighlightColor: Theme.listItem.dividerColor

property int fontSizeMedium: dp(Theme.listItem.fontSizeText)
property int fontSizeExtraSmall: dp(Theme.listItem.fontSizeDetailText)

readonly property int iconSizeMedium : dp(12)
readonly property int iconSizeLarge : dp(12)

property int paddingSmall: dp(12)
property int paddingMedium: dp(12)
property int paddingLarge: dp(12)
property int horizontalPageMargin: dp(16)

readonly property int busyIndicatorSizeLarge: 0
Expand Down
1 change: 1 addition & 0 deletions qml/components-v-play/qmldir
View file
Open in desktop
@@ -1,2 +1,3 @@
module BerlinVegan.components
IconButton 1.0 IconButton.qml
singleton Theme 1.0 Theme.qml
1 change: 1 addition & 0 deletions qml/components-v-play/resources-components-v-play.qrc
View file
Open in desktop
@@ -1,5 +1,6 @@
<RCC>
<qresource prefix="/qt-project.org/imports/BerlinVegan/components">
<file>IconButton.qml</file>
<file>Theme.qml</file>
<file>qmldir</file>
</qresource>
Expand Down
6 changes: 3 additions & 3 deletions qml/pages/VenueMapPage.qml
View file
Open in desktop
Expand Up @@ -47,11 +47,11 @@ Page {
anchorPoint.x: venueMarkerImage.width / 2
anchorPoint.y: venueMarkerImage.height

sourceItem: IconButton {
sourceItem: BVApp.IconButton {
id: venueMarkerImage
icon.source: "image://theme/icon-m-location?" + BVApp.Theme.highlightBackgroundColor
type: "location"

icon.scale: 1.6
scale: 1.6

onClicked: Qt.openUrlExternally("geo:"
+ venueCoordinate.latitude + ","
Expand Down