romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2024-12-01 13:20:54 +00:00
Code Issues Releases Activity

Dismiss buttons for database/collection modals

Browse Source
This commit is contained in:
Romein van Buren 2023-01-18 14:05:45 +01:00
parent 7d16261bff
commit 98608a6cc8
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
2 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/organisms/connection/index.svelte
View File

@ -74,8 +74,9 @@
<label class="field">
<input type="text" spellcheck="false" bind:value={newDb.name} use:input placeholder="New collection name" bind:this={newDbInput} />
</label>
<p>
<p class="modal-actions">
<button class="btn create" type="submit" disabled={!newDb.name?.trim()}>Create database</button>
<button class="btn secondary" type="button" on:click={() => newDb = undefined}>Cancel</button>
</p>
</form>
</Modal>
@ -89,9 +90,17 @@
<label class="field">
<input type="text" spellcheck="false" bind:value={newColl.name} use:input placeholder="New collection name" bind:this={newCollInput} />
</label>
<p>
<p class="modal-actions">
<button class="btn create" type="submit" disabled={!newColl.name?.trim()}>Create collection</button>
<button class="btn secondary" type="button" on:click={() => newColl = undefined}>Cancel</button>
</p>
</form>
</Modal>
{/if}
<style>
.modal-actions {
display: flex;
justify-content: space-between;
}
</style>

12
frontend/src/style.css
View File

@ -105,6 +105,7 @@ p strong {
.btn {
background-color: #00008b;
border: 1px solid #00008b;
padding: 0.5rem;
border-radius: 10px;
color: #fff;
@ -119,6 +120,17 @@ p strong {
.btn.danger:focus {
box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.2);
}
.btn.secondary {
border: 1px solid #ccc;
background-color: #fff;
color: inherit;
}
.btn.secondary:hover {
background-color: #eee;
}
.btn.secondary:active {
background-color: #ddd;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;