diff options
| author | Roland Stigge <stigge@antcom.de> | 2018-01-07 22:00:50 +0100 |
|---|---|---|
| committer | Roland Stigge <stigge@antcom.de> | 2018-01-07 22:00:50 +0100 |
| commit | ab42bc98c5b84d36ae4d8e77ea59128781120b86 (patch) | |
| tree | 896188db8dedb0c2cb88aaf11c94143a1591bcdc /html | |
| parent | ae248732206b6b04dd476cef03f08c427c333b14 (diff) | |
Separate menu, don't select ".."
Diffstat (limited to 'html')
| -rw-r--r-- | html/index.html | 31 | ||||
| -rw-r--r-- | html/webbox.css | 39 | ||||
| -rw-r--r-- | html/webbox.js | 27 |
3 files changed, 83 insertions, 14 deletions
diff --git a/html/index.html b/html/index.html index 49dafef..db60e7a 100644 --- a/html/index.html +++ b/html/index.html @@ -8,19 +8,17 @@ </head> <body onload="initMainpage();"> <div> - <h1 class="title"> </h1> + <table> + <tr> + <td class="title"> </td> + <td class="menusymbol" onclick="showMenu();"><img src="menu.png"/></td> + </tr> + </table> <input id="uploadfile" type="file" onchange="onUploadFile();" hidden/> <table class="menu"> <tr> <td class="firsttd"></td> - <td class="entry" onclick="createDir();">New folder</td> - <td class="entry" onclick="download();">Download</td> - <td class="entry" onclick="upload();">Upload</td> - <td class="entry" onclick="deleteItems();">Delete</td> - <td class="entry" onclick="move();">Move</td> - <td class="entry" onclick="info();">Info</td> - <td class="entry" onclick="selectAll();">Select All</td> - <td class="entry" onclick="refresh();">Refresh</td> + <td class="entry" onclick="refresh();"><img src="refresh-inverted.png"/></td> </tr> </table> </div> @@ -40,6 +38,18 @@ <button class="button rightbutton" id="okbutton">OK</button> </div> + <div class="menuwindow" id="menuwindow" hidden> + <table class="menudialog"> + <tr><td class="entry" onclick="hideMenu(); createDir();">New Folder</td></tr> + <tr><td class="entry" onclick="hideMenu(); download();">Download</td></tr> + <tr><td class="entry" onclick="hideMenu(); upload();">Upload</td></tr> + <tr><td class="entry" onclick="hideMenu(); deleteItems();">Delete</td></tr> + <tr><td class="entry" onclick="hideMenu(); move();">Move</td></tr> + <tr><td class="entry" onclick="hideMenu(); info();">Info</td></tr> + <tr><td class="entry" onclick="hideMenu(); selectAll();">Select/Unselect All</td></tr> + </table> + </div> + <div id="create-dir-dialog" hidden> New folder:<br> <input type="text" id="newdir" class="textinput"></input> @@ -58,10 +68,11 @@ <div id="movefiles"></div> </div> - <a download="webbox-download.zip" id="download-a" hidden/> + <a download="webbox-download.zip" id="download-a" hidden></a> <div class="footer"> </div> + </body> </html> diff --git a/html/webbox.css b/html/webbox.css index 39551e0..46f46ec 100644 --- a/html/webbox.css +++ b/html/webbox.css @@ -4,6 +4,7 @@ div, td, h1 { .title { font-size: 16pt; + width: 100%; } .greyout { @@ -37,6 +38,27 @@ div, td, h1 { bottom: 20px; } +.menuwindow { + position: fixed; + top: 50%; + left: 50%; + width: 400px; + height: 400px; + margin-top: -200px; + margin-left: -200px; + background-color: #FFFFFF; + opacity: 1; + z-index: 10; + border-width: 3px; + border-style: solid; + border-color: #808080; + padding: 10pt; +} + +.menusymbol { + cursor: pointer; +} + .dialogwindow { position: fixed; top: 50%; @@ -54,8 +76,21 @@ div, td, h1 { padding: 10pt; } +table.menudialog { + width: 100%; +} + +table.menudialog td.entry { + cursor: pointer; + width: 100%; + border-width: 0; + border-bottom-width: 1px; + border-style: solid; + border-color: #808080; + padding: 10px; +} + .dialog { - /*width: 100%;*/ } .textinput { @@ -78,7 +113,6 @@ div.footer { } table.menu { - width: 100%; border: 0; /* 1px solid #000000; */ border-collapse: collapse; margin: 0; @@ -102,7 +136,6 @@ table.menu td.firsttd { } table.menu td.entry { - width: 60px; border: 0; /* 1px solid #000000; */ color: #FFFFFF; background-color: #404070; diff --git a/html/webbox.js b/html/webbox.js index 58b04fb..52e8563 100644 --- a/html/webbox.js +++ b/html/webbox.js @@ -22,6 +22,13 @@ function loadContents(dir) { } else { for (var i = 0; i < listElements.length; i++) { var type = listElements[i].getAttribute("type"); + if (type == "file") { + type = "<img src=\"file.png\"/>"; + } else if (type == "dir") { + type = "<img src=\"directory.png\"/>"; + } else { + type = ""; + } result += "<tr " + "onmousedown=\"entryMouseDown('" + listElements[i].childNodes[0].nodeValue + "')\" " + @@ -123,6 +130,10 @@ function clearSelection(filename) { } function setSelection(filename) { + if (filename == "..") { // don't select ".." + return; + } + var row = getRow(filename); if (!row.classList.contains("selectedrow")) { @@ -132,6 +143,10 @@ function setSelection(filename) { } function toggleSelection(filename) { + if (filename == "..") { // don't select ".." + return; + } + var row = getRow(filename); if (row.classList.contains("selectedrow")) { @@ -207,6 +222,16 @@ function hideDialog() { document.getElementById("dialogwindow").style.display = 'none'; } +function showMenu() { + document.getElementById("greyout").style.display = 'block'; + document.getElementById("menuwindow").style.display = 'block'; +} + +function hideMenu() { + document.getElementById("greyout").style.display = 'none'; + document.getElementById("menuwindow").style.display = 'none'; +} + function initMainpage() { setCurrentDir("/"); @@ -525,7 +550,7 @@ function selectAll() { var allSelected = true; for (var i = 0; i < files.length; i++) { - if (getSelection(files[i]) == false) { + if (getSelection(files[i]) == false && files[i] != "..") { allSelected = false; } } |