Skip to content

Commit

Permalink
Update view.js (#1077)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lutzroeder
lutzroeder committed Apr 26, 2023
1 parent 0e4aa95 commit 044a918
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 45 deletions.
23 changes: 12 additions & 11 deletions source/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,12 +172,13 @@
.toolbar-back-button { margin-top: 6px; margin-bottom: 6px; }
.toolbar-name-button { margin-top: 6px; margin-bottom: 6px; }
}
.sidebar { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif; font-size: 12px; height: 100%; right: -100%; position: fixed; transition: 0.1s; top: 0; background-color: #ececec; color: #242424; overflow: hidden; border-left: 1px solid rgba(255, 255, 255, 0.5); opacity: 0; }
.sidebar { display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif; font-size: 12px; height: 100%; right: -100%; position: fixed; transition: 0.1s; top: 0; background-color: #ececec; color: #242424; overflow: hidden; border-left: 1px solid rgba(255, 255, 255, 0.5); opacity: 0; }
.sidebar-title { font-weight: bold; font-size: 12px; letter-spacing: 0.5px; height: 20px; margin: 0; padding: 20px; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.sidebar-closebutton { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #777777; opacity: 1.0; display: block; transition: 0.2s; position: absolute; top: 0; right: 15px; margin-left: 50px; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.sidebar-closebutton:hover { color: #242424; }
.sidebar-content { padding-left: 20px; padding-right: 20px; margin-bottom: 20px; overflow-y: auto; height: calc(100vh - 60px); }
.sidebar-content { display: flex; flex-direction: column; flex-grow: 1; height: 0; }
.sidebar-header { font-weight: bold; font-size: 11px; text-transform: uppercase; line-height: 1.25; margin-top: 16px; margin-bottom: 16px; border-bottom: 1px solid #ececec; display: block; user-select: none; -webkit-user-select: none; -moz-user-select: none; cursor: default; }
.sidebar-node { flex-grow: 1; padding: 0px 20px 20px 20px; overflow-y: auto; }
.sidebar-item { margin-bottom: 0px; display: block; }
.sidebar-item-name { float: left; font-size: 11px; min-width: 95px; max-width: 95px; padding-right: 5px; padding-top: 7px; display: block; }
.sidebar-item-name input { color: #777; font-family: inherit; font-size: inherit; color: inherit; background-color: inherit; width: 100%; text-align: right; margin: 0; padding: 0; border: 0; outline: none; text-overflow: ellipsis; }
Expand Down Expand Up @@ -207,12 +208,12 @@
background-repeat: no-repeat;
}
.sidebar-separator { margin-bottom: 20px; }
.sidebar-find input[type=text] { font-family: inherit; font-size: 13px; padding: 4px 6px 4px 6px; background: #fff; border-radius: 4px; border: 1px solid #ccc; outline: 0; }
.sidebar-find ol { list-style-type: none; overflow-y: auto; margin: 8px 0 20px 0; padding: 0; }
.sidebar-find li { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; margin: 0; padding: 5px 8px 5px 8px; outline: 0; white-space: nowrap; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.sidebar-find li:not(:first-child) { border-top: 1px solid #f0f0f0; }
.sidebar-find li:hover { background: #eee; }
.sidebar-documentation { font-size: 13px; line-height: 1.5; margin: 0; }
.sidebar-find-search { font-family: inherit; font-size: 13px; margin: 0px 20px 8px 20px; padding: 4px 6px 4px 6px; background: #fff; border-radius: 4px; border: 1px solid #ccc; outline: 0; }
.sidebar-find-content { flex-grow: 1; padding: 0px 20px 20px 20px; padding-right: 20px; overflow-y: auto; list-style-type: none; overflow-y: auto; margin: 0; }
.sidebar-find-content li { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; margin: 0; padding: 5px 8px 5px 8px; outline: 0; white-space: nowrap; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.sidebar-find-content li:not(:first-child) { border-top: 1px solid #f0f0f0; }
.sidebar-find-content li:hover { background: #eee; }
.sidebar-documentation { flex-grow: 1; padding: 0px 20px 20px 20px; overflow-y: auto; font-size: 13px; line-height: 1.5; margin: 0; }
.sidebar-documentation h1 { font-weight: bold; font-size: 13px; line-height: 1.25; border-bottom: 1px solid #e8e8e8; padding-bottom: 0.3em; margin-top: 0; margin-bottom: 16px; }
.sidebar-documentation h2 { font-weight: bold; font-size: 11px; line-height: 1.25; margin-top: 20px; margin-bottom: 16px; text-transform: uppercase; border: 0; }
.sidebar-documentation h3 { font-weight: bold; font-size: 11px; line-height: 1.25; }
Expand Down Expand Up @@ -243,9 +244,9 @@
.sidebar-documentation tt { background-color:#1e1e1e; }
.sidebar-documentation code { background-color: #1e1e1e; }
.sidebar-documentation pre { background-color: #1e1e1e; }
.sidebar-find input[type=text] { background: #383838; color: #dfdfdf; border-color: #424242; }
.sidebar-find li:not(:first-child) { border-top: 1px solid #2a2a2a; }
.sidebar-find li:hover { background: #383838; }
.sidebar-find-search { background: #383838; color: #dfdfdf; border-color: #424242; }
.sidebar-find-content li:not(:first-child) { border-top: 1px solid #2a2a2a; }
.sidebar-find-content li:hover { background: #383838; }
}
@media screen and (prefers-reduced-motion: reduce) {
.menu { transition: none; }
Expand Down
58 changes: 24 additions & 34 deletions source/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@ view.View = class {
this.select(selection);
this.scrollTo(selection);
});
this._sidebar.open(content.content, 'Find');
this._sidebar.open(content.render(), 'Find');
content.focus(this._searchText);
}
}
Expand Down Expand Up @@ -2127,6 +2127,10 @@ view.NodeSidebar = class extends view.Control {
this._inputs = [];
this._outputs = [];

const container = this._host.document.createElement('div');
container.className = 'sidebar-node';
this._elements.push(container);

if (node.type) {
let showDocumentation = null;
const type = node.type;
Expand Down Expand Up @@ -2188,10 +2192,6 @@ view.NodeSidebar = class extends view.Control {
this._addOutput(output.name, output);
}
}

const separator = this._host.document.createElement('div');
separator.className = 'sidebar-separator';
this._elements.push(separator);
}

render() {
Expand All @@ -2202,12 +2202,12 @@ view.NodeSidebar = class extends view.Control {
const element = this._host.document.createElement('div');
element.className = 'sidebar-header';
element.innerText = title;
this._elements.push(element);
this._elements[0].appendChild(element);
}

_addProperty(name, value) {
const item = new view.NameValueView(this._host, name, value);
this._elements.push(item.render());
this._elements[0].appendChild(item.render());
}

_addAttribute(name, attribute) {
Expand All @@ -2217,7 +2217,7 @@ view.NodeSidebar = class extends view.Control {
});
const item = new view.NameValueView(this._host, name, value);
this._attributes.push(item);
this._elements.push(item.render());
this._elements[0].appendChild(item.render());
}

_addInput(name, input) {
Expand All @@ -2229,7 +2229,7 @@ view.NodeSidebar = class extends view.Control {
value.on('deactivate', (sender, value) => this.emit('deactivate', value));
const item = new view.NameValueView(this._host, name, value);
this._inputs.push(item);
this._elements.push(item.render());
this._elements[0].appendChild(item.render());
}
}

Expand All @@ -2240,7 +2240,7 @@ view.NodeSidebar = class extends view.Control {
value.on('deactivate', (sender, value) => this.emit('deactivate', value));
const item = new view.NameValueView(this._host, name, value);
this._outputs.push(item);
this._elements.push(item.render());
this._elements[0].appendChild(item.render());
}
}

Expand Down Expand Up @@ -2744,10 +2744,6 @@ view.ModelSidebar = class extends view.Control {
}
}
}

const separator = this._host.document.createElement('div');
separator.className = 'sidebar-separator';
this._elements.push(separator);
}

render() {
Expand Down Expand Up @@ -2872,10 +2868,6 @@ view.DocumentationSidebar = class extends view.Control {
}

this._elements = [ element ];

const separator = this._host.document.createElement('div');
separator.className = 'sidebar-separator';
this._elements.push(separator);
}
return this._elements;
}
Expand All @@ -2897,24 +2889,22 @@ view.FindSidebar = class extends view.Control {
this._host = host;
this._graphElement = element;
this._graph = graph;
this._contentElement = this._host.document.createElement('div');
this._contentElement.setAttribute('class', 'sidebar-find');

this._searchElement = this._host.document.createElement('input');
this._searchElement.setAttribute('class', 'sidebar-find-search');
this._searchElement.setAttribute('id', 'search');
this._searchElement.setAttribute('type', 'text');
this._searchElement.setAttribute('spellcheck', 'false');
this._searchElement.setAttribute('placeholder', 'Search...');
this._searchElement.setAttribute('style', 'width: 100%');
this._searchElement.addEventListener('input', (e) => {
this.update(e.target.value);
this.emit('search-text-changed', e.target.value);
});
this._resultElement = this._host.document.createElement('ol');
this._resultElement.addEventListener('click', (e) => {
this._contentElement = this._host.document.createElement('ol');
this._contentElement.setAttribute('class', 'sidebar-find-content');
this._contentElement.addEventListener('click', (e) => {
this.select(e);
});
this._contentElement.appendChild(this._searchElement);
this._contentElement.appendChild(this._resultElement);
}

on(event, callback) {
Expand Down Expand Up @@ -2977,8 +2967,8 @@ view.FindSidebar = class extends view.Control {
}

update(searchText) {
while (this._resultElement.lastChild) {
this._resultElement.removeChild(this._resultElement.lastChild);
while (this._contentElement.lastChild) {
this._contentElement.removeChild(this._contentElement.lastChild);
}

let terms = null;
Expand Down Expand Up @@ -3037,7 +3027,7 @@ view.FindSidebar = class extends view.Control {
const inputItem = this._host.document.createElement('li');
inputItem.innerText = '\u2192 ' + argument.name.split('\n').shift(); // custom argument id
inputItem.id = 'edge-' + argument.name;
this._resultElement.appendChild(inputItem);
this._contentElement.appendChild(inputItem);
edges.add(argument.name);
} else {
initializers.push(argument);
Expand All @@ -3055,7 +3045,7 @@ view.FindSidebar = class extends view.Control {
const nameItem = this._host.document.createElement('li');
nameItem.innerText = '\u25A2 ' + (name || '[' + type + ']');
nameItem.id = label.id;
this._resultElement.appendChild(nameItem);
this._contentElement.appendChild(nameItem);
nodes.add(label.id);
}
}
Expand All @@ -3064,7 +3054,7 @@ view.FindSidebar = class extends view.Control {
const initializeItem = this._host.document.createElement('li');
initializeItem.innerText = '\u25A0 ' + argument.name.split('\n').shift(); // custom argument id
initializeItem.id = 'initializer-' + argument.name;
this._resultElement.appendChild(initializeItem);
this._contentElement.appendChild(initializeItem);
}
}
}
Expand All @@ -3078,19 +3068,19 @@ view.FindSidebar = class extends view.Control {
const outputItem = this._host.document.createElement('li');
outputItem.innerText = '\u2192 ' + argument.name.split('\n').shift(); // custom argument id
outputItem.id = 'edge-' + argument.name;
this._resultElement.appendChild(outputItem);
this._contentElement.appendChild(outputItem);
edges.add(argument.name);
}
}
}
}
}

this._resultElement.style.display = this._resultElement.childNodes.length != 0 ? 'block' : 'none';
this._contentElement.style.display = this._contentElement.childNodes.length != 0 ? 'block' : 'none';
}

get content() {
return this._contentElement;
render() {
return [ this._searchElement, this._contentElement ];
}
};

Expand Down

0 comments on commit 044a918

Please sign in to comment.