support dark mode

Sciroccogti · Jan 10, 2021 · 987cff4 · 987cff4
1 parent 43b0225
commit 987cff4
Show file tree

Hide file tree

Showing 8 changed files with 185 additions and 72 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,10 @@
+{
+    // "go.buildFlags": [
+    //     "./main.go",
+    //     "./message.go",
+    //     "./bind_windows_amd64.go",
+    //     "./foldest.go",
+    // ],
+    "go.buildOnSave": "workspace",
+    "go.useLanguageServer": true
+}
diff --git a/README.md b/README.md
@@ -34,10 +34,18 @@ rule2:
 
 ## Development progress
 
+### Basic Function
+
 - [ ] Automatic
 - [x] Temp trash bin
 - [x] Customize rules
 
+### UI
+
+- [x] Dark mode
+- [ ] Edit conf in UI
+- [ ] Multilingual
+
 ## How to Contribute
 
 ```Bash

diff --git a/main.go b/main.go
@@ -16,9 +16,6 @@ import (
 // Constants
 const version = `3.0`
 
-// const htmlAbout = `Welcome on <b>Astilectron</b> demo!<br>
-// This is using the bootstrap and the bundler.`
-
 // Vars injected via ldflags by bundler
 var (
 	AppName            string
@@ -34,12 +31,16 @@ var (
 )
 
 func main() {
-	htmlAbout := `<b>` + AppName + `</b> Ver ` + version + `<br>
-	Built Time: ` + BuiltAt[:10] + `<br>
-	Astilectron ` + VersionAstilectron + `<br>
-	Electron ` + VersionElectron + `<br>
-	<a href="https://github.com/Sciroccogti/Foldest-go">Github</a>
-	`
+	os.MkdirAll("./logs", 0766)
+
+	var aboutPayload  map[string]string
+	aboutPayload = make(map[string]string)
+	aboutPayload["AppName"] =      AppName
+	aboutPayload["Version"] =      version
+	aboutPayload["BuiltTime"] =    BuiltAt[:10]
+	aboutPayload["Electron"] =     VersionElectron
+	aboutPayload["Astilectron"] =  VersionAstilectron
+	aboutPayload["Github"] =       "https://github.com/Sciroccogti/Foldest-go"
 
 	// Parse flags
 	fs.Parse(os.Args[1:])
@@ -59,34 +60,40 @@ func main() {
 		},
 		Debug:  *debug,
 		Logger: utils.L,
-		MenuOptions: []*astilectron.MenuItemOptions{{
-			Label: astikit.StrPtr("File"),
-			SubMenu: []*astilectron.MenuItemOptions{
-				{
-					Label: astikit.StrPtr("About"),
-					OnClick: func(e astilectron.Event) (deleteListener bool) {
-						if err := bootstrap.SendMessage(utils.W, "about", htmlAbout, func(m *bootstrap.MessageIn) {
-							// Unmarshal payload
-							var s string
-							if err := json.Unmarshal(m.Payload, &s); err != nil {
-								utils.L.Println(fmt.Errorf("unmarshaling payload failed: %w", err))
-								return
+		MenuOptions: []*astilectron.MenuItemOptions{
+			{
+				Label: astikit.StrPtr("File"),
+				SubMenu: []*astilectron.MenuItemOptions{
+					{Role: astilectron.MenuItemRoleClose},
+				},
+			},
+			{
+				Label: astikit.StrPtr("Help"),
+				SubMenu: []*astilectron.MenuItemOptions{
+					{Role: astilectron.MenuItemRoleToggleDevTools},
+					{
+						Label: astikit.StrPtr("About"),
+						OnClick: func(e astilectron.Event) (deleteListener bool) {
+							if err := bootstrap.SendMessage(utils.W, "about", aboutPayload, func(m *bootstrap.MessageIn) {
+								// Unmarshal payload
+								var s string
+								if err := json.Unmarshal(m.Payload, &s); err != nil {
+									utils.L.Println(fmt.Errorf("unmarshaling payload failed: %w", err))
+									return
+								}
+								utils.L.Printf("About modal has been displayed and payload is %s!\n", s)
+							}); err != nil {
+								utils.L.Println(fmt.Errorf("sending about event failed: %w", err))
 							}
-							utils.L.Printf("About modal has been displayed and payload is %s!\n", s)
-						}); err != nil {
-							utils.L.Println(fmt.Errorf("sending about event failed: %w", err))
-						}
-						return
+							return
+						},
 					},
 				},
-				{Role: astilectron.MenuItemRoleClose},
 			},
-		}},
+		},
 		OnWait: func(_ *astilectron.Astilectron, ws []*astilectron.Window, _ *astilectron.Menu, _ *astilectron.Tray, _ *astilectron.Menu) error {
 			utils.W = ws[0]
 			go func() {
-				utils.W.OpenDevTools()
-
 				time.Sleep(5 * time.Second)
 
 				if err := bootstrap.SendMessage(utils.W, "check.out.menu", "Don't forget to check out the menu!"); err != nil {

diff --git a/resources/app/index.html b/resources/app/index.html
@@ -3,16 +3,13 @@
 
 <head>
     <meta charset="UTF-8">
-    <link rel="stylesheet" href="static/css/base.css" />
     <link rel="stylesheet" href="static/lib/astiloader/astiloader.css">
     <link rel="stylesheet" href="static/lib/astimodaler/astimodaler.css">
     <link rel="stylesheet" href="static/lib/astinotifier/astinotifier.css">
     <link rel="stylesheet" href="static/lib/font-awesome-4.7.0/css/font-awesome.min.css">
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
-        crossorigin="anonymous"></script>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="static/css/base.css" />
 </head>
 <!-- <body>
     <div class="left" id="dirs"></div>
@@ -39,7 +36,7 @@
     <div class="top" id="buttons">
         <button class="btn btn-primary btn-lg" id="btn-start" onclick="foldest.start()">Start</button>
     </div>
-    <div class="bottom" id="outputs">Welcome to Foldest!</div>
+    <div class="bottom" id="outputs">Welcome to Foldest!<br></div>
     <script src="static/js/index.js"></script>
     <script src="static/lib/astiloader/astiloader.js"></script>
     <script src="static/lib/astimodaler/astimodaler.js"></script>

diff --git a/resources/app/static/css/base.css b/resources/app/static/css/base.css
@@ -1,27 +1,87 @@
 * {
-    box-sizing:  border-box;
+    box-sizing: border-box;
 }
 
-html, body {
-    background-color: #fff;
-    color: #333;
+html,
+body {
     height: 100%;
     margin: 0;
     width: 100%;
 }
 
-.top {
-    /* margin: 0 auto; */
-    text-align:center;
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #202020;
+        color: white;
+    }
+    #outputs {
+        background-color: #171B22;
+        color: #CBD1D9;
+    }
+    /* Chrome, Safari */
+    #outputs::-webkit-scrollbar {
+        width: 0.9em;
+        height: 0.9em;
+    }
+    #outputs::-webkit-scrollbar-track {
+        background-color: #424242;
+    }
+    #outputs::-webkit-scrollbar-thumb {
+        background-color: #686868;
+        border-radius: 0.2em;
+    }
+    #outputs::-webkit-scrollbar-corner {
+        background-color: #424242;
+        border-bottom-right-radius: 0.2em;
+    }
 }
 
-.bottom {
+@media (prefers-color-scheme: light) {
+    body {
+        background: white;
+        color: #333;
+    }
+    #outputs {
+        background-color: #F6F8FA;
+        color: #25292E;
+    }
+}
+
+#buttons {
+    padding: 1em;
+    /* margin: auto; */
+    text-align: center;
+}
+
+#outputs {
     width: 80%;
     height: 60%;
     margin: auto;
     overflow: auto;
+    padding: 1em;
+    font-family: 'Courier New', Courier, monospace;
+    border-radius: 0.5em;
+}
+
+.astimodaler-body {
+    width: fit-content;
+    margin: auto;
 }
 
+.about {
+    text-align: left;
+}
+
+.appName {
+    font-size: xx-large;
+    color: #23b1b1;
+}
+
+
+/* .detail {
+} */
+
+
 /* .left {
     background-color: #333;
     color: #fff;

diff --git a/resources/app/static/js/index.js b/resources/app/static/js/index.js
@@ -1,31 +1,67 @@
 let index = {
-    about: function (html) {
+    about: function(aboutPayload) {
         let c = document.createElement("div");
-        c.innerHTML = html;
+        c.setAttribute("class", "about");
+
+        // display appname
+        let appName = document.createElement("div");
+        appName.setAttribute("class", "appName");
+        appName.innerHTML = aboutPayload.AppName;
+        c.appendChild(appName);
+
+        // use table to display detail info
+        let detail = document.createElement("table");
+        detail.setAttribute("class", "detail");
+
+        detail.insertRow();
+        detail.rows[0].insertCell().innerHTML = "Version:";
+        detail.rows[0].insertCell().innerHTML = aboutPayload.Version;
+
+        detail.insertRow();
+        detail.rows[1].insertCell().innerHTML = "BuiltTime:";
+        detail.rows[1].insertCell().innerHTML = aboutPayload.BuiltTime;
+
+        detail.insertRow();
+        detail.rows[2].insertCell().innerHTML = "Electron:";
+        detail.rows[2].insertCell().innerHTML = aboutPayload.Electron;
+
+        detail.insertRow();
+        detail.rows[3].insertCell().innerHTML = "Astilectron:";
+        detail.rows[3].insertCell().innerHTML = aboutPayload.Astilectron;
+
+        c.appendChild(detail);
+
+        // Github url
+        let githubUrl = document.createElement("a");
+        githubUrl.setAttribute("href", aboutPayload.Github);
+        githubUrl.setAttribute("onclick", "require('electron').shell.openExternal('" + aboutPayload.Github + "')")
+        githubUrl.innerHTML = "Github";
+        c.appendChild(githubUrl);
+
         asticode.modaler.setContent(c);
         asticode.modaler.show();
     },
     addFolder(name, path) {
         let div = document.createElement("div");
         div.className = "dir";
-        div.onclick = function () { index.explore(path) };
+        div.onclick = function() { index.explore(path) };
         div.innerHTML = `<i class="fa fa-folder"></i><span>` + name + `</span>`;
         document.getElementById("dirs").appendChild(div)
     },
-    init: function () {
+    init: function() {
         // Init
         asticode.loader.init();
         asticode.modaler.init();
         asticode.notifier.init();
 
         // Wait for astilectron to be ready
-        document.addEventListener('astilectron-ready', function () {
+        document.addEventListener('astilectron-ready', function() {
             // Listen
             index.listen();
 
             // // Explore default path
             // index.explore();
-        })
+        });
     },
 
     /*
@@ -71,8 +107,8 @@ let index = {
             }
         })
     },*/
-    listen: function () {
-        astilectron.onMessage(function (message) {
+    listen: function() {
+        astilectron.onMessage(function(message) {
             switch (message.name) {
                 case "about":
                     index.about(message.payload);
@@ -92,15 +128,15 @@ let index = {
 };
 
 let foldest = {
-    start: function () {
+    start: function() {
         console.log("button Start is clicked!\n");
         document.getElementById("btn-start").disabled = true;
-        astilectron.sendMessage({ "name": "start" }, function () {
+        astilectron.sendMessage({ "name": "start" }, function() {
             console.log("finished!");
             document.getElementById("btn-start").disabled = false;
         });
     },
-    print: function (html) {
+    print: function(html) {
         document.getElementById("outputs").innerHTML += (html + `<br>`);
     },
 }
diff --git a/utils/print.go b/utils/print.go
@@ -11,13 +11,13 @@ import (
 	bootstrap "github.com/asticode/go-astilectron-bootstrap"
 )
 
+// W is the global window var
 var W *astilectron.Window
 
-// Create logger
-// file := "./" + time.Now().Format("20060102") + ".log"
-var logFile, _ = os.OpenFile("./"+time.Now().Format("20060102150405")+".log", os.O_RDWR|os.O_CREATE|os.O_APPEND, 0766)
+// save log to `./logs/`
+var logFile, _ = os.OpenFile("logs/"+time.Now().Format("20060102150405")+".log", os.O_RDWR|os.O_CREATE|os.O_APPEND, 0766)
 
-// l := log.New(log.Writer(), log.Prefix(), log.Flags())
+// L print log to .log file
 var L = log.New(logFile, log.Prefix(), log.Flags())
 
 // Print : Print a string to Electron
@@ -26,17 +26,10 @@ func Print(format string, a ...interface{}) {
 	s = strings.ReplaceAll(s, (string)(0x1B)+"[0m", "</span>")
 	s = strings.ReplaceAll(s, (string)(0x1B)+"[0;31m", "<span style=\"color: red;\">")
 	s = strings.ReplaceAll(s, (string)(0x1B)+"[0;32m", "<span style=\"color: green;\">")
-	s = strings.ReplaceAll(s, (string)(0x1B)+"[0;33m", "<span style=\"color: yellow;\">")
+	s = strings.ReplaceAll(s, (string)(0x1B)+"[0;33m", "<span style=\"color: orange;\">")
 	s = strings.ReplaceAll(s, (string)(0x1B)+"[0;34m", "<span style=\"color: blue;\">")
-	// green := regexp.MustCompile(`.*?(%c\[0;32m)%s%c\[0m`)
-	// s = green.ReplaceAllString(s, "<span style=\"color: green;\">")
-	// yellow := regexp.MustCompile(`.*?(%c\[0;33m)%s%c\[0m`)
-	// s = yellow.ReplaceAllString(s, "<span style=\"color: yellow;\">")
-	// blue := regexp.MustCompile(`.*?(%c\[0;34m)%s%c\[0m`)
-	// s = blue.ReplaceAllString(s, "<span style=\"color: blue;\">")
-	// *Plog.stdout <- s
-	if err := bootstrap.SendMessage(W, "print", s); err != nil {
 
+	if err := bootstrap.SendMessage(W, "print", s); err != nil {
+		L.Println(fmt.Errorf("sending print event failed: %w", err))
 	}
-	// Plog.Buf.WriteString(line)
 }