Complted desktop theme color setting on desktop mode

file_system.go

@@ -82,7 +82,7 @@ func FileSystemInit() {
 	router.HandleFunc("/system/file_system/zipHandler", system_fs_zipHandler)
 	router.HandleFunc("/system/file_system/getProperties", system_fs_getFileProperties)
 	router.HandleFunc("/system/file_system/pathTranslate", system_fs_handlePathTranslate)
-	router.HandleFunc("/system/file_system/handleFileWrite", system_fs_handleFileWrite)
+
 	router.HandleFunc("/system/file_system/handleFilePermission", system_fs_handleFilePermission)
 	router.HandleFunc("/system/file_system/search", system_fs_handleFileSearch)
 
@@ -1668,7 +1668,9 @@ func system_fs_handleUserPreference(w http.ResponseWriter, r *http.Request) {
 
 	key, _ := mv(r, "key", false)
 	value, _ := mv(r, "value", false)
-	if key != "" && value == "" {
+	remove, _ := mv(r, "remove", false)
+
+	if key != "" && value == "" && remove == "" {
 		//Get mode. Read the prefernece with given key
 		result := ""
 		err := sysdb.Read("fs", "pref/"+key+"/"+username, &result)
@@ -1677,10 +1679,23 @@ func system_fs_handleUserPreference(w http.ResponseWriter, r *http.Request) {
 			return
 		}
 		sendTextResponse(w, result)
+	} else if key != "" && value == "" && remove == "true" {
+		//Remove mode. Delete this key from sysdb
+		err := sysdb.Delete("fs", "pref/"+key+"/"+username)
+		if err != nil {
+			sendErrorResponse(w, err.Error())
+		}
+
+		sendOK(w)
 	} else if key != "" && value != "" {
 		//Set mode. Set the preference with given key
+		if len(value) > 1024 {
+			//Size too big. Reject storage
+			sendErrorResponse(w, "Preference value too long. Preference value can only store maximum 1024 characters.")
+			return
+		}
 		sysdb.Write("fs", "pref/"+key+"/"+username, value)
-		sendJSONResponse(w, "\"OK\"")
+		sendOK(w)
 	}
 }
 
@@ -2263,53 +2278,6 @@ func system_fs_handleFolderCache(w http.ResponseWriter, r *http.Request) {
 	sendOK(w)
 }
 
-//Functions for handling quick file write without the need to go through agi for simple apps
-func system_fs_handleFileWrite(w http.ResponseWriter, r *http.Request) {
-	//Get the username for this user
-	userinfo, err := userHandler.GetUserInfoFromRequest(w, r)
-	if err != nil {
-		sendErrorResponse(w, err.Error())
-		return
-	}
-
-	//Get the file content and the filepath
-	content, _ := mv(r, "content", true)
-	targetFilepath, err := mv(r, "filepath", true)
-	if err != nil {
-		sendErrorResponse(w, "Filepath cannot be empty")
-		return
-	}
-
-	//Check if filepath is writable
-	if !userinfo.CanWrite(targetFilepath) {
-		sendErrorResponse(w, "Write permission denied")
-		return
-	}
-
-	//Convert the filepath to realpath
-	rpath, err := userinfo.VirtualPathToRealPath(targetFilepath)
-	if err != nil {
-		sendErrorResponse(w, err.Error())
-		return
-	}
-
-	//Check if the path dir exists. If not, return error
-	if !fileExists(filepath.Dir(rpath)) {
-		sendErrorResponse(w, "Directory not exists")
-		return
-	}
-
-	//OK. Write to that file
-	err = ioutil.WriteFile(rpath, []byte(content), 0755)
-	if err != nil {
-		sendErrorResponse(w, err.Error())
-		return
-	}
-
-	sendOK(w)
-
-}
-
 //Handle setting and loading of file permission on Linux
 func system_fs_handleFilePermission(w http.ResponseWriter, r *http.Request) {
 	file, err := mv(r, "file", true)

web/SystemAO/desktop/colors.json

@@ -0,0 +1,294 @@
+{
+  "red": {
+    "50": "#ffebee",
+    "100": "#ffcdd2",
+    "200": "#ef9a9a",
+    "300": "#e57373",
+    "400": "#ef5350",
+    "500": "#f44336",
+    "600": "#e53935",
+    "700": "#d32f2f",
+    "800": "#c62828",
+    "900": "#b71c1c",
+    "a100": "#ff8a80",
+    "a200": "#ff5252",
+    "a400": "#ff1744",
+    "a700": "#d50000"
+  },
+  "pink": {
+    "50": "#fce4ec",
+    "100": "#f8bbd0",
+    "200": "#f48fb1",
+    "300": "#f06292",
+    "400": "#ec407a",
+    "500": "#e91e63",
+    "600": "#d81b60",
+    "700": "#c2185b",
+    "800": "#ad1457",
+    "900": "#880e4f",
+    "a100": "#ff80ab",
+    "a200": "#ff4081",
+    "a400": "#f50057",
+    "a700": "#c51162"
+  },
+  "purple": {
+    "50": "#f3e5f5",
+    "100": "#e1bee7",
+    "200": "#ce93d8",
+    "300": "#ba68c8",
+    "400": "#ab47bc",
+    "500": "#9c27b0",
+    "600": "#8e24aa",
+    "700": "#7b1fa2",
+    "800": "#6a1b9a",
+    "900": "#4a148c",
+    "a100": "#ea80fc",
+    "a200": "#e040fb",
+    "a400": "#d500f9",
+    "a700": "#aa00ff"
+  },
+  "deeppurple": {
+    "50": "#ede7f6",
+    "100": "#d1c4e9",
+    "200": "#b39ddb",
+    "300": "#9575cd",
+    "400": "#7e57c2",
+    "500": "#673ab7",
+    "600": "#5e35b1",
+    "700": "#512da8",
+    "800": "#4527a0",
+    "900": "#311b92",
+    "a100": "#b388ff",
+    "a200": "#7c4dff",
+    "a400": "#651fff",
+    "a700": "#6200ea"
+  },
+  "indigo": {
+    "50": "#e8eaf6",
+    "100": "#c5cae9",
+    "200": "#9fa8da",
+    "300": "#7986cb",
+    "400": "#5c6bc0",
+    "500": "#3f51b5",
+    "600": "#3949ab",
+    "700": "#303f9f",
+    "800": "#283593",
+    "900": "#1a237e",
+    "a100": "#8c9eff",
+    "a200": "#536dfe",
+    "a400": "#3d5afe",
+    "a700": "#304ffe"
+  },
+  "blue": {
+    "50": "#e3f2fd",
+    "100": "#bbdefb",
+    "200": "#90caf9",
+    "300": "#64b5f6",
+    "400": "#42a5f5",
+    "500": "#2196f3",
+    "600": "#1e88e5",
+    "700": "#1976d2",
+    "800": "#1565c0",
+    "900": "#0d47a1",
+    "a100": "#82b1ff",
+    "a200": "#448aff",
+    "a400": "#2979ff",
+    "a700": "#2962ff"
+  },
+  "lightblue": {
+    "50": "#e1f5fe",
+    "100": "#b3e5fc",
+    "200": "#81d4fa",
+    "300": "#4fc3f7",
+    "400": "#29b6f6",
+    "500": "#03a9f4",
+    "600": "#039be5",
+    "700": "#0288d1",
+    "800": "#0277bd",
+    "900": "#01579b",
+    "a100": "#80d8ff",
+    "a200": "#40c4ff",
+    "a400": "#00b0ff",
+    "a700": "#0091ea"
+  },
+  "cyan": {
+    "50": "#e0f7fa",
+    "100": "#b2ebf2",
+    "200": "#80deea",
+    "300": "#4dd0e1",
+    "400": "#26c6da",
+    "500": "#00bcd4",
+    "600": "#00acc1",
+    "700": "#0097a7",
+    "800": "#00838f",
+    "900": "#006064",
+    "a100": "#84ffff",
+    "a200": "#18ffff",
+    "a400": "#00e5ff",
+    "a700": "#00b8d4"
+  },
+  "teal": {
+    "50": "#e0f2f1",
+    "100": "#b2dfdb",
+    "200": "#80cbc4",
+    "300": "#4db6ac",
+    "400": "#26a69a",
+    "500": "#009688",
+    "600": "#00897b",
+    "700": "#00796b",
+    "800": "#00695c",
+    "900": "#004d40",
+    "a100": "#a7ffeb",
+    "a200": "#64ffda",
+    "a400": "#1de9b6",
+    "a700": "#00bfa5"
+  },
+  "green": {
+    "50": "#e8f5e9",
+    "100": "#c8e6c9",
+    "200": "#a5d6a7",
+    "300": "#81c784",
+    "400": "#66bb6a",
+    "500": "#4caf50",
+    "600": "#43a047",
+    "700": "#388e3c",
+    "800": "#2e7d32",
+    "900": "#1b5e20",
+    "a100": "#b9f6ca",
+    "a200": "#69f0ae",
+    "a400": "#00e676",
+    "a700": "#00c853"
+  },
+  "lightgreen": {
+    "50": "#f1f8e9",
+    "100": "#dcedc8",
+    "200": "#c5e1a5",
+    "300": "#aed581",
+    "400": "#9ccc65",
+    "500": "#8bc34a",
+    "600": "#7cb342",
+    "700": "#689f38",
+    "800": "#558b2f",
+    "900": "#33691e",
+    "a100": "#ccff90",
+    "a200": "#b2ff59",
+    "a400": "#76ff03",
+    "a700": "#64dd17"
+  },
+  "lime": {
+    "50": "#f9fbe7",
+    "100": "#f0f4c3",
+    "200": "#e6ee9c",
+    "300": "#dce775",
+    "400": "#d4e157",
+    "500": "#cddc39",
+    "600": "#c0ca33",
+    "700": "#afb42b",
+    "800": "#9e9d24",
+    "900": "#827717",
+    "a100": "#f4ff81",
+    "a200": "#eeff41",
+    "a400": "#c6ff00",
+    "a700": "#aeea00"
+  },
+  "yellow": {
+    "50": "#fffde7",
+    "100": "#fff9c4",
+    "200": "#fff59d",
+    "300": "#fff176",
+    "400": "#ffee58",
+    "500": "#ffeb3b",
+    "600": "#fdd835",
+    "700": "#fbc02d",
+    "800": "#f9a825",
+    "900": "#f57f17",
+    "a100": "#ffff8d",
+    "a200": "#ffff00",
+    "a400": "#ffea00",
+    "a700": "#ffd600"
+  },
+  "amber": {
+    "50": "#fff8e1",
+    "100": "#ffecb3",
+    "200": "#ffe082",
+    "300": "#ffd54f",
+    "400": "#ffca28",
+    "500": "#ffc107",
+    "600": "#ffb300",
+    "700": "#ffa000",
+    "800": "#ff8f00",
+    "900": "#ff6f00",
+    "a100": "#ffe57f",
+    "a200": "#ffd740",
+    "a400": "#ffc400",
+    "a700": "#ffab00"
+  },
+  "orange": {
+    "50": "#fff3e0",
+    "100": "#ffe0b2",
+    "200": "#ffcc80",
+    "300": "#ffb74d",
+    "400": "#ffa726",
+    "500": "#ff9800",
+    "600": "#fb8c00",
+    "700": "#f57c00",
+    "800": "#ef6c00",
+    "900": "#e65100",
+    "a100": "#ffd180",
+    "a200": "#ffab40",
+    "a400": "#ff9100",
+    "a700": "#ff6d00"
+  },
+  "deeporange": {
+    "50": "#fbe9e7",
+    "100": "#ffccbc",
+    "200": "#ffab91",
+    "300": "#ff8a65",
+    "400": "#ff7043",
+    "500": "#ff5722",
+    "600": "#f4511e",
+    "700": "#e64a19",
+    "800": "#d84315",
+    "900": "#bf360c",
+    "a100": "#ff9e80",
+    "a200": "#ff6e40",
+    "a400": "#ff3d00",
+    "a700": "#dd2c00"
+  },
+  "brown": {
+    "50": "#efebe9",
+    "100": "#d7ccc8",
+    "200": "#bcaaa4",
+    "300": "#a1887f",
+    "400": "#8d6e63",
+    "500": "#795548",
+    "600": "#6d4c41",
+    "700": "#5d4037",
+    "800": "#4e342e",
+    "900": "#3e2723"
+  },
+  "grey": {
+    "50": "#fafafa",
+    "100": "#f5f5f5",
+    "200": "#eeeeee",
+    "300": "#e0e0e0",
+    "400": "#bdbdbd",
+    "500": "#9e9e9e",
+    "600": "#757575",
+    "700": "#616161",
+    "800": "#424242",
+    "900": "#212121"
+  },
+  "bluegrey": {
+    "50": "#eceff1",
+    "100": "#cfd8dc",
+    "200": "#b0bec5",
+    "300": "#90a4ae",
+    "400": "#78909c",
+    "500": "#607d8b",
+    "600": "#546e7a",
+    "700": "#455a64",
+    "800": "#37474f",
+    "900": "#263238"
+  }
+}

web/SystemAO/desktop/personalization.html

@@ -16,6 +16,15 @@
             .backgroundpreview{
                 border: 1px solid #898989;
             }
+
+            .colorpallete{
+                border: 1px solid transparent;
+                cursor: pointer;
+            }
+
+            .colorpallete:hover{
+                border: 1px solid white;
+            }
         </style>
     </head>
     <body>
@@ -127,7 +136,16 @@
                     </h3>
 
                     <div class="ui divider"></div>
-                    <p>Work In Progress</p>
+                    <div class="ui container">
+                        <div id="colorgrid">
+                            Loading...
+                        </div>
+                    </div>
+                    <br>
+                    <div class="ui divider"></div>
+                    <button class="ui small basic black button" onclick="restoreDefaultThemeColor();">Restore Default</button>
+                    <br><br><br>
+                    
                 </div>
             </div>
             <div class="ui tab" data-tab="advance">
@@ -160,6 +178,7 @@
         <script>
             var desktopThemeList = [];
             var isStartingUp = true;
+            var cancelColorRestore = false; //If the user clicked on the target color pallete, do not restore the desktop to its original color before selection
 
             $(".dropdown").dropdown();
             $('.tabular.menu .item').tab();
@@ -170,6 +189,7 @@
             initUserDefinedWallpaperFolder(function(themeName){
                 initCurrentBackgroundPreview(themeName);
             });
+            generateColorGrids();
 
             //Return the data stored in the theme settings
             //Will return either theme pack name or path for user defined folder
@@ -353,6 +373,163 @@
                 loadBackgroundPreview(targetThemeObject);
             }
 
+            function generateColorGrids(){
+                $("#colorgrid").html("");
+                $.getJSON("./colors.json", function(data){
+                    for (let key in data) {
+                        let colorcodes = data[key];
+                        let thisSection = '';
+                        thisSection += (`<div class="ui grid">`);
+                        thisSection += (`<div class="five wide column">
+                            ${key.charAt(0).toUpperCase() + key.slice(1)}
+                        </div>`);
+                        for (let colorIndex in colorcodes) {
+                            if (colorIndex < 300){
+                                //Skip all the light colors
+                                continue;
+                            }
+                            let colorHexCoxde = colorcodes[colorIndex];
+                            thisSection += (`<div class="one wide column colorpallete" hex="${colorHexCoxde}" material="${colorIndex}" style="background-color: ${colorHexCoxde}; text-align: center;"><br></div>`);
+                        }
+
+                        thisSection += "</div>"
+                        $("#colorgrid").append(thisSection);
+
+                    }
+
+                    //Bind events to change the color for preview
+                    let previousColorCode = {};
+                    $(".colorpallete").on({
+                        mouseover: function() {
+                            event.preventDefault();
+                            $(this).animate({opacity: 0.25}, 100);
+
+                            //Save the current color
+                            var thisColorCode = $(this).attr("hex");
+                            previousColorCode["floatWindow"] = $(parent.window.content.document).find(".floatWindow .controls").css("background-color");
+                            previousColorCode["statusbar"] =  $(parent.window.content.document).find("#statusbar").css("background-color");
+                            previousColorCode["navimenu"] =  $(parent.window.content.document).find("#navimenu").css("background-color");
+
+                            //Set the preview color
+                            if (ao_module_virtualDesktop){
+                                $(parent.window.content.document).find(".floatWindow .controls").css("background-color",hexToRgbA(thisColorCode, 0.85));
+                                $(parent.window.content.document).find("#statusbar").css("background-color",thisColorCode );
+                                $(parent.window.content.document).find("#navimenu").css("background-color",hexToRgbA(thisColorCode, 0.5));
+                            }
+                        },
+                        mouseout: function() {
+                            event.preventDefault();
+                            $(this).animate({opacity: 1}, 100);
+                            $(".themeColorSolid").css("background-color", "");
+
+                            //Restore the original color
+                            if (ao_module_virtualDesktop && !cancelColorRestore){
+                                $(parent.window.content.document).find(".floatWindow .controls").css("background-color",previousColorCode["floatWindow"]);
+                                $(parent.window.content.document).find("#statusbar").css("background-color",previousColorCode["statusbar"]);
+                                $(parent.window.content.document).find("#navimenu").css("background-color",previousColorCode["navimenu"]);
+                            }else if (cancelColorRestore){
+                                cancelColorRestore = false;
+                            }
+                           
+                        }
+                    });
+
+                    //Setting the current theme
+                    $(".colorpallete").on("click", function(){
+                        var colorCode = $(this).attr("hex");
+                        writePreference("themecolor",colorCode, function(data){
+                            if (data.error != undefined){
+                                alert(data.error);
+                            }
+
+                            //Tick the current using color
+                            tickTheCurrentSelectedThemeColor();
+
+                            //Update the desktop theme color
+                            if (ao_module_virtualDesktop){
+                                cancelColorRestore=true;
+                                parent.setThemeColor(colorCode);
+                            }
+                            
+                        });
+                    });
+
+                    tickTheCurrentSelectedThemeColor();
+                });
+            }
+
+            function restoreDefaultThemeColor(){
+                $.ajax({
+                    url: "../../system/file_system/preference",
+                    data: {key: "themecolor", remove: true},
+                    success: function(data){
+                        if (data.error !== undefined){
+                            console.log(data.error);
+                        }else{
+                            if (ao_module_virtualDesktop){
+                                //Just emulate the restored effect first, 
+                                //The theme color will restore after refresh
+                                parent.setThemeColor("#262626");
+                            }
+                        }
+                    }
+                });
+            }
+
+            function tickTheCurrentSelectedThemeColor(){
+                //Tick the one that is currently using
+                readPreference("themecolor", function(data){
+                    if (data.error == undefined){
+                        //See if there is a colorpallete match the hex string
+                        $(".colorpallete").each(function(){
+                            if ($(this).attr("hex") == data){
+                                //This is the pallete to tick
+                                $(this).html(`<i style="color:white; margin-left: -4px;" class="checkmark icon"></i>`);
+                            }else{
+                                $(this).html(`<br>`);
+                            }
+                        })
+                    }
+                })
+            }
+
+            function readPreference(key, callback=undefined){
+                $.ajax({
+                    url: "../../system/file_system/preference",
+                    data: {key: key},
+                    success: function(data){
+                        if (callback != undefined){
+                            callback(data);
+                        }
+                    }
+                });
+            }
+
+            function writePreference(key, value, callback=undefined){
+                $.ajax({
+                    url: "../../system/file_system/preference",
+                    data: {key: key, value: value},
+                    success: function(data){
+                        if (callback != undefined){
+                            callback(data);
+                        }
+                    }
+                })
+            }
+
+            function hexToRgbA(hex, transparent=1){
+                var c;
+                if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
+                    c= hex.substring(1).split('');
+                    if(c.length== 3){
+                        c= [c[0], c[0], c[1], c[1], c[2], c[2]];
+                    }
+                    c= '0x'+c.join('');
+                    return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',' + transparent + ')';
+                }
+                throw new Error('Bad Hex');
+            }
+
             function applyWallpaper(){
                 var targetWallpaper =JSON.parse(decodeURIComponent($("#wallpaperlist").val()));
                 $.get("../../system/desktop/theme?set=" + targetWallpaper.Theme, function(data) {

web/desktop.system

@@ -5,7 +5,7 @@
     <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/ao.css">
+    <link id="fwcss" rel="stylesheet" href="script/ao.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>
@@ -856,6 +856,7 @@
         var backgroundCrossfadeInterval = 30000; //Time between the crossfade of each background image
         var nextSlideshowIndex = 0; //The next background image index to be shown
         var backgroundIntervalCounter; //The interval object for background changer
+        var desktopThemeColor = ""; //The current desktop theme color, which renders to the status bar and suchs
 
         //Desktop icon realted
         var desktopIconSize = "medium"; //Size of desktop icons. Allow {small / medium / big}
@@ -909,6 +910,7 @@
         //initDesktopFiles();               //Will be called in initDesktopIconPreference() -> refresh()
         initModuleList();
         initDesktopIconPreference()
+        initUserDefinedThemeColor();
         hookFloatWindowEvents();
         hookLaunchMenuEvents();
         initTheme();
@@ -1981,9 +1983,16 @@
             if (bgcolor !== ""){
                 backgroundStyle = `background-color: ${bgcolor};`;
             }
+
+            //Check if the theme color is applied. If yes, generate the floatWindow with overwritten theem color
+            var overWriteThemeColor = "";
+            if (desktopThemeColor != ""){
+                overWriteThemeColor = `background-color: ${hexToRgbA(desktopThemeColor, 0.85)}`;
+            }
+
             //Append the floatWindow into the body
             $("body").append(`<div class="floatWindow" windowId="${uuid}" parent="${parentWindowID}" callback="${callbackFunctionName}" style="z-index:0; width:${width}px; height:${height}px; left:${left}px; top:${top}px;${backgroundStyle}">
-                                    <div class="controls fwdragger themeColorSolid">
+                                    <div class="controls fwdragger themeColorSolid" style="${overWriteThemeColor}">
                                         <img class="moduleicon" src="${moduleIcon}"></img>
                                         <div class="title">${title}</div>
                                         <div class="fwcontrol">
@@ -4705,6 +4714,46 @@
             $("#quickAccessPanel").find(".button").removeClass("inverted");
         }
 
+        function hexToRgbA(hex, transparent=1){
+            var c;
+            if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
+                c= hex.substring(1).split('');
+                if(c.length== 3){
+                    c= [c[0], c[0], c[1], c[1], c[2], c[2]];
+                }
+                c= '0x'+c.join('');
+                return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',' + transparent + ')';
+            }
+            throw new Error('Bad Hex');
+        }
+
+        function setThemeColor(newThemeColor){
+            //Update the global theme color
+            desktopThemeColor = newThemeColor;
+
+            //Update the related elements
+            $("#statusbar").css("background-color",newThemeColor);
+            $("#navimenu").css("background-color",hexToRgbA(newThemeColor, 0.5));
+            $(".floatWindow .controls").css("background-color",hexToRgbA(newThemeColor, 0.85));
+
+            //List menu theme color bar
+            $("#listMenu").find(".searchBar").css("border-bottom", "2px solid " + newThemeColor);
+            $("#volumebar").css("background-color", newThemeColor);
+        }
+
+        //Load the user define theme color to overwrite the default color if exists
+        function initUserDefinedThemeColor(){
+            $.ajax({
+                url: "../../system/file_system/preference",
+                data: {key: "themecolor"},
+                success: function(data){
+                    if (data.error == undefined && data != ""){
+                        setThemeColor(data);
+                    }
+                }
+            });
+        }
+
         //Float Window context menu
         function getFocusedFloatWindowID(){
             var targetFloatWindowId = "";