Skip to content

UX upgrade #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
skymen wants to merge 4 commits into
base: master
Choose a base branch
from
Open

UX upgrade #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1579be5
UX upgrade
skymen Apr 14, 2022
30aad58
removed a stray console lotg
skymen Apr 14, 2022
19a6715
removed unnecessary package I added
skymen Apr 14, 2022
d8a4599
Fixed bug with autocomplete
skymen Apr 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8,089 changes: 25 additions & 8,064 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

496 changes: 259 additions & 237 deletions src/depotDataEditor.ts
View file
Open in desktop

Large diffs are not rendered by default.

1,710 changes: 956 additions & 754 deletions src/svelte/Depot/Depot.svelte
View file
Open in desktop

Large diffs are not rendered by default.

367 changes: 217 additions & 150 deletions src/svelte/Depot/DepotConfigurator.svelte
View file
Open in desktop

Large diffs are not rendered by default.

1,364 changes: 1,364 additions & 0 deletions src/svelte/Fields/Autocomplete.svelte
View file
Open in desktop

Large diffs are not rendered by default.

91 changes: 89 additions & 2 deletions src/svelte/Fields/BooleanField.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,91 @@
<script>
export let data;
export let data;
</script>
<input type=checkbox bind:checked={data}>

<div style="display:flex; flex-direction:row;">
<label class="switch">
<input type="checkbox" bind:checked={data} />
<span class="slider round" />
</label>
<div style="width: 40px; display:flex; align-items: center;">
<span
style="display: inline-block; vertical-align: middle; line-height: normal;"
>
{data ? "True" : "False"}
</span>
</div>
</div>

<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
transform: scale(0.7);
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #3a3a3a00;
border: #3a3a3a solid 3px;
-webkit-transition: 0.4s;
transition: 0.4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 1px;
bottom: 1px;
background-color: #7c7c81;
-webkit-transition: 0.4s;
transition: 0.4s;
}

input:checked + .slider {
background-color: var(--vscode-textLink-foreground);
border: var(--vscode-textLink-foreground) solid 3px;
}

input:focus + .slider {
box-shadow: 0 0 1px var(--vscode-textLink-foreground);
border: var(--vscode-textLink-foreground) solid 3px;
}

input:checked + .slider:before {
background-color: white;
}

input:focus + .slider:before {
background-color: white;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}
</style>
91 changes: 74 additions & 17 deletions src/svelte/Fields/EnumField.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,79 @@
<script>
export let data;
export let options = [];
export let aliases = [];
export let allowEmpty = true;
export let data;
export let options = [];
export let aliases = [];
export let allowEmpty = true;
import AutoComplete from "./Autocomplete.svelte";
</script>

<AutoComplete
items={options}
{aliases}
{allowEmpty}
keywordsFunction={(text) => {
if (aliases.length === options.length && aliases.length > 0)
return aliases[options.findIndex((o) => o === text)];
return text;
}}
bind:selectedItem={data}
/>
<!-- svelte-ignore a11y-no-onchange -->
<select bind:value={data}>
{#if allowEmpty}
<option value="">
</option>
{/if}
{#each options as option, i}
<!-- <input list={enumId} class="fullWidth sheetButton" bind:value={data} />
<datalist id={enumId}>
{#if allowEmpty}
<option value="" />
{/if}
{#each options as option, i}
<option value={option} selected={data === option}>
{#if aliases.length == options.length && aliases.length > 0}
{aliases[i]}
{:else}
{option}
{/if}
{#if aliases.length == options.length && aliases.length > 0}
{aliases[i]}
{:else}
{option}
{/if}
</option>
{/each}
</select>
{/each}
</datalist> -->

<!-- <select class="fullWidth sheetButton" bind:value={data}>
{#if allowEmpty}
<option value="" />
{/if}
{#each options as option, i}
<option value={option} selected={data === option}>
{#if aliases.length == options.length && aliases.length > 0}
{aliases[i]}
{:else}
{option}
{/if}
</option>
{/each}
</select> -->
<style>
.fullWidth {
width: 100%;
}

.sheetButton {
background-color: #3a3a3a;
border: none;
color: white;
display: inline-block;
cursor: pointer;
margin: 0px 5px 0px 0px;
padding: 8px 8px 8px 8px;
}
.sheetButton:hover {
background-color: #252526;
}
.sheetButton.selected {
background-color: #252526;
}
.sheetButton:focus {
outline: none;
box-shadow: none;
}
.sheetButton:active:focus {
outline: none;
box-shadow: none;
}
</style>
85 changes: 59 additions & 26 deletions src/svelte/Fields/FileField.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,66 @@
<script>
import { getContext } from 'svelte';
import { createEventDispatcher } from 'svelte';
import { getContext } from "svelte";
import { createEventDispatcher } from "svelte";

export let data;
export let sheetGUID;
export let fileKey;
const nonce = getContext("nonce");
const dispatch = createEventDispatcher();
function pickFile() {
dispatch('message', {
"type" : "pickFile",
"fileKey" : fileKey,
"data" : {
"sheetGUID" : sheetGUID
}
});
}
function clearFile() {
data = "";
}

let hovering = false;
export let data;
export let sheetGUID;
export let fileKey;
const nonce = getContext("nonce");
const dispatch = createEventDispatcher();
function pickFile() {
dispatch("message", {
type: "pickFile",
fileKey: fileKey,
data: {
sheetGUID: sheetGUID,
},
});
}
function clearFile() {
data = "";
}

let hovering = false;
</script>

{#if data == ""}
<button on:click={pickFile}>Pick</button>
<button class="sheetButton fullWidth" on:click={pickFile}>Pick</button>
{:else}
<button on:click={pickFile}>Change</button>
<button on:click={clearFile}>Clear</button>
{data}
{/if}
<button class="sheetButton" on:click={pickFile}>Change</button>
<button class="sheetButton" on:click={clearFile}>Clear</button>
{data}
{/if}

<style>
.fullHeight {
height: 100%;
}

.fullWidth {
width: 100%;
}

.sheetButton {
background-color: #3a3a3a;
border: none;
color: white;
display: inline-block;
cursor: pointer;
margin: 0px 5px 0px 0px;
padding: 8px 8px 8px 8px;
}
.sheetButton:hover {
background-color: #252526;
}
.sheetButton.selected {
background-color: #252526;
}
.sheetButton:focus {
outline: none;
box-shadow: none;
}
.sheetButton:active:focus {
outline: none;
box-shadow: none;
}
</style>
Loading