Completed dark theme mode

web/SystemAO/file_system/file_explorer.css

@@ -26,6 +26,9 @@ body.whiteTheme {
     --navi_bgcolor: #fcfcfc;
     --navi_theme: #92cfe7;
     --navi_txt: rgb(114, 114, 114);
+
+    --dropdown_bg: white;
+    --dropdown_txt: black;
     
     --vroot_active_bg: #dadada;
     --dir_item_color: rgb(78, 78, 78);
@@ -54,6 +57,22 @@ body.whiteTheme {
     --address_text_border:#cfcfcf;
     --address_text_background: white;
 
+    --popup_bg: white;
+    --popup_border: rgb(226, 226, 226);
+    --popup_header_bg: #171719;
+    --popup_header_txt: white;
+    --popup_header_bottom: #34b7eb;
+    --popup_btn_border: #dedede;
+    --popup_btn_hover: rgba(238, 238, 238, 0.932);
+    --popup_btn_primary_bg: #51aded;
+    --popup_btn_primary_txt: white;
+    --popup_btn_primary_bg_hover: #76c0f5;
+    --popup_btn_negative_bg: #ed5151;
+    --popup_btn_negative_txt: white;
+    --popup_btn_negative_bg_hover: #f57676;
+
+    --modulelist_bg: white;
+
     --contextmenu_background: #ffffff;
     --contextmenu_hover: #f9f9f9;
     --contextmenu_textcolor: rgb(78, 78, 78);
@@ -77,10 +96,13 @@ body.darkTheme{
     --fileopr_btnTxt: rgb(255, 255, 255);
     --fileopr_oprtxt: rgb(241, 241, 241);
     --fileopr_btnhover: #353535;
-    --divider: #3b4751;
+    --divider: #465561;
     --navi_bgcolor: #27292d;
     --navi_theme: #6682c4;
     --navi_txt: rgb(241, 241, 241);
+
+    --dropdown_bg: #373a42;
+    --dropdown_txt: rgb(231, 231, 231);
     
     --vroot_active_bg: #95b5de;
     --dir_item_color: rgb(228, 228, 228);
@@ -100,7 +122,7 @@ body.darkTheme{
     --hex_folder_txt: #44d36a;
     --um_file_txt: #69aaff;
 
-    --folder_view_background: #373a42;
+    --folder_view_background: #3d3f47;
     --folder_view_share: #24cc29;
     --fileobject_background_hover: #5a5e6b;
     --fileobject_background_selected: #95b5de;
@@ -109,16 +131,33 @@ body.darkTheme{
     --address_text_border:#27292d;
     --address_text_background: rgb(0, 0, 0);
 
-    --contextmenu_background: #ffffff;
-    --contextmenu_hover: #f9f9f9;
-    --contextmenu_textcolor: rgb(78, 78, 78);
+    --popup_bg: black;
+    --popup_border: rgb(226, 226, 226);
+    --popup_header_bg: #171719;
+    --popup_header_txt: white;
+    --popup_header_bottom: #6682c4;
+    --popup_btn_border: #dedede;
+    --popup_btn_hover: rgb(53, 53, 53);
+    --popup_btn_primary_bg: #51aded;
+    --popup_btn_primary_txt: white;
+    --popup_btn_primary_bg_hover: #4391c9;
+    --popup_btn_negative_bg: #ed5151;
+    --popup_btn_negative_txt: white;
+    --popup_btn_negative_bg_hover: #f57676;
+
+    --modulelist_bg: transparent;
+    --modulelist_hover: rgba(240,240,240,0.3);
+
+    --contextmenu_background: #0e0e0e;
+    --contextmenu_hover: #292929;
+    --contextmenu_textcolor: rgb(233, 233, 233);
 
     --upload_progressbar: #92cfe7;
     --upload_progresstext: rgb(255, 255, 255);
     --upload_progress_succ: #8cd68f;
     --upload_progress_failed: #d68c8c;
 
-    --open_with_selected: #51aded;
+    --open_with_selected: #95b5de;
     --open_with_selected_text: white;
     --open_with_item_hover_background:rgba(35,35,35,0.14); 
 
@@ -134,12 +173,17 @@ body{
 
 
 
-h1, h2, h3, p, span, div, input { font-family: "Microsoft JhengHei","SimHei", "Apple LiGothic Medium", "STHeiti"}
+h1, h2, h3, p, span, div, input, .dropdown { font-family: "Microsoft JhengHei","SimHei", "Apple LiGothic Medium", "STHeiti"}
 html{
     height:100%;
     overflow:hidden;
 }
 
+/* force override of semantic button rule */
+body.darkTheme .ui.icon.button{
+    color: var(--text_color) !important;
+}
+
 /*
 
     Navigation Bar
@@ -227,6 +271,25 @@ html{
     border-right: 1px solid var(--divider);
 }
 
+.ui.selection.dropdown{
+    background-color: var(--dropdown_bg) !important;
+    color: var(--dropdown_txt) !important;
+}
+
+.ui.selection.dropdown .menu > .item{
+    border-top-color:var(--divider);
+    background-color: var(--dropdown_bg) !important;
+    color: var(--dropdown_txt) !important;
+}
+
+.ui.selection.active.dropdown .menu{
+    border: 1px solid var(--divider) !important;
+}
+
+.ui.selection.visible.dropdown > .text:not(.default){
+    color: var(--text_color_secondary) !important;
+}
+
 /*
     Address and search bar
 */
@@ -298,6 +361,11 @@ html{
     margin-top:0.4em;
     vertical-align: top;
     display: flex;
+    position: relative;
+}
+
+.addressBar .divider{
+    color: var(--text_color_secondary) !important;
 }
 
 #pathDisplayField{
@@ -620,6 +688,13 @@ html{
     padding: 1em;
     overflow-y: auto;
     scrollbar-width: thin;
+    color: var(--text_color);
+    border-left: 1px solid var(--divider);
+    background-color: var(--folder_view_background);
+}
+
+#propertiesView td, #propertiesView span, #propertiesView div{
+    color: var(--text_color);
 }
 
 /*
@@ -676,13 +751,21 @@ html{
 */
 
 .msgbox{
-    padding:3px;
+    position: absolute;
+    bottom: 0;
+    left: 3em;
+    width: 20em;
+    padding: 1.2em;
+    padding-right: 2em;
+    background-color: var(--navi_bgcolor);
+    border-top-right-radius: 0.4em;
+    border-top-left-radius: 0.4em;
+    border: 1px solid var(--divider);
 }
 .closeMsgButton{
     position:absolute;
     top:8px;
     right:12px;
-
 }
 .closeMsgButton{
     cursor:pointer;
@@ -708,17 +791,17 @@ html{
     -webkit-box-shadow:  3px 4px 5px 0px rgba(138,138,138,1);
     -moz-box-shadow:  3px 4px 5px 0px rgba(138,138,138,1);
     box-shadow:  3px 4px 5px 0px rgba(138,138,138,1);
-    border: 1px solid rgb(226, 226, 226);
-    background-color:white;
+    border: 1px solid var(--popup_border);
+    background-color:var(--popup_bg);
 }
 
 .popupheader{
     width:100%;
     padding:3px;
     padding-left:12px;
-    border-bottom:2px solid #34b7eb;
-    background-color: #171719;
-    color: white;
+    border-bottom:2px solid var(--popup_header_bottom);
+    background-color: var(--popup_header_bg);
+    color: var(--popup_header_txt);
     height:29px;
 }
 
@@ -740,22 +823,20 @@ html{
     padding:5px;
     padding-left:12px;
     margin-bottom:4px;
-    border: 1px solid #dedede;
+    border: 1px solid var(--popup_btn_border);
     border-radius: 4px;
 }
 
 .popupbuttons.primary{
-    background-color:#51aded;
-    box-shadow: 0 2px 1px 0px #34a2ee !important;
+    background-color:var(--popup_btn_primary_bg);
     border: 1px solid transparent;
-    color:white;
+    color:var(--popup_btn_primary_txt);
 }
 
 .popupbuttons.negative{
-    background-color:#ed5151;
-    box-shadow: 0 2px 1px 0px #ee3434 !important;
+    background-color:var(--popup_btn_negative_bg);
     border: 1px solid transparent;
-    color:white;
+    color:var(--popup_btn_negative_txt);
 }
 
 .popupbuttons.disabled{
@@ -785,15 +866,15 @@ html{
 }
 
 .allowHover:hover{
-    background-color:rgba(238, 238, 238, 0.932);
+    background-color:var(--popup_btn_hover);
 }
 
 .allowHover.primary:hover{
-    background-color:#76c0f5;
+    background-color:var(--popup_btn_primary_bg_hover);
 }
 
 .allowHover.negative:hover{
-    background-color:#f57676;
+    background-color:var(--popup_btn_negative_bg_hover);
 }
 
 .newFileFormat{
@@ -819,6 +900,13 @@ html{
 #openWithModuleList{
     height:50vh;
     overflow-y:auto;
+    background-color: var(--modulelist_bg);
+    border: 1px solid var(--divider);
+    border-radius: 0;
+}
+
+#openWithModuleList .ui.avatar.image, #openWithModuleList .ui.avatar.image img, #openWithModuleList .ui.avatar.image svg, #openWithModuleList .ui.avatar.images .image, #openWithModuleList .ui.avatar.images img, #openWithModuleList .ui.avatar.images svg{
+    border-radius: 0;
 }
 
 #openWithModuleList .item{
@@ -826,7 +914,11 @@ html{
     padding-left:22px;
     border-radius: 2px;
     display: flex;
-    flex-wrap: wrap;        
+    flex-wrap: wrap;
+}
+
+#openWithModuleList .item:hover{
+    background-color: var(--modulelist_hover) !important;
 }
 
 #openWithModuleList .item.selected{

web/SystemAO/file_system/file_explorer.html

@@ -116,9 +116,9 @@
                 <button class="navibarBtn" title="Search" onclick="handleSearch();"><i class="search icon"></i></button>
                 <button class="navibarBtn" title="Clear Search" onclick="hideSearchBar();"><i class="red remove icon"></i></button>
             </div>
-             <div class="msgbox" style="z-index:999; display:none;">
+            <div class="msgbox" style="z-index:999; display:none;">
                 <i class="checkmark icon"></i> <span>No Message</span>
-                <div class="closeMsgButton" onclick="$(this).parent().slideUp('fast');"><i class="remove icon"></i></div>
+                <div class="closeMsgButton" onclick="$(this).parent().stop().slideUp('fast');"><i class="caret down icon"></i></div>
             </div>
         </div>
        
@@ -152,12 +152,12 @@
                     <img class="ui fluid image" >
                 </div>
                 <h3 class="ui header" style="margin-top: 0.4em;">
-                    <span class="filename"></span>
-                    <div class="sub header vpath"></div>
+                    <span class="filename" style="word-break: break-all;" locale="sidebar/default/nofileselected">No File Selected</span>
+                    <div class="sub header vpath"  style="word-break: break-all;" locale="sidebar/default/instruction">Select a file to view file properties</div>
                 </h3>
                 <table class="ui very basic table">
                     <tbody class="propertiesTable">
-                      
+                        
                     </tbody>
                 </table>
                 <div style="height: 34px;">
@@ -912,9 +912,12 @@
 
                 //Add loading screen to the folderlists and fileList
                 $("#fileList").html("");
-                
+                let loaderClass = "inverted";
+                if (currentTheme == "darkTheme"){
+                    loaderClass = "";
+                }
                 $("#folderList").html(`<div style="height: 100px;">
-                    <div class="ui active inverted dimmer" style="z-index: 95;">
+                    <div class="ui active ${loaderClass} dimmer" style="z-index: 95;">
                         <div class="ui text loader">${applocale.getString("message/loading", "Loading")}</div>
                     </div>
                 </div>`);
@@ -1822,6 +1825,16 @@
                     $("#propertiesView").show();
                     $(object).addClass('active');
                     localStorage.setItem("file_explorer/viewProperties", "true");
+
+                    if ($(".fileObject.selected").length >= 1){
+                        //Load the file properties
+                        let targetFile = getFileObjectFromFID(lastClickedFileID);
+                        if (targetFile == null){
+                            targetFile = $(".fileObject.selected")[0];
+                        }
+                        let filepath = $(targetFile).attr("filepath");
+                        loadFileProperties(filepath);
+                    }
                 }else{
                     $("#propertiesView").hide();
                     $(object).removeClass('active');
@@ -2731,7 +2744,7 @@
                 }
 
                 let fullpath = domPathChunks.join(`<div class="divider">/</div>`);
-                let targetDisplayDOM = $("#pathDisplayField").find(".pathDisplay");
+                let targetDisplayDOM = $("#pathDisplayField");
                 if (isMobile){
                     targetDisplayDOM = $("#mobilePathDisplay");
                 }
@@ -3181,8 +3194,8 @@
                         $("#openWithModuleList").html("");
                         for (var i =0; i < data.length; i++){
                             var thisModule = data[i];
-                            var supportFW = `<div class="ui horizontal mini label"><i class="checkmark icon"></i>floatWindow Window</div>`;
-                            var supportEmb = `<div class="ui horizontal mini label"><i class="checkmark icon"></i>Embedded Window</div>`;
+                            var supportFW = `<div class="ui horizontal mini icon label"><i class="window restore outline icon"></i> ${applocale.getString("opr/openwith/floatWindow", "Floating Window")}</div>`;
+                            var supportEmb = `<div class="ui horizontal mini icon label"><i class="folder open icon"></i> ${applocale.getString("opr/openwith/embedded", "File Input")}</div>`;
                             if (!thisModule.SupportFW){
                                 supportFW = "";
                             }
@@ -3931,7 +3944,7 @@
                 if ($(".fileObject.selected").length > 1){
                     $(".fileObject.selected").removeClass("selected");
                 }
-                if (viewMode == "list"){
+                if (viewMode == "list" || viewMode == "details"){
                     //Select the next file
                     var nextObject = $(".fileObject").eq( $(".fileObject").index( $(baseObject) ) + 1 );
                     if (nextObject.length > 0){
@@ -3952,6 +3965,13 @@
                     nextObject.addClass("selected");
                     scrollToFileObject(nextObject);
                 }
+
+                if (propertiesView){
+                    let selectedFile = $(".fileObject.selected")[0];
+                    let filepath = $(selectedFile).attr('filepath');
+                    loadFileProperties(filepath);
+                }
+                
             }
 
             function selectPreviousFile(e){
@@ -3970,7 +3990,7 @@
                 if ($(".fileObject.selected").length > 1){
                     $(".fileObject.selected").removeClass("selected");
                 }
-                if (viewMode == "list"){
+                if (viewMode == "list" || viewMode == "details"){
                     //Select the previous file
                     if ($(".fileObject").index( $(baseObject) ) -1 < 0){
                         return;
@@ -3996,6 +4016,12 @@
                     prevObj.addClass("selected");
                     scrollToFileObject(prevObj);
                 }
+
+                if (propertiesView){
+                    let selectedFile = $(".fileObject.selected")[0];
+                    let filepath = $(selectedFile).attr('filepath');
+                    loadFileProperties(filepath);
+                }
             }
 
             function scrollToFileObject(fileObject){
@@ -4033,6 +4059,11 @@
                     $(baseObject).removeClass("selected");
                 }
 
+                if (propertiesView){
+                    let selectedFile = $(".fileObject.selected")[0];
+                    let filepath = $(selectedFile).attr('filepath');
+                    loadFileProperties(filepath);
+                }
             }
 
             function selectRightFile(e){
@@ -4058,6 +4089,11 @@
                     $(baseObject).removeClass("selected");
                 }
 
+                if (propertiesView){
+                    let selectedFile = $(".fileObject.selected")[0];
+                    let filepath = $(selectedFile).attr('filepath');
+                    loadFileProperties(filepath);
+                }
             }
 
             //Functions for getting file objects in the same collume
@@ -5218,20 +5254,19 @@
                             <td>
                                 ${applocale.getString("sidebar/properties/storepath", "Storage Path")}
                             </td>
-                            <td>
+                            <td style="word-break: break-all;">
                                 ${data.StoragePath}
                             </td>
                         </tr><tr>
                             <td>
                                 ${applocale.getString("sidebar/properties/vpath", "Virtualized Path")}
                             </td>
-                            <td>
+                            <td style="word-break: break-all;">
                                 ${data.VirtualPath}
                             </td>
                         </tr>`);
 
                     }
-                    console.log(data);
                 }
             })
         }

web/SystemAO/locale/file_explorer.json

@@ -66,6 +66,8 @@
                 "sidebar/properties/permission":"存取權限",
                 "sidebar/properties/storepath":"儲存位置",
                 "sidebar/properties/vpath":"虛擬化位置",
+                "sidebar/default/nofileselected": "沒有已選擇之檔案",
+                "sidebar/default/instruction": "在檔案列表內選擇一個檔案以瀏覽詳細資料",
                 
 
                 "sidebar/vroot/user": "使用者",
@@ -144,6 +146,8 @@
                 "opr/openwith/openWithWebAppInNewWindow": "使用所選的 WebApp 在新視窗開啟",
                 "opr/openwith/openInNewWindow": "直接於新視窗開啟檔案",
                 "opr/openwith/cancel": "取消",
+                "opr/openwith/floatWindow":"浮動視窗",
+                "opr/openwith/embedded":"檔案輸入",
 
                 "opr/shorcut/title": "在桌面建立捷徑",
                 "opr/shorcut/ok": "捷徑建立成功",
@@ -223,6 +227,8 @@
                 "message/Folder not exists":"找不到資料夾",
                 "message/Failed to move file to trash":"無法移動到資源回收箱",
                 "message/Incompatible File System Type: Try SHIFT + DELETE to delete file permanently":"檔案系統不支援檔案回收：請使用 SHIFT + DELETE 以永久移除檔案",
+                "message/Recursive copy operation.":"遞歸複製操作",
+                "message/Source and destination paths are identical.":"目的地與來源路徑相同",
 
                 "message/noMatchResults":"找不到匹配的檔案",
                 "message/noMatchResultsDesc":"伺服器找不到與此關鍵字匹配的檔案",