Migrated desktop away from TocasUI

web/desktop.system

@@ -4,11 +4,12 @@
     <title>ArozOS Desktop</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./script/tocas/tocas.css">
+    <link rel="stylesheet" href="./script/semantic/semantic.min.css">
     <link id="fwcss" rel="stylesheet" href="./script/ao.css">
+    <link rel="stylesheet" href="./script/contextmenu.css">
     <link rel="stylesheet" href="./SystemAO/desktop/script/jsCalendar/source/jsCalendar.css">
-    <script type="text/javascript" src="./script/tocas/tocas.js"></script>
     <script type="text/javascript" src="./script/jquery.min.js"></script>
+    <script type="text/javascript" src="./script/semantic/semantic.min.js"></script>
     <script type="text/javascript" src="./script/ao_module.js"></script>
     <script type="text/javascript" src="./SystemAO/desktop/script/jsCalendar/source/jsCalendar.js"></script>
     <script type="text/javascript" src="./script/applocale.js"></script>
@@ -23,7 +24,17 @@
             width: 100%;
             height: 100%;
             overflow: hidden;
+            line-height: 1.4385em;
+            color: #5a5a5a;
         }
+
+        * {
+            position: relative;
+            font-family: "SF Pro TC","SF Pro Text","SF Pro Icons","PingFang TC","Helvetica Neue","Helvetica","Arial","Microsoft JhengHei",wf_SegoeUI,"Segoe UI",Segoe,"Segoe WP",Tahoma,Verdana,Ubuntu,"Bitstream Vera Sans","DejaVu Sans",Tahoma,微軟正黑體,"LiHei Pro","WenQuanYi Micro Hei","Droid Sans Fallback","AR PL UMing TW",Roboto,"Helvetica Neue","Hiragino Maru Gothic ProN",メイリオ,"ヒラギノ丸ゴ ProN W4",Meiryo,"Droid Sans",sans-serif;
+            box-sizing: border-box;
+            letter-spacing: -.02em;
+        }
+
         
         .backgroundFrame {
             height: 100%;
@@ -93,9 +104,12 @@
         }
         
         .launchIconWrapper {
-            height: 100%;
-            width: 100%;
+            padding-bottom: 0.6em;
+            max-height: calc(100% - 4px);
+            width: calc(100% - 4px);
+            margin: 2px;
             border-radius: 3px;
+            position: absolute;
         }
         
         .launchIconWrapper.selected {
@@ -339,12 +353,17 @@
         
         #listMenu .listItemWrapper {
             overflow: hidden;
+            height: 462px;
         }
         
+        .listItemWrapper .groups{
+            position: relative;
+        }
+
         #listMenu .listItemWrapper .groups {
             background-color: #f5f5f5;
             width: 120px;
-            height: 457px;
+            height: 100%;
             display: inline-block;
             overflow-y: auto;
             padding-top: 8px;
@@ -375,7 +394,7 @@
         }
         
         #listMenu .listItemWrapper .items {
-            height: 457px;
+            height: 100%;
             width: calc(100% - 120px - 5px);
             display: inline-block;
             overflow-y: auto;
@@ -455,8 +474,17 @@
         .renameInput {
             background-color: white;
             border: 1px solid black;
-            width: 100%;
+            width: calc(100% - 4px);
+            margin-left: 4px;
             position: absolute;
+            resize: none;
+
+            outline: none;
+            border: 1px solid #0c0c0f;
+            -webkit-box-shadow: none;
+            -moz-box-shadow: none;
+            box-shadow: none;
+
         }
         
         .renameInput.big {
@@ -483,25 +511,30 @@
         }
 
         #statusbar{
-            position:absolute;
             z-index:0;
             width:100%;
             height:28px;
+            position: absolute;
             background-color: rgba(0,0,0,0.9);
             color:white;
             backdrop-filter: blur(4px);
             text-align:center;
-            display: table;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .clock{
+            text-align: center;
+            cursor:pointer; 
+            user-select: none;
         }
 
         .statusbarpadding{
-            padding:4px;
+            padding-top: 0.2em;
         }
 
         .hostname{
-            display: table-cell; 
             text-align:left; 
-            width:100px; 
             pointer-events:none;
             padding-left:18px;
             white-space: nowrap;
@@ -509,10 +542,13 @@
         }
 
         .quicktools{
-            display: table-cell; 
-            text-align:right; 
-            width:45px;
-            
+            padding-left: 0.7em;
+            text-align:center; 
+            height: 100%;
+        }
+
+        .quicktools:hover{
+            background-color: rgba(240,240,240,0.2);
         }
 
         .qtwrapper{
@@ -521,20 +557,17 @@
             cursor:pointer;
         }
 
