From ab519342e88c60e1d5afd4acc510636f5d900ac5 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sat, 20 Jan 2024 16:05:00 +0000
Subject: [PATCH] Styling the files pane.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4785 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 core/client.js | 35 +++++++++++------------------------
 1 file changed, 11 insertions(+), 24 deletions(-)

diff --git a/core/client.js b/core/client.js
index a511eab1..ec80f34c 100644
--- a/core/client.js
+++ b/core/client.js
@@ -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}
-					${expander}
-				</div>
+			<link type="text/css" rel="stylesheet" href="/static/w3.css">
+			<div style="display: flex; flex-direction: column; height: 100%">
+				${expander}
 				${this.expanded ? content : undefined}
 			</div>
 		`;