Browse Source

fixed coloring for real

pull/2/head
Skycoder42 7 years ago
parent
commit
80dcaac9ae
No known key found for this signature in database GPG Key ID: 8E01AD9EF0578D2B
  1. 2
      src/imports/mvvmdatasyncquick/ChangeRemoteView.qml
  2. 2
      src/imports/mvvmdatasyncquick/ChangeRemoteView11.qml
  3. 14
      src/imports/mvvmdatasyncquick/DataSyncView11.qml
  4. 17
      src/imports/mvvmdatasyncquick/NetworkExchangeView11.qml
  5. 28
      src/imports/mvvmquick/ColorHelper.qml
  6. 2
      src/imports/mvvmquick/ContrastToolBar.qml
  7. 26
      src/imports/mvvmquick/ContrastToolBar11.qml
  8. 15
      src/imports/mvvmquick/DateEdit.qml
  9. 17
      src/imports/mvvmquick/DecorLabel.qml
  10. 17
      src/imports/mvvmquick/ListSection.qml
  11. 1
      src/imports/mvvmquick/SearchBar.qml
  12. 1
      src/imports/mvvmquick/SettingsView.qml
  13. 1
      src/imports/mvvmquick/SettingsView11.qml
  14. 13
      src/imports/mvvmquick/TimeTumbler.qml
  15. 18
      src/imports/mvvmquick/TintIcon.qml
  16. 4
      src/imports/mvvmquick/mvvmquick.pro
  17. 7
      src/imports/mvvmquick/plugins.qmltypes
  18. 3
      src/imports/mvvmquick/qmldir
  19. 14
      src/imports/mvvmquick/qqmlquickpresenter.cpp
  20. 16
      src/imports/mvvmquick/qqmlquickpresenter.h

2
src/imports/mvvmdatasyncquick/ChangeRemoteView.qml

@ -1,7 +1,5 @@
import QtQuick 2.10 import QtQuick 2.10
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.3
import QtQuick.Controls.Universal 2.3
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import de.skycoder42.QtDataSync 4.0 import de.skycoder42.QtDataSync 4.0
import de.skycoder42.QtMvvm.Core 1.0 import de.skycoder42.QtMvvm.Core 1.0

2
src/imports/mvvmdatasyncquick/ChangeRemoteView11.qml

@ -1,7 +1,5 @@
import QtQuick 2.10 import QtQuick 2.10
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.3
import QtQuick.Controls.Universal 2.3
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import de.skycoder42.QtDataSync 4.0 import de.skycoder42.QtDataSync 4.0
import de.skycoder42.QtMvvm.Core 1.1 import de.skycoder42.QtMvvm.Core 1.1

14
src/imports/mvvmdatasyncquick/DataSyncView11.qml

