Bunch of UI style improvements.

This commit is contained in:
Adam Ierymenko 2014-01-24 13:26:24 -08:00
parent eb554a504d
commit 6f4e494e06
8 changed files with 240 additions and 217 deletions

View File

@ -109,3 +109,6 @@ RESOURCES += \
mac:OBJECTIVE_SOURCES += \
mac_doprivileged.mm
OTHER_FILES += \
stylesheet.css

View File

@ -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();
}

View File

@ -106,16 +106,6 @@
<property name="focusPolicy">
<enum>Qt::NoFocus</enum>
</property>
<property name="styleSheet">
<string notr="true">QListWidget#networkListWidget {
background-color: transparent;
}
QListWidget#networkListWidget::Item {
background-color: palette(base);
border: 0;
}</string>
</property>
<property name="frameShape">
<enum>QFrame::NoFrame</enum>
</property>
@ -135,7 +125,7 @@ QListWidget#networkListWidget::Item {
<enum>QAbstractItemView::ScrollPerPixel</enum>
</property>
<property name="spacing">
<number>2</number>
<number>0</number>
</property>
<property name="uniformItemSizes">
<bool>true</bool>
@ -161,7 +151,7 @@ QListWidget#networkListWidget::Item {
<number>0</number>
</property>
<item>
<widget class="QPushButton" name="addressButton">
<widget class="QToolButton" name="addressButton">
<property name="sizePolicy">
<sizepolicy hsizetype="Minimum" vsizetype="Preferred">
<horstretch>0</horstretch>
@ -179,33 +169,14 @@ QListWidget#networkListWidget::Item {
<property name="statusTip">
<string>Your 10-digit ZeroTier address; click to copy to clipboard.</string>
</property>
<property name="styleSheet">
<string notr="true">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</string>
</property>
<property name="text">
<string/>
<string notr="true">----------</string>
</property>
<property name="flat">
<bool>true</bool>
<property name="toolButtonStyle">
<enum>Qt::ToolButtonTextOnly</enum>
</property>
<property name="class" stdset="0">
<string notr="true">clickToCopy</string>
</property>
</widget>
</item>
@ -225,11 +196,6 @@ s</string>
<property name="statusTip">
<string>Your network connection status.</string>
</property>
<property name="styleSheet">
<string notr="true">padding: 0 0.75em 0 0.75em;
margin: 0 4px 0 0;
</string>
</property>
<property name="text">
<string/>
</property>
@ -267,7 +233,7 @@ margin: 0 4px 0 0;
</widget>
</item>
<item>
<widget class="QPushButton" name="joinNetworkButton">
<widget class="QToolButton" name="joinNetworkButton">
<property name="sizePolicy">
<sizepolicy hsizetype="Minimum" vsizetype="Preferred">
<horstretch>0</horstretch>
@ -285,33 +251,9 @@ margin: 0 4px 0 0;
<property name="statusTip">
<string>Join this network.</string>
</property>
<property name="styleSheet">
<string notr="true">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);
}
</string>
</property>
<property name="text">
<string notr="true">+</string>
</property>
<property name="flat">
<bool>true</bool>
</property>
</widget>
</item>
</layout>

View File

@ -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)

View File

@ -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:

View File

