styles.h

Go to the documentation of this file.

 
#pragma once
#include <QtCore/QOperatingSystemVersion>
#include <QtCore/QString>
#include <QtGlobal>
#include <QtGui/QGuiApplication>
#include <QHBoxLayout>
#include <QSlider>
#include <QLabel>
#include <QWidget>

static inline QString statusLabelStyle(const QString &bg = "#6699ff",
                                       const QString &fg = "#000000") {
#if defined(Q_OS_MACOS)
    return QStringLiteral("QLabel{background-color: %1; color: %2; "
                          "border-radius: 6px; padding: 2px 8px; "
                          "border: 1px solid rgba(0,0,0,0.15)}")
        .arg(bg, fg);
#elif defined(Q_OS_WIN)
    return QStringLiteral("QLabel{background-color:%1; color:%2; "
                          "border-radius:4px; padding:0px 8px; "
                          "border:1px solid rgba(0,0,0,0.25)}")
        .arg(bg, fg);
#else // Linux/other
    return QStringLiteral("QLabel{background-color:%1; color:%2; "
                          "border-radius:1px; padding:1px 6px; "
                          "border:1px inset rgba(0,0,0,0.18)}")
        .arg(bg, fg);
#endif
}
 
enum class TxStatusAppearance {
    Receiving,    // green on black text
    Transmitting, // red
    Decoding,     // same as Receiving
    IdleTimeout   // black bg, white fg
};
 
QString txStatusLabelStyle(TxStatusAppearance appearance);
 
static inline QString makeStyle(const QString &bg, const QString &fg) {
#if defined(Q_OS_LINUX)
    return QString("QLabel{background-color:%1; color:%2; "
                   "border-radius:1px; padding:1px 6px; "
                   "border:1px inset rgba(0,0,0,0.18);}")
        .arg(bg, fg);
#elif defined(Q_OS_WIN)
    return QString("QLabel{background-color:%1; color:%2; "
                   "border-radius:4px; padding:0px 8px; "
                   "border:1px solid rgba(0,0,0,0.25);}")
        .arg(bg, fg);
#elif defined(Q_OS_MACOS)
    return QString("QLabel{background-color:%1; color:%2; "
                   "border-radius:6px; padding:2px 8px; "
                   "border:1px solid rgba(0,0,0,0.15);}")
        .arg(bg, fg);
#else
    return QString("QLabel{background-color:%1; color:%2;}").arg(bg, fg);
#endif
}
 
inline QString txStatusLabelStyle(TxStatusAppearance appearance) {
    switch (appearance) {
    case TxStatusAppearance::Receiving:
        return makeStyle("#22ff22", "#000000");
    case TxStatusAppearance::Transmitting:
        return makeStyle("#ff2222", "#000000");
    case TxStatusAppearance::Decoding:
        return makeStyle("#22ff22", "#000000");
    case TxStatusAppearance::IdleTimeout:
        return makeStyle("#000000", "#ffffff");
    default:
        return QString(); // no style for compiler fallback
    }
}

static inline QString progress_bar_stylesheet(bool small = false) {
    const QString base = QString("QProgressBar {"
                                 "  border: 0px;"
                                 "  background-color: #ffffff;"
                                 "  color: #000000;"
                                 "  text-align: center;"
                                 "  padding: 0px;"
                                 "  %1"
                                 "}"
                                 "QProgressBar::chunk {"
                                 "  background-color: #a5cdff;"
                                 "  border-radius: %2px;"
                                 "  %3"
                                 "}");
 
    const int height = small ? 10 : 14; // overall control height
    const int radius = small ? 3 : 5;   // roundness of the bar ends
    const QString barDim =
        QString("min-height:%1px; max-height:%1px; border-radius:%2px;")
            .arg(height)
            .arg(radius);
    const QString chunkDim = QString("min-height:%1px;").arg(height);
    return base.arg(barDim, QString::number(radius), chunkDim);
}

