Themeability (#186)

* add css (qss)

* Include css

* Merge pull request #6 from Fair-Exchange/css

Css

* fix

* beta blue

* fix

* YellowFevers UI work

* Merge pull request #7 from Fair-Exchange/css

Css - YellowFevers UI work

* Update mainwindow.cpp

* Update mainwindow.ui

* Merge pull request #6 from OleksandrBlack/css

move Tx list to balance tab

* Ease of use

General usability improvements

* Delete main.css

* style for tab

* Merge pull request #7 from YellowFeveRs/UI-work

General UI improvements

* updated tab styling

* Merge pull request #8 from Fair-Exchange/css

Css

* fix

* fix for Windows

* fix for Windows

* fix

* Merge pull request #10 from Fair-Exchange/master

Merge pull request #4 from OleksandrBlack/master

* Merge pull request #10 from Fair-Exchange/master

Merge pull request #4 from OleksandrBlack/master

* Merge pull request #11 from OleksandrBlack/css

Css

* Merge pull request #12 from OleksandrBlack/style

blue prepare

* revert

* Update zec_qt_wallet_zh.ts

* Update zec_qt_wallet_es.ts

* Update zec_qt_wallet_fr.ts

* Update zec_qt_wallet_it.ts

* Update zec_qt_wallet_pt.ts

* Update json.hpp

* Update json.hpp

* Update about.ui

* Update mainwindow.ui

* Update connection.ui

* Update connection.cpp

* Update connection.cpp

* Update application.qrc

* Update mainwindow.cpp

* Update settings.ui

application.qrc

@@ -20,4 +20,20 @@
         <file>res/zec_qt_wallet_zh.qm</file>
         <file>res/zec_qt_wallet_tr.qm</file>
     </qresource>
+    <qresource prefix="/css">
+        <file>res/css/blue.css</file>
+        <file>res/css/dark.css</file>
+        <file>res/css/default.css</file>
+        <file>res/css/light.css</file>
+    </qresource>
+    <qresource prefix="/images/blue">
+        <file>res/images/blue/unchecked.png</file>
+        <file>res/images/blue/checked.png</file>
+        <file>res/images/blue/blue_downArrow.png</file>
+        <file>res/images/blue/blue_downArrow_small.png</file>
+        <file>res/images/blue/blue_upArrow_small.png</file>
+        <file>res/images/blue/blue_leftArrow_small.png</file>
+        <file>res/images/blue/blue_rightArrow_small.png</file>
+        <file>res/images/blue/blue_qtreeview_selected.png</file>
+    </qresource>
 </RCC>

res/css/dark.css

@@ -0,0 +1,88 @@
+
+QWidget, QMainWindow, QMenuBar, QMenu, QDialog, QTabWidget, QTableView, QTableView::item, QScrollArea, QGroupBox, QPlainTextEdit, QLineEdit, QLabel
+{
+    background-color: #303335;
+    color: #ffffff;
+}
+
+QTabWidget QTabBar::tab {
+padding-left:20px;
+padding-right:20px;
+padding-top:5px;
+padding-bottom:5px;
+border: 1px solid #525355;
+background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.25, stop: 0 #747577, stop: 1 #3E4244);
+}
+
+QTabWidget QTabBar::tab:selected {
+min-height: 10px;
+background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.25, stop: 0 #525355, stop: 1 #303335);
+color:#fff;
+border: 1px ridge #000;
+}
+
+QTabWidget QTabBar::tab:hover {
+background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.25, stop: 0 #747577, stop: 1 #3E4244);
+color:#fff;
+border: 1px ridge #fff;
+min-height: 20px
+}
+
+QHeaderView { /* Table Header */
+background-color:#303335;
+}
+
+QHeaderView::section { /* Table Header Sections */
+qproperty-alignment:center;
+background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.25, stop: 0 #747577, stop: 1 #3E4244);
+color:#fff;
+min-height:25px;
+font-weight:bold;
+font-size:11px;
+outline:0;
+border:1px solid #525355;
+border-right:1px solid #fff;
+border-left:1px solid #fff;
+padding-left:5px;
+padding-right:5px;
+padding-top:2px;
+padding-bottom:2px;
+}
+
+QHeaderView::section:last {
+border-right: 0px solid #d7d7d7;
+}
+
+QScrollArea {
+background:transparent;
+border:0px;
+}
+
+QTableView { /* Table - has to be selected as a class otherwise it throws off QCalendarWidget */
+background:#303335;
+}
+
+QTableView::item { /* Table Item */
+background-color:#303335;
+border:1px solid #fff;
+font-size:12px;
+}
+
+QTableView::item:selected { /* Table Item Selected */
+background-color:#fff;
+color:#000;
+}
+
+QMenuBar {
+background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.25, stop: 0 #525355, stop: 1 #303335);
+color: #fff;
+}
+
+QMenuBar::item {
+background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.25, stop: 0 #525355, stop: 1 #303335);
+color: #fff;
+}
+
+QMenuBar::item:selected {
+background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.25, stop: 0 #747577, stop: 1 #3E4244);
+}

res/css/default.css

@@ -0,0 +1,5 @@
+QWidget, QMainWindow, QMenuBar, QMenu, QDialog, QTabWidget, QTableView, QTableView::item, QScrollArea, QGroupBox, QPlainTextEdit, QLineEdit, QLabel 
+{
+    /**/
+    
+}

res/css/light.css

@@ -0,0 +1,90 @@
+QWidget, QMainWindow, QMenuBar, QMenu, QDialog, QTabWidget, QTableView, QTableView::item, QScrollArea, QGroupBox, QWidget, QPlainTextEdit, QLineEdit, QLabel 
+{
+    background-color: #dadada;
+    color: #000000;
+    
+}
+
+QTabWidget QTabBar::tab {
+padding-left:20px;
+padding-right:20px;
+padding-top:5px;
+padding-bottom:5px;
+border: 1px solid #525355;
+background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.25, stop: 0 #DADADA, stop: 1 #747577);
+color:#fff;
+}
+
+QTabWidget QTabBar::tab:selected {
+min-height: 10px;
+background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.25, stop: 0 #747577, stop: 1 #DADADA);
+color:#000;
+border: 1px ridge #000;
+}
+
+QTabWidget QTabBar::tab:hover {
+background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.25, stop: 0 #747577, stop: 1 #DADADA);
+color:#000;
+border: 1px ridge #fff;
+min-height: 20px
+}
+
+QHeaderView { /* Table Header */
+background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.25, stop: 0 #DADADA, stop: 1 #747577);
+}
+
+QHeaderView::section { /* Table Header Sections */
+qproperty-alignment:center;
+background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.25, stop: 0 #DADADA, stop: 1 #747577);
+color:#fff;
+min-height:25px;
+font-weight:bold;
+font-size:11px;
+outline:0;
+border:1px solid #747577;
+border-right:1px solid #fff;
+border-left:1px solid #fff;
+padding-left:5px;
+padding-right:5px;
+padding-top:2px;
+padding-bottom:2px;
+}
+
+QHeaderView::section:last {
+border-right: 0px solid #d7d7d7;
+}
+
+QScrollArea {
+background:transparent;
+border:0px;
+}
+
+QTableView { /* Table - has to be selected as a class otherwise it throws off QCalendarWidget */
+background:#DADADA;
+}
+
+QTableView::item { /* Table Item */
+background-color:#DADADA;
+border:1px solid #fff;
+font-size:12px;
+}
+
+QTableView::item:selected { /* Table Item Selected */
+background-color:#747577;
+color:#fff;
+}
+
+QMenuBar {
+background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.25, stop: 0 #DADADA, stop: 1 #747577);
+color: #fff;
+}
+
+QMenuBar::item {
+background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.25, stop: 0 #DADADA, stop: 1 #747577);
+color: #fff;
+}
+
+QMenuBar::item:selected {
+background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.25, stop: 0 #747577, stop: 1 #DADADA);
+color:#000;
+}

src/mainwindow.cpp

@@ -29,6 +29,22 @@ MainWindow::MainWindow(QWidget *parent) :
     QMainWindow(parent),
     ui(new Ui::MainWindow)
 {
+	    
+
+	// Include css    
+    QString theme_name;
+    try
+    {
+       theme_name = Settings::getInstance()->get_theme_name();
+    }
+    catch (...)
+    {
+        theme_name = "default";
+    }
+
+    this->slot_change_theme(theme_name);
+
+	    
     ui->setupUi(this);
     logger = new Logger(this, QDir(QStandardPaths::writableLocation(QStandardPaths::AppDataLocation)).filePath("zec-qt-wallet.log"));
 
@@ -116,6 +132,7 @@ MainWindow::MainWindow(QWidget *parent) :
     // Initialize to the balances tab
     ui->tabWidget->setCurrentIndex(0);
 
+
     // The zcashd tab is hidden by default, and only later added in if the embedded zcashd is started
     zcashdtab = ui->tabWidget->widget(4);
     ui->tabWidget->removeTab(4);
@@ -484,6 +501,12 @@ void MainWindow::setupSettingsModal() {
             }
         });
 
