New pane theming
This commit is contained in:
parent
93c7fadeed
commit
9b3127b7c3
5
TODO.md
5
TODO.md
|
@ -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
|
||||||
|
|
|
@ -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 {} }
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -75,4 +75,10 @@ HListView {
|
||||||
wheel.accepted = false
|
wheel.accepted = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
anchors.fill: parent
|
||||||
|
z: -100
|
||||||
|
color: theme.accountView.roomList.background
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
||||||
|
accountView:
|
||||||
|
account:
|
||||||
|
color background: colors.strongBackground
|
||||||
color name: colors.text
|
color name: colors.text
|
||||||
|
|
||||||
int avatarRadius: controls.avatar.radius
|
roomList:
|
||||||
int collapsedAvatarRadius: controls.avatar.size / 2
|
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
|
||||||
|
|
Loading…
Reference in New Issue
Block a user