-        .qtwrapper:hover{
-            background-color: rgba(240,240,240,0.2);
-            
-        }
-
         .notificationbar{
-            position: absolute;
+            position: fixed;
             top:28px;
+            left: 0;
             width:100%;
             height: calc(100% - 28px);
             z-index:1114;
         }
 
         .notificationbar .content{
+            position: relative;
             background-color:white;
             margin-top:6px;
             margin-left: auto;
@@ -542,19 +575,31 @@
             width:30%;
             min-width:650px;
             height:400px;
-            z-index:1115;
             padding: 3px;
             border-radius: 5px;
+            pointer-events: auto;
+        }
+
+        .notificationbar #notificationlist{
+            position: relative;
+            width: calc(100% - 302px); 
+            padding:8px; 
+            margin-top:5px; 
+            padding-top:22px; 
+            overflow-y:auto; 
+            overflow-x:hidden; 
+            height: calc(100% - 12px);
         }
 
         .notificationbar .cover{
             backdrop-filter: blur(2px);
             -webkit-backdrop-filter: blur(2px);
-            position:absolute;
-            top:0px;
-            left:0px;
+            position:fixed;
+            top:28px;
+            left:0;
             width:100%;
             height: calc(100%);
+            pointer-events: auto;
         }
 
         @supports not (backdrop-filter: blur(2px)) {
@@ -613,6 +658,7 @@
         }
 
         .notification.object{
+            position: relative;
             padding-left:7px;
             border-left: 3px solid transparent;
             cursor:pointer;
@@ -726,6 +772,10 @@
             opacity: 0.5;
         }
 
