lilith/jami-client-qt
1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-09-10 12:03:18 +02:00
Code Activity

misc: graphical adjustments

Browse source 
+ 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
This commit is contained in:
Sébastien Blin 2022-03-01 16:45:06 -05:00
parent 1403e8dd7d
commit e944e2e08b
8 changed files with 134 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/commoncomponents/EditableLineEdit.qml
View file

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

2
src/constant/JamiTheme.qml
View file

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

76
src/mainview/components/NewSwarmPage.qml
View file

@ -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
}
PushButton {
id: removeUserBtn
Layout.leftMargin: 8
preferredSize: 24
source: JamiResources.round_close_24dp_svg
toolTipText: JamiStrings.removeMember
normalColor: "transparent"
imageColor: "transparent"
onClicked: root.removeMember(modelData.convId, modelData.uri)
}
Label {
text: UtilsAdapter.getBestNameForUri(CurrentAccount.id, modelData.uri)
color: JamiTheme.textColor
}
color: "grey"
PushButton {
id: removeUserBtn
Layout.leftMargin: 8
preferredSize: 24
source: JamiResources.round_close_24dp_svg
toolTipText: JamiStrings.removeMember
normalColor: "transparent"
imageColor: "transparent"
onClicked: root.removeMember(modelData.convId, modelData.uri)
}
}
model: root.members
color: "grey"
}
model: root.members
}
}
}
ColumnLayout {

21
src/mainview/components/SidePanel.qml
View file

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

27
src/mainview/components/SmartListItemDelegate.qml
View file

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

47
src/mainview/components/SwarmDetailsPanel.qml
View file

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

6
src/utilsadapter.cpp
View file

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

3
src/utilsadapter.h
View file

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