From 9781e896a16089d8eb98365914f48b65631cefb9 Mon Sep 17 00:00:00 2001
From: Claudio Cambra <claudio.cambra@gmail.com>
Date: Mon, 26 Sep 2022 13:12:59 +0200
Subject: [PATCH] Improve the error box QML component

Signed-off-by: Claudio Cambra <claudio.cambra@gmail.com>
---
 src/gui/ErrorBox.qml  | 78 ++++++++++++++++++++++++++++++++++---------
 src/libsync/theme.cpp | 15 ---------
 src/libsync/theme.h   | 12 -------
 theme/Style/Style.qml |  5 ++-
 4 files changed, 64 insertions(+), 46 deletions(-)

diff --git a/src/gui/ErrorBox.qml b/src/gui/ErrorBox.qml
index b4b9f3944..44bbc2983 100644
--- 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
-    
-    property var text: ""
 
-    property color color: Style.errorBoxTextColor
-    property color backgroundColor: Style.errorBoxBackgroundColor
-    property color borderColor: Style.errorBoxBorderColor
+    signal closeButtonClicked
     
-    implicitHeight: errorMessage.implicitHeight + 2 * 8
+    property string text: ""
+
+    property color backgroundColor: Style.errorBoxBackgroundColor
+    property bool showCloseButton: false
+    
+    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 eb2268ca2..4419bc8b1 100644
--- 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 d2c443dfa..7261a9d7a 100644
--- 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 cfe784a5c..3aa6fd835 100644
--- a/theme/Style/Style.qml
+++ b/theme/Style/Style.qml
@@ -19,9 +19,8 @@ QtObject {
     readonly property color buttonBackgroundColor: Theme.systemPalette.button
 
     // ErrorBox colors
-    readonly property color errorBoxTextColor:       Theme.errorBoxTextColor
-    readonly property color errorBoxBackgroundColor: Theme.errorBoxBackgroundColor
-    readonly property color errorBoxBorderColor:     Theme.errorBoxBorderColor
+    readonly property color errorBoxBackgroundColor: Qt.rgba(0.89, 0.18, 0.18, 1)
+    readonly property int errorBoxStripeWidth: 4
 
     // Fonts
     // We are using pixel size because this is cross platform comparable, point size isn't