From e944e2e08b60ef83170ef6a781a42c831f2b84b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Blin?=
<sebastien.blin@savoirfairelinux.com>
Date: Tue, 1 Mar 2022 16:45:06 -0500
Subject: [PATCH] misc: graphical adjustments
+ Adapt primary color via the luma of the background
+ Adapt font size
+ Adapt some margins
+ Add highlight on avatars
+ Fix selected UID when creating swarms
Change-Id: I58930102b4d0e85ee85682ee62eb8cd24fdd75c0
GitLab: #670
---
src/commoncomponents/EditableLineEdit.qml | 8 ++-
src/constant/JamiTheme.qml | 2 +-
src/mainview/components/NewSwarmPage.qml | 66 +++++++++----------
src/mainview/components/SidePanel.qml | 21 ++++--
.../components/SmartListItemDelegate.qml | 27 ++++++++
src/mainview/components/SwarmDetailsPanel.qml | 47 +++++++++++--
src/utilsadapter.cpp | 6 ++
src/utilsadapter.h | 3 +-
8 files changed, 129 insertions(+), 51 deletions(-)
diff --git a/src/commoncomponents/EditableLineEdit.qml b/src/commoncomponents/EditableLineEdit.qml
index 663b0b055..0473d49a5 100644
--- a/src/commoncomponents/EditableLineEdit.qml
+++ b/src/commoncomponents/EditableLineEdit.qml
@@ -46,7 +46,7 @@ RowLayout {
readOnly: !editable
underlined: true
- borderColor: JamiTheme.textColor
+ borderColor: root.color
Layout.alignment: Qt.AlignCenter
Layout.maximumWidth: JamiTheme.preferredFieldWidth
@@ -63,6 +63,10 @@ RowLayout {
lineEdit.forceActiveFocus()
}
}
+ onAccepted: {
+ editable = !editable
+ root.editingFinished()
+ }
}
PushButton {
@@ -71,7 +75,7 @@ RowLayout {
Layout.alignment: Qt.AlignVCenter
opacity: 0.8
- imageColor: JamiTheme.textColor
+ imageColor: root.color
normalColor: "transparent"
hoveredColor: JamiTheme.hoveredButtonColor
diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml
index 169dacf1d..ac381c868 100644
--- a/src/constant/JamiTheme.qml
+++ b/src/constant/JamiTheme.qml
@@ -219,7 +219,7 @@ Item {
property real indicatorFontSize: 6
property real tinyFontSize: 7 + fontSizeOffset
property real textFontSize: 9 + fontSizeOffset
- property real settingsFontSize: 9 + fontSizeOffset
+ property real settingsFontSize: 11 + fontSizeOffset
property real buttonFontSize: 9
property real participantFontSize: 10
property real menuFontSize: 12 + fontSizeOffset
diff --git a/src/mainview/components/NewSwarmPage.qml b/src/mainview/components/NewSwarmPage.qml
index 58b576bbf..10def09f9 100644
--- a/src/mainview/components/NewSwarmPage.qml
+++ b/src/mainview/components/NewSwarmPage.qml
@@ -43,9 +43,7 @@ Rectangle {
RowLayout {
id: labelsMember
- anchors.top: root.top
- anchors.topMargin: 16
- anchors.leftMargin: 16
+ Layout.topMargin: 16
Layout.preferredWidth: root.width
spacing: 16
@@ -53,59 +51,55 @@ Rectangle {
text: qsTr("To:")
font.bold: true
color: JamiTheme.textColor
+ Layout.leftMargin: 16
}
- ScrollView {
+ Flow {
Layout.preferredWidth: root.width
+ Layout.topMargin: 16
Layout.fillWidth: true
Layout.preferredHeight: 48
- Layout.topMargin: 16
- clip: true
+ spacing: 8
- RowLayout {
- anchors.fill: parent
- Repeater {
- id: repeater
+ Repeater {
+ id: repeater
- delegate: Rectangle {
- id: delegate
- radius: (delegate.height + 12) / 2
- width: childrenRect.width + 12
- height: childrenRect.height + 12
+ delegate: Rectangle {
+ id: delegate
+ radius: (delegate.height + 12) / 2
+ width: childrenRect.width + 12
+ height: childrenRect.height + 12
- RowLayout {
- anchors.centerIn: parent
+ RowLayout {
+ anchors.centerIn: parent
- Label {
- text: UtilsAdapter.getBestNameForUri(CurrentAccount.id, modelData.uri)
- color: JamiTheme.textColor
- }
+ Label {
+ text: UtilsAdapter.getBestNameForUri(CurrentAccount.id, modelData.uri)
+ color: JamiTheme.textColor
+ }
- PushButton {
- id: removeUserBtn
+ PushButton {
+ id: removeUserBtn
- Layout.leftMargin: 8
+ Layout.leftMargin: 8
- preferredSize: 24
+ preferredSize: 24
- source: JamiResources.round_close_24dp_svg
- toolTipText: JamiStrings.removeMember
+ source: JamiResources.round_close_24dp_svg
+ toolTipText: JamiStrings.removeMember
- normalColor: "transparent"
- imageColor: "transparent"
+ normalColor: "transparent"
+ imageColor: "transparent"
- onClicked: root.removeMember(modelData.convId, modelData.uri)
- }
+ onClicked: root.removeMember(modelData.convId, modelData.uri)
}
-
- color: "grey"
}
- model: root.members
+
+ color: "grey"
}
+ model: root.members
}
}
-
-
}
ColumnLayout {
diff --git a/src/mainview/components/SidePanel.qml b/src/mainview/components/SidePanel.qml
index b8d2be75d..f53582866 100644
--- a/src/mainview/components/SidePanel.qml
+++ b/src/mainview/components/SidePanel.qml
@@ -324,22 +324,35 @@ Rectangle {
interactive: false
onVisibleChanged: {
- if (!visible) {
+ if (!swarmCurrentConversationList.visible) {
highlighted = false
root.clearHighlighted()
}
}
+ Component.onCompleted: {
+ // Note: when scrolled down, this delegate will be
+ // destroyed from the memory. So, re-add the highlighted
+ // status if necessary
+ if (Array.from(root.highlighted).find(r => r === UID)) {
+ highlighted = true
+ }
+ }
+
onHighlightedChanged: function onHighlightedChanged() {
+ if (highlighted && Array.from(root.highlighted).find(r => r === UID)) {
+ // Due to scrolling destruction/reconstruction
+ return
+ }
var currentHighlighted = root.highlighted
- if (!root.refreshHighlighted(convId, highlighted)) {
+ if (!root.refreshHighlighted(UID, highlighted)) {
highlighted = false
return
}
if (highlighted) {
- root.highlighted.push(convId)
+ root.highlighted.push(UID)
} else {
- root.highlighted = Array.from(root.highlighted).filter(r => r !== convId)
+ root.highlighted = Array.from(root.highlighted).filter(r => r !== UID)
}
}
}
diff --git a/src/mainview/components/SmartListItemDelegate.qml b/src/mainview/components/SmartListItemDelegate.qml
index da66c81d1..ffe511137 100644
--- a/src/mainview/components/SmartListItemDelegate.qml
+++ b/src/mainview/components/SmartListItemDelegate.qml
@@ -20,6 +20,7 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
import net.jami.Models 1.1
import net.jami.Adapters 1.1
@@ -69,6 +70,32 @@ ItemDelegate {
Layout.preferredWidth: JamiTheme.smartListAvatarSize
Layout.preferredHeight: JamiTheme.smartListAvatarSize
+
+ Rectangle {
+ id: overlayHighlighted
+ visible: highlighted && !interactive
+
+ anchors.fill: parent
+ color: Qt.rgba(0, 0, 0, 0.5)
+ radius: JamiTheme.smartListAvatarSize / 2
+
+ Image {
+ id: highlightedImage
+
+ width: JamiTheme.smartListAvatarSize / 2
+ height: JamiTheme.smartListAvatarSize / 2
+ anchors.centerIn: parent
+
+ layer {
+ enabled: true
+ effect: ColorOverlay {
+ color: "white"
+ }
+ }
+ source: JamiResources.check_black_24dp_svg
+ }
+ }
+
}
ColumnLayout {
diff --git a/src/mainview/components/SwarmDetailsPanel.qml b/src/mainview/components/SwarmDetailsPanel.qml
index 93fea8f28..d32b1dfc3 100644
--- a/src/mainview/components/SwarmDetailsPanel.qml
+++ b/src/mainview/components/SwarmDetailsPanel.qml
@@ -56,6 +56,7 @@ Rectangle {
EditableLineEdit {
id: titleLine
+
Layout.alignment: Qt.AlignCenter
Layout.topMargin: JamiTheme.preferredMarginSize
@@ -66,10 +67,12 @@ Rectangle {
text: CurrentConversation.title
placeholderText: JamiStrings.editTitle
- placeholderTextColor: JamiTheme.placeholderTextColorWhite
+ placeholderTextColor: UtilsAdapter.luma(backgroundColor) ? JamiTheme.placeholderTextColorWhite : JamiTheme.placeholderTextColor
tooltipText: JamiStrings.editTitle
backgroundColor: root.color
- color: "white"
+ color: UtilsAdapter.luma(backgroundColor) ?
+ JamiTheme.chatviewTextColorLight :
+ JamiTheme.chatviewTextColorDark
onEditingFinished: {
ConversationsAdapter.updateConversationTitle(LRCInstance.selectedConvUid, titleLine.text)
@@ -78,6 +81,7 @@ Rectangle {
EditableLineEdit {
id: descriptionLine
+
Layout.alignment: Qt.AlignCenter
Layout.topMargin: JamiTheme.preferredMarginSize
Layout.bottomMargin: JamiTheme.preferredMarginSize
@@ -89,10 +93,12 @@ Rectangle {
text: CurrentConversation.description
placeholderText: JamiStrings.editDescription
- placeholderTextColor: JamiTheme.placeholderTextColorWhite
+ placeholderTextColor: UtilsAdapter.luma(backgroundColor) ? JamiTheme.placeholderTextColorWhite : JamiTheme.placeholderTextColor
tooltipText: JamiStrings.editDescription
backgroundColor: root.color
- color: "white"
+ color: UtilsAdapter.luma(backgroundColor) ?
+ JamiTheme.chatviewTextColorLight :
+ JamiTheme.chatviewTextColorDark
onEditingFinished: {
ConversationsAdapter.updateConversationDescription(LRCInstance.selectedConvUid, descriptionLine.text)
@@ -115,6 +121,11 @@ Rectangle {
fontSize: JamiTheme.menuFontSize
underlineContentOnly: true
+ textColorHovered: UtilsAdapter.luma(root.color) ? JamiTheme.placeholderTextColorWhite : JamiTheme.placeholderTextColor
+ textColor: UtilsAdapter.luma(root.color) ?
+ JamiTheme.chatviewTextColorLight :
+ JamiTheme.chatviewTextColorDark
+
down: tabBar.currentIndex === 0
labelText: JamiStrings.about
}*/
@@ -128,6 +139,11 @@ Rectangle {
fontSize: JamiTheme.menuFontSize
underlineContentOnly: true
+ textColorHovered: UtilsAdapter.luma(root.color) ? JamiTheme.placeholderTextColorWhite : JamiTheme.placeholderTextColor
+ textColor: UtilsAdapter.luma(root.color) ?
+ JamiTheme.chatviewTextColorLight :
+ JamiTheme.chatviewTextColorDark
+
down: true//tabBar.currentIndex === 1
labelText: {
var membersNb = CurrentConversation.uris.length;
@@ -146,6 +162,11 @@ Rectangle {
fontSize: JamiTheme.menuFontSize
underlineContentOnly: true
+ textColorHovered: UtilsAdapter.luma(root.color) ? JamiTheme.placeholderTextColorWhite : JamiTheme.placeholderTextColor
+ textColor: UtilsAdapter.luma(root.color) ?
+ JamiTheme.chatviewTextColorLight :
+ JamiTheme.chatviewTextColorDark
+
down: tabBar.currentIndex === 2
labelText: JamiStrings.documents
}*/
@@ -161,7 +182,6 @@ Rectangle {
JamiListView {
id: members
anchors.fill: parent
- spacing: JamiTheme.preferredMarginSize
anchors.topMargin: JamiTheme.preferredMarginSize
SwarmParticipantContextMenu {
@@ -179,11 +199,21 @@ Rectangle {
}
model: CurrentConversation.uris
- delegate: Item {
-
+ delegate: ItemDelegate {
+ id: member
width: members.width
height: JamiTheme.smartListItemHeight
+ background: Rectangle {
+ anchors.fill: parent
+ color: {
+ if (member.hovered)
+ return Qt.darker(JamiTheme.selectedColor, 1.05)
+ else
+ return "transparent"
+ }
+ }
+
MouseArea {
anchors.fill: parent
enabled: modelData != CurrentAccount.uri
@@ -200,6 +230,7 @@ Rectangle {
width: JamiTheme.smartListAvatarSize
height: JamiTheme.smartListAvatarSize
Layout.leftMargin: JamiTheme.preferredMarginSize
+ Layout.topMargin: JamiTheme.preferredMarginSize / 2
z: -index
opacity: {
var role = UtilsAdapter.getParticipantRole(CurrentAccount.id, CurrentConversation.id, modelData)
@@ -215,6 +246,7 @@ Rectangle {
id: bestName
Layout.preferredHeight: JamiTheme.preferredFieldHeight
+ Layout.topMargin: JamiTheme.preferredMarginSize / 2
eText: UtilsAdapter.getContactBestName(CurrentAccount.id, modelData)
maxWidth: JamiTheme.preferredFieldWidth
@@ -234,6 +266,7 @@ Rectangle {
id: role
Layout.preferredHeight: JamiTheme.preferredFieldHeight
+ Layout.topMargin: JamiTheme.preferredMarginSize / 2
eText: {
var role = UtilsAdapter.getParticipantRole(CurrentAccount.id, CurrentConversation.id, modelData)
diff --git a/src/utilsadapter.cpp b/src/utilsadapter.cpp
index f224f4bdc..4269eed44 100644
--- a/src/utilsadapter.cpp
+++ b/src/utilsadapter.cpp
@@ -563,3 +563,9 @@ UtilsAdapter::getParticipantRole(const QString& accountId, const QString& convId
}
return lrc::api::member::Role::MEMBER;
}
+
+bool
+UtilsAdapter::luma(const QColor& color) const
+{
+ return (0.2126 * color.red() + 0.7152 * color.green() + 0.0722 * color.blue()) > .6;
+}
\ No newline at end of file
diff --git a/src/utilsadapter.h b/src/utilsadapter.h
index 7748a07e1..d13a8afd9 100644
--- a/src/utilsadapter.h
+++ b/src/utilsadapter.h
@@ -98,7 +98,7 @@ public:
Q_INVOKABLE void setSwarmCreationImageFromFile(const QString& path,
const QString& imageId = "temp");
Q_INVOKABLE void setSwarmCreationImageFromImage(const QImage& image,
- const QString& imageId = "temp");
+ const QString& imageId = "temp");
// For Swarm details page
Q_INVOKABLE bool getContactPresence(const QString& accountId, const QString& uri);
@@ -106,6 +106,7 @@ public:
Q_INVOKABLE lrc::api::member::Role getParticipantRole(const QString& accountId,
const QString& convId,
const QString& uri);
+ Q_INVOKABLE bool luma(const QColor& color) const;
Q_SIGNALS:
void debugMessageReceived(const QString& message);
--
GitLab