mirror of
https://github.com/garraflavatra/rolens.git
synced 2024-11-21 14:08:56 +01:00
UI improvements
This commit is contained in:
parent
db5a526e07
commit
d1b1c7daa5
GPG Key ID:
0EFF8478ADDF6C49
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -6,7 +6,7 @@
|
||||
"editor.tabSize": 4,
|
||||
"editor.formatOnSave": true,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.organizeImports": true
|
||||
"source.organizeImports": "explicit"
|
||||
},
|
||||
"editor.suggest.snippetsPreventQuickSuggestions": false
|
||||
},
|
||||
|
||||
@ -12,6 +12,7 @@ Patches:
|
||||
* Preserve state after switching to another tab (#56).
|
||||
* Find view: ask for confirmation before negligently deleting documents when the user has clicked the '-' button (#58).
|
||||
* Set a deadline for counting documents, and added a button to count documents if the deadline has been exceeded.
|
||||
* UI improvements.
|
||||
|
||||
Bugfixes:
|
||||
|
||||
|
||||
@ -1,16 +1,12 @@
|
||||
<script>
|
||||
import BlankState from '$components/blankstate.svelte';
|
||||
import ContextMenu from '$components/contextmenu.svelte';
|
||||
import dialogs from '$lib/dialogs.js';
|
||||
import contextMenu from '$lib/stores/contextmenu.js';
|
||||
import hostTree from '$lib/stores/hosttree.js';
|
||||
import applicationInited from '$lib/stores/inited.js';
|
||||
import windowTitle from '$lib/stores/windowtitle.js';
|
||||
import Connection from '$organisms/connection/index.svelte';
|
||||
import { EventsOn } from '$wails/runtime/runtime.js';
|
||||
import { tick } from 'svelte';
|
||||
import AboutDialog from './dialogs/about.svelte';
|
||||
import SettingsDialog from './dialogs/settings/index.svelte';
|
||||
|
||||
let showWelcomeScreen = undefined;
|
||||
|
||||
@ -27,17 +23,6 @@
|
||||
await tick();
|
||||
hostTree.newHost();
|
||||
}
|
||||
|
||||
function showAboutDialog() {
|
||||
dialogs.new(AboutDialog);
|
||||
}
|
||||
|
||||
function showSettings() {
|
||||
dialogs.new(SettingsDialog);
|
||||
}
|
||||
|
||||
EventsOn('OpenPreferences', showSettings);
|
||||
EventsOn('OpenAboutModal', showAboutDialog);
|
||||
</script>
|
||||
|
||||
<svelte:window on:contextmenu|preventDefault />
|
||||
@ -64,30 +49,23 @@
|
||||
|
||||
<style>
|
||||
.titlebar {
|
||||
height: 0;
|
||||
background-color: #00002a;
|
||||
height: var(--titlebar-height);
|
||||
--wails-draggable: drag;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
:global([data-platform="darwin"]) .titlebar {
|
||||
height: var(--darwin-titlebar-height);
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100vh;
|
||||
height: calc(100vh - var(--titlebar-height));
|
||||
display: grid;
|
||||
grid-template: 1fr / minmax(300px, 0.3fr) 1fr;
|
||||
}
|
||||
main.empty {
|
||||
grid-template: 1fr / 1fr;
|
||||
}
|
||||
:global([data-platform="darwin"]) main {
|
||||
height: calc(100vh - var(--darwin-titlebar-height));
|
||||
}
|
||||
|
||||
main > :global(*) {
|
||||
overflow: auto;
|
||||
|
||||
@ -101,7 +101,7 @@
|
||||
text-align: left;
|
||||
}
|
||||
button.selected {
|
||||
background-color: #00008b;
|
||||
background-color: var(--selection);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
@ -173,7 +173,7 @@
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.calendar .day button.active {
|
||||
background-color: #00008b;
|
||||
background-color: var(--selection);
|
||||
color: #fff;
|
||||
}
|
||||
.calendar .day button.notinmonth {
|
||||
|
||||
@ -226,12 +226,11 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
tr.selectable.selected td {
|
||||
background-color: #00008b !important;
|
||||
color: #fff;
|
||||
background-color: var(--selection) !important;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 2px;
|
||||
padding: 4px 2px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
td.has-toggle {
|
||||
@ -247,7 +246,7 @@
|
||||
}
|
||||
|
||||
td .value {
|
||||
height: 15px;
|
||||
height: 1.2em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -19,23 +19,25 @@
|
||||
svg {
|
||||
transition: transform 0.25s;
|
||||
will-change: transform;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
}
|
||||
svg.spinning {
|
||||
animation: spinning 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||
}
|
||||
|
||||
:global(.field) svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 2px;
|
||||
}
|
||||
:global(.button) svg {
|
||||
height: 13px;
|
||||
height: 1em;
|
||||
width: auto;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
:global(.blankstate .button) svg {
|
||||
height: 17px;
|
||||
height: 1.25em;
|
||||
vertical-align: -3px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@ -1,40 +1,30 @@
|
||||
<script>
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import Icon from './icon.svelte';
|
||||
|
||||
export let tabs = [];
|
||||
export let selectedKey = '';
|
||||
export let canAddTab = false;
|
||||
export let multiline = false;
|
||||
export let compact = true;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const maxPixelsPerMultilineTab = 120;
|
||||
let navEl;
|
||||
let pixelsPerTab = 0;
|
||||
$: tabs && navEl && updateMeasurements();
|
||||
|
||||
function updateMeasurements() {
|
||||
pixelsPerTab = (navEl.offsetWidth ?? 0) / tabs.length;
|
||||
}
|
||||
|
||||
function select(tabKey) {
|
||||
selectedKey = tabKey;
|
||||
dispatch('select', tabKey);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
window.addEventListener('resize', updateMeasurements);
|
||||
});
|
||||
</script>
|
||||
|
||||
<nav class="tabs" class:multiline={multiline || (pixelsPerTab < maxPixelsPerMultilineTab)} bind:this={navEl}>
|
||||
<nav class="tabs" class:compact bind:this={navEl}>
|
||||
<ul>
|
||||
{#each tabs as tab (tab.key)}
|
||||
<li class:active={tab.key === selectedKey}>
|
||||
<li class="tab" class:active={tab.key === selectedKey} class:closable={tab.closable}>
|
||||
<button class="tab" on:click={() => select(tab.key)}>
|
||||
{#if tab.icon} <Icon name={tab.icon} /> {/if}
|
||||
<span class="label">{tab.title}</span>
|
||||
</button>
|
||||
|
||||
{#if tab.closable}
|
||||
<button class="button-small" on:click={() => dispatch('closeTab', tab.key)}>
|
||||
<Icon name="x" />
|
||||
@ -44,8 +34,8 @@
|
||||
{/each}
|
||||
|
||||
{#if canAddTab}
|
||||
<li class="tab add">
|
||||
<button class="tab" on:click={() => dispatch('addTab')}>
|
||||
<li>
|
||||
<button class="button-small" on:click={() => dispatch('addTab')}>
|
||||
<Icon name="+" />
|
||||
</button>
|
||||
</li>
|
||||
@ -59,24 +49,15 @@
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li.add {
|
||||
flex: 0 1;
|
||||
}
|
||||
|
||||
.tabs :global(svg) {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
nav.tabs :global(svg) {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
li.active :global(svg) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.tab {
|
||||
width: 100%;
|
||||
@ -96,20 +77,51 @@
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
li.active button.tab {
|
||||
color: #fff;
|
||||
background-color: #00008b;
|
||||
border-color: #00008b;
|
||||
background-color: var(--selection);
|
||||
border-color: var(--primary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
nav.tabs.multiline button.tab .label {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
button.tab .label {
|
||||
margin-top: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.button-small {
|
||||
nav.tabs .button-small {
|
||||
margin: 12px 0 0 4px;
|
||||
}
|
||||
|
||||
li.closable .button-small {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 7px;
|
||||
top: 7px;
|
||||
}
|
||||
li.closable.active {
|
||||
padding-right: 20px;
|
||||
}
|
||||
li.closable.active .button-small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav.tabs.compact {
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
nav.tabs.compact li {
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
nav.tabs.compact li.tab:hover,
|
||||
nav.tabs.compact li.tab.active {
|
||||
color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
nav.tabs.compact button.tab {
|
||||
border: none;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
nav.tabs.compact li.active button.tab {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal title="Export results" width="450px" on:close>
|
||||
<Modal title="Export results" width="500px" on:close>
|
||||
<form on:submit|preventDefault={submit}>
|
||||
<label class="field">
|
||||
<span class="label">Export</span>
|
||||
@ -40,7 +40,10 @@
|
||||
<label class="field">
|
||||
<span class="label">View to use</span>
|
||||
<select bind:value={exportInfo.viewKey}>
|
||||
{#each Object.entries(views.forCollection(collection.hostKey, collection.dbKey, collection.key)) as [ key, { name } ]}
|
||||
{#each Object.entries(views.forCollection(collection.hostKey, collection.dbKey, collection.key)) as [
|
||||
key,
|
||||
{ name },
|
||||
]}
|
||||
<option value={key}>{name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
:root {
|
||||
--darwin-titlebar-height: 36px;
|
||||
--radius: 4px;
|
||||
--titlebar-height: 36px;
|
||||
|
||||
--primary: #00008b;
|
||||
--selection: rgba(0, 62, 205, 0.3);
|
||||
}
|
||||
|
||||
html,
|
||||
@ -14,8 +17,8 @@ body {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
font-size: 15px;
|
||||
line-height: 17px;
|
||||
background-color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
@ -42,7 +45,7 @@ p strong {
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(0, 0, 204);
|
||||
color: #0000cc;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
text-decoration-thickness: 1px;
|
||||
@ -66,8 +69,8 @@ select:disabled {
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #00008b;
|
||||
border: 1px solid #00008b;
|
||||
background-color: var(--primary);
|
||||
border: 1px solid var(--primary);
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--radius);
|
||||
color: #fff;
|
||||
@ -151,8 +154,8 @@ select:disabled {
|
||||
.field > textarea:focus,
|
||||
.field > select:focus {
|
||||
outline: none;
|
||||
border-color: #00008b;
|
||||
box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.2);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 1px var(--primary);
|
||||
}
|
||||
.field > input.invalid,
|
||||
.field > textarea.invalid,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user