Update add view.

docs/asset/style.css

@@ -4,27 +4,31 @@
   --color-main-bg-i: #ddd; /*idle*/
   --color-main-bg-e: #ddd; /*enabled*/
   
-  --color-content-bg-i: #ccc; /*idle*/
-  --color-content-bg-e: #bbb; /*enabled*/
-
   --color-menu-bg-i: #000; /*idle*/
   --color-menu-bg-e: #000; /*enabled*/
+  --color-menu-item-i: #333; /*idle*/
+  --color-menu-item-e: #999; /*enabled*/
+  --color-menu-item-a: #ddd; /*ascent*/
 
+  --color-content-bg-i: #ccc; /*idle*/
+  --color-content-bg-e: #bbb; /*enabled*/
   --color-content-item-s: #bbb; /*sub*/
   --color-content-item-i: #999; /*idle*/
   --color-content-item-e: #666; /*enabled*/
   --color-content-item-t: #000; /*title*/
   --color-content-item-a: #000; /*ascent*/
-
   --color-content-image-s: rgba(255, 255, 255, .1); /*sub*/
   --color-content-image-i: rgba(255, 255, 255, .3); /*idle*/
   --color-content-image-e: rgba(255, 255, 255, .5); /*enabled*/
   --color-content-image-t: #fff; /*title*/
   --color-content-image-a: #fff; /*ascent*/
 
-  --color-menu-item-i: #333; /*idle*/
-  --color-menu-item-e: #999; /*enabled*/
-  --color-menu-item-a: #ddd; /*ascent*/
+  --color-overlay-bg-i: #000; /*idle*/
+  --color-overlay-bg-e: #111; /*enabled*/
+  --color-overlay-item-s: #111; /*sub*/
+  --color-overlay-item-i: #222; /*idle*/
+  --color-overlay-item-e: #333; /*enabled*/
+  --color-overlay-item-a: #666; /*ascent*/
 
   /* SIZE */
   --menu-width: 150px;
@@ -154,10 +158,20 @@ body {
 	float: left;
 }
 
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+}
+
 /* PAGE */
 .page-overlay {
   /* visual */
-  background-color: #000;
+  background-color: var(--color-overlay-bg-i);
   opacity: 0;
   -webkit-transition: opacity var(--animation-time) linear;
   transition: opacity var(--animation-time) linear;
@@ -172,27 +186,76 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
+  user-select: none;
 }
