Fixes as a Result of Android Testing: (#25)
Use Primary Text Size Opaque Button Images Color Themselves Correctly Fixes as a Result of Android Testing: Fixes Crashes related to ButtonTextField Resize Fixes Crashes related to EllipsisLabel Reviewed-on: #25
This commit is contained in:
parent
b8d0133878
commit
3b9675e259
13
Button.qml
13
Button.qml
|
@ -40,12 +40,23 @@ Rectangle {
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
id: ico
|
id: ico
|
||||||
source: icon!="" ? gcd.assetPath + "fontawesome/"+icon+".webp" : "";
|
source: icon!="" ? gcd.assetPath + "core/"+icon+".webp" : "";
|
||||||
visible: icon != ""
|
visible: icon != ""
|
||||||
height: button.height / 2
|
height: button.height / 2
|
||||||
sourceSize.height: button.height / 2
|
sourceSize.height: button.height / 2
|
||||||
|
|
||||||
|
ColorOverlay{
|
||||||
|
id: iconColorOverlay
|
||||||
|
color: textColor
|
||||||
|
anchors.fill: ico
|
||||||
|
source: ico
|
||||||
|
antialiasing: true
|
||||||
|
smooth: true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Label {
|
Label {
|
||||||
id: buttonText
|
id: buttonText
|
||||||
font.family: Fonts.applicationFontRegular.name
|
font.family: Fonts.applicationFontRegular.name
|
||||||
|
|
|
@ -14,6 +14,9 @@ TextField {
|
||||||
font.pixelSize: Theme.secondaryTextSize * gcd.themeScale
|
font.pixelSize: Theme.secondaryTextSize * gcd.themeScale
|
||||||
width: parent.width - 20
|
width: parent.width - 20
|
||||||
|
|
||||||
|
// IMPORTANT: Setting a dynamic height on the internal button widget caused it to crash on Android when
|
||||||
|
// resized (smaller), so we set an explicit height on TextField which seems to resolve the issue.
|
||||||
|
height: font.pixelSize + 20
|
||||||
property string icon
|
property string icon
|
||||||
property string button_text
|
property string button_text
|
||||||
signal clicked
|
signal clicked
|
||||||
|
|
|
@ -1,58 +0,0 @@
|
||||||
import QtQuick 2.7
|
|
||||||
import QtQuick.Controls 2.4
|
|
||||||
import QtQuick.Controls.Material 2.0
|
|
||||||
import QtQuick.Layouts 1.3
|
|
||||||
import CustomQmlTypes 1.0
|
|
||||||
import "." as Widgets
|
|
||||||
import "theme"
|
|
||||||
|
|
||||||
|
|
||||||
// Needs the parent to have an onWidthChanged that calls .textResize()
|
|
||||||
Item {
|
|
||||||
property string text
|
|
||||||
|
|
||||||
property alias color: label.color
|
|
||||||
property alias size: label.font.pixelSize
|
|
||||||
property alias weight: label.font.weight
|
|
||||||
property alias strikeout: label.font.strikeout
|
|
||||||
property alias font: label.font
|
|
||||||
property alias topPadding: label.topPadding
|
|
||||||
property alias leftPadding: label.leftPadding
|
|
||||||
property int extraPadding: 0
|
|
||||||
|
|
||||||
property Item container: parent
|
|
||||||
|
|
||||||
height: textMetric.height
|
|
||||||
width: textMetric.width + 10
|
|
||||||
anchors.leftMargin: 10
|
|
||||||
|
|
||||||
Label {
|
|
||||||
id: label
|
|
||||||
textFormat: Text.PlainText
|
|
||||||
|
|
||||||
elide: Text.ElideRight
|
|
||||||
text: textMetric.text
|
|
||||||
}
|
|
||||||
|
|
||||||
TextMetrics {
|
|
||||||
id: textMetric
|
|
||||||
text: text
|
|
||||||
font: label.font
|
|
||||||
}
|
|
||||||
|
|
||||||
onTextChanged: {
|
|
||||||
textResize()
|
|
||||||
}
|
|
||||||
|
|
||||||
function textResize() {
|
|
||||||
textMetric.text = text
|
|
||||||
var i = 2
|
|
||||||
var containerWidth = container != null ? container.width : 50
|
|
||||||
// - 30 for padding
|
|
||||||
while (textMetric.width > containerWidth - ((30 + extraPadding) * gcd.themeScale) && textMetric.width > 50) {
|
|
||||||
textMetric.text = text.slice(0, text.length - (i * 3)) + "..."
|
|
||||||
i++
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
7
Icon.qml
7
Icon.qml
|
@ -28,14 +28,8 @@ Rectangle {
|
||||||
|
|
||||||
signal hover(bool hover)
|
signal hover(bool hover)
|
||||||
|
|
||||||
//property int horizontalPadding: 0
|
|
||||||
//property int verticalPadding: 0
|
|
||||||
|
|
||||||
property int size: Math.min(height, width)
|
property int size: Math.min(height, width)
|
||||||
|
|
||||||
//property int innerHeight: height - (verticalPadding*2)
|
|
||||||
//property int innerWidth: width - (horizontalPadding*2)
|
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
id: srcImg
|
id: srcImg
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
@ -48,7 +42,6 @@ Rectangle {
|
||||||
// Apparently qml can now only DOWN-SCALE/SHRINK the SVG, so with this hack it which won't cause blurriness/pixelation
|
// Apparently qml can now only DOWN-SCALE/SHRINK the SVG, so with this hack it which won't cause blurriness/pixelation
|
||||||
sourceSize.width: size*2
|
sourceSize.width: size*2
|
||||||
sourceSize.height: size*2
|
sourceSize.height: size*2
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ColorOverlay{
|
ColorOverlay{
|
||||||
|
|
|
@ -71,32 +71,24 @@ Item {
|
||||||
anchors.leftMargin: 4 * logscale
|
anchors.leftMargin: 4 * logscale
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
|
||||||
spacing: 2 * gcd.themeScale
|
Label { // CONTACT NAME
|
||||||
|
|
||||||
|
|
||||||
EllipsisLabel { // CONTACT NAME
|
|
||||||
id: cn
|
id: cn
|
||||||
anchors.right: parent.right
|
Layout.fillWidth: true
|
||||||
anchors.left: parent.left
|
elide: Text.ElideRight
|
||||||
size: Theme.usernameSize * gcd.themeScale
|
font.pixelSize: Theme.usernameSize * gcd.themeScale
|
||||||
font.family: Fonts.applicationFontExtraBold.name
|
font.family: Fonts.applicationFontExtraBold.name
|
||||||
font.styleName: "ExtraBold"
|
font.styleName: "ExtraBold"
|
||||||
text: displayName
|
text: displayName
|
||||||
}
|
}
|
||||||
|
|
||||||
EllipsisLabel { // Onion
|
Label { // Onion
|
||||||
id: onion
|
id: onion
|
||||||
text: handle
|
text: handle
|
||||||
anchors.right: parent.right
|
Layout.fillWidth: true
|
||||||
anchors.left: parent.left
|
elide: Text.ElideRight
|
||||||
size: Theme.secondaryTextSize * gcd.themeScale
|
font.pixelSize: Theme.secondaryTextSize * gcd.themeScale
|
||||||
}
|
|
||||||
|
|
||||||
onWidthChanged: {
|
|
||||||
cn.textResize()
|
|
||||||
onion.textResize()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Column {
|
Column {
|
||||||
|
|
13
Toolbar.qml
13
Toolbar.qml
|
@ -67,24 +67,20 @@ Rectangle { // Global Toolbar
|
||||||
id: paneArea
|
id: paneArea
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
|
|
||||||
EllipsisLabel {
|
Label {
|
||||||
id: paneTitle
|
id: paneTitle
|
||||||
|
|
||||||
visible: true
|
visible: true
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
|
||||||
color: Theme.mainTextColor
|
color: Theme.mainTextColor
|
||||||
size: Theme.tabSize * gcd.themeScale
|
font.pixelSize: Theme.primaryTextSize * gcd.themeScale
|
||||||
weight: Font.Bold
|
elide: Text.ElideRight
|
||||||
|
font.weight: Font.Bold
|
||||||
font.family: Fonts.applicationFontRegular.name
|
font.family: Fonts.applicationFontRegular.name
|
||||||
font.styleName: "Bold"
|
font.styleName: "Bold"
|
||||||
text: "global toolbar"
|
text: "global toolbar"
|
||||||
|
|
||||||
//extraPadding: btnRightMenu.width + 10
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onWidthChanged: { paneTitle.textResize() }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Icon {
|
Icon {
|
||||||
|
@ -104,7 +100,6 @@ Rectangle { // Global Toolbar
|
||||||
function setTitle(text, width) {
|
function setTitle(text, width) {
|
||||||
paneTitle.text = text
|
paneTitle.text = text
|
||||||
paneArea.width = theStack.width
|
paneArea.width = theStack.width
|
||||||
paneTitle.textResize()
|
|
||||||
paneTitle.visible = true
|
paneTitle.visible = true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -13,11 +13,14 @@ TextField {
|
||||||
property bool error: false
|
property bool error: false
|
||||||
|
|
||||||
color: error ? errorColor : Theme.mainTextColor
|
color: error ? errorColor : Theme.mainTextColor
|
||||||
font.pixelSize: Theme.secondaryTextSize * gcd.themeScale * gcd.themeScale
|
font.pixelSize: Theme.secondaryTextSize * gcd.themeScale
|
||||||
signal clicked
|
signal clicked
|
||||||
smooth: true
|
smooth: true
|
||||||
placeholderTextColor: Theme.altTextColor
|
placeholderTextColor: Theme.altTextColor
|
||||||
|
|
||||||
|
// NOTE: Android Password Fields don't work unless we set an explicit character.
|
||||||
|
passwordCharacter: "*"
|
||||||
|
|
||||||
background: Rectangle {
|
background: Rectangle {
|
||||||
id: bg
|
id: bg
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
|
Loading…
Reference in New Issue