From a0f794e372848d05068f9154fba9ba781b88c6e9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 1 Nov 2020 14:05:06 +0900
Subject: [PATCH] Improve task manager

---
 src/client/components/tab.vue         |  11 ++-
 src/client/components/taskmanager.vue | 137 +++++++++++++++++---------
 2 files changed, 98 insertions(+), 50 deletions(-)

diff --git a/src/client/components/tab.vue b/src/client/components/tab.vue
index 84b520966b..7278c74d9a 100644
--- a/src/client/components/tab.vue
+++ b/src/client/components/tab.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="pxhvhrfw" v-size="{ max: [500] }">
-	<button v-for="item in items" class="_button" @click="$emit('update:value', item.value)" :class="{ active: value === item.value }" :key="item.value"><Fa v-if="item.icon" :icon="item.icon" class="icon"/>{{ item.label }}</button>
+	<button v-for="item in items" class="_button" @click="$emit('update:value', item.value)" :class="{ active: value === item.value }" :disabled="value === item.value" :key="item.value"><Fa v-if="item.icon" :icon="item.icon" class="icon"/>{{ item.label }}</button>
 </div>
 </template>
 
@@ -29,11 +29,20 @@ export default defineComponent({
 		padding: 15px 12px 12px 12px;
 		border-bottom: solid 3px transparent;
 
+		&:disabled {
+			opacity: 1 !important;
+			cursor: default;
+		}
+
 		&.active {
 			color: var(--accent);
 			border-bottom-color: var(--accent);
 		}
 
+		&:not(.active):hover {
+			color: var(--fgHighlighted);
+		}
+
 		> .icon {
 			margin-right: 6px;
 		}
diff --git a/src/client/components/taskmanager.vue b/src/client/components/taskmanager.vue
index c7f91d082c..29b054d0fa 100644
--- a/src/client/components/taskmanager.vue
+++ b/src/client/components/taskmanager.vue
@@ -6,47 +6,55 @@
 	<div class="qljqmnzj">
 		<MkTab v-model:value="tab" :items="[{ label: 'Windows', value: 'windows', }, { label: 'Stream', value: 'stream', }, { label: 'Stream (Pool)', value: 'streamPool', }, { label: 'API', value: 'api', }]" style="border-bottom: solid 1px var(--divider);"/>
 
-		<div v-if="tab === 'windows'" class="windows">
-			<div class="header">
-				<div>#ID</div>
-				<div>Component</div>
-				<div>Action</div>
+		<div class="content">
+			<div v-if="tab === 'windows'" class="windows">
+				<div class="header">
+					<div>#ID</div>
+					<div>Component</div>
+					<div>Action</div>
+				</div>
+				<div v-for="p in popups">
+					<div>#{{ p.id }}</div>
+					<div>{{ p.component.name ? p.component.name : '<anonymous>' }}</div>
+					<div><button class="_textButton" @click="killPopup(p)">Kill</button></div>
+				</div>
 			</div>
-			<div v-for="p in popups">
-				<div>#{{ p.id }}</div>
-				<div>{{ p.component.name ? p.component.name : '<anonymous>' }}</div>
-				<div><button class="_textButton" @click="killPopup(p)">Kill</button></div>
-			</div>
-		</div>
-		<div v-if="tab === 'stream'" class="stream">
-			<div class="header">
-				<div>#ID</div>
-				<div>Ch</div>
-				<div>Handle</div>
-				<div>In</div>
-				<div>Out</div>
-			</div>
-			<div v-for="c in connections">
-				<div>#{{ c.id }}</div>
-				<div>{{ c.channel }}</div>
-				<div v-if="c.users !== null">(shared)<span v-if="c.name">{{ ' ' + c.name }}</span></div>
-				<div v-else>{{ c.name ? c.name : '<anonymous>' }}</div>
-				<div>{{ c.in }}</div>
-				<div>{{ c.out }}</div>
-			</div>
-		</div>
-		<div v-if="tab === 'streamPool'" class="streamPool">
-			<div class="header">
-				<div>#ID</div>
-				<div>Ch</div>
-				<div>Users</div>
-			</div>
-			<div v-for="p in pools">
-				<div>#{{ p.id }}</div>
-				<div>{{ p.channel }}</div>
-				<div>{{ p.users }}</div>
+			<div v-if="tab === 'stream'" class="stream">
+				<div class="header">
+					<div>#ID</div>
+					<div>Ch</div>
+					<div>Handle</div>
+					<div>In</div>
+					<div>Out</div>
+				</div>
+				<div v-for="c in connections">
+					<div>#{{ c.id }}</div>
+					<div>{{ c.channel }}</div>
+					<div v-if="c.users !== null">(shared)<span v-if="c.name">{{ ' ' + c.name }}</span></div>
+					<div v-else>{{ c.name ? c.name : '<anonymous>' }}</div>
+					<div>{{ c.in }}</div>
+					<div>{{ c.out }}</div>
+				</div>
+			</div>
+			<div v-if="tab === 'streamPool'" class="streamPool">
+				<div class="header">
+					<div>#ID</div>
+					<div>Ch</div>
+					<div>Users</div>
+				</div>
+				<div v-for="p in pools">
+					<div>#{{ p.id }}</div>
+					<div>{{ p.channel }}</div>
+					<div>{{ p.users }}</div>
+				</div>
 			</div>
 		</div>
+
+		<footer>
+			<div><span class="label">Windows</span>{{ popups.length }}</div>
+			<div><span class="label">Stream</span>{{ connections.length }}</div>
+			<div><span class="label">Stream (Pool)</span>{{ pools.length }}</div>
+		</footer>
 	</div>
 </XWindow>
 </template>
@@ -108,24 +116,55 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .qljqmnzj {
-	> .windows,
-	> .stream,
-	> .streamPool {
-		display: table;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+
+	> .content {
+		flex: 1;
+		overflow: auto;
+
+		> .windows,
+		> .stream,
+		> .streamPool {
+			display: table;
+			width: 100%;
+			padding: 16px;
+			box-sizing: border-box;
+
+			> div {
+				display: table-row;
+
+				&.header {
+					opacity: 0.7;
+				}
+
+				> * {
+					display: table-cell;
+				}
+			}
+		}
+	}
+
+	> footer {
+		display: flex;
 		width: 100%;
-		padding: 16px;
+		padding: 8px 16px;
 		box-sizing: border-box;
+		border-top: solid 1px var(--divider);
+		font-size: 0.9em;
 
 		> div {
-			display: table-row;
-			font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+			flex: 1;
 
-			&.header {
+			> .label {
 				opacity: 0.7;
-			}
+				margin-right: 0.5em;
 
-			> * {
-				display: table-cell;
+				&:after {
+					content: ":";
+				}
 			}
 		}
 	}