Iteration of the design

Update home screen design to make icon coloring uniform

3 files changed, 70 insertions, 128 deletions

diff --git a/src/engine.cpp b/src/engine.cpp
index 8da944e..093a0d0 100644
--- a/src/engine.cpp
+++ b/src/engine.cpp
@@ -45,7 +45,6 @@ Engine::Engine(QObject *parent)
     : QObject(parent)
     , m_bookmarks(QStandardPaths::writableLocation(QStandardPaths::AppDataLocation) % QDir::separator() % "bookmarks.ini", QSettings::IniFormat, this)
 {
-    qsrand(255);
 }
 
 QUrl Engine::fromUserInput(const QString& userInput)
@@ -61,46 +60,16 @@ QString Engine::domainFromString(const QString& urlString)
     return QUrl::fromUserInput(urlString).host();
 }
 
-QString Engine::randomColor()
+QString Engine::fallbackColor()
 {
-    QColor color(utils::randomColor(), utils::randomColor(), utils::randomColor());
-    return color.name();
-}
-
-QString Engine::colorForIcon(QQuickItemGrabResult *result)
-{
-    QImage image = result->image();
-    int hue = 0;
-    int saturation = 0;
-    int value = 0;
-    for (int i = 0, width = image.width(); i < width; ++i) {
-        int skip = 0;
-        int h = 0;
-        int s = 0;
-        int v = 0;
-        for (int j = 0, height = image.height(); j < height; ++j) {
-            const QColor color(QColor(image.pixel(i, j)).toHsv());
-            if (color.alpha() < 127) {
-                ++skip;
-                continue;
-            }
-
-            h += color.hsvHue();
-            s += color.hsvSaturation();
-            v += color.value();
-        }
-        int count = image.height() - skip + 1;
-        hue = h / count;
-        saturation = s / count;
-        value = v / count;
-    }
-    return QColor::fromHsv(hue, saturation, value).name();
-}
-
-QString Engine::oppositeColor(const QString &color)
-{
-    const QColor c(QColor(color).toHsv());
-    return QColor::fromHsv(c.hue(), c.saturation(), c.value() < 127 ? 255 : c.value() - 100).name();
+    static QList<QString> colors = QList<QString>() << QStringLiteral("#46a2da")
+                                                    << QStringLiteral("#18394c")
+                                                    << QStringLiteral("#ff8c0a")
+                                                    << QStringLiteral("#5caa15");
+    static int index = -1;
+    if (++index == colors.count())
+        index = 0;
+    return colors[index];
 }
 
 QString Engine::restoreBookmarks()
diff --git a/src/engine.h b/src/engine.h
index 3fb30e2..c9acdce 100644
--- a/src/engine.h
+++ b/src/engine.h
@@ -71,11 +71,6 @@ inline bool isMouseEvent(const QEvent* event)
     }
 }
 
-inline int randomColor()
-{
-    return qrand() % 255;
-}
-
 }
 
 class Engine : public QObject {
@@ -94,9 +89,7 @@ public:
 
     Q_INVOKABLE QUrl fromUserInput(const QString& userInput);
     Q_INVOKABLE QString domainFromString(const QString& urlString);
-    Q_INVOKABLE QString randomColor();
-    Q_INVOKABLE QString colorForIcon(QQuickItemGrabResult *result);
-    Q_INVOKABLE QString oppositeColor(const QString & color);
+    Q_INVOKABLE QString fallbackColor();
     Q_INVOKABLE QString restoreBookmarks();
     Q_INVOKABLE void saveBookmarks(const QString & list);
 };
