Unify height of PC3 buttons, TextFields, and Comboboxes
Now all of them have a base height of units.gridUnit. Combined with the standard 6px margins it works out to make all of these controls a uniform 30px tall with the default Noto Sans 10 font. If the font is changed or the size is increased, even to absurd levels, all of them scale evenly.
This commit is contained in:
parent
2ce6774718
commit
e607c1ae47
@ -27,9 +27,10 @@ import "private" as Private
|
||||
T.Button {
|
||||
id: control
|
||||
|
||||
implicitWidth: Math.max(background.implicitWidth,
|
||||
contentItem.implicitWidth + leftPadding + rightPadding)
|
||||
implicitHeight: Math.max(background.implicitHeight, contentItem.implicitHeight + topPadding + bottomPadding)
|
||||
implicitWidth: Math.max( (label.visible ? units.gridUnit * 6 : units.gridUnit), contentItem.implicitWidth)
|
||||
+ leftPadding + rightPadding
|
||||
implicitHeight: Math.max(units.gridUnit, contentItem.implicitHeight)
|
||||
+ topPadding + bottomPadding
|
||||
|
||||
Layout.minimumWidth: contentItem.implicitWidth + leftPadding + rightPadding
|
||||
|
||||
@ -86,9 +87,6 @@ T.Button {
|
||||
}
|
||||
|
||||
background: Item {
|
||||
//retrocompatibility with old controls
|
||||
implicitWidth: label.visible ? units.gridUnit * 6 : implicitHeight
|
||||
implicitHeight: Math.floor(units.gridUnit * 1.6) + Math.floor(units.gridUnit * 1.6) % 2
|
||||
Private.ButtonShadow {
|
||||
anchors.fill: parent
|
||||
visible: (!control.flat || control.hovered) && (!control.pressed || !control.checked)
|
||||
|
@ -30,9 +30,10 @@ import "mobiletextselection" as MobileTextSelection
|
||||
T.ComboBox {
|
||||
id: control
|
||||
|
||||
implicitWidth: Math.max(background ? background.implicitWidth : 0,
|
||||
contentItem.implicitWidth + leftPadding + rightPadding) + indicator.implicitWidth + rightPadding
|
||||
implicitHeight: units.gridUnit * 1.6
|
||||
implicitWidth: Math.max(units.gridUnit, contentItem.implicitWidth)
|
||||
+ leftPadding + rightPadding + indicator.implicitWidth + rightPadding
|
||||
implicitHeight: Math.max(units.gridUnit, contentItem.implicitHeight)
|
||||
+ topPadding + bottomPadding
|
||||
baselineOffset: contentItem.y + contentItem.baselineOffset
|
||||
|
||||
hoverEnabled: true
|
||||
@ -191,8 +192,6 @@ T.ComboBox {
|
||||
|
||||
background: PlasmaCore.FrameSvgItem {
|
||||
id: surfaceNormal
|
||||
//retrocompatibility with old controls
|
||||
implicitWidth: units.gridUnit * 6
|
||||
anchors.fill: parent
|
||||
readonly property bool editable: control.hasOwnProperty("editable") && control.editable
|
||||
imagePath: editable ? "widgets/lineedit" : "widgets/button"
|
||||
|
@ -27,9 +27,10 @@ import "private" as Private
|
||||
T.RoundButton {
|
||||
id: control
|
||||
|
||||
implicitWidth: Math.max(background.implicitWidth,
|
||||
contentItem.implicitWidth + leftPadding + rightPadding)
|
||||
implicitHeight: Math.max(background.implicitHeight, contentItem.implicitHeight + topPadding + bottomPadding)
|
||||
implicitWidth: Math.max(units.gridUnit, contentItem.implicitWidth)
|
||||
+ leftPadding + rightPadding
|
||||
implicitHeight: Math.max(units.gridUnit, contentItem.implicitHeight)
|
||||
+ topPadding + bottomPadding
|
||||
|
||||
leftPadding: text.length > 0 ? surfaceNormal.margins.left : contentItem.extraSpace
|
||||
topPadding: text.length > 0 ? surfaceNormal.margins.top : contentItem.extraSpace
|
||||
@ -62,9 +63,6 @@ T.RoundButton {
|
||||
}
|
||||
|
||||
background: Item {
|
||||
//retrocompatibility with old controls
|
||||
implicitWidth: units.gridUnit * 1.6
|
||||
implicitHeight: units.gridUnit * 1.6
|
||||
opacity: control.enabled ? 1 : 0.6
|
||||
|
||||
PlasmaCore.Svg {
|
||||
|
@ -47,12 +47,17 @@ T.TextField {
|
||||
&& KAuthorized.authorize("lineedit_reveal_password")
|
||||
&& (echoMode == TextInput.Normal || textField.length > 0)
|
||||
|
||||
implicitWidth: Math.max(units.gridUnit * 8,
|
||||
placeholderText ? placeholder.implicitWidth + leftPadding + rightPadding : 0)
|
||||
|| contentWidth + leftPadding + rightPadding
|
||||
implicitHeight: background.implicitHeight
|
||||
implicitWidth: Math.max((placeholderText ? placeholder.implicitWidth : 0),
|
||||
units.gridUnit * 8,
|
||||
contentWidth)
|
||||
+ base.margins.left + base.margins.right
|
||||
implicitHeight: Math.max(units.gridUnit, contentHeight)
|
||||
+ topPadding + bottomPadding
|
||||
|
||||
padding: 6
|
||||
leftPadding: base.margins.left
|
||||
topPadding: base.margins.top
|
||||
rightPadding: base.margins.right
|
||||
bottomPadding: base.margins.bottom
|
||||
|
||||
color: theme.viewTextColor
|
||||
selectionColor: theme.highlightColor
|
||||
@ -170,13 +175,6 @@ T.TextField {
|
||||
}
|
||||
|
||||
background: Item {
|
||||
implicitHeight: Math.max(Math.floor(metrics.height * 1.6) + Math.floor(metrics.height * 1.6) % 2,
|
||||
metrics.height + base.margins.top + base.margins.bottom)
|
||||
TextMetrics {
|
||||
id: metrics
|
||||
text: "M"
|
||||
font: control.font
|
||||
}
|
||||
Private.TextFieldFocus {
|
||||
state: control.activeFocus ? "focus" : (control.hovered ? "hover" : "hidden")
|
||||
anchors.fill: parent
|
||||
|
@ -28,14 +28,19 @@ import "private" as Private
|
||||
T.ToolButton {
|
||||
id: control
|
||||
|
||||
implicitWidth: Math.max(background.implicitWidth,
|
||||
contentItem.implicitWidth + leftPadding + rightPadding)
|
||||
implicitHeight: Math.max(background.implicitHeight, contentItem.implicitHeight + topPadding + bottomPadding)
|
||||
implicitWidth: Math.max(units.gridUnit, contentItem.implicitWidth)
|
||||
+ leftPadding + rightPadding
|
||||
implicitHeight: Math.max(units.gridUnit, contentItem.implicitHeight)
|
||||
+ topPadding + bottomPadding
|
||||
|
||||
leftPadding: surfaceNormal.margins.left
|
||||
topPadding: surfaceNormal.margins.top
|
||||
rightPadding: surfaceNormal.margins.right
|
||||
bottomPadding: surfaceNormal.margins.bottom
|
||||
// for flat toolbuttons, we want to use margins from the pressed state since
|
||||
// those are the ones which are appropriate for a button without a buttonlike
|
||||
// appearance where we increase the size of the icon compared to buttonlike
|
||||
// buttons
|
||||
leftPadding: control.flat ? surfacePressed.margins.left : surfaceNormal.margins.left
|
||||
topPadding: control.flat ? surfacePressed.margins.top : surfaceNormal.margins.top
|
||||
rightPadding: control.flat ? surfacePressed.margins.right : surfaceNormal.margins.right
|
||||
bottomPadding: control.flat ? surfacePressed.margins.bottom : surfaceNormal.margins.bottom
|
||||
|
||||
hoverEnabled: !Kirigami.Settings.tabletMode
|
||||
|
||||
@ -47,7 +52,7 @@ T.ToolButton {
|
||||
|
||||
PlasmaCore.ColorScope.inherit: flat
|
||||
PlasmaCore.ColorScope.colorGroup: flat ? parent.PlasmaCore.ColorScope.colorGroup : PlasmaCore.Theme.ButtonColorGroup
|
||||
|
||||
|
||||
contentItem: GridLayout {
|
||||
columns: control.display == T.AbstractButton.TextBesideIcon ? 2 : 1
|
||||
|
||||
@ -58,6 +63,11 @@ T.ToolButton {
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
// The default icon size is smallMedium (22px) which means the
|
||||
// content item will be too large and undesirably increase the size
|
||||
// of the item itself, so we apply negative margins to make it take
|
||||
// up as little space as a small icon would
|
||||
Layout.margins: -((implicitHeight - units.iconSizes.small) / 2)
|
||||
|
||||
Layout.minimumWidth: Math.min(parent.width, parent.height, implicitWidth)
|
||||
Layout.minimumHeight: Math.min(parent.width, parent.height, implicitHeight)
|
||||
@ -96,9 +106,6 @@ T.ToolButton {
|
||||
}
|
||||
|
||||
background: Item {
|
||||
//retrocompatibility with old controls
|
||||
implicitWidth: Math.floor(units.gridUnit * 1.6) + Math.floor(units.gridUnit * 1.6) % 2
|
||||
implicitHeight: implicitWidth
|
||||
Private.ButtonShadow {
|
||||
anchors.fill: parent
|
||||
visible: (!control.flat || control.hovered) && (!control.pressed || !control.checked)
|
||||
@ -128,9 +135,10 @@ T.ToolButton {
|
||||
}
|
||||
}
|
||||
PlasmaCore.FrameSvgItem {
|
||||
id: surfacePressed
|
||||
anchors.fill: parent
|
||||
imagePath: "widgets/button"
|
||||
prefix: "pressed"
|
||||
prefix: control.flat ? "toolbutton-pressed" : "pressed"
|
||||
opacity: control.checked || control.pressed ? 1 : 0
|
||||
Behavior on opacity {
|
||||
OpacityAnimator {
|
||||
|
Loading…
Reference in New Issue
Block a user