[controls] List Item button supports a button with a label

- Create ListItemFlatButton component which take button text
  and icon name as parameter

Task-id: AUTOSUITE-437
Change-Id: I3e579146e0cf9568e058b73925fe8bd44b272cfc
Reviewed-by: Alexandra Betouni <ABetouni@luxoft.com>
Reviewed-by: Bramastyo Harimukti Santoso <bramastyo.harimukti.santoso@pelagicore.com>

5 files changed, 138 insertions, 27 deletions

diff --git a/dev/apps/com.pelagicore.sheets/components/ListItemPanel.qml b/dev/apps/com.pelagicore.sheets/components/ListItemPanel.qml
index 43241d4a..5d1c24c0 100644
--- a/dev/apps/com.pelagicore.sheets/components/ListItemPanel.qml
+++ b/dev/apps/com.pelagicore.sheets/components/ListItemPanel.qml
@@ -112,22 +112,25 @@ Item {
                 secondaryText: "Loooooooong Secondary Text"
             }
 
-            ListItem {
+            ListItemFlatButton {
                 implicitWidth: NeptuneStyle.dp(765)
                 implicitHeight: NeptuneStyle.dp(104)
-                rightPadding: NeptuneStyle.dp(16)
                 icon.name: "ic-update"
-                rightToolButtonText: "Show on map"
-                text: "ListItem with right tool text"
+                subText: "subtitle"
+                text: "ListItem with button"
+                textFlatButton: "Show on map"
+                closeButtonVisible: true
             }
 
-            ListItem {
+            ListItemFlatButton {
                 implicitWidth: NeptuneStyle.dp(765)
                 implicitHeight: NeptuneStyle.dp(104)
                 rightPadding: NeptuneStyle.dp(16)
                 icon.name: "ic-update"
-                rightToolButtonText: "Text"
-                text: "ListItem with right tool text"
+                symbolFlatButton: Style.symbol("ic-favorite")
+                subText: "subtitle"
+                text: "ListItem with button text"
+                textFlatButton: "Text"
             }
 
             ListItemProgress {
diff --git a/imports/shared/controls/ListItem.qml b/imports/shared/controls/ListItem.qml
index fb5d18f5..d532af4d 100644
--- a/imports/shared/controls/ListItem.qml
+++ b/imports/shared/controls/ListItem.qml
@@ -59,7 +59,6 @@ ListItemBasic {
 
     property string secondaryText: ""
     property string rightToolSymbol: ""
-    property string rightToolButtonText: ""
 
     signal rightToolClicked()
 
@@ -85,16 +84,4 @@ ListItemBasic {
         visible: root.rightToolSymbol !== ""
         onClicked: root.rightToolClicked()
     }
-
-    accessoryButton: Button {
-        text: root.rightToolButtonText
-        font.pixelSize: NeptuneStyle.fontSizeS
-        implicitHeight: root.rightToolButtonText ? contentItem.implicitHeight + topPadding + bottomPadding : 0
-        implicitWidth: root.rightToolButtonText ? contentItem.implicitWidth + leftPadding + rightPadding : 0
-        leftPadding: NeptuneStyle.dp(30)
-        rightPadding: NeptuneStyle.dp(30)
-        topPadding: NeptuneStyle.dp(8)
-        bottomPadding: NeptuneStyle.dp(8)
-        visible: root.rightToolButtonText !== ""
-    }
 }
diff --git a/imports/shared/controls/ListItemBasic.qml b/imports/shared/controls/ListItemBasic.qml
index 0c4a4d28..a7770960 100644
--- a/imports/shared/controls/ListItemBasic.qml
+++ b/imports/shared/controls/ListItemBasic.qml
@@ -64,7 +64,6 @@ ItemDelegate {
 
     property Component accessoryDelegateComponent1: null
     property Component accessoryDelegateComponent2: null
-    property Component accessoryButton: null
     property Component accessoryBottomDelegateComponent: null
 
     property bool rightSpacerUsed: false
@@ -138,12 +137,6 @@ ItemDelegate {
                 active: root.accessoryDelegateComponent2 !== null
                 sourceComponent: root.accessoryDelegateComponent2
             }
-            Loader {
-                id: accessoryButtonItem
-                visible: root.accessoryButton !== null
-                active: root.accessoryButton !== null
-                sourceComponent: root.accessoryButton
-            }
             Item {
                 id: spacerRight
                 Layout.minimumWidth: NeptuneStyle.dp(22)
diff --git a/imports/shared/controls/ListItemFlatButton.qml b/imports/shared/controls/ListItemFlatButton.qml
new file mode 100644
index 00000000..954e924e
--- /dev/null
+++ b/imports/shared/controls/ListItemFlatButton.qml
@@ -0,0 +1,127 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune 3 IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite licenses may use
+** this file in accordance with the commercial license agreement provided
+** with the Software or, alternatively, in accordance with the terms
+** contained in a written agreement between you and The Qt Company.  For
+** licensing terms and conditions see https://www.qt.io/terms-conditions.
+** For further information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+
+import utils 1.0
+import com.pelagicore.styles.neptune 3.0
+
+
+/*!
+    \qmltype
+    \inqmlmodule controls
+    \inherits ListItemBasic
+    \brief Flat button for list items and lists and notifications
+
+    ListItemFlatButton provides a type of a list item with a flat button and close button
+    on the right side. The flat button supports text on one line and its width is aligned with
+    text width. The visibility of close button can be defined with closeButtonVisible property.
+
+    \section2 Example Usage
+
+    \qml
+
+    ListItemFlatButton {
+        implicitWidth: NeptuneStyle.dp(765)
+        implicitHeight: NeptuneStyle.dp(104)
+        icon.name: "ic-update"
+        symbolFlatButton: Style.symbol("ic-favorite")
+        subText: "subtitle"
+        text: "ListItem with button text"
+        textFlatButton: "Text"
+        closeButtonVisible: true
+    }
+
+    \endqml
+
+ */
+
+ListItemBasic {
+    id: root
+
+    /*!
+        \qmlproperty string ListItemBasic::textFlatButton
+
+        This property holds a flat button text.
+    */
+    property string textFlatButton: ""
+
+    /*!
+        \qmlproperty string ListItemBasic::symbolFlatButton
+
+        This property holds a flat button icon path.
+    */
+    property string symbolFlatButton: ""
+
+    /*!
+        \qmlproperty string ListItemBasic::closeButtonVisible
+
+        This property holds a visibility of close button. The default value is false.
+    */
+    property bool closeButtonVisible: false
+
+    /*!
+        \fn ListItemBasic::flatButtonClicked()
+
+        The signal is emitted when flat button is clicked
+    */
+    signal flatButtonClicked()
+
+    /*!
+        \fn ListItemBasic::closeButtonClicked()
+
+        The signal is emitted when close button is clicked
+    */
+    signal closeButtonClicked()
+
+
+    accessoryDelegateComponent1: Button {
+        implicitHeight: contentItem.implicitHeight + topPadding + bottomPadding
+        implicitWidth: contentItem.implicitWidth + leftPadding + rightPadding
+        leftPadding: NeptuneStyle.dp(30)
+        rightPadding: NeptuneStyle.dp(30)
+        topPadding: NeptuneStyle.dp(8)
+        bottomPadding: NeptuneStyle.dp(8)
+        text: root.textFlatButton
+        font.pixelSize: NeptuneStyle.fontSizeS
+        icon.source: root.symbolFlatButton
+        onClicked: root.flatButtonClicked()
+    }
+
+    accessoryDelegateComponent2: ToolButton {
+        implicitWidth: visible ? NeptuneStyle.dp(100) : 0
+        implicitHeight: visible ? root.height : 0
+        icon.name: "ic-close"
+        visible: root.closeButtonVisible
+        onClicked: root.closeButtonClicked()
+    }
+}
diff --git a/imports/shared/controls/qmldir b/imports/shared/controls/qmldir
index 494df535..5c9875d6 100644
--- a/imports/shared/controls/qmldir
+++ b/imports/shared/controls/qmldir
@@ -5,5 +5,6 @@ ListItemBasic 1.0 ListItemBasic.qml
 ListItemProgress 1.0 ListItemProgress.qml
 ListItemSwitch 1.0 ListItemSwitch.qml
 ListItemTwoButtons 1.0 ListItemTwoButtons.qml
+ListItemFlatButton 1.0 ListItemFlatButton.qml
 PopupItem 1.0 PopupItem.qml
 PopupItemLoader 1.0 PopupItemLoader.qml