inline QString buttonStyle() {
#if defined(Q_OS_WIN)
    return R"(
        QPushButton {
            background-color: #6699ff;
            color: black;
            border: none;
            border-radius: 4px;
            padding: 3px 9px;
            min-height: 15px;
            max-height: 15px;
            font-family: "Segoe UI";
        }
        QPushButton:hover {
            background-color: #4d7fff;
            color: white;
        }
        QPushButton:pressed {
            background-color: #003EAA;
        }
        QPushButton:disabled {
            background-color: #ececec;
            color: #888888;
        }
    )";
 
#elif defined(Q_OS_MACOS)
    return R"(
        QPushButton {
            background-color: #6699ff;
            color: black;
            border: none;
            border-radius: 6px;
            padding: 3px 9px;
            min-height: 15px;
            max-height: 15px;
            font-family: "-apple-system";
        }
        QPushButton:hover {
            background-color: #4d7fff;
            color: white;
        }
        QPushButton:pressed {
            background-color: #003EAA;
        }
        QPushButton:disabled {
            background-color: #ececec;
            color: #888888;
        }
    )";
 
#elif defined(Q_OS_LINUX)
    return R"(
       QPushButton {
           background-color: #6699ff;
           color: black;
           border: none;
           border-radius: 5px;
           padding: px 9px;
           font-family: "Ubuntu", "Noto Sans";
       }
       QPushButton:hover {
           background-color: #4d7fff;
       }
       QPushButton:pressed {
           background-color: #003EAA;
       }
       QPushButton:disabled {
           background-color: #ececec;
           color: #888888;
       }
   )";
 
#else
    return QString();
#endif
}
 
// defines the background, color, font and size of the header bar frequency
// display, the #else section contains the definitions for linux
static inline QString logFrameStyle() {
#if defined(Q_OS_MACOS)
    return QStringLiteral("QFrame#frame { background-color: #F2F2F0; }"
                          "QLabel#currentFreq {"
                          " color: #39FF14;"
                          " background-color: black;"
                          " border-radius:6px; padding:0px 8px; "
                          " font-family: Monaco, 'Courier New', monospace;"
                          " font-size: 20pt;"
                          " font-weight: bold;"
                          " min-width: 200px;"
                          " min-height: 40px;"
                          "}");
#elif defined(Q_OS_WIN)
    return QStringLiteral("QFrame#frame { background-color: #DDEEFF; }"
                          "QLabel#currentFreq {"
                          " color: #39FF14;"
                          " background-color: black;"
                          " border-radius:4px; padding:0px 8px; "
                          " font-family: Consolas, 'Courier New', monospace;"
                          " font-size: 20pt;"
                          " font-weight: bold;"
                          " min-width: 200px;"
                          " min-height: 40px;"
                          "}");
#else
    return QStringLiteral("QFrame#frame { background-color: #F2F2F0; }"
                          "QLabel#currentFreq {"
                          " color: #39FF14;"
                          " background-color: black;"
                          " border-radius:0px; padding:0px 8px; "
                          " font-size: 28pt;"
                          " font-weight: bold;"
                          " min-width: 200px;"
                          " min-height: 40px;"
                          "}");
#endif
}

#if defined(Q_OS_MACOS)
namespace Styles {
 
constexpr const char *LogWidgetStyle =
    "QFrame#logWidget { background-color: #F2F2F0; }";
 
constexpr const char *DialFreqUpDownButtonStyle =
    "QPushButton {"
    "    background-color: #000000;"
    "    color: #39FF14;"
    "    font-size: 10pt;"
    "    border:0px solid;"
    "    border-radius:2px;"
    "}"
    "QPushButton:pressed {"
    "    background-color: #222;"
    "}";
 
class OffsetSliderWidget : public QWidget {
  public:
    explicit OffsetSliderWidget(QWidget *parent = nullptr) : QWidget(parent) {
        auto *layout = new QHBoxLayout(this);
        auto *caption = new QLabel("Offset:", this);
        caption->setStyleSheet("QLabel { color: black; }");
        slider = new QSlider(Qt::Horizontal, this);
        // Lock the QSlider's appearance regardless of the system theme
        slider->setStyleSheet(R"(
            QSlider {
                background: transparent;
                min-height: 24px;
            }
            QSlider::groove:horizontal {
                border: 1px solid #b0b0b0;
                height: 6px;
                background: #a5cdff;
                border-radius: 3px;
            }
            QSlider::handle:horizontal {
                background: #6699ff;
                border: 1px solid #c2c8d1;
                width: 16px;
                margin: -3px 0;
                border-radius: 6px;
            }
            QSlider::sub-page:horizontal {
                background: #a5cdff;
                border-radius: 3px;
            }
            QSlider::add-page:horizontal {
                background: #e0e0e0;
                border-radius: 3px;
            }
        )");
        slider->setRange(0, 3000);
        slider->setValue(1500);
        valueLabel = new QLabel("0 Hz", this);
        valueLabel->setStyleSheet("QLabel { color: black; }");
        valueLabel->setMinimumWidth(60);
        layout->addWidget(caption);
        layout->addWidget(slider, 1);
        layout->addWidget(valueLabel);
        connect(slider, &QSlider::valueChanged, this, [this](int val) {
            valueLabel->setText(QString("%1 Hz").arg(val));
            if (onValueChanged) onValueChanged(val);
        });
    }
 
    int offset() const { return slider->value(); }
    void setValue(int hz) { slider->setValue(hz); }
    void setOnValueChanged(std::function<void(int)> cb) { onValueChanged = cb; }
 
