Merge pull request #65 from micuintus/jmastr/v_play_add_venue_descrip…

…tion_implementation

[v-play] add venue description implementation

qml/Silica4v-play/ApplicationWindow.qml

@@ -8,6 +8,7 @@ App {
 
     id: app
 
+    property var pageStack: navigationStack
     property var initialPage
     property var cover
 

qml/Silica4v-play/DetailItem.qml

@@ -0,0 +1,19 @@
+import VPlayApps 1.0
+import BerlinVegan.components 1.0 as BVApp
+
+AppText {
+
+    property var label
+    property var leftMargin
+    property var rightMargin
+    property var value
+
+    text: label + " " + value
+
+    anchors {
+        left: parent.left
+
+        leftMargin: BVApp.Theme.horizontalPageMargin
+    }
+
+}

qml/Silica4v-play/ListItem.qml

@@ -1,7 +1,11 @@
 import VPlayApps 1.0
 
+import QtQuick 2.7
+
 SimpleRow {
 
+    id: row
+
     signal clicked(int index)
 
     property var contentWidth
@@ -28,4 +32,7 @@ SimpleRow {
     }
     */
 
+    Component.onCompleted: {
+        row.selected.connect(clicked)
+    }
 }

qml/Silica4v-play/OpacityRampEffect.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.7
+
+Item {
+
+    property var direction
+    property var offset
+    property var slope
+    property var sourceItem
+
+}

qml/Silica4v-play/SectionHeader.qml

@@ -0,0 +1,16 @@
+import VPlayApps 1.0
+import BerlinVegan.components 1.0 as BVApp
+
+AppText {
+
+    property var title
+
+    text: title
+
+    anchors {
+        right: parent.right
+
+        rightMargin: BVApp.Theme.horizontalPageMargin
+    }
+
+}

qml/Silica4v-play/Separator.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.7
+
+Rectangle {
+
+    property var horizontalAlignment
+
+}

qml/Silica4v-play/SilicaFlickable.qml

@@ -0,0 +1,5 @@
+import VPlayApps 1.0
+
+AppFlickable {
+
+}

qml/Silica4v-play/qmldir

@@ -4,13 +4,18 @@ BusyIndicator 1.0 BusyIndicator.qml
 CoverAction 1.0 CoverAction.qml
 CoverActionList 1.0 CoverActionList.qml
 CoverBackground 1.0 CoverBackground.qml
+DetailItem 1.0 DetailItem.qml
 Label 1.0 Label.qml
 ListItem 1.0 ListItem.qml
 MenuItem 1.0 MenuItem.qml
+OpacityRampEffect 1.0 OpacityRampEffect.qml
 Page 1.0 Page.qml
 PageHeader 1.0 PageHeader.qml
 PullDownMenu 1.0 PullDownMenu.qml
 SearchField 1.0 SearchField.qml
+SectionHeader 1.0 SectionHeader.qml
+Separator 1.0 Separator.qml
+SilicaFlickable 1.0 SilicaFlickable.qml
 SilicaListView 1.0 SilicaListView.qml
 singleton TruncationMode 1.0 TruncationMode.qml
 VerticalScrollDecorator 1.0 VerticalScrollDecorator.qml

qml/Silica4v-play/resources-Silica4v-play.qrc

@@ -5,14 +5,19 @@
         <file>CoverAction.qml</file>
         <file>CoverActionList.qml</file>
         <file>CoverBackground.qml</file>
+        <file>DetailItem.qml</file>
         <file>Label.qml</file>
         <file>ListItem.qml</file>
         <file>MenuItem.qml</file>
+        <file>OpacityRampEffect.qml</file>
         <file>Page.qml</file>
         <file>PageHeader.qml</file>
         <file>PullDownMenu.qml</file>
         <file>qmldir</file>
         <file>SearchField.qml</file>
+        <file>SectionHeader.qml</file>
+        <file>Separator.qml</file>
+        <file>SilicaFlickable.qml</file>
         <file>SilicaListView.qml</file>
         <file>TruncationMode.qml</file>
         <file>VerticalScrollDecorator.qml</file>

qml/components-Sailfish/IconButton.qml

@@ -0,0 +1,12 @@
+import Sailfish.Silica 1.0
+import "." as BVApp
+
+IconButton {
+
+    property string type
+    property real scale
+
+    icon.source: BVApp.Theme.iconBy(type)
+    icon.scale: scale ? scale : 1
+
+}

qml/components-Sailfish/Theme.qml

@@ -5,6 +5,25 @@ import QtQuick 2.2
 
 QtObject {
 
+    function iconBy(type) {
+        switch (type) {
+        case "answer":
+            return "image://theme/icon-l-answer?"+ (Silica.pressed
+                                                     ? Silica.Theme.highlightColor
+                                                     : Silica.Theme.primaryColor)
+        case "favorite":
+            return "image://theme/icon-m-favorite?" + (Silica.pressed
+                                                       ? Silica.Theme.highlightColor
+                                                       : Silica.Theme.primaryColor)
+        case "home":
+            return "image://theme/icon-m-home?" + (Silica.pressed
+                                                   ? Silica.Theme.highlightColor
+                                                   : Silica.Theme.primaryColor)
+        case "location":
+            return "image://theme/icon-m-location?" + Silica.Theme.highlightBackgroundColor
+        }
+    }
+
     readonly property color primaryColor: Silica.Theme.primaryColor
     readonly property color secondaryColor: Silica.Theme.secondaryColor
     readonly property color secondaryHighlightColor: Silica.Theme.secondaryHighlightColor
@@ -17,10 +36,15 @@ 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
 
     readonly property int horizontalPageMargin: Silica.Theme.horizontalPageMargin
     readonly property int busyIndicatorSizeLarge: Silica.BusyIndicatorSize.Large
+    readonly property int opacityRampDirection: Silica.OpacityRamp.TopToBottom
+    readonly property int dividerHeight: 2
 }

qml/components-Sailfish/qmldir

@@ -1,2 +1,3 @@
 module BerlinVegan.components
+IconButton 1.0 IconButton.qml
 singleton Theme 1.0 Theme.qml

qml/components-Sailfish/resources-components-Sailfish.qrc

@@ -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>

qml/components-generic/CollapsibleItem.qml

@@ -24,6 +24,7 @@
 
 import QtQuick 2.2
 import Sailfish.Silica 1.0
+import BerlinVegan.components 1.0 as BVApp
 
 Item {
     property bool collapsed: true
@@ -54,7 +55,7 @@ Item {
         anchors.fill: parent
         id: ramp
         sourceItem: contentItem
-        direction: OpacityRamp.TopToBottom
+        direction: BVApp.Theme.opacityRampDirection
         enabled: parent.collapsed
     }
 

qml/components-generic/IconToolBar.qml

@@ -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
@@ -34,8 +35,8 @@ Column {
     Separator {
         width: column.width
         horizontalAlignment: Qt.AlignCenter
-        color: Theme.secondaryHighlightColor
-        height: 2
+        color: BVApp.Theme.secondaryHighlightColor
+        height: BVApp.Theme.dividerHeight
     }
 
     RowLayout {
@@ -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
@@ -88,8 +83,8 @@ Column {
     Separator {
         width: column.width
         horizontalAlignment: Qt.AlignCenter
-        color: Theme.secondaryHighlightColor
-        height: 2
+        color: BVApp.Theme.secondaryHighlightColor
+        height: BVApp.Theme.dividerHeight
     }
 }
 

qml/components-generic/VenueDescriptionHeader.qml

@@ -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
 
 
@@ -48,6 +49,7 @@ Item {
         fillMode: Image.PreserveAspectCrop
 
         height: Math.max(parent.height - shrinkHeightBy,0)
+        width: parent.width
 
         // This eads to the effect that the image is being cropped
         // from both bottom and top by half a pixel per shrinkHeightBy
@@ -57,12 +59,14 @@ Item {
     Rectangle {
         property int xMargin: 10
         property int yMargin: 7
+        // v-play: TypeError: Cannot read property 'x' of undefined
         x: nameLabel.extraContent.x + nameLabel.extraContent.width - xMargin
         y: nameLabel.y + nameLabel.childrenRect.y - yMargin - shrinkHeightBy * 0.1
         height: nameLabel.childrenRect.height + yMargin*2
+        // v-play: TypeError: Cannot read property 'width' of undefined
         width: (nameLabel.childrenRect.width - nameLabel.extraContent.width) + xMargin*2
         radius: 5
-        color: Theme.highlightDimmerColor
+        color: BVApp.Theme.highlightDimmerColor
         opacity: 0.6
     }
 
@@ -82,7 +86,7 @@ Item {
             bottom: image.bottom
         }
 
-        color: Theme.highlightDimmerColor
+        color: BVApp.Theme.highlightDimmerColor
 
         // relative to parent opacity!
         opacity: 0.6
@@ -91,14 +95,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
@@ -110,12 +114,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

qml/components-v-play/IconButton.qml

@@ -0,0 +1,11 @@
+import VPlayApps 1.0
+import "." as BVApp
+
+IconButton {
+
+    property string type
+    property real scale
+
+    icon: BVApp.Theme.iconBy(type)
+
+}