+        .iframewrapper iframe{
+            border: 0px;
+        }
+
          /* Offline blinking warning css */
          @-moz-keyframes blink {
                 0% {
@@ -797,6 +847,9 @@
                 padding:2px;
                 word-wrap: break-word;
             }
+    
+
+            
 
 
 
@@ -836,41 +889,41 @@
         align="center" draggable="false">
     </div>
     <!-- Top Status Bar -->
-    <div id="statusbar" align="center">
+    <div id="statusbar">
         <div class="hostname statusbarpadding">
             Welcome
         </div>
-        <div class="clock statusbarpadding" style="display: table-cell; cursor:pointer; user-select: none;" onclick="toggleNotification();" ontouchstart="toggleNotification();">
+        <div class="clock statusbarpadding" onclick="toggleNotification();" ontouchstart="toggleNotification();">
             ArozOS Desktop
         </div>
-        <div class="quicktools" onclick="showToolPanel();" ontouchend="showToolPanel();">
+        <div class="quicktools statusbarpadding" onclick="showToolPanel();" ontouchend="showToolPanel();">
             <div class="qtwrapper">
                 <i class="content icon"></i>
             </div>
         </div>
     </div>
     <!-- Calendar and Notification -->
-    <div class="notificationbar" style="display:none;">
+    <div class="notificationbar" style="display:none;">        
+        <div class="cover" onclick='toggleNotification("hide");' ontouchstart='toggleNotification("hide");'></div>
         <div class="content">
-            <div id="notificationlist" style="width: calc(100% - 302px); padding:8px; margin-top:5px; padding-top:22px; overflow-y:auto; overflow-x:hidden; height: calc(100% - 12px);">
+            <div id="notificationlist">
                 <div class="nonotification">
-                    <h4 class="ts center aligned icon header">
+                    <h4 class="ui center aligned icon header">
                         <i class="bell icon"></i><span locale="notification/nonotification">No Notification</span>
                     </h4>
                 </div>
                 <a class="clearall" onclick="clearAllNotification();" locale="notification/clear">Clear All</a>
             </div>
             <div style="position:absolute; right:3px; top:3px; padding-top:8px;">
-                <div class="ts header" style="padding-left:22px;">
+                <div class="ui header" style="padding-left:22px;">
                     <div id="dayofweek" class="sub header"></div>
                     <span id="largedate" style="font-size:120%;"></span>
                 </div>
                 <div class="auto-jsCalendar blue"></div>
             </div>
         </div>
-        <div class="cover" onclick='toggleNotification("hide");' ontouchstart='toggleNotification("hide");'>
 
-        </div>
+       
     </div>
     <!-- Desktop icons-->
     <div id="iconwrapper">
@@ -901,12 +954,12 @@
     <!-- List menu -->
     <div id="listMenu" class="" style="display:none;">
         <div class="searchBar" onkeydown="searchModule(event);">
-            <div class="ts icon fluid input" style="border-radius: 0px !important;">
-                <input id="searchBar" type="text" placeholder="Search">
+            <div class="ui icon fluid input" style="border-radius: 0px !important;">
+                <input id="searchBar" type="text" placeholder="Search" style="border-radius: 0px !important; border: 0px solid transparent;">
                 <i class="search icon"></i>
             </div>
         </div>
-        <dib class="listItemWrapper">
+        <div class="listItemWrapper">
             <div class="groups">
                 <div locale="listmenu/catergory/searchResults" id="searchResults" class="item" style="display:none;">Search Results</div>
                 <div locale="listmenu/catergory/all" class="item groupType selected" group="All">All</div>
@@ -926,40 +979,38 @@
             <div id="listMenuItem" class="items">
 
             </div>
-        </dib>
+        </div>
 
     </div>
 
-    <div id="contextmenu" class="ts tiny contextmenu visible" style="display:none;">
+    <div id="contextmenu" class="aroz contextmenu" style="display:none;">
 
     </div>
 
-    <div id="subcontextmenu" class="ts tiny contextmenu visible" style="display:none;">
+    <div id="subcontextmenu" class="aroz contextmenu" style="display:none;">
 
     </div>
 
     <!-- Disconnected. Reconnecting interface -->
     <div id="connectionLost">
-        <div class="ts inverted card themeColor" style="width: 300px; background-color: rgba(14,14,14,0.5);">
+        <div class="ui inverted card themeColor" style="width: 300px; background-color: rgba(14,14,14,0.5);">
             <div class="content">
-                <div class="header"><img class="ts mini image blink-image" style="vertical-align:bottom; padding-right: 0.5em;" src="SystemAO/desktop/icons/connlost.svg"><span locale="error/connlost/title">Connection Lost</span></div>
+                <div class="header"><img class="ui mini image blink-image" style="vertical-align:bottom; padding-right: 0.5em;" src="SystemAO/desktop/icons/connlost.svg"><span locale="error/connlost/title">Connection Lost</span></div>
                 <div class="description" locale="error/connlost">
                     Connection to server is lost. Please wait until this warning disappear before further operations.
                 </div>
             </div>
-            <div class="ts fluid bottom attached buttons">
-                <button locale="error/connlost/recheck" class="ts opinion button" onclick="handleManualCheckReconnect(this);">Check Again</button>
-                <button locale="error/connlost/wait" class="ts secondary opinion button">Wait</button>
+            <div class="ui fluid bottom attached buttons">
+                <button locale="error/connlost/recheck" class="ui opinion button" onclick="handleManualCheckReconnect(this);">Check Again</button>
+                <button locale="error/connlost/wait" class="ui secondary opinion button">Wait</button>
             </div>
         </div>
-        
-        
     </div>
 
     <div id="quickAccessPanel" class="" style="display:none;">
-        <div class="ts small single line items">
+        <div class="ui small single line items">
             <div class="item">
-                <div class="ts mini image">
+                <div class="ui mini image">
                     <img class="usericon" src="img/desktop/system_icon/user.svg">
                 </div>
                 <div class="content">
@@ -969,7 +1020,7 @@
                     </div>
                 </div>
                 <div class="actions">
-                    <div class="ts button" onclick="logout(); hideToolPanel();">
+                    <div class="ui button" onclick="logout(); hideToolPanel();">
                         <i class="log out icon"></i> <span locale="quickAccess/logout">Logout</span>
                     </div>
                 </div>
@@ -977,14 +1028,14 @@
         </div>
         <div class="item" style="padding-bottom:12px;">
             <i class="volume up icon"></i> <span locale="quickAccess/sysvol">System Global Volume</span>
-            <div class="ts fluid small progress" style="margin-top:8px; cursor:pointer;" onclick="updateVolume(this,event);" >
-                <div id="volumebar" class="bar" style="width: 0%; background-color:#52C9FF;  cursor:pointer;"></div>
+            <div class="ui fluid small progress" style="margin-top:8px; margin-bottom:8px; cursor:pointer;" onclick="updateVolume(this,event);" >
+                <div id="volumebar" class="bar" style="width: 0%; min-width: 0px; background-color:#52C9FF;  cursor:pointer;"></div>
             </div>
         </div>
         <div class="item" style="padding-bottom:12px;">
             <i class="lightbulb icon"></i> <span locale="quickAccess/brightness">Brightness</span>
-            <div class="ts fluid small progress" style="margin-top:8px; cursor:pointer;" onclick="updateBrightness(this,event);" >
-                <div id="brightnessbar" class="bar" style="width: 100%; background-color:#52C9FF;  cursor:pointer;"></div>
+            <div class="ui fluid small progress" style="margin-top:8px; margin-bottom:8px; cursor:pointer;" onclick="updateBrightness(this,event);" >
+                <div id="brightnessbar" class="bar" style="width: 100%; min-width: 0px; background-color:#52C9FF;  cursor:pointer;"></div>
             </div>
         </div>
         <div class="item" id="settingButton" onclick="showSystemSettings(); hideToolPanel();" ontouchend="showSystemSettings(); hideToolPanel();">
@@ -992,9 +1043,9 @@
             <!-- <div style="float:right;"><i class="caret right icon"></i></div> -->
         </div>
         <div class="item" onclick="fullscreen(); hideToolPanel();" ontouchend="fullscreen(); hideToolPanel();">
-            <i class="maximize icon"></i> <span locale="quickAccess/fullscreen">Toggle Fullscreen</span>
+            <i class="expand icon"></i> <span locale="quickAccess/fullscreen">Toggle Fullscreen</span>
         </div>
-        <div class="ts divider"></div>
+        <div class="ui divider"></div>
         <div class="item hardware" onclick="restart(); hideToolPanel();" ontouchend="restart(); hideToolPanel();">
             <i class="repeat icon"></i> <span locale="quickAccess/restart">Restart</span>
         </div>
@@ -1248,7 +1299,7 @@
                         $(".hardware").hide();
                     }else{
                         //User is admin. Add admin icon
-                        $("#username").append(`<i style="color: #${desktopThemeColor}" class="protect icon themed text"></i>`);
+                        $("#username").append(`<i style="margin-left: 0.4em; color: #${desktopThemeColor}" class="small shield alternate icon themed text"></i>`);
                     }
                 }
             });
