icon and theme experiments

TODO

@@ -4,3 +4,4 @@
 - polish becca entities API
 - separate private and public APIs in becca entities
 - handle FIXMEs
+- fix Steel Blue example

src/public/app/dialogs/options/appearance.js

@@ -157,9 +157,9 @@ export default class ApperanceOptions {
 
     async optionsLoaded(options) {
         const themes = [
+            { val: 'green', title: 'Green' },
             { val: 'white', title: 'White' },
-            { val: 'dark', title: 'Dark' },
+            { val: 'dark', title: 'Dark' }
-            { val: 'black', title: 'Black' }
         ].concat(await server.get('options/user-themes'));
 
         this.$themeSelect.empty();

src/public/app/widgets/buttons/global_menu.js

@@ -7,9 +7,23 @@ const TPL = `
     .global-menu .dropdown-menu {
         width: 20em;
     }
+    
+    .global-menu-button {
+        background-image: url("images/icon-bw.png");
+        background-repeat: no-repeat;
+        background-position: 50% 45%;
+        width: 53px;
+        height: 53px;
+    }
+    
+    .global-menu-button:hover {
+        background-image: url("images/icon-color.png");
+    }
     </style>
 
-    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="icon-action bx bx-menu" title="Menu"></button>
+    <button type="button" data-toggle="dropdown" data-placement="right"
+            aria-haspopup="true" aria-expanded="false" 
+            class="icon-action global-menu-button" title="Menu"></button>
 
     <div class="dropdown-menu dropdown-menu-right">
         <a class="dropdown-item options-button" data-trigger-command="showOptions">
@@ -77,6 +91,8 @@ export default class GlobalMenuWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
 
+        this.$widget.find(".global-menu-button").tooltip();
+
         this.$widget.find(".show-about-dialog-button").on('click',
             () => import("../../dialogs/about.js").then(d => d.showDialog()));
 

src/public/app/widgets/note_tree.js

@@ -41,7 +41,7 @@ const TPL = `
         font-size: 1.5em;
         padding: 2px;
         max-height: 34px;
-        color: var(--button-text-color);
+        color: var(--launcher-pane-text-color);
         background-color: var(--button-background-color);
         border-radius: var(--button-border-radius);
         border: 1px solid transparent;

src/public/stylesheets/style.css

@@ -67,7 +67,7 @@ button.close:hover {
     padding: 5px;
     cursor: pointer;
     font-size: 1.5em;
-    color: var(--main-text-color);
+    color: var(--button-text-color);
     background: var(--button-background-color);
 }
 
@@ -250,6 +250,11 @@ button.btn, button.btn-sm {
     color: var(--button-text-color);
 }
 
+#left-pane .btn:not(.btn-primary) {
+    background-color: var(--button-background-color);
+    color: var(--left-pane-text-color);
+}
+
 .btn.active:not(.btn-primary) {
     background-color: var(--button-disabled-background-color) !important;
     opacity: 0.4;
@@ -873,7 +878,7 @@ ul.fancytree-container li {
     padding: 15px 15px;
     cursor: pointer;
     border: none;
-    color: var(--button-text-color);
+    color: var(--launcher-pane-text-color);
 }
 
 #launcher-pane .icon-action:hover {

src/public/stylesheets/themes.css

@@ -31,7 +31,7 @@
     --muted-text-color: #666;
 
     --input-text-color: black;
-    --input-background-color: white;
+    --input-background-color: transparent;
 
     --hover-item-text-color: black;
     --hover-item-background-color: #ddd;
@@ -62,6 +62,70 @@
     --link-color: blue;
 }
 
+body.theme-green {
+    --main-font-family: MontserratLight;
+    --main-font-size: normal;
+
+    --tree-font-family: MontserratLight;
+    --tree-font-size: normal;
+
+    --detail-font-family: MontserratLight;
+    --detail-font-size: normal;
+
+    --font-family-monospace: JetBrainsLight;
+    --detail-text-font-family: MontserratLight;
+
+    --main-background-color: white;
+    --main-text-color: black;
+    --main-border-color: #3F9D38;
+
+    --accented-background-color: #51C048;
+    --more-accented-background-color: #3F9D38;
+
+    --button-background-color: transparent;
+    --button-disabled-background-color: #ddd;
+    --button-border-color: #3F9D38;
+    --button-text-color: #3F9D38;
+    --button-border-radius: 5px;
+
+    --primary-button-background-color: #6c757d;
+    --primary-button-text-color: white;
+    --primary-button-border-color: #6c757d;
+
+    --muted-text-color: #666;
+
+    --input-text-color: black;
+    --input-background-color: transparent;
+
+    --hover-item-text-color: black;
+    --hover-item-background-color: #ddd;
+
+    --active-item-text-color: black;
+    --active-item-background-color: #ddd;
+
+    --menu-text-color: black;
+    --menu-background-color: white;
+
+    --modal-background-color: white;
+    --modal-backdrop-color: black;
+
+    --left-pane-background-color: #98DB92;
+    --left-pane-text-color: #333;
+
+    --launcher-pane-background-color: #98DB92;
+    --launcher-pane-text-color: #333;
+
+    --active-tab-background-color: #51C048;
+    --active-tab-text-color: black;
+
+    --inactive-tab-background-color: #98DB92;
+    --inactive-tab-text-color: #666;
+
+    --scrollbar-border-color: #3F9D38;
+    --tooltip-background-color: #f8f8f8;
+    --link-color: blue;
+}
+
 body.theme-dark {
     --main-font-family: MontserratLight;
     --main-font-size: normal;
@@ -254,6 +318,15 @@ input, select, textarea {
     background: var(--input-background-color) !important;
 }
 
+#left-pane input, select, textarea {
+    color: var(--left-pane-text-color) !important;
+    background: var(--left-pane-background-color) !important;
+}
+
+input::placeholder {
+    color: var(--muted-text-color);
+}
+
 table td, table th {
     color: var(--main-text-color);
 }

src/routes/api/sql.js

@@ -1,6 +1,7 @@
 "use strict";
 
 const sql = require('../../services/sql');
+const becca = require("../../becca/becca");
 
 function getSchema() {
     const tableNames = sql.getColumn(`SELECT name FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%' ORDER BY name`);

src/services/window.js

@@ -51,6 +51,12 @@ async function createMainWindow() {
     const spellcheckEnabled = optionService.getOptionBool('spellCheckEnabled');
 
     const {BrowserWindow} = require('electron'); // should not be statically imported
+
+    const nativeImage = require('electron').nativeImage
+
+    const image = nativeImage.createFromPath(getIcon())
+    console.log(image)
+
     mainWindow = new BrowserWindow({
         x: mainWindowState.x,
         y: mainWindowState.y,
@@ -64,7 +70,7 @@ async function createMainWindow() {
             spellcheck: spellcheckEnabled
         },
         frame: optionService.getOptionBool('nativeTitleBarVisible'),
-        icon: getIcon()
+        icon: image
     });
 
     mainWindowState.manage(mainWindow);
@@ -102,7 +108,8 @@ async function createMainWindow() {
 }
 
 function getIcon() {
-    return path.join(__dirname, '../../images/app-icons/png/256x256' + (env.isDev() ? '-dev' : '') + '.png');
+//    return path.join(__dirname, '../../images/app-icons/png/256x256' + (env.isDev() ? '-dev' : '') + '.png');
+    return path.join(__dirname, '../../images/app-icons/png/new.png');
 }
 
 async function createSetupWindow() {