mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #1765 from ethereum/swap_it_style_fixes_l

Browse Source 
Swap it key navigation on modal dialog and context menu style fixes
pull/1/head
yann300 6 years ago committed by GitHub
parent 5814821b37 0636415371
commit 70dff20578
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 79 additions and 49 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      src/app/panels/tab-proxy.js
  2. 29
      src/app/ui/contextMenu.js
  3. 28
      src/app/ui/modaldialog.js
  4. 24
      src/app/ui/styles-guide/theme-chooser.js
  5. 11
      src/app/ui/styles/modaldialog-styles.js

4
src/app/panels/tab-proxy.js
Unescape View File

@ -110,8 +110,8 @@ export class TabProxy {
<div class="d-flex">
<div class="m-1">
<span class="p-1">
<i class="m-1 fa fa-plus" onclick=${increase} aria-hidden="true" title="increase editor font size"></i>
<i class="m-1 fa fa-minus" onclick=${decrease} aria-hidden="true" title="decrease editor font size"></i>
<i class="m-1 fa fa-plus" style="color: var(--text-dark)" onclick=${increase} aria-hidden="true" title="increase editor font size"></i>
<i class="m-1 fa fa-minus" style="color: var(--text-dark)" onclick=${decrease} aria-hidden="true" title="decrease editor font size"></i>
</span>
</div>
${this._view.tabs}

29
src/app/ui/contextMenu.js
Unescape View File

@ -7,34 +7,27 @@ var css = csjs`
{
display: none;
position: fixed;
border: 1px solid var(--primary);
width:150px;
width:100px;
border-radius: 2px;
z-index: 1000;
box-shadow: 0 0 4px var(--dark);
}
.liitem
{
padding: 3px;
padding-left: 10px;
padding: 2px;
padding-left: 6px;
cursor: pointer;
color: var(--text-dark);
background-color: var(--light);
}
.liitem:hover
{
background-color: var(--secondary);
}
#menuitems
{
list-style: none;
margin: 0px;
margin-top: 4px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 3px;
color: var(--primary);
}
#menuitems :hover
{
background: $var(--seconday);
border-radius: 2px;
}
`
@ -53,7 +46,7 @@ module.exports = (event, items) => {
current.onclick = () => { hide(null, true); items[item]() }
return current
})
var container = yo`<div class=${css.container}><ul id='menuitems'>${menu}</ul></div>`
var container = yo`<div class="${css.container} bg-light"><ul id='menuitems'>${menu}</ul></div>`
container.style.left = event.pageX + 'px'
container.style.top = event.pageY + 'px'
container.style.display = 'block'

28
src/app/ui/modaldialog.js
Unescape View File

@ -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) {
@ -29,12 +30,26 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => {
modal.innerHTML = ''
if (content) modal.appendChild(content)
setFocusOn('ok')
show()
function setFocusOn (btn) {
var okDiv = document.getElementById('modal-footer-ok')
var cancelDiv = document.getElementById('modal-footer-cancel')
if (btn === 'ok') {
okDiv.className = okDiv.className.replace(/\bbtn-light\b/g, 'btn-dark')
cancelDiv.className = cancelDiv.className.replace(/\bbtn-dark\b/g, 'btn-light')
} else {
cancelDiv.className = cancelDiv.className.replace(/\bbtn-light\b/g, 'btn-dark')
okDiv.className = okDiv.className.replace(/\bbtn-dark\b/g, 'btn-light')
}
}
function okListener () {
removeEventListener()
hide()
if (ok && ok.fn) ok.fn()
if (ok && ok.fn && agreed) ok.fn()
}
function cancelListener () {
@ -53,6 +68,14 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => {
} else if (e.keyCode === 13) {
e.preventDefault()
okListener()
} else if (e.keyCode === 37) {
e.preventDefault()
agreed = true
setFocusOn('ok')
} else if (e.keyCode === 39) {
e.preventDefault()
agreed = false
setFocusOn('cancel')
}
}
@ -104,7 +127,8 @@ function html (opts) {
<div class="${css['modalBody']}"> -
</div>
<div class="${css['modalFooter']}">
<span id="modal-footer-ok" class="${css['modalFooterOk']} btn btn-sm btn-primary">OK</span><span id="modal-footer-cancel" class="${css['modalFooterCancel']} btn btn-sm btn-primary">Cancel</span>
<span id="modal-footer-ok" class="${css['modalFooterOk']} btn btn-sm btn-light">OK</span>
<span id="modal-footer-cancel" class="${css['modalFooterCancel']} btn btn-sm btn-light">Cancel</span>
</div>
</div>
</div>`

24
src/app/ui/styles-guide/theme-chooser.js
Unescape View File

@ -3,19 +3,21 @@ 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
const defaultTheme = 'Superhero'
module.exports = {
event: new EventEmitter(),

11
src/app/ui/styles/modaldialog-styles.js
Unescape View File

@ -56,9 +56,20 @@ var css = csjs`
animation-duration: 0.4s
}
.modalFooterOk {
background-color: var(--light);
color: var(--dark);
cursor: pointer;
}
.modalFooterOk:hover {
cursor: pointer;
}
.modalFooterCancel {
background-color: var(--light);
color: var(--dark);
margin-left: 1em;
cursor: pointer;
}
.modalFooterCancel:hover {
margin-left: 1em;
cursor: pointer;
}

Write Preview
Loading…
Cancel
Save