cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 27 Wiki Activity

Styling the files pane.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4785 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2024-01-20 16:05:00 +00:00
parent 1f0b9012e3
commit ab519342e8
1 changed files with 11 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
core/client.js
View File

@ -284,33 +284,20 @@ class TfFilesPaneElement extends LitElement {
render() {
let self = this;
let expander = this.expanded ?
html`<span @click=${() => self.set_expanded(false)} class="expander">«</span>` :
html`<span @click=${() => self.set_expanded(true)} class="expander">»</span>`;
html`<div class="w3-button w3-bar-item w3-blue" style="flex: 0 0 auto; display: flex; flex-direction: row" @click=${() => self.set_expanded(false)}>
<span style="flex: 1 1" font-weight: bold; text-align: center; flex: 1">Files</span>
<span style="flex: 0 0">«</span>
</div>` :
html`<div class="w3-button w3-bar-item w3-blue" @click=${() => self.set_expanded(true)}>»</div>`;
let content = html`
<link type="text/css" rel="stylesheet" href="/static/w3.css">
<div id="files_content">
<tf-files .files=${self.files} current=${self.current} @file_click=${event => openFile(event.detail.file)}></tf-files>
<br>
<div><button class="w3-button w3-blue" style="width: 100%" @click=${() => newFile()} accesskey="n" @mouseover=${set_access_key_title} data-tip="Add a new, empty file to the app">📄New File</button></div>
<div><button class="w3-button w3-blue" style="width: 100%" @click=${() => removeFile()} accesskey="r" @mouseover=${set_access_key_title} data-tip="Remove the selected file from the app">🚮Remove File</button></div>
</div>
<tf-files style="flex: 1 1; overflow: scroll" .files=${self.files} current=${self.current} @file_click=${event => openFile(event.detail.file)}></tf-files>
<div><button class="w3-bar-item w3-button w3-blue" style="width: 100%; flex: 0 0" @click=${() => newFile()} accesskey="n" @mouseover=${set_access_key_title} data-tip="Add a new, empty file to the app">📄 New File</button></div>
<div><button class="w3-bar-item w3-button w3-blue" style="width: 100%; flex: 0 0" @click=${() => removeFile()} accesskey="r" @mouseover=${set_access_key_title} data-tip="Remove the selected file from the app">🚮 Remove File</button></div>
`;
return html`
<style>
.expander {
font-weight: bold;
width: 100%;
right: 0;
flex: 0;
padding: 0.25em;
cursor: pointer;
}
</style>
<div>
<div style="display: flex; flex-direction: row">
${this.expanded ? html`<span style="font-weight: bold; text-align: center; flex: 1">Files</span>` : undefined}
<link type="text/css" rel="stylesheet" href="/static/w3.css">
<div style="display: flex; flex-direction: column; height: 100%">
${expander}
</div>
${this.expanded ? content : undefined}
</div>
`;