Add floating menu styles and icon sizes

Introduced new constants for floating menu dimensions and colors in `constants.py`. Updated styles for buttons, separators, and combo boxes to utilize these constants for consistency. Adjusted icon sizes for various combo boxes in the floating menu widgets to enhance UI appearance.
This commit is contained in:
Dmitry Litvinov 2025-11-20 18:53:48 +03:00
parent cf49e8659e
commit 8756529c13
7 changed files with 53 additions and 29 deletions

View file

@ -1,4 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 3C19.6569 3 21 4.34315 21 6V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 4.34315 4.34315 3 6 3H18ZM8 5C6.34315 5 5 6.34315 5 8V16C5 17.6569 6.34315 19 8 19H16C17.6569 19 19 17.6569 19 16V8C19 6.34315 17.6569 5 16 5H8Z" fill="white"/>
<path d="M12 6H9C7.34315 6 6 7.34315 6 9V15C6 16.6569 7.34315 18 9 18H12V6Z" fill="#FFFEFE"/>
<path d="M19 2C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2H19ZM5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5Z" fill="white"/>
<path d="M11.5 14.5H4V19C4 19.5523 4.44771 20 5 20H11.5V14.5Z" fill="#0059FF"/>
<path d="M11.5 4H5C4.44771 4 4 4.44772 4 5V9.5H11.5V4Z" fill="#FF0000"/>
<path d="M12.5 20H19C19.5523 20 20 19.5523 20 19V12H12.5V20Z" fill="#FFFEFE"/>
<path d="M12.5 12H20V5C20 4.44772 19.5523 4 19 4H12.5V12Z" fill="black"/>
<path d="M4 9.5H11.5V14.5H4V9.5Z" fill="#4DFF00"/>
</svg>

Before

Width:  |  Height:  |  Size: 462 B

After

Width:  |  Height:  |  Size: 725 B

View file

@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 3C19.6569 3 21 4.34315 21 6V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 4.34315 4.34315 3 6 3H18ZM12 12V19H19V12H12ZM5 5V12H12V5H5Z" fill="white"/>
<path d="M19 2C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2H19ZM5.11133 3C4.007 3.00012 3.11156 3.8957 3.11133 5V12H11.8896V21H18.8896C19.9937 20.9996 20.8894 20.1041 20.8896 19V12H12.1113V3H5.11133Z" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 283 B

After

Width:  |  Height:  |  Size: 385 B

View file

