diff --git a/Button.qml b/Button.qml index 602fa35..d968f1c 100644 --- a/Button.qml +++ b/Button.qml @@ -9,10 +9,10 @@ import "fonts" Rectangle { id: button - width: (text == undefined || text == "" ? 0 : buttonText.width) + (icon == undefined || icon == "" ? 0 : ico.width) + 24 * gcd.themeScale + width: tm.width + (icon == undefined || icon == "" ? 0 : iconSize) + 2 * Theme.paddingClickTarget + 2 * radius Layout.minimumWidth: width Layout.maximumWidth: width - height: 20 * gcd.themeScale + height: 2 * Theme.paddingClickTarget + Math.max(tm.height, (icon == undefined || icon == "" ? 0 : iconSize)) Layout.minimumHeight: height Layout.maximumHeight: height property color inactiveColor: Theme.defaultButtonColor @@ -21,28 +21,28 @@ Rectangle { color: mousedown ? activeColor : inactiveColor border.color: mousedown ? activeColor : inactiveColor border.width: 1 - radius: override_radius + radius: height / 2 antialiasing: true property bool checked: false - property double override_radius: (height / 2.0) property alias text: buttonText.text property alias font: buttonText.font.family property string icon + property int iconSize: Theme.uiIconSizeS property bool mousedown property string tooltip signal clicked RowLayout { anchors.centerIn: parent - spacing: 6 * gcd.themeScale + spacing: Theme.paddingSmall Image { id: ico source: icon!="" ? gcd.assetPath + "core/"+icon+".webp" : ""; visible: icon != "" - height: button.height / 2 - sourceSize.height: button.height / 2 + height: button.iconSize + sourceSize.height: button.iconSize ColorOverlay{ id: iconColorOverlay @@ -60,11 +60,17 @@ Rectangle { id: buttonText font.family: Fonts.applicationFontRegular.name font.styleName: "ExtraBold" - font.pixelSize: button.height / 2 + font.pointSize: Theme.textMediumPt color: button.textColor visible: button.text != "" && button.text != undefined } + TextMetrics { + id: tm + font: buttonText.font + text: buttonText.text + } + ToolTip.visible: tooltip != "" && mouseArea.containsMouse ToolTip.text: tooltip } diff --git a/ButtonTextField.qml b/ButtonTextField.qml index b797678..fc3d8c6 100644 --- a/ButtonTextField.qml +++ b/ButtonTextField.qml @@ -11,7 +11,7 @@ import "theme" TextField { id: tf color: Theme.textfieldTextColor - font.pixelSize: Theme.secondaryTextSize * gcd.themeScale + font.pointSize: Theme.textSmallPt width: parent.width - 20 // IMPORTANT: Setting a dynamic height on the internal button widget caused it to crash on Android when @@ -41,7 +41,7 @@ TextField { icon: "" text: button_text anchors { top: parent.top; right: parent.right } - override_radius: 10 + radius: 10 height: parent.height; inactiveColor: Theme.textfieldButtonColor diff --git a/IconTextField.qml b/IconTextField.qml index ef307df..f1aa9ba 100644 --- a/IconTextField.qml +++ b/IconTextField.qml @@ -9,7 +9,7 @@ import "theme" // IconTextField integrates a text field and an icon TextField { color: Theme.textfieldTextColor - font.pixelSize: Theme.secondaryTextSize * gcd.themeScale * gcd.themeScale + font.pointSize: Theme.textSmallPt width: parent.width - 20 property alias icon: icon_.source signal clicked diff --git a/RadioButton.qml b/RadioButton.qml index 13e754c..c777ca5 100644 --- a/RadioButton.qml +++ b/RadioButton.qml @@ -10,23 +10,20 @@ RadioButton { property color textColor: Theme.mainTextColor property color indicatorColor: Theme.boxCheckedColor - //property real size: 12 - spacing: 0 //4 * gcd.themeScale - indicator: Rectangle { - width: 16 * gcd.themeScale - height: 16 * gcd.themeScale + width: Theme.uiSliderSize + height: width anchors.verticalCenter: parent.verticalCenter - radius: 9 * gcd.themeScale + radius: width / 2 border.width: 1 Rectangle { anchors.fill: parent visible: control.checked color: indicatorColor - radius: 9 * gcd.themeScale - anchors.margins: 4 * gcd.themeScale + radius: width/2 + anchors.margins: 2//thin line } } diff --git a/ResponsiveContainer.qml b/ResponsiveContainer.qml index d796a64..8fb8111 100644 --- a/ResponsiveContainer.qml +++ b/ResponsiveContainer.qml @@ -9,9 +9,9 @@ import "theme" GridLayout { id: root - // have children ... control weather to stack or row them - // n * minWidth determin - property int minCellWidth: Theme.sidePaneMinSize * gcd.themeScale + // have children ... control whether to stack or row them + // n * minWidth determines row or column + property int minCellWidth: Theme.sidePaneMinSize onWidthChanged: resizeCheck() diff --git a/Slider.qml b/Slider.qml index 7aef8a6..a0555b4 100644 --- a/Slider.qml +++ b/Slider.qml @@ -33,9 +33,9 @@ Slider { handle: Rectangle { x: control.leftPadding + control.visualPosition * (control.availableWidth - width) y: control.topPadding + control.availableHeight / 2 - height / 2 - implicitWidth: 26 * gcd.themeScale - implicitHeight: 26 * gcd.themeScale - radius: 13 * gcd.themeScale + implicitWidth: Theme.uiSliderSize + implicitHeight: implicitWidth + radius: implicitWidth / 2 color: control.pressed ? control.buttonActiveColor : control.buttonColor border.color: control.buttonColor } diff --git a/TextField.qml b/TextField.qml index f60361e..6bc2f09 100644 --- a/TextField.qml +++ b/TextField.qml @@ -17,7 +17,7 @@ TextField { property bool error: false color: error ? errorColor : Theme.textfieldTextColor - font.pointSize: 10 * gcd.themeScale + font.pointSize: Theme.textSmallPt width: 100 // selectByMouse shouldn't be enabled on mobile diff --git a/UnderlineTextField.qml b/UnderlineTextField.qml index 42573ad..2eb66a6 100644 --- a/UnderlineTextField.qml +++ b/UnderlineTextField.qml @@ -13,7 +13,7 @@ TextField { property bool error: false color: error ? errorColor : Theme.mainTextColor - font.pixelSize: Theme.secondaryTextSize * gcd.themeScale + font.pointSize: Theme.textSmallPt signal clicked smooth: true placeholderTextColor: Theme.altTextColor diff --git a/controls/FlagButton.qml b/controls/FlagButton.qml index 6b62d16..1ac4e55 100644 --- a/controls/FlagButton.qml +++ b/controls/FlagButton.qml @@ -37,7 +37,7 @@ Rectangle { Connections { target: gcd - onSupplySettings: function(zoom, newLocale) { + onSupplySettings: function(zoom, scale, newLocale) { selected = newLocale == locale } } diff --git a/styles/CwtchTextFieldStyle.qml b/styles/CwtchTextFieldStyle.qml index a131b28..759e0e0 100644 --- a/styles/CwtchTextFieldStyle.qml +++ b/styles/CwtchTextFieldStyle.qml @@ -4,8 +4,8 @@ import "../theme" TextFieldStyle { id: root - textColor: "black" - font.pointSize: 10 * gcd.themeScale + textColor: Theme.mainTextColor + font.pointSize: Theme.textSmallPt property int width: parent.width background: Rectangle { diff --git a/theme/Theme.qml b/theme/Theme.qml index a4d3110..e95e9de 100644 --- a/theme/Theme.qml +++ b/theme/Theme.qml @@ -105,8 +105,8 @@ Item { property ThemeType light: CwtchLight{} property ThemeType theme: gcd.theme == "dark" ? dark : light - // 0-4. replace gcd.themeScale with whatever your app has! - property int scale: gcd.themeScaleNew + + property int scale: gcd.scaleFactor// 0-4. replace with whatever your app has! // magnification system: all size-sets should generally respect these semantics: // @@ -136,9 +136,16 @@ Item { readonly property variant paddingLargeBase: [10, 30, 40] readonly property int paddingLarge: paddingLargeBase[p[scale]] - readonly property variant paddingClickTargetBase: gcd.os == "android" ? [10, 40, 100] : [3, 10, 15] + readonly property variant paddingClickTargetBase: gcd.os == "android" ? [10, 30, 60] : [1, 3, 6] readonly property int paddingClickTarget: paddingClickTargetBase[p[scale]] + readonly property variant radiusSBase: [4, 4, 6] + readonly property variant radiusMBase: [6, 7, 9] + readonly property variant radiusLBase: [10, 12, 15] + readonly property int radiusS: radiusSBase[p[scale]] + readonly property int radiusM: radiusMBase[p[scale]] + readonly property int radiusL: radiusLBase[p[scale]] + //////////////////////// // section: TEXT SIZE // //////////////////////// @@ -155,6 +162,9 @@ Item { readonly property variant textHeaderPtBase: [16, 24, 32] readonly property int textHeaderPt: textHeaderPtBase[t[scale]] + readonly property variant textBadgeLabelPtBase: [6, 10, 14] + readonly property variant textBadgeLabelPt: textBadgeLabelPtBase[t[scale]] + ///////////////////////////////// // section: ELEMENT DIMENSIONS // ///////////////////////////////// @@ -171,13 +181,16 @@ Item { readonly property variant contactPortraitSizeBase: [60, 72, 84] readonly property int contactPortraitSize: contactPortraitSizeBase[p[scale]] + readonly property variant uiSliderSizeBase: [20, 26, 32] + readonly property int uiSliderSize: uiSliderSizeBase[p[scale]] + /////////////////////////////////////// // section: OLD FONT SIZES REFERENCE // /////////////////////////////////////// // old size (usually given to font.pixelSize but occasionally to font.pointSize) -> new size - readonly property int badgeTextSize: 12 - readonly property int statusTextSize: 12 + readonly property int badgeTextSize: textSmallPt + readonly property int statusTextSize: textSmallPt // readonly property int chatMetaTextSize: 15 -> textSmallPt // readonly property int secondaryTextSize: 20 -> textSmallPt readonly property int chatSize: textMediumPt //was:20