-.page-overlay .content .row {
-  /*float: left;
-  clear: both;*/
-  /*height: 40px;*/
+.page-overlay .content-menu {
+  width: 100px;
+  float: left;
+  text-align: center;
+  height: 100%;
+  padding-top: auto;
+  padding-bottom: auto;
+  margin-right: 50px;
+  border-radius: var(--size-item-corner);
+}
+.page-overlay .content-menu:hover {
+  background-color: var(--color-overlay-item-i);
+}
+.page-overlay .content-menu:hover a {
+  color: var(--color-overlay-item-a);
+}
+.page-overlay .content-menu a {
+  color: var(--color-overlay-item-e);
+  text-decoration: none;
+}
+.page-overlay .content-menu a {
+}
+
+.page-overlay .content-menu .content-menu-option {
+  height: 100px;
+  width: 100px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.page-overlay .content form {
+  float: left;
+}
+.page-overlay .content .row .key {
+  width: 100px;
+  color: var(--color-overlay-item-e);
+  color: #000;
+  float: left;
+  padding: 9px 7px 10px 0;
+  text-align: right;
+  margin-right: 0px;
 }
 .page-overlay .content .row input {
   padding: 10px;
   width: 400px;
   margin-bottom: 10px;
-  background-color: transparent;
+  /*background-color: transparent;*/
+  background-color: var(--color-overlay-bg-e);
   color: #fff;
-  border-width: 1px;
+  border-width: 0px;
+  /*border-width: 1px;
   border-style: solid;
-  border-color: var(--color-menu-item-i);
+  border-color: var(--color-menu-item-i);*/
   border-radius: var(--size-item-corner);
 }
-.page-overlay .content .row input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+.page-overlay .content .row input::placeholder {
   opacity: 1;
   color: var(--color-menu-item-i);
 }
+.page-overlay .content .row input:hover {
+  /*background-color: var(--color-content-item-a);*/
+  background-color: var(--color-overlay-item-i);
+}
+.page-overlay .content .row input:focus {
+  /*background-color: var(--color-content-item-a);*/
+  background-color: var(--color-overlay-item-e);
+}
 
 /* CONTENT */
 .container {

docs/index.html

@@ -18,7 +18,7 @@
   <script src="logic/main.js"></script>
 </head>
 <body>
-  <div class="page-overlay" id="overlay"></div>
+  <div class="page-overlay noselect" id="overlay"></div>
   <div class="menu" id="menu"></div>
   <div class="container" id="container">
     <div class="grid" id="grid"></div>

docs/logic/main.js

@@ -11,6 +11,12 @@ function Main()
     this.db.install();
     this.view = new View();
     this.view.install();
+
+    var escape = document.getElementById("escape");
+    escape.onclick = function()
+    {
+      main.load(main.queryPrev);
+    }
   }
 
   this.start = function()
@@ -20,8 +26,13 @@ function Main()
   }
 
   this.load = function(target)
+  {
+    document.activeElement.blur();
+    if (this.queryCur != 'add')
     {
       this.queryPrev = this.queryCur;
+    }
+    
     target = target.substr(0,1) == "#" ? target.substr(1,target.length-1) : target;
     this.queryCur = target.trim();
 
@@ -47,6 +58,7 @@ document.onkeydown = function(evt)
 {
   evt = evt || window.event;
   var isEscape = false;
+  var isA = false;
   
   if ("key" in evt)
   {
@@ -56,6 +68,7 @@ document.onkeydown = function(evt)
   {
     isEscape = (evt.keyCode == 27);
   }
+  isA = (evt.keyCode == 65);
   
   if (isEscape)
   {
@@ -64,4 +77,8 @@ document.onkeydown = function(evt)
       main.load(main.queryPrev);
     }
   }
+  else if (isA && main.queryCur != 'add')
+  {
+    main.load('add');
+  }
 };

docs/logic/view.js

@@ -13,7 +13,7 @@ function View()
   const SETTINGS = {
     STATSNUMTAGS: 5,
     STATSNUMTYPE: 10,
-    WIDEGRIDITEM: false,
+    WIDEGRIDITEM: true,
     USEMASONRY: true,
     GRIDITEMIDBASE: 'item',
     SHOWUPPER: true,
@@ -59,34 +59,44 @@ function View()
   this.setupAdd = function()
   {
     this.overlay.innerHTML = '';
-    content += `<div class="content"><form>`;
+    let content = `<div class="content">`
 
-    content += this.createFormInput('Title');
-    content += this.createFormInput('Date');
-    content += this.createFormInput('Person');
-    content += this.createFormInput('Source');
+    // ESCAPE
+    content += `<div class="content-menu">`;
+    content += `<a href="javascript:void(0);" id="escape">`;
+    content += `<div class="content-menu-option">`;
+    content += `<b>Esc</b>`;
+    content += `</div>`;
+    content += `</a>`;
+    content += `</div>`;
 
-    content += this.createFormInput('Project');
-    content += this.createFormInput('Type');
-    content += this.createFormInput('Link');
-    content += this.createFormInput('Tags');
-    content += this.createFormInput('Note');
-    content += this.createFormInput('Quote');
-    content += this.createFormInput('Terms');
-    content += this.createFormInput('Progress');
+    // FORM
+    content += `<form>`;
+    content += this.createFormInput('TITLE', 'Title');
+    content += this.createFormInput('DATE', 'Date');
+    content += this.createFormInput('PERS', 'Person');
+    content += this.createFormInput('SRCE', 'Source');
+    content += this.createFormInput('PROJ', 'Project');
+    content += this.createFormInput('TYPE', 'Type');
+    content += this.createFormInput('LINK', 'Link');
+    content += this.createFormInput('TAGS', 'Tags');
+    content += this.createFormInput('NOTE', 'Note');
+    content += this.createFormInput('QOTE', 'Quote');
+    content += this.createFormInput('TERM', 'Terms');
+    content += this.createFormInput('PROG', 'Progress');
     // DONE
     // REVI
+    content += `</form>`;
 
-    content += `</form></div>`;
+    content += `</div>`;
     this.overlay.innerHTML += content;
   }
 
-  this.createFormInput = function(id)
+  this.createFormInput = function(key, desc)
   {
     return `<div class="row">
-            <div class="input-field">
-              <input placeholder="${id}" id="${id}">
-            </div>
+              <div class="key">${key}</div>
+              <input placeholder="${desc}" id="${desc}">
             </div>`;
   }