eessppeelllloo/hydra
1
0
Fork 0
mirror of https://github.com/hydra-synth/hydra.git synced 2025-12-16 20:00:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

updated editor styling

Browse Source
This commit is contained in:
ojack
2022-02-11 18:10:46 +01:00
parent 141a9b6032
commit c1df452fc4
4 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/web-editor/public/bundle.js
View File

@@ -43862,6 +43862,7 @@ function showConfirmation(successCallback, terminateCallback) {
const html = require('choo/html') const html = require('choo/html')
const Component = require('choo/component') const Component = require('choo/component')
const HydraEditor = require('./editor/editor.js') const HydraEditor = require('./editor/editor.js')
const log = require('./editor/log.js')
module.exports = class Editor extends Component { module.exports = class Editor extends Component {
constructor (id, state, emit) { constructor (id, state, emit) {
@@ -43872,6 +43873,7 @@ module.exports = class Editor extends Component {
} }
load (element) { load (element) {
log.init(this.logElement)
this.editor = new HydraEditor(this.textEl) this.editor = new HydraEditor(this.textEl)
this.editor.on("*", (e, args) => { this.editor.on("*", (e, args) => {
this.emit(e, args) this.emit(e, args)
@@ -43900,13 +43902,15 @@ module.exports = class Editor extends Component {
createElement ({ width = window.innerWidth, height = window.innerHeight} = {}) { createElement ({ width = window.innerWidth, height = window.innerHeight} = {}) {
this.textEl = html` <textarea></textarea>` this.textEl = html` <textarea></textarea>`
return html`<div id="editor-container"> this.logElement = html`<div class="console cm-s-tomorrow-night-eighties"></div>`
${this.textEl} return html`<div id="editor-container" style="display:flex;flex-direction:column;">
<div style="position:relative;flex:auto;padding:15px">${this.textEl}</div>
${this.logElement}
</div>` </div>`
} }
} }
},{"./editor/editor.js":231,"choo/component":31,"choo/html":32}],230:[function(require,module,exports){ },{"./editor/editor.js":231,"./editor/log.js":233,"choo/component":31,"choo/html":32}],230:[function(require,module,exports){
const html = require('choo/html') const html = require('choo/html')
const Component = require('choo/component') const Component = require('choo/component')
const HydraSynth = require('hydra-synth') const HydraSynth = require('hydra-synth')
@@ -44137,12 +44141,14 @@ module.exports = {
var logElement var logElement
module.exports = { module.exports = {
init: () => { init: (el) => {
logElement = document.createElement('div') // logElement = document.createElement('div')
logElement.className = "console cm-s-tomorrow-night-eighties" // logElement.className = "console cm-s-tomorrow-night-eighties"
document.body.appendChild(logElement) // document.body.appendChild(logElement)
logElement = el
}, },
log: (msg, className = "") => { log: (msg, className = "") => {
console.log('logging', msg, className)
if(logElement) logElement.innerHTML =` >> <span class=${className}> ${msg} </span> ` if(logElement) logElement.innerHTML =` >> <span class=${className}> ${msg} </span> `
}, },
hide: () => { hide: () => {

11
frontend/web-editor/public/css/style.css
View File

@@ -69,14 +69,15 @@ a:hover {
height: calc(100% - 20px); */ height: calc(100% - 20px); */
background: transparent; background: transparent;
width: calc(100% - 60px); width: calc(100% - 60px);
height: calc(100% - 60px);
} }
.console { .console {
bottom: 0px; /* bottom: 0px;
position: absolute; position: absolute;
padding: 20px; padding: 20px;
padding-bottom: 5px; padding-bottom: 5px;
width: calc(100% - 40px); width: calc(100% - 40px); */
z-index: 6; z-index: 6;
left: 0px; left: 0px;
font-family: monospace; font-family: monospace;
@@ -98,6 +99,8 @@ a:hover {
#editor-container { #editor-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: fixed; /* position: fixed; */
padding: 20px;
position: absolute;
/* padding: 20px; */
} }

8
frontend/web-editor/src/views/EditorComponent.js
View File

@@ -1,6 +1,7 @@
const html = require('choo/html') const html = require('choo/html')
const Component = require('choo/component') const Component = require('choo/component')
const HydraEditor = require('./editor/editor.js') const HydraEditor = require('./editor/editor.js')
const log = require('./editor/log.js')
module.exports = class Editor extends Component { module.exports = class Editor extends Component {
constructor (id, state, emit) { constructor (id, state, emit) {
@@ -11,6 +12,7 @@ module.exports = class Editor extends Component {
} }
load (element) { load (element) {
log.init(this.logElement)
this.editor = new HydraEditor(this.textEl) this.editor = new HydraEditor(this.textEl)
this.editor.on("*", (e, args) => { this.editor.on("*", (e, args) => {
this.emit(e, args) this.emit(e, args)
@@ -39,8 +41,10 @@ module.exports = class Editor extends Component {
createElement ({ width = window.innerWidth, height = window.innerHeight} = {}) { createElement ({ width = window.innerWidth, height = window.innerHeight} = {}) {
this.textEl = html` <textarea></textarea>` this.textEl = html` <textarea></textarea>`
return html`<div id="editor-container"> this.logElement = html`<div class="console cm-s-tomorrow-night-eighties"></div>`
${this.textEl} return html`<div id="editor-container" style="display:flex;flex-direction:column;">
<div style="position:relative;flex:auto;padding:15px">${this.textEl}</div>
${this.logElement}
</div>` </div>`
} }
} }

10
frontend/web-editor/src/views/editor/log.js
View File

@@ -1,12 +1,14 @@
var logElement var logElement
module.exports = { module.exports = {
init: () => { init: (el) => {
logElement = document.createElement('div') // logElement = document.createElement('div')
logElement.className = "console cm-s-tomorrow-night-eighties" // logElement.className = "console cm-s-tomorrow-night-eighties"
document.body.appendChild(logElement) // document.body.appendChild(logElement)
logElement = el
}, },
log: (msg, className = "") => { log: (msg, className = "") => {
console.log('logging', msg, className)
if(logElement) logElement.innerHTML =` >> <span class=${className}> ${msg} </span> ` if(logElement) logElement.innerHTML =` >> <span class=${className}> ${msg} </span> `
}, },
hide: () => { hide: () => {