@ -20,7 +20,7 @@
<string>Network</string>
</property>
<property name="class" stdset="0">
<string>NetworkWidget</string>
<string notr="true">networkListItem</string>
</property>
<layout class="QHBoxLayout">
<property name="spacing">
@ -57,35 +57,74 @@
<number>0</number>
</property>
<item>
<widget class="QLabel" name="nameLabel">
<property name="sizePolicy">
<sizepolicy hsizetype="Expanding" vsizetype="Preferred">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="font">
<font>
<pointsize>16</pointsize>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
<property name="statusTip">
<string>This network's short name.</string>
</property>
<property name="text">
<string>networkname</string>
</property>
<property name="textFormat">
<enum>Qt::PlainText</enum>
</property>
<property name="alignment">
<set>Qt::AlignLeading|Qt::AlignLeft|Qt::AlignVCenter</set>
</property>
<property name="textInteractionFlags">
<set>Qt::NoTextInteraction</set>
</property>
<widget class="QWidget" name="widget" native="true">
<layout class="QHBoxLayout" name="horizontalLayout">
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>4</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item>
<widget class="QToolButton" name="networkIdButton">
<property name="font">
<font>
<family>Courier</family>
<pointsize>13</pointsize>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
<property name="statusTip">
<string>Hexadecimal network ID; click to copy to clipboard.</string>
</property>
<property name="text">
<string notr="true">----------------</string>
</property>
<property name="toolButtonStyle">
<enum>Qt::ToolButtonTextOnly</enum>
</property>
<property name="class" stdset="0">
<string notr="true">clickToCopy</string>
</property>
</widget>
</item>
<item>
<widget class="QLabel" name="nameLabel">
<property name="font">
<font>
<pointsize>13</pointsize>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
<property name="statusTip">
<string>This network's short name.</string>
</property>
<property name="text">
<string>networkname</string>
</property>
<property name="textFormat">
<enum>Qt::PlainText</enum>
</property>
<property name="alignment">
<set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
</property>
<property name="textInteractionFlags">
<set>Qt::NoTextInteraction</set>
</property>
<property name="class" stdset="0">
<string notr="true">networkName</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
<item>
@ -100,6 +139,9 @@
<property name="fieldGrowthPolicy">
<enum>QFormLayout::ExpandingFieldsGrow</enum>
</property>
<property name="rowWrapPolicy">
<enum>QFormLayout::DontWrapRows</enum>
</property>
<property name="labelAlignment">
<set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
</property>
@ -107,85 +149,30 @@
<set>Qt::AlignHCenter|Qt::AlignTop</set>
</property>
<property name="horizontalSpacing">
<number>6</number>
<number>4</number>
</property>
<property name="verticalSpacing">
<number>2</number>
</property>
<property name="leftMargin">
<number>0</number>
<number>4</number>
</property>
<property name="topMargin">
<number>0</number>
<number>4</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
<number>4</number>
</property>
<item row="2" column="0">
<widget class="QLabel" name="label_2">
<property name="text">
<string>Network ID:</string>
</property>
<property name="textFormat">
<enum>Qt::PlainText</enum>
</property>
</widget>
</item>
<item row="2" column="1">
<widget class="QPushButton" name="networkIdPushButton">
<property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Preferred">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<widget class="QLabel" name="label_5">
<property name="font">
<font>
<family>Courier</family>
<pointsize>14</pointsize>
<weight>75</weight>
<bold>true</bold>
<pointsize>12</pointsize>
</font>
</property>
<property name="statusTip">
<string>Hexadecimal network ID; click to copy to clipboard.</string>
</property>
<property name="styleSheet">
<string notr="true">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);
}
</string>
</property>
<property name="text">
<string>0000000000000000</string>
</property>
<property name="flat">
<bool>true</bool>
</property>
</widget>
</item>
<item row="3" column="0">
<widget class="QLabel" name="label_5">
<property name="text">
<string>Type:</string>
</property>
@ -194,10 +181,11 @@ QPushButton:pressed {
</property>
</widget>
</item>
<item row="3" column="1">
<item row="2" column="1">
<widget class="QLabel" name="networkTypeLabel">
<property name="font">
<font>
<pointsize>12</pointsize>
<weight>75</weight>
<bold>true</bold>
</font>
@ -213,8 +201,13 @@ QPushButton:pressed {
</property>
</widget>
</item>
<item row="4" column="0">
<item row="3" column="0">
<widget class="QLabel" name="label">
<property name="font">
<font>
<pointsize>12</pointsize>
</font>
</property>
<property name="text">
<string>Status:</string>
</property>
@ -223,7 +216,22 @@ QPushButton:pressed {
</property>
</widget>
</item>
<item row="4" column="1">
<item row="4" column="0">
<widget class="QLabel" name="label_4">
<property name="font">
<font>
<pointsize>12</pointsize>
</font>
</property>
<property name="text">
<string>Device:</string>
</property>
<property name="textFormat">
<enum>Qt::PlainText</enum>
</property>
</widget>
</item>
<item row="3" column="1">
<widget class="QWidget" name="widget" native="true">
<property name="sizePolicy">
<sizepolicy hsizetype="Expanding" vsizetype="Preferred">
@ -257,6 +265,7 @@ QPushButton:pressed {
</property>
<property name="font">
<font>
<pointsize>12</pointsize>
<weight>75</weight>
<bold>true</bold>
</font>
@ -282,18 +291,21 @@ QPushButton:pressed {
</property>
<property name="font">
<font>
<pointsize>8</pointsize>
<pointsize>10</pointsize>
</font>
</property>
<property name="statusTip">
<string>How recently did this network refresh its settings?</string>
</property>
<property name="text">
<string>(configuration is 0 seconds old)</string>
<string>[0s ago]</string>
</property>
<property name="textFormat">
<enum>Qt::PlainText</enum>
</property>
<property name="textInteractionFlags">
<set>Qt::NoTextInteraction</set>
</property>
</widget>
</item>
<item>
@ -312,20 +324,11 @@ QPushButton:pressed {
</layout>
</widget>
</item>
<item row="5" column="0">
<widget class="QLabel" name="label_4">
<property name="text">
<string>Device:</string>
</property>
<property name="textFormat">
<enum>Qt::PlainText</enum>
</property>
</widget>
</item>
<item row="5" column="1">
<item row="4" column="1">
<widget class="QLabel" name="deviceLabel">
<property name="font">
<font>
<pointsize>12</pointsize>
<weight>75</weight>
<bold>true</bold>
</font>
@ -388,7 +391,7 @@ QPushButton:pressed {
<string notr="true">padding: 0.1em 0 0.1em 0;</string>
</property>
<property name="text">
<string>IP Address Assignments</string>
<string>IP Addresses</string>
</property>
<property name="textFormat">
<enum>Qt::PlainText</enum>
@ -418,16 +421,6 @@ QPushButton:pressed {
<property name="statusTip">
<string>Double-click an IP to copy it to the clipboard.</string>
</property>
<property name="styleSheet">
<string notr="true">QListWidget {
background-color: rgba(0,0,0,10);
}
QListWidget:hover {
background-color: rgba(0,0,0,15);
}
</string>
</property>
<property name="frameShape">
<enum>QFrame::NoFrame</enum>
</property>
@ -446,6 +439,9 @@ QListWidget:hover {
<property name="sortingEnabled">
<bool>true</bool>
</property>
<property name="class" stdset="0">
<string notr="true">ipAddressList</string>
</property>
</widget>
</item>
<item>
@ -480,7 +476,7 @@ QListWidget:hover {
</spacer>
</item>
<item>
<widget class="QPushButton" name="leaveNetworkButton">
<widget class="QToolButton" name="leaveNetworkButton">
<property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Fixed">
<horstretch>0</horstretch>
@ -490,32 +486,11 @@ QListWidget:hover {
<property name="statusTip">
<string>Leave this network.</string>
</property>
<property name="styleSheet">
<string notr="true">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);
}
</string>
</property>
<property name="text">
<string>Leave Network</string>
</property>
<property name="flat">
<bool>true</bool>
<property name="class" stdset="0">
<string notr="true">leaveNetworkButton</string>
</property>
</widget>
</item>

View File

@ -2,4 +2,7 @@
<qresource prefix="/img">
<file>zt1icon.png</file>
</qresource>
<qresource prefix="/css">
<file>stylesheet.css</file>
</qresource>
</RCC>

90
ZeroTierUI/stylesheet.css Normal file
View File

@ -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);
}