Implimented a new menu part to clean ui.

README.md

@@ -19,7 +19,7 @@ Notes:
 
 # TO-DO
 1. Allow for move and copy.
-3. Fix the ' and & naming issue.
+3. Fixed the ' issue but & remains a problem.
 4. Implement themes functionality.
 
 

index.html

@@ -11,35 +11,6 @@
     <!-- Background -->
     <img id="bg" />
 
-    <!-- Uploader -->
-    <h2 id="fullPathHeader">
-        <form action="resources/php/filesystemActions.php" method="post" enctype="multipart/form-data" target="FormSubmitter">
-            <input class="ulFile" type="file" title="files To Upload" name="filesToUpload[]" data-multiple-caption="{count} files selected" multiple />
-            <input type="submit" name="UploadFiles" title="Upload File(s)" value="Upload File(s)" />
-            <input type="reset" title="Clear" id="CLEARBTTN" value="Clear" style="display:none;">
-            <input type="text" id="DIRPATHUL" name="DIRPATHUL" value="">
-        </form>
-        <br/>
-            <input type="text" id="NewItem" value="" />
-            <input type="button" value="New Dir" onclick="createItem('dir')">
-            <input type="button" value="New File" onclick="createItem('file')">
-        <br/>
-        <label target="MergeType"> <input id="MergeType" type="checkbox">Merge Seasson Folders.</label>
-        <button type="button" name="button" onclick="getDir('./')">Refresh</button>
-        <button type="button" name="button" onclick="getDir('../')">../</button>
-        &nbsp;&nbsp;&nbsp;&nbsp;Path:&nbsp;&nbsp;<span id="path"></span>
-    </h2>
-
-    <!-- Dynamic content targets -->
-    <div id="dynDiv"></div>
-    <div id="imgView" style="display:none;"></div>
-    <div id="fileView" style="display:none;"></div>
-
-    <!-- Uploader processor -->
-    <div id="toggleServerMsg" style="display:none;">
-        <iframe id="FormSubmitter" name="FormSubmitter" frameborder="0" ></iframe>
-    </div>
-
     <!-- Create the menu -->
     <menu type="context" id="menu">
         <menuitem label="Home Directory" onclick="clearDirCookie()"></menuitem>
@@ -48,6 +19,45 @@
         <menuitem label="Delete File/Directory" onclick="deleteItem()"></menuitem>
     </menu>
 
+    <!-- Uploader -->
+    <h2 id="fullPathHeader">
+        <button type="button" title="Other Options" name="button" onclick="showOptions()">&#9881;</button>
+        <button type="button" title="Refresh" name="button" onclick="getDir('./')">&#8635;</button>
+        <button type="button" title="Back" name="button" onclick="getDir('../')">&lArr;</button>
+        &nbsp;&nbsp;&nbsp;&nbsp;Path:&nbsp;&nbsp;<span id="path"></span>
+    </h2>
+
+    <!-- Dynamic content targets -->
+    <div id="dynDiv"></div>
+    <div id="imgView" style="display:none;"></div>
+    <div id="fileView" style="display:none;"></div>
+
+
+    <div id="popOutControls" style="display:none;">
+        <center>
+        <form action="resources/php/filesystemActions.php" method="post" enctype="multipart/form-data" target="FormSubmitter">
+            <input class="ulFile" type="file" title="files To Upload" name="filesToUpload[]" data-multiple-caption="{count} files selected" multiple />
+            <input type="submit" name="UploadFiles" title="Upload File(s)" value="Upload File(s)" />
+            <input type="reset" title="Clear" id="CLEARBTTN" value="Clear" style="display:none;">
+            <input type="text" id="DIRPATHUL" name="DIRPATHUL" value="">
+        </form>
+        <br/>
+            <input type="text" id="NewItem" value=""/>
+            <input type="button" value="New Dir" onclick="createItem('dir')"/>
+            <input type="button" value="New File" onclick="createItem('file')"/>
+            <input type="button" value="Show Server Messages" onclick="tgglServerMsgView()"/>
+        <br/>
+        <label target="MergeType" onclick="getDir('./')">
+            <input id="MergeType" type="checkbox">Show seassons in same list.
+        </label>
+    </center>
+    </div>
+
+
+    <!-- Uploader processor -->
+    <div id="toggleServerMsg" style="display:none;">
+        <iframe id="FormSubmitter" name="FormSubmitter" frameborder="0" ></iframe>
+    </div>
 
     <script type="text/javascript" src="resources/js/cookieHandler.js" charset="utf-8"></script>
     <script type="text/javascript" src="resources/js/xmlParser.js" charset="utf-8"></script>

resources/css/main.css

@@ -45,7 +45,7 @@
 }
 
 #dynDiv {
-    margin-top: 8em;
+    margin-top: 5em;
 }
 
 #imgView, #imgArea, #fileView {
@@ -88,6 +88,17 @@
     text-align: center;
 }
 
+#popOutControls {
+    position: absolute;
+    top: 15%;
+    width: 99%;
+    height: 15em;
+    padding-top: 6em;
+    background-color: rgba(103, 103, 103, 1);
+    color: #ffffff;
+    text-align: center;
+}
+
 /* Classes */
 .imgViewImg {
     width: inherit;
@@ -178,6 +189,7 @@
     border-color: #000000;
 }
 
+/* Messages coloring */
 .error, .warnning, .success {
     float: left;
     clear: both;

resources/js/uiActions.js

@@ -1,5 +1,23 @@
 var formerFileName = "";
 
+function showOptions() {
+    var popOutControls = document.getElementById("popOutControls");
+    if (popOutControls.style.display == "none") {
+        popOutControls.style.display = "block";
+    } else {
+        popOutControls.style.display = "none";
+    }
+}
+
+function tgglServerMsgView() {
+    var serverMsgView = document.getElementById("toggleServerMsg");
+    if (serverMsgView.style.display == "none") {
+        serverMsgView.style.display = "block";
+    } else {
+        serverMsgView.style.display = "none";
+    }
+}
+
 function enableEdit(obj) {
     obj.style.backgroundColor   = "#ffffffff";
     obj.style.color             = '#000000ff';
@@ -68,15 +86,6 @@ function clearDirCookie() {
     getDir("/");
 }
 
-function tgglServerMsgView() {
-    var serverMsgView = document.getElementById("toggleServerMsg");
-    if (serverMsgView.style.display == "none") {
-        serverMsgView.style.display = "block";
-    } else {
-        serverMsgView.style.display = "none";
-    }
-}
-
 function clearDlList() {
     document.getElementById("CLEARBTTN").click();
 }