Add checked icon to the accent color item

src/images/checked.svg

@@ -24,18 +24,18 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="22.4"
-     inkscape:cx="14.682205"
+     inkscape:cx="3.5661336"
      inkscape:cy="9.2685141"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
      inkscape:document-rotation="0"
      showgrid="false"
      units="px"
-     inkscape:window-width="1629"
-     inkscape:window-height="997"
-     inkscape:window-x="262"
-     inkscape:window-y="168"
-     inkscape:window-maximized="0" />
+     inkscape:window-width="2160"
+     inkscape:window-height="1304"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
   <metadata
      id="metadata5">
     <rdf:RDF>
@@ -44,7 +44,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -53,15 +53,14 @@
      inkscape:groupmode="layer"
      id="layer1">
     <g
-       transform="matrix(0.97013889,0,0,1.164148,-413.7488,-626.64923)"
-       id="g7"
-       style="fill:#000000;fill-opacity:1">
-      <path
-         class="ColorScheme-Text"
-         d="m 431.82,538.29 -3.1484,3.6094 -1.5254,-1.5527 -0.66211,0.67578 2.2266,2.2676 3.7734,-4.3223 z"
-         fill="currentColor"
-         id="path5-3"
-         style="fill:#000000;fill-opacity:1" />
+       id="g6"
+       transform="matrix(0.01136932,0,0,0.01548149,-1.2712161e-4,-1.0528341)">
+      <g
+         id="g4">
+        <path
+           d="m 504.502,75.496 c -9.997,-9.998 -26.205,-9.998 -36.204,0 L 161.594,382.203 43.702,264.311 c -9.997,-9.998 -26.205,-9.997 -36.204,0 -9.998,9.997 -9.998,26.205 0,36.203 l 135.994,135.992 c 9.994,9.997 26.214,9.99 36.204,0 L 504.502,111.7 c 9.998,-9.997 9.997,-26.206 0,-36.204 z"
+           id="path2" />
+      </g>
     </g>
   </g>
 </svg>

src/qml/AppearancePage.qml

@@ -1,6 +1,8 @@
 import QtQuick 2.4
 import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.0
+
 import Cutefish.Settings 1.0
 import MeuiKit 1.0 as Meui
 
@@ -105,13 +107,16 @@ ItemPage {
             }
 
             GridView {
-                height: 32 + Meui.Units.largeSpacing * 2
+                id: accentColorView
+                height: itemSize + Meui.Units.largeSpacing * 2
                 Layout.fillWidth: true
                 cellWidth: height
                 cellHeight: height
                 interactive: false
                 model: ListModel {}
 
+                property var itemSize: 32
+
                 Component.onCompleted: {
                     model.append({"accentColor": String(Meui.Theme.blueColor)})
                     model.append({"accentColor": String(Meui.Theme.redColor)})
@@ -122,13 +127,16 @@ ItemPage {
                 }
 
                 delegate: Rectangle {
-                    property bool isSelected: Qt.colorEqual(Meui.Theme.highlightColor, accentColor)
-                    width: 32 + Meui.Units.largeSpacing
+                    property bool checked: Qt.colorEqual(Meui.Theme.highlightColor, accentColor)
+
+                    width: accentColorView.itemSize + Meui.Units.largeSpacing
                     height: width
                     color: "transparent"
                     radius: width / 2
-                    border.color: Meui.Theme.highlightColor
-                    border.width: isSelected ? 2 : 0
+                    border.color: Qt.rgba(Meui.Theme.highlightColor.r,
+                                          Meui.Theme.highlightColor.g,
+                                          Meui.Theme.highlightColor.b, 0.5)
+                    border.width: checked ? 2 : 0
 
                     MouseArea {
                         id: _mouseArea
@@ -142,6 +150,23 @@ ItemPage {
                         anchors.centerIn: parent
                         radius: width / 2
 
+                        Image {
+                            anchors.centerIn: parent
+                            width: parent.height * 0.5
+                            height: width
+                            sourceSize: Qt.size(width, height)
+                            source: "qrc:/images/checked.svg"
+                            visible: checked
+
+                            ColorOverlay {
+                                anchors.fill: parent
+                                source: parent
+                                color: Meui.Theme.highlightedTextColor
+                                opacity: 1
+                                visible: true
+                            }
+                        }
+
                         MouseArea {
                             anchors.fill: parent
                             onClicked: function() {

src/qml/ItemPage.qml

@@ -9,6 +9,6 @@ Page {
     property string headerTitle
 
     background: Rectangle {
-        color: Meui.Theme.backgroundColor
+        color: "transparent"
     }
 }

src/qml/SideBar.qml

@@ -19,8 +19,8 @@ Item {
 
         Behavior on color {
             ColorAnimation {
-                duration: 0
-                easing.type: Easing.InOutCubic
+                duration: 250
+                easing.type: Easing.Linear
             }
         }
     }

src/qml/main.qml

@@ -24,6 +24,13 @@ Meui.Window {
             anchors.bottom: parent.bottom
             implicitWidth: sideBar.width
             color: Meui.Theme.secondBackgroundColor
+
+            Behavior on color {
+                ColorAnimation {
+                    duration: 250
+                    easing.type: Easing.Linear
+                }
+            }
         }
 
         RowLayout {