Commit f578d6af authored by Sebastian Gottfried's avatar Sebastian Gottfried
Browse files

Get Rid of Pixel-Sized Elements

Instead, express all sizes in relation to the default font size. This
makes various UI features like icons, gaps and spaces consistently sized
wrt. to the text elements, regardless of the chosen font size- This is
especially useful for High-DPI-ish displays where increasing the font
size works better than fractional display scaling or for people who want
to increase the font sizes anyway.
parent 53e8e7fa
......@@ -70,7 +70,8 @@ ResourceEditor::ResourceEditor(QWidget *parent) :
m_categorizedResourceModel->setResourceModel(m_resourceModel);
m_categorizedResourceModel->setCategorizedModel(true);
setMinimumSize(700, 500);
const int unit = fontMetrics().height();
setMinimumSize(39 * unit, 28 * unit);
setCaption(i18n("Course and Keyboard Layout Editor"));
m_newResourceAction->setToolTip(i18n("Create a new course or keyboard layout"));
......
......@@ -45,7 +45,8 @@ MainWindow::~MainWindow()
void MainWindow::init()
{
QWidget* viewWidget = QWidget::createWindowContainer(m_view, this);
viewWidget->setMinimumSize(1000, 700);
const int unit = fontMetrics().height();
viewWidget->setMinimumSize(56 * unit, 39 * unit);
viewWidget->setFocusPolicy(Qt::StrongFocus);
setCentralWidget(viewWidget);
......
......@@ -46,14 +46,14 @@ Loader {
layer.enabled: true
layer.effect: DropShadow {
anchors.fill: parent
radius: 5
samples: 11
radius: Units.smallSpacing
samples: 2 * radius + 1
}
Behavior on opacity {
SequentialAnimation {
NumberAnimation {
duration: 250
duration: Units.shortDuration
easing.type: Easing.InOutQuad
properties: "opacity"
}
......@@ -74,7 +74,7 @@ Loader {
Rectangle {
id: internal
color: palette.alternateBase
radius: 5
radius: Units.smallSpacing
property variant parentPos: root.visualParent? root.visualParent.mapToItem(null, 0, 0): Qt.point(0, 0)
property bool under: root.visualParent ? internal.parentPos.y + root.visualParent.height + height < dismissArea.height : true
......@@ -114,8 +114,8 @@ Loader {
horizontalCenterOffset: internal.preferedX - internal.x
top: parent.bottom
}
width: 10
height: 10
width: Math.floor(Units.gridUnit / 2)
height: width
visible: false
}
......
......@@ -41,7 +41,7 @@ Controls.Control {
Behavior on height {
NumberAnimation {
duration: 150
duration: Units.shortDuration
easing.type: Easing.InOutQuad
}
}
......@@ -54,11 +54,13 @@ Controls.Control {
property bool isSwapping: false
opacity: !root.collapsed && !isSwapping && root.height === implicitHeight? 1: 0
data: root.data
implicitHeight: children.length > 0? children[0].implicitHeight: 0
implicitHeight: children.length > 0?
children[0].implicitHeight + children[0].anchors.topMargin + children[0].anchors.topMargin:
0
Behavior on opacity {
NumberAnimation {
duration: 150
duration: Units.shortDuration
}
}
......
......@@ -39,7 +39,7 @@ ComboBox {
}
hoverEnabled: true
spacing: 0.7 * font.pixelSize
spacing: Units.largeSpacing
background: Item {
Rectangle {
......@@ -48,7 +48,7 @@ ComboBox {
color: colorScheme.normalBackground
Behavior on opacity {
NumberAnimation {
duration: 150
duration: Units.shortDuration
}
}
}
......@@ -96,7 +96,7 @@ ComboBox {
NumberAnimation {
property: "opacity"
to: 1.0
duration: 150
duration: Units.shortDuration
}
}
......@@ -104,7 +104,7 @@ ComboBox {
NumberAnimation {
property: "opacity"
to: 0.0
duration: 150
duration: Units.shortDuration
}
}
......@@ -122,7 +122,8 @@ ComboBox {
color: listColorScheme.normalBackground
layer.enabled: true
layer.effect: DropShadow {
samples: 24
radius: Units.smallSpacing
samples: 2 * radius + 1
horizontalOffset: 0
verticalOffset: 0
}
......
......@@ -22,7 +22,7 @@ import ktouch 1.0
Rectangle {
property Item control
height: 2
height: Math.max(Math.floor(Units.gridUnit / 6), 1)
color: control.colorScheme.focusDecoration
opacity: control.activeFocus? 1: 0
......
......@@ -44,7 +44,6 @@ GridView {
left: parent.left
right: parent.right
}
height: 3
control: control
}
......@@ -54,7 +53,6 @@ GridView {
right: parent.right
bottom: parent.bottom
}
height: 3
control: control
}
......
......@@ -18,5 +18,6 @@
import org.kde.kquickcontrolsaddons 2.0 as Addons
Addons.QIconItem {
height: Units.fontMetrics.roundedIconSize(Units.gridUnit)
width: height
}
......@@ -46,7 +46,7 @@ Button {
elide: "ElideNone"
Behavior on color {
ColorAnimation { duration: 150 }
ColorAnimation { duration: Units.shortDuration }
}
}
......@@ -64,12 +64,12 @@ Button {
lightness: hovered? -0.04: 0
Behavior on saturation {
NumberAnimation {
duration: 150
duration: Units.shortDuration
}
}
Behavior on lightness {
NumberAnimation {
duration: 150
duration: Units.shortDuration
}
}
}
......@@ -81,7 +81,6 @@ Button {
right: parent.right
bottom: parent.bottom
}
height: 3
control: button
}
}
......
......@@ -24,7 +24,7 @@ Label {
id: label
elide: Text.ElideRight
padding: Math.ceil(0.7 * font.pixelSize)
padding: Units.largeSpacing
leftPadding: (iconItem.visible || reserveSpaceForIcon? padding + iconItem.width: 0) + (label.text !== ""? padding: 0)
verticalAlignment: Text.AlignVCenter
......@@ -38,7 +38,5 @@ Label {
verticalCenter: parent.verticalCenter
}
icon: label.iconName
width: 22
height: 22
}
}
......@@ -50,7 +50,7 @@ ToolButton {
color: button.backgroundColor
Behavior on opacity {
NumberAnimation {
duration: 150
duration: Units.shortDuration
}
}
}
......@@ -61,7 +61,6 @@ ToolButton {
right: parent.right
bottom: parent.bottom
}
height: 3
control: button
}
}
......
......@@ -35,7 +35,7 @@ Item {
Column {
id: column
spacing: 3
spacing: Units.largeSpacing
width: parent.width
height: childrenRect.height
......@@ -43,7 +43,7 @@ Item {
id: repeator
Row {
spacing: 5
spacing: Units.smallSpacing
height: Math.max(titleLabel.height, valueLabel.height)
width: root.width
......@@ -52,7 +52,8 @@ Item {
width: Math.round((parent.width - parent.spacing) / 2)
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignTop
color: "#888"
color: colorScheme.normalText
opacity: 0.7
text: model.modelData.title
wrapMode: Text.Wrap
height: Math.max(paintedHeight, valueLabel.paintedHeight)
......
......@@ -25,8 +25,8 @@ Item {
property alias content: contentArea.data
property alias color: background.color
width: contentArea.width + 6
height: contentArea.height + 6
width: contentArea.width + Units.largeSpacing
height: contentArea.height + Units.largeSpacing
Rectangle {
......@@ -34,7 +34,7 @@ Item {
id: background
color: activePalette.mid
opacity: 0.7
radius: 3
radius: Units.smallSpacing
SystemPalette {
id: activePalette
......@@ -43,13 +43,13 @@ Item {
}
Behavior on opacity {
NumberAnimation { duration: 250 }
NumberAnimation { duration: Units.shortDuration }
}
Row {
id: contentArea
anchors.centerIn: parent
height: childrenRect.height
spacing: 3
spacing: Units.smallSpacing
}
}
......@@ -26,7 +26,7 @@ Charts.LineChart {
property Charts.Dimension accuracy: accuracyDimension
property Charts.Dimension charactersPerMinute: charactersPerMinuteDimension
pitch: 60
pitch: 3 * Units.gridUnit
function minAccuracy(accuracy) {
var canditades = [0.9, 0.8, 0.5]
......@@ -107,7 +107,7 @@ Charts.LineChart {
text: learningProgressPointTooltip.row !== -1? learningProgressModel.charactersPerMinute(learningProgressPointTooltip.row): ""
}
]
width: 450
width: 25 * Units.gridUnit
model: infoModel
}
}
......
......@@ -48,7 +48,7 @@ ItemDelegate {
opacity: root.highlighted ? 1 : (root.hovered? 0.3: 0)
Behavior on opacity {
NumberAnimation {
duration: 150
duration: Units.shortDuration
}
}
......
......@@ -44,7 +44,6 @@ ListView {
left: parent.left
right: parent.right
}
height: 3
control: control
z: -1
}
......@@ -55,7 +54,6 @@ ListView {
right: parent.right
bottom: parent.bottom
}
height: 3
control: control
z: -1
}
......
......@@ -22,10 +22,10 @@ import "../common"
Rectangle {
id: item
anchors.verticalCenter: parent.verticalCenter
radius: 3
radius: Units.smallSpacing
color: "#eee4be"
height: label.height + 6
width: label.width + 6
height: label.height
width: label.width
smooth: true
function showMessage(msg, iconSource) {
......@@ -58,8 +58,8 @@ Rectangle {
IconLabel {
anchors.centerIn: parent
padding: Units.smallSpacing
id: label
padding: 2
}
states: [
......
......@@ -20,8 +20,6 @@ import QtGraphicalEffects 1.0
Icon {
property color color: "#000000"
id: icon
width: 22
height: 22
ColorOverlay {
anchors.fill: parent
source: icon
......
......@@ -82,16 +82,16 @@ Dialog {
enter: Transition {
// grow_fade_in
NumberAnimation { property: "scale"; to: 1.0; easing.type: Easing.OutQuint; duration: 220 }
NumberAnimation { property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: 150 }
NumberAnimation { target: dimOverlay; property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: 220 }
NumberAnimation { property: "scale"; to: 1.0; easing.type: Easing.OutQuint; duration: Units.longDuration }
NumberAnimation { property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: Units.shortDuration }
NumberAnimation { target: dimOverlay; property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: Units.longDuration }
}
exit: Transition {
// shrink_fade_out
NumberAnimation { property: "scale"; to: 0.9; easing.type: Easing.OutQuint; duration: 220 }
NumberAnimation { property: "opacity"; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
NumberAnimation { target: dimOverlay; property: "opacity"; to: 0.0; easing.type: Easing.OutCubic; duration: 220 }
NumberAnimation { property: "scale"; to: 0.9; easing.type: Easing.OutQuint; duration: Units.longDuration }
NumberAnimation { property: "opacity"; to: 0.0; easing.type: Easing.OutCubic; duration: Units.shortDuration }
NumberAnimation { target: dimOverlay; property: "opacity"; to: 0.0; easing.type: Easing.OutCubic; duration: Units.longDuration }
}
background: Rectangle {
......
......@@ -23,7 +23,7 @@ RadioButton {
id: control
hoverEnabled: true
spacing: label.font.pixelSize
spacing: Units.largeSpacing
padding: 0
property alias colorScheme: colorScheme
......@@ -57,7 +57,7 @@ RadioButton {
Behavior on border.color {
ColorAnimation {
duration: 150
duration: Units.shortDuration
}
}
......@@ -76,9 +76,9 @@ RadioButton {
color: control.colorScheme.normalText
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
topPadding: 3
topPadding: Units.smallSpacing
leftPadding: control.indicator.width + control.spacing
bottomPadding: 3
bottomPadding: Units.smallSpacing
FocusBar {
anchors {
......
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