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.
106 lines
2.6 KiB
HTML
106 lines
2.6 KiB
HTML
<style>
|
|
html {
|
|
box-sizing: border-box;
|
|
}
|
|
*, *:before, *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
</style>
|
|
<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;
|
|
align-items: stretch;
|
|
}
|
|
div.header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
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'})
|
|
this.headerEl = document.createElement('div')
|
|
this.headerEl.classList.add('header')
|
|
this.contentEl = document.createElement('div')
|
|
this.shadowRoot.appendChild(this.headerEl)
|
|
this.shadowRoot.appendChild(this.contentEl)
|
|
}
|
|
|
|
connectedCallback() {
|
|
const style = document.createElement('style')
|
|
style.textContent = `
|
|
:host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
div.header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background: yellow;
|
|
}
|
|
.name {
|
|
flex-grow: 1;
|
|
}
|
|
`
|
|
this.shadowRoot.appendChild(style)
|
|
this.nameEl = document.createElement('input')
|
|
this.nameEl.classList.add('name')
|
|
this.headerEl.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.
|
|
|
|
--> |