Added demos.
This commit is contained in:
219
doc/gem_fluend_dark/main.cpp
Normal file
219
doc/gem_fluend_dark/main.cpp
Normal file
@@ -0,0 +1,219 @@
|
||||
#include <QApplication>
|
||||
#include <QWidget>
|
||||
#include <QVBoxLayout>
|
||||
#include <QHBoxLayout>
|
||||
#include <QLabel>
|
||||
#include <QPushButton>
|
||||
#include <QLineEdit>
|
||||
#include <QProgressBar>
|
||||
#include <QPalette>
|
||||
#include <QFontDatabase>
|
||||
|
||||
// Hilfsfunktion: Setzt die Fluent Dark Palette global
|
||||
void applyFluentDarkTheme(QApplication &app) {
|
||||
// 1. Schriftart setzen (Segoe UI ist Standard für Fluent, Fallback auf Sans)
|
||||
QFont font = app.font();
|
||||
font.setFamily("Segoe UI Variable Display"); // Windows 11 Font
|
||||
if (!QFontDatabase().families().contains("Segoe UI Variable Display")) {
|
||||
font.setFamily("Segoe UI"); // Windows 10
|
||||
}
|
||||
font.setPointSize(10);
|
||||
app.setFont(font);
|
||||
|
||||
// 2. Die Palette definieren
|
||||
QPalette p;
|
||||
// Window / Background: #202020 (Mica Alt Base)
|
||||
QColor colBackground("#202020");
|
||||
// Surface / Container: #2D2D2D (Control Fill Secondary)
|
||||
QColor colSurface("#2D2D2D");
|
||||
// Accent: #60CDFF (System Accent Light 2)
|
||||
QColor colAccent("#60CDFF");
|
||||
// Text: White
|
||||
QColor colText(Qt::white);
|
||||
QColor colSubText("#D0D0D0");
|
||||
|
||||
p.setColor(QPalette::Window, colBackground);
|
||||
p.setColor(QPalette::WindowText, colText);
|
||||
p.setColor(QPalette::Base, colSurface);
|
||||
p.setColor(QPalette::AlternateBase, colBackground);
|
||||
p.setColor(QPalette::ToolTipBase, colSurface);
|
||||
p.setColor(QPalette::ToolTipText, colText);
|
||||
p.setColor(QPalette::Text, colText);
|
||||
p.setColor(QPalette::Button, colSurface);
|
||||
p.setColor(QPalette::ButtonText, colText);
|
||||
p.setColor(QPalette::PlaceholderText, colSubText);
|
||||
p.setColor(QPalette::Highlight, colAccent);
|
||||
p.setColor(QPalette::HighlightedText, Qt::black); // Kontrast auf Accent
|
||||
|
||||
app.setPalette(p);
|
||||
|
||||
// 3. Stylesheets für die Details (Runde Ecken, Hover)
|
||||
// Fluent Design nutzt Radius 4px für Controls und 8px für Layer
|
||||
app.setStyleSheet(R"(
|
||||
QWidget {
|
||||
background-color: #202020;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* CARD / CONTAINER STYLE */
|
||||
QFrame#Card {
|
||||
background-color: #2D2D2D;
|
||||
border: 1px solid #3A3A3A;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
QPushButton {
|
||||
background-color: #2D2D2D;
|
||||
border: 1px solid #3A3A3A;
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
border-bottom: 1px solid #505050; /* Leichter 3D Effekt */
|
||||
}
|
||||
QPushButton:hover {
|
||||
background-color: #3A3A3A; /* Hover Layer */
|
||||
}
|
||||
QPushButton:pressed {
|
||||
background-color: #1F1F1F;
|
||||
color: #D0D0D0;
|
||||
}
|
||||
/* Accent Button (Primary) */
|
||||
QPushButton#PrimaryButton {
|
||||
background-color: #60CDFF;
|
||||
color: #000000;
|
||||
border: 1px solid #60CDFF;
|
||||
}
|
||||
QPushButton#PrimaryButton:hover {
|
||||
background-color: #70D5FF;
|
||||
}
|
||||
QPushButton#PrimaryButton:pressed {
|
||||
background-color: #50B0DD;
|
||||
}
|
||||
|
||||
/* INPUT FIELDS */
|
||||
QLineEdit {
|
||||
background-color: #2D2D2D;
|
||||
border: 1px solid #3A3A3A;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
border-bottom: 2px solid #505050; /* Focus indicator line hint */
|
||||
selection-background-color: #60CDFF;
|
||||
selection-color: #000000;
|
||||
}
|
||||
QLineEdit:focus {
|
||||
background-color: #1F1F1F;
|
||||
border-bottom: 2px solid #60CDFF; /* Active highlight */
|
||||
}
|
||||
|
||||
/* LABELS */
|
||||
QLabel#Title {
|
||||
font-size: 18pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
QLabel#Subtitle {
|
||||
font-size: 10pt;
|
||||
color: #A0A0A0;
|
||||
}
|
||||
|
||||
/* PROGRESS BAR */
|
||||
QProgressBar {
|
||||
border: none;
|
||||
background-color: #3A3A3A;
|
||||
border-radius: 2px;
|
||||
height: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
QProgressBar::chunk {
|
||||
background-color: #60CDFF;
|
||||
border-radius: 2px;
|
||||
}
|
||||
)");
|
||||
}
|
||||
|
||||
// Eine "Card" Komponente (wiederverwendbar)
|
||||
class FluentCard : public QFrame {
|
||||
public:
|
||||
FluentCard(const QString &title, const QString &value) {
|
||||
setObjectName("Card"); // Für Stylesheet
|
||||
QVBoxLayout *layout = new QVBoxLayout(this);
|
||||
|
||||
QLabel *lblTitle = new QLabel(title);
|
||||
lblTitle->setObjectName("Subtitle");
|
||||
|
||||
QLabel *lblValue = new QLabel(value);
|
||||
lblValue->setStyleSheet("font-size: 24pt; font-weight: 300;");
|
||||
|
||||
layout->addWidget(lblTitle);
|
||||
layout->addWidget(lblValue);
|
||||
layout->addStretch();
|
||||
}
|
||||
};
|
||||
|
||||
int main(int argc, char *argv[]) {
|
||||
QApplication app(argc, argv);
|
||||
|
||||
// Theme anwenden
|
||||
applyFluentDarkTheme(app);
|
||||
|
||||
// Hauptfenster
|
||||
QWidget window;
|
||||
window.setWindowTitle("Fluent Dark Mode Demo");
|
||||
window.resize(800, 500);
|
||||
|
||||
// Layouts
|
||||
QVBoxLayout *mainLayout = new QVBoxLayout(&window);
|
||||
mainLayout->setContentsMargins(24, 24, 24, 24);
|
||||
mainLayout->setSpacing(20);
|
||||
|
||||
// Header
|
||||
QLabel *header = new QLabel("Dashboard");
|
||||
header->setObjectName("Title");
|
||||
mainLayout->addWidget(header);
|
||||
|
||||
// Content Area (Grid aus Cards)
|
||||
QHBoxLayout *cardsLayout = new QHBoxLayout();
|
||||
cardsLayout->setSpacing(12);
|
||||
|
||||
cardsLayout->addWidget(new FluentCard("CPU Temp", "42.5 °C"));
|
||||
cardsLayout->addWidget(new FluentCard("Memory", "1.2 GB"));
|
||||
cardsLayout->addWidget(new FluentCard("Network", "12 Mb/s"));
|
||||
|
||||
mainLayout->addLayout(cardsLayout);
|
||||
|
||||
// Controls Area (Card für Settings)
|
||||
QFrame *controlsCard = new QFrame();
|
||||
controlsCard->setObjectName("Card");
|
||||
QVBoxLayout *controlsLayout = new QVBoxLayout(controlsCard);
|
||||
|
||||
QLabel *lblSettings = new QLabel("System Settings");
|
||||
lblSettings->setStyleSheet("font-size: 14pt; font-weight: bold; margin-bottom: 10px;");
|
||||
controlsLayout->addWidget(lblSettings);
|
||||
|
||||
// Input Row
|
||||
QHBoxLayout *inputRow = new QHBoxLayout();
|
||||
QLineEdit *edit = new QLineEdit();
|
||||
edit->setPlaceholderText("Enter Device Name...");
|
||||
QPushButton *btnApply = new QPushButton("Apply");
|
||||
btnApply->setObjectName("PrimaryButton"); // Accent Color!
|
||||
|
||||
inputRow->addWidget(edit);
|
||||
inputRow->addWidget(btnApply);
|
||||
controlsLayout->addLayout(inputRow);
|
||||
|
||||
// Progress Bar
|
||||
controlsLayout->addSpacing(10);
|
||||
QLabel *lblProgress = new QLabel("Processing...");
|
||||
lblProgress->setObjectName("Subtitle");
|
||||
controlsLayout->addWidget(lblProgress);
|
||||
|
||||
QProgressBar *progress = new QProgressBar();
|
||||
progress->setValue(75);
|
||||
progress->setTextVisible(false); // Fluent Bars haben meist keinen Text
|
||||
controlsLayout->addWidget(progress);
|
||||
|
||||
mainLayout->addWidget(controlsCard);
|
||||
mainLayout->addStretch(); // Schiebt alles nach oben
|
||||
|
||||
window.show();
|
||||
return app.exec();
|
||||
}
|
||||
Reference in New Issue
Block a user