@@ -4728,7 +4779,7 @@
                     addContextMenuItem($("#contextmenu"), lcontex('Personalization'), "<i class='paint brush icon'></i>", "personalization", false);
                     addContextMenuItem($("#contextmenu"), lcontex('Background'), "<i class='caret right icon'></i>", "background", true);
                     addContextMenuItem($("#contextmenu"), lcontex('Icon Size'), "<i class='caret right icon'></i>", "listIconsize", true);
-                    addContextMenuItem($("#contextmenu"), lcontex('Toggle FullScreen'), "<i class='maximize icon'></i>", "fullscreen", false);
+                    addContextMenuItem($("#contextmenu"), lcontex('Toggle FullScreen'), "<i class='expand  icon'></i>", "fullscreen", false);
                     addContextMenuItem($("#contextmenu"), lcontex('Exit'), undefined, "logout", false);
                     showMenu = true;
                 }else if (clickTarget.hasClass("fwdragger") || (clickTarget.hasClass("title") && clickTarget.parent().hasClass("fwdragger"))){
@@ -5295,7 +5346,7 @@
         }
 
         function addContextMenuSeperator(target) {
-            $(target).append(`<div class="divider"></div>`);
+            $(target).append(`<div class="ui divider"></div>`);
         }
 
         function addContextMenuTitle(target, title){
@@ -5434,8 +5485,12 @@
 
                 //Update the folder to textarea content
                 $(".renameInput").each(function() {
-                    if ($(this).text() == "") {
+                    if ($(this).val() == "") {
                         //Ignore this update
+                        refresh(function() {
+                            //Refresh the desktop
+                        });                   
+                        return;
                     } else {
                         var filedata = JSON.parse(decodeURIComponent($(this).parent().attr("filedata")));
                         var filepath = filedata.Filepath;
@@ -5964,7 +6019,7 @@
             windowOpenOption (optional) -> The window opening option for user onclick redirection
         */
 
-        function sendNotification(title, content, icon="notice circle", windowOpenOption=null){
+        function sendNotification(title, content, icon="info circle", windowOpenOption=null){
             if (content.length > 100){
                 shortenContent = content.substring(0,100) + "...";
             }else{
@@ -5975,7 +6030,7 @@
                     <p class="title"><i class="${icon} icon"></i> ${title}</p>
                     <p class="notifycontent">${shortenContent}</p>
                     <div class="closebtn" onclick="event.stopImmediatePropagation(); closeThisNotification(this);"><i class="remove icon"></i></div>
-                    <div class="ts divider"></div>
+                    <div class="ui divider"></div>
                 </div>`);
             $(".nonotification").hide();
             
@@ -6107,7 +6162,7 @@
                 <span class="launchIconWrapper">
                     <img class="launchIconImage medium" src="img/desktop/files_icon/${desktopIconPack}/file upload.png" draggable="false">
                     <p class="launchIconText ${desktopIconSize}" >${applocale.getString( "upload/message/uploading", "Uploading")}</p>
-                    <div class="ts tiny primary progress" style="margin-top: -4px;">
+                    <div class="ui tiny primary progress" style="margin-top: -4px;">
                         <div class="bar" style="min-width: 0px !important; width: 0%;"></div>
                     </div>
                 </span>

web/script/contextmenu.css

@@ -0,0 +1,134 @@
+/*
+    Context Menu Plugin
+
+    Design for Semantic UI and use with .ui.contextmenu
+    Example Usage: 
+
+    <div id="contextmenu" class="aroz contextmenu" style="font-family: &quot;Microsoft JhengHei&quot;, &quot;SimHei&quot;, &quot;Apple LiGothic Medium&quot;, &quot;STHeiti&quot;; left: 497px; top: 248px;"><div class="item submenu" onclick="newitemmenu(this,event);" payload="">
+            New Item
+            <span class="description">
+                <i class="caret right icon"></i>
+            </span>
+        </div>
+        <div class="item" onclick="" payload="">
+            Refresh
+            <span class="description">
+                <i class="refresh icon"></i>
+            </span>
+        </div>
+        <div class="item" onclick="" payload="">
+            Open File Manager
+        </div>
+        <div class="item" onclick="" payload="">
+            Personalization
+            <span class="description">
+                <i class="paint brush icon"></i>
+            </span>
+        </div>
+        <div class="item submenu" onclick="" payload="">
+            Wallpaper
+            <span class="description">
+                <i class="caret right icon"></i>
+            </span>
+        </div>
+        <div class="item submenu" onclick="" payload="">
+            Icon Size
+            <span class="description">
+                <i class="caret right icon"></i>
+            </span>
+        </div>
+        <div class="item" onclick="" payload="">
+            Full Screen
+            <span class="description">
+                <i class="maximize icon"></i>
+            </span>
+        </div>
+        <div class="item" onclick="" payload="">
+            Logout
+        </div>
+    </div>
+*/
+
+.aroz.contextmenu{
+    position: fixed;
+    box-sizing: border-box;
+    letter-spacing: -.02em;
+    z-index: 3000;
+}
+
+.aroz.contextmenu .item{
+    padding: 0.6em 1em !important;
+}
+
+.aroz.contextmenu.visible, .ui.contextmenu.hidden.animating {
+    display: block;
+}
+
+.aroz.contextmenu .divider{
+    margin-top: 0;
+    margin-bottom: 0;    
+}
+
+.aroz.contextmenu{
+    cursor: auto;
+    outline: none;
+    min-width: 150px;
+    transform: translateZ(0px);
+    margin: 0em;
+    padding: 0em 0em;
+    background: #fff;
+    font-size: 1em;
+    text-align: left;
+    box-shadow: 0px 2px 3px 0px rgba(160,160,160,0.65);
+    border: 1px solid #d9d9d9;
+    border-radius: .28571rem;
+    z-index: 9;
+    will-change: transform, opacity;
+}
+
+.aroz.contextmenu > .item.item.item.item.item.item {
+    position: relative;
+    cursor: pointer;
+    display: flex;
+    border: none;
+    height: auto;
+    width: auto;
+    text-align: left;
+    border-top: none;
+    line-height: 1em;
+    font-size: 1rem;
+    color: #5a5a5a;
+    padding: .78571rem 1.14286rem !important;
+    text-transform: none;
+    font-weight: normal;
+    box-shadow: none;
+    border-radius: 0;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    -webkit-touch-callout: none;
+}
+
+.aroz.contextmenu > .item.item.item.item.item.item > i{
+    font-size: 90%;
+}
+
+.aroz.contextmenu.visible > .item.item:hover {
+    background: #fbfbfb !important;
+    color: #5a5a5a !important;
+    z-index: 11;
+}
+
+.aroz.contextmenu > *{
+    white-space: nowrap;
+}
+
+.aroz.contextmenu > .item{
+    user-select: none;
+}
+
+.aroz.contextmenu > .item > .description {
+    margin: 0em 0em 0em 1em;
+    flex: 1;
+    text-align: right;
+    color: #bfbfbf;
+}