gui: draw close icon when searchbox is visible (#810)

* gui: draw close icon when searchbox is visible
* setFocus when user click the search button

feeluown/gui/assets/themes/common.qss

@@ -23,11 +23,11 @@ LeftPanel QListView, QSplitter::handle {
 
 MagicBox {
  background: transparent;
- border-bottom: 1px dashed #777;
+ border: 1px solid grey;
+ border-radius: 2px;
 }
 MagicBox:focus {
- border-bottom: 1px solid #777;
- background: palette(window);
+ border: 1px solid palette(text);
  outline: none;
 }
 

feeluown/gui/drawers.py

@@ -136,6 +136,23 @@ def draw(self, painter):
  painter.drawLine(self.left, self.right)
 
 
+class SearchIconDrawer:
+ def __init__(self, length, padding):
+ t_l_x = t_l_y = padding
+ b_r_x = b_r_y = length - padding
+ center = int(length * 0.6)
+ self._bottom_right = QPoint(b_r_x, b_r_y)
+ self._top_left = QPoint(t_l_x, t_l_y)
+ self._center = QPoint(center, center)
+
+ def draw(self, painter: QPainter):
+ pen = painter.pen()
+ pen.setWidthF(1.5)
+ painter.setPen(pen)
+ painter.drawEllipse(QRect(self._top_left, self._center))
+ painter.drawLine(self._center, self._bottom_right)
+
+
 class TriangleIconDrawer:
  def __init__(self, length, padding, direction='up', brush=False):
  self._length = length

feeluown/gui/uimain/toolbar.py

@@ -5,25 +5,29 @@
 
 from feeluown.gui.components import Avatar
 from feeluown.gui.widgets import (
- LeftArrowButton, RightArrowButton, SearchButton, SettingsButton,
+ LeftArrowButton,
+ RightArrowButton,
+ SearchSwitchButton,
+ SettingsButton,
 )
 from feeluown.gui.widgets.magicbox import MagicBox
 from feeluown.gui.widgets.statusline import StatusLine
 
 if TYPE_CHECKING:
  from feeluown.app.gui_app import GuiApp
 
-
 ButtonSize = (30, 30)
 ButtonSpacing = int(ButtonSize[0] / 6)
 
 
 class ToolbarButton(QPushButton):
+
  def __init__(self, text, parent=None):
  super().__init__(text, parent=parent)
 
 
 class BottomPanel(QWidget):
+
  def __init__(self, app: 'GuiApp', parent=None):
  super().__init__(parent)
  self._app = app
@@ -34,7 +38,9 @@ def __init__(self, app: 'GuiApp', parent=None):
 
  self.magicbox = MagicBox(self._app)
 
- self._stack_switch = SearchButton(length=ButtonSize[0])
+ self._stack_switch = SearchSwitchButton(length=ButtonSize[0])
+ self._stack_switch.setToolTip("显示搜索框")
+ self._stack_switch.setCheckable(True)
  self._stacked_widget = QStackedWidget(self)
  self._stacked_widget.addWidget(self.magicbox)
  self._stack_switch.hide()
@@ -50,6 +56,8 @@ def __init__(self, app: 'GuiApp', parent=None):
  self.back_btn.clicked.connect(self._app.browser.back)
  self.forward_btn.clicked.connect(self._app.browser.forward)
  self._stack_switch.clicked.connect(self._show_next_stacked_widget)
+ self._stack_switch.toggled.connect(self._on_stack_switch_toggled)
+ self._stacked_widget.currentChanged.connect(self._on_stacked_widget_changed)
 
  self._setup_ui()
 
@@ -84,6 +92,19 @@ def _show_next_stacked_widget(self):
  else:
  next_index = 0
  self._stacked_widget.setCurrentIndex(next_index)
+ if self._stacked_widget.currentWidget() == self.magicbox:
+ self.magicbox.setFocus()
+
+ def _on_stack_switch_toggled(self, checked):
+ if checked:
+ self._stack_switch.setToolTip("关闭搜索框")
+ else:
+ self._stack_switch.setToolTip("显示搜索框")
+
+ def _on_stacked_widget_changed(self, _):
+ self._stack_switch.setChecked(
+ self._stacked_widget.currentWidget() == self.magicbox
+ )
 
  def add_stacked_widget(self, widget):
  """

feeluown/gui/widgets/__init__.py

@@ -2,7 +2,7 @@
 from .login import CookiesLoginDialog # noqa
 from .selfpaint_btn import ( # noqa
  SelfPaintAbstractSquareButton, RecentlyPlayedButton,
- HomeButton, LeftArrowButton, RightArrowButton, SearchButton, SettingsButton,
+ HomeButton, LeftArrowButton, RightArrowButton, SearchSwitchButton, SettingsButton,
  PlusButton, TriagleButton, DiscoveryButton,
  SelfPaintAbstractIconTextButton, CalendarButton, RankButton,
  StarButton, PlayPauseButton, PlayNextButton, PlayPreviousButton,

feeluown/gui/widgets/magicbox.py

@@ -2,7 +2,6 @@
 import sys
 
 from PyQt5.QtCore import Qt, QTimer, pyqtSignal
-from PyQt5.QtGui import QFontDatabase
 from PyQt5.QtWidgets import QLineEdit, QSizePolicy
 
 from feeluown.fuoexec import fuoexec
@@ -30,7 +29,6 @@ def __init__(self, app, parent=None):
  '输入 >>> 前缀之后，可以执行 Python 代码\n'
  '输入 # 前缀之后，可以过滤表格内容\n'
  '输入 > 前缀可以执行 fuo 命令（未实现，欢迎 PR）')
- self.setFont(QFontDatabase.systemFont(QFontDatabase.FixedFont))
  self.setSizePolicy(QSizePolicy.Expanding, QSizePolicy.Fixed)
  self.setFixedHeight(32)
  self.setFrame(False)

feeluown/gui/widgets/selfpaint_btn.py

@@ -10,6 +10,7 @@
  RankIconDrawer,
  StarIconDrawer,
  VolumeIconDrawer,
+ SearchIconDrawer,
 )
 from feeluown.gui.helpers import darker_or_lighter, painter_save
 
@@ -101,17 +102,19 @@ def __init__(self, length=30, padding=0.25, parent=None):
  )
  self.setFixedSize(length, length)
 
+ def paint_round_bg(self, painter):
+ painter.save()
+ painter.setPen(Qt.NoPen)
+ color = self.palette().color(QPalette.Background)
+ painter.setBrush(darker_or_lighter(color, 120))
+ painter.drawEllipse(self.rect())
+ painter.restore()
+
  def paint_round_bg_when_hover(self, painter):
  opt = QStyleOptionButton()
  self.initStyleOption(opt)
-
  if opt.state & QStyle.State_MouseOver:
- painter.save()
- painter.setPen(Qt.NoPen)
- color = self.palette().color(QPalette.Background)
- painter.setBrush(darker_or_lighter(color, 120))
- painter.drawEllipse(self.rect())
- painter.restore()
+ self.paint_round_bg(painter)
 
 
 class ArrowAbstractButton(SelfPaintAbstractSquareButton):
@@ -157,28 +160,30 @@ def cross(self):
  return self._right
 
 
-class SearchButton(SelfPaintAbstractSquareButton):
+class SearchSwitchButton(SelfPaintAbstractSquareButton):
 
  def __init__(self, **kwargs):
  super().__init__(**kwargs)
 
- t_l_x = t_l_y = self._padding
- b_r_x = b_r_y = self.width() - self._padding
- center = int(self.width() * 0.6)
- self._bottom_right = QPoint(b_r_x, b_r_y)
- self._top_left = QPoint(t_l_x, t_l_y)
- self._center = QPoint(center, center)
+ self._plus_drawer = PlusIconDrawer(self.width(), self._padding)
+ self._search_drawer = SearchIconDrawer(self.width(), self._padding)
+ # 0.21 = 1.414 / 2 - 0.5
+ self._translate_p = QPoint(self.width()//2, -int(self.width()*0.21))
 
  def paintEvent(self, _):
  painter = QPainter(self)
  painter.setRenderHint(QPainter.Antialiasing)
  self.paint_round_bg_when_hover(painter)
 
- set_pen_1_5(painter)
  # When the button size is very large, the line and the ellipse
  # will not be together.
- painter.drawEllipse(QRect(self._top_left, self._center))
- painter.drawLine(self._center, self._bottom_right)
+ if self.isChecked():
+ with painter_save(painter):
+ painter.translate(self._translate_p)
+ painter.rotate(45)
+ self._plus_drawer.draw(painter)
+ else:
+ self._search_drawer.draw(painter)
 
 
 class SettingsButton(SelfPaintAbstractSquareButton):
@@ -513,7 +518,7 @@ def paintEvent(self, _):
  right = RightArrowButton(length=length)
  right.setDisabled(True)
  l1.addWidget(right)
- l1.addWidget(SearchButton(length=length))
+ l1.addWidget(SearchSwitchButton(length=length))
  l1.addWidget(SettingsButton(length=length))
  l1.addWidget(RecentlyPlayedButton(height=length))
  l1.addWidget(HomeButton(height=length))

feeluown/gui/widgets/tabbar.py

@@ -68,7 +68,7 @@ class TabBar(QTabBar):
  def __init__(self, parent=None):
  super().__init__(parent=parent)
 
- self._height = 30
+ self._height = 32
  self.setFixedHeight(self._height)
 
  self.setDocumentMode(True)