From 754580db42555046725bcd2a16ce1ffd6c150e15 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Wed, 29 Jun 2016 23:22:42 +0800
Subject: [PATCH] modify style

---
 src/index.html               | 23 +++++++-------
 src/scripts/core/__config.js |  6 ++++
 src/scripts/core/root.js     | 14 +++++++++
 src/styles/aria-ng.css       | 59 ++++++++++++++++++++++++++----------
 4 files changed, 75 insertions(+), 27 deletions(-)
 create mode 100644 src/scripts/core/__config.js

diff --git a/src/index.html b/src/index.html
index 8911eda..3cfd8d6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -151,13 +151,13 @@
             <ul id="siderbar-menu" class="sidebar-menu">
                 <li class="header" translate>Download</li>
                 <li data-href-match="/downloading">
-                    <a href="#/downloading"><i class="fa fa-arrow-down"></i> <span ng-bind="('Downloading' | translate) + (globalStat && globalStat.numActive > 0 ? ' (' + globalStat.numActive + ')' : '')">Downloading</span></a>
+                    <a href="#/downloading"><i class="fa fa-arrow-circle-o-down"></i> <span ng-bind="('Downloading' | translate) + (globalStat && globalStat.numActive > 0 ? ' (' + globalStat.numActive + ')' : '')">Downloading</span></a>
                 </li>
                 <li data-href-match="/waiting">
-                    <a href="#/waiting"><i class="fa fa-hourglass-half"></i> <span ng-bind="('Waiting' | translate) + (globalStat && globalStat.numWaiting > 0 ? ' (' + globalStat.numWaiting + ')' : '')">Scheduling</span></a>
+                    <a href="#/waiting"><i class="fa fa-clock-o"></i> <span ng-bind="('Waiting' | translate) + (globalStat && globalStat.numWaiting > 0 ? ' (' + globalStat.numWaiting + ')' : '')">Scheduling</span></a>
                 </li>
                 <li data-href-match="/stopped">
-                    <a href="#/stopped"><i class="fa fa-stop-circle-o"></i> <span ng-bind="('Downloaded / Stopped' | translate) + (globalStat && globalStat.numStopped > 0 ? ' (' + globalStat.numStopped + ')' : '')">Downloaded / Stopped</span></a>
+                    <a href="#/stopped"><i class="fa fa-check-circle-o"></i> <span ng-bind="('Downloaded / Stopped' | translate) + (globalStat && globalStat.numStopped > 0 ? ' (' + globalStat.numStopped + ')' : '')">Downloaded / Stopped</span></a>
                 </li>
                 <li class="header" translate>Settings</li>
                 <li data-href-match="/settings/ariang">
@@ -171,28 +171,28 @@
                     </a>
                     <ul class="treeview-menu">
                         <li data-href-match="/settings/aria2/basic">
-                            <a href="#/settings/aria2/basic"><i class="fa fa-circle-o"></i> <span translate>Basic Settings</span></a>
+                            <a href="#/settings/aria2/basic"> <span translate>Basic Settings</span></a>
                         </li>
                         <li data-href-match="/settings/aria2/http-ftp-sftp">
-                            <a href="#/settings/aria2/http-ftp-sftp"><i class="fa fa-circle-o"></i> <span translate>HTTP/FTP/SFTP Settings</span></a>
+                            <a href="#/settings/aria2/http-ftp-sftp"> <span translate>HTTP/FTP/SFTP Settings</span></a>
                         </li>
                         <li data-href-match="/settings/aria2/http">
-                            <a href="#/settings/aria2/http"><i class="fa fa-circle-o"></i> <span translate>HTTP Settings</span></a>
+                            <a href="#/settings/aria2/http"> <span translate>HTTP Settings</span></a>
                         </li>
                         <li data-href-match="/settings/aria2/ftp-sftp">
-                            <a href="#/settings/aria2/ftp-sftp"><i class="fa fa-circle-o"></i> <span translate>FTP/SFTP Settings</span></a>
+                            <a href="#/settings/aria2/ftp-sftp"> <span translate>FTP/SFTP Settings</span></a>
                         </li>
                         <li data-href-match="/settings/aria2/bt">
-                            <a href="#/settings/aria2/bt"><i class="fa fa-circle-o"></i> <span translate>BitTorrent Settings</span></a>
+                            <a href="#/settings/aria2/bt"> <span translate>BitTorrent Settings</span></a>
                         </li>
                         <li data-href-match="/settings/aria2/metalink">
-                            <a href="#/settings/aria2/metalink"><i class="fa fa-circle-o"></i> <span translate>Metalink Settings</span></a>
+                            <a href="#/settings/aria2/metalink"> <span translate>Metalink Settings</span></a>
                         </li>
                         <li data-href-match="/settings/aria2/rpc">
-                            <a href="#/settings/aria2/rpc"><i class="fa fa-circle-o"></i> <span translate>RPC Settings</span></a>
+                            <a href="#/settings/aria2/rpc"> <span translate>RPC Settings</span></a>
                         </li>
                         <li data-href-match="/settings/aria2/advanced">
