From 955dc3d23e348ea1ada2bfb844ea299efb1ed092 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Fri, 15 Mar 2019 22:17:54 +0100 Subject: [PATCH 01/13] fixed context menu style --- src/app/ui/contextMenu.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/ui/contextMenu.js b/src/app/ui/contextMenu.js index 4a82b19cdd..93bad6bbc3 100644 --- a/src/app/ui/contextMenu.js +++ b/src/app/ui/contextMenu.js @@ -11,6 +11,7 @@ var css = csjs` width:150px; border-radius: 2px; z-index: 1000; + background-color: var(--light) } .liitem @@ -33,7 +34,7 @@ var css = csjs` #menuitems :hover { - background: $var(--seconday); + background-color: var(--secondary); border-radius: 2px; } ` From 20aa42bf7b9c78cc3e083acc0e59fb49e1391323 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Fri, 15 Mar 2019 22:55:03 +0100 Subject: [PATCH 02/13] added key-navigation to modaldialog --- src/app/ui/modaldialog.js | 50 +++++++++++++++++++------ src/app/ui/styles/modaldialog-styles.js | 15 ++++++++ 2 files changed, 53 insertions(+), 12 deletions(-) diff --git a/src/app/ui/modaldialog.js b/src/app/ui/modaldialog.js index 17a2d96b24..77a69bb2d3 100644 --- a/src/app/ui/modaldialog.js +++ b/src/app/ui/modaldialog.js @@ -2,6 +2,7 @@ var yo = require('yo-yo') var css = require('./styles/modaldialog-styles') module.exports = (title, content, ok, cancel, focusSelector, opts) => { + let agreed = true opts = opts || {} var container = document.querySelector(`.${css.modal}`) if (!container) { @@ -31,10 +32,28 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => { show() + function setFocusOn (btn) { + var okDiv = document.getElementById('modal-footer-ok') + var cancelDiv = document.getElementById('modal-footer-cancel') + if (btn === 'ok') { + agreed = true + okDiv.style.backgroundColor = 'var(--dark)' + okDiv.style.color = 'var(--light)' + cancelDiv.style.backgroundColor = 'var(--light)' + cancelDiv.style.color = 'var(--dark)' + } else { + agreed = false + okDiv.style.backgroundColor = 'var(--light)' + okDiv.style.color = 'var(--dark)' + cancelDiv.style.backgroundColor = 'var(--dark)' + cancelDiv.style.color = 'var(--light)' + } + } + function okListener () { removeEventListener() hide() - if (ok && ok.fn) ok.fn() + if (ok && ok.fn && agreed) ok.fn() } function cancelListener () { @@ -53,6 +72,12 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => { } else if (e.keyCode === 13) { e.preventDefault() okListener() + } else if (e.keyCode === 37) { + e.preventDefault() + setFocusOn('ok') + } else if (e.keyCode === 39) { + e.preventDefault() + setFocusOn('cancel') } } @@ -96,16 +121,17 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => { function html (opts) { return yo`` } diff --git a/src/app/ui/styles/modaldialog-styles.js b/src/app/ui/styles/modaldialog-styles.js index 00b750ec22..25370df7dc 100644 --- a/src/app/ui/styles/modaldialog-styles.js +++ b/src/app/ui/styles/modaldialog-styles.js @@ -56,9 +56,24 @@ var css = csjs` animation-duration: 0.4s } .modalFooterOk { + background-color: var(--light); + color: var(--dark); + cursor: pointer; + } + .modalFooterOk:hover { + background-color: var(--dark); + color: var(--light); cursor: pointer; } .modalFooterCancel { + background-color: var(--light); + color: var(--dark); + margin-left: 1em; + cursor: pointer; + } + .modalFooterCancel:hover { + background-color: var(--dark); + color: var(--light); margin-left: 1em; cursor: pointer; } From 829ddd4d3544fd82279b493bd0d266cfe756fd30 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Fri, 15 Mar 2019 23:11:03 +0100 Subject: [PATCH 03/13] default on 'ok' --- src/app/ui/modaldialog.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/ui/modaldialog.js b/src/app/ui/modaldialog.js index 77a69bb2d3..1055a3649b 100644 --- a/src/app/ui/modaldialog.js +++ b/src/app/ui/modaldialog.js @@ -30,6 +30,8 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => { modal.innerHTML = '' if (content) modal.appendChild(content) + setFocusOn('ok') + show() function setFocusOn (btn) { From 3e5550b3c18addb9756c80f7603e4b6eddd41913 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Mon, 18 Mar 2019 13:44:41 +0100 Subject: [PATCH 04/13] removed bg color from context menu. will be fixed with moveing to complete thems --- src/app/ui/contextMenu.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/ui/contextMenu.js b/src/app/ui/contextMenu.js index 93bad6bbc3..de4726572c 100644 --- a/src/app/ui/contextMenu.js +++ b/src/app/ui/contextMenu.js @@ -11,7 +11,6 @@ var css = csjs` width:150px; border-radius: 2px; z-index: 1000; - background-color: var(--light) } .liitem From 238b936eb5a5da0ce7f34842276a7337558ef131 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Mon, 18 Mar 2019 17:40:54 +0100 Subject: [PATCH 05/13] added bootstrap classes instead of css styleing --- src/app/ui/modaldialog.js | 21 +++++++++------------ src/app/ui/styles/modaldialog-styles.js | 4 ---- 2 files changed, 9 insertions(+), 16 deletions(-) diff --git a/src/app/ui/modaldialog.js b/src/app/ui/modaldialog.js index 1055a3649b..e816792833 100644 --- a/src/app/ui/modaldialog.js +++ b/src/app/ui/modaldialog.js @@ -38,17 +38,11 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => { var okDiv = document.getElementById('modal-footer-ok') var cancelDiv = document.getElementById('modal-footer-cancel') if (btn === 'ok') { - agreed = true - okDiv.style.backgroundColor = 'var(--dark)' - okDiv.style.color = 'var(--light)' - cancelDiv.style.backgroundColor = 'var(--light)' - cancelDiv.style.color = 'var(--dark)' + okDiv.className = okDiv.className.replace(/\bbtn-light\b/g, 'btn-dark') + cancelDiv.className = cancelDiv.className.replace(/\bbtn-dark\b/g, 'btn-light') } else { - agreed = false - okDiv.style.backgroundColor = 'var(--light)' - okDiv.style.color = 'var(--dark)' - cancelDiv.style.backgroundColor = 'var(--dark)' - cancelDiv.style.color = 'var(--light)' + cancelDiv.className = cancelDiv.className.replace(/\bbtn-light\b/g, 'btn-dark') + okDiv.className = okDiv.className.replace(/\bbtn-dark\b/g, 'btn-light') } } @@ -76,9 +70,11 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => { okListener() } else if (e.keyCode === 37) { e.preventDefault() + agreed = true setFocusOn('ok') } else if (e.keyCode === 39) { e.preventDefault() + agreed = false setFocusOn('cancel') } } @@ -131,9 +127,10 @@ function html (opts) {
-
- OK - Cancel + OK + Cancel
` } + diff --git a/src/app/ui/styles/modaldialog-styles.js b/src/app/ui/styles/modaldialog-styles.js index 25370df7dc..96cbed8efb 100644 --- a/src/app/ui/styles/modaldialog-styles.js +++ b/src/app/ui/styles/modaldialog-styles.js @@ -61,8 +61,6 @@ var css = csjs` cursor: pointer; } .modalFooterOk:hover { - background-color: var(--dark); - color: var(--light); cursor: pointer; } .modalFooterCancel { @@ -72,8 +70,6 @@ var css = csjs` cursor: pointer; } .modalFooterCancel:hover { - background-color: var(--dark); - color: var(--light); margin-left: 1em; cursor: pointer; } From 903924b39b3f2f46b66f21230acf5392645aec9b Mon Sep 17 00:00:00 2001 From: LianaHus Date: Thu, 21 Mar 2019 12:42:00 +0100 Subject: [PATCH 06/13] readded bg for context menu. added bg for +- and tabs --- src/app/panels/tab-proxy.js | 4 ++-- src/app/ui/contextMenu.js | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app/panels/tab-proxy.js b/src/app/panels/tab-proxy.js index b72bf4b21b..3d9c7313e4 100644 --- a/src/app/panels/tab-proxy.js +++ b/src/app/panels/tab-proxy.js @@ -110,8 +110,8 @@ export class TabProxy {
- - + +
${this._view.tabs} diff --git a/src/app/ui/contextMenu.js b/src/app/ui/contextMenu.js index de4726572c..b204222f30 100644 --- a/src/app/ui/contextMenu.js +++ b/src/app/ui/contextMenu.js @@ -11,6 +11,7 @@ var css = csjs` width:150px; border-radius: 2px; z-index: 1000; + background-color: var(--light) } .liitem @@ -28,7 +29,7 @@ var css = csjs` padding-left: 5px; padding-right: 5px; padding-bottom: 3px; - color: var(--primary); + color: var(--dark); } #menuitems :hover From a35491bf7ec6cb988bbe7c1f10f4958755031352 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Fri, 22 Mar 2019 19:21:24 +0100 Subject: [PATCH 07/13] moved bg color from css to div as class --- src/app/ui/contextMenu.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/app/ui/contextMenu.js b/src/app/ui/contextMenu.js index b204222f30..7fa1c2171e 100644 --- a/src/app/ui/contextMenu.js +++ b/src/app/ui/contextMenu.js @@ -11,7 +11,6 @@ var css = csjs` width:150px; border-radius: 2px; z-index: 1000; - background-color: var(--light) } .liitem @@ -54,11 +53,11 @@ module.exports = (event, items) => { current.onclick = () => { hide(null, true); items[item]() } return current }) - var container = yo`
` + var container = yo`
` container.style.left = event.pageX + 'px' container.style.top = event.pageY + 'px' container.style.display = 'block' - + document.querySelector('body').appendChild(container) setTimeout(() => { window.addEventListener('click', hide) From 32ac63a6f8bf3ba04f8db34c994fa2619b307f1d Mon Sep 17 00:00:00 2001 From: LianaHus Date: Mon, 25 Mar 2019 12:01:55 +0100 Subject: [PATCH 08/13] updated themes --- src/app/panels/tab-proxy.js | 4 +-- src/app/ui/contextMenu.js | 41 ++++++++++-------------- src/app/ui/styles-guide/theme-chooser.js | 22 +++++++------ 3 files changed, 31 insertions(+), 36 deletions(-) diff --git a/src/app/panels/tab-proxy.js b/src/app/panels/tab-proxy.js index 3d9c7313e4..14d6fb0a93 100644 --- a/src/app/panels/tab-proxy.js +++ b/src/app/panels/tab-proxy.js @@ -110,8 +110,8 @@ export class TabProxy {
- - + +
${this._view.tabs} diff --git a/src/app/ui/contextMenu.js b/src/app/ui/contextMenu.js index 7fa1c2171e..103e39e9bb 100644 --- a/src/app/ui/contextMenu.js +++ b/src/app/ui/contextMenu.js @@ -5,36 +5,29 @@ var csjs = require('csjs-inject') var css = csjs` .container { - display: none; - position: fixed; - border: 1px solid var(--primary); - width:150px; - border-radius: 2px; - z-index: 1000; + display: none; + position: fixed; + width:100px; + border-radius: 2px; + z-index: 1000; + box-shadow: 0 0 4px var(--dark); } - .liitem { - padding: 3px; - padding-left: 10px; - cursor: pointer; + padding: 2px; + padding-left: 6px; + cursor: pointer; + color: var(--text-dark); + background-color: var(--light) } - - #menuitems + .liitem:hover { - list-style: none; - margin: 0px; - margin-top: 4px; - padding-left: 5px; - padding-right: 5px; - padding-bottom: 3px; - color: var(--dark); + background-color: var(--secondary); } - - #menuitems :hover + #menuitems { - background-color: var(--secondary); - border-radius: 2px; + list-style: none; + margin: 0px; } ` @@ -53,7 +46,7 @@ module.exports = (event, items) => { current.onclick = () => { hide(null, true); items[item]() } return current }) - var container = yo`
` + var container = yo`
` container.style.left = event.pageX + 'px' container.style.top = event.pageY + 'px' container.style.display = 'block' diff --git a/src/app/ui/styles-guide/theme-chooser.js b/src/app/ui/styles-guide/theme-chooser.js index 125bdbc597..6d21113423 100644 --- a/src/app/ui/styles-guide/theme-chooser.js +++ b/src/app/ui/styles-guide/theme-chooser.js @@ -3,16 +3,18 @@ var EventEmitter = require('events') // TODO : Put it somewhere else const themes = [ - {name: 'cerulean', quality: 'light', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cerulean/bootstrap.min.css'}, - {name: 'materia', quality: 'light', url: 'https://bootswatch.com/4/materia/bootstrap.min.css'}, - {name: 'litera', quality: 'light', url: 'https://bootswatch.com/4/litera/bootstrap.min.css'}, - {name: 'cosmo', quality: 'light', url: 'https://bootswatch.com/4/cosmo/bootstrap.min.css'}, - {name: 'flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'}, - {name: 'lux', quality: 'light', url: 'https://bootswatch.com/4/lux/bootstrap.min.css'}, - {name: 'spacelab', quality: 'light', url: 'https://bootswatch.com/4/spacelab/bootstrap.min.css'}, - {name: 'yeti', quality: 'light', url: 'https://bootswatch.com/4/yeti/bootstrap.min.css'}, - {name: 'darkly', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/darkly/bootstrap.min.css'}, - {name: 'slate', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/slate/bootstrap.min.css'} + {name: 'Flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'}, + {name: 'Journal', quality: 'light', url: 'https://bootswatch.com/4/journal/bootstrap.min.css'}, + {name: 'Lumen', quality: 'light', url: 'https://bootswatch.com/4/lumen/bootstrap.min.css'}, + {name: 'Minty', quality: 'light', url: 'https://bootswatch.com/4/minty/bootstrap.min.css'}, + {name: 'Sandstone', quality: 'light', url: 'https://bootswatch.com/4/sandstone/bootstrap.min.css'}, + {name: 'Spacelab', quality: 'light', url: 'https://bootswatch.com/4/spacelab/bootstrap.min.css'}, + {name: 'United', quality: 'light', url: 'https://bootswatch.com/4/united/bootstrap.min.css'}, + {name: 'Yeti', quality: 'light', url: 'https://bootswatch.com/4/yeti/bootstrap.min.css'}, + {name: 'Cyborg', quality: 'dark', url: 'https://bootswatch.com/4/cyborg/bootstrap.min.css'}, + {name: 'Darkly', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/darkly/bootstrap.min.css'}, + {name: 'Slate', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/slate/bootstrap.min.css'}, + {name: 'Superhero', quality: 'dark', url: 'https://bootswatch.com/4/superhero/bootstrap.min.css'} ] const defaultTheme = themes[0].name From 1f49d1058da615630789e5f9a9886d7a26b8c08d Mon Sep 17 00:00:00 2001 From: LianaHus Date: Tue, 26 Mar 2019 09:03:59 +0100 Subject: [PATCH 09/13] fix in style --- src/app/ui/contextMenu.js | 2 +- src/app/ui/modaldialog.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/ui/contextMenu.js b/src/app/ui/contextMenu.js index 103e39e9bb..ec9b7e0823 100644 --- a/src/app/ui/contextMenu.js +++ b/src/app/ui/contextMenu.js @@ -50,7 +50,7 @@ module.exports = (event, items) => { container.style.left = event.pageX + 'px' container.style.top = event.pageY + 'px' container.style.display = 'block' - + document.querySelector('body').appendChild(container) setTimeout(() => { window.addEventListener('click', hide) diff --git a/src/app/ui/modaldialog.js b/src/app/ui/modaldialog.js index e816792833..44fe11e937 100644 --- a/src/app/ui/modaldialog.js +++ b/src/app/ui/modaldialog.js @@ -133,4 +133,3 @@ function html (opts) {
` } - From c3981a5c915a4a7b097c2b97ce85766f7e4bd3e1 Mon Sep 17 00:00:00 2001 From: yann300 Date: Tue, 26 Mar 2019 10:06:16 +0100 Subject: [PATCH 10/13] typo --- src/app/ui/contextMenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/ui/contextMenu.js b/src/app/ui/contextMenu.js index ec9b7e0823..b4d09a72ec 100644 --- a/src/app/ui/contextMenu.js +++ b/src/app/ui/contextMenu.js @@ -18,7 +18,7 @@ var css = csjs` padding-left: 6px; cursor: pointer; color: var(--text-dark); - background-color: var(--light) + background-color: var(--light); } .liitem:hover { From ebdc460ad351f053f8e2383a84785bc1049e1752 Mon Sep 17 00:00:00 2001 From: Liana Husikyan Date: Tue, 26 Mar 2019 10:27:41 +0100 Subject: [PATCH 11/13] Update theme-chooser.js --- src/app/ui/styles-guide/theme-chooser.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/ui/styles-guide/theme-chooser.js b/src/app/ui/styles-guide/theme-chooser.js index 6d21113423..ed7a4035e8 100644 --- a/src/app/ui/styles-guide/theme-chooser.js +++ b/src/app/ui/styles-guide/theme-chooser.js @@ -3,6 +3,7 @@ var EventEmitter = require('events') // TODO : Put it somewhere else const themes = [ + {name: 'cerulean', quality: 'light', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cerulean/bootstrap.min.css'}, {name: 'Flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'}, {name: 'Journal', quality: 'light', url: 'https://bootswatch.com/4/journal/bootstrap.min.css'}, {name: 'Lumen', quality: 'light', url: 'https://bootswatch.com/4/lumen/bootstrap.min.css'}, From 9b05af8af6b99542bf21fd19804f5d735d2cff94 Mon Sep 17 00:00:00 2001 From: Liana Husikyan Date: Tue, 26 Mar 2019 10:37:16 +0100 Subject: [PATCH 12/13] Update theme-chooser.js --- src/app/ui/styles-guide/theme-chooser.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/ui/styles-guide/theme-chooser.js b/src/app/ui/styles-guide/theme-chooser.js index ed7a4035e8..aa96329cf6 100644 --- a/src/app/ui/styles-guide/theme-chooser.js +++ b/src/app/ui/styles-guide/theme-chooser.js @@ -3,7 +3,6 @@ var EventEmitter = require('events') // TODO : Put it somewhere else const themes = [ - {name: 'cerulean', quality: 'light', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cerulean/bootstrap.min.css'}, {name: 'Flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'}, {name: 'Journal', quality: 'light', url: 'https://bootswatch.com/4/journal/bootstrap.min.css'}, {name: 'Lumen', quality: 'light', url: 'https://bootswatch.com/4/lumen/bootstrap.min.css'}, @@ -18,7 +17,7 @@ const themes = [ {name: 'Superhero', quality: 'dark', url: 'https://bootswatch.com/4/superhero/bootstrap.min.css'} ] -const defaultTheme = themes[0].name +const defaultTheme = 'Flatly' module.exports = { event: new EventEmitter(), From 063641537103d7896fa08707febaf94bc2966631 Mon Sep 17 00:00:00 2001 From: Liana Husikyan Date: Tue, 26 Mar 2019 10:52:12 +0100 Subject: [PATCH 13/13] Update theme-chooser.js --- src/app/ui/styles-guide/theme-chooser.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/ui/styles-guide/theme-chooser.js b/src/app/ui/styles-guide/theme-chooser.js index aa96329cf6..dfc2d021f6 100644 --- a/src/app/ui/styles-guide/theme-chooser.js +++ b/src/app/ui/styles-guide/theme-chooser.js @@ -17,7 +17,7 @@ const themes = [ {name: 'Superhero', quality: 'dark', url: 'https://bootswatch.com/4/superhero/bootstrap.min.css'} ] -const defaultTheme = 'Flatly' +const defaultTheme = 'Superhero' module.exports = { event: new EventEmitter(),