diff --git a/src/qml/HomeScreen.qml b/src/qml/HomeScreen.qml
index d277bc2..9251169 100644
--- a/src/qml/HomeScreen.qml
+++ b/src/qml/HomeScreen.qml
@@ -146,6 +146,7 @@ Rectangle {
         contentHeight: parent.height
 
         MouseArea {
+            z: -1
             enabled: homeScreen.state == "edit"
             anchors.fill: parent
             onClicked: homeScreen.state = "enabled"
@@ -199,47 +200,21 @@ Rectangle {
         onDraggingChanged: snapToPage()
         delegate: Rectangle {
             id: square
-            property string iconColor: "white"
+            property string iconColor: "#f6f6f6"
             width: homeScreen.cellSize
             height: width
             border.color: iconStrokeColor
             border.width: 1
 
-            Text {
-                function cleanup(string) {
-                    var t = string.replace("-", " ")
-                    .replace("|", " ").replace(",", " ")
-                    return t
-                }
-
-                visible: bg.color != "white"
-                text: cleanup(title)
-                font.family: defaultFontFamily
-                font.pixelSize: 18
-                color: engine.oppositeColor(square.color)
-                anchors.centerIn: parent
-                width: parent.width - 10
-                height: parent.height
-                maximumLineCount: 3
-                elide: Text.ElideRight
-                wrapMode: Text.Wrap
-                verticalAlignment: Text.AlignVCenter
-                horizontalAlignment: Text.AlignHCenter
-            }
-
             Rectangle {
                 id: bg
                 anchors {
-                    left: parent.left
+                    horizontalCenter: parent.horizontalCenter
                     top: parent.top
                     margins: 1
                 }
                 state: "fallback"
-                width: {
-                    if (icon.sourceSize.width < 100)
-                        return 32
-                    return square.width - 2
-                }
+                width: square.width - 2
                 height: width
                 states: [
                     State {
@@ -254,13 +229,6 @@ Rectangle {
                         }
                     },
                     State {
-                        name: "snapshot"
-                        PropertyChanges {
-                            target: bg
-                            color: "white"
-                        }
-                    },
-                    State {
                         name: "normal"
                         PropertyChanges {
                             target: square
@@ -272,43 +240,68 @@ Rectangle {
                         }
                     }
                 ]
-                Timer {
-                    id: timer
-                    onTriggered: {
-                        if (!bg.width || !bg.height)
-                            return
-
-                        bg.state = "snapshot"
-                        bg.grabToImage(function(result) {
-                            square.iconColor = engine.colorForIcon(result)
-                            bg.state = "normal"
-                        });
-                    }
-                }
 
                 Image {
                     id: icon
-                    anchors.centerIn: parent
-                    width: bg.width
-                    height: bg.height
+                    smooth: true
+                    anchors {
+                        top: parent.top
+                        horizontalCenter: parent.horizontalCenter
+                        topMargin: width < bg.width ? 15 : 0
+                    }
+                    width: {
+                        if (!icon.sourceSize.width)
+                            return 0
+                        if (icon.sourceSize.width < 100)
+                            return 32
+
+                        return bg.width
+                    }
+                    height: width
                     source: iconUrl
-                    onSourceChanged: bg.state = "snapshot"
                     onStatusChanged: {
                         switch (status) {
                         case Image.Null:
                         case Image.Loading:
                         case Image.Error:
-                            square.iconColor = "white"
                             bg.state = "fallback"
                             break
                         case Image.Ready:
                             bg.state = "normal"
-                            timer.restart()
                             break
                         }
                     }
                 }
+                Text {
+                    function cleanup(string) {
+                        var t = string.replace("-", " ")
+                        .replace("|", " ").replace(",", " ")
+                        .replace(/\s\s+/g, "\n")
+                        return t
+                    }
+
+                    visible: icon.width != bg.width
+                    text: cleanup(title)
+                    font.family: defaultFontFamily
+                    font.pixelSize: 18
+                    color: bg.state == "fallback" ? "white" : "black"
+                    anchors {
+                        top: icon.bottom
+                        bottom: parent.bottom
+                        left: parent.left
+                        right: parent.right
+                        leftMargin: 15
+                        rightMargin: 15
+                        bottomMargin: 15
+                    }
+                    maximumLineCount: 3
+                    elide: Text.ElideRight
+                    wrapMode: Text.Wrap
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+                }
             }
+
             Rectangle {
                 id: overlay
                 visible: opacity != 0.0
@@ -407,23 +400,21 @@ Rectangle {
             onClicked: homeScreen.state = "enabled"
         }
     }
-    Rectangle {
+    Row {
         id: pageIndicator
-        color: "transparent"
+        spacing: 20
         anchors {
+            bottomMargin: 40
             bottom: parent.bottom
             horizontalCenter: parent.horizontalCenter
         }
-        height: 80
-        width: 150
         Rectangle {
             property bool active: gridView.contentX < gridView.page
-            width: enabled && active ? 10 : 8
+            width: 10
             height: width
             radius: width / 2
-            color: active ? iconOverlayColor : uiColor
+            color: !active ? inactivePagerColor : uiColor
             anchors.verticalCenter: parent.verticalCenter
-            x: parent.width / 4 - width / 2
             MouseArea {
                 anchors.fill: parent
                 onClicked: gridView.contentX = 0
@@ -431,18 +422,12 @@ Rectangle {
         }
         Rectangle {
             property bool active: gridView.page <= gridView.contentX && gridView.contentX < 2 * gridView.page
-            width: enabled && active ? 10 : 8
-            enabled: gridView.count > 8
+            width: 10
+            visible: gridView.count > 8
             height: width
             radius: width / 2
-            color: {
-                if (!enabled)
-                    return inactivePagerColor
-
-                return active ? iconOverlayColor : uiColor
-            }
+            color: !active ? inactivePagerColor : uiColor
             anchors.verticalCenter: parent.verticalCenter
-            x: parent.width / 2 - width / 2
             MouseArea {
                 anchors.fill: parent
                 onClicked: gridView.contentX = gridView.page
@@ -450,24 +435,19 @@ Rectangle {
         }
         Rectangle {
             property bool active: 2 * gridView.page <= gridView.contentX
-            width: enabled && active ? 10 : 8
-            enabled: gridView.count > 16
+            width: 10
+            visible: gridView.count > 16
             height: width
             radius: width / 2
-            color: {
-                if (!enabled)
-                    return inactivePagerColor
-
-                return active ? iconOverlayColor : uiColor
-            }
+            color: !active ? inactivePagerColor : uiColor
             anchors.verticalCenter: parent.verticalCenter
-            x: 3 * parent.width / 4 - width / 2
             MouseArea {
                 anchors.fill: parent
                 onClicked: gridView.contentX = 2 * gridView.page
             }
         }
     }
+
     Rectangle {
         visible: gridView.count == 0
         color: "transparent"