Add button to search bar in shop main widget

rare/components/tabs/shop/shop_widget.py

@@ -10,7 +10,7 @@ from PyQt5.QtWidgets import QWidget, QCompleter, QGroupBox, QHBoxLayout, QScroll
 
 from rare.components.tabs.shop.game_widgets import GameWidget
 from rare.ui.components.tabs.store.store import Ui_ShopWidget
-from rare.utils.extra_widgets import WaitingSpinner, FlowLayout
+from rare.utils.extra_widgets import WaitingSpinner, FlowLayout, ButtonLineEdit
 from rare.utils.utils import get_lang
 
 logger = logging.getLogger("Shop")
@@ -40,13 +40,21 @@ class ShopWidget(QScrollArea, Ui_ShopWidget):
         self.free_games_widget.layout().addWidget(self.coming_free_games)
         self.free_games_stack.addWidget(WaitingSpinner())
         self.free_games_stack.addWidget(self.free_games_widget)
-        self.search.textChanged.connect(self.search_games)
+
         self.completer = QCompleter()
         self.completer.setCaseSensitivity(Qt.CaseInsensitive)
-        self.search.setCompleter(self.completer)
+
-        self.search.returnPressed.connect(self.show_search_result)
         self.data = []
 
+        self.search_bar = ButtonLineEdit("fa.search", placeholder_text=self.tr("Search Games"))
+        self.scrollAreaWidgetContents.layout().insertWidget(0, self.search_bar)
+
+        self.search_bar.textChanged.connect(self.search_games)
+
+        self.search_bar.setCompleter(self.completer)
+        self.search_bar.returnPressed.connect(self.show_search_result)
+        self.search_bar.buttonClicked.connect(self.show_search_result)
+
         self.games_groupbox.setLayout(FlowLayout())
         self.games_groupbox.setVisible(False)
 

rare/ui/components/tabs/store/store.py

@@ -8,7 +8,7 @@
 # run again.  Do not edit this file unless you know what you are doing.
 
 
-from PyQt5 import QtCore, QtGui, QtWidgets
+from PyQt5 import QtCore, QtWidgets
 
 
 class Ui_ShopWidget(object):
@@ -25,9 +25,6 @@ class Ui_ShopWidget(object):
         self.scrollAreaWidgetContents.setObjectName("scrollAreaWidgetContents")
         self.verticalLayout_3 = QtWidgets.QVBoxLayout(self.scrollAreaWidgetContents)
         self.verticalLayout_3.setObjectName("verticalLayout_3")
-        self.search = QtWidgets.QLineEdit(self.scrollAreaWidgetContents)
-        self.search.setObjectName("search")
-        self.verticalLayout_3.addWidget(self.search)
         self.free_game_group_box = QtWidgets.QGroupBox(self.scrollAreaWidgetContents)
         self.free_game_group_box.setObjectName("free_game_group_box")
         self.verticalLayout_2 = QtWidgets.QVBoxLayout(self.free_game_group_box)
@@ -51,7 +48,6 @@ class Ui_ShopWidget(object):
     def retranslateUi(self, ShopWidget):
         _translate = QtCore.QCoreApplication.translate
         ShopWidget.setWindowTitle(_translate("ShopWidget", "Form"))
-        self.search.setPlaceholderText(_translate("ShopWidget", "Search Games"))
         self.free_game_group_box.setTitle(_translate("ShopWidget", "Free Games"))
         self.games_groupbox.setTitle(_translate("ShopWidget", "Other nice games"))
 

rare/ui/components/tabs/store/store.ui

@@ -29,13 +29,6 @@
        </rect>
       </property>
       <layout class="QVBoxLayout" name="verticalLayout_3">
-       <item>
-        <widget class="QLineEdit" name="search">
-         <property name="placeholderText">
-          <string>Search Games</string>
-         </property>
-        </widget>
-       </item>
        <item>
         <widget class="QGroupBox" name="free_game_group_box">
          <property name="title">

rare/utils/extra_widgets.py

@@ -7,7 +7,7 @@ from PyQt5.QtCore import Qt, QRect, QSize, QPoint, pyqtSignal, QUrl, QSettings
 from PyQt5.QtGui import QMovie, QPixmap
 from PyQt5.QtNetwork import QNetworkAccessManager, QNetworkRequest, QNetworkReply
 from PyQt5.QtWidgets import QLayout, QStyle, QSizePolicy, QLabel, QFileDialog, QHBoxLayout, QWidget, QPushButton, \
-    QStyleOptionTab, QStylePainter, QTabBar
+    QStyleOptionTab, QStylePainter, QTabBar, QLineEdit, QToolButton
 from qtawesome import icon
 
 from rare import style_path
@@ -15,6 +15,7 @@ from rare.ui.utils.pathedit import Ui_PathEdit
 
 logger = getLogger("ExtraWidgets")
 
+
 class FlowLayout(QLayout):
     def __init__(self, parent=None, margin=-1, hspacing=-1, vspacing=-1):
         super(FlowLayout, self).__init__(parent)
@@ -310,3 +311,30 @@ class ImageLabel(QLabel):
         self.image = QPixmap(os.path.join(self.path, self.name)).scaled(*self.img_size,
                                                                         transformMode=Qt.SmoothTransformation)
         self.setPixmap(self.image)
+
+
+class ButtonLineEdit(QLineEdit):
+    buttonClicked = pyqtSignal()
+
+    def __init__(self, icon_name, placeholder_text: str, parent=None):
+        super(ButtonLineEdit, self).__init__(parent)
+
+        self.button = QToolButton(self)
+        self.button.setIcon(icon(icon_name, color="white"))
+        self.button.setStyleSheet('border: 0px; padding: 0px;')
+        self.button.setCursor(Qt.ArrowCursor)
+        self.button.clicked.connect(self.buttonClicked.emit)
+
+        frameWidth = self.style().pixelMetric(QStyle.PM_DefaultFrameWidth)
+        buttonSize = self.button.sizeHint()
+
+        self.setStyleSheet('QLineEdit {padding-right: %dpx; }' % (buttonSize.width() + frameWidth + 1))
+        self.setMinimumSize(max(self.minimumSizeHint().width(), buttonSize.width() + frameWidth * 2 + 2),
+                            max(self.minimumSizeHint().height(), buttonSize.height() + frameWidth * 2 + 2))
+
+    def resizeEvent(self, event):
+        buttonSize = self.button.sizeHint()
+        frameWidth = self.style().pixelMetric(QStyle.PM_DefaultFrameWidth)
+        self.button.move(self.rect().right() - frameWidth - buttonSize.width(),
+                         (self.rect().bottom() - buttonSize.height() + 1) / 2)
+        super(ButtonLineEdit, self).resizeEvent(event)