Interface mockup 7

src/interface/MainWindow.cpp

@@ -65,6 +65,7 @@ MainWindow::MainWindow(QWidget* parent)
 }
 
 void MainWindow::setupChrome() {
+    setObjectName("appWindow");
     setWindowTitle("IfcOpenShell Interface");
     setDockOptions(QMainWindow::AllowNestedDocks |
                    QMainWindow::AllowTabbedDocks |
@@ -100,6 +101,7 @@ QWidget* MainWindow::makeRibbonGroup(const QString& title, const QList<QToolButt
     }
     auto* label = new QLabel(title, group);
     label->setObjectName("ribbonGroupLabel");
+    label->setProperty("textRole", "secondary");
     label->setAlignment(Qt::AlignCenter);
     group_layout->addLayout(button_row);
     group_layout->addWidget(label);

src/interface/components/KeyValueTable.cpp

@@ -22,9 +22,8 @@
 
 #include "SvgIcon.h"
 
-#include <QHBoxLayout>
+#include <QGridLayout>
 #include <QLabel>
-#include <QVBoxLayout>
 
 namespace ifcinterface::components {
 
@@ -33,49 +32,40 @@ KeyValueTable::KeyValueTable(const QList<KeyValueTableRow>& rows, QWidget* paren
 {
     setObjectName("keyValueTable");
 
-    auto* layout = new QVBoxLayout(this);
+    auto* layout = new QGridLayout(this);
     layout->setContentsMargins(0, 0, 0, 0);
-    layout->setSpacing(6);
+    layout->setHorizontalSpacing(12);
+    layout->setVerticalSpacing(6);
+    layout->setColumnStretch(1, 1);
 
+    int row_index = 0;
     for (const auto& row_data : rows) {
-        auto* row = new QWidget(this);
+        auto* key = new QLabel(row_data.key, this);
-        if (!row_data.trailing_icon_path.isEmpty()) {
+        key->setProperty("textRole", "secondary");
-            row->setObjectName("relationshipRow");
-        } else {
-            row->setObjectName("keyValueRow");
-        }
-
-        auto* row_layout = new QHBoxLayout(row);
-        row_layout->setContentsMargins(0, 0, 0, 0);
-        row_layout->setSpacing(12);
-
-        auto* key = new QLabel(row_data.key, row);
-        key->setObjectName("propertyKeyLabel");
         if (row_data.key_minimum_width > 0) {
             key->setMinimumWidth(row_data.key_minimum_width);
         }
 
-        auto* value = new QLabel(row_data.value, row);
+        auto* value = new QLabel(row_data.value, this);
         value->setObjectName(row_data.value_object_name.isEmpty()
                                  ? "keyValueValueLabel"
                                  : row_data.value_object_name);
         value->setWordWrap(true);
         value->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Preferred);
 
-        row_layout->addWidget(key);
+        layout->addWidget(key, row_index, 0, Qt::AlignLeft | Qt::AlignTop);
-        row_layout->addWidget(value, 1);
+        layout->addWidget(value, row_index, 1);
 
         if (!row_data.trailing_icon_path.isEmpty()) {
-            auto* icon = new QLabel(row);
+            auto* icon = new QLabel(this);
             icon->setObjectName(row_data.trailing_icon_object_name.isEmpty()
-                                    ? "relationshipIconLabel"
+                                    ? "keyValueTrailingIconLabel"
                                     : row_data.trailing_icon_object_name);
             icon->setPixmap(icons::makePanelSvgPixmap(row_data.trailing_icon_path, QSize(14, 14)));
             icon->setAlignment(Qt::AlignRight | Qt::AlignVCenter);
-            row_layout->addWidget(icon, 0, Qt::AlignRight | Qt::AlignVCenter);
+            layout->addWidget(icon, row_index, 2, Qt::AlignRight | Qt::AlignTop);
         }
-
+        ++row_index;
-        layout->addWidget(row);
     }
 }
 

src/interface/components/Panel.cpp

@@ -46,7 +46,7 @@ public:
         layout->setSpacing(6);
 
         auto* text = new QLabel(title.toUpper(), this);
-        text->setObjectName("dockTitleText");
+        text->setObjectName("panelTitleText");
 
         layout->addWidget(text);
         layout->addStretch(1);
@@ -56,7 +56,7 @@ public:
             settings->setAutoRaise(true);
             settings->setCursor(Qt::ArrowCursor);
             settings->setFixedSize(18, 18);
-            settings->setObjectName("dockTitleButton");
+            settings->setObjectName("panelTitleButton");
             settings->setToolTip(QString("%1 settings").arg(title));
             connect(settings, &QToolButton::clicked, this, [this, title]() {
                 auto* anchor = parentWidget();
@@ -85,7 +85,7 @@ Panel::Panel(const QString& title, QWidget* content, QWidget* parent, bool has_s
     auto* frame = new QFrame(outer);
     frame->setObjectName("panel");
     auto* frame_layout = new QVBoxLayout(frame);
-    frame_layout->setContentsMargins(0, style::metrics::padding, 0, style::metrics::padding);
+    frame_layout->setContentsMargins(0, style::metrics::section_body_padding, 0, style::metrics::section_body_padding);
     frame_layout->setSpacing(0);
 
     if (scrollable) {

src/interface/components/Section.cpp

@@ -50,14 +50,14 @@ Section::Section(const QString& title, SectionHeaderMode header_mode,
     setObjectName("panelSection");
     auto* layout = new QVBoxLayout(this);
     layout->setContentsMargins(0, 0, 0, 0);
-    layout->setSpacing(style::metrics::section_spacing);
+    layout->setSpacing(style::metrics::padding);
 
     if (header_mode == SectionHeaderMode::Visible) {
         auto* header = new QFrame(this);
         header->setObjectName("panelSectionHeader");
         auto* header_layout = new QHBoxLayout(header);
         header_layout->setContentsMargins(0, 0, 0, 0);
-        header_layout->setSpacing(style::metrics::section_spacing);
+        header_layout->setSpacing(style::metrics::padding);
 
         auto* toggle = new QToolButton(header);
         toggle->setObjectName("panelSectionHeaderButton");
@@ -90,8 +90,10 @@ Section::Section(const QString& title, SectionHeaderMode header_mode,
             auto* filter_wrapper = new QWidget(this);
             filter_wrapper->setObjectName("panelSectionFilterWrapper");
             auto* filter_wrapper_layout = new QVBoxLayout(filter_wrapper);
-            filter_wrapper_layout->setContentsMargins(style::metrics::filter_body_padding_x, 0,
+            filter_wrapper_layout->setContentsMargins(style::metrics::section_body_padding,
-                                                      style::metrics::filter_body_padding_x, 0);
+                                                      0,
+                                                      style::metrics::section_body_padding,
+                                                      0);
             filter_wrapper_layout->setSpacing(0);
             filter_wrapper_layout->addWidget(filter_field_);
             layout->addWidget(filter_wrapper);
@@ -110,8 +112,10 @@ Section::Section(const QString& title, SectionHeaderMode header_mode,
         auto* filter_wrapper = new QWidget(this);
         filter_wrapper->setObjectName("panelSectionFilterWrapper");
         auto* filter_wrapper_layout = new QVBoxLayout(filter_wrapper);
-        filter_wrapper_layout->setContentsMargins(style::metrics::hidden_filter_body_padding_x, 0,
+        filter_wrapper_layout->setContentsMargins(style::metrics::section_body_padding,
-                                                  style::metrics::hidden_filter_body_padding_x, 0);
+                                                  0,
+                                                  style::metrics::section_body_padding,
+                                                  0);
         filter_wrapper_layout->setSpacing(0);
         filter_wrapper_layout->addWidget(filter_field_);
         layout->addWidget(filter_wrapper);
@@ -120,15 +124,11 @@ Section::Section(const QString& title, SectionHeaderMode header_mode,
     body_ = new QWidget(this);
     body_->setObjectName("panelSectionBody");
     body_layout_ = new QVBoxLayout(body_);
-    if (header_mode == SectionHeaderMode::Visible) {
+    body_layout_->setContentsMargins(style::metrics::section_body_padding,
-        body_layout_->setContentsMargins(style::metrics::section_body_padding_x,
+                                     0,
-                                         style::metrics::section_body_padding_top,
+                                     style::metrics::section_body_padding,
-                                         style::metrics::section_body_padding_x, 0);
+                                     0);
-    } else {
+    body_layout_->setSpacing(style::metrics::padding);
-        body_layout_->setContentsMargins(style::metrics::hidden_section_body_padding_x, 0,
-                                         style::metrics::hidden_section_body_padding_x, 0);
-    }
-    body_layout_->setSpacing(style::metrics::section_spacing);
     layout->addWidget(body_);
 }
 

src/interface/components/Style.cpp

@@ -24,12 +24,9 @@ namespace ifcinterface::components::style {
 
 QString buildAppStyleSheet() {
     return QString(R"(
-        QMainWindow {
+        QMainWindow#appWindow {
-            background: #26292f;
-        }
-        QWidget {
-            color: #d0d5dd;
             background: #26292f;
+            color: %6;
             selection-background-color: #39b54a;
             selection-color: #14161a;
         }
@@ -63,7 +60,6 @@ QString buildAppStyleSheet() {
             border-right: 1px solid #434852;
         }
         QLabel#ribbonGroupLabel {
-            color: #7f8796;
             font-size: 9px;
             font-weight: 600;
             letter-spacing: 0.08em;
@@ -92,18 +88,39 @@ QString buildAppStyleSheet() {
         QDockWidget {
             color: #d0d5dd;
         }
-        QLabel#dockTitleText {
+        QLabel {
+            color: %6;
+            background: transparent;
+        }
+        QAbstractItemView,
+        QTreeWidget,
+        QListWidget,
+        QTableWidget,
+        QLineEdit,
+        QToolButton {
+            color: %6;
+        }
+        QLabel[textRole="secondary"] {
+            color: %7;
+        }
+        QLabel[textRole="disabled"] {
+            color: %8;
+        }
+        QLabel[textRole="warning"] {
+            color: %9;
+        }
+        QLabel#panelTitleText {
             color: #dfe4ec;
             font-size: 10px;
             font-weight: 700;
             letter-spacing: 0.08em;
         }
-        QToolButton#dockTitleButton {
+        QToolButton#panelTitleButton {
             color: #8e97a5;
             border: none;
             background: transparent;
         }
-        QToolButton#dockTitleButton:hover {
+        QToolButton#panelTitleButton:hover {
             color: #ffffff;
             background: #353a42;
         }
@@ -144,7 +161,7 @@ QString buildAppStyleSheet() {
             background: #31353d;
             border: 1px solid #434a55;
             border-radius: %1px;
-            padding: %2px %3px;
+            padding: %2px %2px;
             color: #d9dfeb;
         }
         QLineEdit:focus {
@@ -160,10 +177,6 @@ QString buildAppStyleSheet() {
             font-weight: 700;
             background: transparent;
         }
-        QLabel#entityTypeLabel {
-            color: #9aa4b3;
-            background: transparent;
-        }
         QWidget#keyValueTable {
             background: transparent;
         }
@@ -199,7 +212,7 @@ QString buildAppStyleSheet() {
             border-top: 1px solid #1a1c20;
         }
         QStatusBar QLabel {
-            color: #97a1af;
+            color: %7;
             background: transparent;
             border: none;
             padding: 2px 8px;
@@ -218,7 +231,7 @@ QString buildAppStyleSheet() {
         }
         QGroupBox#propertySetCard::title {
             subcontrol-origin: margin;
-            left: %4px;
+            left: %2px;
             padding: 0 4px;
             color: #d5dbe5;
         }
@@ -231,10 +244,7 @@ QString buildAppStyleSheet() {
         QWidget#panelSectionFilterWrapper {
             background: transparent;
         }
-        QWidget#relationshipRow {
+        QLabel#keyValueTrailingIconLabel {
-            background: transparent;
-        }
-        QLabel#relationshipIconLabel {
             background: transparent;
         }
         QWidget#panelScrollBody {
@@ -249,7 +259,7 @@ QString buildAppStyleSheet() {
             color: #e1e7f0;
             font-weight: 700;
             text-align: left;
-            padding: %5px;
+            padding: %3px;
             margin: 0;
         }
         QToolButton#panelSectionHeaderButton:hover {
@@ -262,7 +272,7 @@ QString buildAppStyleSheet() {
         QToolButton#panelSectionFilterToggle {
             background: transparent;
             border: none;
-            padding: %5px;
+            padding: %3px;
         }
         QToolButton#panelSectionFilterToggle:hover {
             background: #353a42;
@@ -270,20 +280,18 @@ QString buildAppStyleSheet() {
         QWidget#panelSectionBody {
             background: transparent;
         }
-        QLabel#propertyKeyLabel {
-            color: #9aa4b3;
-            background: transparent;
-        }
         QLabel#keyValueValueLabel {
             color: #dce2eb;
             background: transparent;
         }
     )")
         .arg(metrics::panel_radius)
-        .arg(metrics::control_padding_y)
+        .arg(metrics::padding)
-        .arg(metrics::control_padding_x)
+        .arg(metrics::section_header_padding)
-        .arg(metrics::card_padding)
+        .arg(palette::primary_text)
-        .arg(metrics::section_header_padding);
+        .arg(palette::secondary_text)
+        .arg(palette::disabled_text)
+        .arg(palette::warning_text);
 }
 
 } // namespace ifcinterface::components::style

src/interface/components/Style.h

@@ -26,20 +26,21 @@
 namespace ifcinterface::components::style::metrics {
 
 inline constexpr int padding = 6;
-inline constexpr int section_spacing = 6;
+inline constexpr int section_body_padding = 10;
-inline constexpr int section_body_padding_x = 10;
-inline constexpr int section_body_padding_top = 6;
-inline constexpr int hidden_section_body_padding_x = 8;
 inline constexpr int section_header_padding = 2;
-inline constexpr int filter_body_padding_x = 10;
-inline constexpr int hidden_filter_body_padding_x = 8;
-inline constexpr int card_padding = 10;
-inline constexpr int control_padding_y = 6;
-inline constexpr int control_padding_x = 8;
 inline constexpr int panel_radius = 3;
 
 } // namespace ifcinterface::components::style::metrics
 
+namespace ifcinterface::components::style::palette {
+
+inline constexpr auto primary_text = "#d0d5dd";
+inline constexpr auto secondary_text = "#9aa4b3";
+inline constexpr auto disabled_text = "#8f98a6";
+inline constexpr auto warning_text = "#e4b35a";
+
+} // namespace ifcinterface::components::style::palette
+
 namespace ifcinterface::components::style {
 
 QString buildAppStyleSheet();

src/interface/panels/properties/PropertiesPanelWidget.cpp

@@ -62,7 +62,7 @@ QWidget* makeRelationshipList(const QList<ifcinterface::panels::properties::Rela
                            row_data.value,
                            "keyValueValueLabel",
                            ":/icons/cursor-pointer.svg",
-                           "relationshipIconLabel",
+                           "keyValueTrailingIconLabel",
                            72});
     }
     return new ifcinterface::components::KeyValueTable(table_rows, parent);
@@ -101,7 +101,7 @@ void PropertiesPanelWidget::render(const PropertiesPanelState& state) {
     auto* entity_class = new QLabel(state.entity.entity_class, entity_text);
     entity_class->setObjectName("entityClassLabel");
     auto* entity_type = new QLabel(state.entity.predefined_type, entity_text);
-    entity_type->setObjectName("entityTypeLabel");
+    entity_type->setProperty("textRole", "secondary");
     entity_text_layout->addWidget(entity_class);
     entity_text_layout->addWidget(entity_type);
     entity_layout->addWidget(entity_icon, 0, Qt::AlignVCenter);

src/interface/panels/todo/TodoPanelWidget.cpp

@@ -44,6 +44,7 @@ TodoPanelWidget::TodoPanelWidget(const QString& title, QWidget* parent)
     auto* heading = new QLabel(title, body);
 
     auto* content = new QLabel("Coming soon", body);
+    content->setProperty("textRole", "disabled");
     content->setAlignment(Qt::AlignCenter);
 
     body_layout->addWidget(heading);