Adjust UI

images/dark/backspace.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="Capa_1"
+   enable-background="new 0 0 64 64"
+   height="512"
+   viewBox="0 0 64 64"
+   width="512"
+   version="1.1"
+   sodipodi:docname="backspace.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata13">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs11" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2160"
+     inkscape:window-height="1272"
+     id="namedview9"
+     showgrid="false"
+     inkscape:zoom="1.4355469"
+     inkscape:cx="256"
+     inkscape:cy="256"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Capa_1"
+     inkscape:document-rotation="0" />
+  <path
+     d="m62.933 53.333h-44.8c-.315 0-.613-.139-.816-.38l-17.066-20.266c-.334-.397-.334-.977 0-1.374l17.067-20.267c.203-.241.501-.38.816-.38h44.8c.589 0 1.067.478 1.067 1.067v40.533c-.001.589-.479 1.067-1.068 1.067zm-44.304-2.133h43.237v-38.4h-43.237l-16.168 19.2z"
+     id="path2"
+     style="fill:#ffffff;fill-opacity:1" />
+  <path
+     d="m46.933 41.6c-.273 0-.546-.105-.754-.313l-17.066-17.066c-.417-.417-.417-1.091 0-1.508.416-.417 1.092-.417 1.508 0l17.067 17.067c.417.417.417 1.091 0 1.508-.209.207-.482.312-.755.312z"
+     id="path4"
+     style="fill-opacity:1;fill:#ffffff" />
+  <path
+     d="m29.867 41.6c-.273 0-.546-.105-.754-.313-.417-.417-.417-1.091 0-1.508l17.067-17.067c.416-.417 1.092-.417 1.508 0 .417.417.417 1.091 0 1.508l-17.067 17.067c-.208.208-.481.313-.754.313z"
+     id="path6"
+     style="fill:#ffffff;fill-opacity:1" />
+</svg>

images/light/backspace.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="Capa_1"
+   enable-background="new 0 0 64 64"
+   height="512"
+   viewBox="0 0 64 64"
+   width="512"
+   version="1.1"
+   sodipodi:docname="2001040.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata13">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs11" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2160"
+     inkscape:window-height="1272"
+     id="namedview9"
+     showgrid="false"
+     inkscape:zoom="1.4355469"
+     inkscape:cx="256"
+     inkscape:cy="256"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Capa_1" />
+  <path
+     d="m62.933 53.333h-44.8c-.315 0-.613-.139-.816-.38l-17.066-20.266c-.334-.397-.334-.977 0-1.374l17.067-20.267c.203-.241.501-.38.816-.38h44.8c.589 0 1.067.478 1.067 1.067v40.533c-.001.589-.479 1.067-1.068 1.067zm-44.304-2.133h43.237v-38.4h-43.237l-16.168 19.2z"
+     id="path2"
+     style="fill:#000000;fill-opacity:1" />
+  <path
+     d="m46.933 41.6c-.273 0-.546-.105-.754-.313l-17.066-17.066c-.417-.417-.417-1.091 0-1.508.416-.417 1.092-.417 1.508 0l17.067 17.067c.417.417.417 1.091 0 1.508-.209.207-.482.312-.755.312z"
+     id="path4" />
+  <path
+     d="m29.867 41.6c-.273 0-.546-.105-.754-.313-.417-.417-.417-1.091 0-1.508l17.067-17.067c.416-.417 1.092-.417 1.508 0 .417.417.417 1.091 0 1.508l-17.067 17.067c-.208.208-.481.313-.754.313z"
+     id="path6"
+     style="fill:#000000;fill-opacity:1" />
+</svg>

qml.qrc

@@ -4,5 +4,7 @@
         <file>qml/Zone.qml</file>
         <file>qml/StandardButton.qml</file>
         <file>qml/StandardPad.qml</file>
+        <file>images/light/backspace.svg</file>
+        <file>images/dark/backspace.svg</file>
     </qresource>
 </RCC>

qml/StandardButton.qml

@@ -9,13 +9,14 @@ Item {
     signal clicked(string text)
 
     property string text
+    property var icon
     property alias textColor: _label.color
     property bool flat: false
 
     Layout.fillWidth: true
     Layout.fillHeight: true
 
-    property color backgroundColor: Meui.Theme.secondBackgroundColor
+    property color backgroundColor: Meui.Theme.backgroundColor
     property color hoveredColor: Meui.Theme.darkMode ? Qt.lighter(Meui.Theme.backgroundColor, 1.1)
                                                      : Qt.darker(Meui.Theme.backgroundColor, 1.1)
     property color pressedColor: Meui.Theme.darkMode ? Qt.darker(Meui.Theme.backgroundColor, 1.05)
@@ -44,6 +45,17 @@ Item {
         onClicked: control.clicked(control.text)
     }
 
+    Image {
+        id: _icon
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        width: control.height * 0.4
+        height: width
+        sourceSize: Qt.size(width, height)
+        source: control.icon ? control.icon : ""
+        visible: _icon.status === Image.Ready
+    }
+
     Label {
         id: _label
         anchors.horizontalCenter: parent.horizontalCenter
@@ -52,6 +64,7 @@ Item {
         horizontalAlignment: Text.AlignHCenter
         color: !flat ? Meui.Theme.textColor : Meui.Theme.highlightedTextColor
         text: control.text
+        visible: !_icon.visible
         minimumPointSize: Math.round(control.height / 5)
         font.pointSize: Math.round(control.height / 5)
     }

qml/StandardPad.qml

@@ -11,13 +11,16 @@ Item {
     GridLayout {
         id: _mainLayout
         anchors.fill: parent
-        columnSpacing: 1
+        columnSpacing: 2
-        rowSpacing: 1
+        rowSpacing: 2
         columns: 4
 
         StandardButton { text: "C"; onClicked: control.pressed(text) }
+        StandardButton {
+            icon: Meui.Theme.darkMode ? "qrc:/images/dark/backspace.svg" : "qrc:/images/light/backspace.svg"
+            onClicked: control.pressed("BACKSPACE")
+        }
         StandardButton { text: "%"; onClicked: control.pressed(text) }
-        StandardButton { text: "←"; onClicked: control.pressed(text) }
         StandardButton { text: "÷"; textColor: Meui.Theme.highlightColor; onClicked: control.pressed(text) }
         StandardButton { text: "7"; onClicked: control.pressed(text) }
         StandardButton { text: "8"; onClicked: control.pressed(text) }

qml/Zone.qml

@@ -92,7 +92,7 @@ Item {
                 textField.clear()
             else 
                 historyModel.clear()
-        } else if (text === 'BACK') {
+        } else if (text === 'BACKSPACE') {
             // backspace
             textField.remove(textField.cursorPosition, textField.cursorPosition - 1)
         } else {

qml/main.qml

@@ -13,15 +13,8 @@ Meui.Window {
     title: qsTr("Calculator")
     id: rootWindow
 
-    backgroundColor: Meui.Theme.secondBackgroundColor
+    backgroundColor: Meui.Theme.darkMode ? Qt.rgba(46 / 255, 46 / 255, 46 / 255, 1.0)
-    backgroundOpacity: Meui.Theme.darkMode ? 0.9 : 0.7
+                                         : Qt.rgba(240 / 255, 238 / 255, 241 / 255, 1.0)
-
-    Meui.WindowBlur {
-        view: rootWindow
-        enabled: true
-        geometry: Qt.rect(rootWindow.x, rootWindow.y, rootWindow.width, rootWindow.height)
-        windowRadius: rootWindow.windowRadius
-    }
 
     CalcEngine {
         id: calcEngine