Commit e607c1ae authored by Nate Graham's avatar Nate Graham
Browse files

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.
parent 2ce67747
......@@ -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
padding: 6
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
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)
leftPadding: surfaceNormal.margins.left
topPadding: surfaceNormal.margins.top
rightPadding: surfaceNormal.margins.right
bottomPadding: surfaceNormal.margins.bottom
implicitWidth: Math.max(units.gridUnit, contentItem.implicitWidth)
+ leftPadding + rightPadding
implicitHeight: Math.max(units.gridUnit, contentItem.implicitHeight)
+ topPadding + bottomPadding
// 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 {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment