From 6f4e494e067ba8778c2a4064d218639743cf715a Mon Sep 17 00:00:00 2001 From: Adam Ierymenko Date: Fri, 24 Jan 2014 13:26:24 -0800 Subject: [PATCH] Bunch of UI style improvements. --- ZeroTierUI/ZeroTierUI.pro | 3 + ZeroTierUI/main.cpp | 16 ++- ZeroTierUI/mainwindow.ui | 76 ++-------- ZeroTierUI/networkwidget.cpp | 8 +- ZeroTierUI/networkwidget.h | 2 +- ZeroTierUI/networkwidget.ui | 259 ++++++++++++++++------------------- ZeroTierUI/resources.qrc | 3 + ZeroTierUI/stylesheet.css | 90 ++++++++++++ 8 files changed, 240 insertions(+), 217 deletions(-) create mode 100644 ZeroTierUI/stylesheet.css diff --git a/ZeroTierUI/ZeroTierUI.pro b/ZeroTierUI/ZeroTierUI.pro index cb3912ff0..dd31f27fb 100644 --- a/ZeroTierUI/ZeroTierUI.pro +++ b/ZeroTierUI/ZeroTierUI.pro @@ -109,3 +109,6 @@ RESOURCES += \ mac:OBJECTIVE_SOURCES += \ mac_doprivileged.mm + +OTHER_FILES += \ + stylesheet.css diff --git a/ZeroTierUI/main.cpp b/ZeroTierUI/main.cpp index 58571c630..3255ec9fa 100644 --- a/ZeroTierUI/main.cpp +++ b/ZeroTierUI/main.cpp @@ -39,6 +39,13 @@ int main(int argc, char *argv[]) { QApplication a(argc, argv); + { + QFile qss(":css/stylesheet.css"); + qss.open(QFile::ReadOnly); + QString style(qss.readAll()); + a.setStyleSheet(style); + } + #ifdef __APPLE__ // If service isn't installed, download and install it if (!QFile::exists("/Library/Application Support/ZeroTier/One/zerotier-one")) { @@ -51,15 +58,18 @@ int main(int argc, char *argv[]) #endif #ifdef __APPLE__ - QString zt1AppSupport(QDir::homePath() + "/Library/Application Support/ZeroTier/One"); - QDir::root().mkpath(zt1AppSupport); - settings = new QSettings(zt1AppSupport + "/ui.ini",QSettings::IniFormat); + { + QString zt1AppSupport(QDir::homePath() + "/Library/Application Support/ZeroTier/One"); + QDir::root().mkpath(zt1AppSupport); + settings = new QSettings(zt1AppSupport + "/ui.ini",QSettings::IniFormat); + } #else settings = new QSettings("ZeroTier Networks","ZeroTier One"); #endif if (!settings->value("acceptedLicenseV1",false).toBool()) { LicenseDialog ld; + ld.setStyleSheet(a.styleSheet()); ld.exec(); } diff --git a/ZeroTierUI/mainwindow.ui b/ZeroTierUI/mainwindow.ui index 91479bb38..ad71f0341 100644 --- a/ZeroTierUI/mainwindow.ui +++ b/ZeroTierUI/mainwindow.ui @@ -106,16 +106,6 @@ Qt::NoFocus - - QListWidget#networkListWidget { - background-color: transparent; -} - -QListWidget#networkListWidget::Item { - background-color: palette(base); - border: 0; -} - QFrame::NoFrame @@ -135,7 +125,7 @@ QListWidget#networkListWidget::Item { QAbstractItemView::ScrollPerPixel - 2 + 0 true @@ -161,7 +151,7 @@ QListWidget#networkListWidget::Item { 0 - + 0 @@ -179,33 +169,14 @@ QListWidget#networkListWidget::Item { Your 10-digit ZeroTier address; click to copy to clipboard. - - QPushButton { - border: 0; - text-align: left; - padding: 0 5px 0 5px; - margin: 0; - background-color: transparent; -} - -QPushButton:focus { - background-color: rgba(0,0,0,15); -} - -QPushButton:hover { - background-color: rgba(0,0,0,15); -} - -QPushButton:pressed { - background-color: rgba(0,0,0,75); -} -s - - + ---------- - - true + + Qt::ToolButtonTextOnly + + + clickToCopy @@ -225,11 +196,6 @@ s Your network connection status. - - padding: 0 0.75em 0 0.75em; -margin: 0 4px 0 0; - - @@ -267,7 +233,7 @@ margin: 0 4px 0 0; - + 0 @@ -285,33 +251,9 @@ margin: 0 4px 0 0; Join this network. - - QPushButton { - padding: 0 0.8em 0 0.8em; - margin: 0; - border: 0; - background-color: rgba(0,0,0,25); -} - -QPushButton:focus { - background-color: rgba(0,0,0,33); -} - -QPushButton:hover { - background-color: rgba(0,0,0,33); -} - -QPushButton:pressed { - background-color: rgba(0,0,0,75); -} - - + - - true - diff --git a/ZeroTierUI/networkwidget.cpp b/ZeroTierUI/networkwidget.cpp index 112d9ac67..8b0ec0a71 100644 --- a/ZeroTierUI/networkwidget.cpp +++ b/ZeroTierUI/networkwidget.cpp @@ -43,7 +43,7 @@ NetworkWidget::NetworkWidget(QWidget *parent,const std::string &nwid) : networkIdStr(nwid) { ui->setupUi(this); - ui->networkIdPushButton->setText(QString(nwid.c_str())); + ui->networkIdButton->setText(QString(nwid.c_str())); QFontMetrics fm(ui->ipListWidget->font()); int lineHeight = ui->ipListWidget->spacing() + fm.height(); @@ -64,7 +64,7 @@ void NetworkWidget::setStatus(const std::string &status,const std::string &age) { ui->statusLabel->setText(QString(status.c_str())); if (status == "OK") - ui->ageLabel->setText(QString("(configuration is ") + age.c_str() + " seconds old)"); + ui->ageLabel->setText(QString("[") + age.c_str() + "s ago]"); else ui->ageLabel->setText(QString()); } @@ -138,9 +138,9 @@ void NetworkWidget::on_leaveNetworkButton_clicked() } } -void NetworkWidget::on_networkIdPushButton_clicked() +void NetworkWidget::on_networkIdButton_clicked() { - QApplication::clipboard()->setText(ui->networkIdPushButton->text()); + QApplication::clipboard()->setText(ui->networkIdButton->text()); } void NetworkWidget::on_ipListWidget_itemActivated(QListWidgetItem *item) diff --git a/ZeroTierUI/networkwidget.h b/ZeroTierUI/networkwidget.h index 29f88d3b2..f46dff203 100644 --- a/ZeroTierUI/networkwidget.h +++ b/ZeroTierUI/networkwidget.h @@ -55,7 +55,7 @@ public: private slots: void on_leaveNetworkButton_clicked(); - void on_networkIdPushButton_clicked(); + void on_networkIdButton_clicked(); void on_ipListWidget_itemActivated(QListWidgetItem *item); private: diff --git a/ZeroTierUI/networkwidget.ui b/ZeroTierUI/networkwidget.ui index a23f25b4d..c4bf9734f 100644 --- a/ZeroTierUI/networkwidget.ui +++ b/ZeroTierUI/networkwidget.ui @@ -20,7 +20,7 @@ Network - NetworkWidget + networkListItem @@ -57,35 +57,74 @@ 0 - - - - 0 - 0 - - - - - 16 - 75 - true - - - - This network's short name. - - - networkname - - - Qt::PlainText - - - Qt::AlignLeading|Qt::AlignLeft|Qt::AlignVCenter - - - Qt::NoTextInteraction - + + + + 0 + + + 4 + + + 0 + + + 0 + + + + + + Courier + 13 + 75 + true + + + + Hexadecimal network ID; click to copy to clipboard. + + + ---------------- + + + Qt::ToolButtonTextOnly + + + clickToCopy + + + + + + + + 13 + 75 + true + + + + This network's short name. + + + networkname + + + Qt::PlainText + + + Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter + + + Qt::NoTextInteraction + + + networkName + + + + @@ -100,6 +139,9 @@ QFormLayout::ExpandingFieldsGrow + + QFormLayout::DontWrapRows + Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter @@ -107,85 +149,30 @@ Qt::AlignHCenter|Qt::AlignTop - 6 + 4 2 - 0 + 4 - 0 + 4 0 - 0 + 4 - - - Network ID: - - - Qt::PlainText - - - - - - - - 0 - 0 - - + - Courier - 14 - 75 - true + 12 - - Hexadecimal network ID; click to copy to clipboard. - - - QPushButton { - border: 0; - padding: 0; - margin: 0; - text-align: left; - vertical-align: middle; - background-color: transparent; -} - -QPushButton:focus { - background-color: rgba(0,0,0,15); -} - -QPushButton:hover { - background-color: rgba(0,0,0,15); -} - -QPushButton:pressed { - background-color: rgba(0,0,0,75); -} - - - - 0000000000000000 - - - true - - - - - Type: @@ -194,10 +181,11 @@ QPushButton:pressed { - + + 12 75 true @@ -213,8 +201,13 @@ QPushButton:pressed { - + + + + 12 + + Status: @@ -223,7 +216,22 @@ QPushButton:pressed { - + + + + + 12 + + + + Device: + + + Qt::PlainText + + + + @@ -257,6 +265,7 @@ QPushButton:pressed { + 12 75 true @@ -282,18 +291,21 @@ QPushButton:pressed { - 8 + 10 How recently did this network refresh its settings? - (configuration is 0 seconds old) + [0s ago] Qt::PlainText + + Qt::NoTextInteraction + @@ -312,20 +324,11 @@ QPushButton:pressed { - - - - Device: - - - Qt::PlainText - - - - + + 12 75 true @@ -388,7 +391,7 @@ QPushButton:pressed { padding: 0.1em 0 0.1em 0; - IP Address Assignments + IP Addresses Qt::PlainText @@ -418,16 +421,6 @@ QPushButton:pressed { Double-click an IP to copy it to the clipboard. - - QListWidget { - background-color: rgba(0,0,0,10); -} - -QListWidget:hover { - background-color: rgba(0,0,0,15); -} - - QFrame::NoFrame @@ -446,6 +439,9 @@ QListWidget:hover { true + + ipAddressList + @@ -480,7 +476,7 @@ QListWidget:hover { - + 0 @@ -490,32 +486,11 @@ QListWidget:hover { Leave this network. - - QPushButton { - padding: 0.25em; - border: 0; - margin: 2px 0 2px 0; - background-color: rgba(0,0,0,25); -} - -QPushButton:focus { - background-color: rgba(0,0,0,33); -} - -QPushButton:hover { - background-color: rgba(0,0,0,33); -} - -QPushButton:pressed { - background-color: rgba(0,0,0,75); -} - - Leave Network - - true + + leaveNetworkButton diff --git a/ZeroTierUI/resources.qrc b/ZeroTierUI/resources.qrc index a788ae7f8..517b7944b 100644 --- a/ZeroTierUI/resources.qrc +++ b/ZeroTierUI/resources.qrc @@ -2,4 +2,7 @@ zt1icon.png + + stylesheet.css + diff --git a/ZeroTierUI/stylesheet.css b/ZeroTierUI/stylesheet.css new file mode 100644 index 000000000..706da1fad --- /dev/null +++ b/ZeroTierUI/stylesheet.css @@ -0,0 +1,90 @@ +QToolButton { + margin: 0; + padding: 2px; + text-align: center; + background: palette(button); + color: palette(button-text); + border: 1px solid transparent; +} +QToolButton:focus { + border: 1px solid #000000; +} +QToolButton:hover { + background: palette(highlight); +} +QToolButton:pressed { + border: 1px solid #000000; +} + +QToolButton.clickToCopy { + padding: 0; + margin: 0; + border: 0; + background: transparent; + color: palette(link); +} +QToolButton.clickToCopy:focus { + text-decoration: underline; +} +QToolButton.clickToCopy:hover { + text-decoration: underline; +} +QToolButton.clickToCopy:pressed { + background: transparent; +} + +QToolButton.leaveNetworkButton { + margin: 0 4px 3px 0; +} + +QMainWindow { + background: palette(dark); +} + +QListWidget { + background: transparent; + padding: 0; + margin: 0; + border: 0; +} +QListWidget::item { + background: palette(base); + margin: 1px 0 1px 0; +} + +QListWidget.ipAddressList { + background: palette(button); + margin: 0 4px 4px 0; +} +QListWidget.ipAddressList::item { + background: transparent; + color: palette(link); + border-bottom: 1px solid transparent; +} +QListWidget.ipAddressList::item:selected { + background: transparent; + border-bottom: 1px solid transparent; +} +QListWidget.ipAddressList::item:hover { + border-bottom: 1px solid palette(link); +} + +QLabel.networkName { + padding: 0 0.8em 0.1em 0; + margin: 0; + text-align: right; +} + +#joinNetworkButton { + margin: 1px; + padding: 0; +} + +#networkListWidget { + background: palette(dark); + margin: 0 0 2px 0; +} + +#bottomContainerWidget { + background: palette(base); +}