From 4566c9a9f3948873059e94eb88759cb96024287a Mon Sep 17 00:00:00 2001
From: Florent Viard <fviard@lacie.com>
Date: Tue, 10 Jun 2014 01:59:23 +0200
Subject: [PATCH] Reworked getUris/getTorrents/getMetalinks to be nicer and to
 have the advanced options as a collapsable block.

---
 css/modals.css             |  45 +++++++++-
 index.html                 | 165 ++++++++++++++++++++++++++++---------
 js/ctrls/modal.js          |  57 ++++++-------
 js/services/rpc/helpers.js |   8 +-
 4 files changed, 198 insertions(+), 77 deletions(-)

diff --git a/css/modals.css b/css/modals.css
index 05e0549..5c75112 100644
--- a/css/modals.css
+++ b/css/modals.css
@@ -1,13 +1,50 @@
-.modal-adduris textarea {
-  width: 100%;
-}
-
 .modal-large {
     width: 80%; /* respsonsive width */
     margin-left:-40%; /* width/2) */
 }
 
+.modal-header {
+    /*padding-bottom: 0px;*/
+    margin-bottom: 0px;
+}
+
 .modal-body {
+    padding-top: 5px;
     padding-bottom: 0px;
     margin-bottom: 5px;
 }
+
+.modal-body textarea {
+  width: 100%;
+}
+
+.modal-advanced-title {
+    font-weight: bold;
+    margin-bottom: 0px;
+    background-color: rgb(245, 245, 245);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    border-bottom: 0px;
+    border-radius: 4px 4px 0px 0px;
+    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+}
+
+.modal-advanced-options {
+  /*width: 100%;
+  margin-bottom: 10px;*/
+  margin-top:0px;
+  margin-bottom: 2px;
+  background-color: rgb(245, 245, 245);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-top: 0px;
+  border-radius: 0px 0px 4px 4px;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+.modal-form-input-verylarge {
+    width: 95%;
+}
+
+.modal-form-input-number {
+    width: 80px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 6abb26b..45723af 100755
--- a/index.html
+++ b/index.html
@@ -624,6 +624,7 @@
 
 <!--{{{ add uri modal -->
 <script type="text/ng-template" id="getUris.html">
+<div class="modal modal-adduris modal-large">
   <div class="modal-header">
     <button class="close" ng-click="$dismiss()">x</button>
     <h3>Add Downloads By URIs</h3>
@@ -651,28 +652,54 @@ http://ex1.com/f1.jpg http://ex2.com/f1.jpg
 http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
 </pre>
       </p>
-      <textarea rows="6" style="width: 100%" ng-model="getUris.uris"></textarea>
+      <textarea rows="4" style="width: 100%" ng-model="getUris.uris"></textarea>
 
-      <legend>Download Settings</legend>
-      <div class="control-group">
-        <div ng-repeat="(name, set) in getUris.settings">
-          <label class="control-label">{{name}}</label>
-
-          <div class="controls">
-            <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
-            </select>
-            <input ng-show="!set.options.length" typ="text" class="input-xlarge" ng-model="set.val"/>
+        <div>
+          <div class="modal-advanced-title">
+            Download settings
+          </div>
+          <div class="form-horizontal control-group modal-advanced-options">
+            <div ng-repeat="(name, set) in getUris.settings">
+              <label class="control-label">{{name}}</label>
+
+              <div class="controls">
+                <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
+                </select>
+                <input ng-show="!set.options.length" type="text" class="input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
+              </div>
+              <br>
+            </div>
+          </div>
+
+          <br />
+          <div ng-click="getUris.collapsed = !getUris.collapsed" class="modal-advanced-title">
+            Advanced settings
+            <i ng-hide="!getUris.collapsed" class="fa fa-fw fa-caret-right"></i>
+            <i ng-hide="getUris.collapsed" class="fa fa-fw fa-caret-down"></i>
+          </div>
+          <div collapse="getUris.collapsed" class="form-horizontal control-group modal-advanced-options">
+            <div ng-repeat="(name, set) in getUris.fsettings">
+              <!-- Empty bloc for the real label to be aligned with control -->
+              <label class="control-label"></label>
+              <p class="help-block controls">{{set.desc}}</p>
+
+              <label class="control-label">{{name}}</label>
+              <div class="controls">
+                <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
+                </select>
+                <input ng-show="!set.options.length" type="text" class="input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
+              </div>
+              <br />
+            </div>
           </div>
-          <br>
         </div>
-        <button class="btn" ng-click="getUris.advance_opts()">Add More Download Specific Options</button>
-      </div>
     </fieldset>
   </form>
   <div class="modal-footer">
     <button class="btn" ng-click="$dismiss()">Cancel</button>
     <button class="btn btn-primary" ng-click="$close()">Start</button>
   </div>
+</div>
 </script>
 <!-- }}} -->
 
@@ -690,22 +717,54 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
         - You can select multiple torrents to start multiple downloads <br>
         - To add a magnet torrent url, use the add url option and add it there.
       </p>
-      <input type="file" class="input-xlarge" fselect="getTorrents.files" multiple/>
-      <div class="control-group">
-        <div ng-repeat="(name, set) in getTorrents.settings">
-          <label class="control-label">{{name}}</label>
+      <div class="form-horizontal control-group">
+        <label class="control-label" style="text-align: left;"><b>Select a Torrent:</b></label>
+        <div class="controls">
+          <input type="file" class="input-xlarge" fselect="getTorrents.files" multiple/>
+        </div>
+      </div>
+      <br />
 
-          <div class="controls">
-            <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
-            </select>
-            <input ng-show="!set.options.length" typ="text" class="input-xlarge" ng-model="set.val"/>
+      <div>
+        <div class="modal-advanced-title">
+          Download settings
+        </div>
+        <div class="form-horizontal control-group modal-advanced-options">
+          <div ng-repeat="(name, set) in getTorrents.settings">
+            <label class="control-label">{{name}}</label>
+
+            <div class="controls">
+              <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
+              </select>
+              <input ng-show="!set.options.length" type="text" class="input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
+            </div>
+            <br>
+          </div>
+        </div>
+
+        <br />
+        <div ng-click="getTorrents.collapsed = !getTorrents.collapsed" class="modal-advanced-title">
+          Advanced settings
+          <i ng-hide="!getTorrents.collapsed" class="fa fa-fw fa-caret-right"></i>
+          <i ng-hide="getTorrents.collapsed" class="fa fa-fw fa-caret-down"></i>
+        </div>
+        <div collapse="getTorrents.collapsed" class="form-horizontal control-group modal-advanced-options">
+          <div ng-repeat="(name, set) in getTorrents.fsettings">
+            <!-- Empty bloc for the real label to be aligned with control -->
+            <label class="control-label"></label>
+            <p class="help-block controls">{{set.desc}}</p>
+
+            <label class="control-label">{{name}}</label>
+            <div class="controls">
+              <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
+              </select>
+              <input ng-show="!set.options.length" type="text" class="input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
+            </div>
+            <br />
           </div>
-          <br><br>
         </div>
       </div>
     </fieldset>
-
-    <button class="btn" ng-click="getTorrents.advance_opts()">Add Download Specific Options</button>
   </form>
   <div class="modal-footer">
     <button class="btn" ng-click="$dismiss()">Cancel</button>
@@ -727,22 +786,54 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
         - Select the metalink from the local filesystem to start the download. <br>
         - You can select multiple metalinks to start multiple downloads
       </p>
-      <input type="file" class="input-xlarge" fselect="getMetalinks.files" multiple/>
-      <div class="control-group">
-        <div ng-repeat="(name, set) in getMetalinks.settings">
-          <label class="control-label">{{name}}</label>
+      <div class="form-horizontal control-group">
+        <label class="control-label" style="text-align: left;"><b>Select a Metalinks:</b></label>
+        <div class="controls">
+          <input type="file" class="input-xlarge" fselect="getMetalinks.files" multiple/>
+        </div>
+      </div>
+      <br />
 
-          <div class="controls">
-            <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
-            </select>
-            <input ng-show="!set.options.length" typ="text" class="input-xlarge" ng-model="set.val"/>
+      <div>
+        <div class="modal-advanced-title">
+          Download settings
+        </div>
+        <div class="form-horizontal control-group modal-advanced-options">
+          <div ng-repeat="(name, set) in getMetalinks.settings">
+            <label class="control-label">{{name}}</label>
+
+            <div class="controls">
+              <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
+              </select>
+              <input ng-show="!set.options.length" type="text" class="input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
+            </div>
+            <br>
+          </div>
+        </div>
+
+        <br />
+        <div ng-click="getMetalinks.collapsed = !getMetalinks.collapsed" class="modal-advanced-title">
+          Advanced settings
+          <i ng-hide="!getMetalinks.collapsed" class="fa fa-fw fa-caret-right"></i>
+          <i ng-hide="getMetalinks.collapsed" class="fa fa-fw fa-caret-down"></i>
+        </div>
+        <div collapse="getMetalinks.collapsed" class="form-horizontal control-group modal-advanced-options">
+          <div ng-repeat="(name, set) in getMetalinks.fsettings">
+            <!-- Empty bloc for the real label to be aligned with control -->
+            <label class="control-label"></label>
+            <p class="help-block controls">{{set.desc}}</p>
+
+            <label class="control-label">{{name}}</label>
+            <div class="controls">
+              <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
+              </select>
+              <input ng-show="!set.options.length" type="text" class="input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
+            </div>
+            <br />
           </div>
-          <br><br>
         </div>
       </div>
     </fieldset>
-
-    <button class="btn" ng-click="getMetalinks.advance_opts()">Add Download Specific Options</button>
   </form>
   <div class="modal-footer">
     <button class="btn" ng-click="$dismiss()">Cancel</button>
@@ -767,7 +858,7 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
           <div class="controls">
             <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
             </select>
-            <input ng-show="!set.options.length" typ="text" class="input-xlarge" ng-model="set.val"/>
+            <input ng-show="!set.options.length" type="text" class="input-xlarge" ng-model="set.val"/>
             <label class="checkbox" ng-show="set.starred != undefined">
               <input type="checkbox" ng-model="set.starred"/> Quick Access (shown on the main page)
             </label>
@@ -812,7 +903,7 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
 
           <label class="control-label">Enter the port:</label>
           <div class="controls">
-            <input type="text" class="input-xlarge"
+            <input type="text" class="input-xlarge modal-form-input-number"
               ng-model="connection.conf.port"/>
             <p class="help-block">
               Enter the port of the server on which the rpc for
diff --git a/js/ctrls/modal.js b/js/ctrls/modal.js
index 07302d4..ab2f742 100644
--- a/js/ctrls/modal.js
+++ b/js/ctrls/modal.js
@@ -37,6 +37,7 @@ angular
     open: function(cb) {
       var self = this;
       this.uris = "";
+      this.collapsed = true;
       this.settings = {};
       this.fsettings = _.cloneDeep(fsettings);
       this.cb = cb;
@@ -44,11 +45,13 @@ angular
       // fill in default download properties
       _.forEach(dprops, function(p) {
         self.settings[p] = self.fsettings[p];
+        delete self.fsettings[p];
       });
 
       this.inst = $modal.open({
         templateUrl: "getUris.html",
-        scope: scope
+        scope: scope,
+        windowClass: "modal-large"
       });
       this.inst.result.then(function() {
         delete self.inst;
@@ -57,6 +60,9 @@ angular
           for (var i in self.settings) {
             settings[i] = self.settings[i].val;
           }
+          for (var i in self.fsettings) {
+            settings[i] = self.fsettings[i].val;
+          }
 
           console.log('sending settings:', settings);
           self.cb(self.parse(), settings);
@@ -66,20 +72,6 @@ angular
         delete self.inst;
       });
     },
-    advance_opts: function() {
-      var self = this;
-      modals.invoke(
-        'settings', self.fsettings,
-        'Advance Download Options', 'Add', function(settings) {
-
-        for (var i in settings) {
-          if (fsettings[i].val != settings[i].val)
-            self.settings[i] = settings[i]
-        };
-
-        console.log('got back new settings:', self.settings);
-      });
-    },
     parse: function() {
       return _
         .chain(this.uris.trim().split(/\r?\n/g))
@@ -97,7 +89,8 @@ angular
       this.actionText = actionText;
       this.inst = $modal.open({
         templateUrl: "settings.html",
-        scope: scope
+        scope: scope,
+        windowClass: "modal-large"
       });
       this.inst.result.then(function() {
         delete self.inst;
@@ -119,7 +112,8 @@ angular
       this.conf = rpc.getConfiguration();
       this.inst = $modal.open({
         templateUrl: "connection.html",
-        scope: scope
+        scope: scope,
+        windowClass: "modal-large",
       });
       this.inst.result.then(function() {
         delete self.inst;
@@ -138,10 +132,20 @@ angular
       open: function(cb) {
         var self = this;
         this.files = [];
+        this.collapsed = true;
         this.settings = {};
+        this.fsettings = _.cloneDeep(fsettings);
+
+        // fill in default download properties
+        _.forEach(dprops, function(p) {
+          self.settings[p] = self.fsettings[p];
+          delete self.fsettings[p];
+        });
+
         this.inst = $modal.open({
           templateUrl: name + ".html",
-          scope: scope
+          scope: scope,
+          windowClass: "modal-large",
         });
         this.inst.result.then(function() {
           delete self.inst;
@@ -151,6 +155,9 @@ angular
               for (var i in self.settings) {
                 settings[i] = self.settings[i].val;
               }
+              for (var i in self.fsettings) {
+                settings[i] = self.fsettings[i].val;
+              }
 
               console.log('sending settings:', settings);
               cb(txts, settings);
@@ -160,20 +167,6 @@ angular
         function() {
           delete self.inst;
         });
-      },
-      advance_opts: function() {
-        var self = this;
-        modals.invoke(
-          'settings', _.cloneDeep(fsettings),
-          'Advance Download Options', 'Add', function(settings) {
-
-          for (var i in settings) {
-            if (fsettings[i].val != settings[i].val)
-              self.settings[i] = settings[i]
-          };
-
-          console.log('got back new settings:', self.settings);
-        });
       }
     };
   });
diff --git a/js/services/rpc/helpers.js b/js/services/rpc/helpers.js
index ffa9964..8a6a487 100644
--- a/js/services/rpc/helpers.js
+++ b/js/services/rpc/helpers.js
@@ -20,19 +20,19 @@ angular.module('webui.services.rpc.helpers', [
       // now dispatch all addUri syscalls
       rpc.forceUpdate();
     },
-    addTorrents: function(txts) {
+    addTorrents: function(txts, settings) {
       _.each(txts, function(txt) {
         // passing true to batch all the addUri calls
-        rpc.once('addTorrent', [txt], angular.noop, true);
+        rpc.once('addTorrent', [txt, [], settings], angular.noop, true);
       });
 
       // now dispatch all addUri syscalls
       rpc.forceUpdate();
     },
-    addMetalinks: function(txts) {
+    addMetalinks: function(txts, settings) {
       _.each(txts, function(txt) {
         // passing true to batch all the addUri calls
-        rpc.once('addMetalink', [txt], angular.noop, true);
+        rpc.once('addMetalink', [txt, settings], angular.noop, true);
       });
 
       // now dispatch all addUri syscalls