@ -95,6 +95,11 @@ Page {
Pane { Pane {
anchors.fill: parent anchors.fill: parent
ColorHelper {
id: helper
}
ColumnLayout { ColumnLayout {
id: _layout id: _layout
anchors.fill: parent anchors.fill: parent
@ -146,14 +151,7 @@ Page {
Layout.fillWidth: true Layout.fillWidth: true
Layout.minimumHeight: 1 Layout.minimumHeight: 1
Layout.maximumHeight: 1 Layout.maximumHeight: 1
color: { color: helper.text
if(QuickPresenter.currentStyle === "Material")
return Material.foreground;
else if(QuickPresenter.currentStyle === "Universal")
return Universal.foreground;
else
return "black";
}
} }
Label { Label {

17
src/imports/mvvmdatasyncquick/NetworkExchangeView11.qml

@ -1,12 +1,11 @@
import QtQuick 2.10 import QtQuick 2.10
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.3
import QtQuick.Controls.Universal 2.3
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import de.skycoder42.QtDataSync 4.0 import de.skycoder42.QtDataSync 4.0
import de.skycoder42.QtMvvm.Core 1.1 import de.skycoder42.QtMvvm.Core 1.1
import de.skycoder42.QtMvvm.Quick 1.1 import de.skycoder42.QtMvvm.Quick 1.1
import de.skycoder42.QtMvvm.DataSync.Core 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 /*! @brief The view implementation for the QtMvvm::NetworkExchangeViewModel
* *
@ -43,6 +42,11 @@ Page {
Pane { Pane {
anchors.fill: parent anchors.fill: parent
ColorHelper {
id: helper
}
ColumnLayout { ColumnLayout {
id: _layout id: _layout
anchors.fill: parent anchors.fill: parent
@ -90,14 +94,7 @@ Page {
Layout.fillWidth: true Layout.fillWidth: true
Layout.minimumHeight: 1 Layout.minimumHeight: 1
Layout.maximumHeight: 1 Layout.maximumHeight: 1
color: { color: helper.text
if(QuickPresenter.currentStyle === "Material")
return Material.foreground;
else if(QuickPresenter.currentStyle === "Universal")
return Universal.foreground;
else
return "black";
}
} }
Switch { Switch {

28
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;
}
}

2
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 * the color value is checked, too. If baseColor is easily readable, it is simply returned
* as result. Otherwise the method proceeds as usual. * 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); var a = (0.299 * accentColor.r + 0.587 * accentColor.g + 0.144 * accentColor.b);
if(typeof baseColor !== "undefined") { if(typeof baseColor !== "undefined") {
var b = (0.299 * baseColor.r + 0.587 * baseColor.g + 0.144 * baseColor.b); var b = (0.299 * baseColor.r + 0.587 * baseColor.g + 0.144 * baseColor.b);

26
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)
}

15
src/imports/mvvmquick/DateEdit.qml

@ -1,8 +1,8 @@
import QtQuick 2.10 import QtQuick 2.10
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.3
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import Qt.labs.calendar 1.0 import Qt.labs.calendar 1.0
import de.skycoder42.QtMvvm.Quick 1.1
ListView { ListView {
id: _calenderList id: _calenderList
@ -116,12 +116,19 @@ ListView {
delegate: Label { delegate: Label {
id: dayDelegate 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 horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
opacity: model.month === grid.month ? 1 : 0.5 opacity: model.month === grid.month ? 1 : 0.5
text: model.day text: model.day
font: grid.font font: grid.font
//TODO accent text color color: isCurrent ? QuickPresenter.accentTextColor(highlightColor, palette.text) : palette.text
background: Rectangle { background: Rectangle {
readonly property double size: Math.max(dayDelegate.width, dayDelegate.height) * 1.2 readonly property double size: Math.max(dayDelegate.width, dayDelegate.height) * 1.2
@ -130,8 +137,8 @@ ListView {
height: size height: size
width: size width: size
color: Material.accentColor //TODO highlight color from globally color: dayDelegate.highlightColor
opacity: model.day === _calenderList.currentDate.getDate() && model.month === _calenderList.currentDate.getMonth() ? 1 : 0 opacity: dayDelegate.isCurrent ? 1 : 0
radius: size / 2 radius: size / 2
Behavior on opacity { Behavior on opacity {

17
src/imports/mvvmquick/DecorLabel.qml

@ -1,25 +1,18 @@
import QtQuick 2.10 import QtQuick 2.10
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.3
import QtQuick.Controls.Universal 2.3
import de.skycoder42.QtMvvm.Quick 1.1 import de.skycoder42.QtMvvm.Quick 1.1
Label { Label {
id: _decorLabel id: _decorLabel
ColorHelper {
id: helper
}
property Item edit: _decorLabel.nextItemInFocusChain() property Item edit: _decorLabel.nextItemInFocusChain()
readonly property bool editHasFocus: edit && edit.focus readonly property bool editHasFocus: edit && edit.focus
function highlightColor() { color: editHasFocus ? helper.highlight : helper.text
if(QuickPresenter.currentStyle === "Material")
return Material.accentColor;
else if(QuickPresenter.currentStyle === "Universal")
return Universal.accent;
else
return palette.highlight;
}
color: editHasFocus ? highlightColor() : palette.text
opacity: editHasFocus ? 1 : 0.5 opacity: editHasFocus ? 1 : 0.5
} }

17
src/imports/mvvmquick/ListSection.qml

@ -1,8 +1,6 @@
import QtQuick 2.10 import QtQuick 2.10
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.3 import de.skycoder42.QtMvvm.Quick 1.1
import QtQuick.Controls.Universal 2.3
import de.skycoder42.QtMvvm.Quick 1.0
Label { Label {
property string title property string title
@ -14,6 +12,10 @@ Label {
bottomPadding: 4 bottomPadding: 4
text: title + qsTr(":") text: title + qsTr(":")
ColorHelper {
id: helper
}
background: Rectangle { background: Rectangle {
anchors.fill: parent anchors.fill: parent
color: "transparent" color: "transparent"
@ -23,14 +25,7 @@ Label {
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.right: parent.right anchors.right: parent.right
height: 2 height: 2
color: { color: helper.highlight
if(QuickPresenter.currentStyle === "Material")
return Material.accent;
else if(QuickPresenter.currentStyle === "Universal")
return Universal.accent;
else
return "black";
}
} }
} }
} }

1
src/imports/mvvmquick/SearchBar.qml

@ -1,6 +1,5 @@
import QtQuick 2.10 import QtQuick 2.10
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.3
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import de.skycoder42.QtMvvm.Quick 1.1 import de.skycoder42.QtMvvm.Quick 1.1

1
src/imports/mvvmquick/SettingsView.qml

@ -1,6 +1,5 @@
import QtQuick 2.10 import QtQuick 2.10
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.3
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import de.skycoder42.QtMvvm.Core 1.0 import de.skycoder42.QtMvvm.Core 1.0
import de.skycoder42.QtMvvm.Quick 1.0 import de.skycoder42.QtMvvm.Quick 1.0

1
src/imports/mvvmquick/SettingsView11.qml

@ -1,6 +1,5 @@
import QtQuick 2.10 import QtQuick 2.10
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.3
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import de.skycoder42.QtMvvm.Core 1.1 import de.skycoder42.QtMvvm.Core 1.1
import de.skycoder42.QtMvvm.Quick 1.1 import de.skycoder42.QtMvvm.Quick 1.1

13
src/imports/mvvmquick/TimeTumbler.qml

@ -5,13 +5,8 @@ import de.skycoder42.QtMvvm.Quick 1.1
Tumbler { Tumbler {
id: _timeTumbler id: _timeTumbler
function highlightColor() { ColorHelper {
if(QuickPresenter.currentStyle === "Material") id: helper
return Material.accentColor;
else if(QuickPresenter.currentStyle === "Universal")
return Universal.accent;
else
return palette.highlight;
} }
Rectangle { Rectangle {
@ -19,7 +14,7 @@ Tumbler {
anchors.verticalCenterOffset: -0.5 * currentItem.height anchors.verticalCenterOffset: -0.5 * currentItem.height
width: currentItem.width * 0.8 width: currentItem.width * 0.8
height: 1 height: 1
color: parent.enabled ? highlightColor() : palette.text color: parent.enabled ? helper.highlight : helper.text
} }
Rectangle { Rectangle {
@ -27,6 +22,6 @@ Tumbler {
anchors.verticalCenterOffset: 0.5 * currentItem.height anchors.verticalCenterOffset: 0.5 * currentItem.height
width: currentItem.width * 0.8 width: currentItem.width * 0.8
height: 1 height: 1
color: parent.enabled ? highlightColor() : palette.text color: parent.enabled ? helper.highlight : helper.text
} }
} }

18
src/imports/mvvmquick/TintIcon.qml

@ -1,8 +1,7 @@
import QtQuick 2.10 import QtQuick 2.10
import QtQuick.Controls.Material 2.3 import QtQuick.Controls 2.3
import QtQuick.Controls.Universal 2.3
import QtGraphicalEffects 1.0 import QtGraphicalEffects 1.0
import de.skycoder42.QtMvvm.Quick 1.0 import de.skycoder42.QtMvvm.Quick 1.1
Item { Item {
id: _tintIcon id: _tintIcon
@ -23,17 +22,14 @@ Item {
visible: false visible: false
} }
ColorHelper {
id: helper
}
ColorOverlay { ColorOverlay {
id: _overlay id: _overlay
anchors.fill: _image anchors.fill: _image
source: _image source: _image
color: { color: helper.text
if(QuickPresenter.currentStyle === "Material")
return Material.foreground;
else if(QuickPresenter.currentStyle === "Universal")
return Universal.foreground;
else
return "black";
}
} }
} }

4
src/imports/mvvmquick/mvvmquick.pro

@ -37,6 +37,7 @@ QML_FILES += \
TintIcon.qml \ TintIcon.qml \
AlertDialog.qml \ AlertDialog.qml \
ContrastToolBar.qml \ ContrastToolBar.qml \
ContrastToolBar11.qml \
ToolBarLabel.qml \ ToolBarLabel.qml \
ActionButton.qml \ ActionButton.qml \
RoundActionButton.qml \ RoundActionButton.qml \
@ -56,7 +57,8 @@ QML_FILES += \
MsgDelegate.qml \ MsgDelegate.qml \
TimeTumbler.qml \ TimeTumbler.qml \
TimeEdit.qml \ TimeEdit.qml \
DateEdit.qml DateEdit.qml \
ColorHelper.qml
RESOURCES += \ RESOURCES += \
qtmvvmquick_plugin.qrc qtmvvmquick_plugin.qrc

7
src/imports/mvvmquick/plugins.qmltypes

@ -116,6 +116,13 @@ Module {
type: "QStringList" type: "QStringList"
Parameter { name: "mimeTypes"; 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 { Component {
name: "QtMvvm::QQmlViewPlaceholder" name: "QtMvvm::QQmlViewPlaceholder"

3
src/imports/mvvmquick/qmldir

@ -18,8 +18,11 @@ internal OverviewListView OverviewListView.qml
internal TimeTumbler TimeTumbler.qml internal TimeTumbler TimeTumbler.qml
ColorHelper 1.1 ColorHelper.qml
AlertDialog 1.0 AlertDialog.qml AlertDialog 1.0 AlertDialog.qml
ContrastToolBar 1.0 ContrastToolBar.qml ContrastToolBar 1.0 ContrastToolBar.qml
ContrastToolBar 1.1 ContrastToolBar11.qml
ToolBarLabel 1.0 ToolBarLabel.qml ToolBarLabel 1.0 ToolBarLabel.qml
ActionButton 1.0 ActionButton.qml ActionButton 1.0 ActionButton.qml
RoundActionButton 1.0 RoundActionButton.qml RoundActionButton 1.0 RoundActionButton.qml

14
src/imports/mvvmquick/qqmlquickpresenter.cpp

@ -57,6 +57,20 @@ QStringList QQmlQuickPresenter::mimeTypeFilters(const QStringList &mimeTypes) co
return filters; 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() void QQmlQuickPresenter::toggleDrawer()
{ {
if(!_qmlPresenter) { if(!_qmlPresenter) {

16
src/imports/mvvmquick/qqmlquickpresenter.h

@ -11,6 +11,8 @@
#include <QtCore/QQueue> #include <QtCore/QQueue>
#include <QtCore/QSharedPointer> #include <QtCore/QSharedPointer>
#include <QtGui/QColor>
#include <QtQml/QQmlComponent> #include <QtQml/QQmlComponent>
#include <QtMvvmCore/ViewModel> #include <QtMvvmCore/ViewModel>
@ -127,6 +129,20 @@ public:
//! Converts a list of mimetypes into a list of extension filters, for a file dialog //! Converts a list of mimetypes into a list of extension filters, for a file dialog
Q_INVOKABLE static QStringList mimeTypeFilters(const QStringList &mimeTypes) const; 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 #ifdef DOXYGEN_RUN
public: public:
#else #else

Loading…
Cancel
Save