Verified Commit 90af570d authored by Melvin Keskin's avatar Melvin Keskin Committed by Linus Jahn

Refactor and redesign chat page, empty chat page and chat message bubbles

 * Create base for empty and (normal) chat page
 * Replace background image by background image with transparent background to
   adjust background color for light and dark themes
 * Decrease spacing between chat message bubbles
 * Use less rounded corners for chat message bubble
 * Use glow effect around chat message bubble instead of drop shadow
 * Use consistent text color for own messages and messages of chat partners
 * Use background color as chat message bubble color for own messages
 * Use mix of highlight color and background color as chat message bubble color
   for messages of chat partners
 * Use same style for chat page and message bubble as for empty chat page and
   message bubble
 * Improve chat message bubble proportions

Fixes #335, #338.
Signed-off-by: Linus Jahn's avatarLinus Jahn <lnj@kaidan.im>
parent 64d89d94
......@@ -8,6 +8,7 @@ Files: src/*
Copyright: 2016-2019, Linus Jahn <lnj@kaidan.im>
2016-2019, Jonah Brüchert <jbb@kaidan.im>
2017-2019, Ilya Bizyaev <bizyaev@zoho.com>
2018-2019, Nicolas Fella <nicolas.fella@gmx.de>
2019, Melvin Keskin <melvo@olomono.de>
2019, Filipe Azevedo <pasnox@gmail.com>
2018, Allan Nordhøy <epost@anotheragency.no>
......@@ -19,7 +20,6 @@ Copyright: 2016-2019, Linus Jahn <lnj@kaidan.im>
2019, Nick Richards <nick@nedrichards.com>
2019, Simon Redman <simon@ergotech.com>
2019, Xavier <xavi@delape.net>
2018, Nicolas Fella <nicolas.fella@gmx.de>
2018, Bjarne Roß <ross.b@freenet.de>
2018, SohnyBohny <sohny.bean@streber24.de>
2018, Marco Martin <notmart@gmail.com>
......@@ -93,11 +93,12 @@ Copyright: 2016-2017, Ilya Bizyaev <bizyaev@zoho.com>
2016, MBB <mbb-mail@gmx.de>
License: CC-BY-SA-4.0
Files: data/images/chat.png
Copyright: 2013, Subtle Patterns, Toptal Designers
License: CC-BY-SA-3.0
Files: data/images/chat-page-background.svg
Copyright: 2019, Mathis Brüchert <mbblp@protonmail.ch>
2019, Melvin Keskin <melvo@olomono.de>
License: CC-BY-SA-4.0
Comment:
data/images/chat.png: From <https://www.toptal.com/designers/subtlepatterns/inspiration-geometry/>
Inspired by graphic from https://www.toptal.com/designers/subtlepatterns/
Files: utils/convert-prl-libs-to-cmake.pl
Copyright: 2016, Konstantin Tokarev <annulen@yandex.ru>
......
<svg xmlns="http://www.w3.org/2000/svg" width="412" height="412"><g opacity=".2" stroke="#c7c7c7" stroke-width="2.78800011" stroke-linecap="round" stroke-linejoin="round"><g fill="#c7c7c7"><circle cx="149.98454" cy="103.69845" r="2.7774916"/><path d="m 297.11443,188.56625 -2.83248,-3.30243 4.27623,-0.80179 z"/><path transform="rotate(18.152319)" d="M225.25111 127.29488H229.6155166V131.6592866H225.25111z"/><path d="M379.70339 256.62712l.16367 10.14724 3.2733-1.0911-1.41843 12.43856 5.78284-16.03919-3.32786 1.0911 2.1822-8.83793zM245.03645 297.58278l2.54732 2.54124-3.47443.93542z"/><path transform="matrix(-0.45296195,-0.89152985,0.99949115,0.03189732,0,0)" d="M-387.4696 -43.368736H-382.1887272V-38.0878632H-387.4696z"/><circle r="2.618644" cy="377.52118" cx="19.3125"/></g><g fill="none"><path d="M 68.521187,8.947033 V 19.094279"/><circle cx="136.09708" cy="29.940617" r="8.9496946"/><path d="M338.89619 48.008474h13.31144V26.841101zM218.43856 49.426906l16.69386 11.565678"/><path transform="rotate(-45)" d="M-39.141823 67.225685H-27.614811000000003V78.752697H-39.141823z"/><path d="M327.54873 108.67373L331.91314 128.75M227.4947 136.93326l.54555-.76377 6.65573-11.45657 9.49258 11.02013-6.87394 12.54767zM8.9470339 139.66102L19.20339 138.56991M76.22671 157.39662l-.92583 20.98549 15.121898-14.35038zM373.05675 180.79483a10.955661 10.955661 0 017.76977-11.99937 10.955661 10.955661 0 0113.0214 5.89893M303.54448 247.46187l6.67866 7.63562-3.2733 9.60169-9.95197 1.96608-6.67865-7.63561 3.2733-9.60169zM173.15784 271.4661h17.45763v-17.56674"/><path transform="rotate(-6.6349419)" d="M12.725653 283.21948H20.8290542V305.725807H12.725653z"/><path d="M326.66386 323.8918l14.50468 13.73315M236.22352 373.70231l-9.59253-11.70115 14.92976-2.4568z"/><circle cx="361.99973" cy="367.25153" r="5.5549831"/></g></g></svg>
\ No newline at end of file
<RCC>
<qresource prefix="/images/">
<file>banner.png</file>
<file>chat.png</file>
<file>chat-page-background.svg</file>
<file>message_checkmark.svg</file>
<file>kaidan.svg</file>
</qresource>
......
......@@ -30,8 +30,8 @@
import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.3 as Controls
import QtGraphicalEffects 1.0
import QtMultimedia 5.8 as Multimedia
import org.kde.kirigami 2.8 as Kirigami
......@@ -41,7 +41,7 @@ import MediaUtils 0.1
import "elements"
Kirigami.ScrollablePage {
ChatPageBase {
id: root
property string chatName
......@@ -390,20 +390,11 @@ Kirigami.ScrollablePage {
}
}
background: Image {
id: bgimage
source: Utils.getResourcePath("images/chat.png")
anchors.fill: parent
fillMode: Image.Tile
horizontalAlignment: Image.AlignLeft
verticalAlignment: Image.AlignTop
}
// View containing the messages
ListView {
id: messageListView
verticalLayoutDirection: ListView.BottomToTop
spacing: Kirigami.Units.smallSpacing * 2
spacing: Kirigami.Units.smallSpacing * 1.5
// Highlighting of the message containing a searched string.
highlight: Component {
......
/*
* Kaidan - A user-friendly XMPP client for every device!
*
* Copyright (C) 2016-2019 Kaidan developers and contributors
* (see the LICENSE file for a full list of copyright authors)
*
* Kaidan 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.
*
* In addition, as a special exception, the author of Kaidan gives
* permission to link the code of its release with the OpenSSL
* project's "OpenSSL" library (or with modified versions of it that
* use the same license as the "OpenSSL" library), and distribute the
* linked executables. You must obey the GNU General Public License in
* all respects for all of the code used other than "OpenSSL". If you
* modify this file, you may extend this exception to your version of
* the file, but you are not obligated to do so. If you do not wish to
* do so, delete this exception statement from your version.
*
* Kaidan 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 Kaidan. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.7
import QtQuick.Controls 2.3 as Controls
import QtGraphicalEffects 1.0
import org.kde.kirigami 2.8 as Kirigami
import im.kaidan.kaidan 1.0
/**
* This is the base for a chat page.
*/
Kirigami.ScrollablePage {
// color of the the message bubbles on the left side
readonly property color leftMessageBubbleColor: {
Kirigami.Theme.colorSet = Kirigami.Theme.View
var accentColor = Kirigami.Theme.highlightColor
return Qt.tint(Kirigami.Theme.backgroundColor, Qt.rgba(accentColor.r, accentColor.g, accentColor.b, 0.1))
}
// color of the the message bubbles on the right side
readonly property color rightMessageBubbleColor: {
Kirigami.Theme.colorSet = Kirigami.Theme.View
return Kirigami.Theme.backgroundColor
}
// background of the chat page
background: Rectangle {
color: {
Kirigami.Theme.colorSet = Kirigami.Theme.Window
return Kirigami.Theme.backgroundColor
}
Image {
source: kaidan.utils.getResourcePath("images/chat-page-background.svg")
anchors.fill: parent
fillMode: Image.Tile
horizontalAlignment: Image.AlignLeft
verticalAlignment: Image.AlignTop
}
}
}
......@@ -28,42 +28,41 @@
* along with Kaidan. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.7
import QtQuick.Controls 2.3 as Controls
import QtGraphicalEffects 1.0
import org.kde.kirigami 2.8 as Kirigami
import QtQuick 2.7
import im.kaidan.kaidan 1.0
Kirigami.Page {
background: Image {
id: bgimage
source: Utils.getResourcePath("images/chat.png")
anchors.fill: parent
fillMode: Image.Tile
horizontalAlignment: Image.AlignLeft
verticalAlignment: Image.AlignTop
}
ChatPageBase {
verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff
Rectangle {
height: label.height
width: label.width
Item {
height: root.height * 0.8
color: "lightgrey"
anchors.centerIn: parent
radius: Kirigami.Units.gridUnit
// glow effect around the message bubble
RectangularGlow {
anchors.fill: messageBubble
glowRadius: 0.8
spread: 0.3
cornerRadius: messageBubble.radius + glowRadius
color: Qt.darker(messageBubble.color, 1.2)
}
Controls.Label {
id: label
// message bubble
Rectangle {
id: messageBubble
anchors.centerIn: parent
width: label.width
height: label.height
radius: roundedCornersRadius
color: rightMessageBubbleColor
leftPadding: Kirigami.Units.gridUnit * 0.4
rightPadding: Kirigami.Units.gridUnit * 0.4
topPadding: Kirigami.Units.gridUnit * 0.4
bottomPadding: Kirigami.Units.gridUnit * 0.4
text: qsTr("Please select a chat to start messaging")
color: "black"
Controls.Label {
id: label
text: qsTr("Please select a chat to start messaging")
anchors.centerIn: parent
padding: Kirigami.Units.gridUnit * 0.4
}
}
}
}
......@@ -29,9 +29,9 @@
*/
import QtQuick 2.7
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3 as Controls
import QtGraphicalEffects 1.0
import org.kde.kirigami 2.0 as Kirigami
import im.kaidan.kaidan 1.0
......@@ -66,7 +66,7 @@ RowLayout {
signal messageEditRequested(string id, string body)
// own messages are on the right, others on the left
// Own messages are on the right, others on the left side.
layoutDirection: sentByMe ? Qt.RightToLeft : Qt.LeftToRight
spacing: 8
width: ListView.view.width
......@@ -86,25 +86,26 @@ RowLayout {
Layout.preferredWidth: Kirigami.Units.gridUnit * 2.2
}
// message bubble/box
// message bubble
Item {
Layout.preferredWidth: content.width + 13
Layout.preferredHeight: content.height + 8
Layout.preferredWidth: content.width + 16
Layout.preferredHeight: content.height + 16
// glow effect around the inner area of the message bubble
RectangularGlow {
anchors.fill: messageBubble
glowRadius: 0.8
spread: 0.3
cornerRadius: messageBubble.radius + glowRadius
color: Qt.darker(messageBubble.color, 1.2)
}
// inner area of the message bubble
Rectangle {
id: box
id: messageBubble
anchors.fill: parent
color: sentByMe ? Kirigami.Theme.complementaryTextColor
: Kirigami.Theme.highlightColor
radius: Kirigami.Units.smallSpacing * 2
layer.enabled: box.visible
layer.effect: DropShadow {
verticalOffset: Kirigami.Units.gridUnit * 0.08
horizontalOffset: Kirigami.Units.gridUnit * 0.08
color: Kirigami.Theme.disabledTextColor
samples: 10
spread: 0.1
}
radius: roundedCornersRadius
color: sentByMe ? rightMessageBubbleColor : leftMessageBubbleColor
MouseArea {
anchors.fill: parent
......@@ -147,18 +148,16 @@ RowLayout {
ColumnLayout {
id: content
spacing: 0
spacing: 5
anchors.centerIn: parent
anchors.margins: 4
RowLayout {
id: spoilerHintRow
visible: isSpoiler
Controls.Label {
id: dateLabeltest
text: spoilerHint == "" ? qsTr("Spoiler") : spoilerHint
color: sentByMe ? Kirigami.Theme.textColor
: Kirigami.Theme.complementaryTextColor
color: Kirigami.Theme.textColor
font.pixelSize: Kirigami.Units.gridUnit * 0.8
MouseArea {
anchors.fill: parent
......@@ -180,15 +179,15 @@ RowLayout {
height: 28
width: 28
source: isShowingSpoiler ? "password-show-off" : "password-show-on"
color: sentByMe ? Kirigami.Theme.textColor : Kirigami.Theme.complementaryTextColor
color: Kirigami.Theme.textColor
}
}
Kirigami.Separator {
visible: isSpoiler
Layout.fillWidth: true
color: {
var bgColor = sentByMe ? Kirigami.Theme.backgroundColor : Kirigami.Theme.highlightColor
var textColor = sentByMe ? Kirigami.Theme.textColor : Kirigami.Theme.highlightedTextColor
var bgColor = Kirigami.Theme.backgroundColor
var textColor = Kirigami.Theme.textColor
return Qt.tint(textColor, Qt.rgba(bgColor.r, bgColor.g, bgColor.b, 0.7))
}
}
......@@ -196,7 +195,6 @@ RowLayout {
ColumnLayout {
visible: isSpoiler && isShowingSpoiler || !isSpoiler
Controls.ToolButton {
visible: {
switch (root.mediaType) {
......@@ -257,8 +255,7 @@ RowLayout {
text: Utils.formatMessage(messageBody)
textFormat: Text.StyledText
wrapMode: Text.Wrap
color: sentByMe ? Kirigami.Theme.textColor
: Kirigami.Theme.complementaryTextColor
color: Kirigami.Theme.textColor
onLinkActivated: Qt.openUrlExternally(link)
Layout.maximumWidth: media.enabled
......@@ -269,19 +266,21 @@ RowLayout {
visible: isSpoiler && isShowingSpoiler
Layout.fillWidth: true
color: {
var bgColor = sentByMe ? Kirigami.Theme.backgroundColor : Kirigami.Theme.highlightColor
var textColor = sentByMe ? Kirigami.Theme.textColor : Kirigami.Theme.highlightedTextColor
var bgColor = Kirigami.Theme.backgroundColor
var textColor = Kirigami.Theme.textColor
return Qt.tint(textColor, Qt.rgba(bgColor.r, bgColor.g, bgColor.b, 0.7))
}
}
}
// message meta: date, isDelivered
// message meta data: date, isDelivered
RowLayout {
Layout.bottomMargin: -4
Controls.Label {
id: dateLabel
text: Qt.formatDateTime(dateTime, "dd. MMM yyyy, hh:mm")
color: sentByMe ? Kirigami.Theme.disabledTextColor
: Qt.darker(Kirigami.Theme.disabledTextColor, 1.3)
color: Kirigami.Theme.disabledTextColor
font.pixelSize: Kirigami.Units.gridUnit * 0.8
}
......
......@@ -42,6 +42,9 @@ Kirigami.ApplicationWindow {
minimumHeight: 300
minimumWidth: 280
// radius for using rounded corners
readonly property int roundedCornersRadius: Kirigami.Units.smallSpacing * 1.5
StatusBar {
color: Material.color(Material.Green, Material.Shade700)
}
......
......@@ -3,10 +3,11 @@
<file>main.qml</file>
<file>RosterPage.qml</file>
<file>LoginPage.qml</file>
<file>ChatPageBase.qml</file>
<file>ChatPage.qml</file>
<file>EmptyChatPage.qml</file>
<file>AboutDialog.qml</file>
<file>GlobalDrawer.qml</file>
<file>EmptyChatPage.qml</file>
<file>QrCodeScannerPage.qml</file>
<file>UserProfilePage.qml</file>
<file>MultimediaSettingsPage.qml</file>
......
......@@ -338,12 +338,13 @@ def main():
}
),
CopyrightTarget(
files = ["data/images/chat.png"],
licenseName = "CC-BY-SA-3.0",
files = ["data/images/chat-page-background.svg"],
licenseName = "CC-BY-SA-4.0",
authorList = {
"Subtle Patterns, Toptal Designers": CopyrightAuthor(years = "2013")
"Mathis Brüchert <mbblp@protonmail.ch>": CopyrightAuthor(years = "2019"),
"Melvin Keskin <melvo@olomono.de>": CopyrightAuthor(years = "2019")
},
comment = "data/images/chat.png: From <https://www.toptal.com/designers/subtlepatterns/inspiration-geometry/>"
comment = "Inspired by graphic from https://www.toptal.com/designers/subtlepatterns/"
),
CopyrightTarget(
files = ["utils/convert-prl-libs-to-cmake.pl"],
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment