Customize the searchBar using the css

- Use a the css to display the icon.
- Update the search.svg icon to be 40px wide.
- No need to have a custom paintEvent method.

resources/css/style.css

@@ -30,6 +30,19 @@ QToolButton {
     border: none;
 }
 
+SearchBar {
+    background-color: white;
+    background-image: url(":/icons/search.svg");
+    background-repeat: no-repeat;
+    padding: 2px 2px 2px 40px;
+    max-height: 40px;
+    margin: 5px;
+    color: #666;
+    font-size: 16px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+}
+
 /* -----------------------------------------
     TabWidget
 */

resources/icons/search.svg

@@ -1 +1,77 @@
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>icon / search</title><path d="M9.61 14.39L4 20l5.61-5.61a5.5 5.5 0 1 1 7.778-7.778 5.5 5.5 0 0 1-7.777 7.777z" stroke="#000" fill="#FFF" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<?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"
+   width="40"
+   height="40"
+   viewBox="0 0 40 40"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="search.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>icon / search</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2775"
+     inkscape:window-height="1527"
+     id="namedview8"
+     showgrid="false"
+     inkscape:snap-object-midpoints="false"
+     inkscape:snap-others="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="9.8333333"
+     inkscape:cx="-18.813559"
+     inkscape:cy="11.79661"
+     inkscape:window-x="0"
+     inkscape:window-y="55"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg6">
+    <sodipodi:guide
+       position="20,6"
+       orientation="1,0"
+       id="guide3717"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,0,255)" />
+    <sodipodi:guide
+       position="9.661,20"
+       orientation="0,1"
+       id="guide3719"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,0,255)" />
+  </sodipodi:namedview>
+  <title
+     id="title2">icon / search</title>
+  <path
+     d="m 18.02452,22.026487 -5.61,5.61 5.61,-5.61 a 5.5,5.5 0 1 1 7.778,-7.777999 5.5,5.5 0 0 1 -7.777,7.776999 z"
+     id="path4"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-linecap:round;stroke-linejoin:round" />
+</svg>

src/searchbar.cpp

@@ -7,12 +7,9 @@
 
 SearchBar::SearchBar(QWidget *parent) :
     QLineEdit(parent),
-    m_completer(&m_completionModel, this),
-    m_icon(":icons/search.svg")
+    m_completer(&m_completionModel, this)
 {
-    setTextMargins(37, 1, 1, 1);
     setPlaceholderText("Search");
-    setClearButtonEnabled(true);
     m_completer.setCompletionMode(QCompleter::UnfilteredPopupCompletion);
     setCompleter(&m_completer);
     connect(this, &QLineEdit::textEdited, this, &SearchBar::updateCompletion);
@@ -25,14 +22,6 @@ SearchBar::SearchBar(QWidget *parent) :
 #endif
 }
 
-void SearchBar::paintEvent(QPaintEvent *event)
-{
-    QLineEdit::paintEvent(event);
-    QPainter painter(this);
-    QPixmap pxm = m_icon.pixmap(height() - 6, height() - 6);
-    painter.drawPixmap(3, 3, pxm);
-}
-
 void SearchBar::updateCompletion(const QString &text)
 {
     QStringList wordList;

src/searchbar.h

@@ -12,15 +12,11 @@ class SearchBar : public QLineEdit
 public:
     SearchBar(QWidget *parent = nullptr);
 
-protected:
-    virtual void paintEvent(QPaintEvent *event);
-
 private:
     QStringListModel m_completionModel;
     QCompleter m_completer;
     std::vector<std::string> m_urlList;
     QString m_currentHost;
-    QIcon m_icon;
 
 private slots:
     void updateCompletion(const QString& text);