  private:
    QSlider *slider;
    QLabel *valueLabel;
    std::function<void(int)> onValueChanged;
};
 
constexpr const char *LabCallsignStyle = "QLabel {"
                                         "    font-size: 12pt;"
                                         "    line-height:12pt;"
                                         "    color : black;"
                                         "}";
 
constexpr const char *LabUTCStyle =
    "QLabel {"
    "    border-radius:6px;"
    "    font-size: 14pt;"
    "    line-height:14pt;"
    "    font-family: Monaco, 'Courier New', monospace;"
    "    font-weight: bold;"
    "    background-color: black;"
    "    color : #39FF14;"
    "}";
 
constexpr const char *ButtonGridStyle =
    "QPushButton {"
    "    background-color:lightgray;"
    "    padding:0.25em 0.25em; font-weight:normal;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:6px;"
    "}"
    "QPushButton:checked {"
    "    background-color:#6699ff;"
    "}";
 
constexpr const char *MonitorTxButtonStyle =
    "QPushButton {"
    "    background-color:lightgray;"
    "    color:black;"
    "    padding:0.25em 0.25em; font-weight:normal;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:6px;"
    "}"
    "QPushButton:checked {"
    "    background-color:#22FF22;"
    "    color:black;"
    "}"
    "QPushButton[transmitting=\"true\"] {"
    "    background-color:#FF2222;"
    "    color:black;"
    "}";
 
constexpr const char *MonitorButtonStyle =
    "QPushButton {"
    "    background-color:lightgray;"
    "    color:black;"
    "    padding:0.25em 0.25em; font-weight:normal;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:6px;"
    "}"
    "QPushButton:checked {"
    "    background-color:#22FF22;"
    "    color:black;"
    "}";
 
constexpr const char *LogQSOButtonStyle =
    "QPushButton {"
    "    background-color:#6699ff;"
    "    color:black;"
    "    padding:0.25em 0.25em; font-weight:normal;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:6px;"
    "}"
    "QPushButton:checked {"
    "    background-color:#6699ff;"
    "    color:black;"
    "}";
 
constexpr const char *TuneButtonStyle =
    "QPushButton {"
    "    background-color:lightgray;"
    "    color:black;"
    "    padding:0.25em 0.25em; font-weight:normal;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:6px;"
    "}"
    "QPushButton:checked {"
    "    background-color:#6699ff;"
    "    color:black;"
    "}";
 
constexpr const char *ModeButtonStyle =
    "QPushButton {"
    "    padding:0.25em 0.25em; font-weight:bold;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:6px;"
    "    background-color:#6699ff;"
    "    color:black;"
    "}"
    "QPushButton:checked {"
    "    background-color:#6699ff;"
    "    color:black;"
    "}";
 
constexpr const char *SpotButtonStyle =
    "QPushButton {"
    "    background-color:lightgray;"
    "    color:black;"
    "    padding:0.25em 0.25em; font-weight:normal;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:6px;"
    "}"
    "QPushButton:checked {"
    "    background-color:#6699ff;"
    "    color:black;"
    "}";
 
}
#elif defined(Q_OS_WIN)
namespace Styles {
 
constexpr const char *LogWidgetStyle =
    "QFrame#logWidget { background-color: #DDEEFF; }";
 
constexpr const char *DialFreqUpDownButtonStyle =
    "QPushButton {"
    "    background-color: #000000;"
    "    color: #39FF14;"
    "    font-size: 12pt;"
    "    border:0px solid;"
    "    border-radius:2px;"
    "}"
    "QPushButton:pressed {"
    "    background-color: #222;"
    "}";
 
class OffsetSliderWidget : public QWidget {
  public:
    explicit OffsetSliderWidget(QWidget *parent = nullptr) : QWidget(parent) {
        auto *layout = new QHBoxLayout(this);
        auto *caption = new QLabel("Offset:", this);
        caption->setStyleSheet("QLabel { color: black; }");
        slider = new QSlider(Qt::Horizontal, this);
        // Lock the QSlider's appearance regardless of the system theme
        slider->setStyleSheet(R"(
            QSlider {
                background: transparent;
                min-height: 24px;
            }
            QSlider::groove:horizontal {
                border: 1px solid #b0b0b0;
                height: 6px;
                background: #a5cdff;
                border-radius: 3px;
            }
            QSlider::handle:horizontal {
                background: #6699ff;
                border: 1px solid #c2c8d1;
                width: 16px;
                margin: -3px 0;
                border-radius: 5px;
            }
            QSlider::sub-page:horizontal {
                background: #a5cdff;
                border-radius: 3px;
            }
            QSlider::add-page:horizontal {
                background: #e0e0e0;
                border-radius: 3px;
            }
        )");
        slider->setRange(0, 3000);
        slider->setValue(1500);
        valueLabel = new QLabel("0 Hz", this);
        valueLabel->setStyleSheet("QLabel { color: black; }");
        valueLabel->setMinimumWidth(60);
        layout->addWidget(caption);
        layout->addWidget(slider, 1);
        layout->addWidget(valueLabel);
        connect(slider, &QSlider::valueChanged, this, [this](int val) {
            valueLabel->setText(QString("%1 Hz").arg(val));
            if (onValueChanged) onValueChanged(val);
        });
    }
 
    int offset() const { return slider->value(); }
    void setValue(int hz) { slider->setValue(hz); }
    void setOnValueChanged(std::function<void(int)> cb) { onValueChanged = cb; }
 
