diff options
| -rw-r--r-- | src/client/components/tab.vue | 11 | ||||
| -rw-r--r-- | src/client/components/taskmanager.vue | 135 |
2 files changed, 97 insertions, 49 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 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> - <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 === '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: ":"; + } } } } |