Improve the error box QML component

Signed-off-by: Claudio Cambra <claudio.cambra@gmail.com>

diff --git a/src/gui/ErrorBox.qml b/src/gui/ErrorBox.qml
index b4b9f39447bce22745cf39fdba78784f8ebd592b..44bbc2983c2299af4d690dd2568b63c505e991d9 100644 (file)
--- a/src/gui/ErrorBox.qml
+++ b/src/gui/ErrorBox.qml
@@ -1,34 +1,80 @@
 import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import QtQuick.Controls 2.15
 
 import Style 1.0
 
 Item {
     id: errorBox
+
+    signal closeButtonClicked
     
-    property var text: ""
+    property string text: ""
 
-    property color color: Style.errorBoxTextColor
     property color backgroundColor: Style.errorBoxBackgroundColor
-    property color borderColor: Style.errorBoxBorderColor
+    property bool showCloseButton: false
     
-    implicitHeight: errorMessage.implicitHeight + 2 * 8
+    implicitHeight: errorMessageLayout.implicitHeight + (2 * Style.standardSpacing)
+
+    Rectangle {
+        id: solidStripe
+
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+
+        width: Style.errorBoxStripeWidth
+        color: errorBox.backgroundColor
+    }
 
     Rectangle {
         anchors.fill: parent
         color: errorBox.backgroundColor
-        border.color: errorBox.borderColor
+        opacity: 0.2
     }
 
-    Label {
-        id: errorMessage
-        
+    GridLayout {
+        id: errorMessageLayout
+
         anchors.fill: parent
-        anchors.margins: 8
-        width: parent.width
-        color: errorBox.color
-        wrapMode: Text.WordWrap
-        text: errorBox.text
-        textFormat: Text.PlainText
+        anchors.margins: Style.standardSpacing
+        anchors.leftMargin: Style.standardSpacing + solidStripe.width
+
+        columns: 2
+
+        Label {
+            Layout.fillWidth: true
+            color: Style.ncTextColor
+            font.bold: true
+            text: qsTr("Error")
+            visible: errorBox.showCloseButton
+        }
+
+        Button {
+            Layout.preferredWidth: Style.iconButtonWidth
+            Layout.preferredHeight: Style.iconButtonWidth
+
+            background: null
+            icon.color: Style.ncTextColor
+            icon.source: "qrc:///client/theme/close.svg"
+
+            visible: errorBox.showCloseButton
+            enabled: visible
+
+            onClicked: errorBox.closeButtonClicked()
+        }
+
+        Label {
+            id: errorMessage
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.columnSpan: 2
+
+            color: Style.ncTextColor
+            wrapMode: Text.WordWrap
+            text: errorBox.text
+            textFormat: Text.PlainText
+        }
     }
 }

diff --git a/src/libsync/theme.cpp b/src/libsync/theme.cpp
index eb2268ca2f567654f60e318b77bc678d2d4d8fcb..4419bc8b18d01d467bee1a98a40ebd75c6c9d324 100644 (file)
--- a/src/libsync/theme.cpp
+++ b/src/libsync/theme.cpp
@@ -887,21 +887,6 @@ QColor Theme::defaultColor()
     return QColor{NEXTCLOUD_BACKGROUND_COLOR};
 }
 
-QColor Theme::errorBoxTextColor() const
-{
-    return QColor{"white"};
-}
-
-QColor Theme::errorBoxBackgroundColor() const
-{
-    return QColor{"red"};
-}
-
-QColor Theme::errorBoxBorderColor() const
-{ 
-    return QColor{"black"};
-}
-
 void Theme::connectToPaletteSignal()
 {
     if (!_paletteSignalsConnected) {

diff --git a/src/libsync/theme.h b/src/libsync/theme.h
index d2c443dfa13bfe2f01fbe853dcbc2a588c14328b..7261a9d7a504e23f0e9eec4b6863412b4fcfc0a4 100644 (file)
--- a/src/libsync/theme.h
+++ b/src/libsync/theme.h
@@ -64,9 +64,6 @@ class OWNCLOUDSYNC_EXPORT Theme : public QObject
     Q_PROPERTY(QString updateCheckUrl READ updateCheckUrl CONSTANT)
 
     Q_PROPERTY(QColor defaultColor READ defaultColor CONSTANT)
-    Q_PROPERTY(QColor errorBoxTextColor READ errorBoxTextColor CONSTANT)
-    Q_PROPERTY(QColor errorBoxBackgroundColor READ errorBoxBackgroundColor CONSTANT)
-    Q_PROPERTY(QColor errorBoxBorderColor READ errorBoxBorderColor CONSTANT)
 
     Q_PROPERTY(QPalette systemPalette READ systemPalette NOTIFY systemPaletteChanged)
     Q_PROPERTY(bool darkMode READ darkMode NOTIFY darkModeChanged)
@@ -583,15 +580,6 @@ public:
 
     static QColor defaultColor();
 
-    /** @return color for the ErrorBox text. */
-    virtual QColor errorBoxTextColor() const;
-
-    /** @return color for the ErrorBox background. */
-    virtual QColor errorBoxBackgroundColor() const;
-
-    /** @return color for the ErrorBox border. */
-    virtual QColor errorBoxBorderColor() const;
-
     static constexpr const char *themePrefix = ":/client/theme/";
 
     QPalette systemPalette();

diff --git a/theme/Style/Style.qml b/theme/Style/Style.qml
index cfe784a5c8dca83b83181d41a7828b045afd5105..3aa6fd83573d0f9cc91aa078fec346a933d819ce 100644 (file)
--- a/theme/Style/Style.qml
+++ b/theme/Style/Style.qml
@@ -19,9 +19,8 @@ QtObject {
     readonly property color buttonBackgroundColor: Theme.systemPalette.button\r
 \r
     // ErrorBox colors\r
-    readonly property color errorBoxTextColor:       Theme.errorBoxTextColor\r
-    readonly property color errorBoxBackgroundColor: Theme.errorBoxBackgroundColor\r
-    readonly property color errorBoxBorderColor:     Theme.errorBoxBorderColor\r
+    readonly property color errorBoxBackgroundColor: Qt.rgba(0.89, 0.18, 0.18, 1)\r
+    readonly property int errorBoxStripeWidth: 4\r
 \r
     // Fonts\r
     // We are using pixel size because this is cross platform comparable, point size isn't\r