Merge pull request #166 from ICRAR/liu-256

Liu 256
ICRAR · May 30, 2022 · b8c2322 · b8c2322
2 parents eb03f56 + 6ba2af3
commit b8c2322
Show file tree

Hide file tree

Showing 4 changed files with 186 additions and 10 deletions.
diff --git a/daliuge-translator/dlg/dropmake/web/license.html b/daliuge-translator/dlg/dropmake/web/license.html
@@ -0,0 +1,19 @@
+ICRAR - International Centre for Radio Astronomy Research
+(c) UWA - The University of Western Australia, 2016
+Copyright by UWA (in the framework of the ICRAR)
+All rights reserved
+
+This library is free software; you can redistribute it and/or
+modify it under the terms of the GNU Lesser General Public
+License as published by the Free Software Foundation; either
+version 2.1 of the License, or (at your option) any later version.
+
+This library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public
+License along with this library; if not, write to the Free Software
+Foundation, Inc., 59 Temple Place, Suite 330, Boston,
+MA 02111-1307  USA
diff --git a/daliuge-translator/dlg/dropmake/web/main.js b/daliuge-translator/dlg/dropmake/web/main.js
@@ -21,15 +21,37 @@ $(document).ready(function () {
 
     updateDeployOptionsDropdown()
 
+    $("#aboutModal #aboutLicense").load("/static/license.html")
+
     //keyboard shortcuts
+    var keyboardShortcuts = []
+    keyboardShortcuts.push({name:"Open Settings", shortcut:"O", code:79, action: "$('#settingsModal').modal('toggle')"})
+    keyboardShortcuts.push({name:"Deploy", shortcut:"D", code:75, action: "$('#shortcutsModal').modal('toggle')"})
+    keyboardShortcuts.push({name:"Open Keyboardshortcuts Modal", shortcut:"K", code:68, action: "$('#activeDeployMethodButton').click()"})
+
+    //fill out keyboard shortcuts modal
+    keyboardShortcuts.forEach(element => { 
+        var shortCutItem =   '<div class="col-lg-6">'+
+                            '<div class="shortCutsModalItem">'+
+                                '<span>'+element.name+'</span>'+
+                                '<span class="shortCutsModalItemRight">'+element.shortcut+'</span>'+
+                            '</div>'+
+                        '</div>'
+        $("#shortcutsModal .modal-body .row").append(shortCutItem)
+    })
+
+    //keyboard shortcuts execution
     $(document).keydown(function(e){
         if($("input").is(":focus")){
             return
         }
-        if (e.which == 79) //open settings modal on o
-        {
-            $('#settingsModal').modal('toggle')
-        };
+        keyboardShortcuts.forEach(element => { 
+
+            if (e.which == element.code) //open settings modal on o
+            {
+                eval(element.action)
+            }
+        })
     })
 });
 

diff --git a/daliuge-translator/dlg/dropmake/web/pg_viewer.html b/daliuge-translator/dlg/dropmake/web/pg_viewer.html
@@ -111,6 +111,15 @@
                         <a href="javascript:void(0)" id="png_button" class="dropdown-item" onclick="makePNG()">Screenshot</a>
                     </div>
                 </li>
+                <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link dropdown-toggle" id="navbarExportDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Help
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarExportDropdown">
+                        <a href="javascript:void(0)" id="png_button" class="dropdown-item" onclick="$('#aboutModal').modal('toggle')">About</a>
+                        <a href="javascript:void(0)" id="png_button" class="dropdown-item" onclick="$('#shortcutsModal').modal('toggle')">Keyboard Shortcuts</a>
+                    </div>
+                </li>
                 <li class="nav-item">
                     <a href="javascript:void(0)" class="nav-link tooltip tooltipBottomLeft" data-text="Settings" data-toggle="modal" data-target="#settingsModal"><img src="/static/src/icons/settings_white_24dp.svg" alt="Settings"></a>
                 </li>
@@ -130,9 +139,7 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
+                    <a type="button" class="close material-icons" data-dismiss="modal">close</a>
                 </div>
                 <div class="modal-body">
                     <form action="/gen_pg" method="get" target="blank" name="deploy_target" id="pg_form" >
@@ -162,14 +169,13 @@ <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
         </div>
     </div>
 
+    <!-- message modal -->
     <div class="modal fade" id="messageModal" tabindex="-1" role="dialog" aria-labelledby="messageModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="messageModalTitle">Title</h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
+                    <a type="button" class="close material-icons" data-dismiss="modal">close</a>
                 </div>
                 <div class="modal-body">
                     <pre id="messageModalContent">Message</pre>
@@ -181,6 +187,49 @@ <h5 class="modal-title" id="messageModalTitle">Title</h5>
         </div>
     </div>
 
+    <!-- Shortcuts Modal -->
+    <div class="modal fade" id="shortcutsModal" tabindex="-1" role="dialog" aria-labelledby="shortcutsModalTitle" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="shortcutsModalTitle">Keyboard Shortcuts</h5>
+                    <a type="button" class="close material-icons" data-dismiss="modal">close</a>
+                </div>
+                <div class="modal-body">
+                    <div class="row">
+                        <!-- filled automatically from keyboard shortcuts array -->
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" id="shortcutsModalAffirmativeButton" data-bs-dismiss="modal"><span id="shortcutsModalAffirmativeAnswer">OK</span></button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- About Modal -->
+    <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="aboutModalTitle" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <img src="/static/src/icons/translate_green.png" class="rounded float-left" alt="Translator logo">
+                    <span>&nbsp;&nbsp;</span>
+                    <h5 class="modal-title" id="aboutModalTitle">About The Translator</h5>
+                    <a type="button" class="close material-icons" data-dismiss="modal">close</a>
+                </div>
+                <div class="modal-body">
+                    <h5>The Translator service for the DALiuGE system</h5>
+                    <div class="aboutDivider"></div>
+                    <a href="https://daliuge.readthedocs.io/en/latest/basics.html#translator-service%22%3EDALiuGE">Documentation</a>
+                    <div class="aboutDivider"></div>
+                    <span>License:</span>
+                    <div id="aboutLicense"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div class="alert alert-warning" id="warning-alert">
         <strong>Deploy Aborted </strong> This Deploy Method's Url Is Not Reachable 
     </div>

diff --git a/daliuge-translator/dlg/dropmake/web/src/main.css b/daliuge-translator/dlg/dropmake/web/src/main.css
@@ -707,6 +707,7 @@
 #settingsModal .modal-body{
   background-color:#001d3b;
   padding: 50px 16px;
+  overflow: unset;
 }
 
 #settingsModal #neccessaryHiddenItems, #settingsModal form{
@@ -778,6 +779,28 @@
   border:solid 1px white;
 }
 
+#aboutModal .modal-header img{
+  height: 30px;
+}
+
+#aboutModal .modal-header h5{
+  position: absolute;
+  left: 60px;
+}
+
+.modal-header a{
+  opacity: 100% !important;
+}
+
+#aboutModal .modal-body span{
+  font-weight: 600;
+}
+
+.aboutDivider{
+  display: block;
+  border-bottom: solid 1px black;
+}
+
 #oriantationDropdown .orientationOptionContainer a{
   display: inline-block;
   color: white;
@@ -806,4 +829,67 @@
   left: 50%;
   transform: translateX(-50%);
   display: none;
+}
+
+::-webkit-scrollbar-thumb {
+  margin-top: 4px;
+  background: rgb(212, 212, 212);
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+.modal-body {
+  background-color: aliceblue;
+  max-height: 70vh;
+  overflow-y: scroll;
+}
+
+
+.modal-header {
+  background-color: #002e5f;
+  color: white !important;
+}
+.modal-footer {
+  background-color: aliceblue;
+}
+.modal-footer .btn-primary {
+  background-color: #002e5f;
+  border-color: #002e5f;
+}
+
+#shortcutsModal .modal-dialog{
+  transform:none!important;
+}
+
+#shortcutsModal .modal-content{
+  width: 1000px;
+  position: absolute;
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+
+.shortCutsModalItem{
+  padding: 10px 20px;
+  background-color: rgb(216, 221, 240);
+  border: solid 1px #001225;
+  border-radius: 10px;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+.shortCutsModalItem span{
+  font-weight: 400;
+}
+
+.shortCutsModalItem .shortCutsModalItemRight{
+  font-weight: 700;
+  position: absolute;
+  right: 20px;
 }