@ -21,6 +21,14 @@ COPYRIGHT = 'Copyright © 2021-2024 Rebecca Breu'
CHANGED_SYMBOL = ''
# Floating Menu Sizes
FLOATING_MENU_BUTTON_SIZE = 32
FLOATING_MENU_ICON_SIZE = 32
FLOATING_MENU_BUTTON_PADDING = 4
FLOATING_MENU_CORNER_RADIUS = 4
FLOATING_MENU_BASE_CORNER_RADIUS = 8
FLOATING_MENU_BOTTOM_MARGIN = 8
COLORS = {
# Qt:
'Active:Base': (60, 60, 60),
@ -44,6 +52,11 @@ COLORS = {
'Scene:Selection': (116, 234, 231),
'Scene:Canvas': (60, 60, 60),
'Scene:Text': (200, 200, 200),
# Floating Menu specific:
'FloatingMenu:ButtonBackground': (255, 255, 255, 30),
'FloatingMenu:Border': (255, 255, 255, 10),
'FloatingMenu:SeparatorBackground': (255, 255, 255, 8),
}
@ -92,7 +105,7 @@ def get_floating_menu_base_style():
return f"""
QWidget#FloatingMenu {{
background-color: {_css_color(bg)};
border-radius: 8px;
border-radius: {FLOATING_MENU_BASE_CORNER_RADIUS}px;
border: 1px solid {_css_color(border)};
}}
"""
@ -100,23 +113,26 @@ def get_floating_menu_base_style():
def get_floating_menu_button_style():
"""Push button styling for floating menus."""
background_color = (255, 255, 255, 30)
border_color = (255, 255, 255, 10)
background_color = COLORS['FloatingMenu:ButtonBackground']
border_color = COLORS['FloatingMenu:Border']
inactive = COLORS['Disabled:Text']
active = COLORS['Active:Text']
accent = COLORS['Active:Highlight']
size = FLOATING_MENU_BUTTON_SIZE
padding = FLOATING_MENU_BUTTON_PADDING
radius = FLOATING_MENU_CORNER_RADIUS
return f"""
QWidget#FloatingMenu QPushButton[floatingButton="true"] {{
background-color: {_css_color(background_color)};
color: {_css_color(inactive)};
border: 1px solid {_css_color(border_color)};
border-radius: 4px;
padding: 4px 10px;
border-radius: {radius}px;
padding: {padding}px;
font-weight: 600;
min-width: 12px;
min-height: 28px;
max-height: 28px;
min-width: {size}px;
min-height: {size}px;
max-height: {size}px;
}}
QWidget#FloatingMenu QPushButton[floatingButton="true"]:hover,
@ -134,14 +150,14 @@ def get_floating_menu_button_style():
def get_floating_menu_separator_style():
"""Separator styling for floating menus."""
border_color = (255, 255, 255, 10)
r, g, b = border_color[:3]
separator_bg = COLORS['FloatingMenu:SeparatorBackground']
size = FLOATING_MENU_BUTTON_SIZE
return f"""
QWidget#FloatingMenu QFrame#FloatingMenuSeparator {{
background-color: rgba({r}, {g}, {b}, 30);
min-height: 28px;
max-height: 28px;
background-color: {_css_color(separator_bg)};
min-height: {size}px;
max-height: {size}px;
}}
"""
@ -150,15 +166,16 @@ def get_floating_menu_combo_style():
"""Combo-box styling for floating menus."""
from beeref.assets import BeeAssets
bg = COLORS['Active:Button']
# Use Active:Button for consistency with other UI elements
bg = COLORS['FloatingMenu:ButtonBackground']
active_color = COLORS['Active:Text']
border_color = (255, 255, 255, 10)
border_r, border_g, border_b = border_color[:3]
size = FLOATING_MENU_BUTTON_SIZE
radius = FLOATING_MENU_CORNER_RADIUS
# Получаем путь к иконке стрелки
# Get arrow icon path
assets = BeeAssets()
arrow_icon_path = assets.PATH.joinpath('icons', 'small-down.svg')
# Используем прямой путь, экранируя обратные слеши для Windows
# Escape backslashes for Windows compatibility
arrow_icon_path_str = str(arrow_icon_path).replace('\\', '/')
return f"""
@ -166,18 +183,17 @@ def get_floating_menu_combo_style():
QWidget#FloatingMenu QFontComboBox {{
background-color: {_css_color(bg)};
color: {_css_color(active_color)};
border: 1px solid rgba({border_r}, {border_g}, {border_b}, 160);
border-radius: 4px;
padding: 4px 12px;
border-radius: {radius}px;
padding: 4px 16px;
min-width: 40px;
min-height: 28px;
max-height: 28px;
min-height: {size}px;
max-height: {size}px;
}}
QWidget#FloatingMenu QComboBox::drop-down,
QWidget#FloatingMenu QFontComboBox::drop-down {{
border: none;
width: 16px;
width: 20px;
}}
QWidget#FloatingMenu QComboBox::down-arrow,
@ -185,7 +201,7 @@ def get_floating_menu_combo_style():
image: url({arrow_icon_path_str});
width: 12px;
height: 12px;
margin-right: 4px;
margin-right: 8px;
}}
QWidget#FloatingMenu QComboBox QAbstractItemView,

View file

@ -101,6 +101,7 @@ class DrawFloatingMenu(FloatingMenu):
combo = UpwardComboBox(self)
combo.setObjectName("FloatingMenuLineStyle")
combo.setMinimumWidth(40)
combo.setIconSize(QtCore.QSize(32, 32))
# Добавляем элементы с иконками
combo.addItem(solid_icon, "", 'solid')

View file

@ -142,6 +142,7 @@ class FloatingMenu(QtWidgets.QWidget):
button.setCheckable(checkable)
if icon:
button.setIcon(icon)
button.setIconSize(QtCore.QSize(32, 32))
button.setProperty("floatingButton", True)
if callback:
# Connect directly - button events are handled independently

View file

@ -64,6 +64,7 @@ class GifFloatingMenu(FloatingMenu):
self.speed_combo = QtWidgets.QComboBox(self)
self.speed_combo.setObjectName("FloatingMenuGifSpeed")
self.speed_combo.setMinimumWidth(40)
self.speed_combo.setIconSize(QtCore.QSize(32, 32))
for speed in self.SPEED_VALUES:
label = self._format_speed_label(speed)

View file

@ -4,7 +4,7 @@ from __future__ import annotations
from typing import TYPE_CHECKING
from PyQt6 import QtGui, QtWidgets
from PyQt6 import QtCore, QtGui, QtWidgets
from beeref.assets import BeeAssets
from beeref.widgets.floating_menu import FloatingMenu
@ -83,6 +83,7 @@ class TextFloatingMenu(FloatingMenu):
self.font_combo = QtWidgets.QComboBox(self)
self.font_combo.setObjectName("FloatingMenuFontFamily")
self.font_combo.setMinimumWidth(40)
self.font_combo.setIconSize(QtCore.QSize(32, 32))
self.font_combo.setEditable(False)
self.font_combo.setInsertPolicy(
QtWidgets.QComboBox.InsertPolicy.NoInsert)