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 {
......
......@@ -31,19 +31,20 @@ Controls.ScrollBar {
}
contentItem: Rectangle {
implicitWidth: control.orientation == Qt.Horizontal? 100: 6
implicitHeight: control.orientation == Qt.Horizontal? 6: 100
radius: 3
property int size: Math.floor(Units.gridUnit / 3)
implicitWidth: control.orientation == Qt.Horizontal? 100: size
implicitHeight: control.orientation == Qt.Horizontal? size: 100
radius: size / 2
color: control.pressed ? colorScheme.focusDecoration: colorScheme.alternateBackground
opacity: control.active? 1: 0.3
Behavior on opacity {
NumberAnimation {
duration: 150
duration: Units.shortDuration
}
}
Behavior on color {
ColorAnimation {
duration: 150
duration: Units.shortDuration
}
}
}
......
......@@ -31,7 +31,7 @@ Item {
property bool xLocked: false
property bool yLocked: false
property int minSize: 20
property int minSize: Units.gridUnit
x: targetItem?
targetItem.x + (horizontalPosition == "left"? 0: targetItem.width - 1):
......@@ -80,11 +80,11 @@ Item {
Rectangle {
anchors {
centerIn: parent
verticalCenterOffset: verticalPosition == "top"? -10: 10
horizontalCenterOffset: horizontalPosition == "left"? -10: 10
verticalCenterOffset: verticalPosition == "top"? -Units.largeSpacing: Units.largeSpacing
horizontalCenterOffset: horizontalPosition == "left"? -Units.largeSpacing: Units.largeSpacing
}
width: 15
height: 15
width: Math.floor(Units.gridUnit / 2)
height: Math.floor(Units.gridUnit / 2)
color: palette.highlight
visible: interactive
......
......@@ -49,7 +49,7 @@ Controls.TextArea {
control.colorScheme.focusDecoration.hslValue,
control.enabled? 0.5: 0.2)
Behavior on border.color {
ColorAnimation { duration: 150 }
ColorAnimation { duration: Units.shortDuration }
}
}
......
......@@ -29,13 +29,11 @@ Controls.ToolSeparator {
colorGroup: KColorScheme.Active
colorSet: KColorScheme.Complementary
}
padding: vertical? 6: 2
topPadding: vertical? 2: 6
bottomPadding: vertical? 2: 6
padding: Units.smallSpacing
contentItem: Rectangle {
implicitWidth: control.vertical? 1: 24
implicitHeight: control.vertical? 24: 1
implicitWidth: control.vertical? 1: Units.gridUnit
implicitHeight: control.vertical? Units.gridUnit: 1
color: control.colorScheme.normalText
}
}
/*
* Copyright 2015 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.4
import QtQuick.Window 2.2
pragma Singleton
/**
* A set of values to define semantically sizes and durations
* @inherit QtQuick.QtObject
*/
QtObject {
id: units
/**
* The fundamental unit of space that should be used for sizes, expressed in pixels.
* Given the screen has an accurate DPI settings, it corresponds to a width of
* the capital letter M
*/
property int gridUnit: fontMetrics.height
/**
* units.iconSizes provides access to platform-dependent icon sizing
*
* The icon sizes provided are normalized for different DPI, so icons
* will scale depending on the DPI.
*
* Icon sizes from KIconLoader, adjusted to devicePixelRatio:
* * small
* * smallMedium
* * medium
* * large
* * huge
* * enormous
*
* Not devicePixelRation-adjusted::
* * desktop
*/
property QtObject iconSizes: QtObject {
property int small: Math.floor(fontMetrics.roundedIconSize(16 * devicePixelRatio))
property int smallMedium: Math.floor(fontMetrics.roundedIconSize(22 * devicePixelRatio))
property int medium: Math.floor(fontMetrics.roundedIconSize(32 * devicePixelRatio))
property int large: Math.floor(fontMetrics.roundedIconSize(48 * devicePixelRatio))
property int huge: Math.floor(fontMetrics.roundedIconSize(64 * devicePixelRatio))
property int enormous: Math.floor(128 * devicePixelRatio)
}
property int borderWidth: Math.max(1, Math.floor(gridUnit / 18))
/**
* units.smallSpacing is the amount of spacing that should be used around smaller UI elements,
* for example as spacing in Columns. Internally, this size depends on the size of
* the default font as rendered on the screen, so it takes user-configured font size and DPI
* into account.
*/
property int smallSpacing: Math.floor(gridUnit/4)
/**
* units.largeSpacing is the amount of spacing that should be used inside bigger UI elements,
* for example between an icon and the corresponding text. Internally, this size depends on
* the size of the default font as rendered on the screen, so it takes user-configured font
* size and DPI into account.
*/
property int largeSpacing: smallSpacing*2
/**
* The ratio between physical and device-independent pixels. This value does not depend on the \
* size of the configured font. If you want to take font sizes into account when scaling elements,
* use theme.mSize(theme.defaultFont), units.smallSpacing and units.largeSpacing.
* The devicePixelRatio follows the definition of "device independent pixel" by Microsoft.
*/
property real devicePixelRatio: Math.max(1, ((fontMetrics.font.pixelSize*0.75) / fontMetrics.font.pointSize))
/**