animate recording fields

dashboard-ui/bower_components/iron-behaviors/.bower.json

@@ -29,14 +29,14 @@
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
   "ignore": [],
-  "homepage": "https://github.com/PolymerElements/iron-behaviors",
+  "homepage": "https://github.com/polymerelements/iron-behaviors",
   "_release": "1.0.12",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.12",
     "commit": "657f526a2382a659cdf4e13be87ecc89261588a3"
   },
-  "_source": "git://github.com/PolymerElements/iron-behaviors.git",
+  "_source": "git://github.com/polymerelements/iron-behaviors.git",
   "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/iron-behaviors"
+  "_originalSource": "polymerelements/iron-behaviors"
 }

dashboard-ui/bower_components/iron-selector/.bower.json

@@ -36,7 +36,7 @@
     "tag": "v1.0.8",
     "commit": "e9a66727f3da0446f04956d4e4f1dcd51cdec2ff"
   },
-  "_source": "git://github.com/polymerelements/iron-selector.git",
+  "_source": "git://github.com/PolymerElements/iron-selector.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/iron-selector"
+  "_originalSource": "PolymerElements/iron-selector"
 }

dashboard-ui/components/recordingcreator/recordingcreator.js

@@ -1,4 +1,4 @@
-define(['components/paperdialoghelper', 'scripts/livetvcomponents', 'livetvcss', 'paper-checkbox', 'paper-input'], function (paperDialogHelper) {
+define(['components/paperdialoghelper', 'scripts/livetvcomponents', 'livetvcss', 'paper-checkbox', 'paper-input', 'paper-toggle-button'], function (paperDialogHelper) {
 
     var currentProgramId;
     var currentDialog;
@@ -33,7 +33,7 @@
     }
 
     function hideSeriesRecordingFields(context) {
-        $('#seriesFields', context).hide();
+        slideUpToHide(context.querySelector('#seriesFields'));
         context.querySelector('.btnSubmitContainer').classList.remove('hide');
         context.querySelector('.supporterContainer').classList.add('hide');
     }
@@ -113,7 +113,7 @@
     }
 
     function showSeriesRecordingFields(context) {
-        $('#seriesFields', context).show();
+        slideDownToShow(context.querySelector('#seriesFields'));
         context.querySelector('.btnSubmitContainer').classList.remove('hide');
 
         getRegistration(getParameterByName('programid')).then(function (regInfo) {
@@ -147,6 +147,49 @@
         });
     }
 
+    function slideDownToShow(elem) {
+
+        if (!elem.classList.contains('hide')) {
+            return;
+        }
+
+        elem.classList.remove('hide');
+
+        elem.style.overflow = 'hidden';
+
+        requestAnimationFrame(function () {
+
+            elem.animate([{
+                height: 0
+            }, {
+                height: elem.offsetHeight + 'px'
+
+            }], { duration: 400, easing: 'ease' }).onfinish = function () {
+                elem.classList.remove('hide');
+            };
+        });
+    }
+
+    function slideUpToHide(elem) {
+
+        if (elem.classList.contains('hide')) {
+            return;
+        }
+
+        elem.style.overflow = 'hidden';
+
+        requestAnimationFrame(function () {
+
+            elem.animate([{
+                height: elem.offsetHeight + 'px'
+            }, {
+                height: 0
+            }], { duration: 400, easing: 'ease' }).onfinish = function () {
+                elem.classList.add('hide');
+            };
+        });
+    }
+
     function init(context) {
 
         $('#chkRecordSeries', context).on('change', function () {
@@ -163,6 +206,20 @@
             closeDialog(false);
         });
 
+        context.querySelector('.chkAdvanced').addEventListener('change', function (e) {
+
+            var elems = context.querySelectorAll('.advancedToggle');
+            var isChecked = e.target.checked;
+
+            for (var i = 0, length = elems.length; i < length; i++) {
+                if (isChecked) {
+                    slideDownToShow(elems[i]);
+                } else {
+                    slideUpToHide(elems[i]);
+                }
+            }
+        });
+
         $('form', context).off('submit', onSubmit).on('submit', onSubmit);
     }
 

dashboard-ui/components/recordingcreator/recordingcreator.template.html

@@ -7,13 +7,16 @@
 
 <form class="liveTvNewRecordingForm" style="margin: 0 auto;">
 
+    <div style="text-align: right;">
+        <paper-toggle-button class="chkAdvanced">${ButtonAdvanced}</paper-toggle-button>
+    </div>
     <div style="display: none;" id="eligibleForSeriesFields">
         <div>
             <paper-checkbox id="chkRecordSeries">${OptionRecordSeries}</paper-checkbox>
         </div>
         <br />
 
-        <div id="seriesFields" style="display: none;">
+        <div id="seriesFields" class="hide">
             <div>
                 <h1>${HeaderDays}</h1>
             </div>
@@ -38,7 +41,7 @@
         <br />
     </div>
 
-    <div>
+    <div class="advancedToggle hide">
         <div>
             <paper-input type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPrePaddingMinutes}"></paper-input>
         </div>

dashboard-ui/scripts/site.js

@@ -1839,6 +1839,7 @@ var AppInfo = {};
         define("paper-radio-group", ["html!" + bowerPath + "/paper-radio-group/paper-radio-group.html"]);
         define("paper-radio-button", ["html!" + bowerPath + "/paper-radio-button/paper-radio-button.html"]);
         define("neon-animated-pages", ["html!" + bowerPath + "/neon-animation/neon-animated-pages.html"]);
+        define("paper-toggle-button", ["html!" + bowerPath + "/paper-toggle-button/paper-toggle-button.html"]);
 
         define("slide-right-animation", ["html!" + bowerPath + "/neon-animation/animations/slide-right-animation.html"]);
         define("slide-left-animation", ["html!" + bowerPath + "/neon-animation/animations/slide-left-animation.html"]);

dashboard-ui/strings/html/en-US.json

@@ -1525,5 +1525,6 @@
     "LabelFolder": "Folder:",
     "HeadersFolders": "Folders",
     "LabelDisplayName": "Display name:",
-    "HeaderNewRecording":  "New Recording"
+    "HeaderNewRecording":  "New Recording",
+    "ButtonAdvanced":  "Advanced"
 }

dashboard-ui/strings/html/server.json

@@ -1540,5 +1540,6 @@
     "LabelFolder": "Folder:",
     "HeadersFolders": "Folders",
     "LabelDisplayName": "Display name:",
-    "HeaderNewRecording":  "New Recording"
+    "HeaderNewRecording": "New Recording",
+    "ButtonAdvanced":  "Advanced"
 }

dashboard-ui/thirdparty/paper-button-style.css

@@ -595,21 +595,8 @@ paper-dialog.popupEditor {
     padding-bottom: 100px;
 }
 
-.paperToggleContainer {
-    padding: .5em 0;
-}
-
-    .paperToggleContainer paper-toggle-button {
-        vertical-align: middle;
-    }
-
-    .paperToggleContainer > span {
-        vertical-align: middle;
-        margin-left: 1em;
-    }
-
-paper-toggle-button #toggleBar {
-    background-color: #080808;
+.paper-toggle-button-0 .toggle-label.paper-toggle-button {
+    color: inherit;
 }
 
 paper-toggle-button #toggleButton, paper-toggle-button[checked] #toggleBar {