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:
Nate Graham 2020-07-13 14:59:59 +00:00
parent 2ce6774718
commit e607c1ae47
5 changed files with 42 additions and 41 deletions

View File

@ -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)

View File

@ -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"

View File

@ -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 {

View File

@ -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

View File

@ -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 {