From 011038a38adc600469cb1db90d260135110800cf Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sat, 26 Feb 2022 22:51:35 +0000
Subject: [PATCH] Make the files pane collapsible.  This is the limit of my CSS
 ability.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3848 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 core/client.js  |  8 ++++++++
 core/index.html | 17 ++++++++++++-----
 core/style.css  | 45 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/core/client.js b/core/client.js
index f136ac02..97f0ae13 100644
--- a/core/client.js
+++ b/core/client.js
@@ -113,6 +113,14 @@ function edit() {
 	});
 }
 
+function hideFiles() {
+	document.getElementById('filesPane').classList.add('collapsed');
+}
+
+function showFiles() {
+	document.getElementById('filesPane').classList.remove('collapsed');
+}
+
 function trace() {
 	fetch('/trace')
 		.then(function(response) {
diff --git a/core/index.html b/core/index.html
index 056c6fb2..d01c8e31 100644
--- a/core/index.html
+++ b/core/index.html
@@ -35,11 +35,18 @@
 					<input type="button" id="revert" name="revert" value="Revert to Saved" onclick="revert()">
 				</div>
 				<div class="hbox" style="height: 100%">
-					<div id="filesPane" style="flex: 1 1 10%">
-						<ul id="files"></ul>
-						<br>
-						<div><button onclick="newFile()">New File</button></div>
-						<div><button onclick="removeFile()">Remove File</button></div>
+					<div id="filesPane">
+						<div class="hbox">
+							<span id="files_header">Files</span>
+							<span id="files_hide" onclick="hideFiles()">«</span>
+							<span id="files_show" onclick="showFiles()">»</span>
+						</div>
+						<div id="files_content">
+							<ul id="files"></ul>
+							<br>
+							<div><button onclick="newFile()">New File</button></div>
+							<div><button onclick="removeFile()">Remove File</button></div>
+						</div>
 					</div>
 					<div id="docPane" style="display: flex; flex: 1 1 50%; flex-flow: column">
 						<div style="flex: 1 1 50%; position: relative">
diff --git a/core/style.css b/core/style.css
index 77026886..fce6e825 100644
--- a/core/style.css
+++ b/core/style.css
@@ -162,6 +162,51 @@ a:active {
 .cyan { color: #2aa198; }
 .green { color: #859900; }
 
+#files_header {
+	font-weight: bold;
+	text-align: center;
+	flex: 1;
+}
+
+#files_hide {
+	font-weight: bold;
+	width: 100%;
+	right: 0;
+	flex: 0;
+	padding: 0.25em;
+	cursor: pointer;
+}
+
+#files_show {
+	display: none;
+	padding: 0.25em;
+	cursor: pointer;
+}
+
+#filesPane {
+	flex: 1 1 10%;
+}
+
+#filesPane.collapsed {
+	flex: 0;
+}
+
+.collapsed #files_header {
+	display: none;
+}
+
+.collapsed #files_content {
+	display: none;
+}
+
+.collapsed #files_hide {
+	display: none;
+}
+
+.collapsed #files_show {
+	display: block;
+}
+
 #files {
 	list-style-type: none;
 	margin: 0;