diff --git a/qml/ComponentLibrary/ComponentLibrary.qrc b/qml/ComponentLibrary/ComponentLibrary.qrc index 2485941..bf484c1 100644 --- a/qml/ComponentLibrary/ComponentLibrary.qrc +++ b/qml/ComponentLibrary/ComponentLibrary.qrc @@ -10,7 +10,7 @@ menus/ActionMenu_floating.qml menus/ActionMenuItem.qml menus/ActionMenuSeparator.qml - controls/DrawerThemed.qml + menus/DrawerThemed.qml menus/DrawerItem.qml menus/DrawerButton.qml menus/ListItem.qml @@ -20,30 +20,29 @@ menus/ListTitle.qml menus/SectionTitle.qml - wip/Chip.qml - wip/FAB.qml - wip/ExtendedFAB.qml - wip/ButtonSunken.qml - - wip/ButtonDesktop.qml - wip/ButtonOutline.qml - wip/ButtonClear.qml - wip/ButtonFlat.qml - wip/ButtonSolid.qml - wip/ButtonWireframe.qml - wip/ButtonImpl.qml - - wip/RoundButtonDesktop.qml - wip/RoundButtonOutline.qml - wip/RoundButtonClear.qml - wip/RoundButtonFlat.qml - wip/RoundButtonSolid.qml - wip/RoundButtonWireframe.qml - wip/RoundButtonImpl.qml + buttons/ButtonChip.qml + buttons/ButtonFab.qml + buttons/ButtonFabExtended.qml + buttons/ButtonSunken.qml + buttons/ButtonDesktop.qml + buttons/ButtonOutline.qml + buttons/ButtonClear.qml + buttons/ButtonFlat.qml + buttons/ButtonSolid.qml + buttons/ButtonWireframe.qml + buttons/ButtonImpl.qml + buttons/RoundButtonDesktop.qml + buttons/RoundButtonOutline.qml + buttons/RoundButtonClear.qml + buttons/RoundButtonFlat.qml + buttons/RoundButtonSolid.qml + buttons/RoundButtonWireframe.qml + buttons/RoundButtonImpl.qml deprecated/ButtonCompactable.qml deprecated/ButtonText.qml deprecated/ButtonImage.qml + deprecated/ItemTagButton.qml deprecated/RoundButtonIcon.qml deprecated/RoundButtonText.qml @@ -55,22 +54,13 @@ generic/IconSvg.qml generic/ItemLicenseBadge.qml generic/ItemBadge.qml - generic/ItemTag.qml - generic/ItemTagButton.qml - generic/MiddleSliderArrow.qml - generic/MiddleSliderValueSolid.qml generic/ProgressArc.qml generic/ProgressCircle.qml - generic/RangeSliderArrow.qml - generic/RangeSliderValueSolid.qml generic/SelectorMenu.qml generic/SelectorMenuSunken.qml generic/SelectorMenuItem.qml generic/SelectorMenuColorful.qml generic/SelectorMenuColorfulItem.qml - generic/SliderArrow.qml - generic/SliderValueSolid.qml - generic/ToolTipFlat.qml layouts/FrameBox.qml layouts/FrameThemed.qml @@ -83,16 +73,23 @@ controls/ComboBoxThemed.qml controls/DialThemed.qml controls/ItemDelegateThemed.qml + controls/MiddleSliderArrow.qml controls/MiddleSliderThemed.qml + controls/MiddleSliderValueSolid.qml controls/PageIndicatorThemed.qml controls/ProgressBarThemed.qml controls/RadioButtonThemed.qml + controls/RangeSliderArrow.qml controls/RangeSliderThemed.qml + controls/RangeSliderValue.qml + controls/RangeSliderValueSolid.qml controls/RippleThemed.qml controls/RoundButtonThemed.qml controls/RoundButtonIconThemed.qml controls/ScrollBarThemed.qml + controls/SliderArrow.qml controls/SliderThemed.qml + controls/SliderValueSolid.qml controls/SpinBoxThemed_desktop.qml controls/SpinBoxThemed_mobile.qml controls/SwitchThemed_desktop.qml @@ -100,12 +97,19 @@ controls/TextAreaThemed.qml controls/TextEditThemed.qml controls/TextFieldThemed.qml + controls/ToolTipFlat.qml + controls/ToolTipThemed.qml controls/TumblerThemed.qml complex/DatePicker.qml complex/TextField_FileDialog.qml complex/TextField_FolderDialog.qml + wip/ItemTagClear.qml + wip/ItemTagDesktop.qml + wip/ItemTagFlat.qml + wip/ItemTagImpl.qml + utils/CsdMac.qml utils/CsdWindows.qml utils/CsdLinux.qml diff --git a/qml/ComponentLibrary/ThemeEngine.qml b/qml/ComponentLibrary/ThemeEngine.qml index 3873fa3..7e4e26f 100644 --- a/qml/ComponentLibrary/ThemeEngine.qml +++ b/qml/ComponentLibrary/ThemeEngine.qml @@ -159,6 +159,8 @@ Item { property int componentFontSize: isHdpi ? 14 : 15 + property int componentMarginXS: isHdpi ? 4 : 8 + property int componentMarginS: isHdpi ? 8 : 12 property int componentMargin: isHdpi ? 12 : 16 property int componentMarginL: isHdpi ? 16 : 20 property int componentMarginXL: isHdpi ? 20 : 24 diff --git a/qml/ComponentLibrary/wip/Chip.qml b/qml/ComponentLibrary/buttons/ButtonChip.qml similarity index 100% rename from qml/ComponentLibrary/wip/Chip.qml rename to qml/ComponentLibrary/buttons/ButtonChip.qml diff --git a/qml/ComponentLibrary/wip/ButtonClear.qml b/qml/ComponentLibrary/buttons/ButtonClear.qml similarity index 100% rename from qml/ComponentLibrary/wip/ButtonClear.qml rename to qml/ComponentLibrary/buttons/ButtonClear.qml diff --git a/qml/ComponentLibrary/wip/ButtonDesktop.qml b/qml/ComponentLibrary/buttons/ButtonDesktop.qml similarity index 100% rename from qml/ComponentLibrary/wip/ButtonDesktop.qml rename to qml/ComponentLibrary/buttons/ButtonDesktop.qml diff --git a/qml/ComponentLibrary/wip/FAB.qml b/qml/ComponentLibrary/buttons/ButtonFab.qml similarity index 100% rename from qml/ComponentLibrary/wip/FAB.qml rename to qml/ComponentLibrary/buttons/ButtonFab.qml diff --git a/qml/ComponentLibrary/wip/ExtendedFAB.qml b/qml/ComponentLibrary/buttons/ButtonFabExtended.qml similarity index 100% rename from qml/ComponentLibrary/wip/ExtendedFAB.qml rename to qml/ComponentLibrary/buttons/ButtonFabExtended.qml diff --git a/qml/ComponentLibrary/wip/ButtonFlat.qml b/qml/ComponentLibrary/buttons/ButtonFlat.qml similarity index 100% rename from qml/ComponentLibrary/wip/ButtonFlat.qml rename to qml/ComponentLibrary/buttons/ButtonFlat.qml diff --git a/qml/ComponentLibrary/wip/ButtonImpl.qml b/qml/ComponentLibrary/buttons/ButtonImpl.qml similarity index 100% rename from qml/ComponentLibrary/wip/ButtonImpl.qml rename to qml/ComponentLibrary/buttons/ButtonImpl.qml diff --git a/qml/ComponentLibrary/wip/ButtonOutline.qml b/qml/ComponentLibrary/buttons/ButtonOutline.qml similarity index 100% rename from qml/ComponentLibrary/wip/ButtonOutline.qml rename to qml/ComponentLibrary/buttons/ButtonOutline.qml diff --git a/qml/ComponentLibrary/wip/ButtonSolid.qml b/qml/ComponentLibrary/buttons/ButtonSolid.qml similarity index 100% rename from qml/ComponentLibrary/wip/ButtonSolid.qml rename to qml/ComponentLibrary/buttons/ButtonSolid.qml diff --git a/qml/ComponentLibrary/wip/ButtonSunken.qml b/qml/ComponentLibrary/buttons/ButtonSunken.qml similarity index 100% rename from qml/ComponentLibrary/wip/ButtonSunken.qml rename to qml/ComponentLibrary/buttons/ButtonSunken.qml diff --git a/qml/ComponentLibrary/wip/ButtonWireframe.qml b/qml/ComponentLibrary/buttons/ButtonWireframe.qml similarity index 100% rename from qml/ComponentLibrary/wip/ButtonWireframe.qml rename to qml/ComponentLibrary/buttons/ButtonWireframe.qml diff --git a/qml/ComponentLibrary/wip/RoundButtonClear.qml b/qml/ComponentLibrary/buttons/RoundButtonClear.qml similarity index 100% rename from qml/ComponentLibrary/wip/RoundButtonClear.qml rename to qml/ComponentLibrary/buttons/RoundButtonClear.qml diff --git a/qml/ComponentLibrary/wip/RoundButtonDesktop.qml b/qml/ComponentLibrary/buttons/RoundButtonDesktop.qml similarity index 100% rename from qml/ComponentLibrary/wip/RoundButtonDesktop.qml rename to qml/ComponentLibrary/buttons/RoundButtonDesktop.qml diff --git a/qml/ComponentLibrary/wip/RoundButtonFlat.qml b/qml/ComponentLibrary/buttons/RoundButtonFlat.qml similarity index 100% rename from qml/ComponentLibrary/wip/RoundButtonFlat.qml rename to qml/ComponentLibrary/buttons/RoundButtonFlat.qml diff --git a/qml/ComponentLibrary/wip/RoundButtonImpl.qml b/qml/ComponentLibrary/buttons/RoundButtonImpl.qml similarity index 100% rename from qml/ComponentLibrary/wip/RoundButtonImpl.qml rename to qml/ComponentLibrary/buttons/RoundButtonImpl.qml diff --git a/qml/ComponentLibrary/wip/RoundButtonOutline.qml b/qml/ComponentLibrary/buttons/RoundButtonOutline.qml similarity index 100% rename from qml/ComponentLibrary/wip/RoundButtonOutline.qml rename to qml/ComponentLibrary/buttons/RoundButtonOutline.qml diff --git a/qml/ComponentLibrary/wip/RoundButtonSolid.qml b/qml/ComponentLibrary/buttons/RoundButtonSolid.qml similarity index 100% rename from qml/ComponentLibrary/wip/RoundButtonSolid.qml rename to qml/ComponentLibrary/buttons/RoundButtonSolid.qml diff --git a/qml/ComponentLibrary/wip/RoundButtonWireframe.qml b/qml/ComponentLibrary/buttons/RoundButtonWireframe.qml similarity index 100% rename from qml/ComponentLibrary/wip/RoundButtonWireframe.qml rename to qml/ComponentLibrary/buttons/RoundButtonWireframe.qml diff --git a/qml/ComponentLibrary/generic/MiddleSliderArrow.qml b/qml/ComponentLibrary/controls/MiddleSliderArrow.qml similarity index 92% rename from qml/ComponentLibrary/generic/MiddleSliderArrow.qml rename to qml/ComponentLibrary/controls/MiddleSliderArrow.qml index 85fa470..8328aea 100644 --- a/qml/ComponentLibrary/generic/MiddleSliderArrow.qml +++ b/qml/ComponentLibrary/controls/MiddleSliderArrow.qml @@ -23,8 +23,9 @@ T.Slider { property int ticksCount: ((to - from) / stepSize) // colors - property color colorBackground: Theme.colorForeground + property color colorBackground: Theme.colorComponentBackground property color colorForeground: Theme.colorPrimary + property color colorTicks: Theme.colorComponentDown //////////////// @@ -42,7 +43,7 @@ T.Slider { scale: control.horizontal && control.mirrored ? -1 : 1 clip: true - Repeater { + Repeater { // ticks width: control.availableWidth model: (control.ticksCount - 1) Rectangle { @@ -50,7 +51,7 @@ T.Slider { y: control.horizontal ? 0 : ((control.availableHeight / control.ticksCount) * (index+1)) width: control.horizontal ? 2 : parent.height height: control.horizontal ? parent.height : 2 - color: Theme.colorComponentBorder + color: control.colorTicks } } @@ -74,7 +75,7 @@ T.Slider { height: 12 rotation: control.horizontal ? 0 : -90 opacity: control.enabled ? 1 : 0.8 - color: control.pressed ? Theme.colorSecondary : Theme.colorPrimary + color: control.pressed ? Theme.colorSecondary : control.colorForeground Rectangle { width: 10 diff --git a/qml/ComponentLibrary/generic/MiddleSliderValueSolid.qml b/qml/ComponentLibrary/controls/MiddleSliderValueSolid.qml similarity index 82% rename from qml/ComponentLibrary/generic/MiddleSliderValueSolid.qml rename to qml/ComponentLibrary/controls/MiddleSliderValueSolid.qml index 55bd9c4..4d11054 100644 --- a/qml/ComponentLibrary/generic/MiddleSliderValueSolid.qml +++ b/qml/ComponentLibrary/controls/MiddleSliderValueSolid.qml @@ -18,7 +18,7 @@ T.Slider { // settings property int hhh: 18 property string unit - property int tofixed: 0 + property int floatprecision: 0 property bool kshort: false // colors @@ -31,22 +31,22 @@ T.Slider { background: Rectangle { x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2) y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0) - implicitWidth: control.horizontal ? 200 : hhh - implicitHeight: control.horizontal ? hhh : 200 + implicitWidth: control.horizontal ? 200 : control.hhh + implicitHeight: control.horizontal ? control.hhh : 200 width: control.horizontal ? control.availableWidth : implicitWidth height: control.horizontal ? implicitHeight : control.availableHeight - radius: hhh + radius: control.hhh color: control.colorBackground scale: control.horizontal && control.mirrored ? -1 : 1 Rectangle { x: control.horizontal ? ((control.visualPosition <= 0.5) ? handle.x : control.availableWidth / 2) : 0 y: !control.horizontal ? ((control.visualPosition <= 0.5) ? handle.y : control.availableHeight / 2) : 0 - width: control.horizontal ? Math.abs((control.width / 2) - handle.x - ((control.visualPosition > 0.5) ? handle.width : 0)) : hhh - height: !control.horizontal ? Math.abs((control.height / 2) - handle.y - ((control.visualPosition > 0.5) ? handle.height : 0)) : hhh + width: control.horizontal ? Math.abs((control.width / 2) - handle.x - ((control.visualPosition > 0.5) ? handle.width : 0)) : control.hhh + height: !control.horizontal ? Math.abs((control.height / 2) - handle.y - ((control.visualPosition > 0.5) ? handle.height : 0)) : control.hhh - radius: hhh + radius: control.hhh color: control.colorForeground } } @@ -56,32 +56,32 @@ T.Slider { handle: Rectangle { x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2) y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height)) - implicitWidth: hhh - implicitHeight: hhh + implicitWidth: control.hhh + implicitHeight: control.hhh - width: control.horizontal ? t1.contentWidth + 16 : hhh - height: hhh - radius: hhh + width: control.horizontal ? t1.contentWidth + 16 : control.hhh + height: control.hhh + radius: control.hhh color: control.colorForeground border.color: control.colorForeground Text { id: t1 - width: hhh - height: hhh + width: control.hhh + height: control.hhh anchors.centerIn: parent text: { var vvalue = control.value if (control.unit === "°" && settingsManager.tempUnit === "F") vvalue = UtilsNumber.tempCelsiusToFahrenheit(vvalue) - vvalue = vvalue.toFixed(0) + vvalue = vvalue.toFixed(control.floatprecision) return ((control.kshort && control.value > 999) ? (vvalue / 1000) : vvalue) + control.unit } textFormat: Text.PlainText font.bold: true font.pixelSize: isDesktop ? 12 : 13 fontSizeMode: Text.Fit - minimumPixelSize: 10 + minimumPixelSize: Theme.fontSizeContentVerySmall color: control.colorText horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter diff --git a/qml/ComponentLibrary/generic/RangeSliderArrow.qml b/qml/ComponentLibrary/controls/RangeSliderArrow.qml similarity index 92% rename from qml/ComponentLibrary/generic/RangeSliderArrow.qml rename to qml/ComponentLibrary/controls/RangeSliderArrow.qml index 81e5430..b050734 100644 --- a/qml/ComponentLibrary/generic/RangeSliderArrow.qml +++ b/qml/ComponentLibrary/controls/RangeSliderArrow.qml @@ -26,8 +26,9 @@ T.RangeSlider { property int ticksCount: ((to - from) / stepSize) // colors - property color colorBackground: Theme.colorForeground + property color colorBackground: Theme.colorComponentBackground property color colorForeground: Theme.colorPrimary + property color colorTicks: Theme.colorComponentDown //////////////// @@ -45,7 +46,7 @@ T.RangeSlider { scale: control.horizontal && control.mirrored ? -1 : 1 clip: true - Repeater { + Repeater { // ticks width: control.availableWidth model: (control.ticksCount - 1) Rectangle { @@ -53,7 +54,7 @@ T.RangeSlider { y: control.horizontal ? 0 : ((control.availableHeight / control.ticksCount) * (index+1)) width: control.horizontal ? 2 : parent.height height: control.horizontal ? parent.height : 2 - color: Theme.colorComponentBorder + color: control.colorTicks } } @@ -77,7 +78,7 @@ T.RangeSlider { height: 12 rotation: control.horizontal ? 0 : -90 opacity: control.enabled ? 1 : 0.8 - color: first.pressed ? Theme.colorSecondary : Theme.colorPrimary + color: first.pressed ? Theme.colorSecondary : control.colorForeground Rectangle { width: 10 @@ -100,7 +101,7 @@ T.RangeSlider { height: 12 rotation: control.horizontal ? 0 : -90 opacity: control.enabled ? 1 : 0.8 - color: second.pressed ? Theme.colorSecondary : Theme.colorPrimary + color: second.pressed ? Theme.colorSecondary : control.colorForeground Rectangle { width: 10 diff --git a/qml/ComponentLibrary/controls/RangeSliderValue.qml b/qml/ComponentLibrary/controls/RangeSliderValue.qml new file mode 100644 index 0000000..3676621 --- /dev/null +++ b/qml/ComponentLibrary/controls/RangeSliderValue.qml @@ -0,0 +1,137 @@ +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T + +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber + +T.RangeSlider { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + first.implicitHandleWidth + leftPadding + rightPadding, + second.implicitHandleWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + first.implicitHandleHeight + topPadding + bottomPadding, + second.implicitHandleHeight + topPadding + bottomPadding) + + padding: 6 + + // settings + property int hhh: 22 + property string unit + property int floatprecision: 0 + + // colors + property color colorBackground: Theme.colorComponentBackground + property color colorForeground: Theme.colorPrimary + property color colorText: "white" + + //////////////// + + background: Rectangle { + x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2) + y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0) + implicitWidth: control.horizontal ? 200 : 4 + implicitHeight: control.horizontal ? 4 : 200 + width: control.horizontal ? control.availableWidth : implicitWidth + height: control.horizontal ? implicitHeight : control.availableHeight + + radius: 2 + opacity: control.enabled ? 1 : 0.66 + color: control.colorBackground + scale: control.horizontal && control.mirrored ? -1 : 1 + + Rectangle { + x: control.horizontal ? control.first.position * parent.width + 3 : -1 + y: control.horizontal ? -1 : control.second.visualPosition * parent.height + 3 + width: control.horizontal ? control.second.position * parent.width - control.first.position * parent.width - 6 : 6 + height: control.horizontal ? 6 : control.second.position * parent.height - control.first.position * parent.height - 6 + + radius: 2 + color: control.colorForeground + } + } + + //////////////// + + first.handle: Rectangle { + x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2) + y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height)) + + implicitWidth: 22 + implicitHeight: 22 + width: t1.width + 16 + radius: 6 + + opacity: control.enabled ? 1 : 0.8 + color: first.pressed ? Theme.colorSecondary : control.colorForeground + border.width: 1 + border.color: control.colorForeground + + Text { + id: t1 + height: control.hhh + anchors.centerIn: parent + //anchors.verticalCenter: parent.verticalCenter + //anchors.verticalCenterOffset: 1 + //anchors.horizontalCenter: parent.horizontalCenter + + text: { + var vvalue = first.value + if (unit === "°" && settingsManager.tempUnit === "F") vvalue = UtilsNumber.tempCelsiusToFahrenheit(vvalue) + vvalue = vvalue.toFixed(control.floatprecision) + return ((first.value > 999) ? vvalue / 1000 : vvalue) + control.unit + } + textFormat: Text.PlainText + font.bold: false + font.pixelSize: Theme.fontSizeContentVerySmall + //fontSizeMode: Text.Fit + minimumPixelSize: Theme.fontSizeContentVerySmall + color: control.colorText + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + } + + //////////////// + + second.handle: Rectangle { + x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2) + y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height)) + implicitWidth: control.hhh + implicitHeight: control.hhh + width: t2.width + 16 + + radius: 6 + color: control.colorForeground + border.color: control.colorForeground + opacity: second.pressed ? 0.9 : 1 + + Text { + id: t2 + height: control.hhh + anchors.centerIn: parent + //anchors.verticalCenter: parent.verticalCenter + //anchors.verticalCenterOffset: 1 + //anchors.horizontalCenter: parent.horizontalCenter + + text: { + var vvalue = second.value + if (unit === "°" && settingsManager.tempUnit === "F") vvalue = UtilsNumber.tempCelsiusToFahrenheit(vvalue) + vvalue = vvalue.toFixed(control.floatprecision) + return ((second.value > 999) ? vvalue / 1000 : vvalue) + control.unit + } + textFormat: Text.PlainText + font.bold: false + font.pixelSize: Theme.fontSizeContentVerySmall + //fontSizeMode: Text.Fit + minimumPixelSize: Theme.fontSizeContentVerySmall + color: control.colorText + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + } + + //////////////// +} diff --git a/qml/ComponentLibrary/generic/RangeSliderValueSolid.qml b/qml/ComponentLibrary/controls/RangeSliderValueSolid.qml similarity index 78% rename from qml/ComponentLibrary/generic/RangeSliderValueSolid.qml rename to qml/ComponentLibrary/controls/RangeSliderValueSolid.qml index 17355cd..16c8f89 100644 --- a/qml/ComponentLibrary/generic/RangeSliderValueSolid.qml +++ b/qml/ComponentLibrary/controls/RangeSliderValueSolid.qml @@ -20,7 +20,7 @@ T.RangeSlider { // settings property int hhh: 18 property string unit - property int tofixed: 0 + property int floatprecision: 0 property bool kshort: false // colors @@ -33,22 +33,22 @@ T.RangeSlider { background: Rectangle { x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2) y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0) - implicitWidth: control.horizontal ? 200 : hhh - implicitHeight: control.horizontal ? hhh : 200 + implicitWidth: control.horizontal ? 200 : control.hhh + implicitHeight: control.horizontal ? control.hhh : 200 width: control.horizontal ? control.availableWidth : implicitWidth height: control.horizontal ? implicitHeight : control.availableHeight - radius: hhh + radius: control.hhh color: control.colorBackground scale: control.horizontal && control.mirrored ? -1 : 1 Rectangle { x: control.horizontal ? control.first.handle.x : 0 y: control.horizontal ? 0 : control.second.handle.y - width: control.horizontal ? control.second.handle.x - control.first.handle.x + control.second.handle.width*0.66 : hhh - height: control.horizontal ? hhh : control.first.handle.y - control.second.handle.y + control.second.handle.height*0.66 + width: control.horizontal ? control.second.handle.x - control.first.handle.x + control.second.handle.width*0.66 : control.hhh + height: control.horizontal ? control.hhh : control.first.handle.y - control.second.handle.y + control.second.handle.height*0.66 - radius: hhh + radius: control.hhh color: control.colorForeground } } @@ -58,31 +58,31 @@ T.RangeSlider { first.handle: Rectangle { x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2) y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height)) - implicitWidth: hhh - implicitHeight: hhh + implicitWidth: control.hhh + implicitHeight: control.hhh - width: control.horizontal ? t1.contentWidth + 16 : hhh - height: hhh - radius: hhh + width: control.horizontal ? t1.contentWidth + 16 : control.hhh + height: control.hhh + radius: control.hhh color: control.colorForeground border.color: control.colorForeground Text { id: t1 - height: hhh + height: control.hhh anchors.centerIn: parent text: { var vvalue = first.value if (control.unit === "°" && settingsManager.tempUnit === "F") vvalue = UtilsNumber.tempCelsiusToFahrenheit(vvalue) - vvalue = vvalue.toFixed(control.tofixed) + vvalue = vvalue.toFixed(control.floatprecision) return ((control.kshort && first.value > 999) ? (vvalue / 1000) : vvalue) + control.unit } textFormat: Text.PlainText font.bold: true font.pixelSize: isDesktop ? 12 : 13 fontSizeMode: Text.Fit - minimumPixelSize: 10 + minimumPixelSize: Theme.fontSizeContentVerySmall color: control.colorText horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter @@ -94,31 +94,31 @@ T.RangeSlider { second.handle: Rectangle { x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2) y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height)) - implicitWidth: hhh - implicitHeight: hhh + implicitWidth: control.hhh + implicitHeight: control.hhh - width: control.horizontal ? t2.contentWidth + 16 : hhh - height: hhh - radius: hhh + width: control.horizontal ? t2.contentWidth + 16 : control.hhh + height: control.hhh + radius: control.hhh color: control.colorForeground border.color: control.colorForeground Text { id: t2 - height: hhh + height: control.hhh anchors.centerIn: parent text: { var vvalue = second.value if (control.unit === "°" && settingsManager.tempUnit === "F") vvalue = UtilsNumber.tempCelsiusToFahrenheit(vvalue) - vvalue = vvalue.toFixed(control.tofixed) + vvalue = vvalue.toFixed(control.floatprecision) return ((control.kshort && second.value > 999) ? (vvalue / 1000) : vvalue) + control.unit } textFormat: Text.PlainText font.bold: true font.pixelSize: isDesktop ? 12 : 13 fontSizeMode: Text.Fit - minimumPixelSize: 10 + minimumPixelSize: Theme.fontSizeContentVerySmall color: control.colorText horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter diff --git a/qml/ComponentLibrary/generic/SliderArrow.qml b/qml/ComponentLibrary/controls/SliderArrow.qml similarity index 91% rename from qml/ComponentLibrary/generic/SliderArrow.qml rename to qml/ComponentLibrary/controls/SliderArrow.qml index 54b6289..388ffd5 100644 --- a/qml/ComponentLibrary/generic/SliderArrow.qml +++ b/qml/ComponentLibrary/controls/SliderArrow.qml @@ -23,8 +23,9 @@ T.Slider { property int ticksCount: ((to - from) / stepSize) // colors - property color colorBackground: Theme.colorForeground + property color colorBackground: Theme.colorComponentBackground property color colorForeground: Theme.colorPrimary + property color colorTicks: Theme.colorComponentDown //////////////// @@ -42,7 +43,7 @@ T.Slider { scale: control.horizontal && control.mirrored ? -1 : 1 clip: true - Repeater { + Repeater { // ticks width: control.availableWidth model: (control.ticksCount - 1) Rectangle { @@ -50,7 +51,7 @@ T.Slider { y: control.horizontal ? 0 : ((control.availableHeight / control.ticksCount) * (index+1)) width: control.horizontal ? 2 : parent.height height: control.horizontal ? parent.height : 2 - color: Theme.colorComponentBorder + color: control.colorTicks } } @@ -74,7 +75,7 @@ T.Slider { height: 12 rotation: control.horizontal ? 0 : -90 opacity: control.enabled ? 1 : 0.8 - color: control.pressed ? Theme.colorSecondary : Theme.colorPrimary + color: control.pressed ? Theme.colorSecondary : control.colorForeground Rectangle { width: 10 diff --git a/qml/ComponentLibrary/generic/SliderValueSolid.qml b/qml/ComponentLibrary/controls/SliderValueSolid.qml similarity index 77% rename from qml/ComponentLibrary/generic/SliderValueSolid.qml rename to qml/ComponentLibrary/controls/SliderValueSolid.qml index 065bdca..bc503f9 100644 --- a/qml/ComponentLibrary/generic/SliderValueSolid.qml +++ b/qml/ComponentLibrary/controls/SliderValueSolid.qml @@ -18,7 +18,7 @@ T.Slider { // settings property int hhh: 18 property string unit - property int tofixed: 0 + property int floatprecision: 0 property bool kshort: false // colors @@ -31,21 +31,21 @@ T.Slider { background: Rectangle { x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2) y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0) - implicitWidth: control.horizontal ? 200 : hhh - implicitHeight: control.horizontal ? hhh : 200 + implicitWidth: control.horizontal ? 200 : control.hhh + implicitHeight: control.horizontal ? control.hhh : 200 width: control.horizontal ? control.availableWidth : implicitWidth height: control.horizontal ? implicitHeight : control.availableHeight - radius: hhh + radius: control.hhh color: control.colorBackground scale: control.horizontal && control.mirrored ? -1 : 1 Rectangle { y: control.horizontal ? 0 : handle.y - width: control.horizontal ? Math.max(control.position * parent.width, handle.x + handle.width/2) : hhh - height: control.horizontal ? hhh : parent.height - handle.y + width: control.horizontal ? Math.max(control.position * parent.width, handle.x + handle.width/2) : control.hhh + height: control.horizontal ? control.hhh : parent.height - handle.y - radius: hhh + radius: control.hhh color: control.colorForeground } } @@ -55,32 +55,32 @@ T.Slider { handle: Rectangle { x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2) y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height)) - implicitWidth: hhh - implicitHeight: hhh + implicitWidth: control.hhh + implicitHeight: control.hhh - width: control.horizontal ? t1.contentWidth + 16 : hhh - height: hhh - radius: hhh + width: control.horizontal ? t1.contentWidth + 16 : control.hhh + height: control.hhh + radius: control.hhh color: control.colorForeground border.color: control.colorForeground Text { id: t1 - width: hhh - height: hhh + width: control.hhh + height: control.hhh anchors.centerIn: parent text: { var vvalue = control.value if (control.unit === "°" && settingsManager.tempUnit === "F") vvalue = UtilsNumber.tempCelsiusToFahrenheit(vvalue) - vvalue = vvalue.toFixed(0) + vvalue = vvalue.toFixed(control.floatprecision) return ((control.kshort && control.value > 999) ? (vvalue / 1000) : vvalue) + control.unit } textFormat: Text.PlainText font.bold: true font.pixelSize: isDesktop ? 12 : 13 fontSizeMode: Text.Fit - minimumPixelSize: 10 + minimumPixelSize: Theme.fontSizeContentVerySmall color: control.colorText horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter diff --git a/qml/ComponentLibrary/generic/ToolTipFlat.qml b/qml/ComponentLibrary/controls/ToolTipFlat.qml similarity index 100% rename from qml/ComponentLibrary/generic/ToolTipFlat.qml rename to qml/ComponentLibrary/controls/ToolTipFlat.qml diff --git a/qml/ComponentLibrary/generic/ItemTagButton.qml b/qml/ComponentLibrary/deprecated/ItemTagButton.qml similarity index 100% rename from qml/ComponentLibrary/generic/ItemTagButton.qml rename to qml/ComponentLibrary/deprecated/ItemTagButton.qml diff --git a/qml/ComponentLibrary/generic/DataBarCompact.qml b/qml/ComponentLibrary/generic/DataBarCompact.qml index ef06060..3e13756 100644 --- a/qml/ComponentLibrary/generic/DataBarCompact.qml +++ b/qml/ComponentLibrary/generic/DataBarCompact.qml @@ -5,7 +5,8 @@ import ThemeEngine import "qrc:/utils/UtilsNumber.js" as UtilsNumber Item { - id: dataBarCompact + id: control + implicitWidth: 128 implicitHeight: 32 @@ -32,22 +33,20 @@ Item { property color colorForeground: Theme.colorPrimary property color colorBackground: Theme.colorForeground - //////////////////////////////////////////////////////////////////////////// + //////////////// Row { anchors.fill: parent spacing: 12 - //////////////// - Text { id: item_legend - width: legendWidth + width: control.legendWidth anchors.verticalCenter: item_bg.verticalCenter - visible: (legend.length) + visible: (control.legend.length) - text: legend + text: control.legend textFormat: Text.PlainText font.bold: true font.pixelSize: Theme.fontSizeContentVerySmall @@ -56,12 +55,10 @@ Item { horizontalAlignment: Text.AlignRight } - //////////////// - Item { id: item_bg - width: dataBarCompact.width - (item_legend.visible ? (item_legend.width + parent.spacing) : 0) - height: hhh + width: control.width - (item_legend.visible ? (item_legend.width + parent.spacing) : 0) + height: control.hhh anchors.bottom: parent.bottom //////// @@ -72,7 +69,7 @@ Item { radius: 4 clip: isDesktop - color: dataBarCompact.colorBackground + color: control.colorBackground layer.enabled: !isDesktop layer.effect: MultiEffect { @@ -95,9 +92,9 @@ Item { Rectangle { id: rect_data width: { - var res = UtilsNumber.normalize(value, valueMin, valueMax) * rect_bg.width + var res = UtilsNumber.normalize( control.value, control.valueMin, control.valueMax) * rect_bg.width - if (value <= valueMin || value >= valueMax) + if ( control.value <= control.valueMin ||control.value >= control.valueMax) res += 0 else res += 1.5*radius // +radius, so the indicator arrow point to the real value, not the rounded end of the data bar @@ -112,9 +109,9 @@ Item { anchors.bottom: parent.bottom radius: 3 - color: dataBarCompact.colorForeground + color: control.colorForeground - Behavior on width { NumberAnimation { duration: animated ? 333 : 0 } } + Behavior on width { NumberAnimation { duration: control.animated ? 333 : 0 } } } Rectangle { @@ -123,14 +120,14 @@ Item { anchors.top: parent.top anchors.bottom: parent.bottom - visible: (limitMin > 0 && limitMin > valueMin && limitMin < valueMax) - x: UtilsNumber.normalize(limitMin, valueMin, valueMax) * rect_bg.width - color: (limitMin < value) ? Theme.colorLowContrast : Theme.colorHighContrast - opacity: (limitMin < value) ? 0.66 : 0.33 + visible: (control.limitMin > 0 && control.limitMin > control.valueMin && control.limitMin < control.valueMax) + x: UtilsNumber.normalize(control.limitMin, control.valueMin, control.valueMax) * rect_bg.width + color: (control.limitMin < control.value) ? Theme.colorLowContrast : Theme.colorHighContrast + opacity: (control.limitMin < control.value) ? 0.66 : 0.33 - Behavior on x { NumberAnimation { duration: animated ? 333 : 0 } } - Behavior on color { ColorAnimation { duration: animated ? 333 : 0 } } - Behavior on opacity { OpacityAnimator { duration: animated ? 333 : 0 } } + Behavior on x { NumberAnimation { duration: control.animated ? 333 : 0 } } + Behavior on color { ColorAnimation { duration: control.animated ? 333 : 0 } } + Behavior on opacity { OpacityAnimator { duration: control.animated ? 333 : 0 } } } Rectangle { id: item_limit_high @@ -138,14 +135,14 @@ Item { anchors.top: parent.top anchors.bottom: parent.bottom - visible: (limitMax > 0 && limitMax > valueMin && limitMax < valueMax) - x: UtilsNumber.normalize(limitMax, valueMin, valueMax) * rect_bg.width - color: (limitMax < value) ? Theme.colorLowContrast : Theme.colorHighContrast - opacity: (limitMax < value) ? 0.66 : 0.33 + visible: (control.limitMax > 0 && control.limitMax > control.valueMin && control.limitMax < control.valueMax) + x: UtilsNumber.normalize(control.limitMax, control.valueMin, control.valueMax) * rect_bg.width + color: (control.limitMax -20 && value < limitMin) ? 1 : 0 - Behavior on opacity { OpacityAnimator { duration: animated ? 333 : 0 } } + opacity: (control.warning && control.value > -20 && control.value < control.limitMin) ? 1 : 0 + Behavior on opacity { OpacityAnimator { duration: control.animated ? 333 : 0 } } source: "qrc:/assets/icons_material/baseline-warning-24px.svg" } //////// } - - //////////////// } - //////////////////////////////////////////////////////////////////////////// + //////////////// } diff --git a/qml/ComponentLibrary/generic/DataBarSolid.qml b/qml/ComponentLibrary/generic/DataBarSolid.qml index 19fb7e8..89bf157 100644 --- a/qml/ComponentLibrary/generic/DataBarSolid.qml +++ b/qml/ComponentLibrary/generic/DataBarSolid.qml @@ -5,7 +5,8 @@ import ThemeEngine import "qrc:/utils/UtilsNumber.js" as UtilsNumber Item { - id: dataBarSolid + id: control + implicitWidth: 128 implicitHeight: 16 @@ -31,22 +32,20 @@ Item { property color colorForeground: Theme.colorPrimary property color colorBackground: Theme.colorForeground - //////////////////////////////////////////////////////////////////////////// + //////////////// Row { anchors.fill: parent spacing: 12 - //////////////// - Text { id: item_legend - width: legendWidth + width: control.legendWidth anchors.verticalCenter: parent.verticalCenter - visible: (legend.length) + visible: (control.legend.length) - text: legend + text: control.legend textFormat: Text.PlainText font.pixelSize: Theme.fontSizeContentVerySmall font.bold: true @@ -55,12 +54,10 @@ Item { horizontalAlignment: Text.AlignRight } - //////////////// - Item { id: item_bg - width: dataBarSolid.width - (item_legend.visible ? (item_legend.width + parent.spacing) : 0) - height: hhh + width: control.width - (item_legend.visible ? (item_legend.width + parent.spacing) : 0) + height: control.hhh anchors.verticalCenter: parent.verticalCenter clip: true @@ -69,8 +66,8 @@ Item { id: rect_bg anchors.fill: parent - radius: hhh - color: dataBarSolid.colorBackground + radius: control.hhh + color: control.colorBackground layer.enabled: !isDesktop layer.effect: MultiEffect { @@ -93,7 +90,7 @@ Item { Rectangle { id: item_data width: { - var res = UtilsNumber.normalize(value, valueMin, valueMax) * item_bg.width + var res = UtilsNumber.normalize(control.value, control.valueMin, control.valueMax) * item_bg.width if (res > item_bg.width) res = item_bg.width return res } @@ -101,10 +98,10 @@ Item { anchors.bottom: parent.bottom anchors.left: parent.left - radius: hhh - color: dataBarSolid.colorForeground + radius: control.hhh + color: control.colorForeground - Behavior on width { NumberAnimation { duration: animated ? 333 : 0 } } + Behavior on width { NumberAnimation { duration: control.animated ? 333 : 0 } } } } @@ -116,16 +113,16 @@ Item { anchors.top: parent.top anchors.bottom: parent.bottom - visible: (limitMin > 0 && limitMin > valueMin && limitMin < valueMax) && + visible: (control.limitMin > 0 && control.limitMin > control.valueMin && control.limitMin < control.valueMax) && (x < indicator.x || x > indicator.x+indicator.width) && (x+width < indicator.x || x+width > indicator.x+indicator.width) - x: UtilsNumber.normalize(limitMin, valueMin, valueMax) * item_bg.width - color: (limitMin <= value) ? Theme.colorLowContrast : Theme.colorHighContrast - opacity: (limitMin <= value) ? 0.75 : 0.25 + x: UtilsNumber.normalize(control.limitMin, control.valueMin, control.valueMax) * item_bg.width + color: (control.limitMin <= control.value) ? Theme.colorLowContrast : Theme.colorHighContrast + opacity: (control.limitMin <= control.value) ? 0.75 : 0.25 - Behavior on x { NumberAnimation { duration: animated ? 333 : 0 } } - Behavior on color { ColorAnimation { duration: animated ? 333 : 0 } } - Behavior on opacity { OpacityAnimator { duration: animated ? 333 : 0 } } + Behavior on x { NumberAnimation { duration: control.animated ? 333 : 0 } } + Behavior on color { ColorAnimation { duration: control.animated ? 333 : 0 } } + Behavior on opacity { OpacityAnimator { duration: control.animated ? 333 : 0 } } } Text { anchors.right: item_limit_low.left @@ -133,7 +130,7 @@ Item { anchors.verticalCenter: parent.verticalCenter anchors.verticalCenterOffset: 0 - visible: (limitMin > 0 && limitMin > valueMin && limitMin < valueMax) && + visible: (control.limitMin > 0 && control.limitMin > control.valueMin && control.limitMin < control.valueMax) && (width < item_limit_low.x) && (x < indicator.x || x > indicator.x+indicator.width) && (x+width < indicator.x || x+width > indicator.x+indicator.width) @@ -143,10 +140,10 @@ Item { textFormat: Text.PlainText font.pixelSize: Theme.fontSizeContentVerySmall - color: (limitMin <= value) ? Theme.colorLowContrast : Theme.colorHighContrast - opacity: (limitMin <= value) ? 0.75 : 0.25 - Behavior on color { ColorAnimation { duration: animated ? 333 : 0 } } - Behavior on opacity { OpacityAnimator { duration: animated ? 333 : 0 } } + color: (control.limitMin <= control.value) ? Theme.colorLowContrast : Theme.colorHighContrast + opacity: (control.limitMin <= control.value) ? 0.75 : 0.25 + Behavior on color { ColorAnimation { duration: control.animated ? 333 : 0 } } + Behavior on opacity { OpacityAnimator { duration: control.animated ? 333 : 0 } } } Rectangle { anchors.horizontalCenter: item_limit_low.horizontalCenter @@ -155,14 +152,14 @@ Item { width: 6; height: 3; // little bar z: 2 - visible: (limitMin > 0 && limitMin > valueMin && limitMin < valueMax) && + visible: (control.limitMin > 0 && control.limitMin > control.valueMin && control.limitMin < control.valueMax) && (!(x-2 < indicator.x || x+2 > indicator.x+indicator.width) || !(x+width-2 < indicator.x || x+width+2 > indicator.x+indicator.width)) - color: (limitMin < value) ? Theme.colorLowContrast : Theme.colorHighContrast - opacity: (limitMin < value) ? 0.75 : 0.25 - Behavior on color { ColorAnimation { duration: animated ? 333 : 0 } } - Behavior on opacity { OpacityAnimator { duration: animated ? 333 : 0 } } + color: (control.limitMin < control.value) ? Theme.colorLowContrast : Theme.colorHighContrast + opacity: (control.limitMin < control.value) ? 0.75 : 0.25 + Behavior on color { ColorAnimation { duration: control.animated ? 333 : 0 } } + Behavior on opacity { OpacityAnimator { duration: control.animated ? 333 : 0 } } } //////// @@ -173,17 +170,17 @@ Item { anchors.top: parent.top anchors.bottom: parent.bottom - visible: (limitMax > 0 && limitMax > valueMin && limitMax < valueMax) && + visible: (control.limitMax > 0 && control.limitMax > control.valueMin && control.limitMax < control.valueMax) && (x < indicator.x || x > indicator.x+indicator.width) && (x+width < indicator.x || x+width > indicator.x+indicator.width) - x: UtilsNumber.normalize(limitMax, valueMin, valueMax) * item_bg.width - color: (limitMax < value) ? Theme.colorLowContrast : Theme.colorHighContrast - opacity: (limitMax < value) ? 0.75 : 0.25 + x: UtilsNumber.normalize(control.limitMax, control.valueMin, control.valueMax) * item_bg.width + color: (control.limitMax < control.value) ? Theme.colorLowContrast : Theme.colorHighContrast + opacity: (control.limitMax < control.value) ? 0.75 : 0.25 - Behavior on x { NumberAnimation { duration: animated ? 333 : 0 } } - Behavior on color { ColorAnimation { duration: animated ? 333 : 0 } } - Behavior on opacity { OpacityAnimator { duration: animated ? 333 : 0 } } + Behavior on x { NumberAnimation { duration: control.animated ? 333 : 0 } } + Behavior on color { ColorAnimation { duration: control.animated ? 333 : 0 } } + Behavior on opacity { OpacityAnimator { duration: control.animated ? 333 : 0 } } } Text { anchors.left: item_limit_high.right @@ -191,7 +188,7 @@ Item { anchors.verticalCenter: parent.verticalCenter anchors.verticalCenterOffset: 0 - visible: (limitMax > 0 && limitMax > valueMin && limitMax < valueMax) && + visible: (control.limitMax > 0 && control.limitMax > control.valueMin && control.limitMax < control.valueMax) && (x < indicator.x || x > indicator.x+indicator.width) && (x+width < indicator.x || x+width > indicator.x+indicator.width) @@ -200,10 +197,10 @@ Item { textFormat: Text.PlainText font.pixelSize: Theme.fontSizeContentVerySmall - color: (limitMax < value) ? Theme.colorLowContrast : Theme.colorHighContrast - opacity: (limitMax < value) ? 0.75 : 0.25 - Behavior on color { ColorAnimation { duration: animated ? 333 : 0 } } - Behavior on opacity { OpacityAnimator { duration: animated ? 333 : 0 } } + color: (control.limitMax < control.value) ? Theme.colorLowContrast : Theme.colorHighContrast + opacity: (control.limitMax < control.value) ? 0.75 : 0.25 + Behavior on color { ColorAnimation { duration: control.animated ? 333 : 0 } } + Behavior on opacity { OpacityAnimator { duration: control.animated ? 333 : 0 } } } Rectangle { anchors.horizontalCenter: item_limit_high.horizontalCenter @@ -212,14 +209,14 @@ Item { width: 6; height: 3; // little bar z: 2 - visible: (limitMax > 0 && limitMax > valueMin && limitMax < valueMax) && + visible: (control.limitMax > 0 && control.limitMax > control.valueMin && control.limitMax < control.valueMax) && (!(x-2 < indicator.x || x+2 > indicator.x+indicator.width) || !(x+width-2 < indicator.x || x+width+2 > indicator.x+indicator.width)) - color: (limitMax < value) ? Theme.colorLowContrast : Theme.colorHighContrast - opacity: (limitMax < value) ? 0.75 : 0.25 - Behavior on color { ColorAnimation { duration: animated ? 333 : 0 } } - Behavior on opacity { OpacityAnimator { duration: animated ? 333 : 0 } } + color: (control.limitMax < control.value) ? Theme.colorLowContrast : Theme.colorHighContrast + opacity: (control.limitMax < control.value) ? 0.75 : 0.25 + Behavior on color { ColorAnimation { duration: control.animated ? 333 : 0 } } + Behavior on opacity { OpacityAnimator { duration: control.animated ? 333 : 0 } } } //////// @@ -229,15 +226,15 @@ Item { anchors.verticalCenter: parent.verticalCenter width: textIndicator.width + 12 - height: hhh - radius: (value <= 0 || item_data.width > indicator.width) ? hhh : 0 + height: control.hhh + radius: (control.value <= 0 || item_data.width > indicator.width) ? control.hhh : 0 color: { - if (value <= 0) + if (control.value <= 0) return "transparent" else if (item_data.width > indicator.width) - return dataBarSolid.colorForeground + return control.colorForeground else - return dataBarSolid.colorBackground + return control.colorBackground } x: { @@ -249,19 +246,19 @@ Item { Text { id: textIndicator - height: hhh + height: control.hhh anchors.centerIn: parent color: (item_data.width > indicator.width) ? "white" : Theme.colorSubText text: { - if (value < -20) + if (control.value < -20) return " ? "; else { - if (value % 1 === 0) - return prefix + value + suffix + if (control.value % 1 === 0) + return control.prefix + control.value + control.suffix else - return prefix + value.toFixed(floatprecision) + suffix + return control.prefix + control.value.toFixed(control.floatprecision) + control.suffix } } textFormat: Text.PlainText @@ -273,10 +270,9 @@ Item { verticalAlignment: Text.AlignVCenter } - IconSvg { - id: warningIndicator - width: hhh - 2 - height: hhh - 2 + IconSvg { // warningIndicator + width: control.hhh - 2 + height: control.hhh - 2 anchors.verticalCenter: parent.verticalCenter anchors.leftMargin: 4 anchors.left: { @@ -287,17 +283,17 @@ Item { } color: Theme.colorRed - opacity: (warning && value > -20 && value < limitMin) ? 1 : 0 - Behavior on opacity { OpacityAnimator { duration: animated ? 333 : 0 } } + opacity: (control.warning && control.value > -20 && control.value < control.limitMin) ? 1 : 0 + Behavior on opacity { OpacityAnimator { duration: control.animated ? 333 : 0 } } source: "qrc:/assets/icons_material/baseline-warning-24px.svg" Rectangle { - width: hhh - height: hhh + width: control.hhh + height: control.hhh anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter z: -1 - color: dataBarSolid.colorBackground + color: control.colorBackground visible: (parent.opacity === 1) } } @@ -305,9 +301,7 @@ Item { //////// } - - //////////////// } - //////////////////////////////////////////////////////////////////////////// + //////////////// } diff --git a/qml/ComponentLibrary/generic/ItemTag.qml b/qml/ComponentLibrary/generic/ItemTag.qml deleted file mode 100644 index 8030bdf..0000000 --- a/qml/ComponentLibrary/generic/ItemTag.qml +++ /dev/null @@ -1,34 +0,0 @@ -import QtQuick - -import ThemeEngine - -Rectangle { - id: control - implicitWidth: 80 - implicitHeight: 28 - - width: contentText.contentWidth + 24 - - radius: Theme.componentRadius - color: Theme.colorForeground - - // settings - property string text: "TAG" - property color textColor: Theme.colorText - property int textSize: Theme.componentFontSize - property int textCapitalization: Font.Normal - property bool textBold: false - - Text { - id: contentText - anchors.centerIn: parent - - text: control.text - textFormat: Text.PlainText - - color: control.textColor - font.bold: control.textBold - font.pixelSize: control.textSize - font.capitalization: control.textCapitalization - } -} diff --git a/qml/ComponentLibrary/generic/RangeSliderValue.qml b/qml/ComponentLibrary/generic/RangeSliderValue.qml deleted file mode 100644 index 4b34860..0000000 --- a/qml/ComponentLibrary/generic/RangeSliderValue.qml +++ /dev/null @@ -1,113 +0,0 @@ -import QtQuick -import QtQuick.Controls.impl -import QtQuick.Templates as T - -import ThemeEngine -import "qrc:/js/UtilsNumber.js" as UtilsNumber - -T.RangeSlider { - id: control - implicitWidth: 200 - implicitHeight: 4 - - padding: 4 - - first.value: 0.25 - second.value: 0.75 - snapMode: RangeSlider.SnapAlways - - // settings - property string unit - - // colors - property color colorBackground: Theme.colorComponent - property color colorForeground: Theme.colorPrimary - property color colorText: "white" - - //////////////////////////////////////////////////////////////////////////// - - background: Rectangle { - x: control.leftPadding - y: control.topPadding + (control.availableHeight / 2) - (height / 2) - width: control.availableWidth - - height: implicitHeight - radius: 2 - color: colorBackground - opacity: 0.9 - - Rectangle { - x: (control.first.visualPosition * parent.width) - width: (control.second.visualPosition * parent.width) - x - height: parent.height - color: colorForeground - radius: 2 - } - } - - //////////////////////////////////////////////////////////////////////////// - - first.handle: Rectangle { - x: control.leftPadding + first.visualPosition * (control.availableWidth - width) - y: control.topPadding + (control.availableHeight / 2) - (height / 2) - implicitWidth: 22 - implicitHeight: 22 - width: t1.width + 16 - - radius: 6 - color: colorForeground - border.color: colorForeground - opacity: first.pressed ? 0.9 : 1 - - Text { - id: t1 - anchors.verticalCenter: parent.verticalCenter - anchors.verticalCenterOffset: 1 - anchors.horizontalCenter: parent.horizontalCenter - - text: { - var vvalue = first.value - if (unit === "°" && settingsManager.tempUnit === "F") vvalue = UtilsNumber.tempCelsiusToFahrenheit(vvalue) - vvalue = vvalue.toFixed(0) - return ((first.value > 999) ? vvalue / 1000 : vvalue) + unit - } - textFormat: Text.PlainText - font.pixelSize: 14 - color: colorText - } - } - - //////////////////////////////////////////////////////////////////////////// - - second.handle: Rectangle { - x: control.leftPadding + second.visualPosition * (control.availableWidth - width) - y: control.topPadding + (control.availableHeight / 2) - (height / 2) - implicitWidth: 22 - implicitHeight: 22 - width: t2.width + 16 - - radius: 6 - color: colorForeground - border.color: colorForeground - opacity: second.pressed ? 0.9 : 1 - - Text { - id: t2 - anchors.verticalCenter: parent.verticalCenter - anchors.verticalCenterOffset: 1 - anchors.horizontalCenter: parent.horizontalCenter - - text: { - var vvalue = second.value - if (unit === "°" && settingsManager.tempUnit === "F") vvalue = UtilsNumber.tempCelsiusToFahrenheit(vvalue) - vvalue = vvalue.toFixed(0) - return ((second.value > 999) ? vvalue / 1000 : vvalue) + unit - } - textFormat: Text.PlainText - font.pixelSize: 14 - color: colorText - } - } - - //////////////////////////////////////////////////////////////////////////// -} diff --git a/qml/ComponentLibrary/menus/ActionMenu_bottom.qml b/qml/ComponentLibrary/menus/ActionMenu_bottom.qml index 85f448d..e9a290f 100644 --- a/qml/ComponentLibrary/menus/ActionMenu_bottom.qml +++ b/qml/ComponentLibrary/menus/ActionMenu_bottom.qml @@ -37,14 +37,13 @@ T.Popup { property int realHeight: 0 Component.onCompleted: realHeight = actionMenu.height + screenPaddingNavbar + screenPaddingBottom - enter: Transition { - NumberAnimation { duration: 233; property: "height"; from: 0; to: realHeight } - } - exit: Transition { - NumberAnimation { duration: 233; property: "height"; from: realHeight; to: 0 } - } + enter: Transition { NumberAnimation { duration: 233; property: "height"; from: 0; to: realHeight; } } + exit: Transition { NumberAnimation { duration: 233; property: "height"; from: realHeight; to: 0; } } - //////////////// + Overlay.modal: Rectangle { + color: "#000" + opacity: ThemeEngine.isLight ? 0.24 : 0.666 + } background: Rectangle { color: Theme.colorComponentBackground diff --git a/qml/ComponentLibrary/controls/DrawerThemed.qml b/qml/ComponentLibrary/menus/DrawerThemed.qml similarity index 100% rename from qml/ComponentLibrary/controls/DrawerThemed.qml rename to qml/ComponentLibrary/menus/DrawerThemed.qml diff --git a/qml/ComponentLibrary/wip/ItemTagClear.qml b/qml/ComponentLibrary/wip/ItemTagClear.qml new file mode 100644 index 0000000..29af877 --- /dev/null +++ b/qml/ComponentLibrary/wip/ItemTagClear.qml @@ -0,0 +1,10 @@ +import QtQuick +import ThemeEngine + +ItemTagImpl { + property color color: Theme.colorPrimary + + colorBackground: Qt.rgba(color.r, color.g, color.b, 0.2) + colorBorder: colorBackground + colorText: color +} diff --git a/qml/ComponentLibrary/wip/ItemTagDesktop.qml b/qml/ComponentLibrary/wip/ItemTagDesktop.qml new file mode 100644 index 0000000..84b6a1b --- /dev/null +++ b/qml/ComponentLibrary/wip/ItemTagDesktop.qml @@ -0,0 +1,8 @@ +import QtQuick +import ThemeEngine + +ItemTagImpl { + colorBackground: Theme.colorBackground + colorBorder: Theme.colorComponentBorder + colorText: Theme.colorText +} diff --git a/qml/ComponentLibrary/wip/ItemTagFlat.qml b/qml/ComponentLibrary/wip/ItemTagFlat.qml new file mode 100644 index 0000000..2137f7f --- /dev/null +++ b/qml/ComponentLibrary/wip/ItemTagFlat.qml @@ -0,0 +1,10 @@ +import QtQuick +import ThemeEngine + +ItemTagImpl { + property color color: Theme.colorPrimary + + colorBackground: color + colorBorder: color + colorText: "white" +} diff --git a/qml/ComponentLibrary/wip/ItemTagImpl.qml b/qml/ComponentLibrary/wip/ItemTagImpl.qml new file mode 100644 index 0000000..5ee20c6 --- /dev/null +++ b/qml/ComponentLibrary/wip/ItemTagImpl.qml @@ -0,0 +1,58 @@ +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T + +import ThemeEngine + +T.Control { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + + leftPadding: 8 + rightPadding: 8 + spacing: 6 + + // settings + font.pixelSize: Theme.componentFontSize + font.bold: false + + // text + property string text: "TAG" + + // colors + property color colorBackground: Theme.colorPrimary + property color colorBorder: Theme.colorComponentBorder + property color colorText: "white" + + //////////////// + + background: Rectangle { + implicitWidth: 48 + implicitHeight: 24 + + radius: Theme.componentRadius + color: control.colorBackground + border.width: Theme.componentBorderWidth + border.color: control.colorBorder + } + + //////////////// + + contentItem: Text { + text: control.text + textFormat: Text.PlainText + + color: control.colorText + font: control.font + + elide: Text.ElideMiddle + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + + //////////////// +} diff --git a/qml/MobileMenu.qml b/qml/MobileMenu.qml index 49720b4..3065b66 100644 --- a/qml/MobileMenu.qml +++ b/qml/MobileMenu.qml @@ -58,7 +58,7 @@ Item { anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right - height: hhh + height: mobileMenu.hhh Row { anchors.centerIn: parent diff --git a/qml/MobilePermissions.qml b/qml/MobilePermissions.qml index 7857e1e..828d82a 100644 --- a/qml/MobilePermissions.qml +++ b/qml/MobilePermissions.qml @@ -52,9 +52,9 @@ Item { anchors.left: parent.left anchors.right: parent.right - topPadding: 20 - bottomPadding: 20 - spacing: 20 + topPadding: Theme.componentMarginXL + bottomPadding: Theme.componentMarginXL + spacing: Theme.componentMarginXL //////// @@ -63,7 +63,7 @@ Item { anchors.left: parent.left anchors.leftMargin: 16 anchors.right: parent.right - anchors.rightMargin: 12 + anchors.rightMargin: Theme.componentMargin spacing: 8 Row { @@ -141,7 +141,7 @@ Item { anchors.left: parent.left anchors.leftMargin: 16 anchors.right: parent.right - anchors.rightMargin: 12 + anchors.rightMargin: Theme.componentMargin spacing: 8 Row { @@ -218,7 +218,7 @@ Item { anchors.left: parent.left anchors.leftMargin: 16 anchors.right: parent.right - anchors.rightMargin: 12 + anchors.rightMargin: Theme.componentMargin spacing: 8 Row { @@ -274,16 +274,16 @@ Item { Column { id: element_infos anchors.left: parent.left - anchors.leftMargin: 12 + anchors.leftMargin: Theme.componentMargin anchors.right: parent.right - anchors.rightMargin: 12 + anchors.rightMargin: Theme.componentMargin spacing: 8 RowLayout { anchors.left: parent.left anchors.right: parent.right height: 36 - spacing: 12 + spacing: Theme.componentMargin IconSvg { Layout.preferredWidth: 36 diff --git a/qml/PageIndicators.qml b/qml/PageIndicators.qml index 08b74d1..0cfc37d 100644 --- a/qml/PageIndicators.qml +++ b/qml/PageIndicators.qml @@ -105,6 +105,7 @@ Flickable { width: 128 value: 0.33 } + ProgressArc { width: 128 value: 0.66 @@ -121,6 +122,7 @@ Flickable { value: 0.33 arcColor: Theme.colorMaterialDeepOrange } + ProgressCircle { width: 128 value: 0.66 @@ -137,12 +139,12 @@ Flickable { source: "" } - Flow { + Column { anchors.left: parent.left anchors.leftMargin: Theme.componentMarginXL anchors.right: parent.right anchors.rightMargin: Theme.componentMarginXL - spacing: 24 + spacing: Theme.componentMarginXL ItemLicenseBadge { width: 128 @@ -151,20 +153,6 @@ Flickable { onClicked: Qt.openUrlExternally("https://www.gnu.org/licenses/lgpl-3.0.html") } - Row { - spacing: 8 - - ItemTag { - text: "TAG1" - //color: Theme.colorForeground - } - - ItemTag { - text: "TAG2" - //color: Theme.colorForeground - } - } - Row { spacing: 8 @@ -192,6 +180,91 @@ Flickable { font.pixelSize: Theme.componentFontSize } } + + Flow { + anchors.left: parent.left + anchors.right: parent.right + spacing: Theme.componentMargin + + ItemTagClear { + text: "tag" + color: Theme.colorMaterialGreen + } + + ItemTagClear { + text: "tag" + color: Theme.colorMaterialBlue + } + + ItemTagClear { + text: "tag" + color: Theme.colorMaterialRed + } + + ItemTagClear { + text: "tag" + color: Theme.colorMaterialDeepPurple + } + + ItemTagClear { + text: "tag" + color: Theme.colorMaterialGrey + } + } + + Flow { + anchors.left: parent.left + anchors.right: parent.right + spacing: Theme.componentMargin + + ItemTagFlat { + text: "tag" + color: Theme.colorMaterialGreen + } + + ItemTagFlat { + text: "tag" + color: Theme.colorMaterialBlue + } + + ItemTagFlat { + text: "tag" + color: Theme.colorMaterialRed + } + + ItemTagFlat { + text: "tag" + color: Theme.colorMaterialDeepPurple + } + + ItemTagFlat { + text: "tag" + color: Theme.colorMaterialGrey + } + } + + Flow { + anchors.left: parent.left + anchors.right: parent.right + spacing: Theme.componentMargin + + ItemTagDesktop { + text: "tag" + } + + ItemTagDesktop { + text: "TAG" + } + + ItemTagDesktop { + text: "rgehetqthshrts" + } + + ItemTagDesktop { + width: 64 + text: "rgehetqthshrts" + } + } } } } diff --git a/qml/PageSliders.qml b/qml/PageSliders.qml index 2810068..b079139 100644 --- a/qml/PageSliders.qml +++ b/qml/PageSliders.qml @@ -157,6 +157,47 @@ Flickable { } } + ListTitle { //////////////////////////////////////////////////////////// + anchors.leftMargin: singleColumn ? 0 : Theme.componentMargin + anchors.rightMargin: singleColumn ? 0 : Theme.componentMargin + + text: qsTr("Value sliders") + source: "" + } + + Column { + anchors.left: parent.left + anchors.leftMargin: Theme.componentMarginXL + anchors.right: parent.right + anchors.rightMargin: Theme.componentMarginXL + spacing: Theme.componentMarginXL + + RangeSliderValue { + anchors.left: parent.left + anchors.right: parent.right + + second.value: 0.8 + first.value: 0.2 + stepSize: 0.1 + } + } + + Row { + anchors.left: parent.left + anchors.leftMargin: Theme.componentMarginXL + anchors.right: parent.right + anchors.rightMargin: Theme.componentMarginXL + spacing: Theme.componentMarginXL + + RangeSliderValue { + orientation: Qt.Vertical + + second.value: 0.8 + first.value: 0.2 + stepSize: 0.1 + } + } + ListTitle { //////////////////////////////////////////////////////////// anchors.leftMargin: singleColumn ? 0 : Theme.componentMargin anchors.rightMargin: singleColumn ? 0 : Theme.componentMargin diff --git a/qml/ScreenDesktopComponents.qml b/qml/ScreenDesktopComponents.qml index 3a638b9..8ec782a 100644 --- a/qml/ScreenDesktopComponents.qml +++ b/qml/ScreenDesktopComponents.qml @@ -1181,18 +1181,6 @@ Loader { anchors.right: parent.right spacing: Theme.componentMargin - ItemTag { - anchors.verticalCenter: parent.verticalCenter - text: "TAG1" - //color: Theme.colorForeground - } - - ItemTag { - anchors.verticalCenter: parent.verticalCenter - text: "TAG2" - //color: Theme.colorForeground - } - ItemTagButton { anchors.verticalCenter: parent.verticalCenter text: "TAG3" @@ -1205,14 +1193,6 @@ Loader { //color: Theme.colorForeground } - ItemLicenseBadge { - anchors.verticalCenter: parent.verticalCenter - width: 128 - legend: "license" - text: "LGPL 3" - onClicked: Qt.openUrlExternally("https://www.gnu.org/licenses/lgpl-3.0.html") - } - Row { anchors.verticalCenter: parent.verticalCenter spacing: 8 @@ -1229,6 +1209,98 @@ Loader { } } + Row { + anchors.left: parent.left + anchors.right: parent.right + spacing: Theme.componentMargin + + ItemTagClear { + text: "tag" + color: Theme.colorMaterialGreen + } + + ItemTagClear { + text: "tag" + color: Theme.colorMaterialBlue + } + + ItemTagClear { + text: "tag" + color: Theme.colorMaterialRed + } + + ItemTagClear { + text: "tag" + color: Theme.colorMaterialDeepPurple + } + + ItemTagClear { + text: "tag" + color: Theme.colorMaterialGrey + } + } + + Row { + anchors.left: parent.left + anchors.right: parent.right + spacing: Theme.componentMargin + + ItemTagFlat { + text: "tag" + color: Theme.colorMaterialGreen + } + + ItemTagFlat { + text: "tag" + color: Theme.colorMaterialBlue + } + + ItemTagFlat { + text: "tag" + color: Theme.colorMaterialRed + } + + ItemTagFlat { + text: "tag" + color: Theme.colorMaterialDeepPurple + } + + ItemTagFlat { + text: "tag" + color: Theme.colorMaterialGrey + } + } + + Row { + anchors.left: parent.left + anchors.right: parent.right + spacing: Theme.componentMargin + + ItemTagDesktop { + text: "tag" + } + + ItemTagDesktop { + text: "TAG" + } + + ItemTagDesktop { + text: "rgehetqthshrts" + } + + ItemTagDesktop { + width: 64 + text: "rgehetqthshrts" + } + } + + ItemLicenseBadge { + width: 128 + legend: "license" + text: "LGPL 3" + onClicked: Qt.openUrlExternally("https://www.gnu.org/licenses/lgpl-3.0.html") + } + //////////////////////// ListSeparator { diff --git a/qml/ScreenHostInfos.qml b/qml/ScreenHostInfos.qml index 635682b..cadeb99 100644 --- a/qml/ScreenHostInfos.qml +++ b/qml/ScreenHostInfos.qml @@ -69,7 +69,7 @@ Loader { ColumnLayout { anchors.fill: parent - spacing: 12 + spacing: Theme.componentMarginS Column { Text { @@ -149,7 +149,7 @@ Loader { ColumnLayout { anchors.fill: parent - spacing: 12 + spacing: Theme.componentMarginS Column { Text { @@ -233,7 +233,7 @@ Loader { ColumnLayout { anchors.fill: parent - spacing: 12 + spacing: Theme.componentMarginS Column { Text { @@ -319,7 +319,7 @@ Loader { ColumnLayout { anchors.fill: parent - spacing: 12 + spacing: Theme.componentMarginS Column { Text { @@ -382,7 +382,7 @@ Loader { ColumnLayout { anchors.fill: parent - spacing: 12 + spacing: Theme.componentMarginS Column { visible: (utilsScreen.screenPar != 1) @@ -554,7 +554,7 @@ Loader { ColumnLayout { anchors.fill: parent - spacing: 12 + spacing: Theme.componentMarginS Column { Text { diff --git a/qml/popups/PopupChoice.qml b/qml/popups/PopupChoice.qml index 98fddcc..fae99c1 100644 --- a/qml/popups/PopupChoice.qml +++ b/qml/popups/PopupChoice.qml @@ -95,15 +95,15 @@ Popup { property int btnSize: singleColumn ? width : ((width-spacing*2) / 3) - ButtonSolid { + ButtonClear { width: parent.btnSize - color: Theme.colorSubText + color: Theme.colorGrey text: qsTr("Cancel") onClicked: popupChoice.close() } - ButtonSolid { + ButtonFlat { width: parent.btnSize color: Theme.colorWarning @@ -117,7 +117,7 @@ Popup { } } - ButtonSolid { + ButtonFlat { width: parent.btnSize color: Theme.colorError diff --git a/qml/popups/PopupDate.qml b/qml/popups/PopupDate.qml index 80d96ba..3c618a6 100644 --- a/qml/popups/PopupDate.qml +++ b/qml/popups/PopupDate.qml @@ -127,6 +127,7 @@ Popup { anchors.left: parent.left anchors.right: parent.right + clip: true height: 80 radius: singleColumn ? 0 : Theme.componentRadius color: Theme.colorPrimary @@ -183,6 +184,8 @@ Popup { spacing: Theme.componentMarginXL bottomPadding: Theme.componentMarginXL + //////// + Rectangle { height: 48 anchors.left: parent.left @@ -336,17 +339,17 @@ Popup { anchors.rightMargin: Theme.componentMarginXL spacing: Theme.componentMargin - ButtonSolid { - color: Theme.colorSecondary + ButtonClear { + color: Theme.colorGrey text: qsTr("Cancel") onClicked: popupDate.close() } - ButtonSolid { + ButtonFlat { color: Theme.colorPrimary - text: qsTr("Validate") + text: qsTr("Select") onClicked: { updateDate(selectedDate) popupDate.close() diff --git a/qml/popups/PopupMessage.qml b/qml/popups/PopupMessage.qml index f4e7949..59f3cc5 100644 --- a/qml/popups/PopupMessage.qml +++ b/qml/popups/PopupMessage.qml @@ -89,7 +89,7 @@ Popup { //////// - ButtonSolid { + ButtonFlat { anchors.right: parent.right width: singleColumn ? parent.width : (parent.width / 2) diff --git a/qml/popups/PopupTime.qml b/qml/popups/PopupTime.qml index f952dd3..f40afd1 100644 --- a/qml/popups/PopupTime.qml +++ b/qml/popups/PopupTime.qml @@ -27,20 +27,33 @@ Popup { //property var locale: Qt.locale() property date today: new Date() - property date initialDate - property date selectedDate - - property bool isSelectedDateToday: false - - property var minDate: null - property var maxDate: null + property date initialTime + property date selectedTime //////////////////////////////////////////////////////////////////////////// signal updateTime(var newtime) function openTime(time) { - //console.log("openTime(" + time + ")") + console.log("openTime(" + time + ")") + + today = new Date() + + initialTime = time + selectedTime = time + + printTime() + + popupTime.open() + } + + function printTime() { + bigTime.text = selectedTime.toLocaleString(locale, "hh:mm:ss") + bigDate.text = selectedTime.toLocaleString(locale, "dd MMMM yyyy") + } + + function resetTime() { + printTime() } //////////////////////////////////////////////////////////////////////////// @@ -78,6 +91,133 @@ Popup { contentItem: Column { bottomPadding: screenPaddingNavbar + screenPaddingBottom + + Rectangle { + id: titleArea + anchors.left: parent.left + anchors.right: parent.right + + clip: true + height: 80 + radius: singleColumn ? 0 : Theme.componentRadius + color: Theme.colorPrimary + + Rectangle { + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + height: parent.radius + color: parent.color + } + + Column { + anchors.left: parent.left + anchors.leftMargin: 24 + anchors.verticalCenter: parent.verticalCenter + spacing: 4 + + Text { + id: bigTime + text: selectedTime.toLocaleString(locale, "hh:mm:ss") + font.pixelSize: 24 + font.capitalization: Font.Capitalize + color: "white" + } + Text { + id: bigDate + text: selectedTime.toLocaleString(locale, "dd MMMM yyyy") // "15 octobre 2020" + font.pixelSize: 20 + color: "white" + } + } + + RoundButtonIcon { // reset + anchors.right: parent.right + anchors.rightMargin: 24 + anchors.verticalCenter: parent.verticalCenter + source: "qrc:/assets/icons_material/duotone-restart_alt-24px.svg" + iconColor: "white" + backgroundColor: Qt.lighter(Theme.colorPrimary, 0.9) + + visible: true + + onClicked: resetTime() + } + } + + //////////////// + + Column { + anchors.left: parent.left + anchors.right: parent.right + + topPadding: Theme.componentMarginXL + bottomPadding: Theme.componentMarginXL + spacing: Theme.componentMarginXL + + //////// + + Row { + anchors.horizontalCenter: parent.horizontalCenter + + TumblerThemed { + anchors.verticalCenter: parent.verticalCenter + width: 48 + height: 128 + + font.pixelSize: Theme.fontSizeContentVeryBig + + model: 24 + } + + Text { + anchors.verticalCenter: parent.verticalCenter + + text: " : " + textFormat: Text.PlainText + font.pixelSize: Theme.fontSizeContentVeryBig + } + + TumblerThemed { + anchors.verticalCenter: parent.verticalCenter + width: 48 + height: 128 + + font.pixelSize: Theme.fontSizeContentVeryBig + + model: 60 + } + } + + //////// + + Row { + anchors.right: parent.right + anchors.rightMargin: Theme.componentMarginXL + spacing: Theme.componentMargin + + ButtonClear { + color: Theme.colorGrey + + text: qsTr("Cancel") + onClicked: popupTime.close() + } + + ButtonFlat { + color: Theme.colorPrimary + + text: qsTr("Select") + onClicked: { + updateTime(selectedTime) + popupTime.close() + } + } + } + + //////// + } + + //////////////// } ////////////////////////////////////////////////////////////////////////////