From ea525e56929c73ff9191fd05f5be3bba227ef36f Mon Sep 17 00:00:00 2001 From: kor Date: Tue, 24 Jul 2018 23:50:04 +1200 Subject: [PATCH] Update add view. --- docs/asset/style.css | 95 ++++++++++++++++++++++++++++++++++++-------- docs/index.html | 2 +- docs/logic/main.js | 19 ++++++++- docs/logic/view.js | 52 ++++++++++++++---------- 4 files changed, 129 insertions(+), 39 deletions(-) diff --git a/docs/asset/style.css b/docs/asset/style.css index 8bb764f..6961d6d 100644 --- a/docs/asset/style.css +++ b/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 { diff --git a/docs/index.html b/docs/index.html index 120f399..07f976b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -18,7 +18,7 @@ -
+
diff --git a/docs/logic/main.js b/docs/logic/main.js index 4dc598e..07a3c7e 100644 --- a/docs/logic/main.js +++ b/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() @@ -21,7 +27,12 @@ function Main() this.load = function(target) { - this.queryPrev = this.queryCur; + 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'); + } }; \ No newline at end of file diff --git a/docs/logic/view.js b/docs/logic/view.js index 356faed..5f84ce8 100644 --- a/docs/logic/view.js +++ b/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,35 +59,45 @@ function View() this.setupAdd = function() { this.overlay.innerHTML = ''; - content += `
`; - - content += this.createFormInput('Title'); - content += this.createFormInput('Date'); - content += this.createFormInput('Person'); - content += this.createFormInput('Source'); + let content = `
` - 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'); + // ESCAPE + content += `
`; + content += ``; + content += `
`; + content += `Esc`; + content += `
`; + content += ``; + content += `
`; + + // FORM + content += ``; + 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 += ``; - content += `
`; + content += `
`; this.overlay.innerHTML += content; } - this.createFormInput = function(id) + this.createFormInput = function(key, desc) { return `
-
- -
-
`; +
${key}
+ +
`; } this.setOverlay = function(value)