Merge pull request #79 from fviard/master

Moved miscallenous info out of the main page. Added "server info" and "a...

css/download.css

@@ -19,12 +19,15 @@
 }
 
 .download-graph {
-  width: 80%;
+  width: 30%;
   margin-top: 5px;
   margin-bottom: 5px;
   margin-left: auto;
   margin-right: auto;
 }
+.large-graph {
+  width: 80%;
+}
 .stats {
   margin-top: 0px;
   margin-bottom: 0px;

index.html

@@ -170,6 +170,18 @@
               ng-click="changeGSettings()"
               href="#"><i class="icon-wrench"></i> Global Settings</a>
           </li>
+
+          <li>
+            <a
+              ng-click="showServerInfo()"
+              href="#"><i class="icon-info-sign"></i> Server info</a>
+          </li>
+
+          <li>
+            <a
+              ng-click="showAbout()"
+              href="#"><i class="icon-question-sign"></i> About and contribute</a>
+          </li>
         </ul>
       </li>
     </ul>
@@ -225,12 +237,26 @@
   <!--}}} -->
 
   <!-- {{{ downloads -->
-  <div ng-show="!totalAria2Downloads() && totalAria2Downloads() > getDownloads()" class="hero-unit">
+  <!-- Bug?? <div ng-show="!totalAria2Downloads() && totalAria2Downloads() > getDownloads()" class="hero-unit">-->
-    <h3>Currently no downloads in line to display, use the Add download button to start downloading files!</h3>
+  <div ng-show="!totalAria2Downloads()" class="hero-unit">
+    Currently no download in line to display, use the '<strong>Add</strong>' download button to start downloading files!
   </div>
 
 
+  <!-- {{{ global statistics -->
+  <h3 ng-show="totalAria2Downloads()">Global Statistics</h3>
+
+  <div ng-class="{'large-graph': large_graph}" class="download-graph"
+    dspeed="gstats.downloadSpeed"
+    uspeed="gstats.uploadSpeed"
+    dgraph ng-show="totalAria2Downloads()"
+    ng-click="large_graph = !large_graph">
+  </div>
+    <!-- }}} -->
+
+
   <!-- {{{ download template -->
+   <h3 ng-show="totalAria2Downloads()">Download List</h3>
 
   <form class="row" ng-show="(totalAria2Downloads() > pageSize) || downloadFilter.length">
     <fieldset>
@@ -543,36 +569,7 @@
   </div>
   <!-- }}} -->
 
-  <!-- {{{ global statistics -->
-  <h3 ng-show="totalAria2Downloads()">Global Statistics</h3>
 
-  <div class="download-graph"
-    dspeed="gstats.downloadSpeed"
-    uspeed="gstats.uploadSpeed"
-    dgraph ng-show="totalAria2Downloads()">
-  </div>
-
-  <!-- }}} -->
-
-  <!-- {{{ miscellaneous -->
-  <h3>Miscellaneous</h3>
-  <b>Aria2 Version {{miscellaneous.version}}</b>
-  <br><br>
-  <b>Features Enabled</b>
-  <ul>
-    <li
-      ng-repeat="feature in miscellaneous.enabledFeatures">
-      <span>{{feature}}</span>
-    </li>
-  </ul>
-  <br>
-  <p>
-    To download the latest version of the project, add issues or to contribute back head on to
-    <a href="https://github.com/ziahamza/webui-aria2">http://github.com/ziahamza/webui-aria2</a>
-    <br>
-    Or you can open the latest version in browser through <a href="http://ziahamza.github.io/webui-aria2">http://ziahamza.github.io/webui-aria2</a>
-  </p>
-  <!-- }}} -->
 
 </div>
 
@@ -779,8 +776,57 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
 <!-- }}} -->
 
 
+<!-- {{{ server info modal -->
+<div class="modal hide" modal="server_info.shown">
+  <div class="modal-header">
+    <button class="close" ng-click="server_info.close()">x</button>
+    <h3>Aria2 server info</h3>
+  </div>
+  <div class="modal-body">
+      <b>Aria2 Version {{miscellaneous.version}}</b>
+      <br><br>
+      <b>Features Enabled</b>
+        <ul>
+        <li
+          ng-repeat="feature in miscellaneous.enabledFeatures">
+          <span>{{feature}}</span>
+        </li>
+        </ul>
+  </div>
+  <div class="modal-footer">
+    <button class="btn" ng-click="server_info.close()">Close</button>
+  </div>
+</div
+<!-- }}} -->
+
+<!-- {{{ about modal -->
+<div class="modal hide" modal="about.shown">
+  <div class="modal-header">
+    <button class="close" ng-click="about.close()">x</button>
+    <h3>About and contribute</h3>
+  </div>
+  <div class="modal-body">
+      <p>
+        To download the latest version of the project,<br />
+         add issues or to contribute back head on to:<br />
+        <a href="https://github.com/ziahamza/webui-aria2">http://github.com/ziahamza/webui-aria2</a>
+        <br /><br />
+        Or you can open the latest version in browser through:<br />
+        <a href="http://ziahamza.github.io/webui-aria2">http://ziahamza.github.io/webui-aria2</a>
+      </p>
+  </div>
+  <div class="modal-footer">
+    <button class="btn" ng-click="about.close()">Close</button>
+  </div>
+</div
+<!-- }}} -->
+
+
 </div>
 <!-- }}} -->
 
+<!-- Bottom Padding -->
+<br /><br /><br /><br /><br />
+
 </body>
 </html>

js/ctrls/modal.js

@@ -143,9 +143,26 @@ angular
     };
   });
 
+  _.each(['server_info', 'about'], function(name) {
+    scope[name] =  {
+      shown: false,
+      init: function(cb) {
+        this.shown = this.open =  true;
+      },
+
+      close: function() {
+        this.shown = this.open = false;
+      }
+    };
+  });
+
+  rpc.once('getVersion', [], function(data) {
+      scope.miscellaneous = data[0];
+      });
+  
   _.each([
     'getUris', 'getTorrents', 'getMetalinks',
-    'settings', 'connection'
+    'settings', 'connection', 'server_info', 'about'
   ], function(name) {
     modals.register(name, function(cb) {
       if (scope[name].open) {

js/ctrls/nav.js

@@ -118,4 +118,17 @@ angular
       });
     });
   };
+
+  scope.showServerInfo = function() {
+    modals.invoke(
+      'server_info'
+    );
+  };
+
+  scope.showAbout = function() {
+    modals.invoke(
+      'about'
+    );
+  }
+  
 }]);

js/directives/dgraph.js

@@ -1,5 +1,5 @@
 // graph takes dspeed and uspeed, it queries them every second and draws
-// the last 20 secs, it also takes draw as an optional attribute and only
+// the last 180 secs, it also takes draw as an optional attribute and only
 // draws the graph when it is true, if not given then graph is always drawn
 angular
 .module('webui.directives.dgraph', ['webui.filters.bytes', 'webui.services.deps'])
@@ -7,7 +7,7 @@ angular
   return function(scope, elem, attrs) {
     var canDraw = true;
 
-    var graphSize = 20
+    var graphSize = 180
       , dspeed = 0, uspeed = 0
       , dconf = {
         label: "Download Speed",