  private:
    QSlider *slider;
    QLabel *valueLabel;
    std::function<void(int)> onValueChanged;
};
 
constexpr const char *LabCallsignStyle = "QLabel {"
                                         "    font-size: 12pt;"
                                         "    line-height:12pt;"
                                         "    color : black;"
                                         "}";
 
constexpr const char *LabUTCStyle =
    "QLabel {"
    "    border-radius:4px;"
    "    font-size: 14pt;"
    "    line-height:14pt;"
    "    font-family: Consolas, 'Courier New', monospace;"
    "    font-weight: bold;"
    "    background-color: black;"
    "    color : #39FF14;"
    "}";
 
constexpr const char *ButtonGridStyle =
    "QPushButton {"
    "    background-color:lightgray;"
    "    padding:0.25em 0.25em; font-weight:normal;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:4px;"
    "}"
    "QPushButton:checked {"
    "    background-color:#6699ff;"
    "}";
 
constexpr const char *MonitorTxButtonStyle =
    "QPushButton {"
    "    background-color:lightgray;"
    "    color:black;"
    "    padding:0.25em 0.25em; font-weight:normal;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:4px;"
    "}"
    "QPushButton:checked {"
    "    background-color:#22FF22;"
    "    color:black;"
    "}"
    "QPushButton[transmitting=\"true\"] {"
    "    background-color:#FF2222;"
    "    color:black;"
    "}";
 
constexpr const char *MonitorButtonStyle =
    "QPushButton {"
    "    background-color:lightgray;"
    "    color:black;"
    "    padding:0.25em 0.25em; font-weight:normal;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:4px;"
    "}"
    "QPushButton:checked {"
    "    background-color:#22FF22;"
    "    color:black;"
    "}";
 
constexpr const char *LogQSOButtonStyle =
    "QPushButton {"
    "    background-color:lightgray;"
    "    color:black;"
    "    padding:0.25em 0.25em; font-weight:normal;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:4px;"
    "}"
    "QPushButton:checked {"
    "    background-color:#6699ff;"
    "    color:black;"
    "}";
 
constexpr const char *TuneButtonStyle = LogQSOButtonStyle; // Same as above
 
constexpr const char *ModeButtonStyle =
    "QPushButton {"
    "    padding:0.25em 0.25em; font-weight:bold;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:4px;"
    "    background-color:#6699ff;"
    "    color:black;"
    "}"
    "QPushButton:checked {"
    "    background-color:#6699ff;"
    "    color:black;"
    "}";
 
constexpr const char *SpotButtonStyle =
    "QPushButton {"
    "    background-color:lightgray;"
    "    color:black;"
    "    padding:0.25em 0.25em; font-weight:normal;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:4px;"
    "}"
    "QPushButton:checked {"
    "    background-color:#6699ff;"
    "    color:black;"
    "}";
 
}
#else
namespace Styles {
 
// background color of the header bar - must be the same as the frequency display above
constexpr const char *LogWidgetStyle =
    "QFrame#logWidget { background-color: #F2F2F0; }";
 
// definition of the frequency displqy for the up/down buttons
constexpr const char *DialFreqUpDownButtonStyle =
    "QPushButton {"
    "    background-color: #000000;"
    "    color: #39FF14;"
    "    font-size: 12pt;"
    "    border:1px solid;"
    "    border-radius:0px;"
    "}"
    "QPushButton:pressed {"
    "    background-color: #222;"
    "}";
 
class OffsetSliderWidget : public QWidget {
  public:
    explicit OffsetSliderWidget(QWidget *parent = nullptr) : QWidget(parent) {
        auto *layout = new QHBoxLayout(this);
        auto *caption = new QLabel("Offset:", this);
        caption->setStyleSheet("QLabel { color: black; }");
        slider = new QSlider(Qt::Horizontal, this);
        // Lock the QSlider's appearance regardless of the system theme
        slider->setStyleSheet(R"(
            QSlider {
                background: transparent;
                min-height: 24px;
            }
            QSlider::groove:horizontal {
                border: 1px solid #b0b0b0;
                height: 6px;
                background: #a5cdff;
                border-radius: 3px;
            }
            QSlider::handle:horizontal {
                background: #6699ff;
                border: 1px solid #c2c8d1;
                width: 16px;
                margin: -3px 0;
                border-radius: 5px;
            }
            QSlider::sub-page:horizontal {
                background: #a5cdff;
                border-radius: 3px;
            }
            QSlider::add-page:horizontal {
                background: #e0e0e0;
                border-radius: 3px;
            }
        )");
        slider->setRange(0, 3000);
        slider->setValue(1500);
        valueLabel = new QLabel("0 Hz", this);
        valueLabel->setStyleSheet("QLabel { color: black; }");
        valueLabel->setMinimumWidth(60);
        layout->addWidget(caption);
        layout->addWidget(slider, 1);
        layout->addWidget(valueLabel);
        connect(slider, &QSlider::valueChanged, this, [this](int val) {
            valueLabel->setText(QString("%1 Hz").arg(val));
            if (onValueChanged) onValueChanged(val);
        });
    }
 
