Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/SettingsCategory: add ability to mark features as beta

Browse source
This commit is contained in:
wukko 2024-08-31 15:32:02 +06:00
parent fa941e9d82
commit a46972c9a5
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 32 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/i18n/en/settings.json
View file

@ -123,5 +123,7 @@
"processing.enable_custom.title": "use a custom processing server", "processing.enable_custom.title": "use a custom processing server",
"processing.enable_custom.description": "cobalt will use a custom processing server if you choose to. even though cobalt has some security measures in place, we are not responsible for any damage done via a community instance, as we have no control over them.\n\nplease be mindful of what instances you use and make sure they're hosted by people you trust.", "processing.enable_custom.description": "cobalt will use a custom processing server if you choose to. even though cobalt has some security measures in place, we are not responsible for any damage done via a community instance, as we have no control over them.\n\nplease be mindful of what instances you use and make sure they're hosted by people you trust.",
"processing.custom.placeholder": "custom instance domain" "processing.custom.placeholder": "custom instance domain",
"feature.beta": "BETA"
} }

30
web/src/components/settings/SettingsCategory.svelte
View file

@ -1,10 +1,12 @@
<script lang="ts"> <script lang="ts">
import { page } from "$app/stores"; import { page } from "$app/stores";
import { t } from "$lib/i18n/translations";
export let title: string; export let title: string;
export let sectionId: string; export let sectionId: string;
export let disabled = false; export let disabled = false;
export let beta = false;
let animate = false; let animate = false;
@ -22,7 +24,12 @@
class:disabled class:disabled
aria-hidden={disabled} aria-hidden={disabled}
> >
<h3 class="settings-content-title">{title}</h3> <div class="settings-content-header">
<h3 class="settings-content-title">{title}</h3>
{#if beta}
<div class="beta-label">{$t("settings.feature.beta")}</div>
{/if}
</div>
<slot></slot> <slot></slot>
</section> </section>
@ -75,6 +82,27 @@
} }
} }
.settings-content-header {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
.beta-label {
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
padding: 0 5px;
background: var(--secondary);
color: var(--primary);
font-size: 11px;
font-weight: 500;
line-height: 0;
text-transform: uppercase;
}
@media screen and (max-width: 750px) { @media screen and (max-width: 750px) {
.settings-content { .settings-content {
padding: var(--padding); padding: var(--padding);