Tweaked poll/quiz layout

Made it slightly more compact.
This commit is contained in:
Slava Monich 2020-12-05 05:14:51 +02:00
parent 633f765c80
commit 782561273f

View file

@ -26,7 +26,6 @@ import "../js/twemoji.js" as Emoji
Item { Item {
id: pollMessageComponent id: pollMessageComponent
property ListItem messageListItem property ListItem messageListItem
property MessageOverlayFlickable overlayFlickable property MessageOverlayFlickable overlayFlickable
property var rawMessage: messageListItem ? messageListItem.myMessage : overlayFlickable.overlayMessage property var rawMessage: messageListItem ? messageListItem.myMessage : overlayFlickable.overlayMessage
@ -46,7 +45,7 @@ Item {
} }
property bool canAnswer: !hasAnswered && !pollData.is_closed property bool canAnswer: !hasAnswered && !pollData.is_closed
property bool isQuiz: pollData.type['@type'] === "pollTypeQuiz" property bool isQuiz: pollData.type['@type'] === "pollTypeQuiz"
property bool highlighted; property bool highlighted
width: parent.width width: parent.width
height: pollColumn.height height: pollColumn.height
opacity: 0 opacity: 0
@ -78,6 +77,7 @@ Item {
id: pollColumn id: pollColumn
width: parent.width width: parent.width
spacing: Theme.paddingSmall spacing: Theme.paddingSmall
Label { Label {
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall
width: parent.width width: parent.width
@ -99,7 +99,7 @@ Item {
Item { Item {
visible: !pollMessageComponent.canAnswer visible: !pollMessageComponent.canAnswer
width: parent.width width: 1
height: Theme.paddingSmall height: Theme.paddingSmall
} }
@ -117,88 +117,89 @@ Item {
} }
} }
} }
Component { Component {
id: resultDelegate id: resultDelegate
Item { Row {
id: optionDelegate id: optionDelegate
width: pollMessageComponent.width height: Math.max(Theme.itemSizeExtraSmall, implicitHeight)
height: displayOptionLabel.height + displayOptionStatistics.height
Rectangle { Item {
id: displayOptionChosenMarker
height: parent.height height: parent.height
width: Theme.horizontalPageMargin/2 width: Theme.horizontalPageMargin/2
color: Theme.rgba(Theme.highlightBackgroundColor, Theme.highlightBackgroundOpacity) anchors.bottom: parent.bottom
visible: modelData.is_chosen
x: -width
}
OpacityRampEffect {
sourceItem: displayOptionChosenMarker
direction: OpacityRamp.LeftToRight
}
Column {
id: iconsColumn
width: pollMessageComponent.isQuiz ?Theme.iconSizeSmall + Theme.paddingMedium : Theme.paddingMedium
anchors { Rectangle {
left: parent.left id: displayOptionChosenMarker
verticalCenter: parent.verticalCenter anchors.fill: parent
color: Theme.rgba(Theme.highlightBackgroundColor, Theme.highlightBackgroundOpacity)
visible: modelData.is_chosen
} }
OpacityRampEffect {
sourceItem: displayOptionChosenMarker
direction: OpacityRamp.LeftToRight
}
}
Item {
width: Theme.paddingMedium + (pollMessageComponent.isQuiz ? Theme.iconSizeSmall : 0)
height: correctAnswerIcon.height
anchors {
bottom: parent.bottom
bottomMargin: (votePercentageBar.height - height)/2
}
Icon { Icon {
id: correctAnswerIcon
anchors.bottom: parent.bottom
highlighted: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted highlighted: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted
property bool isRight: pollMessageComponent.isQuiz && pollData.type.correct_option_id === index readonly property bool isRight: pollMessageComponent.isQuiz && pollData.type.correct_option_id === index
source: "image://theme/icon-s-accept" source: "image://theme/icon-s-accept"
visible: isRight visible: isRight
} }
} }
Label { Column {
id: displayOptionLabel width: list.width - x
text: Emoji.emojify(modelData.text, Theme.fontSizeMedium) anchors.bottom: parent.bottom
textFormat: Text.StyledText
wrapMode: Text.WrapAtWordBoundaryOrAnywhere Item {
anchors { width: parent.width
left: iconsColumn.right height: Math.max(voteTextLabel.height, votePercentageLabel.y + votePercentageLabel.height)
top: parent.top
right: parent.right
}
color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.highlightColor : Theme.primaryColor
}
Item {
id: displayOptionStatistics
height: optionVoterPercentage.height + optionVoterPercentageBar.height
anchors {
top: displayOptionLabel.bottom
left: iconsColumn.right
right: parent.right
}
Label { Label {
id: optionVoterPercentage id: voteTextLabel
font.pixelSize: Theme.fontSizeTiny property int lastLineWidth
text: qsTr("%Ln\%", "% of votes for option", modelData.vote_percentage) width: parent.width
horizontalAlignment: Text.AlignRight text: Emoji.emojify(modelData.text, Theme.fontSizeMedium)
anchors { textFormat: Text.StyledText
right: parent.right wrapMode: Text.WrapAtWordBoundaryOrAnywhere
left: parent.horizontalCenter color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.highlightColor : Theme.primaryColor
leftMargin: Theme.paddingSmall onTextChanged: lastLineWidth = 0
onLineLaidOut: {
if (line.isLast) {
lastLineWidth = line.x + line.implicitWidth
}
}
}
Label {
id: votePercentageLabel
y: (voteTextLabel.lastLineWidth + Theme.paddingLarge) > x ? voteTextLabel.height : Math.max(0, voteTextLabel.height - height)
font.pixelSize: Theme.fontSizeTiny
text: qsTr("%Ln\%", "% of votes for option", modelData.vote_percentage)
horizontalAlignment: Text.AlignRight
anchors.right: parent.right
color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor
} }
color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor
} }
Rectangle { Rectangle {
id: optionVoterPercentageBar id: votePercentageBar
height: Theme.paddingSmall height: Theme.paddingSmall
width: parent.width width: parent.width
color: Theme.rgba(pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor, 0.3) color: Theme.rgba(pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor, 0.3)
radius: height/2 radius: height/2
anchors {
left: parent.left
bottom: parent.bottom
}
Rectangle { Rectangle {
height: parent.height height: parent.height
color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.highlightColor : Theme.primaryColor color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.highlightColor : Theme.primaryColor
@ -210,32 +211,35 @@ Item {
} }
} }
Repeater { ListView {
id: list
model: pollData.options model: pollData.options
x: -Theme.horizontalPageMargin/2
width: parent.width - x
height: contentHeight
interactive: false
delegate: pollMessageComponent.canAnswer ? canAnswerDelegate : resultDelegate delegate: pollMessageComponent.canAnswer ? canAnswerDelegate : resultDelegate
} }
Row { Item {
layoutDirection: Qt.RightToLeft width: 1
width: parent.width height: Theme.paddingSmall
spacing: Theme.paddingMedium }
Behavior on height { NumberAnimation {}}
Item {
Label { x: -Theme.horizontalPageMargin/2
id: totalVoterCount width: parent.width - x
font.pixelSize: Theme.fontSizeTiny height: Math.max(voteButtons.height, totalVoterCount.height + Theme.paddingSmall)
anchors.verticalCenter: parent.verticalCenter
text: qsTr("%Ln vote(s) total", "number of total votes", pollData.total_voter_count)
width: contentWidth
height: contentHeight
horizontalAlignment: Text.AlignRight
color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor
}
Row { Row {
id: voteButtons
spacing: Theme.paddingSmall spacing: Theme.paddingSmall
width: parent.width - totalVoterCount.width - parent.spacing width: parent.width - totalVoterCount.width - parent.spacing
anchors {
left: parent.left
bottom: parent.bottom
}
IconButton { IconButton {
visible: !pollData.is_closed && pollMessageComponent.chosenIndexes.length > 0 && pollData.type.allow_multiple_answers && !pollMessageComponent.hasAnswered visible: !pollData.is_closed && pollMessageComponent.chosenIndexes.length > 0 && pollData.type.allow_multiple_answers && !pollMessageComponent.hasAnswered
opacity: visible ? 1.0 : 0.0 opacity: visible ? 1.0 : 0.0
@ -246,7 +250,6 @@ Item {
} }
} }
IconButton { IconButton {
visible: !pollMessageComponent.canAnswer && !pollData.is_anonymous && pollData.total_voter_count > 0 visible: !pollMessageComponent.canAnswer && !pollData.is_anonymous && pollData.total_voter_count > 0
icon.source: "image://theme/icon-m-media-artists" icon.source: "image://theme/icon-m-media-artists"
@ -263,9 +266,25 @@ Item {
} }
} }
} }
}
Label {
id: totalVoterCount
font.pixelSize: Theme.fontSizeTiny
anchors {
top: parent.top
right: parent.right
left: voteButtons.right
leftMargin: Theme.paddingMedium
}
text: qsTr("%Ln vote(s) total", "number of total votes", pollData.total_voter_count)
width: contentWidth
height: contentHeight
horizontalAlignment: Text.AlignRight
color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor
}
}
} }
Component { Component {
id: closePollMenuItemComponent id: closePollMenuItemComponent
MenuItem { MenuItem {
@ -276,6 +295,7 @@ Item {
} }
} }
} }
Component { Component {
id: resetAnswerMenuItemComponent id: resetAnswerMenuItemComponent
MenuItem { MenuItem {