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

Replace HInteractiveRectangle by HTiledelegate

Browse Source
This commit is contained in:
miruka 2019-08-21 04:39:07 -04:00
parent 4abf57c8d4
commit 46e685847f
10 changed files with 215 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
TODO.md
View File

@ -1,6 +1,5 @@
- Refactoring
- Use HInterfaceBox for EditAccount Profile and Encryption
- Use ItemDelegate
- Make all icon SVG files white/black, since we can now use ColorOverlay
- Make the icon blue in EditAccount when hovering and no avatar set
@ -12,6 +11,7 @@
- Room Sidepane
- Hide when window too small
- Also save/load its size
- Is auto-sizing actually needed, or can we just set a default manual size?
- When qml syntax highlighting supports ES6 string interpolation, use them
- Fixes

5
src/qml/Base/HButton.qml
View File

@ -4,6 +4,11 @@ import QtQuick.Layouts 1.12
Button {
id: button
spacing: theme.spacing
leftPadding: spacing / 1.5
rightPadding: spacing / 1.5
topPadding: spacing / 2
bottomPadding: spacing / 2
opacity: enabled ? 1 : theme.disabledElementsOpacity
onVisibleChanged: if (! visible) loading = false

3
src/qml/Base/HFixedListView.qml
View File

@ -18,8 +18,7 @@ ListView {
highlight: HRectangle {
color: theme.controls.interactiveRectangle.checkedOverlay
opacity: theme.controls.interactiveRectangle.checkedOpacity
color: theme.controls.button.checkedOverlay
}
// Important:

101
src/qml/Base/HTileDelegate.qml Normal file
View File

@ -0,0 +1,101 @@
import QtQuick 2.12
import QtQuick.Layouts 1.12
HButton {
id: tile
signal activated()
signal highlightMe()
property bool isCurrent: false
readonly property var delegateModel: model
default property var additionalItems: []
readonly property alias title: title
readonly property alias additionalInfo: additionalInfo
readonly property alias rightInfo: rightInfo
readonly property alias subtitle: subtitle
property Item image
property Item details: HColumnLayout {
Layout.fillWidth: true
HRowLayout {
spacing: tile.spacing
HLabel {
id: title
text: "Title"
elide: Text.ElideRight
verticalAlignment: Qt.AlignVCenter
Layout.fillWidth: true
}
HRowLayout {
id: additionalInfo
}
HLabel {
id: rightInfo
font.pixelSize: theme.fontSize.small
visible: Layout.maximumWidth > 0
Layout.maximumWidth:
text && tile.width >= 200 ? implicitWidth : 0
Behavior on Layout.maximumWidth { HNumberAnimation {} }
}
}
HRichLabel {
id: subtitle
textFormat: Text.StyledText
font.pixelSize: theme.fontSize.small
elide: Text.ElideRight
visible: Layout.maximumHeight > 0
Layout.maximumHeight: text ? implicitWidth : 0
Layout.fillWidth: true
Behavior on Layout.maximumHeight { HNumberAnimation {} }
}
}
contentItem: HRowLayout {
spacing: tile.spacing
children: [image, details].concat(additionalItems)
}
onIsCurrentChanged: if (isCurrent) highlightMe()
onHighlightMe: accountRoomList.currentIndex = model.index
onClicked: {
ListView.highlightRangeMode = ListView.NoHighlightRange
ListView.highlightMoveDuration = 0
activated()
ListView.highlightRangeMode = ListView.ApplyRange
ListView.highlightMoveDuration = theme.animationDuration
}
Timer {
interval: 100
repeat: true
running: ListView.currentIndex == -1
// Component.onCompleted won't work for this
onTriggered: if (isCurrent) highlightMe()
}
// Connections {
// target: ListView
// onHideHoverHighlight: tile.hovered = false
// }
}

32
src/qml/Chat/RoomSidePane/MemberDelegate.qml
View File

@ -1,38 +1,18 @@
import QtQuick 2.12
import QtQuick.Layouts 1.12
import "../../Base"
import "../../utils.js" as Utils
HInteractiveRectangle {
HTileDelegate {
id: memberDelegate
width: memberList.width
height: rowLayout.height
HRowLayout {
id: rowLayout
x: roomSidePane.currentSpacing
width: parent.width - roomSidePane.currentSpacing * 1.5
height: avatar.height + roomSidePane.currentSpacing / 1.5
spacing: roomSidePane.currentSpacing
rightPadding: 0
backgroundColor: theme.sidePane.member.background
HUserAvatar {
id: avatar
image: HUserAvatar {
userId: model.user_id
displayName: model.display_name
avatarUrl: model.avatar_url
}
HColumnLayout {
Layout.fillWidth: true
HLabel {
id: memberName
text: model.display_name || model.user_id
elide: Text.ElideRight
verticalAlignment: Qt.AlignVCenter
Layout.fillWidth: true
}
}
}
title.color: theme.sidePane.member.name
title.text: model.display_name || model.user_id
}

5
src/qml/Chat/RoomSidePane/MembersView.qml
View File

@ -6,7 +6,6 @@ import "../../utils.js" as Utils
HColumnLayout {
HListView {
id: memberList
bottomMargin: currentSpacing
model: HListModel {
keyField: "user_id"
@ -16,7 +15,9 @@ HColumnLayout {
)
}
delegate: MemberDelegate {}
delegate: MemberDelegate {
width: memberList.width
}
Layout.fillWidth: true
Layout.fillHeight: true

2
src/qml/SidePane/AccountRoomList.qml
View File

@ -75,7 +75,7 @@ HListView {
}
function activate() {
currentItem.item.activate()
currentItem.item.activated()
}
function toggleCollapseAccount() {

112
src/qml/SidePane/DelegateAccount.qml
View File

@ -2,21 +2,24 @@ import QtQuick 2.12
import QtQuick.Layouts 1.12
import "../Base"
HInteractiveRectangle {
HTileDelegate {
id: accountDelegate
color: theme.sidePane.account.background
// checked: isCurrent
height: row.height
spacing: 0
topPadding: model.index > 0 ? sidePane.currentSpacing / 2 : 0
bottomPadding: topPadding
backgroundColor: theme.sidePane.account.background
opacity: collapsed && ! forceExpand ?
theme.sidePane.account.collapsedOpacity : 1
readonly property var delegateModel: model
readonly property bool isCurrent:
window.uiState.page == "Pages/EditAccount/EditAccount.qml" &&
isCurrent: window.uiState.page == "Pages/EditAccount/EditAccount.qml" &&
window.uiState.pageProperties.userId == model.data.user_id
readonly property bool forceExpand:
Boolean(accountRoomList.filter)
Behavior on opacity { HNumberAnimation {} }
readonly property bool forceExpand: Boolean(accountRoomList.filter)
// Hide harmless error when a filter matches nothing
readonly property bool collapsed: try {
@ -24,109 +27,50 @@ HInteractiveRectangle {
} catch (err) {}
onIsCurrentChanged: if (isCurrent) beHighlighted()
onActivated: pageLoader.showPage(
"EditAccount/EditAccount", { "userId": model.data.user_id }
)
function beHighlighted() {
accountRoomList.currentIndex = model.index
}
function toggleCollapse() {
window.uiState.collapseAccounts[model.data.user_id] = ! collapsed
window.uiStateChanged()
}
function activate() {
pageLoader.showPage(
"EditAccount/EditAccount", { "userId": model.data.user_id }
)
}
// Component.onCompleted won't work for this
Timer {
interval: 100
repeat: true
running: accountRoomList.currentIndex == -1
onTriggered: if (isCurrent) beHighlighted()
}
Connections {
target: accountRoomList
onHideHoverHighlight: accountDelegate.hovered = false
}
TapHandler {
onTapped: {
accountRoomList.highlightRangeMode = ListView.NoHighlightRange
accountRoomList.highlightMoveDuration = 0
activate()
accountRoomList.highlightRangeMode = ListView.ApplyRange
accountRoomList.highlightMoveDuration = theme.animationDuration
}
}
HRowLayout {
id: row
width: parent.width
HUserAvatar {
id: avatar
image: HUserAvatar {
userId: model.data.user_id
displayName: model.data.display_name
avatarUrl: model.data.avatar_url
opacity: collapsed && ! forceExpand ?
theme.sidePane.account.collapsedOpacity : 1
Behavior on opacity { HNumberAnimation {} }
Layout.topMargin: model.index > 0 ? sidePane.currentSpacing / 2 : 0
Layout.bottomMargin: Layout.topMargin
}
HLabel {
id: accountLabel
color: theme.sidePane.account.name
text: model.data.display_name || model.data.user_id
font.pixelSize: theme.fontSize.big
elide: HLabel.ElideRight
leftPadding: sidePane.currentSpacing
verticalAlignment: Text.AlignVCenter
opacity: collapsed && ! forceExpand ?
theme.sidePane.account.collapsedOpacity : 1
Behavior on opacity { HNumberAnimation {} }
Layout.fillWidth: true
Layout.fillHeight: true
}
title.color: theme.sidePane.account.name
title.text: model.data.display_name || model.data.user_id
title.font.pixelSize: theme.fontSize.big
title.leftPadding: sidePane.currentSpacing
HButton {
id: expandButton
id: expand
iconName: "expand"
ico.dimension: 16
backgroundColor: "transparent"
leftPadding: sidePane.currentSpacing
leftPadding: sidePane.currentSpacing / 1.5
rightPadding: leftPadding
onClicked: accountDelegate.toggleCollapse()
visible: opacity > 0
opacity:
accountDelegate.forceExpand ? 0 :
collapsed ? theme.sidePane.account.collapsedOpacity + 0.2 :
1
Behavior on opacity { HNumberAnimation {} }
opacity: accountDelegate.forceExpand ? 0 : 1
ico.transform: Rotation {
origin.x: expandButton.ico.dimension / 2
origin.y: expandButton.ico.dimension / 2
origin.x: expand.ico.dimension / 2
origin.y: expand.ico.dimension / 2
angle: collapsed ? 180 : 90
Behavior on angle { HNumberAnimation {} }
}
Behavior on opacity { HNumberAnimation {} }
Layout.fillHeight: true
}
}
}

136
src/qml/SidePane/DelegateRoom.qml
View File

@ -3,141 +3,62 @@ import QtQuick.Layouts 1.12
import "../Base"
import "../utils.js" as Utils
HInteractiveRectangle {
HTileDelegate {
id: roomDelegate
color: theme.sidePane.room.background
visible: height > 0
height: rowLayout.height
spacing: sidePane.currentSpacing
backgroundColor: theme.sidePane.room.background
opacity: model.data.left ? theme.sidePane.room.leftRoomOpacity : 1
isCurrent: window.uiState.page == "Chat/Chat.qml" &&
window.uiState.pageProperties.userId == model.user_id &&
window.uiState.pageProperties.roomId == model.data.room_id
Behavior on opacity { HNumberAnimation {} }
readonly property var delegateModel: model
readonly property bool forceExpand:
Boolean(accountRoomList.filter)
readonly property bool isCurrent:
window.uiState.page == "Chat/Chat.qml" &&
window.uiState.pageProperties.userId == model.user_id &&
window.uiState.pageProperties.roomId == model.data.room_id
readonly property var eventDate:
model.data.last_event ? model.data.last_event.date : null
onIsCurrentChanged: if (isCurrent) beHighlighted()
onActivated: pageLoader.showRoom(model.user_id, model.data.room_id)
function beHighlighted() {
accountRoomList.currentIndex = model.index
}
function activate() {
pageLoader.showRoom(model.user_id, model.data.room_id)
}
// Component.onCompleted won't work for this
Timer {
interval: 100
repeat: true
running: accountRoomList.currentIndex == -1
onTriggered: if (isCurrent) beHighlighted()
}
Connections {
target: accountRoomList
onHideHoverHighlight: roomDelegate.hovered = false
}
TapHandler {
onTapped: {
accountRoomList.highlightRangeMode = ListView.NoHighlightRange
accountRoomList.highlightMoveDuration = 0
activate()
accountRoomList.highlightRangeMode = ListView.ApplyRange
accountRoomList.highlightMoveDuration = theme.animationDuration
}
}
HRowLayout {
id: rowLayout
spacing: sidePane.currentSpacing
x: sidePane.currentSpacing
width: parent.width - sidePane.currentSpacing * 1.75
height: roomName.height + subtitle.height + sidePane.currentSpacing
HRoomAvatar {
id: roomAvatar
image: HRoomAvatar {
displayName: model.data.display_name
avatarUrl: model.data.avatar_url
}
HColumnLayout {
Layout.fillWidth: true
title.color: theme.sidePane.room.name
title.text: model.data.display_name || "<i>Empty room</i>"
title.textFormat: model.data.display_name? Text.PlainText : Text.StyledText
HRowLayout {
spacing: rowLayout.spacing
HLabel {
id: roomName
color: theme.sidePane.room.name
text: model.data.display_name || "<i>Empty room</i>"
textFormat:
model.data.display_name?
Text.PlainText : Text.StyledText
elide: Text.ElideRight
verticalAlignment: Qt.AlignVCenter
Layout.fillWidth: true
}
HIcon {
additionalInfo.children: HIcon {
svgName: "invite-received"
visible: Layout.maximumWidth > 0
Layout.maximumWidth:
model.data.inviter_id && ! model.data.left ?
implicitWidth : 0
Behavior on Layout.maximumWidth { HNumberAnimation {} }
}
HLabel {
readonly property var evDate:
model.data.last_event ?
model.data.last_event.date : null
rightInfo.color: theme.sidePane.room.lastEventDate
rightInfo.text: {
! eventDate ? "" :
id: lastEventDate
font.pixelSize: theme.fontSize.small
color: theme.sidePane.room.lastEventDate
Utils.dateIsToday(eventDate) ?
Utils.formatTime(eventDate, false) : // no seconds
text: ! evDate ? "" :
eventDate.getFullYear() == new Date().getFullYear() ?
Qt.formatDate(eventDate, "d MMM") : // e.g. "5 Dec"
Utils.dateIsToday(evDate) ?
Utils.formatTime(evDate, false) : // no seconds
evDate.getFullYear() == new Date().getFullYear() ?
Qt.formatDate(evDate, "d MMM") : // e.g. "5 Dec"
evDate.getFullYear()
visible: Layout.maximumWidth > 0
Layout.maximumWidth:
text && roomDelegate.width >= 200 ? implicitWidth : 0
Behavior on Layout.maximumWidth { HNumberAnimation {} }
}
eventDate.getFullYear()
}
HRichLabel {
id: subtitle
color: theme.sidePane.room.subtitle
visible: Boolean(text)
textFormat: Text.StyledText
font.pixelSize: theme.fontSize.small
elide: Text.ElideRight
text: {
subtitle.color: theme.sidePane.room.subtitle
subtitle.textFormat: Text.StyledText
subtitle.text: {
if (! model.data.last_event) { return "" }
let ev = model.data.last_event
@ -151,9 +72,4 @@ HInteractiveRectangle {
ev.sender_name, ev.sender_id
) + ": " + ev.inline_content
}
Layout.fillWidth: true
}
}
}
}

15
src/themes/Default.qpl
View File

@ -106,17 +106,6 @@ controls:
color text: colors.text
interactiveRectangle:
color background: "transparent"
color hoveredOverlay: hsluv(0, 0, 50)
color pressedOverlay: hsluv(0, 0, 50)
color checkedOverlay: hsluv(0, 0, 50)
real hoveredOpacity: 0.3
real pressedOpacity: 0.2
real checkedOpacity: 0.2
textField:
color background: colors.inputBackground
color focusedBackground: background
@ -184,6 +173,10 @@ sidePane:
color subtitle: colors.dimText
color lastEventDate: colors.halfDimText
member:
color background: "transparent"
color name: colors.text
settingsButton:
color background: colors.inputBackground