    int offset() const { return slider->value(); }
    void setValue(int hz) { slider->setValue(hz); }
    void setOnValueChanged(std::function<void(int)> cb) { onValueChanged = cb; }
 
  private:
    QSlider *slider;
    QLabel *valueLabel;
    std::function<void(int)> onValueChanged;
};
 
// definition of the display of the callsign label
constexpr const char *LabCallsignStyle = "QLabel {"
                                         "    font-size: 14pt;"
                                         "    line-height:12pt;"
                                         "    color : black;"
                                         "}";
 
// definition of the display of the of the date/time label
constexpr const char *LabUTCStyle =
    "QLabel {"
    "    border-radius:0px;"
    "    font-size: 18pt;"
    "    line-height:18pt;"
    "    font-family: \"DejaVu Sans Mono\", \"Liberation Mono\", \"Noto Mono\", \"Ubuntu Mono\", monospace;"
    "    font-weight: bold;"
    "    background-color: black;"
    "    color : #39FF14;"
    "}";
 
// defintion of the display of the button grid
constexpr const char *ButtonGridStyle =
    "QPushButton {"
    "    background-color:lightgray;"
    "    padding:0.25em 0.25em; font-weight:normal;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:0px;"
    "}"
    "QPushButton:checked {"
    "    background-color:#6699ff;"
    "}";
 
// defintion of the display of the Tx button
constexpr const char *MonitorTxButtonStyle =
    "QPushButton {"
    "    background-color:lightgray;"
    "    padding:0.25em 0.25em; font-weight:normal;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:0px;"
    "}"
    "QPushButton:checked {"
    "    background-color:#22FF22;"
    "}"
    "QPushButton[transmitting=\"true\"] {"
    "    background-color:#FF2222;"
    "}";
 
// definition of the display of the Rx button
constexpr const char *MonitorButtonStyle =
    "QPushButton {"
    "    background-color:lightgray;"
    "    padding:0.25em 0.25em; font-weight:normal;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:0px;"
    "}"
    "QPushButton:checked {"
    "    background-color:#22FF22;"
    "}";
 
// defintion of the display of the Log and Tune buttons
constexpr const char *LogQSOButtonStyle =
    "QPushButton {"
    "    background-color:lightgray;"
    "    padding:0.25em 0.25em; font-weight:normal;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:0px;"
    "}"
    "QPushButton:checked {"
    "    background-color:#6699ff;"
    "}";
 
constexpr const char *TuneButtonStyle = LogQSOButtonStyle; // Same as above
 
// definition of the display of the Mode button
constexpr const char *ModeButtonStyle =
    "QPushButton {"
    "    padding:0.25em 0.25em; font-weight:bold;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:0px;"
    "    background-color:#6699ff;"
    "}"
    "QPushButton:checked {"
    "    background-color:#6699ff;"
    "}";
 
// defintion of the display of the Spot button
constexpr const char *SpotButtonStyle =
    "QPushButton {"
    "    background-color:lightgray;"
    "    padding:0.25em 0.25em; font-weight:normal;"
    "    border-style:solid;"
    "    border-width:0px;"
    "    border-radius:0px;"
    "}"
    "QPushButton:checked {"
    "    background-color:#6699ff;"
    "}";
 
}
#endif