Foundry/oft
0
0
Fork 0
Code Issues 7 Pull requests Releases 3 Activity Actions

Add ability to select custom status icons #44

Merged
Oliver merged 5 commits from feature/custom-status-icons into main 2026-02-13 04:20:20 +00:00
Conversation 1 Commits 5 Files changed 17 +85 -6
6 changed files with 85 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 7d28376cec - Show all commits

1
assets/icons/save.svg Normal file
View file

@ -0,0 +1 @@
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m56.133 34.207 8.082-.004a2.414 2.414 0 0 0 2.41-2.41l-.012-16.227A2.406 2.406 0 0 0 64.2 13.16l-8.078.004a2.41 2.41 0 0 0-2.41 2.41l.012 16.23a2.41 2.41 0 0 0 2.41 2.402z"/><path d="M92.758 22.266c-.004-1.555-.375-2.832-1.379-3.828-.644-.645-7.7-7.691-11.328-11.316C78.774 5.852 76.371 5 74.582 5s-60.258.039-60.258.039A7.13 7.13 0 0 0 7.2 12.173l.051 75.703A7.13 7.13 0 0 0 14.383 95l71.289-.047a7.126 7.126 0 0 0 7.125-7.133c.004 0-.04-64.594-.04-65.555zM71.02 9.414l.016 24.371c0 2.117-2.18 4.148-4.297 4.148l-30.977.02c-2.117 0-4.106-2.027-4.106-4.145l-.015-24.367zm9.781 78.281H19.2V53.652c0-2.562 1.992-4.644 4.45-4.644h52.7c2.461 0 4.45 2.078 4.45 4.644z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 742 B

25
styles/apps/StatusEffectIconConfig.css
View file

@ -1,4 +1,25 @@
.oft.StatusEffectIconConfig {
> .window-content {
gap: 1rem;
}
footer {
display: flex;
flex-direction: row;
> * {
flex-grow: 1;
}
button {
display: flex;
flex-direction: row;
gap: 8px;
height: initial;
padding: 8px 16px;
}
}
.effect-list {
list-style-type: none;
padding: 0;
@ -8,6 +29,10 @@
gap: 16px;
}
.placeholder {
font-style: italic;
}
.effect {
display: flex;
flex-direction: row;

23
styles/components/icon.css Normal file
View file

@ -0,0 +1,23 @@
:host {
display: inline-block;
}
div {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
svg {
width: var(--size, 1rem);
height: var(--size, 1rem);
fill: var(--fill);
}
path {
stroke: var(--stroke);
stroke-width: var(--stroke-width);
stroke-linejoin: var(--stroke-linejoin);
}

22
styles/components/svg-loader.css Normal file
View file

@ -0,0 +1,22 @@
:host {
display: inline-block;
}
div {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
svg {
fill: var(--fill);
stroke: var(--stroke);
}
path {
stroke: var(--stroke);
stroke-width: var(--stroke-width);
stroke-linejoin: var(--stroke-linejoin);
}

8
templates/StatusEffectIconConfig/effects.hbs
View file

@ -1,4 +1,4 @@
<div class="scrollable">
<main class="scrollable">
{{#if effects}}
<ul class="effect-list">
{{#each effects as | effect |}}
@ -37,6 +37,8 @@
{{/each}}
</ul>
{{else}}
{{ localize "OFT.apps.StatusEffectIconConfig.no-status-effects" }}
<div class="placeholder">
{{ localize "OFT.apps.StatusEffectIconConfig.no-status-effects" }}
</div>
{{/if}}
</div>
</main>

12
templates/StatusEffectIconConfig/footer.hbs
View file

@ -1,5 +1,11 @@
<div>
<footer>
<button type="submit">
Save
<oft-icon
name="icons/save"
aria-hidden="true"
var:fill="currentColor"
var:size="1.25rem"
></oft-icon>
{{ localize "Save Changes" }}
</button>
</div>
</footer>