WIP: new scaling system pass two #37
22
Button.qml
22
Button.qml
|
@ -9,10 +9,10 @@ import "fonts"
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: button
|
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.minimumWidth: width
|
||||||
Layout.maximumWidth: 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.minimumHeight: height
|
||||||
Layout.maximumHeight: height
|
Layout.maximumHeight: height
|
||||||
property color inactiveColor: Theme.defaultButtonColor
|
property color inactiveColor: Theme.defaultButtonColor
|
||||||
|
@ -21,28 +21,28 @@ Rectangle {
|
||||||
color: mousedown ? activeColor : inactiveColor
|
color: mousedown ? activeColor : inactiveColor
|
||||||
border.color: mousedown ? activeColor : inactiveColor
|
border.color: mousedown ? activeColor : inactiveColor
|
||||||
border.width: 1
|
border.width: 1
|
||||||
radius: override_radius
|
radius: height / 2
|
||||||
antialiasing: true
|
antialiasing: true
|
||||||
|
|
||||||
property bool checked: false
|
property bool checked: false
|
||||||
property double override_radius: (height / 2.0)
|
|
||||||
property alias text: buttonText.text
|
property alias text: buttonText.text
|
||||||
property alias font: buttonText.font.family
|
property alias font: buttonText.font.family
|
||||||
property string icon
|
property string icon
|
||||||
|
property int iconSize: Theme.uiIconSizeS
|
||||||
property bool mousedown
|
property bool mousedown
|
||||||
property string tooltip
|
property string tooltip
|
||||||
signal clicked
|
signal clicked
|
||||||
|
|
||||||
RowLayout {
|
RowLayout {
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
spacing: 6 * gcd.themeScale
|
spacing: Theme.paddingSmall
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
id: ico
|
id: ico
|
||||||
source: icon!="" ? gcd.assetPath + "core/"+icon+".webp" : "";
|
source: icon!="" ? gcd.assetPath + "core/"+icon+".webp" : "";
|
||||||
visible: icon != ""
|
visible: icon != ""
|
||||||
height: button.height / 2
|
height: button.iconSize
|
||||||
sourceSize.height: button.height / 2
|
sourceSize.height: button.iconSize
|
||||||
|
|
||||||
ColorOverlay{
|
ColorOverlay{
|
||||||
id: iconColorOverlay
|
id: iconColorOverlay
|
||||||
|
@ -60,11 +60,17 @@ Rectangle {
|
||||||
id: buttonText
|
id: buttonText
|
||||||
font.family: Fonts.applicationFontRegular.name
|
font.family: Fonts.applicationFontRegular.name
|
||||||
font.styleName: "ExtraBold"
|
font.styleName: "ExtraBold"
|
||||||
font.pixelSize: button.height / 2
|
font.pointSize: Theme.textMediumPt
|
||||||
color: button.textColor
|
color: button.textColor
|
||||||
visible: button.text != "" && button.text != undefined
|
visible: button.text != "" && button.text != undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
|
TextMetrics {
|
||||||
|
id: tm
|
||||||
|
font: buttonText.font
|
||||||
|
text: buttonText.text
|
||||||
|
}
|
||||||
|
|
||||||
ToolTip.visible: tooltip != "" && mouseArea.containsMouse
|
ToolTip.visible: tooltip != "" && mouseArea.containsMouse
|
||||||
ToolTip.text: tooltip
|
ToolTip.text: tooltip
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,7 +11,7 @@ import "theme"
|
||||||
TextField {
|
TextField {
|
||||||
id: tf
|
id: tf
|
||||||
color: Theme.textfieldTextColor
|
color: Theme.textfieldTextColor
|
||||||
font.pixelSize: Theme.secondaryTextSize * gcd.themeScale
|
font.pointSize: Theme.textSmallPt
|
||||||
width: parent.width - 20
|
width: parent.width - 20
|
||||||
|
|
||||||
// IMPORTANT: Setting a dynamic height on the internal button widget caused it to crash on Android when
|
// IMPORTANT: Setting a dynamic height on the internal button widget caused it to crash on Android when
|
||||||
|
@ -41,7 +41,7 @@ TextField {
|
||||||
icon: ""
|
icon: ""
|
||||||
text: button_text
|
text: button_text
|
||||||
anchors { top: parent.top; right: parent.right }
|
anchors { top: parent.top; right: parent.right }
|
||||||
override_radius: 10
|
radius: 10
|
||||||
height: parent.height;
|
height: parent.height;
|
||||||
|
|
||||||
inactiveColor: Theme.textfieldButtonColor
|
inactiveColor: Theme.textfieldButtonColor
|
||||||
|
|
|
@ -9,7 +9,7 @@ import "theme"
|
||||||
// IconTextField integrates a text field and an icon
|
// IconTextField integrates a text field and an icon
|
||||||
TextField {
|
TextField {
|
||||||
color: Theme.textfieldTextColor
|
color: Theme.textfieldTextColor
|
||||||
font.pixelSize: Theme.secondaryTextSize * gcd.themeScale * gcd.themeScale
|
font.pointSize: Theme.textSmallPt
|
||||||
width: parent.width - 20
|
width: parent.width - 20
|
||||||
property alias icon: icon_.source
|
property alias icon: icon_.source
|
||||||
signal clicked
|
signal clicked
|
||||||
|
|
|
@ -10,23 +10,20 @@ RadioButton {
|
||||||
|
|
||||||
property color textColor: Theme.mainTextColor
|
property color textColor: Theme.mainTextColor
|
||||||
property color indicatorColor: Theme.boxCheckedColor
|
property color indicatorColor: Theme.boxCheckedColor
|
||||||
//property real size: 12
|
|
||||||
spacing: 0 //4 * gcd.themeScale
|
|
||||||
|
|
||||||
|
|
||||||
indicator: Rectangle {
|
indicator: Rectangle {
|
||||||
width: 16 * gcd.themeScale
|
width: Theme.uiSliderSize
|
||||||
height: 16 * gcd.themeScale
|
height: width
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
radius: 9 * gcd.themeScale
|
radius: width / 2
|
||||||
border.width: 1
|
border.width: 1
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
visible: control.checked
|
visible: control.checked
|
||||||
color: indicatorColor
|
color: indicatorColor
|
||||||
radius: 9 * gcd.themeScale
|
radius: width/2
|
||||||
anchors.margins: 4 * gcd.themeScale
|
anchors.margins: 2//thin line
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,9 +9,9 @@ import "theme"
|
||||||
GridLayout {
|
GridLayout {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
// have children ... control weather to stack or row them
|
// have children ... control whether to stack or row them
|
||||||
// n * minWidth determin
|
// n * minWidth determines row or column
|
||||||
property int minCellWidth: Theme.sidePaneMinSize * gcd.themeScale
|
property int minCellWidth: Theme.sidePaneMinSize
|
||||||
|
|
||||||
|
|
||||||
onWidthChanged: resizeCheck()
|
onWidthChanged: resizeCheck()
|
||||||
|
|
|
@ -33,9 +33,9 @@ Slider {
|
||||||
handle: Rectangle {
|
handle: Rectangle {
|
||||||
x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
|
x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
|
||||||
y: control.topPadding + control.availableHeight / 2 - height / 2
|
y: control.topPadding + control.availableHeight / 2 - height / 2
|
||||||
implicitWidth: 26 * gcd.themeScale
|
implicitWidth: Theme.uiSliderSize
|
||||||
implicitHeight: 26 * gcd.themeScale
|
implicitHeight: implicitWidth
|
||||||
radius: 13 * gcd.themeScale
|
radius: implicitWidth / 2
|
||||||
color: control.pressed ? control.buttonActiveColor : control.buttonColor
|
color: control.pressed ? control.buttonActiveColor : control.buttonColor
|
||||||
border.color: control.buttonColor
|
border.color: control.buttonColor
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,7 +17,7 @@ TextField {
|
||||||
property bool error: false
|
property bool error: false
|
||||||
|
|
||||||
color: error ? errorColor : Theme.textfieldTextColor
|
color: error ? errorColor : Theme.textfieldTextColor
|
||||||
font.pointSize: 10 * gcd.themeScale
|
font.pointSize: Theme.textSmallPt
|
||||||
width: 100
|
width: 100
|
||||||
|
|
||||||
// selectByMouse shouldn't be enabled on mobile
|
// selectByMouse shouldn't be enabled on mobile
|
||||||
|
|
|
@ -13,7 +13,7 @@ TextField {
|
||||||
property bool error: false
|
property bool error: false
|
||||||
|
|
||||||
color: error ? errorColor : Theme.mainTextColor
|
color: error ? errorColor : Theme.mainTextColor
|
||||||
font.pixelSize: Theme.secondaryTextSize * gcd.themeScale
|
font.pointSize: Theme.textSmallPt
|
||||||
signal clicked
|
signal clicked
|
||||||
smooth: true
|
smooth: true
|
||||||
placeholderTextColor: Theme.altTextColor
|
placeholderTextColor: Theme.altTextColor
|
||||||
|
|
|
@ -37,7 +37,7 @@ Rectangle {
|
||||||
Connections {
|
Connections {
|
||||||
target: gcd
|
target: gcd
|
||||||
|
|
||||||
onSupplySettings: function(zoom, newLocale) {
|
onSupplySettings: function(zoom, scale, newLocale) {
|
||||||
selected = newLocale == locale
|
selected = newLocale == locale
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,8 +4,8 @@ import "../theme"
|
||||||
|
|
||||||
TextFieldStyle {
|
TextFieldStyle {
|
||||||
id: root
|
id: root
|
||||||
textColor: "black"
|
textColor: Theme.mainTextColor
|
||||||
font.pointSize: 10 * gcd.themeScale
|
font.pointSize: Theme.textSmallPt
|
||||||
property int width: parent.width
|
property int width: parent.width
|
||||||
|
|
||||||
background: Rectangle {
|
background: Rectangle {
|
||||||
|
|
|
@ -105,8 +105,8 @@ Item {
|
||||||
property ThemeType light: CwtchLight{}
|
property ThemeType light: CwtchLight{}
|
||||||
property ThemeType theme: gcd.theme == "dark" ? dark : light
|
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:
|
// magnification system: all size-sets should generally respect these semantics:
|
||||||
//
|
//
|
||||||
|
@ -136,9 +136,16 @@ Item {
|
||||||
readonly property variant paddingLargeBase: [10, 30, 40]
|
readonly property variant paddingLargeBase: [10, 30, 40]
|
||||||
readonly property int paddingLarge: paddingLargeBase[p[scale]]
|
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 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 //
|
// section: TEXT SIZE //
|
||||||
////////////////////////
|
////////////////////////
|
||||||
|
@ -155,6 +162,9 @@ Item {
|
||||||
readonly property variant textHeaderPtBase: [16, 24, 32]
|
readonly property variant textHeaderPtBase: [16, 24, 32]
|
||||||
readonly property int textHeaderPt: textHeaderPtBase[t[scale]]
|
readonly property int textHeaderPt: textHeaderPtBase[t[scale]]
|
||||||
|
|
||||||
|
readonly property variant textBadgeLabelPtBase: [6, 10, 14]
|
||||||
|
readonly property variant textBadgeLabelPt: textBadgeLabelPtBase[t[scale]]
|
||||||
|
|
||||||
/////////////////////////////////
|
/////////////////////////////////
|
||||||
// section: ELEMENT DIMENSIONS //
|
// section: ELEMENT DIMENSIONS //
|
||||||
/////////////////////////////////
|
/////////////////////////////////
|
||||||
|
@ -171,13 +181,16 @@ Item {
|
||||||
readonly property variant contactPortraitSizeBase: [60, 72, 84]
|
readonly property variant contactPortraitSizeBase: [60, 72, 84]
|
||||||
readonly property int contactPortraitSize: contactPortraitSizeBase[p[scale]]
|
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 //
|
// section: OLD FONT SIZES REFERENCE //
|
||||||
///////////////////////////////////////
|
///////////////////////////////////////
|
||||||
|
|
||||||
// old size (usually given to font.pixelSize but occasionally to font.pointSize) -> new size
|
// old size (usually given to font.pixelSize but occasionally to font.pointSize) -> new size
|
||||||
readonly property int badgeTextSize: 12
|
readonly property int badgeTextSize: textSmallPt
|
||||||
readonly property int statusTextSize: 12
|
readonly property int statusTextSize: textSmallPt
|
||||||
// readonly property int chatMetaTextSize: 15 -> textSmallPt
|
// readonly property int chatMetaTextSize: 15 -> textSmallPt
|
||||||
// readonly property int secondaryTextSize: 20 -> textSmallPt
|
// readonly property int secondaryTextSize: 20 -> textSmallPt
|
||||||
readonly property int chatSize: textMediumPt //was:20
|
readonly property int chatSize: textMediumPt //was:20
|
||||||
|
|
Loading…
Reference in New Issue