[barcode] Tweaked VCard UI

qml/components/IconSeparator.qml

@@ -0,0 +1,68 @@
+/*
+The MIT License (MIT)
+
+Copyright (c) 2022 Slava Monich
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+
+import "../harbour"
+
+Item {
+    property alias iconSource: icon.source
+    property int iconSize
+    property alias color: icon.highlightColor
+
+    height: iconSize + 2 * Theme.paddingSmall
+
+    HarbourHighlightIcon {
+        id: icon
+
+        anchors.centerIn: parent
+        source: visible ? "img/contact-phone.svg" : ""
+        sourceSize.height: iconSize
+    }
+
+    Separator {
+        anchors {
+            left: parent.left
+            right: icon.left
+            rightMargin: Theme.paddingSmall
+            verticalCenter: parent.verticalCenter
+        }
+
+        color: icon.highlightColor
+        horizontalAlignment: Qt.AlignRight
+    }
+
+    Separator {
+        anchors {
+            left: icon.right
+            leftMargin: Theme.paddingSmall
+            right: parent.right
+            verticalCenter: parent.verticalCenter
+        }
+
+        color: icon.highlightColor
+        horizontalAlignment: Qt.AlignLeft
+    }
+}

qml/pages/VCardPage.qml

@@ -61,7 +61,6 @@ Page {
             width: parent.width
 
             readonly property int detailIconSize: detailItemSample.height - 2 * Theme.paddingSmall
-            readonly property int detailLeftMargin: Theme.horizontalPageMargin + detailIconSize + Theme.paddingLarge
 
             PageHeader {
                 title: !contact ? "" :
@@ -96,6 +95,13 @@ Page {
                 visible: contactImage.visible
             }
 
+            IconSeparator {
+                width: parent.width
+                visible: (primaryName.visible || secondaryName.visible) && !contactImage.visible
+                iconSource: visible ? "img/contact-name.svg" : ""
+                iconSize: content.detailIconSize
+            }
+
             CopyableDetailItem {
                 id: primaryName
 
@@ -108,7 +114,6 @@ Page {
                     qsTrId("contact-detail-name")
                 value: contact.primaryName
                 visible: !!value
-                leftMargin: content.detailLeftMargin
             }
 
             CopyableDetailItem {
@@ -123,19 +128,13 @@ Page {
                     qsTrId("contact-detail-name")
                 value: contact.secondaryName
                 visible: !!value
-                leftMargin: content.detailLeftMargin
             }
 
-            VerticalGap {
-                visible: primaryName.visible || secondaryName.visible
-            }
-
-            Separator {
+            IconSeparator {
                 width: parent.width
-                color: Theme.highlightColor
-                horizontalAlignment: Qt.AlignHCenter
-                visible: (primaryName.visible ||
-                    secondaryName.visible) && phoneDetails.count
+                visible: phoneDetails.count > 0
+                iconSource: visible ? "img/contact-phone.svg" : ""
+                iconSize: content.detailIconSize
             }
 
             Repeater {
@@ -149,25 +148,14 @@ Page {
                     label: index ? "" : qsTrId("contact-detail-phone")
                     value: modelData.number
                     visible: !!value || !index
-                    leftMargin: content.detailLeftMargin
-
-                    HarbourHighlightIcon {
-                        x: Theme.horizontalPageMargin
-                        y: Theme.paddingSmall
-                        visible: !index
-                        source: visible ? "img/contact-phone.svg" : ""
-                        sourceSize.height: content.detailIconSize
-                    }
                 }
             }
 
-            Separator {
+            IconSeparator {
                 width: parent.width
-                color: Theme.highlightColor
-                horizontalAlignment: Qt.AlignHCenter
-                visible: (primaryName.visible ||
-                    secondaryName.visible ||
-                    phoneDetails.count) && emailDetails.count
+                visible: emailDetails.count > 0
+                iconSource: visible ? "img/contact-email.svg" : ""
+                iconSize: content.detailIconSize
             }
 
             Repeater {
@@ -181,26 +169,14 @@ Page {
                     label: index ? "" : qsTrId("contact-detail-email")
                     value: modelData.address
                     visible: !!value || !index
-                    leftMargin: content.detailLeftMargin
-
-                    HarbourHighlightIcon {
-                        x: Theme.horizontalPageMargin
-                        y: Theme.paddingSmall
-                        visible: !index
-                        source: visible ? "img/contact-email.svg" : ""
-                        sourceSize.height: content.detailIconSize
-                    }
                 }
             }
 
-            Separator {
+            IconSeparator {
                 width: parent.width
-                color: Theme.highlightColor
-                horizontalAlignment: Qt.AlignHCenter
-                visible: (primaryName.visible ||
-                    secondaryName.visible ||
-                    phoneDetails.count ||
-                    emailDetails.count) && addressDetails.count
+                visible: addressDetails.count > 0
+                iconSource: visible ? "img/contact-address.svg" : ""
+                iconSize: content.detailIconSize
             }
 
             Repeater {
@@ -214,27 +190,14 @@ Page {
                     label: index ? "" : qsTrId("contact-detail-address")
                     value: modelData.address
                     visible: !!value || !index
-                    leftMargin: content.detailLeftMargin
-
-                    HarbourHighlightIcon {
-                        x: Theme.horizontalPageMargin
-                        y: Theme.paddingSmall
-                        visible: !index
-                        source: visible ? "img/contact-address.svg" : ""
-                        sourceSize.height: content.detailIconSize
-                    }
                 }
             }
 
-            Separator {
+            IconSeparator {
                 width: parent.width
-                color: Theme.highlightColor
-                horizontalAlignment: Qt.AlignHCenter
-                visible: (primaryName.visible ||
-                    secondaryName.visible ||
-                    phoneDetails.count ||
-                    emailDetails.count ||
-                    addressDetails.count) && websiteDetails.count
+                visible: websiteDetails.count > 0
+                iconSource: visible ? "img/contact-website.svg" : ""
+                iconSize: content.detailIconSize
             }
 
             Repeater {
@@ -248,28 +211,14 @@ Page {
                     label: index ? "" : qsTrId("contact-detail-website")
                     value: modelData.url
                     visible: !!value || !index
-                    leftMargin: content.detailLeftMargin
-
-                    HarbourHighlightIcon {
-                        x: Theme.horizontalPageMargin
-                        y: Theme.paddingSmall
-                        visible: !index
-                        source: visible ? "img/contact-website.svg" : ""
-                        sourceSize.height: content.detailIconSize
-                    }
                 }
             }
 
-            Separator {
+            IconSeparator {
                 width: parent.width
-                color: Theme.highlightColor
-                horizontalAlignment: Qt.AlignHCenter
-                visible: (primaryName.visible ||
-                    secondaryName.visible ||
-                    phoneDetails.count ||
-                    emailDetails.count ||
-                    addressDetails.count ||
-                    websiteDetails.count) && birthdayDetail.visible
+                visible: birthdayDetail.visible
+                iconSource: visible ? "img/contact-date.svg" : ""
+                iconSize: content.detailIconSize
             }
 
             CopyableDetailItem {
@@ -281,28 +230,13 @@ Page {
                 label: qsTrId("contact-detail-birthday")
                 value: isNaN(birthdayDetail.date) ? "" : Qt.formatDate(birthdayDetail.date)
                 visible: !!value
-                leftMargin: content.detailLeftMargin
-
-                HarbourHighlightIcon {
-                    x: Theme.horizontalPageMargin
-                    y: Theme.paddingSmall
-                    visible: parent.visible
-                    source: visible ? "img/contact-date.svg" : ""
-                    sourceSize.height: content.detailIconSize
-                }
             }
 
-            Separator {
+            IconSeparator {
                 width: parent.width
-                color: Theme.highlightColor
-                horizontalAlignment: Qt.AlignHCenter
-                visible: (primaryName.visible ||
-                    secondaryName.visible ||
-                    phoneDetails.count ||
-                    emailDetails.count ||
-                    addressDetails.count ||
-                    websiteDetails.count ||
-                    birthdayDetail.visible) && noteDetails.count
+                visible: noteDetails.count > 0
+                iconSource: visible ? "img/contact-note.svg" : ""
+                iconSize: content.detailIconSize
             }
 
             Repeater {
@@ -316,15 +250,6 @@ Page {
                     label: index ? "" : qsTrId("contact-detail-note")
                     value: modelData.note
                     visible: !!value || !index
-                    leftMargin: content.detailLeftMargin
-
-                    HarbourHighlightIcon {
-                        x: Theme.horizontalPageMargin
-                        y: Theme.paddingSmall
-                        visible: !index
-                        source: visible ? "img/contact-note.svg" : ""
-                        sourceSize.height: content.detailIconSize
-                    }
                 }
             }
         }