Bunch of UI style improvements.

ZeroTierUI/ZeroTierUI.pro

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

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

ZeroTierUI/mainwindow.ui

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

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)

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:

ZeroTierUI/networkwidget.ui

@@ -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,27 +149,32 @@
           <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">
+          <widget class="QLabel" name="label_5">
+           <property name="font">
+            <font>
+             <pointsize>12</pointsize>
+            </font>
+           </property>
            <property name="text">
-            <string>Network ID:</string>
+            <string>Type:</string>
            </property>
            <property name="textFormat">
             <enum>Qt::PlainText</enum>
@@ -135,78 +182,34 @@
           </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="networkTypeLabel">
            <property name="font">
             <font>
-             <family>Courier</family>
-             <pointsize>14</pointsize>
+             <pointsize>12</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="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>
+            <string>What kind of network? Public or private?</string>
            </property>
-          </widget>
-         </item>
-         <item row="3" column="0">
-          <widget class="QLabel" name="label_5">
            <property name="text">
-            <string>Type:</string>
+            <string>?</string>
            </property>
            <property name="textFormat">
             <enum>Qt::PlainText</enum>
            </property>
           </widget>
          </item>
-         <item row="3" column="1">
-          <widget class="QLabel" name="networkTypeLabel">
+         <item row="3" column="0">
+          <widget class="QLabel" name="label">
            <property name="font">
             <font>
-             <weight>75</weight>
-             <bold>true</bold>
+             <pointsize>12</pointsize>
             </font>
            </property>
-           <property name="statusTip">
-            <string>What kind of network? Public or private?</string>
-           </property>
            <property name="text">
-            <string>?</string>
+            <string>Status:</string>
            </property>
            <property name="textFormat">
             <enum>Qt::PlainText</enum>
@@ -214,16 +217,21 @@ QPushButton:pressed {
           </widget>
          </item>
          <item row="4" column="0">
-          <widget class="QLabel" name="label">
+          <widget class="QLabel" name="label_4">
+           <property name="font">
+            <font>
+             <pointsize>12</pointsize>
+            </font>
+           </property>
            <property name="text">
-            <string>Status:</string>
+            <string>Device:</string>
            </property>
            <property name="textFormat">
             <enum>Qt::PlainText</enum>
            </property>
           </widget>
          </item>
-         <item row="4" column="1">
+         <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>

ZeroTierUI/resources.qrc

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

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