romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-01-18 21:17:59 +00:00
Code Issues Releases Activity

CSS tweaks for shell

Browse Source
This commit is contained in:
Romein van Buren 2023-06-24 11:05:02 +02:00
parent 51897adf8d
commit 3893c8dd06
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
2 changed files with 37 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/organisms/connection/collection/index.svelte
View File

@ -43,17 +43,19 @@
<div class="view" class:empty={!collection}> <div class="view" class:empty={!collection}>
{#if collection} {#if collection}
{#key collection} {#key collection}
<TabBar tabs={[ <TabBar
{ key: 'stats', icon: 'chart', title: 'Stats' }, tabs={[
{ key: 'find', icon: 'db', title: 'Find' }, { key: 'stats', icon: 'chart', title: 'Stats' },
{ key: 'insert', icon: '+', title: 'Insert' }, { key: 'find', icon: 'db', title: 'Find' },
{ key: 'update', icon: 'edit', title: 'Update' }, { key: 'insert', icon: '+', title: 'Insert' },
{ key: 'remove', icon: 'trash', title: 'Remove' }, { key: 'update', icon: 'edit', title: 'Update' },
{ key: 'indexes', icon: 'list', title: 'Indexes' }, { key: 'remove', icon: 'trash', title: 'Remove' },
{ key: 'aggregate', icon: 're', title: 'Aggregate' }, { key: 'indexes', icon: 'list', title: 'Indexes' },
{ key: 'shell', icon: 'shell', title: 'Shell' }, { key: 'aggregate', icon: 're', title: 'Aggregate' },
]} { key: 'shell', icon: 'shell', title: 'Shell' },
bind:selectedKey={tab} /> ]}
bind:selectedKey={tab}
/>
<div class="container"> <div class="container">
{#if tab === 'stats'} <Stats {collection} /> {#if tab === 'stats'} <Stats {collection} />

46
frontend/src/organisms/connection/collection/shell.svelte
View File

@ -30,25 +30,25 @@
</script> </script>
<div class="shell"> <div class="shell">
<div class="panels"> <div class="overflow">
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class="field"> <label class="field">
<CodeEditor bind:text={script} {extensions} /> <CodeEditor bind:text={script} {extensions} />
</label> </label>
</div>
<div class="output"> <div class="output">
{#if busy} {#if busy}
<BlankState icon="loading" label="Executing…" /> <BlankState icon="loading" label="Executing…" />
{:else if result.errorTitle || result.errorDescription} {:else if result.errorTitle || result.errorDescription}
<BlankState title={result.errorTitle} label={result.errorDescription} icon="!"> <BlankState title={result.errorTitle} label={result.errorDescription} icon="!">
<button class="button-small" on:click={copyErrorDescription}> <button class="button-small" on:click={copyErrorDescription}>
<Icon name={copySucceeded ? 'check' : 'clipboard'} /> Copy error message <Icon name={copySucceeded ? 'check' : 'clipboard'} /> Copy error message
</button> </button>
</BlankState> </BlankState>
{:else} {:else}
<pre>{result.output || ''}</pre> <pre>{result.output || ''}</pre>
{/if} {/if}
</div>
</div> </div>
<div class="controls"> <div class="controls">
@ -69,18 +69,16 @@
<style> <style>
.shell { .shell {
display: grid; display: grid;
grid-template: 1fr auto / 1fr; grid-template: 1fr auto / 1fr 1fr;
} }
.panels { .overflow {
display: flex; overflow: auto;
}
.field {
height: 100%; height: 100%;
} }
.panels > * {
flex: 1 1 0;
width: 100%;
}
.field :global(.editor) { .field :global(.editor) {
border-radius: 0; border-radius: 0;
} }
@ -97,6 +95,9 @@
.output pre { .output pre {
font-family: monospace; font-family: monospace;
padding: 0.5rem; padding: 0.5rem;
user-select: text;
-webkit-user-select: text;
cursor: text;
} }
.output :global(.blankstate) { .output :global(.blankstate) {
margin: auto; margin: auto;
@ -107,6 +108,7 @@
margin-top: 0.5rem; margin-top: 0.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
grid-column: 1 / 3;
} }
.controls .status { .controls .status {
margin-right: auto; margin-right: auto;