Restyle the chat UI
This commit is contained in:
@@ -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
|
||||
}
|
||||
}
|
||||
|
@@ -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 {
|
||||
|
31
harmonyqml/components/base/HNoticeLabel.qml
Normal file
31
harmonyqml/components/base/HNoticeLabel.qml
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
@@ -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)
|
||||
|
@@ -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
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user