feat(ui): ribbon bar + 4-viewport layout + layers panel

- Replace simple QToolBar with 6-tab functional RibbonBar
  (Home / Geometría / Análisis / Tanques / Sistemas / Fabricación)
  Each tab shows relevant button groups with icons + text below.
- Replace single 3D placeholder with FourViewport layout
  (Perspectiva 3D · Vista Lateral · Body Plan · Vista de Planta)
  divided by draggable cyan splitters — standard naval CAD layout.
- Replace ProjectTreePanel with DELFTship-style LayersPanel:
  10 preset layers with visibility toggle, lock toggle, and color swatch.
- Add pipe/cable routing modules (MOD_ROUTING_PIPES=21, MOD_ROUTING_CABLES=22)
  visible in Sistemas ribbon tab and main menu under Sistemas → Routing 3D.
- Move Units/Language info from toolbar to status bar (cleaner ribbon).
- Update dark.qss: new styles for ribbon tabs, viewports, layers panel,
  viewport splitter handles (accent blue), placeholder text.
- All 12 Sprint 0 tests pass.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-26 23:30:08 -04:00
parent 0dbc2a4518
commit 0dc1050e5a
2 changed files with 1589 additions and 616 deletions
File diff suppressed because it is too large Load Diff
+573 -119
View File
@@ -1,162 +1,616 @@
/* AR-ShipDesign — Tema Oscuro */ /* ============================================================
AR-ShipDesign — Tema Oscuro Profesional
Estilo: ingeniería CAD / naval / Office dark mode
Paleta: #1e2128 fondo, #252830 panel, #2d3139 elevado,
#0d99ff acento, #e8eaf0 texto, #8b919e texto muted
============================================================ */
/* ─── BASE ─────────────────────────────────────────────────── */
* {
outline: none;
}
QMainWindow, QDialog, QWidget { QMainWindow, QDialog, QWidget {
background-color: #1e2128; background-color: #1e2128;
color: #e0e0e0; color: #e8eaf0;
font-family: "Segoe UI", Arial, sans-serif; font-family: "Segoe UI", Arial, sans-serif;
font-size: 13px; font-size: 13px;
} }
/* ─── MENÚ ──────────────────────────────────────────────────── */
QMenuBar { QMenuBar {
background-color: #252830; background-color: #252830;
color: #e0e0e0; color: #e8eaf0;
border-bottom: 1px solid #3a3f4b; border-bottom: 1px solid #333841;
padding: 1px 0;
}
QMenuBar::item {
padding: 4px 10px;
background: transparent;
}
QMenuBar::item:selected {
background-color: #2d3139;
color: #ffffff;
}
QMenuBar::item:pressed {
background-color: #0d99ff;
color: #ffffff;
} }
QMenuBar::item:selected { background-color: #3a4050; }
QMenu { QMenu {
background-color: #2c313a;
color: #e0e0e0;
border: 1px solid #3a3f4b;
}
QMenu::item:selected { background-color: #1565c0; }
QMenu::separator { height: 1px; background: #3a3f4b; }
QToolBar {
background-color: #252830; background-color: #252830;
border-bottom: 1px solid #3a3f4b; color: #e8eaf0;
spacing: 4px; border: 1px solid #3a3f4b;
padding: 2px; padding: 3px 0;
} }
QToolButton { QMenu::item {
background: transparent; padding: 5px 28px 5px 20px;
border: 1px solid transparent; }
border-radius: 3px; QMenu::item:selected {
padding: 3px; background-color: #0d99ff;
color: #e0e0e0; color: #ffffff;
}
QMenu::item:disabled {
color: #555b67;
}
QMenu::separator {
height: 1px;
background: #333841;
margin: 3px 8px;
} }
QToolButton:hover { background-color: #3a4050; border-color: #5a6070; }
QToolButton:pressed { background-color: #1565c0; }
QSplitter::handle { background-color: #3a3f4b; } /* ─── RIBBON TOOLBAR (contenedor) ───────────────────────────── */
QSplitter::handle:horizontal { width: 3px; }
QSplitter::handle:vertical { height: 3px; }
QTreeWidget, QTreeView, QListView, QTableView, QTableWidget { QToolBar#ribbonToolbar {
background-color: #252830;
border: none;
border-bottom: 1px solid #333841;
padding: 0;
spacing: 0;
margin: 0;
}
/* ─── RIBBON BAR ────────────────────────────────────────────── */
QWidget#ribbonBar {
background-color: #252830;
}
/* Fila de pestañas */
QWidget#ribbonTabRow {
background-color: #1e2128; background-color: #1e2128;
alternate-background-color: #242830; border-bottom: 1px solid #333841;
color: #e0e0e0;
border: 1px solid #3a3f4b;
gridline-color: #3a3f4b;
selection-background-color: #1565c0;
selection-color: #ffffff;
} }
QTreeWidget::item:hover, QTreeView::item:hover { background-color: #2a2f3a; }
QHeaderView::section { /* Botones de pestañas */
background-color: #2c313a; QToolButton#ribbonTabBtn {
color: #b0b8c8; background: transparent;
border: 1px solid #3a3f4b; border: none;
padding: 4px 6px; border-bottom: 2px solid transparent;
border-radius: 0;
padding: 0 14px;
color: #8b919e;
font-size: 12px;
min-width: 80px;
height: 26px;
}
QToolButton#ribbonTabBtn:hover {
background-color: #2d3139;
color: #c8cad0;
}
QToolButton#ribbonTabBtn:checked {
background-color: #252830;
color: #0d99ff;
border-bottom: 2px solid #0d99ff;
font-weight: bold; font-weight: bold;
} }
QTabWidget::pane { /* Stack de contenido del ribbon */
border: 1px solid #3a3f4b; QStackedWidget#ribbonContent {
background-color: #1e2128;
}
QTabBar::tab {
background-color: #252830; background-color: #252830;
color: #a0a8b8;
border: 1px solid #3a3f4b;
border-bottom: none;
padding: 5px 10px;
margin-right: 1px;
}
QTabBar::tab:selected {
background-color: #1e2128;
color: #ffffff;
border-bottom: 2px solid #1976d2;
}
QTabBar::tab:hover { background-color: #2c313a; color: #e0e0e0; }
QScrollBar:vertical {
background-color: #1e2128;
width: 10px;
}
QScrollBar::handle:vertical {
background-color: #4a4f5b;
border-radius: 4px;
min-height: 20px;
}
QScrollBar::handle:vertical:hover { background-color: #5a6070; }
QScrollBar:horizontal {
background-color: #1e2128;
height: 10px;
}
QScrollBar::handle:horizontal {
background-color: #4a4f5b;
border-radius: 4px;
min-width: 20px;
} }
QPushButton { /* Grupo individual */
background-color: #1976d2; QFrame#ribbonGroup {
color: #ffffff;
border: none;
border-radius: 4px;
padding: 6px 14px;
font-weight: 500;
}
QPushButton:hover { background-color: #1e88e5; }
QPushButton:pressed { background-color: #1565c0; }
QPushButton:disabled { background-color: #3a3f4b; color: #6a7080; }
QPushButton[secondary="true"] {
background-color: transparent; background-color: transparent;
color: #90caf9; border: none;
border: 1px solid #1976d2; margin: 2px 0;
} }
QPushButton[secondary="true"]:hover { background-color: #1a2a3a; }
QLineEdit, QSpinBox, QDoubleSpinBox, QComboBox { /* Área de botones dentro del grupo */
background-color: #2c313a; QWidget#ribbonBtnArea {
color: #e0e0e0; background-color: transparent;
border: 1px solid #4a4f5b; }
/* Etiqueta del nombre del grupo */
QLabel#ribbonGroupTitle {
color: #8b919e;
font-size: 10px;
padding: 2px 0 3px 0;
background-color: transparent;
}
/* Separador vertical entre grupos */
QFrame#ribbonSep {
color: #2d3139;
margin: 6px 2px;
}
/* Botones de la ribbon */
QToolButton#ribbonButton {
background: transparent;
color: #e8eaf0;
border: 1px solid transparent;
border-radius: 3px; border-radius: 3px;
padding: 4px 6px; padding: 4px 6px 2px 6px;
font-size: 11px;
min-width: 46px;
max-width: 72px;
} }
QLineEdit:focus, QSpinBox:focus, QDoubleSpinBox:focus, QComboBox:focus { QToolButton#ribbonButton:hover {
border-color: #1976d2; background-color: #2d3139;
border-color: #3a3f4b;
}
QToolButton#ribbonButton:pressed {
background-color: #0d99ff;
color: #ffffff;
border-color: #0d99ff;
}
QToolButton#ribbonButton:checked {
background-color: #1a4a70;
border-color: #0d99ff;
}
QToolButton#ribbonButton:disabled {
color: #555b67;
} }
QComboBox::drop-down { border: none; } /* ─── 4 VIEWPORTS ───────────────────────────────────────────── */
QComboBox::down-arrow { image: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #a0a8b8; margin-right: 6px; }
QComboBox QAbstractItemView { background-color: #2c313a; color: #e0e0e0; selection-background-color: #1565c0; }
QLabel { color: #e0e0e0; } QWidget#fourViewport {
QLabel[heading="true"] { font-size: 14px; font-weight: bold; color: #90caf9; } background-color: #12151a;
QLabel[muted="true"] { color: #7a8090; } }
QFrame#viewportFrame {
background-color: #12151a;
border: 1px solid #1e2128;
}
QWidget#viewportTitleBar {
background-color: #1a1e26;
border-bottom: 1px solid #2a2e38;
}
QLabel#viewportTitle {
color: #6b7280;
font-size: 11px;
font-weight: bold;
letter-spacing: 0.5px;
}
QWidget#viewportCanvas {
background-color: #0e1117;
}
QLabel#viewportPlaceholder {
color: #1e2540;
font-size: 20px;
font-family: "Consolas", monospace;
font-weight: bold;
letter-spacing: 2px;
}
/* Separadores arrastrables del viewport */
QSplitter#viewportSplitter::handle {
background-color: #0d99ff;
}
QSplitter#viewportSplitter::handle:horizontal {
width: 3px;
}
QSplitter#viewportSplitter::handle:vertical {
height: 3px;
}
QSplitter#viewportSplitter::handle:hover {
background-color: #3db8ff;
}
/* ─── DOCK WIDGETS ──────────────────────────────────────────── */
QDockWidget {
color: #e8eaf0;
font-weight: bold;
font-size: 12px;
}
QDockWidget::title {
background-color: #252830;
padding: 4px 8px;
border-bottom: 1px solid #333841;
text-align: left;
}
QDockWidget::close-button,
QDockWidget::float-button {
background: transparent;
border: none;
padding: 2px;
}
QDockWidget::close-button:hover,
QDockWidget::float-button:hover {
background-color: #3a3f4b;
border-radius: 2px;
}
/* ─── PANEL DE CAPAS ────────────────────────────────────────── */
QWidget#layersPanel {
background-color: #1e2128;
}
QWidget#layersPanelHeader {
background-color: #252830;
border-bottom: 1px solid #333841;
}
QFrame#panelSep {
color: #333841;
max-height: 1px;
}
QScrollArea#layersScrollArea {
background-color: #1e2128;
border: none;
}
QWidget#layersContainer {
background-color: #1e2128;
}
QWidget#layerRow {
background-color: transparent;
min-height: 26px;
}
QWidget#layerRow:hover {
background-color: #252830;
}
QLabel#layerName {
color: #c8cad0;
font-size: 12px;
}
/* Botón de visibilidad de capa */
QToolButton#layerVisBtn {
background: transparent;
border: 1px solid transparent;
border-radius: 2px;
color: #0d99ff;
font-size: 9px;
font-weight: bold;
}
QToolButton#layerVisBtn:hover {
background-color: #2d3139;
border-color: #3a3f4b;
}
QToolButton#layerVisBtn:checked {
background-color: #1a4a70;
border-color: #0d99ff;
}
/* Botón de bloqueo de capa */
QToolButton#layerLockBtn {
background: transparent;
border: 1px solid transparent;
border-radius: 2px;
color: #fbbf24;
font-size: 9px;
}
QToolButton#layerLockBtn:hover {
background-color: #2d3139;
border-color: #3a3f4b;
}
QToolButton#layerLockBtn:checked {
background-color: #3d2c00;
border-color: #fbbf24;
}
/* ─── PROPIEDADES ───────────────────────────────────────────── */
QWidget#propContent {
background-color: #1e2128;
}
QLabel#propSection {
color: #8b919e;
font-size: 11px;
padding-bottom: 6px;
border-bottom: 1px solid #333841;
margin-bottom: 4px;
}
QLabel#propKey {
color: #8b919e;
font-size: 12px;
}
QLabel#propVal {
color: #e8eaf0;
font-size: 13px;
}
/* ─── PANEL HIDROSTÁTICOS ───────────────────────────────────── */
QFrame#hydrostaticsPanel {
background-color: #14181f;
border-top: 1px solid #333841;
}
QLabel#hydroTitle {
color: #555b67;
font-size: 10px;
font-weight: bold;
padding: 0 10px 0 4px;
letter-spacing: 1px;
}
QFrame#hydroSep {
color: #333841;
}
QLabel#hydroKey {
color: #8b919e;
font-size: 11px;
padding: 0 2px;
}
QLabel#hydroVal {
color: #0d99ff;
font-family: "Consolas", monospace;
font-size: 12px;
min-width: 52px;
}
QLabel#hydroImoNone {
color: #555b67;
font-family: "Consolas", monospace;
font-size: 12px;
}
QLabel#hydroImoOk {
color: #34c759;
font-family: "Consolas", monospace;
font-size: 12px;
font-weight: bold;
}
QLabel#hydroImoFail {
color: #ff3b30;
font-family: "Consolas", monospace;
font-size: 12px;
font-weight: bold;
}
/* ─── MÓDULOS PLACEHOLDER ───────────────────────────────────── */
QWidget#modulePlaceholder {
background-color: #1e2128;
}
QLabel#placeholderTitle {
color: #2d3448;
font-size: 18px;
font-weight: bold;
}
QLabel#placeholderDesc {
color: #3a4055;
font-size: 13px;
}
QLabel#placeholderMsg {
color: #333841;
font-size: 12px;
}
/* ─── BARRA DE ESTADO ───────────────────────────────────────── */
QStatusBar { QStatusBar {
background-color: #1565c0; background-color: #0d99ff;
color: #ffffff; color: #ffffff;
font-size: 12px; font-size: 12px;
} }
QStatusBar::item { border: none; } QStatusBar::item { border: none; }
/* Panel Hidrostáticos — siempre visible abajo */ QLabel#statusVersion {
#hydrostaticsPanel { color: rgba(255,255,255,0.85);
background-color: #151a22; font-size: 11px;
border-top: 2px solid #1976d2; font-weight: bold;
}
QLabel#statusLabel {
color: rgba(255,255,255,0.70);
font-size: 11px;
}
QLabel#statusValue {
color: #ffffff;
font-size: 11px;
font-weight: bold;
} }
#hydrostaticsPanel QLabel { font-family: "Consolas", monospace; font-size: 12px; }
#hydrostaticsPanel QLabel[value="true"] { color: #80deea; font-weight: bold; }
#hydrostaticsPanel QLabel[label="true"] { color: #7a8090; }
#hydrostaticsPanel QLabel[imo_ok="true"] { color: #66bb6a; font-weight: bold; }
#hydrostaticsPanel QLabel[imo_fail="true"] { color: #ef5350; font-weight: bold; }
/* Panel Árbol de Proyecto */ /* ─── SCROLLBARS ────────────────────────────────────────────── */
#projectTree { border-right: 1px solid #3a3f4b; }
/* Panel Propiedades */ QScrollBar:vertical {
#propertiesPanel { border-left: 1px solid #3a3f4b; } background: #1e2128;
width: 10px;
border: none;
}
QScrollBar::handle:vertical {
background: #3a3f4b;
border-radius: 5px;
min-height: 24px;
}
QScrollBar::handle:vertical:hover { background: #555b67; }
QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical { height: 0; }
QScrollBar:horizontal {
background: #1e2128;
height: 10px;
border: none;
}
QScrollBar::handle:horizontal {
background: #3a3f4b;
border-radius: 5px;
min-width: 24px;
}
QScrollBar::handle:horizontal:hover { background: #555b67; }
QScrollBar::add-line:horizontal, QScrollBar::sub-line:horizontal { width: 0; }
/* ─── BOTONES ───────────────────────────────────────────────── */
QPushButton {
background-color: #2d3139;
color: #e8eaf0;
border: 1px solid #3a3f4b;
border-radius: 3px;
padding: 5px 14px;
min-width: 72px;
}
QPushButton:hover {
background-color: #3a3f4b;
border-color: #555b67;
}
QPushButton:pressed {
background-color: #0d99ff;
color: #ffffff;
border-color: #0d99ff;
}
QPushButton:default { border-color: #0d99ff; }
QPushButton:disabled { color: #555b67; border-color: #2d3139; }
/* ─── CAMPOS DE ENTRADA ─────────────────────────────────────── */
QLineEdit, QSpinBox, QDoubleSpinBox, QComboBox {
background-color: #252830;
color: #e8eaf0;
border: 1px solid #3a3f4b;
border-radius: 3px;
padding: 4px 6px;
selection-background-color: #0d99ff;
}
QLineEdit:focus, QSpinBox:focus, QDoubleSpinBox:focus, QComboBox:focus {
border-color: #0d99ff;
}
QLineEdit:disabled, QSpinBox:disabled, QDoubleSpinBox:disabled {
color: #555b67;
background-color: #1e2128;
}
QComboBox::drop-down { border: none; width: 20px; }
QComboBox QAbstractItemView {
background-color: #252830;
color: #e8eaf0;
border: 1px solid #3a3f4b;
selection-background-color: #0d99ff;
}
/* ─── TABLAS Y LISTAS ───────────────────────────────────────── */
QHeaderView::section {
background-color: #252830;
color: #8b919e;
border: none;
border-right: 1px solid #333841;
border-bottom: 1px solid #333841;
padding: 4px 8px;
font-size: 12px;
}
QTableView, QListView {
background-color: #1e2128;
alternate-background-color: #212630;
color: #e8eaf0;
border: 1px solid #333841;
gridline-color: #2d3139;
selection-background-color: #0d99ff;
selection-color: #ffffff;
}
QTableView::item:hover, QListView::item:hover {
background-color: #2d3139;
}
/* ─── ÁRBOL ─────────────────────────────────────────────────── */
QTreeWidget {
background-color: #1e2128;
alternate-background-color: #212630;
color: #e8eaf0;
border: none;
selection-background-color: #0d99ff;
selection-color: #ffffff;
font-size: 13px;
}
QTreeWidget::item {
padding: 3px 4px;
border: none;
}
QTreeWidget::item:hover {
background-color: #2d3139;
}
QTreeWidget::item:selected {
background-color: #0d99ff;
color: #ffffff;
}
QTreeWidget::branch {
background-color: #1e2128;
}
/* ─── PESTAÑAS ──────────────────────────────────────────────── */
QTabWidget::pane {
border: none;
border-top: 1px solid #333841;
background-color: #1e2128;
}
QTabBar {
background-color: #252830;
}
QTabBar::tab {
background-color: #252830;
color: #8b919e;
border: none;
border-right: 1px solid #333841;
padding: 6px 14px;
min-width: 70px;
font-size: 12px;
}
QTabBar::tab:selected {
background-color: #1e2128;
color: #e8eaf0;
border-top: 2px solid #0d99ff;
}
QTabBar::tab:hover:!selected {
background-color: #2d3139;
color: #e8eaf0;
}
/* ─── SPLITTER GENERAL ──────────────────────────────────────── */
QSplitter::handle { background-color: #333841; }
QSplitter::handle:horizontal { width: 1px; }
QSplitter::handle:vertical { height: 1px; }
/* ─── MENSAJES / TOOLTIP ────────────────────────────────────── */
QMessageBox { background-color: #252830; }
QMessageBox QLabel { color: #e8eaf0; }
QToolTip {
background-color: #252830;
color: #e8eaf0;
border: 1px solid #3a3f4b;
padding: 4px 6px;
font-size: 12px;
}
/* ─── WIDGET DE INFO (ribbonInfoWidget legado) ──────────────── */
QWidget#ribbonInfoWidget {
background-color: transparent;
border-left: 1px solid #333841;
padding-left: 4px;
}
QLabel#tbLabel {
color: #8b919e;
font-size: 11px;
}
QLabel#tbValue {
color: #0d99ff;
font-weight: bold;
font-size: 11px;
}