You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
1.9 KiB
HTML
75 lines
1.9 KiB
HTML
<script type="module">
|
|
class FileGroup extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
this.attachShadow({mode: 'open'})
|
|
this.headerEl = document.createElement('div')
|
|
this.filesEl = document.createElement('div')
|
|
this.shadowRoot.appendChild(this.headerEl)
|
|
this.shadowRoot.appendChild(this.filesEl)
|
|
}
|
|
|
|
connectedCallback() {
|
|
const style = document.createElement('style')
|
|
style.textContent = `
|
|
:host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
div.header {
|
|
}
|
|
div.files {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
overflow-y: auto;
|
|
}
|
|
`
|
|
this.shadowRoot.appendChild(style)
|
|
this.addNewFile()
|
|
}
|
|
|
|
addNewFile() {
|
|
const el = document.createElement('m-file-view')
|
|
this.filesEl.appendChild(el)
|
|
}
|
|
}
|
|
|
|
class FileView extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
this.attachShadow({mode: 'open'})
|
|
}
|
|
|
|
connectedCallback() {
|
|
const style = document.createElement('style')
|
|
style.textContent = `
|
|
:host {
|
|
height: 100px;
|
|
background: #777;
|
|
}
|
|
`
|
|
this.shadowRoot.appendChild(style)
|
|
this.nameEl = document.createElement('input')
|
|
this.shadowRoot.appendChild(this.nameEl)
|
|
}
|
|
}
|
|
|
|
customElements.define('m-file-group', FileGroup)
|
|
customElements.define('m-file-view', FileView)
|
|
|
|
const fileGroup = document.createElement('m-file-group')
|
|
document.body.appendChild(fileGroup)
|
|
</script>
|
|
|
|
<!--
|
|
|
|
Each file has a header with the filename, an edit icon, and a menu icon. When editing or creating a new one, the filename is a text field. When not editing, tapping on the filename expands and collapses it.
|
|
|
|
Tapping on a line selects it and shows icons, tapping on another line selects down to that line.
|
|
|
|
At the top is a dropdown for selecting the file and a button for.
|
|
|
|
After all the files is a plus skeleton icon bar.
|
|
|
|
--> |