fix: Improve Plugin Store layout - larger cards and proper sizing
Changes: - Plugin cards now 320x220 minimum (was 300x200 fixed) - Cards have maximum width of 400px to prevent stretching too wide - PluginStoreUI now fills available space with stretch factor - Grid layout calculates columns based on available width - Removed hardcoded margins that were causing cramped layout - Search input now has minimum width of 300px - Buttons have minimum widths for consistent sizing
This commit is contained in:
parent
2235a67978
commit
b8d127a0e2
|
|
@ -1143,7 +1143,7 @@ class PerfectMainWindow(QMainWindow):
|
||||||
from core.plugin_store import PluginStoreUI
|
from core.plugin_store import PluginStoreUI
|
||||||
if self.plugin_manager:
|
if self.plugin_manager:
|
||||||
store_ui = PluginStoreUI(self.plugin_manager)
|
store_ui = PluginStoreUI(self.plugin_manager)
|
||||||
store_layout.addWidget(store_ui)
|
store_layout.addWidget(store_ui, 1) # Add stretch factor to fill space
|
||||||
else:
|
else:
|
||||||
raise Exception("PluginManager not available")
|
raise Exception("PluginManager not available")
|
||||||
except Exception as e:
|
except Exception as e:
|
||||||
|
|
@ -1154,9 +1154,9 @@ class PerfectMainWindow(QMainWindow):
|
||||||
ph_text.setAlignment(Qt.AlignmentFlag.AlignCenter)
|
ph_text.setAlignment(Qt.AlignmentFlag.AlignCenter)
|
||||||
ph_layout.addWidget(ph_text)
|
ph_layout.addWidget(ph_text)
|
||||||
placeholder.set_content(ph_layout)
|
placeholder.set_content(ph_layout)
|
||||||
store_layout.addWidget(placeholder)
|
store_layout.addWidget(placeholder, 1) # Add stretch factor
|
||||||
|
|
||||||
store_layout.addStretch()
|
# Remove the addStretch() - the widget should fill the space
|
||||||
tabs.addTab(store_tab, "Store")
|
tabs.addTab(store_tab, "Store")
|
||||||
|
|
||||||
layout.addWidget(tabs)
|
layout.addWidget(tabs)
|
||||||
|
|
|
||||||
|
|
@ -197,7 +197,7 @@ class PluginStoreUI(QWidget):
|
||||||
"""Create the UI."""
|
"""Create the UI."""
|
||||||
layout = QVBoxLayout(self)
|
layout = QVBoxLayout(self)
|
||||||
layout.setSpacing(15)
|
layout.setSpacing(15)
|
||||||
layout.setContentsMargins(20, 20, 20, 20)
|
layout.setContentsMargins(0, 0, 0, 0) # Remove margins to fill parent
|
||||||
|
|
||||||
# Header
|
# Header
|
||||||
header = QLabel("🔌 Plugin Store")
|
header = QLabel("🔌 Plugin Store")
|
||||||
|
|
@ -232,6 +232,7 @@ class PluginStoreUI(QWidget):
|
||||||
|
|
||||||
self.search_input = QLineEdit()
|
self.search_input = QLineEdit()
|
||||||
self.search_input.setPlaceholderText("🔍 Search plugins...")
|
self.search_input.setPlaceholderText("🔍 Search plugins...")
|
||||||
|
self.search_input.setMinimumWidth(300)
|
||||||
self.search_input.setStyleSheet("""
|
self.search_input.setStyleSheet("""
|
||||||
QLineEdit {
|
QLineEdit {
|
||||||
background-color: rgba(30, 35, 45, 200);
|
background-color: rgba(30, 35, 45, 200);
|
||||||
|
|
@ -246,6 +247,7 @@ class PluginStoreUI(QWidget):
|
||||||
|
|
||||||
self.category_combo = QComboBox()
|
self.category_combo = QComboBox()
|
||||||
self.category_combo.addItem("All Categories")
|
self.category_combo.addItem("All Categories")
|
||||||
|
self.category_combo.setMinimumWidth(150)
|
||||||
self.category_combo.setStyleSheet("""
|
self.category_combo.setStyleSheet("""
|
||||||
QComboBox {
|
QComboBox {
|
||||||
background-color: rgba(30, 35, 45, 200);
|
background-color: rgba(30, 35, 45, 200);
|
||||||
|
|
@ -267,6 +269,7 @@ class PluginStoreUI(QWidget):
|
||||||
filter_layout.addWidget(self.category_combo, 1)
|
filter_layout.addWidget(self.category_combo, 1)
|
||||||
|
|
||||||
self.refresh_btn = QPushButton("🔄 Refresh")
|
self.refresh_btn = QPushButton("🔄 Refresh")
|
||||||
|
self.refresh_btn.setMinimumWidth(100)
|
||||||
self.refresh_btn.setStyleSheet("""
|
self.refresh_btn.setStyleSheet("""
|
||||||
QPushButton {
|
QPushButton {
|
||||||
background-color: #4a9eff;
|
background-color: #4a9eff;
|
||||||
|
|
@ -284,6 +287,7 @@ class PluginStoreUI(QWidget):
|
||||||
filter_layout.addWidget(self.refresh_btn)
|
filter_layout.addWidget(self.refresh_btn)
|
||||||
|
|
||||||
self.check_updates_btn = QPushButton("📥 Check Updates")
|
self.check_updates_btn = QPushButton("📥 Check Updates")
|
||||||
|
self.check_updates_btn.setMinimumWidth(120)
|
||||||
self.check_updates_btn.setStyleSheet("""
|
self.check_updates_btn.setStyleSheet("""
|
||||||
QPushButton {
|
QPushButton {
|
||||||
background-color: #ff8c42;
|
background-color: #ff8c42;
|
||||||
|
|
@ -302,19 +306,21 @@ class PluginStoreUI(QWidget):
|
||||||
|
|
||||||
layout.addLayout(filter_layout)
|
layout.addLayout(filter_layout)
|
||||||
|
|
||||||
# Plugin grid
|
# Plugin grid - make it expand to fill space
|
||||||
self.scroll = QScrollArea()
|
self.scroll = QScrollArea()
|
||||||
self.scroll.setWidgetResizable(True)
|
self.scroll.setWidgetResizable(True)
|
||||||
self.scroll.setFrameShape(QFrame.Shape.NoFrame)
|
self.scroll.setFrameShape(QFrame.Shape.NoFrame)
|
||||||
self.scroll.setStyleSheet("background: transparent; border: none;")
|
self.scroll.setStyleSheet("background: transparent; border: none;")
|
||||||
|
self.scroll.setHorizontalScrollBarPolicy(Qt.ScrollBarPolicy.ScrollBarAlwaysOff)
|
||||||
|
|
||||||
self.grid_widget = QWidget()
|
self.grid_widget = QWidget()
|
||||||
self.grid_layout = QGridLayout(self.grid_widget)
|
self.grid_layout = QGridLayout(self.grid_widget)
|
||||||
self.grid_layout.setSpacing(15)
|
self.grid_layout.setSpacing(20)
|
||||||
|
self.grid_layout.setContentsMargins(10, 10, 10, 10)
|
||||||
self.grid_layout.setAlignment(Qt.AlignmentFlag.AlignTop | Qt.AlignmentFlag.AlignLeft)
|
self.grid_layout.setAlignment(Qt.AlignmentFlag.AlignTop | Qt.AlignmentFlag.AlignLeft)
|
||||||
|
|
||||||
self.scroll.setWidget(self.grid_widget)
|
self.scroll.setWidget(self.grid_widget)
|
||||||
layout.addWidget(self.scroll)
|
layout.addWidget(self.scroll, 1) # Add stretch factor to fill space
|
||||||
|
|
||||||
def _load_plugins(self):
|
def _load_plugins(self):
|
||||||
"""Load available plugins from repository."""
|
"""Load available plugins from repository."""
|
||||||
|
|
@ -388,18 +394,25 @@ class PluginStoreUI(QWidget):
|
||||||
self.grid_layout.addWidget(no_results, 0, 0)
|
self.grid_layout.addWidget(no_results, 0, 0)
|
||||||
return
|
return
|
||||||
|
|
||||||
# Create cards
|
# Create cards - use minimum 2 columns, expand to fill
|
||||||
columns = 3
|
# Calculate columns based on available width
|
||||||
|
available_width = self.scroll.width() - 40 # Account for margins
|
||||||
|
card_width = 340 # Card width + spacing
|
||||||
|
columns = max(2, available_width // card_width)
|
||||||
|
|
||||||
for i, plugin in enumerate(self.filtered_plugins):
|
for i, plugin in enumerate(self.filtered_plugins):
|
||||||
card = self._create_plugin_card(plugin)
|
card = self._create_plugin_card(plugin)
|
||||||
row = i // columns
|
row = i // columns
|
||||||
col = i % columns
|
col = i % columns
|
||||||
self.grid_layout.addWidget(card, row, col)
|
self.grid_layout.addWidget(card, row, col)
|
||||||
|
# Make columns stretch evenly
|
||||||
|
self.grid_layout.setColumnStretch(col, 1)
|
||||||
|
|
||||||
def _create_plugin_card(self, plugin: PluginInfo) -> QFrame:
|
def _create_plugin_card(self, plugin: PluginInfo) -> QFrame:
|
||||||
"""Create a plugin card widget."""
|
"""Create a plugin card widget."""
|
||||||
card = QFrame()
|
card = QFrame()
|
||||||
card.setFixedSize(300, 200)
|
card.setMinimumSize(320, 220)
|
||||||
|
card.setMaximumWidth(400)
|
||||||
card.setStyleSheet("""
|
card.setStyleSheet("""
|
||||||
QFrame {
|
QFrame {
|
||||||
background-color: rgba(35, 40, 55, 200);
|
background-color: rgba(35, 40, 55, 200);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue