Skip to content

Commit

Permalink
fix style leakage; close #1
Browse files Browse the repository at this point in the history
  • Loading branch information
averrin committed Jun 30, 2022
1 parent 6fdf263 commit 8b15cd1
Show file tree
Hide file tree
Showing 12 changed files with 266 additions and 255 deletions.
2 changes: 1 addition & 1 deletion src/styles/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
height: 40px !important;
}

.text-base {
.ui-text-base {
font-size: 1rem !important;
}

Expand Down
6 changes: 3 additions & 3 deletions src/view/MainUI.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
tabs.push({
mode: "sequencer",
title: "Sequencer",
badge: "<span class='ui-badge mx-1' style='background-color: indianred'>beta</span>",
badge: "<span class='ui-badge ui-mx-1' style='background-color: indianred'>beta</span>",
});
}
let mode = tabs.find((t) => t.default).mode;
Expand All @@ -75,8 +75,8 @@
</script>

<input type="checkbox" id="color-modal" class="ui-modal-toggle" bind:checked={pickerOpen} />
<label for="color-modal" class="ui-modal cursor-pointer">
<label class="ui-modal-box relative w-fit" for="">
<label for="color-modal" class="ui-modal ui-cursor-pointer">
<label class="ui-modal-box ui-relative ui-w-fit" for="">
<HsvPicker on:colorChange={changeColor} {startColor} />
</label>
</label>
Expand Down
105 changes: 55 additions & 50 deletions src/view/components/ActionItem.svelte
Original file line number Diff line number Diff line change
@@ -1,58 +1,63 @@
<script>
import Tags from '../components/Tags.svelte'
import Select from 'svelte-select';
import { XIcon } from "@rgossiaux/svelte-heroicons/solid";
import { actionTypes } from '../../constants.js';
import { tagColors } from '../../modules/stores.js';
import Tags from "../components/Tags.svelte";
import Select from "svelte-select";
import { XIcon } from "@rgossiaux/svelte-heroicons/solid";
import { actionTypes } from "../../constants.js";
import { tagColors } from "../../modules/stores.js";
export let item;
export let item;
export let selectAction;
export let handleSelect;
export let handleClear;
export let deleteAction;
export let execAction;
export let onTagClick;
export let actionTags;
export let autoComplete;
export let selectAction;
export let handleSelect;
export let handleClear;
export let deleteAction;
export let execAction;
export let onTagClick;
export let actionTags;
export let autoComplete;
const groupBy = (i) => i.group;
const groupBy = (i) => i.group;
let types = actionTypes;
if (!globalThis.game.MonksActiveTiles) {
types = actionTypes.filter(a => a.require != 'matt');
}
let types = actionTypes;
if (!globalThis.game.MonksActiveTiles) {
types = actionTypes.filter((a) => a.require != "matt");
}
</script>

<div class="flex flex-row bg-white rounded-xl shadow-lg p-2 items-center space-x-2 cursor-move">
<button class="ui-btn ui-btn-outline ui-btn-error ui-btn-square" on:click={e => deleteAction(e, item.id)}>
<XIcon class="h-8 w-8"/>
</button>
<div class="min-w-[300px]">
<Tags
allowPaste={true}
allowDrop={true}
onlyUnique={true}
splitWith={","}
placeholder="Tag"
{autoComplete}
minChars=1
colors={$tagColors}
onTagClick={onTagClick}
on:tags={e => actionTags(e, item.id)}
tags={item.tags}
/>
</div>
<div class="min-w-fit">
<Select items={types} {groupBy}
value={item.type}
on:select={e => handleSelect(e, item.id)}
on:clear={e => handleClear(e, item.id)}/>
</div>
<button class="ui-btn ui-btn-square ui-btn-outline" on:click={e => selectAction(e, item.id)}>
<i class="fas fa-expand text-base"></i>
</button>
<button class="ui-btn ui-btn-square" on:click={e => execAction(e, item.id)}>
<i class="fas fa-play text-base"></i>
</button>
<div
class="ui-flex ui-flex-row ui-bg-white ui-rounded-xl ui-shadow-lg ui-p-2 ui-items-center ui-space-x-2 ui-cursor-move"
>
<button class="ui-btn ui-btn-outline ui-btn-error ui-btn-square" on:click={(e) => deleteAction(e, item.id)}>
<XIcon class="ui-h-8 ui-w-8" />
</button>
<div class="ui-min-w-[300px]">
<Tags
allowPaste={true}
allowDrop={true}
onlyUnique={true}
splitWith={","}
placeholder="Tag"
{autoComplete}
minChars="1"
colors={$tagColors}
{onTagClick}
on:tags={(e) => actionTags(e, item.id)}
tags={item.tags}
/>
</div>
<div class="ui-min-w-fit">
<Select
items={types}
{groupBy}
value={item.type}
on:select={(e) => handleSelect(e, item.id)}
on:clear={(e) => handleClear(e, item.id)}
/>
</div>
<button class="ui-btn ui-btn-square ui-btn-outline" on:click={(e) => selectAction(e, item.id)}>
<i class="fas fa-expand ui-text-base" />
</button>
<button class="ui-btn ui-btn-square" on:click={(e) => execAction(e, item.id)}>
<i class="fas fa-play ui-text-base" />
</button>
</div>
2 changes: 1 addition & 1 deletion src/view/components/ActionsTab.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
}
</script>
<div class="flex flex-col p-1">
<div class="flex ui-flex-col ui-p-1">
<div>
<button class="ui-btn ui-btn-outline ui-btn-primary" on:click={(e) => addAction()}>Add action</button>
</div>
Expand Down
16 changes: 8 additions & 8 deletions src/view/components/ArgInput.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -66,13 +66,13 @@
{#if mode == "direct"}
{#if variables && vars.length > 0}
<button
class="ui-btn ui-btn-square m-0"
class="ui-btn ui-btn-square ui-m-0"
style="background-color: darkcyan;"
on:click={(e) => setMode(e, "variable")}
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
class="ui-h-6 ui-w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
Expand All @@ -89,7 +89,7 @@
type="number"
bind:value
placeholder="0"
class="ui-input ui-input-lg text-base"
class="ui-input ui-input-lg ui-text-base"
/>
{:else if type == "float"}
<input
Expand All @@ -98,7 +98,7 @@
bind:value
placeholder="0.00"
step="0.01"
class="ui-input ui-input-lg text-base"
class="ui-input ui-input-lg ui-text-base"
/>
{:else if type == "effect_file"}
<label class="ui-input-group">
Expand All @@ -114,7 +114,7 @@
<button class="ui-btn ui-btn-square" on:click={selectFile}>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
class="ui-h-6 ui-w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
Expand Down Expand Up @@ -143,18 +143,18 @@
type="text"
bind:value
placeholder="0"
class="ui-input ui-input-lg text-base"
class="ui-input ui-input-lg ui-text-base"
/>
{/if}
{:else}
<button
class="ui-btn ui-btn-square m-0"
class="ui-btn ui-btn-square ui-m-0"
style="background-color: #aa66cc;"
on:click={(e) => setMode(e, "direct")}
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
class="ui-h-6 ui-w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
Expand Down
Loading

0 comments on commit 8b15cd1

Please sign in to comment.