Reaction and Button layout fixes
2 files changed, 21 insertions, 23 deletions
diff --git a/resources/qml/ImageButton.qml b/resources/qml/ImageButton.qml
index dc576e18..dd100503 100644
--- a/resources/qml/ImageButton.qml
+++ b/resources/qml/ImageButton.qml
@@ -1,17 +1,11 @@
import QtQuick 2.3
import QtQuick.Controls 2.3
-Button {
+AbstractButton {
property string image: undefined
id: button
- flat: true
-
- // disable background, because we don't want a border on hover
- background: Item {
- }
-
Image {
id: buttonImg
// Workaround, can't get icon.source working for now...
diff --git a/resources/qml/Reactions.qml b/resources/qml/Reactions.qml
index c70519a4..cb15b723 100644
--- a/resources/qml/Reactions.qml
+++ b/resources/qml/Reactions.qml
@@ -11,48 +11,53 @@ Flow {
Repeater {
id: repeater
- Button {
+ AbstractButton {
id: reaction
text: model.key
hoverEnabled: true
- implicitWidth: contentItem.childrenRect.width + contentItem.padding*2
- implicitHeight: contentItem.childrenRect.height + contentItem.padding*2
+ implicitWidth: contentItem.childrenRect.width + contentItem.leftPadding*2
+ implicitHeight: contentItem.childrenRect.height
ToolTip.visible: hovered
ToolTip.text: model.users
+
contentItem: Row {
anchors.centerIn: parent
- spacing: 2
- padding: 4
+ spacing: reactionText.implicitHeight/4
+ leftPadding: reactionText.implicitHeight / 2
+ rightPadding: reactionText.implicitHeight / 2
+
+ TextMetrics {
+ id: textMetrics
+ font.family: settings.emoji_font_family
+ elide: Text.ElideRight
+ elideWidth: 150
+ text: reaction.text
+ }
Text {
anchors.baseline: reactionCounter.baseline
id: reactionText
- text: reaction.text
+ text: textMetrics.elidedText + (textMetrics.elidedText == textMetrics.text ? "" : "…")
font.family: settings.emoji_font_family
- opacity: enabled ? 1.0 : 0.3
color: reaction.hovered ? colors.highlight : colors.text
- horizontalAlignment: Text.AlignHCenter
- verticalAlignment: Text.AlignVCenter
- elide: Text.ElideRight
+ maximumLineCount: 1
}
Rectangle {
- height: reactionText.implicitHeight
+ id: divider
+ height: reactionCounter.implicitHeight * 1.4
width: 1
color: reaction.hovered ? colors.highlight : colors.text
}
Text {
+ anchors.verticalCenter: divider.verticalCenter
id: reactionCounter
text: model.counter
font: reaction.font
- opacity: enabled ? 1.0 : 0.3
color: reaction.hovered ? colors.highlight : colors.text
- horizontalAlignment: Text.AlignHCenter
- verticalAlignment: Text.AlignVCenter
- elide: Text.ElideRight
}
}
@@ -60,7 +65,6 @@ Flow {
anchors.centerIn: parent
implicitWidth: reaction.implicitWidth
implicitHeight: reaction.implicitHeight
- opacity: enabled ? 1 : 0.3
border.color: (reaction.hovered || model.selfReacted )? colors.highlight : colors.text
color: colors.base
border.width: 1
|
