New pane theming

This commit is contained in:
miruka 2020-04-27 23:49:36 -04:00
parent 93c7fadeed
commit 9b3127b7c3
8 changed files with 57 additions and 41 deletions

View File

@ -1,8 +1,13 @@
# TODO # TODO
- update glass theme
- back/front buttons in small window
- minimum sizes
- filter
- save/restore swipeview current rooms for accounts - save/restore swipeview current rooms for accounts
- lag when switching accounts - lag when switching accounts
- message delegate too tall - message delegate too tall
- unread counts on accounts
- fix escape keybinds (filter rooms, message selection) - fix escape keybinds (filter rooms, message selection)
- if last room event is a membership change, it won't be visible in timeline - if last room event is a membership change, it won't be visible in timeline

View File

@ -9,7 +9,7 @@ import "../Base/HTile"
HTile { HTile {
id: account id: account
implicitHeight: theme.baseElementsHeight implicitHeight: theme.baseElementsHeight
backgroundColor: theme.mainPane.listView.account.background backgroundColor: theme.accountView.account.background
padded: false padded: false
contentItem: ContentRow { contentItem: ContentRow {
@ -28,7 +28,7 @@ HTile {
color: color:
hovered ? hovered ?
utils.nameColor(model.display_name || model.id.substring(1)) : utils.nameColor(model.display_name || model.id.substring(1)) :
theme.mainPane.listView.account.name theme.accountView.account.name
Behavior on color { HColorAnimation {} } Behavior on color { HColorAnimation {} }
} }

View File

@ -52,7 +52,7 @@ HSwipeView {
placeholderText: qsTr("Filter rooms") placeholderText: qsTr("Filter rooms")
backgroundColor: backgroundColor:
theme.mainPane.bottomBar.filterFieldBackground theme.accountView.bottomBar.filterFieldBackground
bordered: false bordered: false
opacity: width >= 16 * theme.uiScale ? 1 : 0 opacity: width >= 16 * theme.uiScale ? 1 : 0

View File

@ -13,7 +13,7 @@ HColumnLayout {
HButton { HButton {
id: settingsButton id: settingsButton
backgroundColor: "transparent" backgroundColor: theme.accountsBar.settingsButtonBackground
icon.name: "settings" icon.name: "settings"
toolTip.text: qsTr("Open config folder") toolTip.text: qsTr("Open config folder")
@ -30,7 +30,7 @@ HColumnLayout {
delegate: HTileDelegate { delegate: HTileDelegate {
id: tile id: tile
width: accountList.width width: accountList.width
backgroundColor: theme.mainPane.listView.account.background backgroundColor: theme.accountsBar.accountList.account.background
leftPadding: 0 leftPadding: 0
rightPadding: leftPadding rightPadding: leftPadding
@ -45,7 +45,7 @@ HColumnLayout {
mxc: model.avatar_url mxc: model.avatar_url
// compact: account.compact // compact: account.compact
radius: theme.mainPane.listView.account.avatarRadius radius: theme.accountsBar.accountList.account.avatarRadius
} }
} }
@ -64,13 +64,19 @@ HColumnLayout {
sequences: window.settings.keys.goToNextAccount sequences: window.settings.keys.goToNextAccount
onActivated: accountView.incrementWrapIndex() onActivated: accountView.incrementWrapIndex()
} }
Rectangle {
anchors.fill: parent
z: -100
color: theme.accountsBar.accountList.background
}
} }
HButton { HButton {
id: addAccountButton id: addAccountButton
icon.name: "add-account" icon.name: "add-account"
toolTip.text: qsTr("Add another account") toolTip.text: qsTr("Add another account")
backgroundColor: theme.mainPane.bottomBar.settingsButtonBackground backgroundColor: theme.accountsBar.addAccountButtonBackground
onClicked: pageLoader.showPage("AddAccount/AddAccount") onClicked: pageLoader.showPage("AddAccount/AddAccount")
Layout.preferredHeight: theme.baseElementsHeight Layout.preferredHeight: theme.baseElementsHeight

View File

@ -7,7 +7,7 @@ import "../Base"
HDrawer { HDrawer {
id: mainPane id: mainPane
saveName: "mainPane" saveName: "mainPane"
color: theme.mainPane.background background: null
// minimumSize: bottomBar.addAccountButton.width // minimumSize: bottomBar.addAccountButton.width
// property alias filter: bottomBar.roomFilter // property alias filter: bottomBar.roomFilter

View File

@ -9,13 +9,9 @@ import "../Base/HTile"
HTileDelegate { HTileDelegate {
id: room id: room
backgroundColor: theme.mainPane.listView.room.background backgroundColor: theme.accountView.roomList.room.background
opacity: opacity:
model.left ? theme.mainPane.listView.room.leftRoomOpacity : 1 model.left ? theme.accountView.roomList.room.leftRoomOpacity : 1
// topPadding: theme.spacing / (model.index === 0 ? 1 : 1.5)
// bottomPadding:
// theme.spacing / (model.index === view.count - 1 ? 1 : 1.5)
contentItem: ContentRow { contentItem: ContentRow {
tile: room tile: room
@ -29,8 +25,8 @@ HTileDelegate {
radius: radius:
mainPane.small ? mainPane.small ?
theme.mainPane.listView.room.collapsedAvatarRadius : theme.accountView.roomList.room.collapsedAvatarRadius :
theme.mainPane.listView.room.avatarRadius theme.accountView.roomList.room.avatarRadius
Behavior on radius { HNumberAnimation {} } Behavior on radius { HNumberAnimation {} }
} }
@ -41,7 +37,7 @@ HTileDelegate {
TitleLabel { TitleLabel {
text: model.display_name || qsTr("Empty room") text: model.display_name || qsTr("Empty room")
color: theme.mainPane.listView.room.name color: theme.accountView.roomList.room.name
} }
HLabel { HLabel {
@ -63,7 +59,7 @@ HTileDelegate {
radius: theme.radius / 4 radius: theme.radius / 4
readonly property QtObject indicatorTheme: readonly property QtObject indicatorTheme:
theme.mainPane.listView.room.unreadIndicator theme.accountView.roomList.room.unreadIndicator
Behavior on color { HColorAnimation {} } Behavior on color { HColorAnimation {} }
} }
@ -84,7 +80,7 @@ HTileDelegate {
TitleRightInfoLabel { TitleRightInfoLabel {
tile: room tile: room
color: theme.mainPane.listView.room.lastEventDate color: theme.accountView.roomList.room.lastEventDate
text: { text: {
model.last_event_date < new Date(1) ? model.last_event_date < new Date(1) ?
"" : "" :
@ -106,7 +102,7 @@ HTileDelegate {
SubtitleLabel { SubtitleLabel {
tile: room tile: room
color: theme.mainPane.listView.room.subtitle color: theme.accountView.roomList.room.subtitle
textFormat: Text.StyledText textFormat: Text.StyledText
font.italic: font.italic:
lastEvent && lastEvent.event_type === "RoomMessageEmote" lastEvent && lastEvent.event_type === "RoomMessageEmote"
@ -128,7 +124,8 @@ HTileDelegate {
lastEvent.sender_name, lastEvent.sender_id lastEvent.sender_name, lastEvent.sender_id
) + ": " + lastEvent.inline_content ) + ": " + lastEvent.inline_content
const subColor = theme.mainPane.listView.room.subtitleQuote const subColor =
theme.accountView.roomList.room.subtitleQuote
return text.replace( return text.replace(
/< *span +class=['"]?quote['"]? *>(.+?)<\/ *span *>/g, /< *span +class=['"]?quote['"]? *>(.+?)<\/ *span *>/g,

View File

@ -75,4 +75,10 @@ HListView {
wheel.accepted = false wheel.accepted = false
} }
} }
Rectangle {
anchors.fill: parent
z: -100
color: theme.accountView.roomList.background
}
} }

View File

@ -43,10 +43,12 @@ colors:
real opacity: 0.7 real opacity: 0.7
color weakBackground: color weakBackground:
hsluv(hue, bgSaturation, intensity * 2.5, opacity) hsluv(hue, bgSaturation, intensity * 10, opacity)
color mediumBackground: color mediumBackground:
hsluv(hue, bgSaturation, intensity * 7, opacity) hsluv(hue, bgSaturation, intensity * 8, opacity)
color strongBackground: color strongBackground:
hsluv(hue, bgSaturation, intensity * 3, opacity)
color strongerBackground:
hsluv(hue, bgSaturation * 2, intensity, opacity) hsluv(hue, bgSaturation * 2, intensity, opacity)
color accentBackground: hsluv(hue, saturation, intensity * 40, 1) color accentBackground: hsluv(hue, saturation, intensity * 40, 1)
@ -272,23 +274,25 @@ ui:
// color gradientEndColor: hsluv(0, 0, 0, 0.5) // color gradientEndColor: hsluv(0, 0, 0, 0.5)
mainPane: accountsBar:
color background: "transparent" color settingsButtonBackground: colors.strongerBackground
color addAccountButtonBackground: colors.strongerBackground
topBar: accountList:
color background: colors.strongBackground color background: colors.strongerBackground
color nameVersionLabel: colors.text
listView:
color background: colors.mediumBackground
account: account:
real collapsedOpacity: 0.3 color background: "transparent"
color background: "transparent" int avatarRadius: controls.avatar.radius
color name: colors.text
int avatarRadius: controls.avatar.radius
int collapsedAvatarRadius: controls.avatar.size / 2 accountView:
account:
color background: colors.strongBackground
color name: colors.text
roomList:
color background: colors.mediumBackground
room: room:
real leftRoomOpacity: 0.65 real leftRoomOpacity: 0.65
@ -308,9 +312,7 @@ mainPane:
color mentionBackground: colors.alertBackground color mentionBackground: colors.alertBackground
bottomBar: bottomBar:
color background: colors.strongBackground color filterFieldBackground: colors.strongBackground
color settingsButtonBackground: "transparent"
color filterFieldBackground: "transparent"
chat: chat:
@ -367,8 +369,8 @@ chat:
color focusedHighlight: colors.accentBackground color focusedHighlight: colors.accentBackground
real focusedHighlightOpacity: 0.4 real focusedHighlightOpacity: 0.4
color background: colors.weakBackground color background: colors.mediumBackground
color ownBackground: colors.mediumBackground color ownBackground: colors.strongBackground
color checkedBackground: colors.accentBackground color checkedBackground: colors.accentBackground
color body: colors.text color body: colors.text