diff --git a/qml/ComponentLibrary/ComponentLibrary.qrc b/qml/ComponentLibrary/ComponentLibrary.qrc new file mode 100644 index 0000000..9ce2b2b --- /dev/null +++ b/qml/ComponentLibrary/ComponentLibrary.qrc @@ -0,0 +1,101 @@ + + + menus/DesktopHeaderItem.qml + menus/DesktopSidebarItem.qml + menus/MobileMenuItem_horizontal.qml + menus/MobileMenuItem_vertical.qml + menus/ActionMenu_bottom.qml + menus/ActionMenu_floating.qml + menus/ActionMenuItem.qml + menus/ActionMenuSeparator.qml + menus/DrawerItem.qml + menus/DrawerButton.qml + menus/ListItem.qml + menus/ListItemClickable.qml + menus/ListSeparator.qml + menus/ListSeparatorPadded.qml + menus/ListTitle.qml + menus/SectionTitle.qml + + wip/ButtonFlat.qml + wip/ButtonSolid.qml + wip/ButtonSunken.qml + wip/ButtonWireframe.qml + wip/ButtonFab.qml + wip/SelectorMenu2.qml + + deprecated/ButtonCompactable.qml + deprecated/ButtonText.qml + deprecated/ButtonImage.qml + + generic/AndroidButton.qml + generic/AndroidButtonIcon.qml + generic/AndroidTextField.qml + generic/DataBarCompact.qml + generic/DataBarSolid.qml + generic/IconSvg.qml + generic/ItemBadge.qml + generic/ItemTag.qml + generic/ItemTagButton.qml + generic/MiddleSliderArrow.qml + generic/MiddleSliderValueSolid.qml + generic/ProgressArc.qml + generic/ProgressCircle.qml + generic/RoundButtonIcon.qml + generic/RoundButtonText.qml + generic/RangeSliderArrow.qml + generic/RangeSliderValueSolid.qml + generic/SelectorMenu.qml + generic/SelectorMenuItem.qml + generic/SliderArrow.qml + generic/SliderValueSolid.qml + generic/ToolTipFlat.qml + + layouts/FrameBox.qml + controls/FrameThemed.qml + controls/GroupBoxThemed.qml + controls/PaneThemed.qml + controls/DrawerThemed.qml + + controls/ButtonIconThemed.qml + controls/ButtonThemed.qml + controls/CheckBoxThemed.qml + controls/ComboBoxThemed.qml + controls/DialThemed.qml + controls/ItemDelegateThemed.qml + controls/MiddleSliderThemed.qml + controls/PageIndicatorThemed.qml + controls/ProgressBarThemed.qml + controls/RadioButtonThemed.qml + controls/RangeSliderThemed.qml + controls/RippleThemed.qml + controls/RoundButtonThemed.qml + controls/RoundButtonIconThemed.qml + controls/ScrollBarThemed.qml + controls/SelectorMenuThemed.qml + controls/SelectorMenuThemedItem.qml + controls/SliderThemed.qml + controls/SpinBoxThemed_desktop.qml + controls/SpinBoxThemed_mobile.qml + controls/SwitchThemed_desktop.qml + controls/SwitchThemed_mobile.qml + controls/TextAreaThemed.qml + controls/TextEditThemed.qml + controls/TextFieldThemed.qml + controls/TumblerThemed.qml + + complex/DatePicker.qml + + utils/CsdMac.qml + utils/CsdWindows.qml + utils/CsdLinux.qml + utils/SwipeArea.qml + utils/WindowGeometrySaver.qml + + + + utils/UtilsNumber.js + utils/UtilsPath.js + utils/UtilsString.js + + diff --git a/qml/components_generic/DatePicker6.qml b/qml/ComponentLibrary/complex/DatePicker.qml similarity index 100% rename from qml/components_generic/DatePicker6.qml rename to qml/ComponentLibrary/complex/DatePicker.qml diff --git a/qml/components_generic/TextField_FileDialog6.qml b/qml/ComponentLibrary/complex/TextField_FileDialog6.qml similarity index 91% rename from qml/components_generic/TextField_FileDialog6.qml rename to qml/ComponentLibrary/complex/TextField_FileDialog6.qml index 1d75dac..1b3444a 100644 --- a/qml/components_generic/TextField_FileDialog6.qml +++ b/qml/ComponentLibrary/complex/TextField_FileDialog6.qml @@ -51,12 +51,12 @@ T.TextField { property int buttonWidth: (buttonChange.visible ? buttonChange.width + 2 : 2) // colors - property string colorText: Theme.colorComponentText - property string colorPlaceholderText: Theme.colorSubText - property string colorBorder: Theme.colorComponentBorder - property string colorBackground: Theme.colorComponentBackground - property string colorSelection: Theme.colorPrimary - property string colorSelectedText: "white" + property color colorText: Theme.colorComponentText + property color colorPlaceholderText: Theme.colorSubText + property color colorBorder: Theme.colorComponentBorder + property color colorBackground: Theme.colorComponentBackground + property color colorSelection: Theme.colorPrimary + property color colorSelectedText: "white" //////////////// diff --git a/qml/components_generic/TextField_FolderDialog6.qml b/qml/ComponentLibrary/complex/TextField_FolderDialog6.qml similarity index 91% rename from qml/components_generic/TextField_FolderDialog6.qml rename to qml/ComponentLibrary/complex/TextField_FolderDialog6.qml index c0d20df..f91e8b8 100644 --- a/qml/components_generic/TextField_FolderDialog6.qml +++ b/qml/ComponentLibrary/complex/TextField_FolderDialog6.qml @@ -49,12 +49,12 @@ T.TextField { property int buttonWidth: (buttonChange.visible ? buttonChange.width + 2 : 2) // colors - property string colorText: Theme.colorComponentText - property string colorPlaceholderText: Theme.colorSubText - property string colorBorder: Theme.colorComponentBorder - property string colorBackground: Theme.colorComponentBackground - property string colorSelection: Theme.colorPrimary - property string colorSelectedText: "white" + property color colorText: Theme.colorComponentText + property color colorPlaceholderText: Theme.colorSubText + property color colorBorder: Theme.colorComponentBorder + property color colorBackground: Theme.colorComponentBackground + property color colorSelection: Theme.colorPrimary + property color colorSelectedText: "white" //////////////// diff --git a/qml/components_themed/ButtonIconThemed.qml b/qml/ComponentLibrary/controls/ButtonIconThemed.qml similarity index 86% rename from qml/components_themed/ButtonIconThemed.qml rename to qml/ComponentLibrary/controls/ButtonIconThemed.qml index a55e772..62d5039 100644 --- a/qml/components_themed/ButtonIconThemed.qml +++ b/qml/ComponentLibrary/controls/ButtonIconThemed.qml @@ -1,10 +1,10 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T -import QtQuick.Layouts 1.15 +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T +import QtQuick.Layouts -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber T.Button { id: control @@ -35,7 +35,7 @@ T.Button { implicitHeight: Theme.componentHeight radius: Theme.componentRadius - opacity: enabled ? 1 : 0.33 + opacity: control.enabled ? 1 : 0.66 color: control.down ? Theme.colorComponentDown : Theme.colorComponent } @@ -55,7 +55,7 @@ T.Button { Layout.maximumHeight: control.sourceSize Layout.alignment: Qt.AlignVCenter - opacity: enabled ? 1.0 : 0.33 + opacity: control.enabled ? 1 : 0.66 color: Theme.colorComponentContent } @@ -73,7 +73,7 @@ T.Button { horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - opacity: enabled ? 1.0 : 0.33 + opacity: control.enabled ? 1 : 0.66 color: Theme.colorComponentContent } } diff --git a/qml/components_themed/ButtonThemed.qml b/qml/ComponentLibrary/controls/ButtonThemed.qml similarity index 85% rename from qml/components_themed/ButtonThemed.qml rename to qml/ComponentLibrary/controls/ButtonThemed.qml index 6c89e98..3372cda 100644 --- a/qml/components_themed/ButtonThemed.qml +++ b/qml/ComponentLibrary/controls/ButtonThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Button { id: control @@ -26,7 +26,7 @@ T.Button { implicitHeight: Theme.componentHeight radius: Theme.componentRadius - opacity: enabled ? 1 : 0.33 + opacity: control.enabled ? 1 : 0.66 color: control.down ? Theme.colorComponentDown : Theme.colorComponent } @@ -42,7 +42,7 @@ T.Button { horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - opacity: enabled ? 1.0 : 0.33 + opacity: control.enabled ? 1 : 0.66 color: control.down ? Theme.colorComponentContent : Theme.colorComponentContent } diff --git a/qml/components_themed/CheckBoxThemed.qml b/qml/ComponentLibrary/controls/CheckBoxThemed.qml similarity index 82% rename from qml/components_themed/CheckBoxThemed.qml rename to qml/ComponentLibrary/controls/CheckBoxThemed.qml index 1a5db70..ea7113d 100644 --- a/qml/components_themed/CheckBoxThemed.qml +++ b/qml/ComponentLibrary/controls/CheckBoxThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.CheckBox { id: control @@ -32,9 +32,12 @@ T.CheckBox { height: 24 radius: Theme.componentRadius + opacity: control.enabled ? 1 : 0.66 color: Theme.colorComponentBackground border.width: Theme.componentBorderWidth - border.color: control.down ? Theme.colorSecondary : Theme.colorComponentBorder + border.color: (control.enabled && control.checkable && + (control.down || control.hovered)) ? + Theme.colorSecondary : Theme.colorComponentBorder Rectangle { anchors.centerIn: parent @@ -60,8 +63,8 @@ T.CheckBox { font: control.font wrapMode: Text.WordWrap + opacity: control.enabled ? 1 : 0.66 color: control.checked ? Theme.colorText : Theme.colorSubText - opacity: enabled ? 1.0 : 0.33 } //////////////// diff --git a/qml/components_themed/ComboBoxThemed.qml b/qml/ComponentLibrary/controls/ComboBoxThemed.qml similarity index 93% rename from qml/components_themed/ComboBoxThemed.qml rename to qml/ComponentLibrary/controls/ComboBoxThemed.qml index 42e8028..6c5f54a 100644 --- a/qml/components_themed/ComboBoxThemed.qml +++ b/qml/ComponentLibrary/controls/ComboBoxThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.ComboBox { id: control @@ -17,7 +17,6 @@ T.ComboBox { rightPadding: 16 font.pixelSize: Theme.componentFontSize - opacity: enabled ? 1.0 : 0.4 //////////////// @@ -26,6 +25,7 @@ T.ComboBox { implicitHeight: Theme.componentHeight radius: Theme.componentRadius + opacity: control.enabled ? 1 : 0.66 color: control.down ? Theme.colorComponentDown : Theme.colorComponent border.width: 2 border.color: Theme.colorComponentBorder @@ -41,6 +41,7 @@ T.ComboBox { elide: Text.ElideRight verticalAlignment: Text.AlignVCenter + opacity: control.enabled ? 1 : 0.66 color: Theme.colorComponentContent } @@ -51,6 +52,7 @@ T.ComboBox { y: control.topPadding + ((control.availableHeight - height) / 2) width: 12 height: 8 + opacity: control.enabled ? 1 : 0.66 rotation: control.popup.visible ? 180 : 0 Connections { diff --git a/qml/components_themed/DialThemed.qml b/qml/ComponentLibrary/controls/DialThemed.qml similarity index 84% rename from qml/components_themed/DialThemed.qml rename to qml/ComponentLibrary/controls/DialThemed.qml index 9e21695..3a3f6ff 100644 --- a/qml/components_themed/DialThemed.qml +++ b/qml/ComponentLibrary/controls/DialThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Dial { id: control @@ -19,7 +19,7 @@ T.Dial { height: width radius: width - opacity: control.enabled ? 1 : 0.3 + opacity: control.enabled ? 1 : 0.66 color: Theme.colorForeground border.width: Theme.componentBorderWidth border.color: Theme.colorPrimary @@ -35,7 +35,7 @@ T.Dial { height: 16 radius: 8 - opacity: control.enabled ? 1 : 0.3 + opacity: control.enabled ? 1 : 0.66 color: control.pressed ? Theme.colorSecondary : Theme.colorPrimary antialiasing: true diff --git a/qml/components_themed/DrawerThemed.qml b/qml/ComponentLibrary/controls/DrawerThemed.qml similarity index 92% rename from qml/components_themed/DrawerThemed.qml rename to qml/ComponentLibrary/controls/DrawerThemed.qml index 0aa03a1..06517da 100644 --- a/qml/components_themed/DrawerThemed.qml +++ b/qml/ComponentLibrary/controls/DrawerThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Drawer { id: control diff --git a/qml/components_themed/FrameThemed.qml b/qml/ComponentLibrary/controls/FrameThemed.qml similarity index 62% rename from qml/components_themed/FrameThemed.qml rename to qml/ComponentLibrary/controls/FrameThemed.qml index e9e3ab0..96ab3d9 100644 --- a/qml/components_themed/FrameThemed.qml +++ b/qml/ComponentLibrary/controls/FrameThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Frame { id: control @@ -15,16 +15,16 @@ T.Frame { padding: 12 // colors - property string backgroundColor: Theme.colorForeground - property string borderColor: Theme.colorSeparator + property color colorBackground: Theme.colorForeground + property color colorBorder: Theme.colorSeparator //////////////// background: Rectangle { radius: Theme.componentRadius - color: control.backgroundColor + color: control.colorBackground border.width: 2 - border.color: control.borderColor + border.color: control.colorBorder } //////////////// diff --git a/qml/components_themed/GroupBoxThemed.qml b/qml/ComponentLibrary/controls/GroupBoxThemed.qml similarity index 78% rename from qml/components_themed/GroupBoxThemed.qml rename to qml/ComponentLibrary/controls/GroupBoxThemed.qml index 7ce0354..7363cc7 100644 --- a/qml/components_themed/GroupBoxThemed.qml +++ b/qml/ComponentLibrary/controls/GroupBoxThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.GroupBox { id: control @@ -19,8 +19,8 @@ T.GroupBox { topPadding: title ? 4 + (implicitLabelWidth > 0 ? implicitLabelHeight + spacing : 0) : padding // colors - property string backgroundColor: Theme.colorForeground - property string borderColor: Theme.colorSeparator + property color colorBackground: Theme.colorForeground + property color colorBorder: Theme.colorSeparator //////////////// @@ -30,9 +30,9 @@ T.GroupBox { height: parent.height - control.topPadding + control.bottomPadding radius: Theme.componentRadius - color: control.backgroundColor + color: control.colorBackground border.width: 2 - border.color: control.borderColor + border.color: control.colorBorder } //////////////// diff --git a/qml/components_themed/ItemDelegateThemed.qml b/qml/ComponentLibrary/controls/ItemDelegateThemed.qml similarity index 100% rename from qml/components_themed/ItemDelegateThemed.qml rename to qml/ComponentLibrary/controls/ItemDelegateThemed.qml diff --git a/qml/components_themed/MiddleSliderThemed.qml b/qml/ComponentLibrary/controls/MiddleSliderThemed.qml similarity index 93% rename from qml/components_themed/MiddleSliderThemed.qml rename to qml/ComponentLibrary/controls/MiddleSliderThemed.qml index 99ca9ff..654e341 100644 --- a/qml/components_themed/MiddleSliderThemed.qml +++ b/qml/ComponentLibrary/controls/MiddleSliderThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Slider { id: control @@ -25,6 +25,7 @@ T.Slider { height: control.horizontal ? implicitHeight : control.availableHeight radius: 2 + opacity: control.enabled ? 1 : 0.66 color: Theme.colorComponentBackground scale: control.horizontal && control.mirrored ? -1 : 1 @@ -49,6 +50,7 @@ T.Slider { implicitHeight: 18 radius: 9 + opacity: control.enabled ? 1 : 0.8 color: control.pressed ? Theme.colorSecondary : Theme.colorPrimary border.width: 1 border.color: Theme.colorPrimary diff --git a/qml/components_themed/PageIndicatorThemed.qml b/qml/ComponentLibrary/controls/PageIndicatorThemed.qml similarity index 90% rename from qml/components_themed/PageIndicatorThemed.qml rename to qml/ComponentLibrary/controls/PageIndicatorThemed.qml index c209105..a5e46ba 100644 --- a/qml/components_themed/PageIndicatorThemed.qml +++ b/qml/ComponentLibrary/controls/PageIndicatorThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.PageIndicator { id: control diff --git a/qml/components_themed/PaneThemed.qml b/qml/ComponentLibrary/controls/PaneThemed.qml similarity index 78% rename from qml/components_themed/PaneThemed.qml rename to qml/ComponentLibrary/controls/PaneThemed.qml index 864f16e..97d3acb 100644 --- a/qml/components_themed/PaneThemed.qml +++ b/qml/ComponentLibrary/controls/PaneThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Pane { id: control diff --git a/qml/components_themed/ProgressBarThemed.qml b/qml/ComponentLibrary/controls/ProgressBarThemed.qml similarity index 56% rename from qml/components_themed/ProgressBarThemed.qml rename to qml/ComponentLibrary/controls/ProgressBarThemed.qml index 01166e3..4215d01 100644 --- a/qml/components_themed/ProgressBarThemed.qml +++ b/qml/ComponentLibrary/controls/ProgressBarThemed.qml @@ -1,11 +1,9 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Effects +import QtQuick.Controls.impl +import QtQuick.Templates as T -//import QtGraphicalEffects 1.15 // Qt5 -import Qt5Compat.GraphicalEffects // Qt6 - -import ThemeEngine 1.0 +import ThemeEngine T.ProgressBar { id: control @@ -15,8 +13,8 @@ T.ProgressBar { implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding) - property var colorBackground: Theme.colorComponentBackground - property var colorForeground: Theme.colorPrimary + property color colorBackground: Theme.colorComponentBackground + property color colorForeground: Theme.colorPrimary //////////////// @@ -39,13 +37,18 @@ T.ProgressBar { } layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - x: contentItem.x - y: contentItem.y - width: contentItem.width - height: contentItem.height - radius: contentItem.height + layer.effect: MultiEffect { + maskEnabled: true + maskInverted: false + maskThresholdMin: 0.5 + maskSpreadAtMin: 1.0 + maskSpreadAtMax: 0.0 + maskSource: ShaderEffectSource { + sourceItem: Rectangle { + width: control.width + height: control.height + radius: Theme.componentRadius + } } } } diff --git a/qml/components_themed/RadioButtonThemed.qml b/qml/ComponentLibrary/controls/RadioButtonThemed.qml similarity index 77% rename from qml/components_themed/RadioButtonThemed.qml rename to qml/ComponentLibrary/controls/RadioButtonThemed.qml index 558d465..4edde12 100644 --- a/qml/components_themed/RadioButtonThemed.qml +++ b/qml/ComponentLibrary/controls/RadioButtonThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.RadioButton { id: control @@ -26,17 +26,20 @@ T.RadioButton { y: (parent.height / 2) - (height / 2) width: 24 height: 24 - radius: (width / 2) + radius: 12 + opacity: control.enabled ? 1 : 0.8 color: Theme.colorComponentBackground border.width: Theme.componentBorderWidth - border.color: control.down ? Theme.colorSecondary : Theme.colorComponentBorder + border.color: (control.enabled && control.checkable && + (control.down || control.hovered)) ? + Theme.colorSecondary : Theme.colorComponentBorder Rectangle { anchors.centerIn: parent width: 12 height: 12 - radius: (width / 2) + radius: 6 color: Theme.colorSecondary opacity: control.checked ? 1 : 0 @@ -56,7 +59,7 @@ T.RadioButton { wrapMode: Text.WordWrap color: control.checked ? Theme.colorText : Theme.colorSubText - opacity: enabled ? 1.0 : 0.33 + opacity: control.enabled ? 1 : 0.66 } //////////////// diff --git a/qml/components_themed/RangeSliderThemed.qml b/qml/ComponentLibrary/controls/RangeSliderThemed.qml similarity index 94% rename from qml/components_themed/RangeSliderThemed.qml rename to qml/ComponentLibrary/controls/RangeSliderThemed.qml index 428f6d5..85da1b3 100644 --- a/qml/components_themed/RangeSliderThemed.qml +++ b/qml/ComponentLibrary/controls/RangeSliderThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.RangeSlider { id: control @@ -27,6 +27,7 @@ T.RangeSlider { height: control.horizontal ? implicitHeight : control.availableHeight radius: 2 + opacity: control.enabled ? 1 : 0.66 color: Theme.colorComponentBackground scale: control.horizontal && control.mirrored ? -1 : 1 @@ -51,6 +52,7 @@ T.RangeSlider { implicitHeight: 18 radius: 9 + opacity: control.enabled ? 1 : 0.8 color: first.pressed ? Theme.colorSecondary : Theme.colorPrimary border.width: 1 border.color: Theme.colorPrimary @@ -84,6 +86,7 @@ T.RangeSlider { implicitHeight: 18 radius: 9 + opacity: control.enabled ? 1 : 0.8 color: second.pressed ? Theme.colorSecondary : Theme.colorPrimary border.width: 1 border.color: Theme.colorPrimary diff --git a/qml/components_themed/RippleThemed.qml b/qml/ComponentLibrary/controls/RippleThemed.qml similarity index 100% rename from qml/components_themed/RippleThemed.qml rename to qml/ComponentLibrary/controls/RippleThemed.qml diff --git a/qml/components_themed/RoundButtonIconThemed.qml b/qml/ComponentLibrary/controls/RoundButtonIconThemed.qml similarity index 81% rename from qml/components_themed/RoundButtonIconThemed.qml rename to qml/ComponentLibrary/controls/RoundButtonIconThemed.qml index 08ecf7b..0620543 100644 --- a/qml/components_themed/RoundButtonIconThemed.qml +++ b/qml/ComponentLibrary/controls/RoundButtonIconThemed.qml @@ -1,9 +1,9 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber T.Button { id: control @@ -25,7 +25,7 @@ T.Button { implicitHeight: Theme.componentHeight radius: Theme.componentHeight - opacity: enabled ? 1 : 0.33 + opacity: control.enabled ? 1 : 0.66 color: control.down ? Theme.colorComponentDown : Theme.colorComponent } @@ -37,7 +37,7 @@ T.Button { width: control.sourceSize height: control.sourceSize - opacity: enabled ? 1.0 : 0.33 + opacity: control.enabled ? 1 : 0.66 source: control.source color: Theme.colorComponentContent } diff --git a/qml/components_themed/RoundButtonThemed.qml b/qml/ComponentLibrary/controls/RoundButtonThemed.qml similarity index 85% rename from qml/components_themed/RoundButtonThemed.qml rename to qml/ComponentLibrary/controls/RoundButtonThemed.qml index 7eaf207..fe89849 100644 --- a/qml/components_themed/RoundButtonThemed.qml +++ b/qml/ComponentLibrary/controls/RoundButtonThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Button { id: control @@ -23,7 +23,7 @@ T.Button { implicitHeight: Theme.componentHeight radius: Theme.componentHeight - opacity: enabled ? 1 : 0.33 + opacity: control.enabled ? 1 : 0.66 color: control.down ? Theme.colorComponentDown : Theme.colorComponent } @@ -38,7 +38,7 @@ T.Button { horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - opacity: enabled ? 1.0 : 0.33 + opacity: control.enabled ? 1 : 0.66 color: control.down ? Theme.colorComponentContent : Theme.colorComponentContent } diff --git a/qml/components_themed/ScrollBarThemed.qml b/qml/ComponentLibrary/controls/ScrollBarThemed.qml similarity index 94% rename from qml/components_themed/ScrollBarThemed.qml rename to qml/ComponentLibrary/controls/ScrollBarThemed.qml index 696377a..4221741 100644 --- a/qml/components_themed/ScrollBarThemed.qml +++ b/qml/ComponentLibrary/controls/ScrollBarThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.ScrollBar { id: control diff --git a/qml/components_themed/SelectorMenuThemed.qml b/qml/ComponentLibrary/controls/SelectorMenuThemed.qml similarity index 93% rename from qml/components_themed/SelectorMenuThemed.qml rename to qml/ComponentLibrary/controls/SelectorMenuThemed.qml index 6d4c1fd..16373eb 100644 --- a/qml/components_themed/SelectorMenuThemed.qml +++ b/qml/ComponentLibrary/controls/SelectorMenuThemed.qml @@ -1,6 +1,6 @@ -import QtQuick 2.15 +import QtQuick -import ThemeEngine 1.0 +import ThemeEngine Item { id: selectorMenu @@ -8,7 +8,8 @@ Item { implicitHeight: 32 width: contentRow.width - opacity: enabled ? 1 : 0.4 + + opacity: selectorMenu.enabled ? 1 : 0.66 signal menuSelected(var index) property int currentSelection: 1 diff --git a/qml/components_themed/SelectorMenuThemedItem.qml b/qml/ComponentLibrary/controls/SelectorMenuThemedItem.qml similarity index 86% rename from qml/components_themed/SelectorMenuThemedItem.qml rename to qml/ComponentLibrary/controls/SelectorMenuThemedItem.qml index ba92181..223f9de 100644 --- a/qml/components_themed/SelectorMenuThemedItem.qml +++ b/qml/ComponentLibrary/controls/SelectorMenuThemedItem.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Button { id: control @@ -19,13 +19,15 @@ T.Button { // settings property int index + + // icon property url source property int sourceSize: 32 // colors - property string colorContent: Theme.colorComponentText - property string colorContentHighlight: Theme.colorComponentContent - property string colorBackgroundHighlight: Theme.colorComponentDown + property color colorContent: Theme.colorComponentText + property color colorContentHighlight: Theme.colorComponentContent + property color colorBackgroundHighlight: Theme.colorComponentDown //////////////// diff --git a/qml/components_themed/SliderThemed.qml b/qml/ComponentLibrary/controls/SliderThemed.qml similarity index 93% rename from qml/components_themed/SliderThemed.qml rename to qml/ComponentLibrary/controls/SliderThemed.qml index f4df4d8..d9b3b3d 100644 --- a/qml/components_themed/SliderThemed.qml +++ b/qml/ComponentLibrary/controls/SliderThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Slider { id: control @@ -25,6 +25,7 @@ T.Slider { height: control.horizontal ? implicitHeight : control.availableHeight radius: 2 + opacity: control.enabled ? 1 : 0.66 color: Theme.colorComponentBackground scale: control.horizontal && control.mirrored ? -1 : 1 @@ -49,6 +50,7 @@ T.Slider { implicitHeight: 18 radius: 9 + opacity: control.enabled ? 1 : 0.8 color: control.pressed ? Theme.colorSecondary : Theme.colorPrimary border.width: 1 border.color: Theme.colorPrimary diff --git a/qml/components_themed/SpinBoxThemed_desktop.qml b/qml/ComponentLibrary/controls/SpinBoxThemed_desktop.qml similarity index 88% rename from qml/components_themed/SpinBoxThemed_desktop.qml rename to qml/ComponentLibrary/controls/SpinBoxThemed_desktop.qml index de8bf9f..02eb243 100644 --- a/qml/components_themed/SpinBoxThemed_desktop.qml +++ b/qml/ComponentLibrary/controls/SpinBoxThemed_desktop.qml @@ -1,12 +1,10 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Effects +import QtQuick.Controls.impl +import QtQuick.Templates as T -//import QtGraphicalEffects 1.15 // Qt5 -import Qt5Compat.GraphicalEffects // Qt6 - -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber T.SpinBox { id: control @@ -20,7 +18,6 @@ T.SpinBox { leftPadding: padding + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0)) rightPadding: padding + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0)) - opacity: enabled ? 1 : 0.4 font.pixelSize: Theme.componentFontSize property string legend @@ -41,6 +38,7 @@ T.SpinBox { radius: Theme.componentRadius color: Theme.colorComponentBackground + opacity: control.enabled ? 1 : 0.66 Rectangle { width: control.height @@ -66,13 +64,18 @@ T.SpinBox { } layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - x: control.x - y: control.y - width: control.width - height: control.height - radius: Theme.componentRadius + layer.effect: MultiEffect { + maskEnabled: true + maskInverted: false + maskThresholdMin: 0.5 + maskSpreadAtMin: 1.0 + maskSpreadAtMax: 0.0 + maskSource: ShaderEffectSource { + sourceItem: Rectangle { + width: control.width + height: control.height + radius: Theme.componentRadius + } } } } @@ -85,6 +88,8 @@ T.SpinBox { anchors.right: parent.right anchors.rightMargin: control.rightPadding + control.height + opacity: control.enabled ? 1 : 0.66 + Row { anchors.centerIn: parent spacing: 4 @@ -154,7 +159,7 @@ T.SpinBox { x: control.mirrored ? 0 : control.width - width y: 0 - opacity: enabled ? 1 : 0.33 + opacity: enabled ? 1 : 0.5 Canvas { id: arrowup @@ -193,7 +198,7 @@ T.SpinBox { x: control.mirrored ? 0 : control.width - width y: height - opacity: enabled ? 1 : 0.33 + opacity: enabled ? 1 : 0.5 Canvas { id: arrowdown diff --git a/qml/components_themed/SpinBoxThemed_mobile.qml b/qml/ComponentLibrary/controls/SpinBoxThemed_mobile.qml similarity index 87% rename from qml/components_themed/SpinBoxThemed_mobile.qml rename to qml/ComponentLibrary/controls/SpinBoxThemed_mobile.qml index 16830a1..180f3eb 100644 --- a/qml/components_themed/SpinBoxThemed_mobile.qml +++ b/qml/ComponentLibrary/controls/SpinBoxThemed_mobile.qml @@ -1,12 +1,10 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Effects +import QtQuick.Controls.impl +import QtQuick.Templates as T -//import QtGraphicalEffects 1.15 // Qt5 -import Qt5Compat.GraphicalEffects // Qt6 - -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber T.SpinBox { id: control @@ -20,7 +18,6 @@ T.SpinBox { leftPadding: padding + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0)) rightPadding: padding + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0)) - opacity: enabled ? 1 : 0.4 font.pixelSize: Theme.componentFontSize property string legend @@ -41,6 +38,7 @@ T.SpinBox { radius: Theme.componentRadius color: Theme.colorComponentBackground + opacity: control.enabled ? 1 : 0.66 Rectangle { width: control.height @@ -66,13 +64,18 @@ T.SpinBox { } layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - x: control.x - y: control.y - width: control.width - height: control.height - radius: Theme.componentRadius + layer.effect: MultiEffect { + maskEnabled: true + maskInverted: false + maskThresholdMin: 0.5 + maskSpreadAtMin: 1.0 + maskSpreadAtMax: 0.0 + maskSource: ShaderEffectSource { + sourceItem: Rectangle { + width: control.width + height: control.height + radius: Theme.componentRadius + } } } } @@ -84,6 +87,8 @@ T.SpinBox { anchors.centerIn: parent spacing: 4 + opacity: control.enabled ? 1 : 0.66 + TextInput { height: control.height anchors.verticalCenter: parent.verticalCenter @@ -149,7 +154,7 @@ T.SpinBox { x: control.mirrored ? 0 : control.width - width anchors.verticalCenter: control.verticalCenter - opacity: enabled ? 1 : 0.33 + opacity: enabled ? 1 : 0.5 Rectangle { anchors.centerIn: parent @@ -176,7 +181,7 @@ T.SpinBox { x: control.mirrored ? control.width - width : 0 anchors.verticalCenter: control.verticalCenter - opacity: enabled ? 1 : 0.33 + opacity: enabled ? 1 : 0.5 Rectangle { anchors.centerIn: parent diff --git a/qml/components_themed/SwitchThemed_desktop.qml b/qml/ComponentLibrary/controls/SwitchThemed_desktop.qml similarity index 92% rename from qml/components_themed/SwitchThemed_desktop.qml rename to qml/ComponentLibrary/controls/SwitchThemed_desktop.qml index 26e79eb..a07e2ca 100644 --- a/qml/components_themed/SwitchThemed_desktop.qml +++ b/qml/ComponentLibrary/controls/SwitchThemed_desktop.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Switch { id: control @@ -33,10 +33,11 @@ T.Switch { radius: (width / 2) color: Theme.colorComponentBackground - border.color: Theme.colorComponentBorder border.width: Theme.componentBorderWidth + opacity: control.enabled ? 1 : 0.8 + Rectangle { x: control.checked ? (parent.width - width) : 0 Behavior on x { NumberAnimation { duration: 133 } } @@ -63,7 +64,7 @@ T.Switch { leftPadding: !control.mirrored ? control.indicator.width + control.spacing : 0 rightPadding: control.mirrored ? control.indicator.width + control.spacing : 0 - opacity: enabled ? 1.0 : 0.33 + opacity: control.enabled ? 1 : 0.66 text: control.text textFormat: Text.PlainText diff --git a/qml/components_themed/SwitchThemed_mobile.qml b/qml/ComponentLibrary/controls/SwitchThemed_mobile.qml similarity index 91% rename from qml/components_themed/SwitchThemed_mobile.qml rename to qml/ComponentLibrary/controls/SwitchThemed_mobile.qml index 40c4edc..f6585bc 100644 --- a/qml/components_themed/SwitchThemed_mobile.qml +++ b/qml/ComponentLibrary/controls/SwitchThemed_mobile.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Switch { id: control @@ -29,6 +29,7 @@ T.Switch { height: 16 radius: 16 + opacity: control.enabled ? 1 : 0.8 color: control.checked ? Theme.colorSecondary : Theme.colorComponentDown Behavior on color { ColorAnimation { duration: 133; easing.type: Easing.InOutCirc; } } @@ -65,7 +66,7 @@ T.Switch { font: control.font color: control.checked ? Theme.colorText : Theme.colorSubText - opacity: enabled ? 1.0 : 0.33 + opacity: control.enabled ? 1 : 0.66 } //////////////// diff --git a/qml/components_themed/TextAreaThemed.qml b/qml/ComponentLibrary/controls/TextAreaThemed.qml similarity index 80% rename from qml/components_themed/TextAreaThemed.qml rename to qml/ComponentLibrary/controls/TextAreaThemed.qml index bbbe8fa..56ea1ef 100644 --- a/qml/components_themed/TextAreaThemed.qml +++ b/qml/ComponentLibrary/controls/TextAreaThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.TextArea { id: control @@ -34,12 +34,12 @@ T.TextArea { Keys.onBackPressed: focus = false // colors - property string colorText: Theme.colorComponentContent - property string colorPlaceholderText: Theme.colorSubText - property string colorBorder: Theme.colorComponentBorder - property string colorBackground: Theme.colorComponentBackground - property string colorSelection: Theme.colorPrimary - property string colorSelectedText: "white" + property color colorText: Theme.colorComponentContent + property color colorPlaceholderText: Theme.colorSubText + property color colorBorder: Theme.colorComponentBorder + property color colorBackground: Theme.colorComponentBackground + property color colorSelection: Theme.colorPrimary + property color colorSelectedText: "white" //////////////// diff --git a/qml/components_themed/TextEditThemed.qml b/qml/ComponentLibrary/controls/TextEditThemed.qml similarity index 87% rename from qml/components_themed/TextEditThemed.qml rename to qml/ComponentLibrary/controls/TextEditThemed.qml index 7e780b1..c62926d 100644 --- a/qml/components_themed/TextEditThemed.qml +++ b/qml/ComponentLibrary/controls/TextEditThemed.qml @@ -1,6 +1,6 @@ -import QtQuick 2.15 +import QtQuick -import ThemeEngine 1.0 +import ThemeEngine TextEdit { readOnly: false diff --git a/qml/components_themed/TextFieldThemed.qml b/qml/ComponentLibrary/controls/TextFieldThemed.qml similarity index 80% rename from qml/components_themed/TextFieldThemed.qml rename to qml/ComponentLibrary/controls/TextFieldThemed.qml index 8e9641c..b3a52f5 100644 --- a/qml/components_themed/TextFieldThemed.qml +++ b/qml/ComponentLibrary/controls/TextFieldThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.TextField { id: control @@ -34,12 +34,12 @@ T.TextField { Keys.onBackPressed: focus = false // colors - property string colorText: Theme.colorComponentText - property string colorPlaceholderText: Theme.colorSubText - property string colorBorder: Theme.colorComponentBorder - property string colorBackground: Theme.colorComponentBackground - property string colorSelection: Theme.colorPrimary - property string colorSelectedText: "white" + property color colorText: Theme.colorComponentText + property color colorPlaceholderText: Theme.colorSubText + property color colorBorder: Theme.colorComponentBorder + property color colorBackground: Theme.colorComponentBackground + property color colorSelection: Theme.colorPrimary + property color colorSelectedText: "white" //////////////// diff --git a/qml/components_themed/ToolTipThemed.qml b/qml/ComponentLibrary/controls/ToolTipThemed.qml similarity index 78% rename from qml/components_themed/ToolTipThemed.qml rename to qml/ComponentLibrary/controls/ToolTipThemed.qml index 6679baf..89a7108 100644 --- a/qml/components_themed/ToolTipThemed.qml +++ b/qml/ComponentLibrary/controls/ToolTipThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.ToolTip { id: control @@ -21,8 +21,8 @@ T.ToolTip { closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnReleaseOutsideParent // colors - property string textColor: Theme.colorText - property string backgroundColor: Theme.colorComponent + property color colorText: Theme.colorText + property color colorBackground: Theme.colorComponent enter: Transition { NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 133; } } exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 133; } } @@ -35,13 +35,13 @@ T.ToolTip { font: control.font wrapMode: Text.Wrap - color: control.textColor + color: control.colorText } //////////////// background: Rectangle { - color: control.backgroundColor + color: control.colorBackground radius: 4 Rectangle { // arrow @@ -49,7 +49,7 @@ T.ToolTip { anchors.verticalCenter: parent.top width: 12; height: 12; rotation: 45 - color: control.backgroundColor + color: control.colorBackground } } diff --git a/qml/components_themed/TumblerThemed.qml b/qml/ComponentLibrary/controls/TumblerThemed.qml similarity index 92% rename from qml/components_themed/TumblerThemed.qml rename to qml/ComponentLibrary/controls/TumblerThemed.qml index 6077e53..dbb502e 100644 --- a/qml/components_themed/TumblerThemed.qml +++ b/qml/ComponentLibrary/controls/TumblerThemed.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Tumbler { id: control @@ -12,7 +12,7 @@ T.Tumbler { implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding) - opacity: (control.enabled ? 1.0 : 0.8) + opacity: control.enabled ? 1 : 0.66 //////////////// diff --git a/qml/components_generic/ButtonCompactable.qml b/qml/ComponentLibrary/deprecated/ButtonCompactable.qml similarity index 85% rename from qml/components_generic/ButtonCompactable.qml rename to qml/ComponentLibrary/deprecated/ButtonCompactable.qml index d464e22..6e95143 100644 --- a/qml/components_generic/ButtonCompactable.qml +++ b/qml/ComponentLibrary/deprecated/ButtonCompactable.qml @@ -1,13 +1,11 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T -import QtQuick.Layouts 1.15 +import QtQuick +import QtQuick.Layouts +import QtQuick.Effects +import QtQuick.Controls.impl +import QtQuick.Templates as T -//import QtGraphicalEffects 1.15 // Qt5 -import Qt5Compat.GraphicalEffects // Qt6 - -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber T.Button { id: control @@ -38,9 +36,9 @@ T.Button { property int layoutDirection: Qt.LeftToRight // colors - property string textColor: Theme.colorText - property string iconColor: Theme.colorIcon - property string backgroundColor: Theme.colorComponent + property color textColor: Theme.colorText + property color iconColor: Theme.colorIcon + property color backgroundColor: Theme.colorComponent // animation property string animation // available: rotate, fade, both @@ -110,13 +108,20 @@ T.Button { } layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - x: background.x - y: background.y - width: background.width - height: background.height - radius: background.radius + layer.effect: MultiEffect { + maskEnabled: true + maskInverted: false + maskThresholdMin: 0.5 + maskSpreadAtMin: 1.0 + maskSpreadAtMax: 0.0 + maskSource: ShaderEffectSource { + sourceItem: Rectangle { + x: background.x + y: background.y + width: background.width + height: background.height + radius: background.radius + } } } } @@ -127,6 +132,8 @@ T.Button { spacing: control.spacing layoutDirection: control.layoutDirection + opacity: control.enabled ? 1 : 0.66 + IconSvg { width: control.sourceSize height: control.sourceSize @@ -139,9 +146,6 @@ T.Button { source: control.source color: control.iconColor - opacity: enabled ? 1.0 : 0.4 - Behavior on opacity { NumberAnimation { duration: 333 } } - SequentialAnimation on opacity { running: (control.animationRunning && (control.animation === "fade" || control.animation === "both")) @@ -176,8 +180,6 @@ T.Button { elide: Text.ElideRight color: control.iconColor - opacity: enabled ? 1.0 : 0.4 - Behavior on opacity { NumberAnimation { duration: 333 } } } } diff --git a/qml/components_generic/ButtonImage.qml b/qml/ComponentLibrary/deprecated/ButtonImage.qml similarity index 64% rename from qml/components_generic/ButtonImage.qml rename to qml/ComponentLibrary/deprecated/ButtonImage.qml index c9e3b3a..21fdbee 100644 --- a/qml/components_generic/ButtonImage.qml +++ b/qml/ComponentLibrary/deprecated/ButtonImage.qml @@ -1,11 +1,9 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Effects +import QtQuick.Controls.impl +import QtQuick.Templates as T -//import QtGraphicalEffects 1.15 // Qt5 -import Qt5Compat.GraphicalEffects // Qt6 - -import ThemeEngine 1.0 +import ThemeEngine T.Button { id: control @@ -24,7 +22,7 @@ T.Button { property string highlightMode: "off" // available: off // colors - property string highlightColor: Theme.colorPrimary + property color highlightColor: Theme.colorPrimary //////////////// @@ -32,22 +30,13 @@ T.Button { implicitWidth: Theme.componentHeight implicitHeight: Theme.componentHeight - Glow { - anchors.centerIn: parent - width: Math.round(control.sourceSize * (control.pressed ? 0.9 : 1)) - height: Math.round(control.sourceSize * (control.pressed ? 0.9 : 1)) - - visible: (control.hoverMode === "glow") - - source: contentImage - color: control.highlightColor - radius: 12 - cached: true - //samples: 16 - transparentBorder: true + opacity: control.enabled ? 1 : 0.66 - opacity: control.hovered ? 1 : 0 - Behavior on opacity { OpacityAnimator { duration: 333 } } + layer.enabled: true + layer.effect: MultiEffect { + autoPaddingEnabled: true + blurEnabled: true + blur: 1.0 } Rectangle { @@ -79,7 +68,7 @@ T.Button { sourceSize: Qt.size(control.sourceSize, control.sourceSize) fillMode: Image.PreserveAspectFit - opacity: enabled ? 1.0 : 0.4 + opacity: control.enabled ? 1 : 0.66 Behavior on opacity { OpacityAnimator { duration: 333 } } } } diff --git a/qml/components_generic/ButtonText.qml b/qml/ComponentLibrary/deprecated/ButtonText.qml similarity index 82% rename from qml/components_generic/ButtonText.qml rename to qml/ComponentLibrary/deprecated/ButtonText.qml index 9162762..7d2437a 100644 --- a/qml/components_generic/ButtonText.qml +++ b/qml/ComponentLibrary/deprecated/ButtonText.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Button { id: control @@ -22,8 +22,8 @@ T.Button { focusPolicy: Qt.NoFocus // colors - property string colorHighlighted: Theme.colorPrimary - property string colorHovered: Theme.colorHeader + property color colorHighlight: Theme.colorPrimary + property color colorHover: Theme.colorHeader //////////////// @@ -38,8 +38,8 @@ T.Button { return 1 } color: { - if (control.highlighted) return control.colorHighlighted - if (control.hovered) return control.colorHovered + if (control.highlighted) return control.colorHighlight + if (control.hovered) return control.colorHover return "transparent" } } diff --git a/qml/ComponentLibrary/generic/AndroidButton.qml b/qml/ComponentLibrary/generic/AndroidButton.qml new file mode 100644 index 0000000..eecc051 --- /dev/null +++ b/qml/ComponentLibrary/generic/AndroidButton.qml @@ -0,0 +1,80 @@ +import QtQuick +import QtQuick.Effects +import QtQuick.Controls.impl +import QtQuick.Templates as T + +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber + +T.Button { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + + leftPadding: 12 + rightPadding: 12 + + focusPolicy: Qt.NoFocus + + // colors + property color colorPrimary: Theme.colorPrimary + + //////////////// + + background: Item { + implicitWidth: 80 + implicitHeight: 48 + + RippleThemed { + width: parent.width + height: parent.height + + anchor: control + pressed: control.pressed + active: control.enabled && (control.down || control.visualFocus) + color: Qt.rgba(control.colorPrimary.r, control.colorPrimary.g, control.colorPrimary.b, 0.1) + + layer.enabled: true + layer.effect: MultiEffect { + maskEnabled: true + maskInverted: false + maskThresholdMin: 0.5 + maskSpreadAtMin: 1.0 + maskSpreadAtMax: 0.0 + maskSource: ShaderEffectSource { + sourceItem: Rectangle { + x: background.x + y: background.y + width: background.width + height: background.height + radius: 8 + } + } + } + } + } + + //////////////// + + contentItem: Text { + text: control.text + textFormat: Text.PlainText + + font.bold: false + font.pixelSize: Theme.componentFontSize + font.capitalization: Font.AllUppercase + + elide: Text.ElideMiddle + //wrapMode: Text.WordWrap + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + + color: control.colorPrimary + opacity: control.enabled ? 1 : 0.66 + } + + //////////////// +} diff --git a/qml/components_generic/AndroidButtonIcon.qml b/qml/ComponentLibrary/generic/AndroidButtonIcon.qml similarity index 51% rename from qml/components_generic/AndroidButtonIcon.qml rename to qml/ComponentLibrary/generic/AndroidButtonIcon.qml index 9e693bf..4936579 100644 --- a/qml/components_generic/AndroidButtonIcon.qml +++ b/qml/ComponentLibrary/generic/AndroidButtonIcon.qml @@ -1,13 +1,11 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T -import QtQuick.Layouts 1.15 +import QtQuick +import QtQuick.Layouts +import QtQuick.Effects +import QtQuick.Controls.impl +import QtQuick.Templates as T -//import QtGraphicalEffects 1.15 // Qt5 -import Qt5Compat.GraphicalEffects // Qt6 - -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber T.Button { id: control @@ -29,19 +27,7 @@ T.Button { property int layoutDirection: Qt.LeftToRight // colors - property string primaryColor: Theme.colorPrimary - - //////////////// - - MouseArea { - id: mouseArea - anchors.fill: control - - hoverEnabled: false - propagateComposedEvents: false - - onClicked: control.clicked() - } + property color colorPrimary: Theme.colorPrimary //////////////// @@ -49,7 +35,7 @@ T.Button { implicitWidth: 80 implicitHeight: 48 - //////// + opacity: control.enabled ? 1 : 0.66 Rectangle { id: shadowarea @@ -58,42 +44,40 @@ T.Button { radius: 8 border.width: 1 color: "white" - } - DropShadow { - anchors.fill: shadowarea - cached: true - horizontalOffset: 0 - verticalOffset: 0 - radius: 4.0 - //samples: 8 - color: "#20000000" - source: shadowarea - } - - //////// - - Rectangle { // mouseBackground - width: mouseArea.pressed ? control.width*2 : 0 - height: width - radius: width - x: mouseArea.mouseX + 4 - (width / 2) - y: mouseArea.mouseY + 4 - (width / 2) - - color: "#222" - opacity: mouseArea.pressed ? 0.1 : 0 - Behavior on opacity { NumberAnimation { duration: 333 } } - Behavior on width { NumberAnimation { duration: 333 } } + layer.enabled: true + layer.effect: MultiEffect { + autoPaddingEnabled: true + shadowEnabled: true + shadowColor: "#20000000" + } } - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - x: background.x - y: background.y - width: background.width - height: background.height - radius: 8 + RippleThemed { + width: parent.width + height: parent.height + + anchor: control + pressed: control.pressed + active: enabled && (control.down || control.visualFocus) + color: Qt.rgba(Theme.colorForeground.r, Theme.colorForeground.g, Theme.colorForeground.b, 0.5) + + layer.enabled: true + layer.effect: MultiEffect { + maskEnabled: true + maskInverted: false + maskThresholdMin: 0.5 + maskSpreadAtMin: 1.0 + maskSpreadAtMax: 0.0 + maskSource: ShaderEffectSource { + sourceItem: Rectangle { + x: background.x + y: background.y + width: background.width + height: background.height + radius: 8 + } + } } } } @@ -112,7 +96,7 @@ T.Button { height: control.sourceSize source: control.source - color: control.primaryColor + color: control.colorPrimary opacity: enabled ? (control.down ? 0.8 : 1.0) : 0.33 } Text { // contentText @@ -128,8 +112,8 @@ T.Button { horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter - color: control.primaryColor - opacity: enabled ? (control.down ? 0.8 : 1.0) : 0.33 + color: control.colorPrimary + opacity: enabled ? (control.down ? 0.8 : 1.0) : 0.66 } } diff --git a/qml/components_generic/AndroidTextField.qml b/qml/ComponentLibrary/generic/AndroidTextField.qml similarity index 82% rename from qml/components_generic/AndroidTextField.qml rename to qml/ComponentLibrary/generic/AndroidTextField.qml index 0ae05d3..ef4e2b1 100644 --- a/qml/components_generic/AndroidTextField.qml +++ b/qml/ComponentLibrary/generic/AndroidTextField.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.TextField { id: control @@ -16,7 +16,6 @@ T.TextField { padding: 12 leftPadding: padding + 4 - opacity: 1 color: colorText font.pixelSize: Theme.componentFontSize verticalAlignment: Text.AlignVCenter @@ -35,12 +34,12 @@ T.TextField { property string title: "" // colors - property string colorText: Theme.colorComponentContent - property string colorPlaceholderText: Theme.colorSubText - property string colorBorder: Theme.colorSubText - property string colorBackground: Theme.colorBackground - property string colorSelection: Theme.colorPrimary - property string colorSelectedText: "white" + property color colorText: Theme.colorComponentContent + property color colorPlaceholderText: Theme.colorSubText + property color colorBorder: Theme.colorSubText + property color colorBackground: Theme.colorBackground + property color colorSelection: Theme.colorPrimary + property color colorSelectedText: "white" //////////////// @@ -64,7 +63,7 @@ T.TextField { background: Rectangle { implicitWidth: 256 - implicitHeight: 48 + implicitHeight: 46 radius: 8 color: control.colorBackground diff --git a/qml/components_generic/DataBarCompact.qml b/qml/ComponentLibrary/generic/DataBarCompact.qml similarity index 90% rename from qml/components_generic/DataBarCompact.qml rename to qml/ComponentLibrary/generic/DataBarCompact.qml index fc2157c..ef06060 100644 --- a/qml/components_generic/DataBarCompact.qml +++ b/qml/ComponentLibrary/generic/DataBarCompact.qml @@ -1,10 +1,8 @@ -import QtQuick 2.15 +import QtQuick +import QtQuick.Effects -//import QtGraphicalEffects 1.15 // Qt5 -import Qt5Compat.GraphicalEffects // Qt6 - -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber Item { id: dataBarCompact @@ -30,9 +28,9 @@ Item { property int legendContentWidth: item_legend.contentWidth // colors - property string colorText: Theme.colorText - property string colorForeground: Theme.colorPrimary - property string colorBackground: Theme.colorForeground + property color colorText: Theme.colorText + property color colorForeground: Theme.colorPrimary + property color colorBackground: Theme.colorForeground //////////////////////////////////////////////////////////////////////////// @@ -77,13 +75,20 @@ Item { color: dataBarCompact.colorBackground layer.enabled: !isDesktop - layer.effect: OpacityMask { - maskSource: Rectangle { - x: rect_bg.x - y: rect_bg.y - width: rect_bg.width - height: rect_bg.height - radius: rect_bg.radius + layer.effect: MultiEffect { + maskEnabled: true + maskInverted: false + maskThresholdMin: 0.5 + maskSpreadAtMin: 1.0 + maskSpreadAtMax: 0.0 + maskSource: ShaderEffectSource { + sourceItem: Rectangle { + x: rect_bg.x + y: rect_bg.y + width: rect_bg.width + height: rect_bg.height + radius: rect_bg.radius + } } } diff --git a/qml/components_generic/DataBarSolid.qml b/qml/ComponentLibrary/generic/DataBarSolid.qml similarity index 93% rename from qml/components_generic/DataBarSolid.qml rename to qml/ComponentLibrary/generic/DataBarSolid.qml index ec46082..19fb7e8 100644 --- a/qml/components_generic/DataBarSolid.qml +++ b/qml/ComponentLibrary/generic/DataBarSolid.qml @@ -1,10 +1,8 @@ -import QtQuick 2.15 +import QtQuick +import QtQuick.Effects -//import QtGraphicalEffects 1.15 // Qt5 -import Qt5Compat.GraphicalEffects // Qt6 - -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber Item { id: dataBarSolid @@ -30,8 +28,8 @@ Item { property int legendContentWidth: item_legend.contentWidth // colors - property string colorForeground: Theme.colorPrimary - property string colorBackground: Theme.colorForeground + property color colorForeground: Theme.colorPrimary + property color colorBackground: Theme.colorForeground //////////////////////////////////////////////////////////////////////////// @@ -75,13 +73,20 @@ Item { color: dataBarSolid.colorBackground layer.enabled: !isDesktop - layer.effect: OpacityMask { - maskSource: Rectangle { - x: rect_bg.x - y: rect_bg.y - width: rect_bg.width - height: rect_bg.height - radius: rect_bg.radius + layer.effect: MultiEffect { + maskEnabled: true + maskInverted: false + maskThresholdMin: 0.5 + maskSpreadAtMin: 1.0 + maskSpreadAtMax: 0.0 + maskSource: ShaderEffectSource { + sourceItem: Rectangle { + x: rect_bg.x + y: rect_bg.y + width: rect_bg.width + height: rect_bg.height + radius: rect_bg.radius + } } } diff --git a/qml/components_generic/IconSvg.qml b/qml/ComponentLibrary/generic/IconSvg.qml similarity index 57% rename from qml/components_generic/IconSvg.qml rename to qml/ComponentLibrary/generic/IconSvg.qml index 387db36..3ab73f5 100644 --- a/qml/components_generic/IconSvg.qml +++ b/qml/ComponentLibrary/generic/IconSvg.qml @@ -1,17 +1,16 @@ -import QtQuick 2.15 - -//import QtGraphicalEffects 1.15 // Qt5 -import Qt5Compat.GraphicalEffects // Qt6 +import QtQuick +import QtQuick.Effects Item { + id: control + implicitWidth: 32 implicitHeight: 32 property alias source: sourceImg.source - property alias color: overlayImg.color + property alias color: overlayImg.colorizationColor property alias fillMode: sourceImg.fillMode property alias asynchronous: sourceImg.asynchronous - //property alias smooth: sourceImg.smooth Image { id: sourceImg @@ -20,17 +19,15 @@ Item { visible: parent.color ? false : true sourceSize: Qt.size(width, height) fillMode: Image.PreserveAspectFit + smooth: control.smooth asynchronous: false - smooth: false } - ColorOverlay { + MultiEffect { id: overlayImg - anchors.fill: parent - - visible: parent.color ? true : false source: sourceImg - color: parent.color - cached: true + anchors.fill: sourceImg + brightness: 1.0 + colorization: 1.0 } } diff --git a/qml/components_generic/ItemBadge.qml b/qml/ComponentLibrary/generic/ItemBadge.qml similarity index 97% rename from qml/components_generic/ItemBadge.qml rename to qml/ComponentLibrary/generic/ItemBadge.qml index 876c642..705fd38 100644 --- a/qml/components_generic/ItemBadge.qml +++ b/qml/ComponentLibrary/generic/ItemBadge.qml @@ -1,6 +1,6 @@ -import QtQuick 2.15 +import QtQuick -import ThemeEngine 1.0 +import ThemeEngine Item { id: control diff --git a/qml/components_generic/ItemTag.qml b/qml/ComponentLibrary/generic/ItemTag.qml similarity index 88% rename from qml/components_generic/ItemTag.qml rename to qml/ComponentLibrary/generic/ItemTag.qml index 65c282b..8030bdf 100644 --- a/qml/components_generic/ItemTag.qml +++ b/qml/ComponentLibrary/generic/ItemTag.qml @@ -1,6 +1,6 @@ -import QtQuick 2.15 +import QtQuick -import ThemeEngine 1.0 +import ThemeEngine Rectangle { id: control @@ -14,7 +14,7 @@ Rectangle { // settings property string text: "TAG" - property string textColor: Theme.colorText + property color textColor: Theme.colorText property int textSize: Theme.componentFontSize property int textCapitalization: Font.Normal property bool textBold: false diff --git a/qml/components_generic/ItemTagButton.qml b/qml/ComponentLibrary/generic/ItemTagButton.qml similarity index 90% rename from qml/components_generic/ItemTagButton.qml rename to qml/ComponentLibrary/generic/ItemTagButton.qml index 4cdb990..68fc96e 100644 --- a/qml/components_generic/ItemTagButton.qml +++ b/qml/ComponentLibrary/generic/ItemTagButton.qml @@ -1,6 +1,6 @@ -import QtQuick 2.15 +import QtQuick -import ThemeEngine 1.0 +import ThemeEngine Rectangle { id: control @@ -12,14 +12,14 @@ Rectangle { color: backgroundColor property string text: "TAG" - property string textColor: "white" + property color textColor: "white" property int textSize: Theme.componentFontSize property url source: "qrc:/assets/icons_material/baseline-add-24px.svg" - property string sourceColor: "white" + property color sourceColor: "white" property int sourceSize: 20 - property string backgroundColor: Theme.colorPrimary + property color backgroundColor: Theme.colorPrimary signal clicked() diff --git a/qml/components_generic/MiddleSliderArrow.qml b/qml/ComponentLibrary/generic/MiddleSliderArrow.qml similarity index 88% rename from qml/components_generic/MiddleSliderArrow.qml rename to qml/ComponentLibrary/generic/MiddleSliderArrow.qml index 2221d9d..85fa470 100644 --- a/qml/components_generic/MiddleSliderArrow.qml +++ b/qml/ComponentLibrary/generic/MiddleSliderArrow.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Slider { id: control @@ -23,9 +23,8 @@ T.Slider { property int ticksCount: ((to - from) / stepSize) // colors - property string colorBg: Theme.colorForeground - property string colorFg: Theme.colorPrimary - property string colorTxt: "white" + property color colorBackground: Theme.colorForeground + property color colorForeground: Theme.colorPrimary //////////////// @@ -38,7 +37,8 @@ T.Slider { height: control.horizontal ? implicitHeight : control.availableHeight radius: 2 - color: control.colorBg + color: control.colorBackground + opacity: control.enabled ? 1 : 0.66 scale: control.horizontal && control.mirrored ? -1 : 1 clip: true @@ -61,7 +61,7 @@ T.Slider { height: control.horizontal ? 4 : Math.abs((background.height / 2) - handle.y) radius: 2 - color: control.colorFg + color: control.colorForeground } } @@ -73,6 +73,7 @@ T.Slider { width: 16 height: 12 rotation: control.horizontal ? 0 : -90 + opacity: control.enabled ? 1 : 0.8 color: control.pressed ? Theme.colorSecondary : Theme.colorPrimary Rectangle { diff --git a/qml/components_generic/MiddleSliderValueSolid.qml b/qml/ComponentLibrary/generic/MiddleSliderValueSolid.qml similarity index 85% rename from qml/components_generic/MiddleSliderValueSolid.qml rename to qml/ComponentLibrary/generic/MiddleSliderValueSolid.qml index 6c3845f..55bd9c4 100644 --- a/qml/components_generic/MiddleSliderValueSolid.qml +++ b/qml/ComponentLibrary/generic/MiddleSliderValueSolid.qml @@ -1,9 +1,9 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber T.Slider { id: control @@ -22,9 +22,9 @@ T.Slider { property bool kshort: false // colors - property string colorBg: Theme.colorForeground - property string colorFg: Theme.colorPrimary - property string colorTxt: "white" + property color colorBackground: Theme.colorForeground + property color colorForeground: Theme.colorPrimary + property color colorText: "white" //////////////// @@ -37,7 +37,7 @@ T.Slider { height: control.horizontal ? implicitHeight : control.availableHeight radius: hhh - color: control.colorBg + color: control.colorBackground scale: control.horizontal && control.mirrored ? -1 : 1 Rectangle { @@ -47,7 +47,7 @@ T.Slider { height: !control.horizontal ? Math.abs((control.height / 2) - handle.y - ((control.visualPosition > 0.5) ? handle.height : 0)) : hhh radius: hhh - color: control.colorFg + color: control.colorForeground } } @@ -62,8 +62,8 @@ T.Slider { width: control.horizontal ? t1.contentWidth + 16 : hhh height: hhh radius: hhh - color: control.colorFg - border.color: control.colorFg + color: control.colorForeground + border.color: control.colorForeground Text { id: t1 @@ -82,7 +82,7 @@ T.Slider { font.pixelSize: isDesktop ? 12 : 13 fontSizeMode: Text.Fit minimumPixelSize: 10 - color: control.colorTxt + color: control.colorText horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } diff --git a/qml/components_generic/ProgressArc.qml b/qml/ComponentLibrary/generic/ProgressArc.qml similarity index 95% rename from qml/components_generic/ProgressArc.qml rename to qml/ComponentLibrary/generic/ProgressArc.qml index 11ccf64..bdbda46 100644 --- a/qml/components_generic/ProgressArc.qml +++ b/qml/ComponentLibrary/generic/ProgressArc.qml @@ -1,6 +1,6 @@ -import QtQuick 2.15 +import QtQuick -import ThemeEngine 1.0 +import ThemeEngine // Based on the ProgressCircle component from ByteBau (Jörn Buchholz) @bytebau.com @@ -17,12 +17,12 @@ Item { property real arcSpan: 270 // arc span (in degree) property real arcWidth: 16 // width of the arc (in pixel) property real arcOpacity: 1 - property string arcColor: Theme.colorPrimary + property color arcColor: Theme.colorPrimary property string arcCap: "butt" // butt, round or square property bool background: true // draw a background arc (full arc span) property real backgroundOpacity: 1 - property string backgroundColor: Theme.colorForeground + property color backgroundColor: Theme.colorForeground property alias animation: animationArcValue.enabled property int animationDuration: 333 diff --git a/qml/components_generic/ProgressCircle.qml b/qml/ComponentLibrary/generic/ProgressCircle.qml similarity index 96% rename from qml/components_generic/ProgressCircle.qml rename to qml/ComponentLibrary/generic/ProgressCircle.qml index 9177b08..bd85216 100644 --- a/qml/components_generic/ProgressCircle.qml +++ b/qml/ComponentLibrary/generic/ProgressCircle.qml @@ -1,6 +1,6 @@ -import QtQuick 2.15 +import QtQuick -import ThemeEngine 1.0 +import ThemeEngine // Based on the ProgressCircle component from ByteBau (Jörn Buchholz) @bytebau.com @@ -18,11 +18,11 @@ Item { property real arcOffset: 0 // rotation (0 means starts at top center) property real arcWidth: 16 // width of the arc property real arcOpacity: 1 - property string arcColor: Theme.colorPrimary + property color arcColor: Theme.colorPrimary property bool background: true // a full circle as a background of the arc property real backgroundOpacity: 1 - property string backgroundColor: Theme.colorForeground + property color backgroundColor: Theme.colorForeground property alias animationBegin: animationArcBegin.enabled property alias animationEnd: animationArcEnd.enabled diff --git a/qml/components_generic/RangeSliderArrow.qml b/qml/ComponentLibrary/generic/RangeSliderArrow.qml similarity index 90% rename from qml/components_generic/RangeSliderArrow.qml rename to qml/ComponentLibrary/generic/RangeSliderArrow.qml index e99ad30..81e5430 100644 --- a/qml/components_generic/RangeSliderArrow.qml +++ b/qml/ComponentLibrary/generic/RangeSliderArrow.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.RangeSlider { id: control @@ -26,9 +26,8 @@ T.RangeSlider { property int ticksCount: ((to - from) / stepSize) // colors - property string colorBg: Theme.colorForeground - property string colorFg: Theme.colorPrimary - property string colorTxt: "white" + property color colorBackground: Theme.colorForeground + property color colorForeground: Theme.colorPrimary //////////////// @@ -41,7 +40,8 @@ T.RangeSlider { height: control.horizontal ? implicitHeight : control.availableHeight radius: 2 - color: control.colorBg + color: control.colorBackground + opacity: control.enabled ? 1 : 0.66 scale: control.horizontal && control.mirrored ? -1 : 1 clip: true @@ -64,7 +64,7 @@ T.RangeSlider { height: control.horizontal ? 4 : control.second.position * parent.height - control.first.position * parent.height radius: 2 - color: control.colorFg + color: control.colorForeground } } @@ -76,6 +76,7 @@ T.RangeSlider { width: 16 height: 12 rotation: control.horizontal ? 0 : -90 + opacity: control.enabled ? 1 : 0.8 color: first.pressed ? Theme.colorSecondary : Theme.colorPrimary Rectangle { @@ -98,6 +99,7 @@ T.RangeSlider { width: 16 height: 12 rotation: control.horizontal ? 0 : -90 + opacity: control.enabled ? 1 : 0.8 color: second.pressed ? Theme.colorSecondary : Theme.colorPrimary Rectangle { diff --git a/qml/components_generic/RangeSliderValue.qml b/qml/ComponentLibrary/generic/RangeSliderValue.qml similarity index 85% rename from qml/components_generic/RangeSliderValue.qml rename to qml/ComponentLibrary/generic/RangeSliderValue.qml index addb067..4b34860 100644 --- a/qml/components_generic/RangeSliderValue.qml +++ b/qml/ComponentLibrary/generic/RangeSliderValue.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine import "qrc:/js/UtilsNumber.js" as UtilsNumber T.RangeSlider { @@ -20,9 +20,9 @@ T.RangeSlider { property string unit // colors - property string colorBg: Theme.colorComponent - property string colorFg: Theme.colorPrimary - property string colorTxt: "white" + property color colorBackground: Theme.colorComponent + property color colorForeground: Theme.colorPrimary + property color colorText: "white" //////////////////////////////////////////////////////////////////////////// @@ -33,14 +33,14 @@ T.RangeSlider { height: implicitHeight radius: 2 - color: colorBg + color: colorBackground opacity: 0.9 Rectangle { x: (control.first.visualPosition * parent.width) width: (control.second.visualPosition * parent.width) - x height: parent.height - color: colorFg + color: colorForeground radius: 2 } } @@ -55,8 +55,8 @@ T.RangeSlider { width: t1.width + 16 radius: 6 - color: colorFg - border.color: colorFg + color: colorForeground + border.color: colorForeground opacity: first.pressed ? 0.9 : 1 Text { @@ -73,7 +73,7 @@ T.RangeSlider { } textFormat: Text.PlainText font.pixelSize: 14 - color: colorTxt + color: colorText } } @@ -87,8 +87,8 @@ T.RangeSlider { width: t2.width + 16 radius: 6 - color: colorFg - border.color: colorFg + color: colorForeground + border.color: colorForeground opacity: second.pressed ? 0.9 : 1 Text { @@ -105,7 +105,7 @@ T.RangeSlider { } textFormat: Text.PlainText font.pixelSize: 14 - color: colorTxt + color: colorText } } diff --git a/qml/components_generic/RangeSliderValueSolid.qml b/qml/ComponentLibrary/generic/RangeSliderValueSolid.qml similarity index 87% rename from qml/components_generic/RangeSliderValueSolid.qml rename to qml/ComponentLibrary/generic/RangeSliderValueSolid.qml index 25163ce..17355cd 100644 --- a/qml/components_generic/RangeSliderValueSolid.qml +++ b/qml/ComponentLibrary/generic/RangeSliderValueSolid.qml @@ -1,9 +1,9 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber T.RangeSlider { id: control @@ -24,9 +24,9 @@ T.RangeSlider { property bool kshort: false // colors - property string colorBg: Theme.colorForeground - property string colorFg: Theme.colorPrimary - property string colorTxt: "white" + property color colorBackground: Theme.colorForeground + property color colorForeground: Theme.colorPrimary + property color colorText: "white" //////////////// @@ -39,7 +39,7 @@ T.RangeSlider { height: control.horizontal ? implicitHeight : control.availableHeight radius: hhh - color: control.colorBg + color: control.colorBackground scale: control.horizontal && control.mirrored ? -1 : 1 Rectangle { @@ -49,7 +49,7 @@ T.RangeSlider { height: control.horizontal ? hhh : control.first.handle.y - control.second.handle.y + control.second.handle.height*0.66 radius: hhh - color: control.colorFg + color: control.colorForeground } } @@ -64,8 +64,8 @@ T.RangeSlider { width: control.horizontal ? t1.contentWidth + 16 : hhh height: hhh radius: hhh - color: control.colorFg - border.color: control.colorFg + color: control.colorForeground + border.color: control.colorForeground Text { id: t1 @@ -83,7 +83,7 @@ T.RangeSlider { font.pixelSize: isDesktop ? 12 : 13 fontSizeMode: Text.Fit minimumPixelSize: 10 - color: control.colorTxt + color: control.colorText horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } @@ -100,8 +100,8 @@ T.RangeSlider { width: control.horizontal ? t2.contentWidth + 16 : hhh height: hhh radius: hhh - color: control.colorFg - border.color: control.colorFg + color: control.colorForeground + border.color: control.colorForeground Text { id: t2 @@ -119,7 +119,7 @@ T.RangeSlider { font.pixelSize: isDesktop ? 12 : 13 fontSizeMode: Text.Fit minimumPixelSize: 10 - color: control.colorTxt + color: control.colorText horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } diff --git a/qml/components_generic/RoundButtonIcon.qml b/qml/ComponentLibrary/generic/RoundButtonIcon.qml similarity index 89% rename from qml/components_generic/RoundButtonIcon.qml rename to qml/ComponentLibrary/generic/RoundButtonIcon.qml index d8f33fd..9088af7 100644 --- a/qml/components_generic/RoundButtonIcon.qml +++ b/qml/ComponentLibrary/generic/RoundButtonIcon.qml @@ -1,9 +1,9 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber T.Button { id: control @@ -13,6 +13,7 @@ T.Button { focusPolicy: Qt.NoFocus + // icon property url source property int sourceSize: UtilsNumber.alignTo(height * 0.666, 2) property int sourceRotation: 0 @@ -23,10 +24,10 @@ T.Button { property string highlightMode: "circle" // available: border, circle, color, both (circle+color), off // colors - property string iconColor: Theme.colorIcon - property string highlightColor: Theme.colorPrimary - property string borderColor: Theme.colorComponentBorder - property string backgroundColor: Theme.colorComponent + property color iconColor: Theme.colorIcon + property color highlightColor: Theme.colorPrimary + property color borderColor: Theme.colorComponentBorder + property color backgroundColor: Theme.colorComponent // animation property string animation // available: rotate, fade @@ -80,7 +81,7 @@ T.Button { height: control.sourceSize rotation: control.sourceRotation - opacity: control.enabled ? 1.0 : 0.33 + opacity: control.enabled ? 1 : 0.66 Behavior on opacity { NumberAnimation { duration: 333 } } source: control.source diff --git a/qml/components_generic/RoundButtonText.qml b/qml/ComponentLibrary/generic/RoundButtonText.qml similarity index 85% rename from qml/components_generic/RoundButtonText.qml rename to qml/ComponentLibrary/generic/RoundButtonText.qml index b1b00c2..e17fee1 100644 --- a/qml/components_generic/RoundButtonText.qml +++ b/qml/ComponentLibrary/generic/RoundButtonText.qml @@ -1,9 +1,9 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber T.Button { id: control @@ -21,10 +21,10 @@ T.Button { property string highlightMode: "circle" // available: border, circle, color, both (circle+color), off // colors - property string textColor: Theme.colorText - property string highlightColor: Theme.colorPrimary - property string borderColor: Theme.colorComponentBorder - property string backgroundColor: Theme.colorComponent + property color textColor: Theme.colorText + property color highlightColor: Theme.colorPrimary + property color borderColor: Theme.colorComponentBorder + property color backgroundColor: Theme.colorComponent // tooltip property string tooltipText @@ -80,7 +80,7 @@ T.Button { return control.textColor } - opacity: control.enabled ? 1.0 : 0.33 + opacity: control.enabled ? 1 : 0.66 Behavior on opacity { NumberAnimation { duration: 333 } } } diff --git a/qml/components_generic/SelectorGrid.qml b/qml/ComponentLibrary/generic/SelectorGrid.qml similarity index 95% rename from qml/components_generic/SelectorGrid.qml rename to qml/ComponentLibrary/generic/SelectorGrid.qml index 6dfd5e7..98f279b 100644 --- a/qml/components_generic/SelectorGrid.qml +++ b/qml/ComponentLibrary/generic/SelectorGrid.qml @@ -1,6 +1,6 @@ -import QtQuick 2.15 +import QtQuick -import ThemeEngine 1.0 +import ThemeEngine Item { id: selectorGrid @@ -11,7 +11,7 @@ Item { width: parent.width height: (selectorGrid.btnRows * btnHeight) + (selectorGrid.btnRows * contentPositioner.spacing) - opacity: enabled ? 1 : 0.4 + opacity: enabled ? 1 : 0.66 property int btnCols: 4 property int btnRows: 3 diff --git a/qml/components_generic/SelectorGridItem.qml b/qml/ComponentLibrary/generic/SelectorGridItem.qml similarity index 87% rename from qml/components_generic/SelectorGridItem.qml rename to qml/ComponentLibrary/generic/SelectorGridItem.qml index 006ae21..7e6ca29 100644 --- a/qml/components_generic/SelectorGridItem.qml +++ b/qml/ComponentLibrary/generic/SelectorGridItem.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Button { id: control @@ -23,9 +23,9 @@ T.Button { property int sourceSize: 32 // colors - property string colorContent: Theme.colorComponentText - property string colorContentHighlight: Theme.colorComponentContent - property string colorBackgroundHighlight: Theme.colorComponentDown + property color colorContent: Theme.colorComponentText + property color colorContentHighlight: Theme.colorComponentContent + property color colorBackgroundHighlight: Theme.colorComponentDown //////////////// diff --git a/qml/components_generic/SelectorMenu.qml b/qml/ComponentLibrary/generic/SelectorMenu.qml similarity index 87% rename from qml/components_generic/SelectorMenu.qml rename to qml/ComponentLibrary/generic/SelectorMenu.qml index a766240..55c38bb 100644 --- a/qml/components_generic/SelectorMenu.qml +++ b/qml/ComponentLibrary/generic/SelectorMenu.qml @@ -1,6 +1,6 @@ -import QtQuick 2.15 +import QtQuick -import ThemeEngine 1.0 +import ThemeEngine Item { id: selectorMenu @@ -8,12 +8,13 @@ Item { implicitHeight: 32 width: contentRow.width - opacity: enabled ? 1 : 0.4 + + opacity: enabled ? 1 : 0.66 property var model: null // colors - property string colorBackground: Theme.colorComponentBackground + property color colorBackground: Theme.colorComponentBackground // states property int currentSelection: 1 diff --git a/qml/components_generic/SelectorMenuItem.qml b/qml/ComponentLibrary/generic/SelectorMenuItem.qml similarity index 86% rename from qml/components_generic/SelectorMenuItem.qml rename to qml/ComponentLibrary/generic/SelectorMenuItem.qml index 4e4f3b9..7b07695 100644 --- a/qml/components_generic/SelectorMenuItem.qml +++ b/qml/ComponentLibrary/generic/SelectorMenuItem.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Button { id: control @@ -23,9 +23,9 @@ T.Button { property int sourceSize: 32 // colors - property string colorContent: Theme.colorComponentText - property string colorContentHighlight: "white" - property string colorBackgroundHighlight: Theme.colorPrimary + property color colorContent: Theme.colorComponentText + property color colorContentHighlight: "white" + property color colorBackgroundHighlight: Theme.colorPrimary //////////////// diff --git a/qml/components_generic/SliderArrow.qml b/qml/ComponentLibrary/generic/SliderArrow.qml similarity index 88% rename from qml/components_generic/SliderArrow.qml rename to qml/ComponentLibrary/generic/SliderArrow.qml index 9c60fd0..54b6289 100644 --- a/qml/components_generic/SliderArrow.qml +++ b/qml/ComponentLibrary/generic/SliderArrow.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Slider { id: control @@ -23,9 +23,8 @@ T.Slider { property int ticksCount: ((to - from) / stepSize) // colors - property string colorBg: Theme.colorForeground - property string colorFg: Theme.colorPrimary - property string colorTxt: "white" + property color colorBackground: Theme.colorForeground + property color colorForeground: Theme.colorPrimary //////////////// @@ -38,7 +37,8 @@ T.Slider { height: control.horizontal ? implicitHeight : control.availableHeight radius: 2 - color: control.colorBg + color: control.colorBackground + opacity: control.enabled ? 1 : 0.66 scale: control.horizontal && control.mirrored ? -1 : 1 clip: true @@ -61,7 +61,7 @@ T.Slider { height: control.horizontal ? 4 : control.position * parent.height radius: 2 - color: control.colorFg + color: control.colorForeground } } @@ -73,6 +73,7 @@ T.Slider { width: 16 height: 12 rotation: control.horizontal ? 0 : -90 + opacity: control.enabled ? 1 : 0.8 color: control.pressed ? Theme.colorSecondary : Theme.colorPrimary Rectangle { diff --git a/qml/components_generic/SliderValueSolid.qml b/qml/ComponentLibrary/generic/SliderValueSolid.qml similarity index 84% rename from qml/components_generic/SliderValueSolid.qml rename to qml/ComponentLibrary/generic/SliderValueSolid.qml index 13ea504..065bdca 100644 --- a/qml/components_generic/SliderValueSolid.qml +++ b/qml/ComponentLibrary/generic/SliderValueSolid.qml @@ -1,9 +1,9 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber T.Slider { id: control @@ -22,9 +22,9 @@ T.Slider { property bool kshort: false // colors - property string colorBg: Theme.colorForeground - property string colorFg: Theme.colorPrimary - property string colorTxt: "white" + property color colorBackground: Theme.colorForeground + property color colorForeground: Theme.colorPrimary + property color colorText: "white" //////////////// @@ -37,7 +37,7 @@ T.Slider { height: control.horizontal ? implicitHeight : control.availableHeight radius: hhh - color: control.colorBg + color: control.colorBackground scale: control.horizontal && control.mirrored ? -1 : 1 Rectangle { @@ -46,7 +46,7 @@ T.Slider { height: control.horizontal ? hhh : parent.height - handle.y radius: hhh - color: control.colorFg + color: control.colorForeground } } @@ -61,8 +61,8 @@ T.Slider { width: control.horizontal ? t1.contentWidth + 16 : hhh height: hhh radius: hhh - color: control.colorFg - border.color: control.colorFg + color: control.colorForeground + border.color: control.colorForeground Text { id: t1 @@ -81,7 +81,7 @@ T.Slider { font.pixelSize: isDesktop ? 12 : 13 fontSizeMode: Text.Fit minimumPixelSize: 10 - color: control.colorTxt + color: control.colorText horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } diff --git a/qml/components_generic/ToolTipFlat.qml b/qml/ComponentLibrary/generic/ToolTipFlat.qml similarity index 95% rename from qml/components_generic/ToolTipFlat.qml rename to qml/ComponentLibrary/generic/ToolTipFlat.qml index 7604326..3fa5e80 100644 --- a/qml/components_generic/ToolTipFlat.qml +++ b/qml/ComponentLibrary/generic/ToolTipFlat.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Popup { id: control @@ -33,8 +33,8 @@ T.Popup { property string tooltipPosition // colors - property string textColor: Theme.colorText - property string backgroundColor: Theme.colorComponent + property color textColor: Theme.colorText + property color backgroundColor: Theme.colorComponent onVisibleChanged: { if (!visible) return diff --git a/qml/components_generic/FrameBox.qml b/qml/ComponentLibrary/layouts/FrameBox.qml similarity index 87% rename from qml/components_generic/FrameBox.qml rename to qml/ComponentLibrary/layouts/FrameBox.qml index 0c5d386..6e3a6fe 100644 --- a/qml/components_generic/FrameBox.qml +++ b/qml/ComponentLibrary/layouts/FrameBox.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Frame { id: control diff --git a/qml/components_generic/ActionMenuItem.qml b/qml/ComponentLibrary/menus/ActionMenuItem.qml similarity index 74% rename from qml/components_generic/ActionMenuItem.qml rename to qml/ComponentLibrary/menus/ActionMenuItem.qml index 9449c91..b92f6aa 100644 --- a/qml/components_generic/ActionMenuItem.qml +++ b/qml/ComponentLibrary/menus/ActionMenuItem.qml @@ -1,12 +1,10 @@ -import QtQuick 2.15 -import QtQuick.Layouts 1.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Effects +import QtQuick.Layouts +import QtQuick.Controls.impl +import QtQuick.Templates as T -//import QtGraphicalEffects 1.15 // Qt5 -import Qt5Compat.GraphicalEffects // Qt6 - -import ThemeEngine 1.0 +import ThemeEngine T.Button { id: control @@ -21,7 +19,7 @@ T.Button { rightPadding: Theme.componentMargin leftPadding: Theme.componentMargin - height: 36 + height: Theme.componentHeight focusPolicy: Qt.NoFocus @@ -34,7 +32,7 @@ T.Button { //////////////// background: Item { - implicitHeight: 36 + implicitHeight: Theme.componentHeight Rectangle { anchors.fill: parent @@ -49,20 +47,25 @@ T.Button { RippleThemed { anchors.fill: parent - clip: visible + pressed: control.down active: enabled && control.down color: Qt.rgba(Theme.colorForeground.r, Theme.colorForeground.g, Theme.colorForeground.b, 0.66) } layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - x: background.x - y: background.y - width: background.width - height: background.height - radius: Theme.componentRadius + layer.effect: MultiEffect { + maskEnabled: true + maskInverted: false + maskThresholdMin: 0.5 + maskSpreadAtMin: 1.0 + maskSpreadAtMax: 0.0 + maskSource: ShaderEffectSource { + sourceItem: Rectangle { + width: control.width + height: control.height + radius: Theme.componentRadius + } } } } @@ -70,7 +73,7 @@ T.Button { //////////////// contentItem: RowLayout { - spacing: Theme.componentMargin/2 + spacing: (Theme.componentMargin / 1) layoutDirection: control.layoutDirection IconSvg { diff --git a/qml/components_generic/ActionMenuSeparator.qml b/qml/ComponentLibrary/menus/ActionMenuSeparator.qml similarity index 82% rename from qml/components_generic/ActionMenuSeparator.qml rename to qml/ComponentLibrary/menus/ActionMenuSeparator.qml index 1aebd5d..7102b27 100644 --- a/qml/components_generic/ActionMenuSeparator.qml +++ b/qml/ComponentLibrary/menus/ActionMenuSeparator.qml @@ -1,18 +1,20 @@ -import QtQuick 2.15 +import QtQuick -import ThemeEngine 1.0 +import ThemeEngine Item { // action menu separator anchors.left: parent.left anchors.leftMargin: Theme.componentMargin - 4 anchors.right: parent.right anchors.rightMargin: Theme.componentMargin - 4 - height: Theme.componentMargin - 4 + 1 + + height: (Theme.componentMargin / 2) + 1 Rectangle { anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter + height: 1 color: Theme.colorSeparator } diff --git a/qml/ComponentLibrary/menus/ActionMenu_bottom.qml b/qml/ComponentLibrary/menus/ActionMenu_bottom.qml new file mode 100644 index 0000000..85f448d --- /dev/null +++ b/qml/ComponentLibrary/menus/ActionMenu_bottom.qml @@ -0,0 +1,126 @@ +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls.impl +import QtQuick.Templates as T +import Qt.labs.qmlmodels + +import ThemeEngine + +T.Popup { + id: actionMenu + + width: parent.width + height: contentColumn.height + + padding: 0 + margins: 0 + + modal: true + dim: true + focus: isMobile + closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutside + parent: Overlay.overlay + + property string titleTxt + property string titleSrc // disabled + + property var model: null + + property int layoutDirection: Qt.LeftToRight // disabled + + signal menuSelected(var index) + + //////////////// + + y: appWindow.height + + 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 } + } + + //////////////// + + background: Rectangle { + color: Theme.colorComponentBackground + Rectangle { + width: parent.width + height: Theme.componentBorderWidth + color: Theme.colorSeparator + } + } + + //////////////// + + contentItem: Item { + Column { + id: contentColumn + width: parent.width + + topPadding: 12 + bottomPadding: 8 + spacing: 4 + + //// + + Text { // title + anchors.left: parent.left + anchors.leftMargin: Theme.componentMargin + 4 + anchors.right: parent.right + anchors.rightMargin: Theme.componentMargin + + height: Theme.componentHeight + visible: actionMenu.titleTxt + + text: actionMenu.titleTxt + textFormat: Text.PlainText + + color: Theme.colorSubText + font.bold: false + font.pixelSize: Theme.fontSizeContentVeryBig + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + //// + + Repeater { + model: actionMenu.model + delegate: DelegateChooser { + id: chooser + role: "t" + DelegateChoice { + roleValue: "sep" + ActionMenuSeparator { + width: actionMenu.width + } + } + DelegateChoice { + roleValue: "itm" + ActionMenuItem { + width: actionMenu.width + layoutDirection: actionMenu.layoutDirection + index: idx + text: txt + source: src + onClicked: { + actionMenu.menuSelected(idx) + actionMenu.close() + } + } + } + } + } + + //// + } + } + + //////////////// +} diff --git a/qml/ComponentLibrary/menus/ActionMenu_floating.qml b/qml/ComponentLibrary/menus/ActionMenu_floating.qml new file mode 100644 index 0000000..d92ac2f --- /dev/null +++ b/qml/ComponentLibrary/menus/ActionMenu_floating.qml @@ -0,0 +1,116 @@ +import QtQuick +import QtQuick.Effects +import QtQuick.Controls.impl +import QtQuick.Templates as T +import Qt.labs.qmlmodels + +import ThemeEngine + +T.Popup { + id: actionMenu + + width: 200 + height: contentColumn.height + + padding: 0 + margins: 0 + + modal: true + dim: false + focus: isMobile + closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutside + //parent: Overlay.overlay + + property string titleTxt + property string titleSrc + + property var model: null + + property int layoutDirection: Qt.LeftToRight + + signal menuSelected(var index) + + //////////////// + + enter: Transition { NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 133; } } + exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 133; } } + + //////////////// + + background: Rectangle { + color: Theme.colorComponentBackground + radius: Theme.componentRadius + border.color: Theme.colorSeparator + border.width: Theme.componentBorderWidth + + layer.enabled: true + layer.effect: MultiEffect { + autoPaddingEnabled: true + shadowEnabled: true + shadowColor: "#44000000" + } + } + + //////////////// + + contentItem: Item { + Column { + id: contentColumn + width: parent.width + + topPadding: 10 + bottomPadding: 10 + spacing: 2 + + //// + + ActionMenuItem { + width: actionMenu.width + visible: actionMenu.titleTxt + text: actionMenu.titleTxt + source: actionMenu.titleSrc + opacity: 0.8 + layoutDirection: actionMenu.layoutDirection + onClicked: actionMenu.close() + } + ActionMenuSeparator { + width: actionMenu.width + visible: actionMenu.titleTxt + opacity: 0.8 + } + + //// + + Repeater { + model: actionMenu.model + delegate: DelegateChooser { + role: "t" + DelegateChoice { + roleValue: "sep" + ActionMenuSeparator { + width: actionMenu.width + } + } + DelegateChoice { + roleValue: "itm" + ActionMenuItem { + width: actionMenu.width + index: idx + text: txt + source: src + layoutDirection: actionMenu.layoutDirection + onClicked: { + actionMenu.menuSelected(idx) + actionMenu.close() + } + } + } + } + } + + //// + } + } + + //////////////// +} diff --git a/qml/components_generic/DesktopHeaderItem.qml b/qml/ComponentLibrary/menus/DesktopHeaderItem.qml similarity index 89% rename from qml/components_generic/DesktopHeaderItem.qml rename to qml/ComponentLibrary/menus/DesktopHeaderItem.qml index f66218a..a430859 100644 --- a/qml/components_generic/DesktopHeaderItem.qml +++ b/qml/ComponentLibrary/menus/DesktopHeaderItem.qml @@ -1,9 +1,9 @@ -import QtQuick 2.15 -import QtQuick.Layouts 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Button { id: control @@ -22,8 +22,8 @@ T.Button { property string highlightMode: "background" // available: background, indicator, content // colors - property string colorContent: Theme.colorHeaderContent - property string colorHighlight: Theme.colorHeaderHighlight + property color colorContent: Theme.colorHeaderContent + property color colorHighlight: Theme.colorHeaderHighlight //////////////////////////////////////////////////////////////////////////// @@ -75,7 +75,7 @@ T.Button { source: control.source color: (!control.highlighted && control.highlightMode === "content") ? control.colorHighlight : control.colorContent - opacity: control.enabled ? 1.0 : 0.33 + opacity: control.enabled ? 1 : 0.66 } Text { diff --git a/qml/components_generic/DesktopSidebarItem.qml b/qml/ComponentLibrary/menus/DesktopSidebarItem.qml similarity index 92% rename from qml/components_generic/DesktopSidebarItem.qml rename to qml/ComponentLibrary/menus/DesktopSidebarItem.qml index c58be15..1f2ebeb 100644 --- a/qml/components_generic/DesktopSidebarItem.qml +++ b/qml/ComponentLibrary/menus/DesktopSidebarItem.qml @@ -1,10 +1,10 @@ -import QtQuick 2.15 -import QtQuick.Layouts 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber T.Button { id: control @@ -23,8 +23,8 @@ T.Button { property string highlightMode: "background" // available: background, indicator, circle, content // colors - property string colorContent: Theme.colorSidebarContent - property string colorHighlight: Theme.colorSidebarHighlight + property color colorContent: Theme.colorSidebarContent + property color colorHighlight: Theme.colorSidebarHighlight // indicator property bool indicatorVisible: false @@ -88,7 +88,7 @@ T.Button { source: control.source color: (!control.highlighted && control.highlightMode === "content") ? control.colorHighlight : control.colorContent - opacity: control.enabled ? 1.0 : 0.33 + opacity: control.enabled ? 1 : 0.66 Item { id: contentIndicator diff --git a/qml/components_generic/DrawerButton.qml b/qml/ComponentLibrary/menus/DrawerButton.qml similarity index 80% rename from qml/components_generic/DrawerButton.qml rename to qml/ComponentLibrary/menus/DrawerButton.qml index 0fff771..671962c 100644 --- a/qml/components_generic/DrawerButton.qml +++ b/qml/ComponentLibrary/menus/DrawerButton.qml @@ -1,13 +1,11 @@ import QtQuick +import QtQuick.Effects import QtQuick.Layouts import QtQuick.Templates as T import QtQuick.Controls.impl import QtQuick.Controls.Material import QtQuick.Controls.Material.impl -//import QtGraphicalEffects 1.15 // Qt5 -import Qt5Compat.GraphicalEffects // Qt6 - import ThemeEngine T.ItemDelegate { @@ -21,15 +19,16 @@ T.ItemDelegate { verticalPadding: 0 property string source - property string iconColor: Theme.colorIcon property int sourceSize: 24 + property color sourceColor: Theme.colorIcon + + //property string text + property int textSize: 13 + property color textColor: Theme.colorText property bool iconAnimated: false property string iconAnimation // fade or rotate - property string textColor: Theme.colorText - property int textSize: 13 - //////////////// background: Item { @@ -51,17 +50,23 @@ T.ItemDelegate { } layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - x: background.x - y: background.y - width: background.width - height: background.height - radius: Theme.componentRadius + layer.effect: MultiEffect { + maskEnabled: true + maskInverted: false + maskThresholdMin: 0.5 + maskSpreadAtMin: 1.0 + maskSpreadAtMax: 0.0 + maskSource: ShaderEffectSource { + sourceItem: Rectangle { + x: background.x + y: background.y + width: background.width + height: background.height + radius: Theme.componentRadius + } } } } - } //////////////// @@ -72,7 +77,7 @@ T.ItemDelegate { anchors.right: parent.right anchors.rightMargin: screenPaddingRight + Theme.componentMargin / 2 - opacity: control.enabled ? 1 : 0.4 + opacity: control.enabled ? 1 : 0.66 Item { Layout.preferredWidth: Theme.componentHeightL - screenPaddingLeft - Theme.componentMargin @@ -87,7 +92,7 @@ T.ItemDelegate { width: control.sourceSize height: control.sourceSize - color: control.iconColor + color: control.sourceColor source: control.source NumberAnimation on rotation { // rotate animation // icon only diff --git a/qml/components_generic/DrawerItem.qml b/qml/ComponentLibrary/menus/DrawerItem.qml similarity index 93% rename from qml/components_generic/DrawerItem.qml rename to qml/ComponentLibrary/menus/DrawerItem.qml index f9413a1..aa02f5a 100644 --- a/qml/components_generic/DrawerItem.qml +++ b/qml/ComponentLibrary/menus/DrawerItem.qml @@ -18,11 +18,12 @@ T.ItemDelegate { verticalPadding: 0 property string source - property string sourceColor: Theme.colorIcon property int sourceSize: 24 + property color sourceColor: Theme.colorIcon - property string textColor: Theme.colorText + //property string text property int textSize: 13 + property color textColor: Theme.colorText //////////////// @@ -51,7 +52,7 @@ T.ItemDelegate { anchors.right: parent.right anchors.rightMargin: screenPaddingRight + Theme.componentMargin / 2 - opacity: control.enabled ? 1 : 0.4 + opacity: control.enabled ? 1 : 0.66 Item { Layout.preferredWidth: Theme.componentHeightL - screenPaddingLeft - Theme.componentMargin diff --git a/qml/components_generic/ListItem.qml b/qml/ComponentLibrary/menus/ListItem.qml similarity index 97% rename from qml/components_generic/ListItem.qml rename to qml/ComponentLibrary/menus/ListItem.qml index f94aab2..0877b1c 100644 --- a/qml/components_generic/ListItem.qml +++ b/qml/ComponentLibrary/menus/ListItem.qml @@ -22,7 +22,7 @@ T.ItemDelegate { property int sourceSize: 32 //property string text - property string textColor: Theme.colorText + property color textColor: Theme.colorText property int textSize: Theme.fontSizeContent //////////////// diff --git a/qml/components_generic/ListItemClickable.qml b/qml/ComponentLibrary/menus/ListItemClickable.qml similarity index 95% rename from qml/components_generic/ListItemClickable.qml rename to qml/ComponentLibrary/menus/ListItemClickable.qml index 6f225ec..8fd5cbd 100644 --- a/qml/components_generic/ListItemClickable.qml +++ b/qml/ComponentLibrary/menus/ListItemClickable.qml @@ -20,15 +20,15 @@ T.ItemDelegate { verticalPadding: 0 property string source - property string sourceColor: Theme.colorIcon + property color sourceColor: Theme.colorIcon property int sourceSize: 32 //property string text - property string textColor: Theme.colorText + property color textColor: Theme.colorText property int textSize: Theme.fontSizeContent property string indicatorSource - property string indicatorColor: Theme.colorIcon + property color indicatorColor: Theme.colorIcon property int indicatorSize: 20 //////////////// diff --git a/qml/components_generic/ListSeparator.qml b/qml/ComponentLibrary/menus/ListSeparator.qml similarity index 100% rename from qml/components_generic/ListSeparator.qml rename to qml/ComponentLibrary/menus/ListSeparator.qml diff --git a/qml/components_generic/ListSeparatorPadded.qml b/qml/ComponentLibrary/menus/ListSeparatorPadded.qml similarity index 100% rename from qml/components_generic/ListSeparatorPadded.qml rename to qml/ComponentLibrary/menus/ListSeparatorPadded.qml diff --git a/qml/components_generic/ListTitle.qml b/qml/ComponentLibrary/menus/ListTitle.qml similarity index 84% rename from qml/components_generic/ListTitle.qml rename to qml/ComponentLibrary/menus/ListTitle.qml index 90f3157..fb1e210 100644 --- a/qml/components_generic/ListTitle.qml +++ b/qml/ComponentLibrary/menus/ListTitle.qml @@ -1,6 +1,6 @@ import QtQuick -import ThemeEngine 1.0 +import ThemeEngine Rectangle { id: control @@ -14,21 +14,18 @@ Rectangle { radius: singleColumn ? 0 : Theme.componentRadius z: 2 - color: backgroundColor + color: Theme.colorForeground border.width: singleColumn ? 0 : Theme.componentBorderWidth - border.color: borderColor + border.color: Theme.colorSeparator property string source - property string sourceColor: Theme.colorIcon property int sourceSize: 24 + property color sourceColor: Theme.colorIcon property string text: "title" - property string textColor: Theme.colorText + property color textColor: Theme.colorText property int textSize: source ? Theme.fontSizeContentBig : Theme.fontSizeContentVeryBig - property string backgroundColor: Theme.colorForeground - property string borderColor: Theme.colorSeparator - //////////////// IconSvg { diff --git a/qml/components_generic/MobileMenuItem_horizontal.qml b/qml/ComponentLibrary/menus/MobileMenuItem_horizontal.qml similarity index 83% rename from qml/components_generic/MobileMenuItem_horizontal.qml rename to qml/ComponentLibrary/menus/MobileMenuItem_horizontal.qml index fa19488..bd6a54f 100644 --- a/qml/components_generic/MobileMenuItem_horizontal.qml +++ b/qml/ComponentLibrary/menus/MobileMenuItem_horizontal.qml @@ -1,9 +1,9 @@ -import QtQuick 2.15 -import QtQuick.Layouts 1.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls.impl +import QtQuick.Templates as T -import ThemeEngine 1.0 +import ThemeEngine T.Button { id: control @@ -23,8 +23,8 @@ T.Button { property int sourceSize: 24 // colors - property string colorContent: Theme.colorTabletmenuContent - property string colorHighlight: Theme.colorTabletmenuHighlight + property color colorContent: Theme.colorTabletmenuContent + property color colorHighlight: Theme.colorTabletmenuHighlight //////////////// @@ -44,7 +44,7 @@ T.Button { visible: source.toString().length source: control.source - opacity: control.enabled ? 1.0 : 0.33 + opacity: control.enabled ? 1 : 0.66 color: control.highlighted ? control.colorHighlight : control.colorContent Behavior on color { ColorAnimation { duration: 133 } } } diff --git a/qml/ComponentLibrary/menus/MobileMenuItem_vertical.qml b/qml/ComponentLibrary/menus/MobileMenuItem_vertical.qml new file mode 100644 index 0000000..6b747b2 --- /dev/null +++ b/qml/ComponentLibrary/menus/MobileMenuItem_vertical.qml @@ -0,0 +1,101 @@ +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls.impl +import QtQuick.Templates as T + +import ThemeEngine + +T.Button { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + + leftPadding: 12 + rightPadding: 12 + + focusPolicy: Qt.NoFocus + + // icon + property url source + property int sourceSize: 24 + + // colors + property color colorContent: Theme.colorTabletmenuContent + property color colorHighlight: Theme.colorTabletmenuHighlight + + //////////////// + + background: Item { + implicitWidth: Theme.componentHeight + implicitHeight: Theme.componentHeight + } + + //////////////// + + contentItem: ColumnLayout { + spacing: -6 + + Item { + Layout.preferredWidth: 60 + Layout.preferredHeight: 32 + Layout.alignment: Qt.AlignHCenter + + IconSvg { // contentImage + anchors.centerIn: parent + width: control.sourceSize + height: control.sourceSize + + visible: control.source.toString().length + source: control.source + + opacity: control.enabled ? 1 : 0.66 + color: control.highlighted ? control.colorHighlight : control.colorContent + Behavior on color { ColorAnimation { duration: 133 } } + + Rectangle { // backgroundIndicator + anchors.centerIn: parent + z: -1 + + //width: 60 + height: 32 + radius: height + color: control.colorHighlight + + width: control.highlighted ? 60 : 0 + Behavior on width { NumberAnimation { duration: 133 } } + + opacity: control.highlighted ? 0.2 : 0 + Behavior on opacity { OpacityAnimator { duration: 133 } } + } + } + /* + Rectangle { + anchors.fill: parent + color: "green" + z: -2 + }*/ + } + + Text { // contentText + //width: control.width + Layout.preferredWidth: control.width + Layout.alignment: Qt.AlignHCenter + + visible: control.text + + text: control.text + textFormat: Text.PlainText + horizontalAlignment: Text.AlignHCenter + font.pixelSize: Theme.fontSizeContentSmall - 1 + font.bold: true + + color: control.highlighted ? control.colorHighlight : control.colorContent + Behavior on color { ColorAnimation { duration: 233 } } + } + } + + //////////////// +} diff --git a/qml/components_generic/SectionTitle.qml b/qml/ComponentLibrary/menus/SectionTitle.qml similarity index 78% rename from qml/components_generic/SectionTitle.qml rename to qml/ComponentLibrary/menus/SectionTitle.qml index e32a7e3..9d92d4f 100644 --- a/qml/components_generic/SectionTitle.qml +++ b/qml/ComponentLibrary/menus/SectionTitle.qml @@ -1,7 +1,7 @@ import QtQuick import QtQuick.Controls -import ThemeEngine 1.0 +import ThemeEngine Rectangle { id: control @@ -12,21 +12,16 @@ Rectangle { radius: singleColumn ? 0 : Theme.componentRadius z: 2 - color: control.backgroundColor + color: Theme.colorForeground border.width: singleColumn ? 0 : Theme.componentBorderWidth - border.color: control.borderColor + border.color: Theme.colorSeparator - property string text: "title" property string source - // font - property int fontSize: source ? Theme.fontSizeContentBig : + property string text: "title" + property int textSize: source ? Theme.fontSizeContentBig : Theme.fontSizeContentVeryBig - // colors - property string backgroundColor: Theme.colorForeground - property string borderColor: Theme.colorSeparator - //////////////////////////////////////////////////////////////////////////// Row { @@ -50,7 +45,7 @@ Rectangle { text: control.text textFormat: Text.PlainText - font.pixelSize: control.fontSize + font.pixelSize: control.textSize font.bold: false color: Theme.colorText wrapMode: Text.WordWrap diff --git a/qml/components_generic/CsdLinux.qml b/qml/ComponentLibrary/utils/CsdLinux.qml similarity index 96% rename from qml/components_generic/CsdLinux.qml rename to qml/ComponentLibrary/utils/CsdLinux.qml index ada6774..0d478da 100644 --- a/qml/components_generic/CsdLinux.qml +++ b/qml/ComponentLibrary/utils/CsdLinux.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Window 2.15 +import QtQuick +import QtQuick.Controls +import QtQuick.Window -import ThemeEngine 1.0 +import ThemeEngine Loader { anchors.top: parent.top diff --git a/qml/components_generic/CsdMac.qml b/qml/ComponentLibrary/utils/CsdMac.qml similarity index 95% rename from qml/components_generic/CsdMac.qml rename to qml/ComponentLibrary/utils/CsdMac.qml index ce3a196..be40879 100644 --- a/qml/components_generic/CsdMac.qml +++ b/qml/ComponentLibrary/utils/CsdMac.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Window 2.15 +import QtQuick +import QtQuick.Controls +import QtQuick.Window -import ThemeEngine 1.0 +import ThemeEngine Loader { width: active ? 48 : 0 diff --git a/qml/components_generic/CsdWindows.qml b/qml/ComponentLibrary/utils/CsdWindows.qml similarity index 96% rename from qml/components_generic/CsdWindows.qml rename to qml/ComponentLibrary/utils/CsdWindows.qml index dc32fd3..cf5f97e 100644 --- a/qml/components_generic/CsdWindows.qml +++ b/qml/ComponentLibrary/utils/CsdWindows.qml @@ -1,8 +1,8 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Window 2.15 +import QtQuick +import QtQuick.Controls +import QtQuick.Window -import ThemeEngine 1.0 +import ThemeEngine Loader { anchors.top: parent.top diff --git a/qml/components_generic/FpsMonitor.qml b/qml/ComponentLibrary/utils/FpsMonitor.qml similarity index 97% rename from qml/components_generic/FpsMonitor.qml rename to qml/ComponentLibrary/utils/FpsMonitor.qml index 4615ac3..84c0e65 100644 --- a/qml/components_generic/FpsMonitor.qml +++ b/qml/ComponentLibrary/utils/FpsMonitor.qml @@ -1,5 +1,5 @@ -import QtQuick 2.15 -import QtQuick.Window 2.15 +import QtQuick +import QtQuick.Window Item { id: control diff --git a/qml/components_generic/SwipeArea.qml b/qml/ComponentLibrary/utils/SwipeArea.qml similarity index 98% rename from qml/components_generic/SwipeArea.qml rename to qml/ComponentLibrary/utils/SwipeArea.qml index a4b8600..a107e74 100644 --- a/qml/components_generic/SwipeArea.qml +++ b/qml/ComponentLibrary/utils/SwipeArea.qml @@ -1,4 +1,4 @@ -import QtQuick 2.15 +import QtQuick MouseArea { preventStealing: false diff --git a/qml/components_js/UtilsMedia.js b/qml/ComponentLibrary/utils/UtilsMedia.js similarity index 100% rename from qml/components_js/UtilsMedia.js rename to qml/ComponentLibrary/utils/UtilsMedia.js diff --git a/qml/components_js/UtilsNumber.js b/qml/ComponentLibrary/utils/UtilsNumber.js similarity index 100% rename from qml/components_js/UtilsNumber.js rename to qml/ComponentLibrary/utils/UtilsNumber.js diff --git a/qml/components_js/UtilsPath.js b/qml/ComponentLibrary/utils/UtilsPath.js similarity index 100% rename from qml/components_js/UtilsPath.js rename to qml/ComponentLibrary/utils/UtilsPath.js diff --git a/qml/components_js/UtilsString.js b/qml/ComponentLibrary/utils/UtilsString.js similarity index 100% rename from qml/components_js/UtilsString.js rename to qml/ComponentLibrary/utils/UtilsString.js diff --git a/qml/WindowGeometrySaver.qml b/qml/ComponentLibrary/utils/WindowGeometrySaver.qml similarity index 89% rename from qml/WindowGeometrySaver.qml rename to qml/ComponentLibrary/utils/WindowGeometrySaver.qml index b9a84e8..2e0c872 100644 --- a/qml/WindowGeometrySaver.qml +++ b/qml/ComponentLibrary/utils/WindowGeometrySaver.qml @@ -4,7 +4,7 @@ import QtQuick.Window import QtQuick.Controls Item { - // This code should only run for desktop windowed applications. + // This code should only run for desktop/windowed applications. enabled: (Qt.platform.os !== "android" && Qt.platform.os !== "ios") // The ApplicationWindow instance that will be manipulated. MUST be set by the calling application. @@ -13,7 +13,8 @@ Item { // Name of the setting section. Can be changed by the calling application. property string windowName: "ApplicationWindow" - // QSettings file. Will use organisation and project name. + // QSettings file (will use organisation and project name) ///////////////// + Settings { id: windowSettings category: windowName @@ -27,7 +28,9 @@ Item { // Restore settings //////////////////////////////////////////////////////// - Component.onCompleted: restoreSettings() + Component.onCompleted: { + restoreSettings() + } function restoreSettings() { if (Qt.platform.os === "android" || Qt.platform.os === "ios") return; @@ -61,6 +64,15 @@ Item { // Save settings /////////////////////////////////////////////////////////// + Connections { + target: windowInstance + function onXChanged() { saveSettingsTimer.restart(); } + function onYChanged() { saveSettingsTimer.restart(); } + function onWidthChanged() { saveSettingsTimer.restart(); } + function onHeightChanged() { saveSettingsTimer.restart(); } + function onVisibilityChanged() { saveSettingsTimer.restart(); } + } + Timer { id: saveSettingsTimer interval: 2000 // 2s is probably good enough... @@ -68,15 +80,6 @@ Item { onTriggered: saveSettings() } - Connections { - target: windowInstance - function onXChanged() { saveSettingsTimer.restart() } - function onYChanged() { saveSettingsTimer.restart() } - function onWidthChanged() { saveSettingsTimer.restart() } - function onHeightChanged() { saveSettingsTimer.restart() } - function onVisibilityChanged() { saveSettingsTimer.restart() } - } - function saveSettings() { if (Qt.platform.os === "android" || Qt.platform.os === "ios") return; diff --git a/qml/ComponentLibrary/wip/ButtonFab.qml b/qml/ComponentLibrary/wip/ButtonFab.qml new file mode 100644 index 0000000..6da7ebd --- /dev/null +++ b/qml/ComponentLibrary/wip/ButtonFab.qml @@ -0,0 +1,125 @@ +import QtQuick +import QtQuick.Effects +import QtQuick.Controls.impl +import QtQuick.Templates as T + +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber + +T.Button { + id: control + + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.margins: 24 + + implicitWidth: 56 + implicitHeight: 56 + z: 10 + + focusPolicy: Qt.NoFocus + + // settings + property string shape: "squared" // available: rounded, squared + property int shapeRadius: (shape === "rounded") ? 2 : 4 + + // icon + property url source + property int sourceSize: 32 + + // colors + property color colorBackground: Theme.colorPrimary + property color colorHighlight: "white" + property color colorIcon: "white" + + // animation + property string animation: "" // available: rotate, fade + property bool animationRunning: false + + //////////////////////////////////////////////////////////////////////////// + + background: Item { + implicitWidth: 56 + implicitHeight: 56 + + Rectangle { + anchors.fill: parent + radius: (width / control.shapeRadius) + color: control.colorBackground + + layer.enabled: true + layer.effect: MultiEffect { + autoPaddingEnabled: true + shadowEnabled: true + shadowVerticalOffset: 4 + shadowColor: "#66000000" + } + } + + RippleThemed { + width: parent.width + height: parent.height + + anchor: control + pressed: control.pressed + active: control.enabled && (control.down || control.visualFocus) + color: Qt.rgba(control.colorHighlight.r, control.colorHighlight.g, control.colorHighlight.b, 0.1) + + layer.enabled: true + layer.effect: MultiEffect { + maskEnabled: true + maskThresholdMin: 0.5 + maskSpreadAtMin: 1.0 + maskSpreadAtMax: 0.0 + maskSource: ShaderEffectSource { + sourceItem: Rectangle { + x: background.x + y: background.y + width: background.width + height: background.height + radius: (background.width / control.shapeRadius) + } + } + } + } + } + + //////////////////////////////////////////////////////////////////////////// + + contentItem: Item { + IconSvg { + anchors.centerIn: parent + width: control.sourceSize + height: control.sourceSize + + color: control.colorIcon + opacity: control.enabled ? 1 : 0.66 + + visible: control.source.toString().length + source: control.source + + SequentialAnimation on opacity { + running: (control.animationRunning && + (control.animation === "fade" || control.animation === "both")) + alwaysRunToEnd: true + loops: Animation.Infinite + + PropertyAnimation { to: 0.5; duration: 666; } + PropertyAnimation { to: 1; duration: 666; } + } + NumberAnimation on rotation { + running: (control.animationRunning && + (control.animation === "rotate" || control.animation === "both")) + alwaysRunToEnd: true + loops: Animation.Infinite + + duration: 1500 + from: 0 + to: 360 + easing.type: Easing.Linear + } + } + } + + //////////////////////////////////////////////////////////////////////////// +} diff --git a/qml/ComponentLibrary/wip/ButtonFlat.qml b/qml/ComponentLibrary/wip/ButtonFlat.qml new file mode 100644 index 0000000..c3363ee --- /dev/null +++ b/qml/ComponentLibrary/wip/ButtonFlat.qml @@ -0,0 +1,3 @@ +ButtonSolid { + flat: true +} diff --git a/qml/ComponentLibrary/wip/ButtonSolid.qml b/qml/ComponentLibrary/wip/ButtonSolid.qml new file mode 100644 index 0000000..26b4467 --- /dev/null +++ b/qml/ComponentLibrary/wip/ButtonSolid.qml @@ -0,0 +1,162 @@ +import QtQuick +import QtQuick.Layouts +import QtQuick.Effects +import QtQuick.Controls.impl +import QtQuick.Templates as T + +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber + +T.Button { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + rowrowrow.width + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + + leftPadding: 12 + rightPadding: 12 + spacing: 6 + + font.pixelSize: Theme.componentFontSize + font.bold: false + + focusPolicy: Qt.NoFocus + + // settings + flat: false + property int alignment: Qt.AlignCenter // Qt.AlignLeft // Qt.AlignRight + property int layoutDirection: Qt.LeftToRight // Qt.RightToLeft + + // icon + property url source + property int sourceSize: UtilsNumber.alignTo(height * 0.5, 2) + + // colors + property color colorBackground: Theme.colorPrimary + property color colorHighlight: "white" + property color colorText: "white" + + // animation + property string animation // available: rotate, fade, both + property bool animationRunning: false + + //////////////// + + background: Item { + implicitWidth: 80 + implicitHeight: Theme.componentHeight + + Rectangle { + anchors.fill: parent + radius: Theme.componentRadius + color: control.colorBackground + border.width: control.flat ? 0 : Theme.componentBorderWidth + border.color: Qt.darker(color, 1.02) + + layer.enabled: !control.flat + layer.effect: MultiEffect { + autoPaddingEnabled: true + shadowEnabled: true + shadowColor: "#33000000" + } + } + + RippleThemed { + width: parent.width + height: parent.height + + anchor: control + pressed: control.pressed + active: control.enabled && (control.down || control.visualFocus) + color: Qt.rgba(control.colorHighlight.r, control.colorHighlight.g, control.colorHighlight.b, 0.1) + + layer.enabled: true + layer.effect: MultiEffect { + maskEnabled: true + maskInverted: false + maskThresholdMin: 0.5 + maskSpreadAtMin: 1.0 + maskSpreadAtMax: 0.0 + maskSource: ShaderEffectSource { + sourceItem: Rectangle { + x: background.x + y: background.y + width: background.width + height: background.height + radius: Theme.componentRadius + } + } + } + } + } + + //////////////// + + contentItem: Item { + RowLayout { + id: rowrowrow + anchors.right: (control.alignment === Qt.AlignRight) ? parent.right : undefined + anchors.horizontalCenter: (control.alignment === Qt.AlignCenter) ? parent.horizontalCenter : undefined + anchors.verticalCenter: parent.verticalCenter + + spacing: control.spacing + layoutDirection: { + if (control.alignment === Qt.AlignRight) return Qt.RightToLeft + return Qt.LeftToRight + } + + IconSvg { + Layout.maximumWidth: control.sourceSize + Layout.maximumHeight: control.sourceSize + Layout.alignment: Qt.AlignVCenter + + color: control.colorText + opacity: control.enabled ? 1 : 0.66 + + visible: control.source.toString().length + source: control.source + + SequentialAnimation on opacity { + running: (control.animationRunning && + (control.animation === "fade" || control.animation === "both")) + alwaysRunToEnd: true + loops: Animation.Infinite + + PropertyAnimation { to: 0.5; duration: 666; } + PropertyAnimation { to: 1; duration: 666; } + } + NumberAnimation on rotation { + running: (control.animationRunning && + (control.animation === "rotate" || control.animation === "both")) + alwaysRunToEnd: true + loops: Animation.Infinite + + duration: 1500 + from: 0 + to: 360 + easing.type: Easing.Linear + } + } + + Text { + Layout.alignment: Qt.AlignVCenter + + color: control.colorText + opacity: control.enabled ? 1 : 0.66 + + visible: control.text + text: control.text + textFormat: Text.PlainText + + font: control.font + elide: Text.ElideMiddle + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + } + } + } + + //////////////// +} diff --git a/qml/ComponentLibrary/wip/ButtonSunken.qml b/qml/ComponentLibrary/wip/ButtonSunken.qml new file mode 100644 index 0000000..871f994 --- /dev/null +++ b/qml/ComponentLibrary/wip/ButtonSunken.qml @@ -0,0 +1,136 @@ +import QtQuick +import QtQuick.Layouts +import QtQuick.Effects +import QtQuick.Controls.impl +import QtQuick.Templates as T + +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber + +T.Button { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + rowrowrow.width + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + + leftPadding: 12 + rightPadding: 12 + spacing: 6 + + font.pixelSize: Theme.componentFontSize + font.bold: false + + focusPolicy: Qt.NoFocus + + // settings + flat: true + checkable: true + property int alignment: Qt.AlignCenter // Qt.AlignLeft // Qt.AlignRight + property int layoutDirection: Qt.LeftToRight // Qt.RightToLeft + + // icon + property url source + property int sourceSize: UtilsNumber.alignTo(height * 0.5, 2) + + // colors + property color colorBackground: Theme.colorBackground + property color colorHighlight: Theme.colorForeground + property color colorText: Theme.colorText + + //////////////// + + background: Item { + implicitWidth: 80 + implicitHeight: Theme.componentHeight + + Rectangle { + anchors.fill: parent + radius: Theme.componentRadius + color: control.checked ? control.colorHighlight : control.colorBackground + } + Rectangle { + anchors.fill: parent + radius: Theme.componentRadius + color: control.colorHighlight + opacity: control.hovered ? 0.66 : 0 + Behavior on opacity { NumberAnimation { duration: 133 } } + } + + RippleThemed { + width: parent.width + height: parent.height + + anchor: control + pressed: control.pressed + active: control.enabled && checkable && (control.down || control.visualFocus) + color: Qt.rgba(control.colorHighlight.r, control.colorHighlight.g, control.colorHighlight.b, 0.1) + + layer.enabled: true + layer.effect: MultiEffect { + maskEnabled: true + maskInverted: false + maskThresholdMin: 0.5 + maskSpreadAtMin: 1.0 + maskSpreadAtMax: 0.0 + maskSource: ShaderEffectSource { + sourceItem: Rectangle { + x: background.x + y: background.y + width: background.width + height: background.height + radius: Theme.componentRadius + } + } + } + } + } + + //////////////// + + contentItem: Item { + RowLayout { + id: rowrowrow + anchors.right: (control.alignment === Qt.AlignRight) ? parent.right : undefined + anchors.horizontalCenter: (control.alignment === Qt.AlignCenter) ? parent.horizontalCenter : undefined + anchors.verticalCenter: parent.verticalCenter + + spacing: control.spacing + layoutDirection: { + if (control.alignment === Qt.AlignRight) return Qt.RightToLeft + return Qt.LeftToRight + } + + IconSvg { + Layout.maximumWidth: control.sourceSize + Layout.maximumHeight: control.sourceSize + Layout.alignment: Qt.AlignVCenter + + color: control.colorText + opacity: control.enabled ? 1 : 0.66 + + visible: control.source.toString().length + source: control.source + } + + Text { + Layout.alignment: Qt.AlignVCenter + + color: control.colorText + opacity: control.enabled ? 1 : 0.66 + + visible: control.text + text: control.text + textFormat: Text.PlainText + + font: control.font + elide: Text.ElideMiddle + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + } + } + } + + //////////////// +} diff --git a/qml/ComponentLibrary/wip/ButtonWireframe.qml b/qml/ComponentLibrary/wip/ButtonWireframe.qml new file mode 100644 index 0000000..cdaf7e1 --- /dev/null +++ b/qml/ComponentLibrary/wip/ButtonWireframe.qml @@ -0,0 +1,163 @@ +import QtQuick +import QtQuick.Layouts +import QtQuick.Effects +import QtQuick.Controls.impl +import QtQuick.Templates as T + +import ThemeEngine +import "qrc:/utils/UtilsNumber.js" as UtilsNumber + +T.Button { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + rowrowrow.width + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + + leftPadding: 12 + rightPadding: 12 + spacing: 6 + + font.pixelSize: Theme.componentFontSize + font.bold: false + + focusPolicy: Qt.NoFocus + + // settings + flat: false + property int alignment: Qt.AlignCenter // Qt.AlignLeft // Qt.AlignRight + property int layoutDirection: Qt.LeftToRight // Qt.RightToLeft + + // icon + property url source + property int sourceSize: UtilsNumber.alignTo(height * 0.5, 2) + + // colors + property color colorBackground: "white" + property color colorHighlight: Theme.colorComponentBorder + property color colorBorder: Theme.colorComponentBorder + property color colorText: Theme.colorPrimary + + // animation + property string animation // available: rotate, fade, both + property bool animationRunning: false + + //////////////// + + background: Item { + implicitWidth: 80 + implicitHeight: Theme.componentHeight + + Rectangle { + anchors.fill: parent + radius: Theme.componentRadius + color: control.colorBackground + border.width: Theme.componentBorderWidth + border.color: control.colorBorder + + layer.enabled: !control.flat + layer.effect: MultiEffect { + autoPaddingEnabled: true + shadowEnabled: true + shadowColor: "#22000000" + } + } + + RippleThemed { + width: parent.width + height: parent.height + + anchor: control + pressed: control.pressed + active: control.enabled && (control.down || control.visualFocus) + color: Qt.rgba(control.colorHighlight.r, control.colorHighlight.g, control.colorHighlight.b, 0.1) + + layer.enabled: true + layer.effect: MultiEffect { + maskEnabled: true + maskInverted: false + maskThresholdMin: 0.5 + maskSpreadAtMin: 1.0 + maskSpreadAtMax: 0.0 + maskSource: ShaderEffectSource { + sourceItem: Rectangle { + x: background.x + y: background.y + width: background.width + height: background.height + radius: Theme.componentRadius + } + } + } + } + } + + //////////////// + + contentItem: Item { + RowLayout { + id: rowrowrow + anchors.right: (control.alignment === Qt.AlignRight) ? parent.right : undefined + anchors.horizontalCenter: (control.alignment === Qt.AlignCenter) ? parent.horizontalCenter : undefined + anchors.verticalCenter: parent.verticalCenter + + spacing: control.spacing + layoutDirection: { + if (control.alignment === Qt.AlignRight) return Qt.RightToLeft + return Qt.LeftToRight + } + + IconSvg { + Layout.maximumWidth: control.sourceSize + Layout.maximumHeight: control.sourceSize + Layout.alignment: Qt.AlignVCenter + + color: control.colorText + opacity: control.enabled ? 1 : 0.66 + + visible: control.source.toString().length + source: control.source + + SequentialAnimation on opacity { + running: (control.animationRunning && + (control.animation === "fade" || control.animation === "both")) + alwaysRunToEnd: true + loops: Animation.Infinite + + PropertyAnimation { to: 0.5; duration: 666; } + PropertyAnimation { to: 1; duration: 666; } + } + NumberAnimation on rotation { + running: (control.animationRunning && + (control.animation === "rotate" || control.animation === "both")) + alwaysRunToEnd: true + loops: Animation.Infinite + + duration: 1500 + from: 0 + to: 360 + easing.type: Easing.Linear + } + } + + Text { + Layout.alignment: Qt.AlignVCenter + + color: control.colorText + opacity: control.enabled ? 1 : 0.66 + + visible: control.text + text: control.text + textFormat: Text.PlainText + + font: control.font + elide: Text.ElideMiddle + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + } + } + } + + //////////////// +} diff --git a/qml/ComponentLibrary/wip/SelectorMenu2.qml b/qml/ComponentLibrary/wip/SelectorMenu2.qml new file mode 100644 index 0000000..39ce742 --- /dev/null +++ b/qml/ComponentLibrary/wip/SelectorMenu2.qml @@ -0,0 +1,53 @@ +import QtQuick + +import ThemeEngine + +Item { + id: control + implicitWidth: 128 + implicitHeight: 32 + + width: contentRow.width + Theme.componentBorderWidth*2 + + opacity: enabled ? 1 : 0.66 + + signal menuSelected(var index) + property int currentSelection: 1 + + property var model: null + + //////////////// + + Rectangle { // background + anchors.fill: parent + radius: Theme.componentRadius + color: Theme.colorComponent + } + + //////////////// + + Row { + id: contentRow + anchors.centerIn: parent + height: parent.height - Theme.componentBorderWidth*2 + spacing: Theme.componentBorderWidth + + Repeater { + model: control.model + delegate: SelectorMenuThemedItem { + colorContent: Theme.colorComponentText + colorContentHighlight: Theme.colorComponentText + colorBackgroundHighlight: Theme.colorComponentBackground + height: parent.height + highlighted: (control.currentSelection === idx) + index: idx ?? 0 + text: txt ?? "" + source: src ?? "" + sourceSize: sz ?? 32 + onClicked: control.menuSelected(idx) + } + } + } + + //////////////// +} diff --git a/qml/DesktopHeader.qml b/qml/DesktopHeader.qml index 7cbe338..83e01e2 100644 --- a/qml/DesktopHeader.qml +++ b/qml/DesktopHeader.qml @@ -90,16 +90,16 @@ Rectangle { spacing: 12 visible: (appContent.state === "DesktopComponents") - ButtonCompactable { + ButtonSolid { id: buttonRefresh anchors.verticalCenter: parent.verticalCenter source: "qrc:/assets/icons_material/baseline-autorenew-24px.svg" - textColor: Theme.colorHeaderContent - iconColor: Theme.colorHeaderContent - backgroundColor: Theme.colorHeaderHighlight text: qsTr("Animate this") - tooltipText: text + + //colorText: Theme.colorHeaderContent + //colorIcon: Theme.colorHeaderContent + colorBackground: Theme.colorHeaderHighlight animation: "rotate" animationRunning: isclicked @@ -108,10 +108,12 @@ Rectangle { onClicked: isclicked = !isclicked } - ButtonWireframe { + ButtonSolid { id: buttonEnable anchors.verticalCenter: parent.verticalCenter + colorBackground: Theme.colorHeaderHighlight + text: componentsEnabled ? qsTr("Disable components") : qsTr("Enable components") onClicked: componentsEnabled = !componentsEnabled } @@ -139,6 +141,10 @@ Rectangle { ActionMenu_floating { id: actionMenu + width: 240 + + titleTxt: "back" + titleSrc: "qrc:/assets/icons_material/baseline-chevron_left-24px.svg" model: ListModel { id: lmActionMenu diff --git a/qml/MobileHeader.qml b/qml/MobileHeader.qml index 2dc0116..7e0fe4c 100644 --- a/qml/MobileHeader.qml +++ b/qml/MobileHeader.qml @@ -39,6 +39,9 @@ Rectangle { ActionMenu_bottom { id: actionMenu + titleTxt: "ActionMenu" + //titleSrc: "qrc:/assets/icons_material/baseline-chevron_left-24px.svg" + model: ListModel { id: lmActionMenu ListElement { t: "itm"; idx: 1; txt: "Action 1"; src: "qrc:/assets/icons_material/baseline-accessibility-24px.svg"; } diff --git a/qml/MobileMenu.qml b/qml/MobileMenu.qml index 7d3cd44..35623f5 100644 --- a/qml/MobileMenu.qml +++ b/qml/MobileMenu.qml @@ -8,19 +8,23 @@ Item { anchors.right: parent.right anchors.bottom: parent.bottom - property int hhh: (appWindow.isPhone ? 36 : 48) - property int hhi: (hhh * 0.666) + //property int hhh: (appWindow.isPhone ? 36 : 48) + property int hhh: 60 + property int hhi: (hhh * 0.4) property int hhv: visible ? hhh : 0 z: 10 height: hhh + screenPaddingNavbar + screenPaddingBottom + // prevent clicks below this area + MouseArea { anchors.fill: parent; acceptedButtons: Qt.AllButtons; } + //////////////////////////////////////////////////////////////////////////// - Rectangle { // background + Rectangle { // menubar background area anchors.fill: parent - opacity: 0.9 - color: appWindow.isTablet ? Theme.colorTabletmenu : Theme.colorBackground + opacity: 0.95 + color: Theme.colorTabletmenu Rectangle { anchors.top: parent.top @@ -32,70 +36,74 @@ Item { color: Theme.colorTabletmenuContent } } -/* - Rectangle { // navbar area + + Rectangle { // navbar background area anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom height: screenPaddingNavbar + screenPaddingBottom visible: (!mobileMenu.visible || appContent.state === "Tutorial") - opacity: 0.9 + opacity: 0.95 color: { if (appContent.state === "Tutorial") return Theme.colorHeader return Theme.colorBackground } } -*/ - // prevent clicks below this area - MouseArea { anchors.fill: parent; acceptedButtons: Qt.AllButtons; } //////////////////////////////////////////////////////////////////////////// - Row { - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - anchors.verticalCenterOffset: (-screenPaddingNavbar -screenPaddingBottom) / 2 - spacing: (!appWindow.wideMode || (appWindow.isPhone && utilsScreen.screenSize < 5.0)) ? -8 : 24 - - MobileMenuItem_horizontal { - id: menuComponents - height: mobileMenu.hhh - sourceSize: mobileMenu.hhi - - colorContent: Theme.colorTabletmenuContent - colorHighlight: Theme.colorTabletmenuHighlight - - text: qsTr("Components") - source: "qrc:/assets/icons_material/duotone-touch_app-24px.svg" - highlighted: (appContent.state === "MobileComponents") - onClicked: screenMobileComponents.loadScreen() - } - MobileMenuItem_horizontal { - id: menuSettings - height: mobileMenu.hhh - sourceSize: mobileMenu.hhi - - colorContent: Theme.colorTabletmenuContent - colorHighlight: Theme.colorTabletmenuHighlight - - text: qsTr("Settings") - source: "qrc:/assets/icons_material/baseline-settings-20px.svg" - highlighted: (appContent.state === "Settings") - onClicked: screenSettings.loadScreen() - } - MobileMenuItem_horizontal { - id: menuAbout - height: mobileMenu.hhh - sourceSize: mobileMenu.hhi - - colorContent: Theme.colorTabletmenuContent - colorHighlight: Theme.colorTabletmenuHighlight - - text: qsTr("About") - source: "qrc:/assets/icons_material/outline-info-24px.svg" - highlighted: (appContent.state === "About" || appContent.state === "AboutPermissions") - onClicked: screenAbout.loadScreen() + Item { // buttons area + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + height: hhh + + Row { + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + + spacing: Theme.componentMargin + + MobileMenuItem_vertical { + id: menuComponents + height: mobileMenu.hhh + sourceSize: mobileMenu.hhi + + colorContent: Theme.colorTabletmenuContent + colorHighlight: Theme.colorTabletmenuHighlight + + text: qsTr("Components") + source: "qrc:/assets/icons_material/duotone-touch_app-24px.svg" + highlighted: (appContent.state === "MobileComponents") + onClicked: screenMobileComponents.loadScreen() + } + MobileMenuItem_vertical { + id: menuSettings + height: mobileMenu.hhh + sourceSize: mobileMenu.hhi + + colorContent: Theme.colorTabletmenuContent + colorHighlight: Theme.colorTabletmenuHighlight + + text: qsTr("Settings") + source: "qrc:/assets/icons_material/baseline-settings-20px.svg" + highlighted: (appContent.state === "Settings") + onClicked: screenSettings.loadScreen() + } + MobileMenuItem_vertical { + id: menuAbout + height: mobileMenu.hhh + sourceSize: mobileMenu.hhi + + colorContent: Theme.colorTabletmenuContent + colorHighlight: Theme.colorTabletmenuHighlight + + text: qsTr("About") + source: "qrc:/assets/icons_material/outline-info-24px.svg" + highlighted: (appContent.state === "About" || appContent.state === "AboutPermissions") + onClicked: screenAbout.loadScreen() + } } } diff --git a/qml/MobilePermissions.qml b/qml/MobilePermissions.qml index a3f0ab3..7857e1e 100644 --- a/qml/MobilePermissions.qml +++ b/qml/MobilePermissions.qml @@ -118,13 +118,9 @@ Item { font.pixelSize: Theme.fontSizeContentSmall } - ButtonWireframeIcon { + ButtonWireframe { anchors.left: parent.left anchors.leftMargin: 48 - height: 36 - - primaryColor: Theme.colorPrimary - secondaryColor: Theme.colorBackground text: qsTr("Official information") source: "qrc:/assets/icons_material/duotone-launch-24px.svg" @@ -199,13 +195,9 @@ Item { font.pixelSize: Theme.fontSizeContentSmall } - ButtonWireframeIcon { + ButtonWireframe { anchors.left: parent.left anchors.leftMargin: 48 - height: 36 - - primaryColor: Theme.colorPrimary - secondaryColor: Theme.colorBackground text: qsTr("Location info") source: "qrc:/assets/icons_material/duotone-tune-24px.svg" @@ -282,7 +274,7 @@ Item { Column { id: element_infos anchors.left: parent.left - anchors.leftMargin: 16 + anchors.leftMargin: 12 anchors.right: parent.right anchors.rightMargin: 12 spacing: 8 @@ -327,13 +319,9 @@ Item { font.pixelSize: Theme.fontSizeContentSmall } - ButtonWireframeIcon { + ButtonWireframe { anchors.left: parent.left anchors.leftMargin: 48 - height: 36 - - primaryColor: Theme.colorPrimary - secondaryColor: Theme.colorBackground text: qsTr("Application info") source: "qrc:/assets/icons_material/duotone-tune-24px.svg" diff --git a/qml/PageButtons.qml b/qml/PageButtons.qml index c1d1c3b..e29b11f 100644 --- a/qml/PageButtons.qml +++ b/qml/PageButtons.qml @@ -3,165 +3,172 @@ import QtQuick.Controls import ThemeEngine -Flickable { - contentWidth: -1 - contentHeight: contentColumn.height +Item { - boundsBehavior: isDesktop ? Flickable.OvershootBounds : Flickable.DragAndOvershootBounds - ScrollBar.vertical: ScrollBar { visible: false } - - Column { - id: contentColumn + ButtonFab { + source: "qrc:/assets/icons_material/baseline-add-24px.svg" + } - anchors.left: parent.left - anchors.right: parent.right + Flickable { + anchors.fill: parent - topPadding: Theme.componentMarginXL - bottomPadding: Theme.componentMarginXL - spacing: Theme.componentMarginXL + contentWidth: -1 + contentHeight: contentColumn.height - ListTitle { //////////////////////////////////////////////////////////// - anchors.leftMargin: singleColumn ? 0 : Theme.componentMargin - anchors.rightMargin: singleColumn ? 0 : Theme.componentMargin + boundsBehavior: isDesktop ? Flickable.OvershootBounds : Flickable.DragAndOvershootBounds + ScrollBar.vertical: ScrollBar { visible: false } - text: qsTr("Buttons") - source: "" - } + Column { + id: contentColumn - Flow { anchors.left: parent.left - anchors.leftMargin: Theme.componentMarginXL anchors.right: parent.right - anchors.rightMargin: Theme.componentMarginXL - spacing: 24 - - ButtonWireframe { - fullColor: true - text: "ButtonWireframe" - } - - ButtonWireframeIcon { - fullColor: true - text: "ButtonWireframeIcon" - source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" - } - ButtonWireframe { - text: "ButtonWireframe" - } + topPadding: Theme.componentMarginXL + bottomPadding: Theme.componentMarginXL + spacing: Theme.componentMarginXL - ButtonWireframeIcon { - //width: 128 - text: "ButtonWireframeIcon" - source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" - } + ListTitle { //////////////////////////////////////////////////////////// + anchors.leftMargin: singleColumn ? 0 : Theme.componentMargin + anchors.rightMargin: singleColumn ? 0 : Theme.componentMargin - ButtonText { - text: "ButtonText" + text: qsTr("Buttons") + source: "" } - } - Flow { - anchors.left: parent.left - anchors.leftMargin: Theme.componentMarginXL - anchors.right: parent.right - anchors.rightMargin: Theme.componentMarginXL - spacing: 24 + Flow { + anchors.left: parent.left + anchors.leftMargin: Theme.componentMarginXL + anchors.right: parent.right + anchors.rightMargin: Theme.componentMarginXL + spacing: 24 - AndroidButton { - text: "AndroidButton" - } + ButtonSolid { + text: "ButtonSolid" + } - AndroidButtonIcon { - text: "AndroidButtonIcon" - source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" - } - } + ButtonSolid { + text: "ButtonSolid" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + } - ListTitle { //////////////////////////////////////////////////////////// - anchors.leftMargin: singleColumn ? 0 : Theme.componentMargin - anchors.rightMargin: singleColumn ? 0 : Theme.componentMargin + ButtonWireframe { + text: "ButtonWireframe" + } - text: qsTr("Round buttons") - source: "" - } + ButtonWireframe { + //width: 128 + text: "ButtonWireframe" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + } - Row { - anchors.horizontalCenter: parent.horizontalCenter - height: 48 - spacing: 16 - - RoundButtonText { - width: 48 - height: 48 - text: "+" - highlightMode: "color" - backgroundVisible: true - } - RoundButtonText { - width: 48 - height: 48 - text: "-" - highlightMode: "circle" - backgroundVisible: false + ButtonText { + text: "ButtonText" + } } - RoundButtonText { - width: 48 - height: 48 - text: "a" - highlightMode: "color" - highlightColor: Theme.colorError - borderVisible: true - tooltipText: "this one has a tooltip!" - } - } + Flow { + anchors.left: parent.left + anchors.leftMargin: Theme.componentMarginXL + anchors.right: parent.right + anchors.rightMargin: Theme.componentMarginXL + spacing: 24 - Row { - anchors.horizontalCenter: parent.horizontalCenter - height: 48 - spacing: 16 + AndroidButton { + text: "AndroidButton" + } - RoundButtonIcon { - source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" - highlightMode: "color" - } - RoundButtonIcon { - source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" - highlightMode: "circle" - backgroundVisible: true + AndroidButtonIcon { + text: "AndroidButtonIcon" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + } } - RoundButtonIcon { - source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" - highlightMode: "color" - highlightColor: Theme.colorError - tooltipText: "another tooltip!" - } - } + ListTitle { //////////////////////////////////////////////////////////// + anchors.leftMargin: singleColumn ? 0 : Theme.componentMargin + anchors.rightMargin: singleColumn ? 0 : Theme.componentMargin - Row { - anchors.horizontalCenter: parent.horizontalCenter - height: 48 - spacing: 16 - - RoundButtonText { - text: "+" - backgroundVisible: true - highlightMode: "color" - } - RoundButtonText { - text: "-" - backgroundVisible: false - highlightMode: "circle" + text: qsTr("Round buttons") + source: "" } - RoundButtonText { - text: "a" - highlightMode: "color" - highlightColor: Theme.colorError - borderVisible: true - tooltipText: "this one has a tooltip!" + Row { + anchors.horizontalCenter: parent.horizontalCenter + height: 48 + spacing: 16 + + RoundButtonText { + width: 48 + height: 48 + text: "+" + highlightMode: "color" + backgroundVisible: true + } + RoundButtonText { + width: 48 + height: 48 + text: "-" + highlightMode: "circle" + backgroundVisible: false + } + RoundButtonText { + width: 48 + height: 48 + text: "a" + highlightMode: "color" + highlightColor: Theme.colorError + borderVisible: true + + tooltipText: "this one has a tooltip!" + } + } + + Row { + anchors.horizontalCenter: parent.horizontalCenter + height: 48 + spacing: 16 + + RoundButtonIcon { + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + highlightMode: "color" + } + RoundButtonIcon { + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + highlightMode: "circle" + backgroundVisible: true + } + RoundButtonIcon { + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + highlightMode: "color" + highlightColor: Theme.colorError + + tooltipText: "another tooltip!" + } + } + + Row { + anchors.horizontalCenter: parent.horizontalCenter + height: 48 + spacing: 16 + + RoundButtonText { + text: "+" + backgroundVisible: true + highlightMode: "color" + } + RoundButtonText { + text: "-" + backgroundVisible: false + highlightMode: "circle" + } + RoundButtonText { + text: "a" + highlightMode: "color" + highlightColor: Theme.colorError + borderVisible: true + + tooltipText: "this one has a tooltip!" + } } } } diff --git a/qml/PageDialogs.qml b/qml/PageDialogs.qml index ff66d8c..58d71ac 100644 --- a/qml/PageDialogs.qml +++ b/qml/PageDialogs.qml @@ -30,14 +30,13 @@ Flickable { source: "" } - ButtonWireframeIcon { + ButtonSolid { anchors.left: parent.left anchors.leftMargin: Theme.componentMarginXL anchors.right: parent.right anchors.rightMargin: Theme.componentMarginXL text: "Message" - fullColor: true source: "qrc:/assets/icons_material/baseline-delete-24px.svg" PopupMessage { @@ -47,14 +46,13 @@ Flickable { onClicked: popupMessage.open() } - ButtonWireframeIcon { + ButtonSolid { anchors.left: parent.left anchors.leftMargin: Theme.componentMarginXL anchors.right: parent.right anchors.rightMargin: Theme.componentMarginXL text: "Choice" - fullColor: true source: "qrc:/assets/icons_material/baseline-delete-24px.svg" PopupChoice { @@ -72,14 +70,13 @@ Flickable { source: "" } - ButtonWireframeIcon { + ButtonSolid { anchors.left: parent.left anchors.leftMargin: Theme.componentMarginXL anchors.right: parent.right anchors.rightMargin: Theme.componentMarginXL text: "Date" - fullColor: true source: "qrc:/assets/icons_material/duotone-date_range-24px.svg" PopupDate { @@ -90,14 +87,13 @@ Flickable { onClicked: popupDate.openDate(savethedate) } - ButtonWireframeIcon { + ButtonSolid { anchors.left: parent.left anchors.leftMargin: Theme.componentMarginXL anchors.right: parent.right anchors.rightMargin: Theme.componentMarginXL text: "Time" - fullColor: true source: "qrc:/assets/icons_material/duotone-schedule-24px.svg" PopupTime { diff --git a/qml/PageIndicators.qml b/qml/PageIndicators.qml index 39600c1..043287c 100644 --- a/qml/PageIndicators.qml +++ b/qml/PageIndicators.qml @@ -43,6 +43,46 @@ Flickable { } } + ListTitle { //////////////////////////////////////////////////////////// + anchors.leftMargin: singleColumn ? 0 : Theme.componentMargin + anchors.rightMargin: singleColumn ? 0 : Theme.componentMargin + + text: qsTr("Data bars") + source: "" + } + + Column { + anchors.left: parent.left + anchors.leftMargin: Theme.componentMarginXL + anchors.right: parent.right + anchors.rightMargin: Theme.componentMarginXL + spacing: Theme.componentMarginXL + + DataBarCompact { + anchors.left: parent.left + anchors.right: parent.right + + value: 33 + + legend: "" + prefix: "" + suffix: " cm" + colorForeground: Theme.colorBlue + } + + DataBarSolid { + anchors.left: parent.left + anchors.right: parent.right + + value: 66 + + legend: "" + prefix: "" + suffix: "°" + colorForeground: Theme.colorRed + } + } + ListTitle { //////////////////////////////////////////////////////////// anchors.leftMargin: singleColumn ? 0 : Theme.componentMargin anchors.rightMargin: singleColumn ? 0 : Theme.componentMargin @@ -69,7 +109,7 @@ Flickable { width: 128 value: 0.66 arcCap: "round" - arcColor: Theme.colorGreen + arcColor: Theme.colorMaterialLime } } @@ -79,6 +119,7 @@ Flickable { ProgressCircle { width: 128 value: 0.33 + arcColor: Theme.colorMaterialDeepOrange } ProgressCircle { width: 128 diff --git a/qml/PageSelectors.qml b/qml/PageSelectors.qml index d9bf414..8ad61e9 100644 --- a/qml/PageSelectors.qml +++ b/qml/PageSelectors.qml @@ -107,6 +107,58 @@ Flickable { //// + SelectorMenu2 { + anchors.horizontalCenter: parent.horizontalCenter + height: 32 + + currentSelection: 1 + model: lmSelectorMenuTxt + + onMenuSelected: (index) => { + //console.log("SelectorMenu clicked #" + index) + currentSelection = index + } + } + + //// + + SelectorMenu2 { + anchors.horizontalCenter: parent.horizontalCenter + height: 40 + + currentSelection: 1 + model: lmSelectorMenuImg + + onMenuSelected: (index) => { + //console.log("SelectorMenu clicked #" + index) + currentSelection = index + } + } + + //// + + SelectorMenu2 { + anchors.horizontalCenter: parent.horizontalCenter + height: 36 + + model: lmSelectorMenuImgTxt + + onMenuSelected: (index) => { + //console.log("SelectorMenu clicked #" + index) + currentSelection = index + } + } + + ListTitle { //////////////////////////////////////////////////////////// + anchors.leftMargin: singleColumn ? 0 : Theme.componentMargin + anchors.rightMargin: singleColumn ? 0 : Theme.componentMargin + + text: qsTr("Selectors") + source: "" + } + + //// + SelectorMenu { anchors.horizontalCenter: parent.horizontalCenter height: 32 diff --git a/qml/ScreenAbout.qml b/qml/ScreenAbout.qml index e7a1bb3..44e31f6 100644 --- a/qml/ScreenAbout.qml +++ b/qml/ScreenAbout.qml @@ -2,7 +2,7 @@ import QtQuick import QtQuick.Controls import ThemeEngine -import "qrc:/js/UtilsNumber.js" as UtilsNumber +import "qrc:/utils/UtilsNumber.js" as UtilsNumber Loader { id: screenAbout @@ -97,33 +97,27 @@ Loader { visible: wideWideMode spacing: Theme.componentMargin - ButtonWireframeIconCentered { + ButtonSolid { width: 160 sourceSize: 28 - fullColor: true - primaryColor: Theme.colorMaterialBlue text: qsTr("WEBSITE") source: "qrc:/assets/icons_material/baseline-insert_link-24px.svg" onClicked: Qt.openUrlExternally("https://emeric.io/") } - ButtonWireframeIconCentered { + ButtonSolid { width: 160 sourceSize: 22 - fullColor: true - primaryColor: Theme.colorMaterialBlue text: qsTr("SUPPORT") source: "qrc:/assets/icons_material/baseline-support-24px.svg" onClicked: Qt.openUrlExternally("https://emeric.io/") } - ButtonWireframeIconCentered { + ButtonSolid { width: 160 sourceSize: 22 - fullColor: true - primaryColor: Theme.colorMaterialBlue visible: (appWindow.width > 800) text: qsTr("GitHub") @@ -155,29 +149,23 @@ Loader { visible: !wideWideMode spacing: Theme.componentMargin - ButtonWireframeIconCentered { + ButtonSolid { anchors.verticalCenter: parent.verticalCenter width: ((parent.width - parent.spacing) / 2) - sourceSize: 28 - fullColor: true - primaryColor: Theme.colorMaterialBlue - text: qsTr("WEBSITE") source: "qrc:/assets/icons_material/baseline-insert_link-24px.svg" + sourceSize: 28 onClicked: Qt.openUrlExternally("https://emeric.io/") } - ButtonWireframeIconCentered { + ButtonSolid { width: ((parent.width - parent.spacing) / 2) anchors.verticalCenter: parent.verticalCenter - sourceSize: 22 - fullColor: true - primaryColor: Theme.colorMaterialBlue - text: qsTr("SUPPORT") source: "qrc:/assets/icons_material/baseline-support-24px.svg" + sourceSize: 22 onClicked: Qt.openUrlExternally("https://emeric.io/") } } @@ -200,7 +188,7 @@ Loader { ListItemClickable { // rate width: parent.width - visible: (Qt.platform.os === "android" || Qt.platform.os === "ios") + //visible: (Qt.platform.os === "android" || Qt.platform.os === "ios") text: qsTr("Rate the application") source: "qrc:/assets/icons_material/baseline-stars-24px.svg" @@ -208,6 +196,10 @@ Loader { onClicked: Qt.openUrlExternally("https://github.com/emericg/QmlAppTemplate") } + //////// + + ListSeparator { } + ListItemClickable { // tutorial width: parent.width @@ -252,7 +244,7 @@ Loader { anchors.verticalCenter: dependenciesText.verticalCenter source: "qrc:/assets/icons_material/baseline-settings-20px.svg" - color: Theme.colorSubText + color: Theme.colorIcon } Text { @@ -321,7 +313,7 @@ Loader { anchors.verticalCenter: translatorsText.verticalCenter source: "qrc:/assets/icons_material/duotone-translate-24px.svg" - color: Theme.colorSubText + color: Theme.colorIcon } Text { @@ -369,6 +361,8 @@ Loader { } //////// + + ListSeparator { } } } diff --git a/qml/ScreenDesktopComponents.qml b/qml/ScreenDesktopComponents.qml index 95e5431..73b2e43 100644 --- a/qml/ScreenDesktopComponents.qml +++ b/qml/ScreenDesktopComponents.qml @@ -106,20 +106,17 @@ Loader { anchors.verticalCenter: parent.verticalCenter spacing: 16 - ButtonWireframeIcon { - fullColor: true - primaryColor: Theme.colorActionbarHighlight + ButtonSolid { + colorHighlight: Theme.colorActionbarHighlight source: "qrc:/assets/icons_material/baseline-warning-24px.svg" } - ButtonWireframeIcon { - fullColor: true - primaryColor: Theme.colorActionbarHighlight + ButtonSolid { + colorHighlight: Theme.colorActionbarHighlight text: "Action 1" source: "qrc:/assets/icons_material/baseline-warning-24px.svg" } - ButtonWireframeIcon { - fullColor: true - primaryColor: Theme.colorActionbarHighlight + ButtonSolid { + colorHighlight: Theme.colorActionbarHighlight text: "Action 2" } } @@ -225,6 +222,10 @@ Loader { // CONTENT ///////////////////////////////////////////////////////////////// + ButtonFab { + source: "qrc:/assets/icons_material/baseline-add-24px.svg" + } + Flickable { anchors.top: menusArea.bottom anchors.left: parent.left @@ -277,6 +278,15 @@ Loader { model: ListModel { id: cbAppTheme + ListElement { text: "MOBILE LIGHT"; } + ListElement { text: "MOBILE DARK"; } + + ListElement { text: "MATERIAL LIGHT"; } + ListElement { text: "MATERIAL DARK"; } + + ListElement { text: "DESKTOP LIGHT"; } + ListElement { text: "DESKTOP DARK"; } + ListElement { text: "SNOW"; } ListElement { text: "PLANT"; } ListElement { text: "RAIN"; } @@ -294,7 +304,16 @@ Loader { currentIndex = Theme.getThemeIndex(settingsManager.appTheme) } onActivated: { - if (currentText === "SNOW") settingsManager.appTheme = "THEME_SNOW" + if (currentText === "MOBILE LIGHT") settingsManager.appTheme = "THEME_MOBILE_LIGHT" + else if (currentText === "MOBILE DARK") settingsManager.appTheme = "THEME_MOBILE_DARK" + + else if (currentText === "MATERIAL LIGHT") settingsManager.appTheme = "THEME_MATERIAL_LIGHT" + else if (currentText === "MATERIAL DARK") settingsManager.appTheme = "THEME_MATERIAL_DARK" + + else if (currentText === "DESKTOP LIGHT") settingsManager.appTheme = "THEME_DESKTOP_LIGHT" + else if (currentText === "DESKTOP DARK") settingsManager.appTheme = "THEME_DESKTOP_DARK" + + else if (currentText === "SNOW") settingsManager.appTheme = "THEME_SNOW" else if (currentText === "PLANT") settingsManager.appTheme = "THEME_PLANT" else if (currentText === "RAIN") settingsManager.appTheme = "THEME_RAIN" else if (currentText === "DAY") settingsManager.appTheme = "THEME_DAY" @@ -344,39 +363,207 @@ Loader { //// + Flow { + anchors.left: parent.left + anchors.right: parent.right + spacing: Theme.componentMargin + + ButtonFlat { + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + colorBackground: Theme.colorMaterialGreen + } + + ButtonFlat { + text: "ButtonFlat" + colorBackground: Theme.colorMaterialBlue + } + + ButtonFlat { + text: "ButtonFlat" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + colorBackground: Theme.colorMaterialRed + } + + ButtonFlat { + text: "ButtonFlat" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + colorBackground: Theme.colorMaterialDeepOrange + layoutDirection: Qt.RightToLeft + } + + ButtonFlat { + width: 200 + text: "ButtonFlat" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + colorBackground: Theme.colorMaterialOrange + alignment: Qt.AlignLeft + layoutDirection: Qt.LeftToRight + } + ButtonFlat { + width: 200 + text: "ButtonFlat" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + colorBackground: Theme.colorMaterialDeepPurple + alignment: Qt.AlignCenter + layoutDirection: Qt.RightToLeft + } + ButtonFlat { + width: 200 + text: "ButtonFlat" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + colorBackground: Theme.colorMaterialGrey + alignment: Qt.AlignRight + layoutDirection: Qt.RightToLeft + } + } + + Flow { + anchors.left: parent.left + anchors.right: parent.right + spacing: Theme.componentMargin + + ButtonSolid { + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + } + + ButtonSolid { + text: "ButtonSolid" + } + ButtonSolid { + text: "ButtonSolid" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + } + ButtonSolid { + text: "ButtonSolid" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + layoutDirection: Qt.RightToLeft + } + + ButtonSolid { + width: 200 + text: "ButtonSolid" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + alignment: Qt.AlignLeft + } + ButtonSolid { + width: 200 + text: "ButtonSolid" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + alignment: Qt.AlignCenter + layoutDirection: Qt.RightToLeft + } + ButtonSolid { + width: 200 + text: "ButtonSolid" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + alignment: Qt.AlignRight + layoutDirection: Qt.RightToLeft + } + } + Flow { anchors.left: parent.left anchors.right: parent.right spacing: Theme.componentMargin ButtonWireframe { - fullColor: true - text: "ButtonWireframe" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" } - ButtonWireframeIcon { - fullColor: true - text: "ButtonWireframeIcon" + ButtonWireframe { + text: "ButtonWireframe" + } + ButtonWireframe { + text: "ButtonWireframe" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + } + ButtonWireframe { + text: "ButtonWireframe" source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + layoutDirection: Qt.RightToLeft } ButtonWireframe { + width: 200 text: "ButtonWireframe" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + alignment: Qt.AlignLeft + layoutDirection: Qt.LeftToRight + } + ButtonWireframe { + width: 200 + text: "ButtonWireframe" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + alignment: Qt.AlignCenter + layoutDirection: Qt.RightToLeft + } + ButtonWireframe { + width: 200 + text: "ButtonWireframe" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + alignment: Qt.AlignRight + layoutDirection: Qt.RightToLeft } + } - ButtonWireframeIcon { - width: 256 - text: "ButtonWireframeIcon" + Flow { + anchors.left: parent.left + anchors.right: parent.right + spacing: Theme.componentMargin + + ButtonSunken { source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" } - ButtonText { - text: "ButtonText" + ButtonSunken { + text: "ButtonSunken" + } + ButtonSunken { + text: "ButtonSunken" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + } + ButtonSunken { + text: "ButtonSunken" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + layoutDirection: Qt.RightToLeft + } + + ButtonSunken { + width: 200 + text: "ButtonSunken" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + colorHighlight: "white" + alignment: Qt.AlignLeft + layoutDirection: Qt.LeftToRight + } + ButtonSunken { + width: 200 + text: "ButtonSunken" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + colorHighlight: "white" + alignment: Qt.AlignCenter + layoutDirection: Qt.RightToLeft + } + ButtonSunken { + width: 200 + text: "ButtonSunken" + source: "qrc:/assets/icons_material/baseline-accessibility-24px.svg" + colorHighlight: "white" + alignment: Qt.AlignRight + layoutDirection: Qt.RightToLeft } } //// + ListSeparator { + height: Theme.componentBorderWidth + anchors.leftMargin: -24 + anchors.rightMargin: -24 + } + + //// + Row { anchors.left: parent.left anchors.right: parent.right @@ -546,6 +733,24 @@ Loader { } } + SelectorMenu2 { + height: 32 + anchors.verticalCenter: parent.verticalCenter + + currentSelection: 1 + model: ListModel { + id: lmSelectorMenu2Txt1 + ListElement { idx: 1; txt: "4/3"; src: ""; sz: 0; } + ListElement { idx: 2; txt: "16/9"; src: ""; sz: 0; } + ListElement { idx: 3; txt: "21/9"; src: ""; sz: 0; } + } + + onMenuSelected: (index) => { + //console.log("SelectorMenu clicked #" + index) + currentSelection = index + } + } + SelectorMenu { height: 40 anchors.verticalCenter: parent.verticalCenter @@ -598,8 +803,6 @@ Loader { layer.enabled: true layer.effect: MultiEffect { - autoPaddingEnabled: false - maskEnabled: true maskInverted: false maskThresholdMin: 0.5 diff --git a/qml/ScreenFontInfos.qml b/qml/ScreenFontInfos.qml index 0a4cf8e..cce174e 100644 --- a/qml/ScreenFontInfos.qml +++ b/qml/ScreenFontInfos.qml @@ -74,11 +74,11 @@ Loader { append( {"text": "VeryVeryBig", value: Theme.fontSizeContentVeryVeryBig} ); append( {"text": "VeryBig", value: Theme.fontSizeContentVeryBig} ); append( {"text": "Big", value: Theme.fontSizeContentBig} ); - append( {"text": "", value: Theme.fontSizeContent} ); + append( {"text": "(default)", value: Theme.fontSizeContent} ); + append( {"text": "(components)", value: Theme.componentFontSize} ); append( {"text": "Small", value: Theme.fontSizeContentSmall} ); append( {"text": "VerySmall", value: Theme.fontSizeContentVerySmall} ); append( {"text": "VeryVerySmall", value: Theme.fontSizeContentVeryVerySmall} ); - append( {"text": "Component", value: Theme.componentFontSize} ); } } diff --git a/qml/ScreenSettings.qml b/qml/ScreenSettings.qml index 31ab7f1..660e335 100644 --- a/qml/ScreenSettings.qml +++ b/qml/ScreenSettings.qml @@ -101,76 +101,50 @@ Loader { z: 1 spacing: Theme.componentMargin - Rectangle { // theme "Snow" + Rectangle { // theme mobile light width: wideWideMode ? 80 : 32 height: 32 anchors.verticalCenter: parent.verticalCenter radius: 2 - color: "white" - border.color: (settingsManager.appTheme === "THEME_SNOW") ? Theme.colorSubText : "#ccc" - border.width: 2 + color: (Theme.currentTheme === ThemeEngine.THEME_MOBILE_LIGHT) ? Theme.colorForeground : "#dddddd" + border.color: Theme.colorSecondary + border.width: (Theme.currentTheme === ThemeEngine.THEME_MOBILE_LIGHT) ? 2 : 0 Text { anchors.centerIn: parent visible: wideWideMode - text: qsTr("snow") - textFormat: Text.PlainText - color: (settingsManager.appTheme === "THEME_SNOW") ? Theme.colorSubText : "#ccc" + text: qsTr("light") + color: "#313236" font.bold: true font.pixelSize: Theme.fontSizeContentSmall } MouseArea { anchors.fill: parent - onClicked: settingsManager.appTheme = "THEME_SNOW" + onClicked: settingsManager.appTheme = "THEME_MOBILE_LIGHT" } } - Rectangle { // theme "Day" + Rectangle { // theme mobile dark width: wideWideMode ? 80 : 32 height: 32 anchors.verticalCenter: parent.verticalCenter radius: 2 - color: "#FFE400" // day theme colorSecondary - border.color: Theme.colorPrimary - border.width: (settingsManager.appTheme === "THEME_DAY") ? 2 : 0 + color: (Theme.currentTheme === ThemeEngine.THEME_MOBILE_DARK) ? Theme.colorForeground : "#313236" + border.color: Theme.colorSecondary + border.width: (Theme.currentTheme === ThemeEngine.THEME_MOBILE_DARK) ? 2 : 0 Text { anchors.centerIn: parent visible: wideWideMode - text: qsTr("day") - textFormat: Text.PlainText - color: "white" + text: qsTr("dark") + color: "#dddddd" font.bold: true font.pixelSize: Theme.fontSizeContentSmall } MouseArea { anchors.fill: parent - onClicked: settingsManager.appTheme = "THEME_DAY" - } - } - Rectangle { // theme "Night" - width: wideWideMode ? 80 : 32 - height: 32 - anchors.verticalCenter: parent.verticalCenter - - radius: 2 - color: "#555151" - border.color: Theme.colorPrimary - border.width: (settingsManager.appTheme === "THEME_NIGHT") ? 2 : 0 - - Text { - anchors.centerIn: parent - visible: wideWideMode - text: qsTr("night") - textFormat: Text.PlainText - color: (settingsManager.appTheme === "THEME_NIGHT") ? Theme.colorPrimary : "#ececec" - font.bold: true - font.pixelSize: Theme.fontSizeContentSmall - } - MouseArea { - anchors.fill: parent - onClicked: settingsManager.appTheme = "THEME_NIGHT" + onClicked: settingsManager.appTheme = "THEME_MOBILE_DARK" } } } @@ -179,8 +153,8 @@ Loader { //////// ComboBoxThemed { - anchors.left: parent.left - anchors.leftMargin: screenPaddingLeft + contentColumn.padText + //anchors.left: parent.left + //anchors.leftMargin: screenPaddingLeft + contentColumn.padText anchors.right: parent.right anchors.rightMargin: screenPaddingRight + Theme.componentMargin @@ -188,6 +162,15 @@ Loader { model: ListModel { id: cbAppTheme + ListElement { text: "MOBILE LIGHT"; } + ListElement { text: "MOBILE DARK"; } + + ListElement { text: "MATERIAL LIGHT"; } + ListElement { text: "MATERIAL DARK"; } + + ListElement { text: "DESKTOP LIGHT"; } + ListElement { text: "DESKTOP DARK"; } + ListElement { text: "SNOW"; } ListElement { text: "PLANT"; } ListElement { text: "RAIN"; } @@ -205,7 +188,16 @@ Loader { currentIndex = Theme.getThemeIndex(settingsManager.appTheme) } onActivated: { - if (currentText === "SNOW") settingsManager.appTheme = "THEME_SNOW" + if (currentText === "MOBILE LIGHT") settingsManager.appTheme = "THEME_MOBILE_LIGHT" + else if (currentText === "MOBILE DARK") settingsManager.appTheme = "THEME_MOBILE_DARK" + + else if (currentText === "MATERIAL LIGHT") settingsManager.appTheme = "THEME_MATERIAL_LIGHT" + else if (currentText === "MATERIAL DARK") settingsManager.appTheme = "THEME_MATERIAL_DARK" + + else if (currentText === "DESKTOP LIGHT") settingsManager.appTheme = "THEME_DESKTOP_LIGHT" + else if (currentText === "DESKTOP DARK") settingsManager.appTheme = "THEME_DESKTOP_DARK" + + else if (currentText === "SNOW") settingsManager.appTheme = "THEME_SNOW" else if (currentText === "PLANT") settingsManager.appTheme = "THEME_PLANT" else if (currentText === "RAIN") settingsManager.appTheme = "THEME_RAIN" else if (currentText === "DAY") settingsManager.appTheme = "THEME_DAY" diff --git a/qml/ThemeEngine.qml b/qml/ThemeEngine.qml index 48453c2..ce8f690 100644 --- a/qml/ThemeEngine.qml +++ b/qml/ThemeEngine.qml @@ -5,19 +5,31 @@ import QtQuick.Controls.Material Item { enum ThemeNames { + // Generic mobile themes + THEME_MOBILE_LIGHT, + THEME_MOBILE_DARK, + + // Generic mobile material themes + THEME_MATERIAL_LIGHT, + THEME_MATERIAL_DARK, + + // Generic desktop themes + THEME_DESKTOP_LIGHT, + THEME_DESKTOP_DARK, + // WatchFlower - THEME_SNOW = 0, - THEME_PLANT = 1, - THEME_RAIN = 2, - THEME_DAY = 3, - THEME_NIGHT = 4, - - // Offloadbuddy - THEME_LIGHT_AND_WARM = 5, - THEME_DARK_AND_SPOOKY = 6, - THEME_PLAIN_AND_BORING = 7, - THEME_BLOOD_AND_TEARS = 8, - THEME_MIGHTY_KITTENS = 9, + THEME_SNOW, + THEME_PLANT, + THEME_RAIN, + THEME_DAY, + THEME_NIGHT, + + // OffloadBuddy + THEME_LIGHT_AND_WARM, + THEME_DARK_AND_SPOOKY, + THEME_PLAIN_AND_BORING, + THEME_BLOOD_AND_TEARS, + THEME_MIGHTY_KITTENS, THEME_LAST } @@ -33,30 +45,33 @@ Item { //////////////// + property bool isLight + property bool isDark + // Status bar (mobile) property int themeStatusbar property color colorStatusbar - // Header - property color colorHeader - property color colorHeaderContent - property color colorHeaderHighlight + // Tablet bar (mobile) + property color colorTabletmenu + property color colorTabletmenuContent + property color colorTabletmenuHighlight // Side bar (desktop) property color colorSidebar property color colorSidebarContent property color colorSidebarHighlight + // Header + property color colorHeader + property color colorHeaderContent + property color colorHeaderHighlight + // Action bar property color colorActionbar property color colorActionbarContent property color colorActionbarHighlight - // Tablet bar (mobile) - property color colorTabletmenu - property color colorTabletmenuContent - property color colorTabletmenuHighlight - // Content property color colorBackground property color colorForeground @@ -75,11 +90,20 @@ Item { property color colorLowContrast property color colorHighContrast - // App specific + //////////////// + + // App specific (toolBLEx) property color colorBox: "white" property color colorBoxBorder: "#f4f4f4" - property color colorDeviceWidget + + // App specific (OffloadBuddy) property string sidebarSelector // 'arrow' or 'bar' + + // App specific (WatchFlower) + property color colorDeviceWidget + property color colorLightGrey: "#a9bcb8" + property color colorLightGreen: "#09debc" + readonly property color colorNeutralNight: "#ffb300" readonly property color colorMaterialLightGrey: "#f8f8f8" readonly property color colorMaterialDarkGrey: "#ececec" @@ -160,7 +184,14 @@ Item { //////////////////////////////////////////////////////////////////////////// function getThemeIndex(name) { - if (name === "THEME_DEFAULT") return ThemeEngine.THEME_LIGHT_AND_WARM + if (name === "THEME_MOBILE_LIGHT") return ThemeEngine.THEME_MOBILE_LIGHT + if (name === "THEME_MOBILE_DARK") return ThemeEngine.THEME_MOBILE_DARK + + if (name === "THEME_MATERIAL_LIGHT") return ThemeEngine.THEME_MATERIAL_LIGHT + if (name === "THEME_MATERIAL_DARK") return ThemeEngine.THEME_MATERIAL_DARK + + if (name === "THEME_DESKTOP_LIGHT") return ThemeEngine.THEME_DESKTOP_LIGHT + if (name === "THEME_DESKTOP_DARK") return ThemeEngine.THEME_DESKTOP_DARK if (name === "THEME_SNOW") return ThemeEngine.THEME_SNOW if (name === "THEME_PLANT") return ThemeEngine.THEME_PLANT @@ -176,7 +207,17 @@ Item { return -1 } + function getThemeName(index) { + if (index === ThemeEngine.THEME_MOBILE_LIGHT) return "THEME_MOBILE_LIGHT" + if (index === ThemeEngine.THEME_MOBILE_DARK) return "THEME_MOBILE_DARK" + + if (index === ThemeEngine.THEME_MATERIAL_LIGHT) return "THEME_MATERIAL_LIGHT" + if (index === ThemeEngine.THEME_MATERIAL_DARK) return "THEME_MATERIAL_DARK" + + if (index === ThemeEngine.THEME_DESKTOP_LIGHT) return "THEME_DESKTOP_LIGHT" + if (index === ThemeEngine.THEME_DESKTOP_DARK) return "THEME_DESKTOP_DARK" + if (index === ThemeEngine.THEME_SNOW) return "THEME_SNOW" if (index === ThemeEngine.THEME_PLANT) return "THEME_PLANT" if (index === ThemeEngine.THEME_RAIN) return "THEME_RAIN" @@ -211,9 +252,11 @@ Item { themeIndex = newIndex } - // Validate the result + // Validate the result (or set the default) if (themeIndex < 0 || themeIndex >= ThemeEngine.THEME_LAST) { - themeIndex = ThemeEngine.THEME_LIGHT_AND_WARM // default theme for this app + if (isDesktop) themeIndex = ThemeEngine.THEME_LIGHT_AND_WARM + else if (isMobile) themeIndex = ThemeEngine.THEME_MOBILE_LIGHT + else themeIndex = 1 } // Handle day/night themes @@ -228,8 +271,348 @@ Item { // Do not reload the same theme if (themeIndex === currentTheme) return + // Set the theme + if (themeIndex === ThemeEngine.THEME_MOBILE_LIGHT) { /////////////////// + + colorGreen = "#07bf97" + colorBlue = "#4CA1D5" + colorYellow = "#ffba5a" + colorOrange = "#ff863a" + colorRed = "#ff523a" + + isLight = true + isDark = false + + themeStatusbar = Material.Light + colorStatusbar = colorMaterialDarkGrey + + colorHeader = "#eeeeee" + colorHeaderContent = "#ff7b36" + colorHeaderHighlight = "white" + + colorActionbar = colorGreen + colorActionbarContent = "white" + colorActionbarHighlight = "#00a27d" + + colorTabletmenu = "#f3f3f3" + colorTabletmenuContent = "#9d9d9d" + colorTabletmenuHighlight = colorMaterialDeepOrange // "#ff7b36" + + colorBackground = colorMaterialLightGrey + colorForeground = "#f0f0f0" + + colorPrimary = colorMaterialDeepOrange // colorRed + colorSecondary = colorMaterialOrange // "#ff7b36" + colorSuccess = colorGreen + colorWarning = colorOrange + colorError = colorRed + + colorText = "#303030" + colorSubText = "#666666" + colorIcon = "#303030" + colorSeparator = "#ececec" + colorLowContrast = "white" + colorHighContrast = "black" + + colorComponent = "#f0f0f0" + colorComponentText = "black" + colorComponentContent = "black" + colorComponentBorder = "#d0d0d0" + colorComponentDown = "#e0e0e0" + colorComponentBackground = "white" + + componentRadius = 4 + componentBorderWidth = 2 + + } else if (themeIndex === ThemeEngine.THEME_MOBILE_DARK) { + + colorGreen = "#58CF77" + colorBlue = "#4dceeb" + colorYellow = "#fcc632" + colorOrange = "#ff7657" + colorRed = "#e8635a" + + isLight = false + isDark = true + + themeStatusbar = Material.Dark + colorStatusbar = "#292929" + + colorHeader = "#292929" + colorHeaderContent = "#ee8c21" + colorHeaderHighlight = "#444" + + colorActionbar = colorGreen + colorActionbarContent = "white" + colorActionbarHighlight = "#00a27d" + + colorTabletmenu = "#292929" + colorTabletmenuContent = "#808080" + colorTabletmenuHighlight = "#ff9f1a" + + colorBackground = "#313236" + colorForeground = "#292929" + + colorPrimary = "#ff9f1a" + colorSecondary = "#ffb81a" + colorSuccess = colorGreen + colorWarning = colorOrange + colorError = colorRed + + colorText = "white" + colorSubText = "#aaa" + colorIcon = "#ddd" + colorSeparator = "#404040" + colorLowContrast = "black" + colorHighContrast = "white" + + colorComponent = "#666" + colorComponentText = "#eee" + colorComponentContent = "white" + colorComponentBorder = "#666" + colorComponentDown = "#444" + colorComponentBackground = "#505050" - if (themeIndex === ThemeEngine.THEME_SNOW) { + componentRadius = 4 + componentBorderWidth = 2 + + } else if (themeIndex === ThemeEngine.THEME_MATERIAL_LIGHT) { ///////// + + colorGreen = "#07bf97" + colorBlue = "#4CA1D5" + colorYellow = "#ffba5a" + colorOrange = "#ff863a" + colorRed = "#ff523a" + + isLight = true + isDark = false + + themeStatusbar = Material.Light + colorStatusbar = "white" + + colorHeader = "white" + colorHeaderContent = "#1a73e8" + colorHeaderHighlight = "white" + + colorActionbar = colorGreen + colorActionbarContent = "white" + colorActionbarHighlight = "#00a27d" + + colorTabletmenu = "#f3f3f3" + colorTabletmenuContent = "#9d9d9d" + colorTabletmenuHighlight = "#ff7b36" + + colorBackground = "white" + colorForeground = "#f0f0f0" + + colorPrimary = "#1a73e8" + colorSecondary = "#ff7b36" + colorSuccess = colorGreen + colorWarning = colorOrange + colorError = colorRed + + colorText = "#303030" + colorSubText = "#666666" + colorIcon = "#303030" + colorSeparator = "#ececec" + colorLowContrast = "white" + colorHighContrast = "black" + + colorComponent = "#f0f0f0" + colorComponentText = "black" + colorComponentContent = "black" + colorComponentBorder = "#d0d0d0" + colorComponentDown = "#e0e0e0" + colorComponentBackground = "white" + + componentRadius = 8 + componentBorderWidth = 2 + + } else if (themeIndex === ThemeEngine.THEME_MATERIAL_DARK) { + + colorGreen = "#58CF77" + colorBlue = "#4dceeb" + colorYellow = "#fcc632" + colorOrange = "#ff7657" + colorRed = "#e8635a" + + isLight = false + isDark = true + + themeStatusbar = Material.Dark + colorStatusbar = "#313236" + + colorHeader = "#313236" + colorHeaderContent = "#ee8c21" + colorHeaderHighlight = "#444" + + colorActionbar = colorGreen + colorActionbarContent = "white" + colorActionbarHighlight = "#00a27d" + + colorTabletmenu = "#292929" + colorTabletmenuContent = "#808080" + colorTabletmenuHighlight = "#ff9f1a" + + colorBackground = "#313236" + colorForeground = "#292929" + + colorPrimary = "#ff9f1a" + colorSecondary = "#ffb81a" + colorSuccess = colorGreen + colorWarning = colorOrange + colorError = colorRed + + colorText = "white" + colorSubText = "#aaa" + colorIcon = "#ccc" + colorSeparator = "#404040" + colorLowContrast = "black" + colorHighContrast = "white" + + colorComponent = "#666" + colorComponentText = "#ddd" + colorComponentContent = "white" + colorComponentBorder = "#666" + colorComponentDown = "#444" + colorComponentBackground = "#505050" + + componentRadius = 8 + componentBorderWidth = 2 + + } else if (themeIndex === ThemeEngine.THEME_DESKTOP_LIGHT) { /////////// + + colorYellow = "#facb00" + colorOrange = "#ffa635" + colorRed = "#ff7657" + colorBlue = "#4cafe9" + colorGreen = "#85c700" + + isLight = true + isDark = false + + themeStatusbar = Material.Light + colorStatusbar = "#f1f0ef" + + colorHeader = "#f1f0ef" + colorHeaderContent = "#444" + colorHeaderHighlight = "#e2e1df" + + colorSidebar = "white" + colorSidebarContent = "#444" + colorSidebarHighlight = "#888" + + colorActionbar = "#eaeae8" + colorActionbarContent = "#444" + colorActionbarHighlight = "#bab5b6" + + colorTabletmenu = "#ffffff" + colorTabletmenuContent = "#9d9d9d" + colorTabletmenuHighlight = "#cfcbcb" + + colorBackground = "#f9f8f7" + colorForeground = "#f3f2f1" + + colorPrimary = colorYellow + colorSecondary = "#ffe800" + colorSuccess = colorGreen + colorWarning = colorOrange + colorError = colorRed + + colorText = "#373737" + colorSubText = "#666666" + colorIcon = "#373737" + colorSeparator = "#e8e8e8" + colorLowContrast = "white" + colorHighContrast = "#303030" + + colorComponent = "#eaeaea" + colorComponentText = "black" + colorComponentContent = "black" + colorComponentBorder = "#ddd" + colorComponentDown = "#dadada" + colorComponentBackground = "#fcfcfc" + + componentRadius = 4 + componentBorderWidth = 2 + + // (app) + colorBox = "white" + colorBoxBorder = "#f4f4f4" + //colorGrid = "#ebebeb" + //colorLVheader = "#fafafa" + //colorLVpair = "white" + //colorLVimpair = "#f5f5f5" + //colorLVselected = "#0080e0" + //colorLVseparator = "#e2e2e2" + + } else if (themeIndex === ThemeEngine.THEME_DESKTOP_DARK) { + + colorYellow = "#fcc632" + colorOrange = "#ff8f35" + colorRed = "#e8635a" + colorBlue = "#4dceeb" + colorGreen = "#58cf77" + + isLight = false + isDark = true + + themeStatusbar = Material.Dark + colorStatusbar = "#b16bee" + + colorHeader = "#b16bee" + colorHeaderContent = "white" + colorHeaderHighlight = "#725595" + + colorSidebar = "#b16bee" + colorSidebarContent = "white" + colorSidebarHighlight = "#725595" + + colorActionbar = "#252024" + colorActionbarContent = "white" + colorActionbarHighlight = "#7c54ac" + + colorTabletmenu = "#292929" + colorTabletmenuContent = "#808080" + colorTabletmenuHighlight = "#bb86fc" + + colorBackground = "#2e2a2e" + colorForeground = "#333" + + colorPrimary = "#bb86fc" + colorSecondary = "#b16bee" + colorSuccess = colorGreen + colorWarning = colorOrange + colorError = colorRed + + colorText = "#eee" + colorSubText = "#999" + colorIcon = "#eee" + colorSeparator = "#444" + colorLowContrast = "#111" + colorHighContrast = "white" + + colorComponent = "#757575" + colorComponentText = "#eee" + colorComponentContent = "white" + colorComponentBorder = "#777" + colorComponentDown = "#595959" + colorComponentBackground = "#393939" + + componentRadius = 4 + componentBorderWidth = 2 + + // (app) + colorBox = "#252024" + colorBoxBorder = "#333" + //colorGrid = "#333" + //colorLVheader = "#252024" + //colorLVpair = "#302b2e" + //colorLVimpair = "#252024" + //colorLVseparator = "#333" + //colorLVselected = "#e90c76" + + } else if (themeIndex === ThemeEngine.THEME_SNOW) { //////////////////// colorGreen = "#85c700" colorBlue = "#4cafe9" @@ -237,6 +620,9 @@ Item { colorOrange = "#ffa635" colorRed = "#ff7657" + isLight = true + isDark = false + themeStatusbar = Material.Light colorStatusbar = "white" @@ -257,7 +643,7 @@ Item { colorTabletmenuHighlight = "#0079fe" colorBackground = "white" - colorForeground = colorMaterialLightGrey + colorForeground = "#fbfbfb" colorPrimary = colorYellow colorSecondary = "#ffe800" @@ -272,10 +658,6 @@ Item { colorLowContrast = "white" colorHighContrast = "#303030" - colorDeviceWidget = "#fdfdfd" - - componentRadius = (componentHeight / 2) - colorComponent = "#EFEFEF" colorComponentText = "black" colorComponentContent = "black" @@ -283,6 +665,12 @@ Item { colorComponentDown = "#DADADA" colorComponentBackground = "#FAFAFA" + componentRadius = (componentHeight / 2) + componentBorderWidth = 2 + + // (app) + colorDeviceWidget = "#fdfdfd" + } else if (themeIndex === ThemeEngine.THEME_PLANT) { colorGreen = "#07bf97" @@ -291,6 +679,9 @@ Item { colorOrange = "#ffa635" colorRed = "#ff7657" + isLight = true + isDark = false + themeStatusbar = Material.Dark colorStatusbar = "#009688" @@ -311,10 +702,10 @@ Item { colorTabletmenuHighlight = "#0079fe" colorBackground = (Qt.platform.os === "android" || Qt.platform.os === "ios") ? "white" : colorMaterialLightGrey - colorForeground = (Qt.platform.os === "android" || Qt.platform.os === "ios") ? colorMaterialLightGrey : colorMaterialGrey + colorForeground = (Qt.platform.os === "android" || Qt.platform.os === "ios") ? colorMaterialLightGrey : "#eeeeee" colorPrimary = colorGreen - colorSecondary = "#09debc" + colorSecondary = colorLightGreen colorSuccess = colorGreen colorWarning = colorOrange colorError = colorRed @@ -326,10 +717,6 @@ Item { colorLowContrast = "white" colorHighContrast = "black" - colorDeviceWidget = "#fdfdfd" - - componentRadius = 4 - colorComponent = "#EAEAEA" colorComponentText = "black" colorComponentContent = "black" @@ -337,6 +724,12 @@ Item { colorComponentDown = "#D0D0D0" colorComponentBackground = "#F1F1F1" + componentRadius = 4 + componentBorderWidth = 2 + + // (app) + colorDeviceWidget = "#fdfdfd" + } else if (themeIndex === ThemeEngine.THEME_RAIN) { colorGreen = "#8cd200" @@ -345,6 +738,9 @@ Item { colorOrange = "#ffa635" colorRed = "#ff7657" + isLight = true + isDark = false + themeStatusbar = Material.Dark colorStatusbar = "#1e3c77" @@ -354,7 +750,7 @@ Item { colorSidebar = "#ffcf00" colorSidebarContent = "white" - colorSidebarHighlight = "#ffb300" + colorSidebarHighlight = colorNeutralNight colorActionbar = colorBlue colorActionbarContent = "white" @@ -380,10 +776,6 @@ Item { colorLowContrast = "white" colorHighContrast = "#303030" - colorDeviceWidget = "#fdfdfd" - - componentRadius = 6 - colorComponent = "#EFEFEF" colorComponentText = "black" colorComponentContent = "black" @@ -391,6 +783,12 @@ Item { colorComponentDown = "#DDDDDD" colorComponentBackground = "#FAFAFA" + componentRadius = 6 + componentBorderWidth = 2 + + // (app) + colorDeviceWidget = "#fdfdfd" + } else if (themeIndex === ThemeEngine.THEME_DAY) { colorGreen = "#8cd200" @@ -399,16 +797,19 @@ Item { colorOrange = "#ffa635" colorRed = "#ff7657" + isLight = true + isDark = false + themeStatusbar = Material.Dark - colorStatusbar = "#ffb300" + colorStatusbar = colorNeutralNight colorHeader = "#ffcf00" colorHeaderContent = "white" - colorHeaderHighlight = "#ffb300" + colorHeaderHighlight = colorNeutralNight colorSidebar = "#ffcf00" colorSidebarContent = "white" - colorSidebarHighlight = "#ffb300" + colorSidebarHighlight = colorNeutralNight colorActionbar = colorGreen colorActionbarContent = "white" @@ -434,10 +835,6 @@ Item { colorLowContrast = "white" colorHighContrast = "#303030" - colorDeviceWidget = "#fdfdfd" - - componentRadius = 6 - colorComponent = "#EFEFEF" colorComponentText = "black" colorComponentContent = "black" @@ -445,6 +842,12 @@ Item { colorComponentDown = "#DDDDDD" colorComponentBackground = "#FAFAFA" + componentRadius = 6 + componentBorderWidth = 2 + + // (app) + colorDeviceWidget = "#fdfdfd" + } else if (themeIndex === ThemeEngine.THEME_NIGHT) { colorGreen = "#58CF77" @@ -453,6 +856,9 @@ Item { colorOrange = "#ff8f35" colorRed = "#e8635a" + isLight = false + isDark = true + themeStatusbar = Material.Dark colorStatusbar = "#725595" @@ -488,10 +894,6 @@ Item { colorLowContrast = "#111" colorHighContrast = "white" - colorDeviceWidget = "#333" - - componentRadius = 4 - colorComponent = "#757575" colorComponentText = "#eee" colorComponentContent = "white" @@ -499,15 +901,19 @@ Item { colorComponentDown = "#595959" colorComponentBackground = "#292929" - } + componentRadius = 4 + componentBorderWidth = 2 + // (app) + colorDeviceWidget = "#333" + } else if (themeIndex === ThemeEngine.THEME_LIGHT_AND_WARM) { ////////// - if (themeIndex === ThemeEngine.THEME_LIGHT_AND_WARM) { + isLight = true + isDark = false themeStatusbar = Material.Dark colorStatusbar = "#BBB" - colorHeader = "#DADADA" colorHeaderContent = "#353637" colorHeaderHighlight = Qt.darker(colorHeader, 1.1) @@ -516,9 +922,9 @@ Item { colorSidebarContent = "white" colorSidebarHighlight = Qt.lighter(colorSidebar, 1.5) - colorActionbar = "#8CD200" - colorActionbarContent = "white" - colorActionbarHighlight = "#73AD00" + colorActionbar = "#e9e9e9" + colorActionbarContent = "#333" + colorActionbarHighlight = "#dadada" colorTabletmenu = "#f3f3f3" colorTabletmenuContent = "#9d9d9d" @@ -548,10 +954,16 @@ Item { colorComponentBackground = "#FAFAFA" componentRadius = 6 + componentBorderWidth = 2 + + // (app) sidebarSelector = "" } else if (themeIndex === ThemeEngine.THEME_DARK_AND_SPOOKY) { + isLight = false + isDark = true + themeStatusbar = Material.Dark colorStatusbar = "black" @@ -595,10 +1007,16 @@ Item { colorComponentBackground = "#333" componentRadius = 3 + componentBorderWidth = 2 + + // (app) sidebarSelector = "" } else if (themeIndex === ThemeEngine.THEME_PLAIN_AND_BORING) { + isLight = true + isDark = false + themeStatusbar = Material.Dark colorStatusbar = "#BBB" @@ -642,10 +1060,16 @@ Item { colorComponentBackground = "#FAFAFA" componentRadius = 4 + componentBorderWidth = 2 + + // (app) sidebarSelector = "arrow" } else if (themeIndex === ThemeEngine.THEME_BLOOD_AND_TEARS) { + isLight = false + isDark = true + themeStatusbar = Material.Dark colorStatusbar = "black" @@ -689,10 +1113,16 @@ Item { colorComponentBackground = "white" componentRadius = 2 + componentBorderWidth = 2 + + // (app) sidebarSelector = "bar" } else if (themeIndex === ThemeEngine.THEME_MIGHTY_KITTENS) { + isLight = true + isDark = false + themeStatusbar = Material.Dark colorStatusbar = "#944197" @@ -736,9 +1166,12 @@ Item { colorComponentBackground = "#FFF4F9" componentRadius = (componentHeight / 2) + componentBorderWidth = 2 + + // (app) sidebarSelector = "" - } + } // This will emit the signal 'onCurrentThemeChanged' currentTheme = themeIndex diff --git a/qml/components.qrc b/qml/components.qrc deleted file mode 100644 index 7154e43..0000000 --- a/qml/components.qrc +++ /dev/null @@ -1,94 +0,0 @@ - - - components_generic/CsdMac.qml - components_generic/CsdWindows.qml - components_generic/CsdLinux.qml - components_generic/DesktopHeaderItem.qml - components_generic/DesktopSidebarItem.qml - components_generic/MobileMenuItem_horizontal.qml - components_generic/MobileMenuItem_vertical.qml - - components_generic/ActionMenu_bottom.qml - components_generic/ActionMenu_floating.qml - components_generic/ActionMenuItem.qml - components_generic/ActionMenuSeparator.qml - components_generic/ButtonCompactable.qml - components_generic/ButtonImage.qml - components_generic/ButtonText.qml - components_generic/ButtonWireframe.qml - components_generic/ButtonWireframeIcon.qml - components_generic/ButtonWireframeIconCentered.qml - components_generic/DataBarCompact.qml - components_generic/DataBarSolid.qml - components_generic/DatePicker6.qml - components_generic/IconSvg.qml - components_generic/ItemBadge.qml - components_generic/ItemTag.qml - components_generic/ItemTagButton.qml - components_generic/MiddleSliderArrow.qml - components_generic/MiddleSliderValueSolid.qml - components_generic/ProgressArc.qml - components_generic/ProgressCircle.qml - components_generic/RoundButtonIcon.qml - components_generic/RoundButtonText.qml - components_generic/RangeSliderArrow.qml - components_generic/RangeSliderValueSolid.qml - components_generic/SectionTitle.qml - components_generic/SelectorMenu.qml - components_generic/SelectorMenuItem.qml - components_generic/SliderArrow.qml - components_generic/SliderValueSolid.qml - components_generic/ToolTipFlat.qml - - components_generic/DrawerItem.qml - components_generic/DrawerButton.qml - components_generic/ListItem.qml - components_generic/ListItemClickable.qml - components_generic/ListSeparator.qml - components_generic/ListSeparatorPadded.qml - components_generic/ListTitle.qml - - components_generic/AndroidButton.qml - components_generic/AndroidButtonIcon.qml - components_generic/AndroidTextField.qml - - components_generic/FrameBox.qml - components_themed/FrameThemed.qml - components_themed/GroupBoxThemed.qml - components_themed/PaneThemed.qml - - components_themed/ButtonIconThemed.qml - components_themed/ButtonThemed.qml - components_themed/CheckBoxThemed.qml - components_themed/ComboBoxThemed.qml - components_themed/DialThemed.qml - components_themed/DrawerThemed.qml - components_themed/ItemDelegateThemed.qml - components_themed/MiddleSliderThemed.qml - components_themed/PageIndicatorThemed.qml - components_themed/ProgressBarThemed.qml - components_themed/RadioButtonThemed.qml - components_themed/RangeSliderThemed.qml - components_themed/RippleThemed.qml - components_themed/RoundButtonThemed.qml - components_themed/RoundButtonIconThemed.qml - components_themed/ScrollBarThemed.qml - components_themed/SelectorMenuThemed.qml - components_themed/SelectorMenuThemedItem.qml - components_themed/SliderThemed.qml - components_themed/SpinBoxThemed_desktop.qml - components_themed/SpinBoxThemed_mobile.qml - components_themed/SwitchThemed_desktop.qml - components_themed/SwitchThemed_mobile.qml - components_themed/TextAreaThemed.qml - components_themed/TextEditThemed.qml - components_themed/TextFieldThemed.qml - components_themed/TumblerThemed.qml - - - - components_js/UtilsNumber.js - components_js/UtilsPath.js - components_js/UtilsString.js - - diff --git a/qml/components_generic/ActionMenu_bottom.qml b/qml/components_generic/ActionMenu_bottom.qml deleted file mode 100644 index 529a042..0000000 --- a/qml/components_generic/ActionMenu_bottom.qml +++ /dev/null @@ -1,98 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T -import Qt.labs.qmlmodels 1.0 - -import ThemeEngine 1.0 - -T.Popup { - id: actionMenu - - width: parent.width - height: contentColumn.height - - padding: 0 - margins: 0 - - modal: true - dim: true - focus: isMobile - closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutside - parent: Overlay.overlay - - property var model: null - - property int layoutDirection: Qt.LeftToRight - - signal menuSelected(var index) - - //////////////////////////////////////////////////////////////////////////// - - y: appWindow.height - - 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 } - } - - //////////////////////////////////////////////////////////////////////////// - - background: Rectangle { - color: Theme.colorComponentBackground - Rectangle { - width: parent.width - height: Theme.componentBorderWidth - color: Theme.colorSeparator - } - } - - //////////////////////////////////////////////////////////////////////////// - - contentItem: Item { - Column { - id: contentColumn - width: parent.width - - topPadding: 12 - bottomPadding: 8 - spacing: 4 - - DelegateChooser { - id: chooser - role: "t" - DelegateChoice { - roleValue: "sep" - ActionMenuSeparator { - width: actionMenu.width - } - } - DelegateChoice { - roleValue: "itm" - ActionMenuItem { - width: actionMenu.width - index: idx - text: txt - source: src - layoutDirection: actionMenu.layoutDirection - onClicked: { - actionMenu.menuSelected(idx) - actionMenu.close() - } - } - } - } - - Repeater { - model: actionMenu.model - delegate: chooser - } - } - } - - //////////////////////////////////////////////////////////////////////////// -} diff --git a/qml/components_generic/ActionMenu_floating.qml b/qml/components_generic/ActionMenu_floating.qml deleted file mode 100644 index a05bc4f..0000000 --- a/qml/components_generic/ActionMenu_floating.qml +++ /dev/null @@ -1,87 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T -import Qt.labs.qmlmodels 1.0 - -import ThemeEngine 1.0 - -T.Popup { - id: actionMenu - - width: 200 - height: contentColumn.height - - padding: 0 - margins: 0 - - modal: true - dim: false - focus: isMobile - closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutside - //parent: Overlay.overlay - - property var model: null - - property int layoutDirection: Qt.LeftToRight - - signal menuSelected(var index) - - //////////////////////////////////////////////////////////////////////////// - - enter: Transition { NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 133; } } - exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 133; } } - - //////////////////////////////////////////////////////////////////////////// - - background: Rectangle { - color: Theme.colorComponentBackground - radius: Theme.componentRadius - border.color: Theme.colorSeparator - border.width: Theme.componentBorderWidth - } - - //////////////////////////////////////////////////////////////////////////// - - contentItem: Item { - Column { - id: contentColumn - width: parent.width - - topPadding: 10 - bottomPadding: 10 - spacing: 4 - - DelegateChooser { - id: chooser - role: "t" - DelegateChoice { - roleValue: "sep" - ActionMenuSeparator { - width: actionMenu.width - } - } - DelegateChoice { - roleValue: "itm" - ActionMenuItem { - width: actionMenu.width - index: idx - text: txt - source: src - layoutDirection: actionMenu.layoutDirection - onClicked: { - actionMenu.menuSelected(idx) - actionMenu.close() - } - } - } - } - - Repeater { - model: actionMenu.model - delegate: chooser - } - } - } - - //////////////////////////////////////////////////////////////////////////// -} diff --git a/qml/components_generic/AndroidButton.qml b/qml/components_generic/AndroidButton.qml deleted file mode 100644 index f0ee3a5..0000000 --- a/qml/components_generic/AndroidButton.qml +++ /dev/null @@ -1,91 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T - -//import QtGraphicalEffects 1.15 // Qt5 -import Qt5Compat.GraphicalEffects // Qt6 - -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber - -T.Button { - id: control - - implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, - implicitContentWidth + leftPadding + rightPadding) - implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, - implicitContentHeight + topPadding + bottomPadding) - - leftPadding: 12 - rightPadding: 12 - - focusPolicy: Qt.NoFocus - - // colors - property string primaryColor: Theme.colorPrimary - - //////////////// - - MouseArea { - id: mouseArea - anchors.fill: control - - hoverEnabled: false - propagateComposedEvents: false - - onClicked: control.clicked() - } - - //////////////// - - background: Item { - implicitWidth: 80 - implicitHeight: 48 - - Rectangle { // mouseBackground - width: mouseArea.pressed ? control.width*2 : 0 - height: width - radius: width - - x: mouseArea.mouseX + 4 - (width / 2) - y: mouseArea.mouseY + 4 - (width / 2) - - color: control.primaryColor - opacity: mouseArea.pressed ? 0.1 : 0 - Behavior on opacity { NumberAnimation { duration: 333 } } - Behavior on width { NumberAnimation { duration: 333 } } - } - - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - x: background.x - y: background.y - width: background.width - height: background.height - radius: 8 - } - } - } - - //////////////// - - contentItem: Text { - text: control.text - textFormat: Text.PlainText - - font.bold: false - font.pixelSize: Theme.componentFontSize - font.capitalization: Font.AllUppercase - - elide: Text.ElideMiddle - //wrapMode: Text.WordWrap - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - - color: control.primaryColor - opacity: enabled ? 1.0 : 0.33 - } - - //////////////// -} diff --git a/qml/components_generic/ButtonWireframe.qml b/qml/components_generic/ButtonWireframe.qml deleted file mode 100644 index 6d69a37..0000000 --- a/qml/components_generic/ButtonWireframe.qml +++ /dev/null @@ -1,125 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T - -//import QtGraphicalEffects 1.15 // Qt5 -import Qt5Compat.GraphicalEffects // Qt6 - -import ThemeEngine 1.0 - -T.Button { - id: control - - implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, - implicitContentWidth + leftPadding + rightPadding) - implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, - implicitContentHeight + topPadding + bottomPadding) - - leftPadding: 12 - rightPadding: 12 - - font.pixelSize: Theme.componentFontSize - font.bold: false - - focusPolicy: Qt.NoFocus - - // colors - property bool fullColor: false - property string fulltextColor: "white" - property string primaryColor: Theme.colorPrimary - property string secondaryColor: Theme.colorComponentBackground - - // animation - property bool hoverAnimation: isDesktop - - //////////////// - - MouseArea { - id: mousearea - anchors.fill: control - - enabled: control.hoverAnimation - hoverEnabled: control.hoverAnimation - - onClicked: control.clicked() - onPressAndHold: control.pressAndHold() - - onPressed: { - control.down = true - mouseBackground.width = (control.width * 2) - } - onReleased: { - control.down = false - //mouseBackground.width = 0 // disabled, we let the click expand the ripple - } - onEntered: { - mouseBackground.width = 72 - } - onExited: { - control.down = false - mouseBackground.width = 0 - } - onCanceled: { - control.down = false - mouseBackground.width = 0 - } - } - - //////////////// - - background: Rectangle { - implicitWidth: 80 - implicitHeight: Theme.componentHeight - - radius: Theme.componentRadius - opacity: enabled ? (control.down && !control.hoverAnimation ? 0.8 : 1.0) : 0.4 - color: control.fullColor ? control.primaryColor : control.secondaryColor - border.width: Theme.componentBorderWidth - border.color: control.fullColor ? Qt.darker(color, 1.03) : Theme.colorComponentBorder - - Item { - anchors.fill: parent - - Rectangle { // mouseBackground - id: mouseBackground - width: 0; height: width; radius: width; - x: mousearea.mouseX - (width / 2) - y: mousearea.mouseY - (width / 2) - - visible: control.hoverAnimation - color: "white" - opacity: mousearea.containsMouse ? 0.16 : 0 - Behavior on opacity { NumberAnimation { duration: 333 } } - Behavior on width { NumberAnimation { duration: 200 } } - } - - layer.enabled: control.hoverAnimation - layer.effect: OpacityMask { - maskSource: Rectangle { - x: background.x - y: background.y - width: background.width - height: background.height - radius: background.radius - } - } - } - } - - //////////////// - - contentItem: Text { - text: control.text - textFormat: Text.PlainText - - font: control.font - elide: Text.ElideMiddle - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - - opacity: enabled ? (control.down && !control.hoverAnimation ? 0.8 : 1.0) : 0.66 - color: control.fullColor ? control.fulltextColor : control.primaryColor - } - - //////////////// -} diff --git a/qml/components_generic/ButtonWireframeIcon.qml b/qml/components_generic/ButtonWireframeIcon.qml deleted file mode 100644 index 52b24d9..0000000 --- a/qml/components_generic/ButtonWireframeIcon.qml +++ /dev/null @@ -1,157 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T -import QtQuick.Layouts 1.15 - -//import QtGraphicalEffects 1.15 // Qt5 -import Qt5Compat.GraphicalEffects // Qt6 - -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber - -T.Button { - id: control - - implicitWidth: implicitContentWidth + leftPadding + rightPadding - implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, - implicitContentHeight + topPadding + bottomPadding) - - leftPadding: 12 - rightPadding: 12 + (control.source.toString().length && control.text ? 2 : 0) - spacing: 6 - - font.pixelSize: Theme.componentFontSize - font.bold: false - - focusPolicy: Qt.NoFocus - - // settings - property url source - property int sourceSize: UtilsNumber.alignTo(height * 0.666, 2) - property int layoutDirection: Qt.LeftToRight - - // colors - property bool fullColor: false - property string fulltextColor: "white" - property string primaryColor: Theme.colorPrimary - property string secondaryColor: Theme.colorComponentBackground - - // animation - property bool hoverAnimation: isDesktop - - //////////////// - - MouseArea { - id: mousearea - anchors.fill: parent - - enabled: control.hoverAnimation - hoverEnabled: control.hoverAnimation - - onClicked: control.clicked() - onPressAndHold: control.pressAndHold() - - onPressed: { - control.down = true - mouseBackground.width = (control.width * 2) - } - onReleased: { - control.down = false - //mouseBackground.width = 0 // disabled, we let the click expand the ripple - } - - onEntered: { - mouseBackground.width = 72 - } - onExited: { - control.down = false - mouseBackground.width = 0 - } - onCanceled: { - control.down = false - mouseBackground.width = 0 - } - } - - //////////////// - - background: Rectangle { - implicitWidth: 80 - implicitHeight: Theme.componentHeight - - radius: Theme.componentRadius - opacity: enabled ? (control.down && !control.hoverAnimation ? 0.8 : 1.0) : 0.4 - color: control.fullColor ? control.primaryColor : control.secondaryColor - - border.width: Theme.componentBorderWidth - border.color: control.fullColor ? Qt.darker(color, 1.03) : Theme.colorComponentBorder - - Item { - anchors.fill: parent - - Rectangle { // mouseBackground - id: mouseBackground - width: 0; height: width; radius: width; - x: mousearea.mouseX - (width / 2) - y: mousearea.mouseY - (width / 2) - - visible: control.hoverAnimation - color: "white" - opacity: mousearea.containsMouse ? 0.16 : 0 - Behavior on opacity { NumberAnimation { duration: 333 } } - Behavior on width { NumberAnimation { duration: 200 } } - } - - layer.enabled: control.hoverAnimation - layer.effect: OpacityMask { - maskSource: Rectangle { - x: background.x - y: background.y - width: background.width - height: background.height - radius: background.radius - } - } - } - } - - //////////////// - - contentItem: RowLayout { - spacing: control.spacing - layoutDirection: control.layoutDirection - - IconSvg { - width: control.sourceSize - height: control.sourceSize - - visible: control.source.toString().length - Layout.maximumWidth: control.sourceSize - Layout.maximumHeight: control.sourceSize - Layout.alignment: Qt.AlignVCenter - - source: control.source - color: control.fullColor ? control.fulltextColor : control.primaryColor - opacity: enabled ? (control.down && !control.hoverAnimation ? 0.8 : 1.0) : 0.66 - } - - Text { - text: control.text - textFormat: Text.PlainText - - visible: control.text - Layout.fillWidth: true - Layout.alignment: Qt.AlignVCenter - - font: control.font - elide: Text.ElideMiddle - horizontalAlignment: Text.AlignLeft - verticalAlignment: Text.AlignVCenter - - color: control.fullColor ? control.fulltextColor : control.primaryColor - opacity: enabled ? (control.down && !control.hoverAnimation ? 0.8 : 1.0) : 0.66 - } - } - - //////////////// -} diff --git a/qml/components_generic/ButtonWireframeIconCentered.qml b/qml/components_generic/ButtonWireframeIconCentered.qml deleted file mode 100644 index f4fa856..0000000 --- a/qml/components_generic/ButtonWireframeIconCentered.qml +++ /dev/null @@ -1,153 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T -import QtQuick.Layouts 1.15 - -//import QtGraphicalEffects 1.15 // Qt5 -import Qt5Compat.GraphicalEffects // Qt6 - -import ThemeEngine 1.0 -import "qrc:/js/UtilsNumber.js" as UtilsNumber - -T.Button { - id: control - - implicitWidth: implicitContentWidth + leftPadding + rightPadding - implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, - implicitContentHeight + topPadding + bottomPadding) - - leftPadding: 12 - rightPadding: 12 + (control.source.toString().length && control.text ? 2 : 0) - spacing: 6 - - font.pixelSize: Theme.componentFontSize - font.bold: false - - focusPolicy: Qt.NoFocus - - // settings - property url source - property int sourceSize: UtilsNumber.alignTo(height * 0.666, 2) - property int layoutDirection: Qt.LeftToRight - - // colors - property bool fullColor: false - property string fulltextColor: "white" - property string primaryColor: Theme.colorPrimary - property string secondaryColor: Theme.colorComponentBackground - - // animation - property bool hoverAnimation: isDesktop - - //////////////// - - MouseArea { - id: mousearea - anchors.fill: parent - enabled: control.hoverAnimation - - hoverEnabled: control.hoverAnimation - - onClicked: control.clicked() - onPressAndHold: control.pressAndHold() - - onPressed: { - control.down = true - mouseBackground.width = (control.width * 2) - } - onReleased: { - control.down = false - //mouseBackground.width = 0 // disabled, we let the click expand the ripple - } - - onEntered: { - mouseBackground.width = 72 - } - onExited: { - control.down = false - mouseBackground.width = 0 - } - onCanceled: { - control.down = false - mouseBackground.width = 0 - } - } - - //////////////// - - background: Rectangle { - implicitWidth: 80 - implicitHeight: Theme.componentHeight - - radius: Theme.componentRadius - opacity: enabled ? (control.down && !control.hoverAnimation ? 0.8 : 1.0) : 0.4 - color: control.fullColor ? control.primaryColor : control.secondaryColor - - border.width: Theme.componentBorderWidth - border.color: control.fullColor ? Qt.darker(color, 1.03) : Theme.colorComponentBorder - - Item { - anchors.fill: parent - - Rectangle { // mouseBackground - id: mouseBackground - width: 0; height: width; radius: width; - x: mousearea.mouseX - (width / 2) - y: mousearea.mouseY - (width / 2) - - visible: control.hoverAnimation - color: "white" - opacity: mousearea.containsMouse ? 0.16 : 0 - Behavior on opacity { NumberAnimation { duration: 333 } } - Behavior on width { NumberAnimation { duration: 200 } } - } - - layer.enabled: control.hoverAnimation - layer.effect: OpacityMask { - maskSource: Rectangle { - x: background.x - y: background.y - width: background.width - height: background.height - radius: background.radius - } - } - } - } - - //////////////// - - contentItem: Item { - Row { - anchors.centerIn: parent - spacing: control.spacing - layoutDirection: control.layoutDirection - - IconSvg { - anchors.verticalCenter: parent.verticalCenter - visible: control.source.toString().length - - source: control.source - width: control.sourceSize - height: control.sourceSize - - opacity: enabled ? (control.down && !control.hoverAnimation ? 0.8 : 1.0) : 0.66 - color: control.fullColor ? control.fulltextColor : control.primaryColor - } - - Text { - anchors.verticalCenter: parent.verticalCenter - visible: control.text - - text: control.text - textFormat: Text.PlainText - font: control.font - - opacity: enabled ? (control.down && !control.hoverAnimation ? 0.8 : 1.0) : 0.66 - color: control.fullColor ? control.fulltextColor : control.primaryColor - } - } - } - - //////////////// -} diff --git a/qml/components_generic/DatePicker5.qml b/qml/components_generic/DatePicker5.qml deleted file mode 100644 index 2c9c0ab..0000000 --- a/qml/components_generic/DatePicker5.qml +++ /dev/null @@ -1,249 +0,0 @@ -import QtQuick 2.15 - -import Qt.labs.calendar 1.0 - -import ThemeEngine 1.0 - -Item { - id: datePicker - implicitWidth: 320 - implicitHeight: 480 - - //////////////////////////////////////////////////////////////////////////// - - //property var locale: Qt.locale() - - property var today: new Date() - property bool isToday: false - - property var minDate: null - property var maxDate: null - - property date initialDate - property date currentDate - - signal updateDate(var newdate) - - function openDate(date) { - //console.log("openDate(" + date + ")") - minDate = null - maxDate = null - - initialDate = date - currentDate = date - - today = new Date() - grid.month = date.getMonth() - - printDate() - } - - function openDate_limits(datetime, min, max) { - openDate(datetime) - - minDate = min - maxDate = max - } - - function printDate() { - var thismonth = new Date(grid.year, grid.month) - bigMonth.text = thismonth.toLocaleString(locale, "MMMM") - - isToday = (today.toLocaleString(locale, "dd MMMM yyyy") === currentDate.toLocaleString(locale, "dd MMMM yyyy")) - } - - Component.onCompleted: { - openDate(new Date()) - } - - //////////////////////////////////////////////////////////////////////////// - - Rectangle { - id: background - anchors.fill: parent - - clip: false - radius: Theme.componentRadius*2 - color: Theme.colorBackground - border.width: Theme.componentBorderWidth - border.color: Theme.colorSeparator - - //////// - - Rectangle { - id: motw - anchors.left: parent.left - anchors.right: parent.right - - z: 3 - height: 48 - radius: Theme.componentRadius*2 - color: Theme.colorSeparator - - Rectangle { - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: parent.bottom - height: (parent.height / 2) - color: parent.color - } - - RoundButtonIcon { - width: 48; height: 48; - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - source: "qrc:/assets/icons_material/baseline-chevron_left-24px.svg" - - onClicked: { - if (grid.month > 0) { - grid.month-- - } else { - grid.month = 11 - grid.year-- - } - printDate() - } - } - Text { - id: bigMonth - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - text: currentDate.toLocaleString(locale, "MMMM") // "Octobre" - font.capitalization: Font.Capitalize - font.pixelSize: Theme.fontSizeContentBig - color: Theme.colorText - } - RoundButtonIcon { - anchors.right: parent.right - width: 48; height: 48; - anchors.verticalCenter: parent.verticalCenter - source: "qrc:/assets/icons_material/baseline-chevron_right-24px.svg" - - onClicked: { - if (grid.month < 11) { - grid.month++ - } else { - grid.month = 0 - grid.year++ - } - printDate() - } - } - } - - //////// - - Rectangle { - id: dow - anchors.top: motw.bottom - anchors.left: parent.left - anchors.leftMargin: Theme.componentBorderWidth - anchors.right: parent.right - anchors.rightMargin: Theme.componentBorderWidth - - z: 2 - height: 48 - color: Qt.lighter(Theme.colorSeparator, 1.1) - - DayOfWeekRow { - anchors.left: parent.left - anchors.leftMargin: 4 - anchors.right: parent.right - anchors.rightMargin: 4 - anchors.verticalCenter: parent.verticalCenter - - //locale: datePicker.locale - - delegate: Text { - anchors.bottom: parent.bottom - text: model.shortName.substring(0, 1).toUpperCase() - color: Theme.colorText - font.bold: true - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - } - } - } - - //////// - - MonthGrid { - id: grid - anchors.top: dow.bottom - anchors.left: parent.left - anchors.leftMargin: 4 - anchors.right: parent.right - anchors.rightMargin: 4 - anchors.bottom: parent.bottom - - //locale: datePicker.locale - - delegate: Text { - width: ((grid.width - 8) / 7) - height: (grid.height / 6) - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - - opacity: (model.month === grid.month ? 1 : 0.2) - text: model.day - font: grid.font - //font.bold: model.isToday - color: selected ? "white" : Theme.colorSubText - - property bool selected: (model.day === currentDate.getDate() && - model.month === currentDate.getMonth() && - model.year === currentDate.getFullYear()) - - Rectangle { - z: -1 - anchors.centerIn: parent - width: Math.min(parent.width, parent.height) - height: width - radius: width - color: selected ? Theme.colorSecondary : "transparent" //Theme.colorBackground - border.color: Theme.colorSecondary - border.width: model.isToday ? Theme.componentBorderWidth : 0 - } - } - - onClicked: (date) => { - if (date.getMonth() === grid.month) { - // validate date (min / max) - if (minDate && maxDate) { - const diffMinTime = (minDate - date) - const diffMinDays = -Math.ceil(diffMinTime / (1000 * 60 * 60 * 24) - 1) - //console.log(diffMinDays + " diffMinDays") - const diffMaxTime = (minDate - date) - const diffMaxDays = -Math.ceil(diffMaxTime / (1000 * 60 * 60 * 24) - 1) - //console.log(diffMaxDays + " diffMaxDays") - - if (diffMinDays > -1 && diffMaxDays < 1) { - date.setHours(currentDate.getHours(), - currentDate.getMinutes(), - currentDate.getSeconds()) - currentDate = date - updateDate(currentDate) - } - } else { - const diffTime = (today - date) - const diffDays = -Math.ceil(diffTime / (1000 * 60 * 60 * 24) - 1) - //console.log(diffDays + " days") - - // validate date (-15 / today) - if (diffDays > -15 && diffDays < 1) { - date.setHours(currentDate.getHours(), - currentDate.getMinutes(), - currentDate.getSeconds()) - currentDate = date - updateDate(currentDate) - } - } - - printDate() - } - } - } - - //////// - } -} diff --git a/qml/components_generic/MobileMenuItem_vertical.qml b/qml/components_generic/MobileMenuItem_vertical.qml deleted file mode 100644 index d3eeb7a..0000000 --- a/qml/components_generic/MobileMenuItem_vertical.qml +++ /dev/null @@ -1,85 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Layouts 1.15 -import QtQuick.Controls.impl 2.15 -import QtQuick.Templates 2.15 as T - -import ThemeEngine 1.0 - -T.Button { - id: control - - implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, - implicitContentWidth + leftPadding + rightPadding) - implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, - implicitContentHeight + topPadding + bottomPadding) - - leftPadding: 0 - rightPadding: 0 - - focusPolicy: Qt.NoFocus - - // icon - property url source - property int sourceSize: 26 - - // colors - property string colorContent: Theme.colorTabletmenuContent - property string colorHighlight: Theme.colorTabletmenuHighlight - - //////////////// - - background: Item { - implicitWidth: Theme.componentHeight - implicitHeight: Theme.componentHeight - } - - //////////////// - - contentItem: ColumnLayout { - spacing: -2 - - IconSvg { // contentImage - Layout.preferredWidth: control.sourceSize - Layout.preferredHeight: control.sourceSize - Layout.alignment: Qt.AlignHCenter - - visible: source.toString().length - - source: control.source - opacity: control.enabled ? 1.0 : 0.33 - color: control.highlighted ? control.colorHighlight : control.colorContent - Behavior on color { ColorAnimation { duration: 233 } } - - Rectangle { // backgroundIndicator - anchors.centerIn: parent - z: -1 - - width: 60 - height: 32 - radius: height - color: control.colorHighlight - - opacity: control.highlighted ? 0.2 : 0 - Behavior on opacity { OpacityAnimator { duration: 233 } } - } - } - - Text { // contentText - Layout.preferredWidth: control.width - Layout.alignment: Qt.AlignHCenter - - visible: text - - text: control.text - textFormat: Text.PlainText - horizontalAlignment: Text.AlignHCenter - font.pixelSize: Theme.fontSizeContentVerySmall - font.bold: true - - color: control.highlighted ? control.colorHighlight : control.colorContent - Behavior on color { ColorAnimation { duration: 233 } } - } - } - - //////////////// -} diff --git a/qml/components_generic/SimpleShadow5.qml b/qml/components_generic/SimpleShadow5.qml deleted file mode 100644 index 400a17b..0000000 --- a/qml/components_generic/SimpleShadow5.qml +++ /dev/null @@ -1,33 +0,0 @@ -import QtQuick 2.15 -import QtGraphicalEffects 1.15 - -Item { - anchors.fill: parent - z: -1 - - property string color: "#666" - property alias radius: shadowarea.radius - property bool filled: true - - Rectangle { - id: shadowarea - anchors.fill: parent - - visible: false - color: parent.filled ? parent.color : "transparent" - - border.width: parent.filled ? 0 : 4 - border.color: parent.color - } - DropShadow { - anchors.fill: parent - - source: shadowarea - cached: true - radius: 16.0 - samples: (radius*2 + 1) - color: parent.color - horizontalOffset: 0 - verticalOffset: 0 - } -} diff --git a/qml/components_generic/SimpleShadow6.qml b/qml/components_generic/SimpleShadow6.qml deleted file mode 100644 index e8157d0..0000000 --- a/qml/components_generic/SimpleShadow6.qml +++ /dev/null @@ -1,34 +0,0 @@ -import QtQuick -import Qt5Compat.GraphicalEffects - -Item { - anchors.fill: parent - z: -1 - - property string color: "#666" - property alias radius: shadowarea.radius - property bool filled: true - - Rectangle { - id: shadowarea - anchors.fill: parent - - visible: false - color: parent.filled ? parent.color : "transparent" - - border.width: parent.filled ? 0 : 4 - border.color: parent.color - } - DropShadow { - anchors.fill: parent - - source: shadowarea - cached: true - radius: 16.0 - //spread: 24 - //samples: 25 // (radius*2 + 1) - color: parent.color - horizontalOffset: 0 - verticalOffset: 0 - } -} diff --git a/qml/popups/PopupChoice.qml b/qml/popups/PopupChoice.qml index af66b78..759ba7a 100644 --- a/qml/popups/PopupChoice.qml +++ b/qml/popups/PopupChoice.qml @@ -26,7 +26,8 @@ Popup { //////////////////////////////////////////////////////////////////////////// - //enter: Transition { NumberAnimation { property: "opacity"; from: 0.333; to: 1.0; duration: 233; } } + enter: Transition { NumberAnimation { property: "opacity"; from: 0.5; to: 1.0; duration: 133; } } + //exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 200; } } background: Rectangle { color: Theme.colorBackground @@ -89,22 +90,20 @@ Popup { property int btnSize: singleColumn ? width : ((width-spacing*2) / 3) - ButtonWireframe { + ButtonSolid { width: parent.btnSize text: qsTr("Cancel") - primaryColor: Theme.colorSubText - secondaryColor: Theme.colorForeground + colorBackground: Theme.colorSubText onClicked: popupChoice.close() } - ButtonWireframe { + ButtonSolid { width: parent.btnSize text: qsTr("Delete local data") - primaryColor: Theme.colorWarning - fullColor: true + colorBackground: Theme.colorWarning onClicked: { if (selectedDevice) { @@ -115,12 +114,11 @@ Popup { } } - ButtonWireframe { + ButtonSolid { width: parent.btnSize text: qsTr("Delete sensor data") - primaryColor: Theme.colorError - fullColor: true + colorBackground: Theme.colorError onClicked: { if (selectedDevice) { diff --git a/qml/popups/PopupDate6.qml b/qml/popups/PopupDate.qml similarity index 88% rename from qml/popups/PopupDate6.qml rename to qml/popups/PopupDate.qml index 67f7972..40e6680 100644 --- a/qml/popups/PopupDate6.qml +++ b/qml/popups/PopupDate.qml @@ -1,4 +1,5 @@ import QtQuick +import QtQuick.Effects import QtQuick.Layouts import QtQuick.Controls @@ -7,10 +8,11 @@ import ThemeEngine Popup { id: popupDate - x: (appWindow.width / 2) - (width / 2) - y: (appWindow.height / 2) - (height / 2) + x: singleColumn ? 0 : (appWindow.width / 2) - (width / 2) + y: singleColumn ? (appWindow.height - height) + : ((appWindow.height / 2) - (height / 2)) - width: appWindow.width * (singleColumn ? 0.9 : 0.4) + width: singleColumn ? appWindow.width : 720 padding: 0 margins: 0 @@ -87,20 +89,33 @@ Popup { //////////////////////////////////////////////////////////////////////////// enter: Transition { NumberAnimation { property: "opacity"; from: 0.5; to: 1.0; duration: 133; } } - exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 233; } } - - //////////////////////////////////////////////////////////////////////////// + //exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 200; } } background: Rectangle { - radius: Theme.componentRadius*2 color: Theme.colorBackground - border.width: Theme.componentBorderWidth border.color: Theme.colorSeparator + border.width: singleColumn ? 0 : Theme.componentBorderWidth + radius: singleColumn ? 0 : Theme.componentRadius + + Rectangle { + width: parent.width + height: Theme.componentBorderWidth + visible: singleColumn + color: Theme.colorSeparator + } + + layer.enabled: !singleColumn + layer.effect: MultiEffect { + autoPaddingEnabled: true + shadowEnabled: true + shadowColor: ThemeEngine.isLight ? "#aa000000" : "#aaffffff" + } } //////////////////////////////////////////////////////////////////////////// contentItem: Column { + bottomPadding: screenPaddingNavbar + screenPaddingBottom Rectangle { id: titleArea @@ -108,7 +123,7 @@ Popup { anchors.right: parent.right height: 80 - radius: Theme.componentRadius*2 + radius: singleColumn ? 0 : Theme.componentRadius color: Theme.colorPrimary Rectangle { @@ -160,8 +175,8 @@ Popup { anchors.left: parent.left anchors.right: parent.right - spacing: 24 - bottomPadding: 16 + spacing: Theme.componentMarginXL + bottomPadding: Theme.componentMarginXL Rectangle { height: 48 @@ -313,25 +328,21 @@ Popup { Row { anchors.right: parent.right - anchors.rightMargin: 16 - spacing: 16 + anchors.rightMargin: Theme.componentMarginXL + spacing: Theme.componentMargin - ButtonWireframe { - height: 36 + ButtonSolid { text: qsTr("Cancel") - primaryColor: Theme.colorSecondary - fullColor: true + colorBackground: Theme.colorSecondary onClicked: popupDate.close() } - ButtonWireframe { - height: 36 + ButtonSolid { text: qsTr("Validate") - primaryColor: Theme.colorPrimary - fullColor: true + colorBackground: Theme.colorPrimary onClicked: { updateDate(selectedDate) diff --git a/qml/popups/PopupMessage.qml b/qml/popups/PopupMessage.qml index f9bcd95..5a69513 100644 --- a/qml/popups/PopupMessage.qml +++ b/qml/popups/PopupMessage.qml @@ -26,7 +26,8 @@ Popup { //////////////////////////////////////////////////////////////////////////// - //enter: Transition { NumberAnimation { property: "opacity"; from: 0.333; to: 1.0; duration: 233; } } + enter: Transition { NumberAnimation { property: "opacity"; from: 0.5; to: 1.0; duration: 133; } } + //exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 200; } } background: Rectangle { color: Theme.colorBackground @@ -83,13 +84,11 @@ Popup { //////// - ButtonWireframe { + ButtonSolid { anchors.right: parent.right width: singleColumn ? parent.width : (parent.width / 2) text: qsTr("OK") - primaryColor: Theme.colorSubText - secondaryColor: Theme.colorForeground onClicked: popupMessage.close() } diff --git a/qml/popups/PopupTime.qml b/qml/popups/PopupTime.qml index 4dbf6b8..5b6092c 100644 --- a/qml/popups/PopupTime.qml +++ b/qml/popups/PopupTime.qml @@ -1,4 +1,5 @@ import QtQuick +import QtQuick.Effects import QtQuick.Layouts import QtQuick.Controls @@ -7,10 +8,11 @@ import ThemeEngine Popup { id: popupTime - x: (appWindow.width / 2) - (width / 2) - y: (appWindow.height / 2) - (height / 2) + x: singleColumn ? 0 : (appWindow.width / 2) - (width / 2) + y: singleColumn ? (appWindow.height - height) + : ((appWindow.height / 2) - (height / 2)) - width: appWindow.width * 0.9 + width: singleColumn ? appWindow.width : 720 padding: 0 margins: 0 @@ -35,22 +37,42 @@ Popup { //////////////////////////////////////////////////////////////////////////// - enter: Transition { NumberAnimation { property: "opacity"; from: 0.5; to: 1.0; duration: 133; } } - exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 233; } } + signal updateTime(var newtime) + + function openTime(time) { + //console.log("openTime(" + time + ")") + } //////////////////////////////////////////////////////////////////////////// + enter: Transition { NumberAnimation { property: "opacity"; from: 0.5; to: 1.0; duration: 133; } } + //exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 200; } } + background: Rectangle { - radius: Theme.componentRadius*2 color: Theme.colorBackground - border.width: Theme.componentBorderWidth border.color: Theme.colorSeparator + border.width: singleColumn ? 0 : Theme.componentBorderWidth + radius: singleColumn ? 0 : Theme.componentRadius + + Rectangle { + width: parent.width + height: Theme.componentBorderWidth + visible: singleColumn + color: Theme.colorSeparator + } + + layer.enabled: !singleColumn + layer.effect: MultiEffect { + autoPaddingEnabled: true + shadowEnabled: true + shadowColor: ThemeEngine.isLight ? "#aa000000" : "#aaffffff" + } } //////////////////////////////////////////////////////////////////////////// contentItem: Column { - // + bottomPadding: screenPaddingNavbar + screenPaddingBottom } //////////////////////////////////////////////////////////////////////////// diff --git a/qml/qml.qrc b/qml/qml.qrc index 4ec0324..e09989b 100644 --- a/qml/qml.qrc +++ b/qml/qml.qrc @@ -1,5 +1,7 @@ + ThemeEngine.qml + MobileApplication.qml MobileHeader.qml MobileDrawer.qml @@ -30,10 +32,7 @@ popups/PopupMessage.qml popups/PopupChoice.qml - popups/PopupDate6.qml + popups/PopupDate.qml popups/PopupTime.qml - - ThemeEngine.qml - WindowGeometrySaver.qml