Page MenuHomePhorge
Files F85807200

No OneTemporary
Actions

Size
15 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/select/select.js b/src/components/select/select.js
index 4c806ee9c0..de86015ddd 100644
--- a/src/components/select/select.js
+++ b/src/components/select/select.js
@@ -1,9 +1,10 @@
import { library } from '@fortawesome/fontawesome-svg-core'
import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
library.add(faChevronDown)
export default {
emits: ['update:modelValue'],
props: ['modelValue', 'disabled', 'unstyled', 'kind'],
+ inheritAttrs: false,
}
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 78b3b348c6..d91cbf3aa1 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -1,91 +1,92 @@
<template>
<label
class="Select input"
:class="{ disabled, unstyled }"
+ role="presentation"
>
<select
:disabled="disabled"
:value="modelValue"
v-bind="$attrs"
@change="$emit('update:modelValue', $event.target.value)"
>
<slot />
</select>
{{ ' ' }}
<FAIcon
v-if="!$attrs.size && !$attrs.multiple"
class="select-down-icon"
icon="chevron-down"
/>
</label>
</template>
<script src="./select.js"> </script>
<style lang="scss">
/* TODO fix order of styles */
label.Select {
padding: 0;
display: flex;
select {
appearance: none;
background: transparent;
border: none;
color: var(--text);
margin: 0;
padding: 0 2em 0 0.5em;
font-family: var(--font);
font-size: 1em;
width: 100%;
z-index: 1;
line-height: 2;
&[multiple],
&[size] {
height: 100%;
padding: 0.2em;
option {
background-color: transparent;
&:checked,
&.-active {
color: var(--selectionText);
background-color: var(--selectionBackground);
}
}
}
}
&.disabled,
&:disabled {
background-color: var(--background);
opacity: 1; /* override browser */
color: var(--faint);
select {
&[multiple],
&[size] {
option.-active {
color: var(--faint);
background: transparent;
}
}
}
}
.select-down-icon {
position: absolute;
top: 0;
bottom: 0;
right: 0.5em;
height: 100%;
width: 0.875em;
font-family: var(--font);
line-height: 2;
z-index: 1;
pointer-events: none;
}
}
</style>
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 4fb37fab7b..0ff1d6a898 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -1,45 +1,46 @@
<template>
<label
v-if="matchesExpertLevel"
class="BooleanSetting setting-item"
>
<Checkbox
class="setting-control setting-label"
:model-value="visibleState"
:disabled="shouldBeDisabled"
:indeterminate="isIndeterminate"
+ role="presentation"
@update:model-value="update"
>
<span
class="label"
:class="{ 'faint': shouldBeDisabled }"
>
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<LocalSettingIndicator :is-local="isLocalSetting" />
{{ ' ' }}
<template v-if="backendDescriptionLabel">
{{ backendDescriptionLabel }}
</template>
<template v-else-if="source === 'admin'">
MISSING LABEL FOR {{ path }}
</template>
<slot v-else />
</span>
</Checkbox>
<p
v-if="backendDescriptionDescription || showDescription"
class="setting-description"
:class="{ 'faint': shouldBeDisabled }"
>
<slot name="description">
{{ backendDescriptionDescription + ' ' }}
</slot>
</p>
<DraftButtons />
</label>
</template>
<script src="./boolean_setting.js"></script>
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index e2ea01d962..3bcfaaf195 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -1,308 +1,309 @@
<template>
<div
class="appearance-tab"
:label="$t('settings.interface')"
icon="table-columns"
role="presentation"
>
<div
class="setting-section"
:label="$t('settings.theme')"
icon="paintbrush"
>
<h3 id="style-header">{{ $t('settings.style.style_section') }}</h3>
<div
ref="themeList"
class="theme-list"
role="list"
:aria-label="$t('settings.style.themes3.styles')"
>
<button
class="button-default theme-preview"
data-theme-key="stock"
:class="{ toggled: isStyleActive('stock'), disabled: switchInProgress }"
:disabled="switchInProgress"
@click="resetTheming"
role="listitem"
:aria-label="$t('settings.style.stock_theme_used')"
>
<preview id="theme-preview-stock" />
<span class="theme-name">
{{ $t('settings.style.stock_theme_used') }}
<span class="alert neutral version">v3</span>
</span>
</button>
<button
v-if="isCustomThemeUsed"
disabled
class="button-default theme-preview toggled"
:aria-label="$t('settings.style.custom_theme_used')"
role="listitem"
>
<preview />
<span class="theme-name">
{{ $t('settings.style.custom_theme_used') }}
<span class="alert neutral version">v2</span>
</span>
</button>
<button
v-if="isCustomStyleUsed"
disabled
class="button-default theme-preview toggled"
:aria-label="$t('settings.style.custom_style_used')"
role="listitem"
>
<preview />
<span class="theme-name">
{{ $t('settings.style.custom_style_used') }}
<span class="alert neutral version">v3</span>
</span>
</button>
<button
v-for="style in availableStyles"
:key="style.key"
:data-theme-key="style.key"
class="button-default theme-preview"
:class="{ toggled: isStyleActive(style.key), disabled: switchInProgress }"
:disabled="switchInProgress"
@click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
role="listitem"
:aria-label="style.name"
>
<preview :id="'theme-preview-' + style.key" />
<span class="theme-name">
{{ style.name }}
<span class="alert neutral version">{{ style.version }}</span>
</span>
</button>
</div>
<button
class="btn button-default"
:class="{ disabled: switchInProgress }"
:disabled="switchInProgress"
@click="importFile"
>
<FAIcon icon="folder-open" />
{{ $t('settings.style.themes3.editor.load_style') }}
</button>
<div>
<h4 id="palette-header">{{ $t('settings.style.themes3.palette.label') }}</h4>
<div
v-if="customThemeVersion === 'v3'"
class="palettes-container"
aria-labelledby="palette-header"
>
<h5
v-if="stylePalettes?.length > 0"
id="style-palettes-header"
>
{{ $t('settings.style.themes3.palette.style') }}
</h5>
<div
v-if="stylePalettes?.length > 0"
class="palettes"
role="list"
aria-labelledby="style-palettes-header"
>
<button
v-for="p in stylePalettes || []"
:key="p.name"
class="btn button-default palette-entry"
:class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
:disabled="switchInProgress"
@click="() => setPalette(p.key, p)"
role="listitem"
>
<div class="palette-label">
<label>
{{ p.name ?? $t('settings.style.themes3.palette.user') }}
</label>
</div>
<div class="palette-preview">
<span
v-for="c in palettesKeys"
:key="c"
class="palette-square"
:style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
/>
</div>
</button>
</div>
<h5 id="bundled-palettes-header">{{ $t('settings.style.themes3.palette.bundled') }}</h5>
<div
class="palettes"
role="list"
aria-labelledby="bundled-palettes-header"
>
<button
v-for="p in bundledPalettes"
:key="p.name"
class="btn button-default palette-entry"
:class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
:disabled="switchInProgress"
@click="() => setPalette(p.key, p)"
role="listitem"
>
<div class="palette-label">
<label>
{{ p.name }}
</label>
</div>
<div class="palette-preview">
<span
v-for="c in palettesKeys"
:key="c"
class="palette-square"
:style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
/>
</div>
</button>
</div>
</div>
<template v-if="customThemeVersion === 'v3' && expertLevel > 0">
<h5 id="user-palette-header">
{{ $t('settings.style.themes3.palette.user') }}
</h5>
<PaletteEditor
v-model="userPalette"
class="userPalette"
:compact="true"
:apply="true"
:disabled="switchInProgress"
@apply-palette="data => setPaletteCustom(data)"
aria-labelledby="user-palette-header"
/>
</template>
<template v-else-if="customThemeVersion === 'v2'">
<div class="alert neutral theme-notice unsupported-theme-v2">
{{ $t('settings.style.themes3.palette.v2_unsupported') }}
</div>
</template>
</div>
<h3>{{ $t('settings.background') }}</h3>
<div class="banner-background">
<div class="banner-background-preview">
<div class="fun-monitor">
<div class="fun-monitor-stand button-default" />
<div class="fun-monitor-neck button-default" />
<div class="fun-monitor-display-bezel button-default">
<div class="fun-monitor-display-screen input">
<img
v-if="backgroundPreview || user?.background_image || instanceWallpaper"
class="fun-monitor-display-screen-image"
:src="backgroundPreview || user?.background_image || instanceWallpaper"
:alt="$t('settings.style.themes3.palette.wallpaper')"
>
<div
v-else
class="wallpaper"
/>
<div class="fun-monitor-display-screen-overlay input" />
<div
v-if="backgroundUploading"
class="fun-monitor-display-uploading"
>
<FAIcon
class="fun-monitor-display-screen-uploading"
spin
icon="circle-notch"
/>
</div>
</div>
</div>
</div>
</div>
<div class="banner-background-input">
- <h4>{{ $t('settings.set_new_background') }}</h4>
+ <h4 id="new-background-header">{{ $t('settings.set_new_background') }}</h4>
<input
type="file"
class="input"
+ aria-labelledby="new-background-header"
@change="uploadFile('background', $event)"
>
<div class="custom-bg-control">
<button
:disabled="!backgroundPreview"
class="btn button-default"
@click="submitBackground(background)"
>
{{ $t('settings.save') }}
</button>
<button
:disabled="!backgroundPreview"
class="btn button-default"
@click="resetUploadedBackground"
>
{{ $t('settings.reset') }}
</button>
</div>
<div
v-if="backgroundError"
class="alert error -dismissible"
>
<span>
{{ backgroundError }}
</span>
<button
class="button-unstyled"
@click="clearBackgroundError"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</button>
</div>
<button
v-if="!isDefaultBackground"
class="btn button-default reset-button"
:title="$t('settings.reset_profile_background')"
@click="resetBackground"
>
{{ $t('settings.reset_profile_background') }}
</button>
</div>
</div>
<h3>{{ $t('settings.visual_tweaks') }}</h3>
<div class="alert neutral theme-notice">
{{ $t("settings.style.visual_tweaks_section_note") }}
</div>
<ul class="setting-list">
<li>
<ChoiceSetting
path="forcedRoundness"
:options="forcedRoundnessOptions"
>
{{ $t('settings.style.themes3.hacks.force_interface_roundness') }}
</ChoiceSetting>
</li>
<li>
<ChoiceSetting
path="underlay"
:options="underlayOverrideModes"
>
{{ $t('settings.style.themes3.hacks.underlay_overrides') }}
</ChoiceSetting>
</li>
<li v-if="instanceWallpaperUsed">
<BooleanSetting path="hideInstanceWallpaper">
{{ $t('settings.hide_wallpaper') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="allowForeignUserBackground">
{{ $t('settings.foreign_user_background') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="compactProfiles">
{{ $t('settings.compact_profiles') }}
</BooleanSetting>
</li>
</ul>
</div>
</div>
</template>
<script src="./appearance_tab.js"></script>
<style lang="scss" src="./appearance_tab.scss"></style>

File Metadata

Mime Type
text/x-diff
Expires
Wed, Oct 14, 3:00 AM (1 d, 21 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1786988
Default Alt Text
(15 KB)

Event Timeline