+        // Setup theme combo
+        int theme_index = settings.comboBoxTheme->findText(Settings::getInstance()->get_theme_name(), Qt::MatchExactly);
+        settings.comboBoxTheme->setCurrentIndex(theme_index);
+
+        QObject::connect(settings.comboBoxTheme, SIGNAL(currentIndexChanged(QString)), this, SLOT(slot_change_theme(QString)));
+
         // Save sent transactions
         settings.chkSaveTxs->setChecked(Settings::getInstance()->getSaveZtxs());
 
@@ -1602,6 +1625,35 @@ void MainWindow::updateLabels() {
     updateLabelsAutoComplete();
 }
 
+void MainWindow::slot_change_theme(const QString& theme_name)
+{
+    /*
+    QMessageBox msgBox;
+    msgBox.setText(theme_name);
+    msgBox.exec();
+    */
+    Settings::getInstance()->set_theme_name(theme_name);
+
+    // Include css
+    QString saved_theme_name;
+    try
+    {
+       saved_theme_name = Settings::getInstance()->get_theme_name();
+    }
+    catch (...)
+    {
+        saved_theme_name = "default";
+    }
+
+    QFile qFile(":/css/res/css/" + saved_theme_name +".css");
+    if (qFile.open(QFile::ReadOnly))
+    {
+      QString styleSheet = QLatin1String(qFile.readAll());
+      this->setStyleSheet(styleSheet);
+    }
+
+}
+
 MainWindow::~MainWindow()
 {
     delete ui;

src/mainwindow.h

@@ -81,6 +81,9 @@ public:
 
     void doClose();
 
+public slots:
+    void slot_change_theme(const QString& themeName);
+
 private:    
     void closeEvent(QCloseEvent* event);
 

src/settings.cpp

@@ -149,6 +149,15 @@ void Settings::setAllowCustomFees(bool allow) {
     QSettings().setValue("options/customfees", allow);
 }
 
+QString Settings::get_theme_name() {
+    // Load from the QT Settings.
+    return QSettings().value("options/theme_name", false).toString();
+}
+
+void Settings::set_theme_name(QString theme_name) {
+    QSettings().setValue("options/theme_name", theme_name);
+}
+
 bool Settings::getSaveZtxs() {
     // Load from the QT Settings. 
     return QSettings().value("options/savesenttx", true).toBool();

src/settings.h

@@ -68,7 +68,10 @@ public:
 
     bool    getCheckForUpdates();
     void    setCheckForUpdates(bool allow);
-            
+
+    QString get_theme_name();
+    void set_theme_name(QString theme_name);
+
     bool    isSaplingActive();
 
     void    setUsingZcashConf(QString confLocation);
@@ -142,4 +145,4 @@ private:
     double  zecPrice          = 0.0;
 };
 
-#endif // SETTINGS_H
+#endif // SETTINGS_H

src/settings.ui

@@ -7,7 +7,7 @@
     <x>0</x>
     <y>0</y>
     <width>540</width>
-    <height>504</height>
+    <height>539</height>
    </rect>
   </property>
   <property name="minimumSize">
@@ -145,18 +145,43 @@
        <string>Options</string>
       </attribute>
       <layout class="QGridLayout" name="gridLayout">
-       <item row="14" column="0" colspan="2">
-        <spacer name="verticalSpacer_2">
-         <property name="orientation">
-          <enum>Qt::Vertical</enum>
+       <item row="10" column="0" colspan="2">
+        <widget class="QLabel" name="label_8">
+         <property name="text">
+          <string>Connect to github on startup to check for updates</string>
          </property>
-         <property name="sizeHint" stdset="0">
-          <size>
-           <width>20</width>
-           <height>40</height>
-          </size>
+        </widget>
+       </item>
+       <item row="6" column="0" colspan="2">
+        <widget class="QLabel" name="label_7">
+         <property name="text">
+          <string>Normally, change from t-Addresses goes to another t-Address. Checking this option will send the change to your shielded sapling address instead. Check this option to increase your privacy.</string>
          </property>
-        </spacer>
+         <property name="wordWrap">
+          <bool>true</bool>
+         </property>
+        </widget>
+       </item>
+       <item row="2" column="1">
+        <widget class="QPushButton" name="btnClearSaved">
+         <property name="text">
+          <string>Clear History</string>
+         </property>
+        </widget>
+       </item>
+       <item row="0" column="0" colspan="2">
+        <widget class="QCheckBox" name="chkSaveTxs">
+         <property name="text">
+          <string>Remember shielded transactions</string>
+         </property>
+        </widget>
+       </item>
+       <item row="12" column="0" colspan="2">
+        <widget class="QLabel" name="label_10">
+         <property name="text">
+          <string>Connect to the internet to fetch ZEC prices</string>
+         </property>
+        </widget>
        </item>
        <item row="2" column="0">
         <spacer name="horizontalSpacer">
@@ -171,44 +196,6 @@
          </property>
         </spacer>
        </item>
-       <item row="7" column="0">
-        <widget class="QCheckBox" name="chkTor">
-         <property name="text">
-          <string>Connect via Tor</string>
-         </property>
-        </widget>
-       </item>
-       <item row="9" column="0" colspan="2">
-        <widget class="QCheckBox" name="chkCheckUpdates">
-         <property name="text">
-          <string>Check github for updates at startup</string>
-         </property>
-        </widget>
-       </item>
-       <item row="13" column="0" colspan="2">
-        <widget class="Line" name="line_2">
-         <property name="orientation">
-          <enum>Qt::Horizontal</enum>
-         </property>
-        </widget>
-       </item>
-       <item row="0" column="0" colspan="2">
-        <widget class="QCheckBox" name="chkSaveTxs">
-         <property name="text">
-          <string>Remember shielded transactions</string>
-         </property>
-        </widget>
-       </item>
-       <item row="6" column="0" colspan="2">
-        <widget class="QLabel" name="label_7">
-         <property name="text">
-          <string>Normally, change from t-Addresses goes to another t-Address. Checking this option will send the change to your shielded sapling address instead. Check this option to increase your privacy.</string>
-         </property>
-         <property name="wordWrap">
-          <bool>true</bool>
-         </property>
-        </widget>
-       </item>
        <item row="4" column="0" colspan="2">
         <widget class="QLabel" name="label_6">
          <property name="text">
@@ -219,10 +206,10 @@
          </property>
         </widget>
        </item>
-       <item row="2" column="1">
-        <widget class="QPushButton" name="btnClearSaved">
+       <item row="9" column="0" colspan="2">
+        <widget class="QCheckBox" name="chkCheckUpdates">
          <property name="text">
-          <string>Clear History</string>
+          <string>Check github for updates at startup</string>
          </property>
         </widget>
        </item>
@@ -236,13 +223,6 @@
          </property>
         </widget>
        </item>
-       <item row="3" column="0">
-        <widget class="QCheckBox" name="chkCustomFees">
-         <property name="text">
-          <string>Allow custom fees</string>
-         </property>
-        </widget>
-       </item>
        <item row="5" column="0" colspan="2">
         <widget class="QCheckBox" name="chkAutoShield">
          <property name="text">
@@ -250,6 +230,19 @@
          </property>
         </widget>
        </item>
+       <item row="16" column="0" colspan="2">
+        <widget class="Line" name="line_2">
+         <property name="sizePolicy">
+          <sizepolicy hsizetype="Minimum" vsizetype="Fixed">
+           <horstretch>0</horstretch>
+           <verstretch>0</verstretch>
+          </sizepolicy>
+         </property>
+         <property name="orientation">
+          <enum>Qt::Horizontal</enum>
+         </property>
+        </widget>
+       </item>
        <item row="8" column="0" colspan="2">
         <widget class="QLabel" name="lblTor">
          <property name="text">
@@ -260,17 +253,30 @@
          </property>
         </widget>
        </item>
-       <item row="10" column="0" colspan="2">
-        <widget class="QLabel" name="label_8">
+       <item row="17" column="0" colspan="2">
+        <spacer name="verticalSpacer_2">
+         <property name="orientation">
+          <enum>Qt::Vertical</enum>
+         </property>
+         <property name="sizeHint" stdset="0">
+          <size>
+           <width>20</width>
+           <height>40</height>
+          </size>
+         </property>
+        </spacer>
+       </item>
+       <item row="7" column="0">
+        <widget class="QCheckBox" name="chkTor">
          <property name="text">
-          <string>Connect to github on startup to check for updates</string>
+          <string>Connect via Tor</string>
          </property>
         </widget>
        </item>
-       <item row="12" column="0" colspan="2">
-        <widget class="QLabel" name="label_10">
+       <item row="3" column="0">
+        <widget class="QCheckBox" name="chkCustomFees">
          <property name="text">
-          <string>Connect to the internet to fetch ZEC prices</string>
+          <string>Allow custom fees</string>
          </property>
         </widget>
        </item>
@@ -281,6 +287,52 @@
          </property>
         </widget>
        </item>
+       <item row="15" column="0">
+        <widget class="QLabel" name="label_20">
+         <property name="sizePolicy">
+          <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+           <horstretch>0</horstretch>
+           <verstretch>0</verstretch>
+          </sizepolicy>
+         </property>
+         <property name="text">
+          <string>Theme</string>
+         </property>
+         <property name="alignment">
+          <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
+         </property>
+        </widget>
+       </item>
+       <item row="15" column="1">
+        <widget class="QComboBox" name="comboBoxTheme">
+         <property name="sizePolicy">
+          <sizepolicy hsizetype="MinimumExpanding" vsizetype="Fixed">
+           <horstretch>0</horstretch>
+           <verstretch>0</verstretch>
+          </sizepolicy>
+         </property>
+         <item>
+          <property name="text">
+           <string>default</string>
+          </property>
+         </item>
+         <item>
+          <property name="text">
+           <string>blue</string>
+          </property>
+         </item>
+         <item>
+          <property name="text">
+           <string>light</string>
+          </property>
+         </item>
+         <item>
+          <property name="text">
+           <string>dark</string>
+          </property>
+         </item>
+        </widget>
+       </item>
       </layout>
      </widget>
      <widget class="QWidget" name="tab_3">

zec-qt-wallet.pro

@@ -25,6 +25,7 @@ DEFINES += \
     QT_DEPRECATED_WARNINGS
 
 INCLUDEPATH  += src/3rdparty/
+INCLUDEPATH  += src/
 
 RESOURCES     = application.qrc
 
@@ -151,3 +152,5 @@ else:win32-g++:CONFIG(debug, debug|release): PRE_TARGETDEPS += $$PWD/res/liblibs
 else:win32:!win32-g++:CONFIG(release, debug|release): PRE_TARGETDEPS += $$PWD/res/libsodium.lib
 else:win32:!win32-g++:CONFIG(debug, debug|release): PRE_TARGETDEPS += $$PWD/res/libsodiumd.lib
 else:unix: PRE_TARGETDEPS += $$PWD/res/libsodium.a
+
+DISTFILES +=