diff --git a/src/imports/mvvmdatasyncquick/ChangeRemoteView.qml b/src/imports/mvvmdatasyncquick/ChangeRemoteView.qml index aa0731e..6a0436c 100644 --- a/src/imports/mvvmdatasyncquick/ChangeRemoteView.qml +++ b/src/imports/mvvmdatasyncquick/ChangeRemoteView.qml @@ -1,7 +1,5 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -import QtQuick.Controls.Material 2.3 -import QtQuick.Controls.Universal 2.3 import QtQuick.Layouts 1.3 import de.skycoder42.QtDataSync 4.0 import de.skycoder42.QtMvvm.Core 1.0 diff --git a/src/imports/mvvmdatasyncquick/ChangeRemoteView11.qml b/src/imports/mvvmdatasyncquick/ChangeRemoteView11.qml index 7159631..01f0709 100644 --- a/src/imports/mvvmdatasyncquick/ChangeRemoteView11.qml +++ b/src/imports/mvvmdatasyncquick/ChangeRemoteView11.qml @@ -1,7 +1,5 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -import QtQuick.Controls.Material 2.3 -import QtQuick.Controls.Universal 2.3 import QtQuick.Layouts 1.3 import de.skycoder42.QtDataSync 4.0 import de.skycoder42.QtMvvm.Core 1.1 diff --git a/src/imports/mvvmdatasyncquick/DataSyncView11.qml b/src/imports/mvvmdatasyncquick/DataSyncView11.qml index 7963677..d595825 100644 --- a/src/imports/mvvmdatasyncquick/DataSyncView11.qml +++ b/src/imports/mvvmdatasyncquick/DataSyncView11.qml @@ -95,6 +95,11 @@ Page { Pane { anchors.fill: parent + + ColorHelper { + id: helper + } + ColumnLayout { id: _layout anchors.fill: parent @@ -146,14 +151,7 @@ Page { Layout.fillWidth: true Layout.minimumHeight: 1 Layout.maximumHeight: 1 - color: { - if(QuickPresenter.currentStyle === "Material") - return Material.foreground; - else if(QuickPresenter.currentStyle === "Universal") - return Universal.foreground; - else - return "black"; - } + color: helper.text } Label { diff --git a/src/imports/mvvmdatasyncquick/NetworkExchangeView11.qml b/src/imports/mvvmdatasyncquick/NetworkExchangeView11.qml index 8959a5e..3c462f0 100644 --- a/src/imports/mvvmdatasyncquick/NetworkExchangeView11.qml +++ b/src/imports/mvvmdatasyncquick/NetworkExchangeView11.qml @@ -1,12 +1,11 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -import QtQuick.Controls.Material 2.3 -import QtQuick.Controls.Universal 2.3 import QtQuick.Layouts 1.3 import de.skycoder42.QtDataSync 4.0 import de.skycoder42.QtMvvm.Core 1.1 import de.skycoder42.QtMvvm.Quick 1.1 import de.skycoder42.QtMvvm.DataSync.Core 1.1 +import de.skycoder42.QtMvvm.DataSync.Quick 1.1 /*! @brief The view implementation for the QtMvvm::NetworkExchangeViewModel * @@ -43,6 +42,11 @@ Page { Pane { anchors.fill: parent + + ColorHelper { + id: helper + } + ColumnLayout { id: _layout anchors.fill: parent @@ -90,14 +94,7 @@ Page { Layout.fillWidth: true Layout.minimumHeight: 1 Layout.maximumHeight: 1 - color: { - if(QuickPresenter.currentStyle === "Material") - return Material.foreground; - else if(QuickPresenter.currentStyle === "Universal") - return Universal.foreground; - else - return "black"; - } + color: helper.text } Switch { diff --git a/src/imports/mvvmquick/ColorHelper.qml b/src/imports/mvvmquick/ColorHelper.qml new file mode 100644 index 0000000..2940722 --- /dev/null +++ b/src/imports/mvvmquick/ColorHelper.qml @@ -0,0 +1,28 @@ +import QtQuick 2.10 +import QtQuick.Controls 2.3 +import QtQuick.Controls.Material 2.3 +import QtQuick.Controls.Universal 2.3 +import de.skycoder42.QtMvvm.Quick 1.1 + +Control { + id: _colorHelper + visible: false + + readonly property color highlight: { + if(QuickPresenter.currentStyle === "Material") + return Material.accent; + else if(QuickPresenter.currentStyle === "Universal") + return Universal.accent; + else + return palette.highlight; + } + + readonly property color text: { + if(QuickPresenter.currentStyle === "Material") + return Material.foreground; + else if(QuickPresenter.currentStyle === "Universal") + return Universal.foreground; + else + return palette.windowText; + } +} diff --git a/src/imports/mvvmquick/ContrastToolBar.qml b/src/imports/mvvmquick/ContrastToolBar.qml index d0c53c4..c6a09a0 100644 --- a/src/imports/mvvmquick/ContrastToolBar.qml +++ b/src/imports/mvvmquick/ContrastToolBar.qml @@ -28,7 +28,7 @@ ToolBar { * the color value is checked, too. If baseColor is easily readable, it is simply returned * as result. Otherwise the method proceeds as usual. */ - function accentTextColor(accentColor, baseColor) { //TODO move to global + function accentTextColor(accentColor, baseColor) { var a = (0.299 * accentColor.r + 0.587 * accentColor.g + 0.144 * accentColor.b); if(typeof baseColor !== "undefined") { var b = (0.299 * baseColor.r + 0.587 * baseColor.g + 0.144 * baseColor.b); diff --git a/src/imports/mvvmquick/ContrastToolBar11.qml b/src/imports/mvvmquick/ContrastToolBar11.qml new file mode 100644 index 0000000..abf5abb --- /dev/null +++ b/src/imports/mvvmquick/ContrastToolBar11.qml @@ -0,0 +1,26 @@ +import QtQuick 2.10 +import QtQuick.Controls 2.3 +import QtQuick.Controls.Material 2.3 +import de.skycoder42.QtMvvm.Quick 1.1 + +/*! @brief An extension of the @ref QtQuick.Controls.ToolBar "ToolBar" for better appearance + * + * @extends QtQuick.Controls.ToolBar + * + * @details This version basically adjusts size and text color of the toolbar itself and + * controls within the toolbar to look better and improve contrast + * + * @sa ActionButton, ToolBarLabel, MenuButton + */ +ToolBar { + id: _contrastToolBar + + height: 56 + + // @copydoc QuickPresenter::accentTextColor + function accentTextColor(accentColor, baseColor) { + return QuickPresenter.accentTextColor(accentColor, baseColor); + } + + Material.foreground: QuickPresenter.accentTextColor(Material.primary, Material.foreground) +} diff --git a/src/imports/mvvmquick/DateEdit.qml b/src/imports/mvvmquick/DateEdit.qml index bf9a9de..5dff60f 100644 --- a/src/imports/mvvmquick/DateEdit.qml +++ b/src/imports/mvvmquick/DateEdit.qml @@ -1,8 +1,8 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -import QtQuick.Controls.Material 2.3 import QtQuick.Layouts 1.3 import Qt.labs.calendar 1.0 +import de.skycoder42.QtMvvm.Quick 1.1 ListView { id: _calenderList @@ -116,12 +116,19 @@ ListView { delegate: Label { id: dayDelegate + ColorHelper { + id: helper + } + + readonly property bool isCurrent: model.day === _calenderList.currentDate.getDate() && model.month === _calenderList.currentDate.getMonth() + readonly property alias highlightColor: helper.highlight + horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter opacity: model.month === grid.month ? 1 : 0.5 text: model.day font: grid.font - //TODO accent text color + color: isCurrent ? QuickPresenter.accentTextColor(highlightColor, palette.text) : palette.text background: Rectangle { readonly property double size: Math.max(dayDelegate.width, dayDelegate.height) * 1.2 @@ -130,8 +137,8 @@ ListView { height: size width: size - color: Material.accentColor //TODO highlight color from globally - opacity: model.day === _calenderList.currentDate.getDate() && model.month === _calenderList.currentDate.getMonth() ? 1 : 0 + color: dayDelegate.highlightColor + opacity: dayDelegate.isCurrent ? 1 : 0 radius: size / 2 Behavior on opacity { diff --git a/src/imports/mvvmquick/DecorLabel.qml b/src/imports/mvvmquick/DecorLabel.qml index 84abf0d..4438e28 100644 --- a/src/imports/mvvmquick/DecorLabel.qml +++ b/src/imports/mvvmquick/DecorLabel.qml @@ -1,25 +1,18 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -import QtQuick.Controls.Material 2.3 -import QtQuick.Controls.Universal 2.3 import de.skycoder42.QtMvvm.Quick 1.1 Label { id: _decorLabel + ColorHelper { + id: helper + } + property Item edit: _decorLabel.nextItemInFocusChain() readonly property bool editHasFocus: edit && edit.focus - function highlightColor() { - if(QuickPresenter.currentStyle === "Material") - return Material.accentColor; - else if(QuickPresenter.currentStyle === "Universal") - return Universal.accent; - else - return palette.highlight; - } - - color: editHasFocus ? highlightColor() : palette.text + color: editHasFocus ? helper.highlight : helper.text opacity: editHasFocus ? 1 : 0.5 } diff --git a/src/imports/mvvmquick/ListSection.qml b/src/imports/mvvmquick/ListSection.qml index 7b7ec8a..0a3166a 100644 --- a/src/imports/mvvmquick/ListSection.qml +++ b/src/imports/mvvmquick/ListSection.qml @@ -1,8 +1,6 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -import QtQuick.Controls.Material 2.3 -import QtQuick.Controls.Universal 2.3 -import de.skycoder42.QtMvvm.Quick 1.0 +import de.skycoder42.QtMvvm.Quick 1.1 Label { property string title @@ -14,6 +12,10 @@ Label { bottomPadding: 4 text: title + qsTr(":") + ColorHelper { + id: helper + } + background: Rectangle { anchors.fill: parent color: "transparent" @@ -23,14 +25,7 @@ Label { anchors.bottom: parent.bottom anchors.right: parent.right height: 2 - color: { - if(QuickPresenter.currentStyle === "Material") - return Material.accent; - else if(QuickPresenter.currentStyle === "Universal") - return Universal.accent; - else - return "black"; - } + color: helper.highlight } } } diff --git a/src/imports/mvvmquick/SearchBar.qml b/src/imports/mvvmquick/SearchBar.qml index b5e9d6b..6b0acc7 100644 --- a/src/imports/mvvmquick/SearchBar.qml +++ b/src/imports/mvvmquick/SearchBar.qml @@ -1,6 +1,5 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -import QtQuick.Controls.Material 2.3 import QtQuick.Layouts 1.3 import de.skycoder42.QtMvvm.Quick 1.1 diff --git a/src/imports/mvvmquick/SettingsView.qml b/src/imports/mvvmquick/SettingsView.qml index 61d72cb..ed08edd 100644 --- a/src/imports/mvvmquick/SettingsView.qml +++ b/src/imports/mvvmquick/SettingsView.qml @@ -1,6 +1,5 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -import QtQuick.Controls.Material 2.3 import QtQuick.Layouts 1.3 import de.skycoder42.QtMvvm.Core 1.0 import de.skycoder42.QtMvvm.Quick 1.0 diff --git a/src/imports/mvvmquick/SettingsView11.qml b/src/imports/mvvmquick/SettingsView11.qml index 05a90a8..a87c34d 100644 --- a/src/imports/mvvmquick/SettingsView11.qml +++ b/src/imports/mvvmquick/SettingsView11.qml @@ -1,6 +1,5 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -import QtQuick.Controls.Material 2.3 import QtQuick.Layouts 1.3 import de.skycoder42.QtMvvm.Core 1.1 import de.skycoder42.QtMvvm.Quick 1.1 diff --git a/src/imports/mvvmquick/TimeTumbler.qml b/src/imports/mvvmquick/TimeTumbler.qml index f163ab4..f7188e1 100644 --- a/src/imports/mvvmquick/TimeTumbler.qml +++ b/src/imports/mvvmquick/TimeTumbler.qml @@ -5,13 +5,8 @@ import de.skycoder42.QtMvvm.Quick 1.1 Tumbler { id: _timeTumbler - function highlightColor() { - if(QuickPresenter.currentStyle === "Material") - return Material.accentColor; - else if(QuickPresenter.currentStyle === "Universal") - return Universal.accent; - else - return palette.highlight; + ColorHelper { + id: helper } Rectangle { @@ -19,7 +14,7 @@ Tumbler { anchors.verticalCenterOffset: -0.5 * currentItem.height width: currentItem.width * 0.8 height: 1 - color: parent.enabled ? highlightColor() : palette.text + color: parent.enabled ? helper.highlight : helper.text } Rectangle { @@ -27,6 +22,6 @@ Tumbler { anchors.verticalCenterOffset: 0.5 * currentItem.height width: currentItem.width * 0.8 height: 1 - color: parent.enabled ? highlightColor() : palette.text + color: parent.enabled ? helper.highlight : helper.text } } diff --git a/src/imports/mvvmquick/TintIcon.qml b/src/imports/mvvmquick/TintIcon.qml index c7d7575..bdcb8d1 100644 --- a/src/imports/mvvmquick/TintIcon.qml +++ b/src/imports/mvvmquick/TintIcon.qml @@ -1,8 +1,7 @@ import QtQuick 2.10 -import QtQuick.Controls.Material 2.3 -import QtQuick.Controls.Universal 2.3 +import QtQuick.Controls 2.3 import QtGraphicalEffects 1.0 -import de.skycoder42.QtMvvm.Quick 1.0 +import de.skycoder42.QtMvvm.Quick 1.1 Item { id: _tintIcon @@ -23,17 +22,14 @@ Item { visible: false } + ColorHelper { + id: helper + } + ColorOverlay { id: _overlay anchors.fill: _image source: _image - color: { - if(QuickPresenter.currentStyle === "Material") - return Material.foreground; - else if(QuickPresenter.currentStyle === "Universal") - return Universal.foreground; - else - return "black"; - } + color: helper.text } } diff --git a/src/imports/mvvmquick/mvvmquick.pro b/src/imports/mvvmquick/mvvmquick.pro index 213d2a2..0836209 100644 --- a/src/imports/mvvmquick/mvvmquick.pro +++ b/src/imports/mvvmquick/mvvmquick.pro @@ -37,6 +37,7 @@ QML_FILES += \ TintIcon.qml \ AlertDialog.qml \ ContrastToolBar.qml \ + ContrastToolBar11.qml \ ToolBarLabel.qml \ ActionButton.qml \ RoundActionButton.qml \ @@ -56,7 +57,8 @@ QML_FILES += \ MsgDelegate.qml \ TimeTumbler.qml \ TimeEdit.qml \ - DateEdit.qml + DateEdit.qml \ + ColorHelper.qml RESOURCES += \ qtmvvmquick_plugin.qrc diff --git a/src/imports/mvvmquick/plugins.qmltypes b/src/imports/mvvmquick/plugins.qmltypes index 7cd976f..1cb6710 100644 --- a/src/imports/mvvmquick/plugins.qmltypes +++ b/src/imports/mvvmquick/plugins.qmltypes @@ -116,6 +116,13 @@ Module { type: "QStringList" Parameter { name: "mimeTypes"; type: "QStringList" } } + Method { + name: "accentTextColor" + revision: 1 + type: "QColor" + Parameter { name: "accentColor"; type: "QColor" } + Parameter { name: "baseColor"; type: "QColor" } + } } Component { name: "QtMvvm::QQmlViewPlaceholder" diff --git a/src/imports/mvvmquick/qmldir b/src/imports/mvvmquick/qmldir index e8cba6b..eeb267a 100644 --- a/src/imports/mvvmquick/qmldir +++ b/src/imports/mvvmquick/qmldir @@ -18,8 +18,11 @@ internal OverviewListView OverviewListView.qml internal TimeTumbler TimeTumbler.qml +ColorHelper 1.1 ColorHelper.qml + AlertDialog 1.0 AlertDialog.qml ContrastToolBar 1.0 ContrastToolBar.qml +ContrastToolBar 1.1 ContrastToolBar11.qml ToolBarLabel 1.0 ToolBarLabel.qml ActionButton 1.0 ActionButton.qml RoundActionButton 1.0 RoundActionButton.qml diff --git a/src/imports/mvvmquick/qqmlquickpresenter.cpp b/src/imports/mvvmquick/qqmlquickpresenter.cpp index 48a7a62..772a017 100644 --- a/src/imports/mvvmquick/qqmlquickpresenter.cpp +++ b/src/imports/mvvmquick/qqmlquickpresenter.cpp @@ -57,6 +57,20 @@ QStringList QQmlQuickPresenter::mimeTypeFilters(const QStringList &mimeTypes) co return filters; } +QColor QQmlQuickPresenter::accentTextColor(const QColor &accentColor, const QColor &baseColor) const +{ + auto a = (0.299 * accentColor.redF() + 0.587 * accentColor.greenF() + 0.144 * accentColor.blueF()); + if(baseColor.isValid()) { + auto b = (0.299 * baseColor.redF() + 0.587 * baseColor.greenF() + 0.144 * baseColor.blueF()); + if (std::abs(a - b) >= 0.5) + return baseColor; + } + if(a < 0.5) + return Qt::white; + else + return Qt::black; +} + void QQmlQuickPresenter::toggleDrawer() { if(!_qmlPresenter) { diff --git a/src/imports/mvvmquick/qqmlquickpresenter.h b/src/imports/mvvmquick/qqmlquickpresenter.h index cef0afc..86e12fc 100644 --- a/src/imports/mvvmquick/qqmlquickpresenter.h +++ b/src/imports/mvvmquick/qqmlquickpresenter.h @@ -11,6 +11,8 @@ #include #include +#include + #include #include @@ -127,6 +129,20 @@ public: //! Converts a list of mimetypes into a list of extension filters, for a file dialog Q_INVOKABLE static QStringList mimeTypeFilters(const QStringList &mimeTypes) const; + /*! @brief Calculates the optimal text color based on the background color + * + * @param accentColor The color to find a contrasting text color for + * @param baseColor The current default text color + * @return A color for text that is easy to read when used with accentColor as + * the background + * + * The method calculates whether the color should be light or dark and then either returns + * white or black, depending on which color fits better. If baseColor is specified, then + * the color value is checked, too. If baseColor is easily readable, it is simply returned + * as result. Otherwise the method proceeds as usual. + */ + Q_REVISION(1) Q_INVOKABLE static QColor accentTextColor(const QColor &accentColor, const QColor &baseColor) const; + #ifdef DOXYGEN_RUN public: #else