Stores inputs in memory instead of in textareas.

Allow selecting multiple files.
Allow drag and dropping multiple files.
Clear all IO button will close all tabs.
Will now spawn multiple loaderworkers simultaneously.
Improve tab logic to break less and work in Firefox.
This commit is contained in:
j433866 2019-03-22 15:10:19 +00:00
parent 37218c1e81
commit c0c83c5cdc
5 changed files with 300 additions and 230 deletions

View file

@ -6,7 +6,7 @@
* @license Apache-2.0
*/
.input-text,
#input-text,
#output-text,
#output-html {
position: relative;
@ -30,12 +30,6 @@
-moz-padding-start: 1px; /* Fixes bug in Firefox */
}
#multi-input-wrapper {
display: flex;
flex-direction: column;
height: calc(100% - var(--title-height));
}
#input-tabs ul {
list-style: none;
background-color: var(--title-background-colour);
@ -69,16 +63,21 @@
.active-input-tab {
font-weight: bold;
background-color: var(--primary-background-colour);
}
.input-tab-content {
width: 100%;
max-width: 100%;
padding-left: 5px;
padding-right: 5px;
padding-top: 10px;
padding-bottom: 10px;
height: var(--tab-height);
vertical-align: middle;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.btn-close-tab {
@ -89,7 +88,7 @@
.textarea-wrapper {
width: 100%;
height: 100%;
height: calc(100% - var(--title-height));
box-sizing: border-box;
overflow: hidden;
pointer-events: auto;
@ -102,21 +101,13 @@
color: var(--fixed-width-font-colour);
}
.input-wrapper {
display: none;
}
.active-input-area {
display: inline-block;
}
#input-highlighter,
#output-highlighter {
position: absolute;
left: 0;
bottom: 0;
top: 0;
width: 100%;
height: calc(100% - var(--title-height));
height: 100%;
padding: 3px;
margin: 0;
overflow: hidden;
@ -167,13 +158,13 @@
transition: all 0.5s ease;
}
.input-file,
#input-file,
#output-file {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: calc(100% - var(--tab-height) - var(--title-height));
height: calc(100% - var(--title-height));
display: none;
}
@ -213,7 +204,6 @@
.dropping-file {
border: 5px dashed var(--drop-file-border-colour) !important;
margin: -5px;
}
#stale-indicator {