-                            <a href="#/settings/aria2/advanced"><i class="fa fa-circle-o"></i> <span translate>Advanced Settings</span></a>
+                            <a href="#/settings/aria2/advanced"> <span translate>Advanced Settings</span></a>
                         </li>
                     </ul>
                 </li>
@@ -272,6 +272,7 @@
 <!-- endbuild -->
 <!-- build:js js/aria-ng.min.js -->
 <script src="scripts/core/__core.js"></script>
+<script src="scripts/core/__config.js"></script>
 <script src="scripts/core/__fix.js"></script>
 <script src="scripts/core/app.js"></script>
 <script src="scripts/core/router.js"></script>
diff --git a/src/scripts/core/__config.js b/src/scripts/core/__config.js
new file mode 100644
index 0000000..a569b87
--- /dev/null
+++ b/src/scripts/core/__config.js
@@ -0,0 +1,6 @@
+(function () {
+    'use strict';
+
+    //override AdminLTE options
+    $.AdminLTE.options.animationSpeed = 300;
+})();
diff --git a/src/scripts/core/root.js b/src/scripts/core/root.js
index 0086d8f..30af4a6 100644
--- a/src/scripts/core/root.js
+++ b/src/scripts/core/root.js
@@ -22,6 +22,18 @@
             return false;
         };
 
+        var initNavbar = function () {
+            angular.element('section.sidebar > ul > li[data-href-match] > a').click(function () {
+                angular.element('section.sidebar > ul li').removeClass('active');
+                angular.element(this).parent().addClass('active');
+            });
+
+            angular.element('section.sidebar > ul > li.treeview > ul.treeview-menu > li[data-href-match] > a').click(function () {
+                angular.element('section.sidebar > ul li').removeClass('active');
+                angular.element(this).parent().addClass('active').parent().parent().addClass('active');
+            });
+        };
+
         var setNavbarSelected = function (location) {
             angular.element('section.sidebar > ul li').removeClass('active');
             angular.element('section.sidebar > ul > li[data-href-match]').each(function (index, element) {
@@ -179,5 +191,7 @@
             setNavbarSelected(location);
             $document.unbind('keypress');
         });
+
+        initNavbar();
     }]);
 })();
diff --git a/src/styles/aria-ng.css b/src/styles/aria-ng.css
index ad84434..df0ca6e 100644
--- a/src/styles/aria-ng.css
+++ b/src/styles/aria-ng.css
@@ -238,14 +238,18 @@ td {
 .skin-aria-ng .sidebar-menu > li.header {
     color: #707070;
     background-color: #2e343c;
+    padding-top: 3px;
+    padding-bottom: 3px;
 }
 
 .skin-aria-ng .sidebar-menu > li > a {
     border-left: 3px solid transparent;
+    padding-top: 9px;
+    padding-bottom: 9px;
 }
 
 .skin-aria-ng .sidebar-menu > li:hover > a {
-    color: #f8f8f8;
+    color: #dfdfdf;
     background-color: #313a42;
 }
 
@@ -254,9 +258,44 @@ td {
     background-color: #252c30;
 }
 
-.skin-aria-ng .sidebar-menu > li > .treeview-menu {
-    margin: 0 1px;
-    background-color: #2a343b;
+.skin-aria-ng .sidebar-menu > li.treeview:hover > a {
+    color: #a2b5b9;
+    background-color: #3c4852;
+}
+
+.skin-aria-ng .sidebar-menu > li.treeview.active > a, .skin-aria-ng .sidebar-menu > li.treeview.active:hover > a {
+    color: #5399e8;
+    background-color: #3c4852;
+}
+
+.skin-aria-ng .sidebar-menu > li.treeview > a:hover {
+    color: #dfdfdf;
+    background-color: #313a42;
+}
+
+.skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu {
+    margin: 0;
+    padding: 0;
+    background-color: #3c4852;
+}
+
+.skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu > li > a {
+    color: #8aa4af;
+    padding: 6px 5px 6px 41px;
+}
+
+.skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu > li > a:hover {
+    color: #dfdfdf;
+    background-color: #313a42;
+}
+
+.skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu > li.active > a {
+    color: #5399e8;
+    background-color: #252c30;
+}
+
+.skin-aria-ng .sidebar-menu i.fa {
+    font-size: 16px;
 }
 
 .skin-aria-ng .sidebar a {
@@ -273,18 +312,6 @@ td {
     }
 }
 
-.skin-aria-ng .treeview-menu > li > a {
-    color: #8aa4af;
-}
-
-.skin-aria-ng .treeview-menu > li > a:hover {
-    color: #fefefe;
-}
-
-.skin-aria-ng .treeview-menu > li.active > a {
-    color: #0080ff;
-}
-
 .skin-aria-ng .content-wrapper, .right-side {
     background-color: #fff;
 }