Load/Save Modal: Add more info and link to Help Page (#241)

Author: microbit-henry

editor.html

@@ -87,12 +87,18 @@ <h2 class="modal-title"><i class="fa fa-upload"></i> <strong>{{ load-title }}</s
                 <input type="file" style="display: none" name="load-form-file-upload" id="file-upload-input">
                 <p>{{ instructions }}<br><a href="#" id="file-upload-link" class="load-drag-target load-toggle action">{{ toggle-file }}</a></p>
             </div>
-            <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ save-title }}</strong></h2>
+            <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ save-but }}</strong></h2>
             <div class="save-buttons-container">
                 <button type="button" class="action save-button py" id="save-py" title="{{ save-py }}"><i class="fa fa-download"></i> {{ save-py}}</button>
                 <button type="button" class="action save-button hex" id="save-hex" title="{{ save-hex }}"><i class="fa fa-download"></i> {{ save-hex}}</button>
             </div>
-            <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ program-title }} {{ fs-title }}</strong></h2>
+            <div id="addFile">
+              <div id="addFileHeader">
+                <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ files-title }}</strong></h2>
+              </div>
+              <div id="addFileHelp"><a id="expandHelpPara"><i class="fa fa-info-circle" aria-hidden="true"> <span>{{ help-button }}</span></i></a></div>
+            </div>
+            <div id="fileHelpPara">{{ file-help-text }}<a href="help.html#fs" target="_blank">{{ help-link }}</a>.</div>
             <div class="expandable">
                 <div class="expandable-always-visible">
                     <button type="button" class="action save-button show" id="show-files" title="{{ show-files }}">{{ show-files }} &nbsp;<i class="fa fa-caret-down"></i></button>

lang/en.js

@@ -118,7 +118,12 @@ var language = {
     'td-size': 'Size',
     'fs-space-free':'free',
     'remove-but' : 'Remove',
-    'save-but': 'Save'
+    'save-but': 'Save',
+    'files-title' : 'Project Files',
+    'help-button' : 'Files Help',
+    'file-help-text' : 'The Project Files area shows you the files included in your program and lets you add or remove external python modules and other files. Find out more in the ',
+    'help-link' : 'Python Editor help documentation'
+
   },
   'static-strings': {
     'buttons': {

lang/es.js

@@ -118,7 +118,12 @@ var language = {
     'td-size': 'Tamaño',
     'fs-space-free':'disponible',
     'remove-but' : 'Borrar',
-    'save-but': 'Guardar'
+    'files-title' : 'Project Files',
+    'save-but' : 'Guardar',
+    'files-title' : 'Project Files',
+    'help-button' : 'Files Help',
+    'file-help-text' : 'The Project Files area shows you the files included in your program and lets you add or remove external python modules and other files. Find out more in the ',
+    'help-link' : 'Python Editor help documentation'
   },
   'static-strings': {
     'buttons': {

lang/pl.js

@@ -118,7 +118,11 @@ var language = {
       'td-size': 'Rozmiar',
       'fs-space-free': 'wolne',
       'remove-but': 'Usuń',
-      'save-but': 'Zapisz'
+      'save-but': 'Zapisz',
+      'files-title' : 'Project Files',
+      'help-button' : 'Files Help',
+      'file-help-text' : 'The Project Files area shows you the files included in your program and lets you add or remove external python modules and other files. Find out more in the ',
+      'help-link' : 'Python Editor help documentation'
    },
    'static-strings': {
       'buttons': {

python-main.js

@@ -937,6 +937,15 @@ function web_editor(config) {
                     }
                     downloadFileFromFilesystem('main.py');
                 });
+                $("#expandHelpPara").click(function(){
+                    if ($("#fileHelpPara").css("display")=="none"){
+                        $("#fileHelpPara").show();
+                        $("#addFile").css("margin-bottom","10px");
+                    }else{
+                        $("#fileHelpPara").hide();
+                        $("#addFile").css("margin-bottom","22px");
+                    }
+                });
                 $('#show-files').click(function() {
                   var content = $('.expandable-content')[0];
                   if (content.style.maxHeight){

static/css/style.css

@@ -482,7 +482,6 @@ a.command:hover {
 }
 
 div.expandable {
-    margin-top: 15px;
     background: #eee;
     border: 1px solid #aaa;
     border-radius: 9px;
@@ -653,7 +652,7 @@ input:checked + .menu-switch-slider:before {
 
 /* Modals */
 .modal-title {
-    margin: 24px 0px 12px 0px;
+    margin: 28px 0px 22px 0px;
     text-transform: capitalize;
 }
 .modal-title:first-of-type {
@@ -979,3 +978,44 @@ ul.tree li:last-child:before {
     font-size: 2em;
     color: #336699;
 }
+
+#addFile{
+  position: relative;
+  margin: 28px 0px 22px 0px;
+  height: 29px;
+}
+
+#addFileHeader{
+  float:left;
+  position: absolute;
+  bottom: 0px;
+  margin-bottom: 0px;
+}
+
+#addFileHeader .modal-title{
+  margin: 0px 0px 0px 0px;
+}
+
+#addFileHelp{
+  float: right;
+  line-height: 29px;
+  right: 0px;
+  cursor: pointer;
+}
+
+#addFileHelp span{
+  font-family: "Segoe UI Light","Segoe UI","Segoe WP Light","Segoe WP","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",sans-serif;
+}
+
+#save-py{
+  margin: 0px 0px 0px 0px;
+}
+
+#save-hex{
+  margin: 0px 0px 0px 0px;
+}
+
+#fileHelpPara{
+  display:none;
+  margin-bottom: 10px;
+}