Merge pull request #4976 from nextcloud/feature/nicer-errorbox

Improve the error box QML component

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
+        }
     }
 }

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) {

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();

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