308 lines
9.1 KiB
C++
308 lines
9.1 KiB
C++
#include <QApplication>
|
|
#include <QWidget>
|
|
#include <QPushButton>
|
|
#include <QLineEdit>
|
|
#include <QSlider>
|
|
#include <QCheckBox>
|
|
#include <QVBoxLayout>
|
|
#include <QHBoxLayout>
|
|
#include <QLabel>
|
|
#include <QProxyStyle>
|
|
#include <QPainter>
|
|
#include <QStyleOptionSlider>
|
|
#include <QGraphicsDropShadowEffect>
|
|
|
|
#include "mainwindow.h"
|
|
#include "sliderdelegate.h"
|
|
|
|
|
|
// Fluent Design Demo Widget
|
|
class FluentWidgetDemo : public QWidget {
|
|
public:
|
|
FluentWidgetDemo() {
|
|
setWindowTitle("Fluent Design System - Windows 11");
|
|
resize(600, 500);
|
|
|
|
// Acrylic-like background
|
|
setStyleSheet(R"(
|
|
QWidget {
|
|
background-color: #F3F3F3;
|
|
font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
|
|
}
|
|
)");
|
|
|
|
auto* mainLayout = new QVBoxLayout(this);
|
|
mainLayout->setSpacing(20);
|
|
mainLayout->setContentsMargins(32, 32, 32, 32);
|
|
|
|
// Title
|
|
auto* title = new QLabel("Fluent Design System");
|
|
title->setStyleSheet(R"(
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
color: #201F1E;
|
|
margin-bottom: 8px;
|
|
)");
|
|
mainLayout->addWidget(title);
|
|
|
|
auto* subtitle = new QLabel("Windows 11 Style Components");
|
|
subtitle->setStyleSheet("font-size: 14px; color: #605E5C;");
|
|
mainLayout->addWidget(subtitle);
|
|
|
|
// Text Input
|
|
auto* inputLabel = new QLabel("Text Input");
|
|
inputLabel->setStyleSheet("font-size: 12px; color: #323130; font-weight: 600;");
|
|
mainLayout->addWidget(inputLabel);
|
|
|
|
auto* input = new QLineEdit();
|
|
input->setPlaceholderText("Enter text here...");
|
|
applyFluentInput(input);
|
|
mainLayout->addWidget(input);
|
|
|
|
// Slider Section
|
|
auto* sliderLabel = new QLabel("Sliders");
|
|
sliderLabel->setStyleSheet("font-size: 12px; color: #323130; font-weight: 600; margin-top: 8px;");
|
|
mainLayout->addWidget(sliderLabel);
|
|
|
|
auto* valueLabel = new QLabel("Volume: 50");
|
|
valueLabel->setStyleSheet("font-size: 14px; color: #605E5C;");
|
|
mainLayout->addWidget(valueLabel);
|
|
|
|
auto* hSlider = new QSlider(Qt::Horizontal);
|
|
hSlider->setRange(0, 100);
|
|
hSlider->setValue(50);
|
|
hSlider->setStyle(new FluentSliderStyle());
|
|
hSlider->setMinimumHeight(32); // Genug Platz für Handle
|
|
mainLayout->addWidget(hSlider);
|
|
|
|
connect(hSlider, &QSlider::valueChanged, [valueLabel](int value) {
|
|
valueLabel->setText(QString("Volume: %1").arg(value));
|
|
});
|
|
|
|
// Checkbox
|
|
auto* checkLabel = new QLabel("Checkbox");
|
|
checkLabel->setStyleSheet("font-size: 12px; color: #323130; font-weight: 600; margin-top: 8px;");
|
|
mainLayout->addWidget(checkLabel);
|
|
|
|
auto* checkbox = new QCheckBox("Enable feature");
|
|
applyFluentCheckbox(checkbox);
|
|
mainLayout->addWidget(checkbox);
|
|
|
|
// Buttons Section
|
|
auto* btnLabel = new QLabel("Buttons");
|
|
btnLabel->setStyleSheet("font-size: 12px; color: #323130; font-weight: 600; margin-top: 8px;");
|
|
mainLayout->addWidget(btnLabel);
|
|
|
|
auto* btnLayout = new QHBoxLayout();
|
|
btnLayout->setSpacing(12);
|
|
|
|
auto* primaryBtn = new QPushButton("Primary");
|
|
applyFluentButton(primaryBtn, ButtonType::Primary);
|
|
btnLayout->addWidget(primaryBtn);
|
|
|
|
auto* secondaryBtn = new QPushButton("Secondary");
|
|
applyFluentButton(secondaryBtn, ButtonType::Secondary);
|
|
btnLayout->addWidget(secondaryBtn);
|
|
|
|
auto* subtleBtn = new QPushButton("Subtle");
|
|
applyFluentButton(subtleBtn, ButtonType::Subtle);
|
|
btnLayout->addWidget(subtleBtn);
|
|
|
|
btnLayout->addStretch();
|
|
mainLayout->addLayout(btnLayout);
|
|
|
|
// Vertical Sliders
|
|
auto* vLabel = new QLabel("Equalizer");
|
|
vLabel->setStyleSheet("font-size: 12px; color: #323130; font-weight: 600; margin-top: 8px;");
|
|
mainLayout->addWidget(vLabel);
|
|
|
|
auto* vLayout = new QHBoxLayout();
|
|
vLayout->setSpacing(24);
|
|
|
|
for (int i = 0; i < 5; ++i) {
|
|
auto* vSlider = new QSlider(Qt::Vertical);
|
|
vSlider->setRange(0, 100);
|
|
vSlider->setValue(20 + i * 15);
|
|
vSlider->setStyle(new FluentSliderStyle());
|
|
vSlider->setMinimumHeight(120);
|
|
vSlider->setMinimumWidth(32); // Genug Platz für Handle
|
|
vLayout->addWidget(vSlider);
|
|
}
|
|
vLayout->addStretch();
|
|
|
|
mainLayout->addLayout(vLayout);
|
|
mainLayout->addStretch();
|
|
}
|
|
|
|
private:
|
|
enum class ButtonType {
|
|
Primary,
|
|
Secondary,
|
|
Subtle
|
|
};
|
|
|
|
void applyFluentButton(QPushButton* btn, ButtonType type) {
|
|
QString baseStyle = R"(
|
|
QPushButton {
|
|
background-color: %1;
|
|
color: %2;
|
|
border: %3;
|
|
border-radius: 4px;
|
|
padding: 5px 12px;
|
|
font-size: 14px;
|
|
min-height: 32px;
|
|
}
|
|
QPushButton:hover {
|
|
background-color: %4;
|
|
border: %5;
|
|
}
|
|
QPushButton:pressed {
|
|
background-color: %6;
|
|
border: %7;
|
|
}
|
|
QPushButton:disabled {
|
|
background-color: #F3F2F1;
|
|
color: #A19F9D;
|
|
border: 1px solid #EDEBE9;
|
|
}
|
|
)";
|
|
|
|
switch (type) {
|
|
case ButtonType::Primary:
|
|
btn->setStyleSheet(baseStyle
|
|
.arg("#0078D4") // bg
|
|
.arg("white") // text
|
|
.arg("none") // border
|
|
.arg("#106EBE") // hover bg
|
|
.arg("none") // hover border
|
|
.arg("#005A9E") // pressed bg
|
|
.arg("none") // pressed border
|
|
);
|
|
break;
|
|
|
|
case ButtonType::Secondary:
|
|
btn->setStyleSheet(baseStyle
|
|
.arg("white") // bg
|
|
.arg("#201F1E") // text
|
|
.arg("1px solid #8A8886") // border
|
|
.arg("#F3F2F1") // hover bg
|
|
.arg("1px solid #323130") // hover border
|
|
.arg("#EDEBE9") // pressed bg
|
|
.arg("1px solid #201F1E") // pressed border
|
|
);
|
|
break;
|
|
|
|
case ButtonType::Subtle:
|
|
btn->setStyleSheet(baseStyle
|
|
.arg("transparent") // bg
|
|
.arg("#201F1E") // text
|
|
.arg("none") // border
|
|
.arg("#F3F2F1") // hover bg
|
|
.arg("none") // hover border
|
|
.arg("#EDEBE9") // pressed bg
|
|
.arg("none") // pressed border
|
|
);
|
|
break;
|
|
}
|
|
|
|
// Subtle shadow for elevation
|
|
if (type == ButtonType::Primary) {
|
|
auto* shadow = new QGraphicsDropShadowEffect();
|
|
shadow->setBlurRadius(4);
|
|
shadow->setColor(QColor(0, 0, 0, 40));
|
|
shadow->setOffset(0, 1);
|
|
btn->setGraphicsEffect(shadow);
|
|
}
|
|
}
|
|
|
|
void applyFluentInput(QLineEdit* input) {
|
|
input->setStyleSheet(R"(
|
|
QLineEdit {
|
|
border: 1px solid #8A8886;
|
|
border-radius: 4px;
|
|
padding: 6px 10px;
|
|
background-color: white;
|
|
font-size: 14px;
|
|
color: #201F1E;
|
|
min-height: 32px;
|
|
}
|
|
QLineEdit:hover {
|
|
border: 1px solid #323130;
|
|
}
|
|
QLineEdit:focus {
|
|
border: 2px solid #0078D4;
|
|
padding: 5px 9px;
|
|
}
|
|
QLineEdit:disabled {
|
|
background-color: #F3F2F1;
|
|
border: 1px solid #EDEBE9;
|
|
color: #A19F9D;
|
|
}
|
|
)");
|
|
}
|
|
|
|
void applyFluentCheckbox(QCheckBox* checkbox) {
|
|
checkbox->setStyleSheet(R"(
|
|
QCheckBox {
|
|
spacing: 8px;
|
|
font-size: 14px;
|
|
color: #201F1E;
|
|
}
|
|
QCheckBox::indicator {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 1px solid #8A8886;
|
|
border-radius: 4px;
|
|
background-color: white;
|
|
}
|
|
QCheckBox::indicator:hover {
|
|
border: 1px solid #323130;
|
|
background-color: #F3F2F1;
|
|
}
|
|
QCheckBox::indicator:checked {
|
|
background-color: #0078D4;
|
|
border: 1px solid #0078D4;
|
|
}
|
|
QCheckBox::indicator:checked:hover {
|
|
background-color: #106EBE;
|
|
border: 1px solid #106EBE;
|
|
}
|
|
QCheckBox::indicator:disabled {
|
|
background-color: #F3F2F1;
|
|
border: 1px solid #C8C6C4;
|
|
}
|
|
)");
|
|
}
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//#include "main.moc" // Wichtig für Q_OBJECT in .cpp Datei
|
|
|
|
int main(int argc, char *argv[])
|
|
{
|
|
QApplication app(argc, argv);
|
|
|
|
// Segoe UI is default on Windows
|
|
#ifdef Q_OS_WIN
|
|
QFont font("Segoe UI Variable", 10);
|
|
#else
|
|
QFont font("Segoe UI", 10);
|
|
#endif
|
|
app.setFont(font);
|
|
|
|
TableViewDemo demo;
|
|
demo.show();
|
|
|
|
|
|
FluentWidgetDemo fdemo;
|
|
fdemo.show();
|
|
return app.exec();
|
|
}
|
|
|
|
|