From f06ec3ae7a9dc7d062541e5460922c9c94b5b72f Mon Sep 17 00:00:00 2001
From: Nicolas Vengeon <nicolas.vengeon@savoirfairelinux.com>
Date: Tue, 14 Feb 2023 15:59:03 -0500
Subject: [PATCH] locationSharing: new icon design
GitLab: #987
Change-Id: I58befd7630e4632a4dc1286b4c692d6e5c0dd40e
---
.../icons/Localisation_Sharing_Send_Arrow.svg | 14 ++++++
.../icons/Localisation_Sharing_Send_Pin.svg | 18 +++++++
src/app/commoncomponents/Avatar.qml | 48 +------------------
src/app/commoncomponents/ResponsiveImage.qml | 4 ++
src/app/constant/JamiTheme.qml | 6 +--
.../components/BlinkingLocationIcon.qml | 45 +++++++++++++++++
.../components/ConversationAvatar.qml | 2 -
src/app/mainview/components/SidePanel.qml | 13 +++++
.../components/SmartListItemDelegate.qml | 41 +++++++++++-----
9 files changed, 126 insertions(+), 65 deletions(-)
create mode 100644 resources/icons/Localisation_Sharing_Send_Arrow.svg
create mode 100644 resources/icons/Localisation_Sharing_Send_Pin.svg
create mode 100644 src/app/mainview/components/BlinkingLocationIcon.qml
diff --git a/resources/icons/Localisation_Sharing_Send_Arrow.svg b/resources/icons/Localisation_Sharing_Send_Arrow.svg
new file mode 100644
index 000000000..43bbf7e34
--- /dev/null
+++ b/resources/icons/Localisation_Sharing_Send_Arrow.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#005699;}
+</style>
+<g id="Layer_1">
+ <path id="noun-arrow-1167262" class="st0" d="M202.8,225.1H324L160.6,388.5l27.9,27.9L351.8,253v121.2l39.4-0.3V185.7l-188.4-0.4
+ V225.1z"/>
+</g>
+<g id="Layer_2">
+</g>
+</svg>
diff --git a/resources/icons/Localisation_Sharing_Send_Pin.svg b/resources/icons/Localisation_Sharing_Send_Pin.svg
new file mode 100644
index 000000000..6aa8ca0cd
--- /dev/null
+++ b/resources/icons/Localisation_Sharing_Send_Pin.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#005699;}
+</style>
+<g id="Layer_1">
+</g>
+<g id="Layer_2">
+ <g id="noun-pin-106435">
+ <path class="st0" d="M299.8,549.9l-14.2-12.8c-3.8-3.4-93.5-84.6-121.3-113.6c-45.2-41-72.6-98.6-75.9-161
+ c0-117.7,94.8-212.6,211.4-212.6l0,0c116.5,0,211.4,94.8,211.4,211.4c0,59.2-28.6,116.6-87.4,175.4c-9.1,9-99.6,91.1-109.9,100.4
+ L299.8,549.9z M299.8,92.1c-93.3,0-169.2,75.9-169.2,169.2c2.7,50.1,25.1,97.3,63.1,131.9c21.2,22,79.1,75.1,106.1,99.7
+ c39.1-35.5,88.6-80.5,94.2-86.1c50.4-50.4,75-98,75-145.5C469,168.1,393.1,92.2,299.8,92.1L299.8,92.1z"/>
+ </g>
+</g>
+</svg>
diff --git a/src/app/commoncomponents/Avatar.qml b/src/app/commoncomponents/Avatar.qml
index de70ab97f..2d23ac449 100644
--- a/src/app/commoncomponents/Avatar.qml
+++ b/src/app/commoncomponents/Avatar.qml
@@ -47,8 +47,6 @@ Item {
property alias presenceStatus: presenceIndicator.status
property bool showPresenceIndicator: true
- property bool showSharePositionIndicator: false
- property bool showSharedPositionIndicator: false
property alias fillMode: image.fillMode
onImageIdChanged: image.updateSource()
@@ -119,49 +117,5 @@ Item {
size: root.width * JamiTheme.avatarPresenceRatio
visible: showPresenceIndicator
- }
- RowLayout {
- id: positionIndicatorLayout
- anchors.left: root.left
- anchors.leftMargin: -1
- anchors.bottom: root.bottom
- anchors.bottomMargin: -1
- spacing: 0
- property real sizeI: root.width * JamiTheme.avatarPresenceRatio
- Rectangle {
- id: sharePositionIndicator
- visible: showSharePositionIndicator
- Layout.preferredWidth: parent.sizeI
- Layout.preferredHeight: parent.sizeI
- color: JamiTheme.backgroundColor
- radius: parent.sizeI * 0.5
- Image {
- anchors.fill: parent
- ColorOverlay {
- anchors.fill: parent
- source: parent
- color: JamiTheme.sharePositionIndicatorColor
- }
- source: JamiResources.my_location_svg
- }
- }
- Rectangle {
- id: sharedPositionIndicator
- visible: showSharedPositionIndicator
- Layout.preferredWidth: parent.sizeI
- Layout.preferredHeight: parent.sizeI
- color: JamiTheme.backgroundColor
- radius: parent.sizeI * 0.5
- Image {
- anchors.fill: parent
- ColorOverlay {
- anchors.fill: parent
- source: parent
- color: JamiTheme.sharedPositionIndicatorColor
- }
- source: JamiResources.my_location_svg
- }
- }
- }
-
+ }
}
diff --git a/src/app/commoncomponents/ResponsiveImage.qml b/src/app/commoncomponents/ResponsiveImage.qml
index d2a1f2c55..f18c78034 100644
--- a/src/app/commoncomponents/ResponsiveImage.qml
+++ b/src/app/commoncomponents/ResponsiveImage.qml
@@ -35,6 +35,8 @@ Item {
property alias status: image.status
property string color: "transparent"
property bool hovered: false
+ property bool mirrorHorizontally: false
+ property bool mirrorVertically: false
property bool isSvg: {
var match = /[^.]+$/.exec(source)
@@ -66,6 +68,8 @@ Item {
antialiasing: true
asynchronous: true
visible: false
+ mirror: root.mirrorHorizontally
+ mirrorVertically: root.mirrorVertically
function setSourceSize() {
sourceSize = undefined
diff --git a/src/app/constant/JamiTheme.qml b/src/app/constant/JamiTheme.qml
index 3c92a6b71..ba2fbfca7 100644
--- a/src/app/constant/JamiTheme.qml
+++ b/src/app/constant/JamiTheme.qml
@@ -102,7 +102,7 @@ Item {
property color invertedNormalButtonColor: Qt.rgba(0, 0, 0, 0.75)
property color editLineColor: "#03b9e9"
- property color buttonTintedBlue: "#005699"
+ property color buttonTintedBlue: darkTheme ? "#03B9E9" : "#005699"
property color buttonTintedBlueHovered: "#0071c9"
property color buttonTintedBlueInternalHover: Qt.rgba(0, 86, 153, 0.2)
property color buttonTintedBluePressed: "#0071c9"
@@ -227,8 +227,8 @@ Item {
//mapPosition
property color mapButtonsOverlayColor: darkTheme ? "#000000" : "#f0f0f0"
property color mapButtonColor: darkTheme ? "#f0f0f0" : "#000000"
- property color sharePositionIndicatorColor: red_
- property color sharedPositionIndicatorColor: urgentOrange_
+ property color sharePositionIndicatorColor: buttonTintedBlue
+ property color sharedPositionIndicatorColor: darkTheme ? whiteColor : blackColor
//EmojiReact
property real emojiBubbleSize: calcSize(17)
diff --git a/src/app/mainview/components/BlinkingLocationIcon.qml b/src/app/mainview/components/BlinkingLocationIcon.qml
new file mode 100644
index 000000000..a9125f17a
--- /dev/null
+++ b/src/app/mainview/components/BlinkingLocationIcon.qml
@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2023 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick
+import QtQuick.Layouts
+import net.jami.Constants 1.1
+
+
+import "../../commoncomponents"
+
+ResponsiveImage {
+ id: root
+
+ property bool isSharing: false
+ property bool arrowTimerVisibility
+ source: JamiResources.localisation_sharing_send_pin_svg
+
+ ResponsiveImage {
+ id: arrowSharePosition
+
+ visible: arrowTimerVisibility
+ source: JamiResources.localisation_sharing_send_arrow_svg
+ color: root.color
+ mirrorHorizontally: isSharing ? false : true
+ mirrorVertically: isSharing ? false : true
+ anchors.fill: parent
+ anchors.bottomMargin: isSharing ? 0 : 4
+ anchors.leftMargin: isSharing ? 0 : 3
+ }
+}
+
diff --git a/src/app/mainview/components/ConversationAvatar.qml b/src/app/mainview/components/ConversationAvatar.qml
index f2250b128..e10d2a553 100644
--- a/src/app/mainview/components/ConversationAvatar.qml
+++ b/src/app/mainview/components/ConversationAvatar.qml
@@ -28,8 +28,6 @@ Item {
property alias imageId: avatar.imageId
property alias showPresenceIndicator: avatar.showPresenceIndicator
- property alias showSharePositionIndicator: avatar.showSharePositionIndicator
- property alias showSharedPositionIndicator: avatar.showSharedPositionIndicator
property alias animationMode: animation.mode
SpinningAnimation {
diff --git a/src/app/mainview/components/SidePanel.qml b/src/app/mainview/components/SidePanel.qml
index fcd224cfd..965990a7d 100644
--- a/src/app/mainview/components/SidePanel.qml
+++ b/src/app/mainview/components/SidePanel.qml
@@ -474,6 +474,19 @@ BaseView {
}
}
currentIndex: model.currentFilteredRow
+
+ Timer {
+ id: locationIconTimer
+
+ property bool showIconArrow: true
+ property bool isSharingPosition: PositionManager.positionShareConvIdsCount !== 0
+ property bool isReceivingPosition: PositionManager.sharingUrisCount !== 0
+
+ interval: 750
+ running: isSharingPosition || isReceivingPosition
+ repeat: true
+ onTriggered: {showIconArrow = !showIconArrow}
+ }
}
}
}
diff --git a/src/app/mainview/components/SmartListItemDelegate.qml b/src/app/mainview/components/SmartListItemDelegate.qml
index f52369e0a..6398288f4 100644
--- a/src/app/mainview/components/SmartListItemDelegate.qml
+++ b/src/app/mainview/components/SmartListItemDelegate.qml
@@ -53,6 +53,19 @@ ItemDelegate {
}
}
+ property bool showSharePositionIndicator: PositionManager.isPositionSharedToConv(accountId, UID)
+ property bool showSharedPositionIndicator: PositionManager.isConvSharingPosition(accountId, UID)
+
+ Connections {
+ target: PositionManager
+ function onPositionShareConvIdsCountChanged () {
+ root.showSharePositionIndicator = PositionManager.isPositionSharedToConv(accountId, UID)
+ }
+ function onSharingUrisCountChanged () {
+ root.showSharedPositionIndicator = PositionManager.isConvSharingPosition(accountId, UID)
+ }
+ }
+
onVisibleChanged: {
if (visible)
return
@@ -68,7 +81,7 @@ ItemDelegate {
Component.onCompleted: {
// Store to avoid undefined at the end
- root.accountId = CurrentAccount.id
+ root.accountId = Qt.binding(() => CurrentAccount.id)
root.convId = UID
}
@@ -87,22 +100,10 @@ ItemDelegate {
imageId: UID
showPresenceIndicator: Presence !== undefined ? Presence : false
- showSharePositionIndicator: PositionManager.isPositionSharedToConv(CurrentAccount.id, UID)
- showSharedPositionIndicator: PositionManager.isConvSharingPosition(CurrentAccount.id, UID)
Layout.preferredWidth: JamiTheme.smartListAvatarSize
Layout.preferredHeight: JamiTheme.smartListAvatarSize
- Connections {
- target: PositionManager
- function onPositionShareConvIdsCountChanged () {
- avatar.showSharePositionIndicator = PositionManager.isPositionSharedToConv(CurrentAccount.id, UID)
- }
- function onSharingUrisCountChanged () {
- avatar.showSharedPositionIndicator = PositionManager.isConvSharingPosition(CurrentAccount.id, UID)
- }
- }
-
Rectangle {
id: overlayHighlighted
visible: highlighted && !interactive
@@ -209,6 +210,20 @@ ItemDelegate {
color: JamiTheme.primaryForegroundColor
}
+ BlinkingLocationIcon {
+ isSharing: true
+ visible: showSharePositionIndicator
+ arrowTimerVisibility: locationIconTimer.showIconArrow
+ color: JamiTheme.sharePositionIndicatorColor
+ }
+
+ BlinkingLocationIcon {
+ isSharing: false
+ visible: showSharedPositionIndicator
+ arrowTimerVisibility: locationIconTimer.showIconArrow
+ color: JamiTheme.sharedPositionIndicatorColor
+ }
+
ColumnLayout {
Layout.fillHeight: true
spacing: 2
--
GitLab