Restyle the chat UI

This commit is contained in:
miruka
2019-04-28 11:01:38 -04:00
parent f65ea9dd0d
commit 5650234e3b
21 changed files with 182 additions and 77 deletions

View File

@@ -1,6 +1,7 @@
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.4
import "../base" as Base
Item {
property bool invisible: false
@@ -22,13 +23,18 @@ Item {
anchors.fill: parent
visible: ! invisible && imageSource === null
color: resolvedName === "?" ?
Qt.hsla(0, 0, 0.22, 1) :
Qt.hsla(Backend.hueFromString(resolvedName), 0.22, 0.5, 1)
Base.HStyle.avatar.background.unknown :
Qt.hsla(
Backend.hueFromString(resolvedName),
Base.HStyle.avatar.background.saturation,
Base.HStyle.avatar.background.lightness,
Base.HStyle.avatar.background.alpha
)
HLabel {
anchors.centerIn: parent
text: resolvedName.charAt(0)
color: "white"
color: Base.HStyle.avatar.letter
font.pixelSize: letterRectangle.height / 1.4
}
}

View File

@@ -2,6 +2,8 @@ import QtQuick 2.7
import QtGraphicalEffects 1.0
Item {
property bool isPageStackDescendant: true
default property alias children: rectangle.children
property alias color: rectangle.color
property alias gradient: rectangle.gradient
@@ -14,16 +16,18 @@ Item {
sourceItem: mainUIBackground
anchors.fill: parent
sourceRect: Qt.rect(
pageStack.x + parent.x, pageStack.y + parent.y, width, height
(isPageStackDescendant ? pageStack.x : 0) + parent.x,
(isPageStackDescendant ? pageStack.y : 0) + parent.y,
width,
height
)
}
FastBlur {
id: fastBlur
cached: true
anchors.fill: effectSource
source: effectSource
radius: 8
radius: rectangle.color == "#00000000" ? 0 : 8
}
Rectangle {

View File

@@ -0,0 +1,31 @@
import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.4
import "../base" as Base
Base.HRowLayout {
property alias text: noticeLabel.text
property alias color: noticeLabel.color
property alias font: noticeLabel.font
property alias backgroundColor: noticeLabelBackground.color
property alias radius: noticeLabelBackground.radius
Base.HLabel {
id: noticeLabel
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.Wrap
padding: 3
leftPadding: 10
rightPadding: 10
Layout.margins: 10
Layout.alignment: Qt.AlignCenter
Layout.maximumWidth: parent.width - Layout.margins * 2
background: Rectangle {
id: noticeLabelBackground
color: Base.HStyle.box.background
radius: Base.HStyle.box.radius
}
}
}

View File

@@ -8,7 +8,7 @@ HGlassRectangle {
readonly property int baseWidth: baseHeight * widthForHeight
readonly property int margins: baseHeight * 0.03
color: HStyle.boxes.background
color: HStyle.box.background
height: Math.min(parent.height, baseHeight)
width: Math.min(parent.width, baseWidth)
scale: Math.max(1, parent.height / startScalingUpAboveHeight)

View File

@@ -2,6 +2,8 @@ pragma Singleton
import QtQuick 2.7
QtObject {
id: style
readonly property QtObject fontSize: QtObject {
property int smallest: 6
property int smaller: 8
@@ -19,19 +21,78 @@ QtObject {
}
readonly property QtObject colors: QtObject {
property color background0: Qt.hsla(1, 1, 1, 0.4)
property color background0: Qt.hsla(0, 0, 0.8, 0.7)
property color foreground: "black"
property color foregroundDim: Qt.hsla(0, 0, 0.2, 1)
property color foregroundError: Qt.hsla(0.95, 0.64, 0.32, 1)
}
property int radius: 5
readonly property QtObject sidePane: QtObject {
property color background: colors.background0
}
readonly property QtObject boxes: QtObject {
property color background: colors.background0
property int radius: 5
readonly property QtObject chat: QtObject {
readonly property QtObject roomHeader: QtObject {
property color background: colors.background0
}
readonly property QtObject messageList: QtObject {
property color background: colors.background0
}
readonly property QtObject message: QtObject {
property color background: colors.background0
property color body: colors.foreground
property color date: colors.foregroundDim
}
readonly property QtObject event: QtObject {
property color background: colors.background0
property real saturation: 0.22
property real lightness: 0.24
property color date: colors.foregroundDim
}
readonly property QtObject daybreak: QtObject {
property color background: colors.background0
property color foreground: colors.foreground
property int radius: style.radius
}
readonly property QtObject inviteBanner: QtObject {
property color background: colors.background0
}
readonly property QtObject leftBanner: QtObject {
property color background: colors.background0
}
readonly property QtObject sendBox: QtObject {
property color background: colors.background0
}
}
readonly property QtObject avatars: QtObject {
property int radius: 5
readonly property QtObject box: QtObject {
property color background: colors.background0
property int radius: style.radius
}
readonly property QtObject avatar: QtObject {
property int radius: style.radius
property color letter: "white"
readonly property QtObject background: QtObject {
property real saturation: 0.22
property real lightness: 0.5
property real alpha: 1
property color unknown: Qt.hsla(0, 0, 0.22, 1)
}
}
readonly property QtObject displayName: QtObject {
property real saturation: 0.32
property real lightness: 0.3
}
}