Zergling_man/moment
Zergling_man/moment
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve overall theme and pane colors

Browse Source
This commit is contained in:
miruka 2020-03-13 01:09:04 -04:00
parent 0068550410
commit 5cee0f6c8a
14 changed files with 300 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/gui/Base/HUserAvatar.qml
View File

@ -35,9 +35,9 @@ HAvatar {
"user-power-50"
colorize:
invited ? theme.chat.roomPane.member.invitedIcon :
admin ? theme.chat.roomPane.member.adminIcon :
theme.chat.roomPane.member.moderatorIcon
invited ? theme.chat.roomPane.listView.member.invitedIcon :
admin ? theme.chat.roomPane.listView.member.adminIcon :
theme.chat.roomPane.listView.member.moderatorIcon
HoverHandler { id: membershipIcon }

32
src/gui/Base/MultiviewPane.qml
View File

@ -6,32 +6,12 @@ import QtQuick.Layouts 1.12
HDrawer {
id: pane
defaultSize: buttonRepeater.summedImplicitWidth
minimumSize:
buttonRepeater.count > 0 ? buttonRepeater.itemAt(0).implicitWidth : 0
background: HColumnLayout{
Rectangle {
color: buttonsBackgroundColor
Layout.fillWidth: true
Layout.preferredHeight: buttonFlow.height
Behavior on Layout.preferredHeight { HNumberAnimation {} }
}
Rectangle {
color: backgroundColor
Layout.fillWidth: true
Layout.fillHeight: true
}
}
property color buttonsBackgroundColor
property color backgroundColor
readonly property alias buttonRepeater: buttonRepeater
readonly property alias swipeView: swipeView
@ -42,16 +22,22 @@ HDrawer {
HColumnLayout {
anchors.fill: parent
HFlow {
id: buttonFlow
populate: null
Rectangle {
color: buttonsBackgroundColor
Layout.fillWidth: true
Layout.preferredHeight: childrenRect.height
HFlow {
id: buttonFlow
width: parent.width
populate: null
HRepeater {
id: buttonRepeater
}
}
}
HSwipeView {
id: swipeView

6
src/gui/MainPane/Account.qml
View File

@ -8,16 +8,16 @@ import "../Base"
HTileDelegate {
id: account
rightPadding: 0
backgroundColor: theme.mainPane.account.background
backgroundColor: theme.mainPane.listView.account.background
opacity: collapsed && ! mainPane.filter ?
theme.mainPane.account.collapsedOpacity : 1
theme.mainPane.listView.account.collapsedOpacity : 1
title.text: model.display_name || model.id
title.font.pixelSize: theme.fontSize.big
title.color:
hovered ?
utils.nameColor(model.display_name || model.id.substring(1)) :
theme.mainPane.account.name
theme.mainPane.listView.account.name
image: HUserAvatar {
userId: model.id

2
src/gui/MainPane/AccountRoomsDelegate.qml
View File

@ -27,7 +27,7 @@ Column {
view: accountRooms.view
opacity: collapsed || noFilterResults ?
theme.mainPane.account.collapsedOpacity : 1
theme.mainPane.listView.account.collapsedOpacity : 1
}
HListView {

6
src/gui/MainPane/AccountRoomsList.qml
View File

@ -231,4 +231,10 @@ HListView {
interval: 200
onTriggered: activate()
}
Rectangle {
anchors.fill: parent
z: -100
color: theme.mainPane.listView.background
}
}

13
src/gui/MainPane/BottomBar.qml
View File

@ -4,20 +4,26 @@ import QtQuick 2.12
import QtQuick.Layouts 1.12
import "../Base"
HRowLayout {
Rectangle {
// Hide filter field overflowing for a sec on size changes
clip: true
color: theme.mainPane.bottomBar.background
property AccountRoomsList mainPaneList
readonly property alias addAccountButton: addAccountButton
readonly property alias filterField: filterField
property alias roomFilter: filterField.text
HRowLayout {
anchors.fill: parent
HButton {
id: addAccountButton
icon.name: "add-account"
toolTip.text: qsTr("Add another account")
backgroundColor: theme.mainPane.settingsButton.background
backgroundColor: theme.mainPane.bottomBar.settingsButtonBackground
onClicked: pageLoader.showPage("AddAccount/AddAccount")
Layout.fillHeight: true
@ -28,7 +34,7 @@ HRowLayout {
saveName: "roomFilterField"
placeholderText: qsTr("Filter rooms")
backgroundColor: theme.mainPane.filterRooms.background
backgroundColor: theme.mainPane.bottomBar.filterFieldBackground
bordered: false
opacity: width >= 16 * theme.uiScale ? 1 : 0
@ -61,3 +67,4 @@ HRowLayout {
Behavior on opacity { HNumberAnimation {} }
}
}
}

13
src/gui/MainPane/Room.qml
View File

@ -7,8 +7,8 @@ import ".."
import "../Base"
HTileDelegate {
backgroundColor: theme.mainPane.room.background
opacity: model.left ? theme.mainPane.room.leftRoomOpacity : 1
backgroundColor: theme.mainPane.listView.room.background
opacity: model.left ? theme.mainPane.listView.room.leftRoomOpacity : 1
topPadding: theme.spacing / (model.index === 0 ? 1 : 1.5)
bottomPadding: theme.spacing / (model.index === view.count - 1 ? 1 : 1.5)
@ -21,7 +21,7 @@ HTileDelegate {
mxc: model.avatar_url
}
title.color: theme.mainPane.room.name
title.color: theme.mainPane.listView.room.name
title.text: model.display_name || qsTr("Empty room")
additionalInfo.children: HIcon {
@ -33,7 +33,7 @@ HTileDelegate {
Behavior on Layout.maximumWidth { HNumberAnimation {} }
}
subtitle.color: theme.mainPane.room.subtitle
subtitle.color: theme.mainPane.listView.room.subtitle
subtitle.textFormat: Text.StyledText
subtitle.font.italic:
lastEvent && lastEvent.event_type === "RoomMessageEmote"
@ -55,11 +55,12 @@ HTileDelegate {
return text.replace(
/< *span +class=['"]?quote['"]? *>(.+?)<\/ *span *>/g,
`<font color="${theme.mainPane.room.subtitleQuote}">$1</font>`,
`<font color="${theme.mainPane.listView.room.subtitleQuote}">` +
`$1</font>`,
)
}
rightInfo.color: theme.mainPane.room.lastEventDate
rightInfo.color: theme.mainPane.listView.room.lastEventDate
rightInfo.text: {
model.last_event_date < new Date(1) ?
"" :

4
src/gui/MainPane/TopBar.qml
View File

@ -12,6 +12,7 @@ Rectangle {
anchors.fill: parent
HButton {
backgroundColor: "transparent"
icon.name: "placeholder-logo"
icon.color: theme.mainPane.topBar.placeholderLogo
@ -29,6 +30,7 @@ Rectangle {
}
HButton {
backgroundColor: "transparent"
icon.name: "developper-console"
toolTip.text: qsTr("Developper console")
@ -38,6 +40,7 @@ Rectangle {
}
HButton {
backgroundColor: "transparent"
icon.name: "reload-config-files"
toolTip.text: qsTr("Reload config files")
@ -47,6 +50,7 @@ Rectangle {
}
HButton {
backgroundColor: "transparent"
icon.name: "settings"
toolTip.text: qsTr("Open config folder")

8
src/gui/Pages/Chat/RoomPane/MemberDelegate.qml
View File

@ -6,9 +6,9 @@ import "../../../Base"
HTileDelegate {
id: memberDelegate
backgroundColor: theme.chat.roomPane.member.background
backgroundColor: theme.chat.roomPane.listView.member.background
contentOpacity:
model.invited ? theme.chat.roomPane.member.invitedOpacity : 1
model.invited ? theme.chat.roomPane.listView.member.invitedOpacity : 1
image: HUserAvatar {
userId: model.id
@ -23,10 +23,10 @@ HTileDelegate {
title.color:
memberDelegate.hovered ?
utils.nameColor(model.display_name || model.id.substring(1)) :
theme.chat.roomPane.member.name
theme.chat.roomPane.listView.member.name
subtitle.text: model.display_name ? model.id : ""
subtitle.color: theme.chat.roomPane.member.subtitle
subtitle.color: theme.chat.roomPane.listView.member.subtitle
contextMenu: HMenu {
HMenuItem {

24
src/gui/Pages/Chat/RoomPane/MemberView.qml
View File

@ -27,19 +27,32 @@ HColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
Rectangle {
anchors.fill: parent
z: -100
color: theme.chat.roomPane.listView.background
}
}
HRowLayout {
Rectangle {
color: theme.chat.roomPane.bottomBar.background
Layout.fillWidth: true
Layout.minimumHeight: theme.baseElementsHeight
Layout.maximumHeight: Layout.minimumHeight
HRowLayout {
anchors.fill: parent
HTextField {
id: filterField
saveName: "memberFilterField"
saveId: chat.roomId
placeholderText: qsTr("Filter members")
backgroundColor: theme.chat.roomPane.filterMembers.background
backgroundColor:
theme.chat.roomPane.bottomBar.filterMembers.background
bordered: false
opacity: width >= 16 * theme.uiScale ? 1 : 0
@ -52,7 +65,8 @@ HColumnLayout {
HButton {
id: inviteButton
icon.name: "room-send-invite"
backgroundColor: theme.chat.roomPane.inviteButton.background
backgroundColor:
theme.chat.roomPane.bottomBar.inviteButton.background
enabled: chat.roomInfo.can_invite
toolTip.text:
@ -70,7 +84,8 @@ HColumnLayout {
userId: chat.userId,
roomId: chat.roomId,
roomName: chat.roomInfo.display_name,
invitingAllowed: Qt.binding(() => inviteButton.enabled),
invitingAllowed:
Qt.binding(() => inviteButton.enabled),
},
)
@ -80,3 +95,4 @@ HColumnLayout {
}
}
}
}

4
src/gui/Pages/Chat/RoomPane/RoomPane.qml
View File

@ -9,8 +9,8 @@ MultiviewPane {
saveName: "roomPane"
edge: Qt.RightEdge
buttonsBackgroundColor: theme.chat.roomPaneButtons.background
backgroundColor: theme.chat.roomPane.background
buttonsBackgroundColor: theme.chat.roomPane.topBar.background
background: Rectangle { color: theme.chat.roomPane.background }
buttonRepeater.model: [

2
src/gui/Pages/Chat/Timeline/EventContent.qml
View File

@ -154,7 +154,7 @@ HRowLayout {
(pureMedia ? 0 : parent.leftPadding + parent.rightPadding),
)
height: contentColumn.height
z: -1
z: -100
color: isOwn?
theme.chat.message.ownBackground :
theme.chat.message.background

96
src/themes/Glass.qpl
View File

@ -31,48 +31,46 @@ fontFamily:
colors:
int hue: 240
real intensity: 1.0
real coloredTextIntensity: intensity * 75
int saturation: 60
int bgSaturation: saturation / 1.5
real intensity: 1.0
int coloredTextSaturation: saturation + 20
real opacity: 0.7
real bgOpacity: 0.5
color weakBackground: hsluv(hue, bgSaturation, intensity * 9, opacity)
color mediumBackground: hsluv(hue, bgSaturation, intensity * 6.8, opacity)
color strongBackground:
hsluv(hue, bgSaturation * 2, intensity * 2, Math.max(0.6, opacity))
color strongBackground: hsluv(hue, bgSaturation * 2, 0, opacity)
color accentBackground:
hsluv(hue, saturation * 1.5, intensity * 42, 1)
color accentElement:
hsluv(hue, saturation * 1.5, intensity * 52, 1)
color strongAccentElement:
hsluv(hue, saturation * 1.5, intensity * 72, 1)
color accentBackground: hsluv(hue, saturation, intensity * 42, 1)
color accentElement: hsluv(hue, saturation * 1.5, intensity * 52, 1)
color strongAccentElement: hsluv(hue, saturation * 1.5, intensity * 72, 1)
color positiveBackground:
hsluv(155, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
hsluv(155, saturation * 1.5, intensity * 52, opacity)
color middleBackground:
hsluv(60, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
hsluv(60, saturation * 1.5, intensity * 52, opacity)
color negativeBackground:
hsluv(0, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
hsluv(0, saturation * 1.5, intensity * 52, opacity)
color alertBackground: negativeBackground
color brightText: hsluv(0, 0, intensity * 100)
color text: hsluv(0, 0, intensity * 85)
color halfDimText: hsluv(0, 0, intensity * 72)
color dimText: hsluv(0, 0, intensity * 60)
color warningText: hsluv(60, saturation * 1.5, 72)
color errorText: hsluv(0, saturation * 1.5, 72)
color accentText: hsluv(hue, saturation * 1.5, 72)
color link: accentText
color code: hsluv(hue + 5, saturation * 1.5, intensity * 60)
color warningText: hsluv(60, coloredTextSaturation, coloredTextIntensity)
color errorText: hsluv(0, coloredTextSaturation, coloredTextIntensity)
color accentText: hsluv(hue, coloredTextSaturation, coloredTextIntensity)
color link: hsluv(hue, coloredTextSaturation, coloredTextIntensity)
color code: hsluv(hue + 10, coloredTextSaturation, coloredTextIntensity)
// Example of an animation, set running: true to enable
NumberAnimation on hue
@ -156,7 +154,9 @@ controls:
color subtitle: colors.dimText
listView:
color highlight: colors.strongBackground
color highlight: hsluv(
colors.hue, colors.bgSaturation * 2, 0, colors.opacity / 2,
)
color smallPaneHighlight: colors.accentBackground
textField:
@ -234,8 +234,8 @@ controls:
real opacity: 1.0
displayName:
int saturation: colors.saturation + 12
int lightness: Math.min(72, colors.intensity * 72)
int saturation: colors.coloredTextSaturation
int lightness: colors.coloredTextIntensity - 4
// Specific interface parts
@ -249,19 +249,21 @@ ui:
point gradientStart: Qt.point(0, 0)
point gradientEnd: Qt.point(window.width, window.height)
color gradientStartColor: hsluv(0, 0, 0, colors.bgOpacity)
color gradientEndColor: hsluv(0, 0, 0, colors.bgOpacity)
color gradientStartColor: hsluv(0, 0, 0, 0.5)
color gradientEndColor: hsluv(0, 0, 0, 0.5)
mainPane:
color background: colors.mediumBackground
color background: "transparent"
topBar:
color background: colors.strongBackground
color placeholderLogo: colors.strongAccentElement
color placeholderLogo: icons.colorize
color nameVersionLabel: colors.text
listView:
color background: colors.mediumBackground
account:
real collapsedOpacity: 0.3
color background: "transparent"
@ -275,13 +277,12 @@ mainPane:
color lastEventDate: colors.halfDimText
color subtitle: colors.dimText
color subtitleQuote: hsluv(135, colors.saturation * 2.25, 65)
color subtitleQuote: chat.message.quote
settingsButton:
color background: colors.strongBackground
filterRooms:
bottomBar:
color background: colors.strongBackground
color settingsButtonBackground: "transparent"
color filterFieldBackground: "transparent"
chat:
@ -290,10 +291,13 @@ chat:
color name: colors.text
color topic: colors.dimText
roomPaneButtons:
color background: chat.roomHeader.background
roomPane:
color background: "transparent"
topBar:
color background: colors.strongBackground
listView:
color background: colors.mediumBackground
member:
@ -307,11 +311,14 @@ chat:
color moderatorIcon: adminIcon
color invitedIcon: hsluv(0, colors.saturation * 2.25, 60)
inviteButton:
bottomBar:
color background: colors.strongBackground
inviteButton:
color background: "transparent"
filterMembers:
color background: colors.strongBackground
color background: "transparent"
eventList:
int ownEventsOnRightUnderWidth: 768 * theme.uiScale
@ -323,12 +330,7 @@ chat:
int radius: theme.radius
color background: colors.mediumBackground
color ownBackground: hsluv(
colors.hue,
colors.bgSaturation * 2,
colors.intensity * 5,
Math.max(0.6, opacity),
)
color ownBackground: colors.strongBackground
color body: colors.text
color date: colors.dimText
@ -336,7 +338,9 @@ chat:
color noticeBody: colors.halfDimText
int noticeLineWidth: 1
color quote: hsluv(135, colors.saturation * 1.5, colors.intensity * 80)
color quote: hsluv(
135, colors.coloredTextSaturation, colors.coloredTextIntensity,
)
color link: colors.link
color code: colors.code

103
src/themes/Midnight.qpl
View File

@ -31,48 +31,46 @@ fontFamily:
colors:
int hue: 240
real intensity: 1.0
real coloredTextIntensity: intensity * 75
int saturation: 60
int bgSaturation: saturation
real intensity: 1.0
int coloredTextSaturation: saturation + 20
real opacity: 1.0
real bgOpacity: 1.0
color weakBackground: hsluv(hue, bgSaturation, intensity * 9, opacity)
color mediumBackground: hsluv(hue, bgSaturation, intensity * 6.8, opacity)
color strongBackground:
hsluv(hue, bgSaturation * 2, intensity * 2, Math.max(0.6, opacity))
color strongBackground: hsluv(hue, bgSaturation * 2,intensity * 2, opacity)
color accentBackground:
hsluv(hue, saturation * 1.5, intensity * 32, Math.max(0.9, opacity))
color accentElement:
hsluv(hue, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
color strongAccentElement:
hsluv(hue, saturation * 1.5, intensity * 72, Math.max(0.6, opacity))
color accentBackground: hsluv(hue, saturation, intensity * 32, 1)
color accentElement: hsluv(hue, saturation * 1.5, intensity * 52, 1)
color strongAccentElement: hsluv(hue, saturation * 1.5, intensity * 72, 1)
color positiveBackground:
hsluv(155, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
hsluv(155, saturation * 1.5, intensity * 52, opacity)
color middleBackground:
hsluv(60, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
hsluv(60, saturation * 1.5, intensity * 52, opacity)
color negativeBackground:
hsluv(0, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
hsluv(0, saturation * 1.5, intensity * 52, opacity)
color alertBackground: negativeBackground
color brightText: hsluv(0, 0, intensity * 100)
color text: hsluv(0, 0, intensity * 85)
color halfDimText: hsluv(0, 0, intensity * 72)
color dimText: hsluv(0, 0, intensity * 60)
color warningText: hsluv(60, saturation * 1.5, 72)
color errorText: hsluv(0, saturation * 1.5, 72)
color accentText: hsluv(hue, saturation * 1.5, 72)
color link: accentText
color code: hsluv(hue + 5, saturation * 1.5, intensity * 60)
color warningText: hsluv(60, coloredTextSaturation, coloredTextIntensity)
color errorText: hsluv(0, coloredTextSaturation, coloredTextIntensity)
color accentText: hsluv(hue, coloredTextSaturation, coloredTextIntensity)
color link: hsluv(hue, coloredTextSaturation, coloredTextIntensity)
color code: hsluv(hue + 10, coloredTextSaturation, coloredTextIntensity)
// Example of an animation, set running: true to enable
NumberAnimation on hue
@ -156,7 +154,12 @@ controls:
color subtitle: colors.dimText
listView:
color highlight: colors.strongBackground
color highlight: hsluv(
colors.hue,
colors.bgSaturation * 2,
colors.intensity * 2,
colors.opacity / 2,
)
color smallPaneHighlight: colors.accentBackground
textField:
@ -234,8 +237,8 @@ controls:
real opacity: 1.0
displayName:
int saturation: colors.saturation + 12
int lightness: Math.min(72, colors.intensity * 72)
int saturation: colors.coloredTextSaturation
int lightness: colors.coloredTextIntensity - 4
// Specific interface parts
@ -250,25 +253,27 @@ ui:
point gradientEnd: Qt.point(window.width, window.height)
color gradientStartColor:
hsluv(colors.hue - 50, 100, colors.intensity * 8, colors.bgOpacity)
hsluv(colors.hue - 50, 100, colors.intensity * 8)
color gradientEndColor:
hsluv(colors.hue + 20, 30, colors.intensity * 22, colors.bgOpacity)
hsluv(colors.hue + 20, 30, colors.intensity * 22)
// To have a solid color instead,
// set gradientStartColor and gradientEndColor to the same value, e.g.:
// color gradientStartColor: hsluv(0, 0, 0, colors.bgOpacity)
// color gradientEndColor: hsluv(0, 0, 0, colors.bgOpacity)
// color gradientStartColor: hsluv(0, 0, 0, 0.5)
// color gradientEndColor: hsluv(0, 0, 0, 0.5)
mainPane:
color background: colors.mediumBackground
color background: "transparent"
topBar:
color background: colors.strongBackground
color placeholderLogo: colors.strongAccentElement
color placeholderLogo: icons.colorize
color nameVersionLabel: colors.text
listView:
color background: colors.mediumBackground
account:
real collapsedOpacity: 0.3
color background: "transparent"
@ -282,13 +287,12 @@ mainPane:
color lastEventDate: colors.halfDimText
color subtitle: colors.dimText
color subtitleQuote: hsluv(135, colors.saturation * 2.25, 65)
color subtitleQuote: chat.message.quote
settingsButton:
color background: colors.strongBackground
filterRooms:
bottomBar:
color background: colors.strongBackground
color settingsButtonBackground: "transparent"
color filterFieldBackground: "transparent"
chat:
@ -297,10 +301,13 @@ chat:
color name: colors.text
color topic: colors.dimText
roomPaneButtons:
color background: chat.roomHeader.background
roomPane:
color background: "transparent"
topBar:
color background: colors.strongBackground
listView:
color background: colors.mediumBackground
member:
@ -314,11 +321,14 @@ chat:
color moderatorIcon: adminIcon
color invitedIcon: hsluv(0, colors.saturation * 2.25, 60)
inviteButton:
bottomBar:
color background: colors.strongBackground
inviteButton:
color background: "transparent"
filterMembers:
color background: colors.strongBackground
color background: "transparent"
eventList:
int ownEventsOnRightUnderWidth: 768 * theme.uiScale
@ -330,12 +340,7 @@ chat:
int radius: theme.radius
color background: colors.mediumBackground
color ownBackground: hsluv(
colors.hue,
colors.bgSaturation * 2,
colors.intensity * 5,
Math.max(0.6, opacity),
)
color ownBackground: colors.strongBackground
color body: colors.text
color date: colors.dimText
@ -343,7 +348,9 @@ chat:
color noticeBody: colors.halfDimText
int noticeLineWidth: 1
color quote: hsluv(135, colors.saturation * 1.5, colors.intensity * 80)
color quote: hsluv(
135, colors.coloredTextSaturation, colors.coloredTextIntensity,
)
color link: colors.link
color code: colors.code