helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

fix(web): user management responsive design (#5698)

Browse source 
* fix: user management tailwind

* use top instead of inset-y-0

* add types to createEventDispatcher
This commit is contained in:
martin 2023-12-14 17:55:15 +01:00 • committed by GitHub
parent 8e39d389b5
commit f2270ad757
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 257 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

12
web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
View file

@ -22,6 +22,7 @@
import SettingAccordion from '../setting-accordion.svelte';
import { mdiHelpCircleOutline } from '@mdi/js';
import Icon from '$lib/components/elements/icon.svelte';
import type { ResetOptions } from '$lib/utils/dipatch';
export let ffmpegConfig: SystemConfigFFmpegDto; // this is the config that is being edited
export let disabled = false;
@ -63,6 +64,14 @@
}
}
const handleReset = (detail: ResetOptions) => {
if (detail.default) {
resetToDefault();
} else {
reset();
}
};
async function reset() {
const { data: resetConfig } = await api.systemConfigApi.getConfig();
@ -354,9 +363,8 @@
<div class="ml-4">
<SettingButtonsRow
on:reset={reset}
on:reset={({ detail }) => handleReset(detail)}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
{disabled}
/>

12
web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
View file

@ -9,6 +9,7 @@
import { handleError } from '../../../../utils/handle-error';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import type { ResetOptions } from '$lib/utils/dipatch';
export let jobConfig: SystemConfigJobDto; // this is the config that is being edited
export let disabled = false;
@ -29,6 +30,14 @@
JobName.Migration,
];
const handleReset = (detail: ResetOptions) => {
if (detail.default) {
resetToDefault();
} else {
reset();
}
};
async function getConfigs() {
[savedConfig, defaultConfig] = await Promise.all([
api.systemConfigApi.getConfig().then((res) => res.data.job),
@ -101,9 +110,8 @@
<div class="ml-4">
<SettingButtonsRow
on:reset={reset}
on:reset={({ detail }) => handleReset(detail)}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
{disabled}
/>

12
web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
View file

@ -11,6 +11,7 @@
import { fade } from 'svelte/transition';
import { handleError } from '../../../../utils/handle-error';
import SettingAccordion from '../setting-accordion.svelte';
import type { ResetOptions } from '$lib/utils/dipatch';
export let libraryConfig: SystemConfigLibraryDto; // this is the config that is being edited
export let disabled = false;
@ -25,6 +26,14 @@
let savedConfig: SystemConfigLibraryDto;
let defaultConfig: SystemConfigLibraryDto;
const handleReset = (detail: ResetOptions) => {
if (detail.default) {
resetToDefault();
} else {
reset();
}
};
async function getConfigs() {
[savedConfig, defaultConfig] = await Promise.all([
api.systemConfigApi.getConfig().then((res) => res.data.library),
@ -131,9 +140,8 @@
<div class="ml-4">
<SettingButtonsRow
on:reset={reset}
on:reset={({ detail }) => handleReset(detail)}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
{disabled}
/>

12
web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
View file

@ -12,6 +12,7 @@
import SettingSwitch from '../setting-switch.svelte';
import SettingAccordion from '../setting-accordion.svelte';
import SettingSelect from '../setting-select.svelte';
import type { ResetOptions } from '$lib/utils/dipatch';
export let machineLearningConfig: SystemConfigMachineLearningDto; // this is the config that is being edited
export let disabled = false;
@ -33,6 +34,14 @@
notificationController.show({ message: 'Reset to the last saved settings', type: NotificationType.Info });
}
const handleReset = (detail: ResetOptions) => {
if (detail.default) {
resetToDefault();
} else {
reset();
}
};
async function saveSetting() {
try {
const { data: current } = await api.systemConfigApi.getConfig();
@ -212,9 +221,8 @@
</SettingAccordion>
<SettingButtonsRow
on:reset={reset}
on:reset={({ detail }) => handleReset(detail)}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
{disabled}
/>

12
web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
View file

@ -11,6 +11,7 @@
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingSwitch from '../setting-switch.svelte';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import type { ResetOptions } from '$lib/utils/dipatch';
export let config: SystemConfigDto; // this is the config that is being edited
export let disabled = false;
@ -18,6 +19,14 @@
let savedConfig: SystemConfigDto;
let defaultConfig: SystemConfigDto;
const handleReset = (detail: ResetOptions) => {
if (detail.default) {
resetToDefault();
} else {
reset();
}
};
async function refreshConfig() {
[savedConfig, defaultConfig] = await Promise.all([
api.systemConfigApi.getConfig().then((res) => res.data),
@ -133,9 +142,8 @@
>
<SettingButtonsRow
on:reset={reset}
on:reset={({ detail }) => handleReset(detail)}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(
{ ...savedConfig.map, ...savedConfig.reverseGeocoding },
{ ...defaultConfig.map, ...defaultConfig.reverseGeocoding },

12
web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte
View file

@ -9,6 +9,7 @@
import { fade } from 'svelte/transition';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingSwitch from '../setting-switch.svelte';
import type { ResetOptions } from '$lib/utils/dipatch';
export let newVersionCheckConfig: SystemConfigNewVersionCheckDto; // this is the config that is being edited
@ -22,6 +23,14 @@
]);
}
const handleReset = (detail: ResetOptions) => {
if (detail.default) {
resetToDefault();
} else {
reset();
}
};
async function saveSetting() {
try {
const { data: configs } = await api.systemConfigApi.getConfig();
@ -79,9 +88,8 @@
bind:checked={newVersionCheckConfig.enabled}
/>
<SettingButtonsRow
on:reset={reset}
on:reset={({ detail }) => handleReset(detail)}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
/>
</div>

12
web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte
View file

@ -11,6 +11,7 @@
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import SettingSwitch from '../setting-switch.svelte';
import type { ResetOptions } from '$lib/utils/dipatch';
export let oauthConfig: SystemConfigOAuthDto;
export let disabled = false;
@ -18,6 +19,14 @@
let savedConfig: SystemConfigOAuthDto;
let defaultConfig: SystemConfigOAuthDto;
const handleReset = (detail: ResetOptions) => {
if (detail.default) {
resetToDefault();
} else {
reset();
}
};
const handleToggleOverride = () => {
// click runs before bind
const previouslyEnabled = oauthConfig.mobileOverrideEnabled;
@ -209,9 +218,8 @@
{/if}
<SettingButtonsRow
on:reset={reset}
on:reset={({ detail }) => handleReset(detail)}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
{disabled}
/>

12
web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte
View file

@ -10,6 +10,7 @@
import ConfirmDisableLogin from '../confirm-disable-login.svelte';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingSwitch from '../setting-switch.svelte';
import type { ResetOptions } from '$lib/utils/dipatch';
export let passwordLoginConfig: SystemConfigPasswordLoginDto; // this is the config that is being edited
export let disabled = false;
@ -17,6 +18,14 @@
let savedConfig: SystemConfigPasswordLoginDto;
let defaultConfig: SystemConfigPasswordLoginDto;
const handleReset = (detail: ResetOptions) => {
if (detail.default) {
resetToDefault();
} else {
reset();
}
};
async function getConfigs() {
[savedConfig, defaultConfig] = await Promise.all([
api.systemConfigApi.getConfig().then((res) => res.data.passwordLogin),
@ -107,9 +116,8 @@
/>
<SettingButtonsRow
on:reset={reset}
on:reset={({ detail }) => handleReset(detail)}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
{disabled}
/>

10
web/src/lib/components/admin-page/settings/setting-buttons-row.svelte
View file

@ -1,8 +1,12 @@
<script lang="ts">
import Button from '$lib/components/elements/buttons/button.svelte';
import type { ResetOptions } from '$lib/utils/dipatch';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
const dispatch = createEventDispatcher<{
reset: ResetOptions;
save: void;
}>();
export let showResetToDefault = true;
export let disabled = false;
@ -12,7 +16,7 @@
<div class="left">
{#if showResetToDefault}
<button
on:click={() => dispatch('reset-to-default')}
on:click={() => dispatch('reset', { default: true })}
class="bg-none text-sm font-medium text-immich-primary hover:text-immich-primary/75 dark:text-immich-dark-primary hover:dark:text-immich-dark-primary/75"
>
Reset to default
@ -21,7 +25,7 @@
</div>
<div class="right">
<Button {disabled} size="sm" color="gray" on:click={() => dispatch('reset')}>Reset</Button>
<Button {disabled} size="sm" color="gray" on:click={() => dispatch('reset', { default: false })}>Reset</Button>
<Button {disabled} size="sm" on:click={() => dispatch('save')}>Save</Button>
</div>
</div>

12
web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
View file

@ -14,6 +14,7 @@
} from '$lib/components/shared-components/notification/notification';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import { user } from '$lib/stores/user.store';
import type { ResetOptions } from '$lib/utils/dipatch';
export let storageConfig: SystemConfigStorageTemplateDto;
export let disabled = false;
@ -23,6 +24,14 @@
let templateOptions: SystemConfigTemplateStorageOptionDto;
let selectedPreset = '';
const handleReset = (detail: ResetOptions) => {
if (detail.default) {
resetToDefault();
} else {
reset();
}
};
async function getConfigs() {
[savedConfig, defaultConfig, templateOptions] = await Promise.all([
api.systemConfigApi.getConfig().then((res) => res.data.storageTemplate),
@ -232,9 +241,8 @@
</div>
<SettingButtonsRow
on:reset={reset}
on:reset={({ detail }) => handleReset(detail)}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
{disabled}
/>

12
web/src/lib/components/admin-page/settings/theme/theme-settings.svelte
View file

@ -9,6 +9,7 @@
import { fade } from 'svelte/transition';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingTextarea from '../setting-textarea.svelte';
import type { ResetOptions } from '$lib/utils/dipatch';
export let themeConfig: SystemConfigThemeDto; // this is the config that is being edited
export let disabled = false;
@ -16,6 +17,14 @@
let savedConfig: SystemConfigThemeDto;
let defaultConfig: SystemConfigThemeDto;
const handleReset = (detail: ResetOptions) => {
if (detail.default) {
resetToDefault();
} else {
reset();
}
};
async function getConfigs() {
[savedConfig, defaultConfig] = await Promise.all([
api.systemConfigApi.getConfig().then((res) => res.data.theme),
@ -84,9 +93,8 @@
/>
<SettingButtonsRow
on:reset={reset}
on:reset={({ detail }) => handleReset(detail)}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
{disabled}
/>

12
web/src/lib/components/admin-page/settings/thumbnail/thumbnail-settings.svelte
View file

@ -10,6 +10,7 @@
} from '$lib/components/shared-components/notification/notification';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import SettingSwitch from '../setting-switch.svelte';
import type { ResetOptions } from '$lib/utils/dipatch';
export let thumbnailConfig: SystemConfigThumbnailDto; // this is the config that is being edited
export let disabled = false;
@ -17,6 +18,14 @@
let savedConfig: SystemConfigThumbnailDto;
let defaultConfig: SystemConfigThumbnailDto;
const handleReset = (detail: ResetOptions) => {
if (detail.default) {
resetToDefault();
} else {
reset();
}
};
async function getConfigs() {
[savedConfig, defaultConfig] = await Promise.all([
api.systemConfigApi.getConfig().then((res) => res.data.thumbnail),
@ -133,9 +142,8 @@
<div class="ml-4">
<SettingButtonsRow
on:reset={reset}
on:reset={({ detail }) => handleReset(detail)}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
{disabled}
/>

12
web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte
View file

@ -10,6 +10,7 @@
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingSwitch from '../setting-switch.svelte';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import type { ResetOptions } from '$lib/utils/dipatch';
export let trashConfig: SystemConfigTrashDto; // this is the config that is being edited
export let disabled = false;
@ -17,6 +18,14 @@
let savedConfig: SystemConfigTrashDto;
let defaultConfig: SystemConfigTrashDto;
const handleReset = (detail: ResetOptions) => {
if (detail.default) {
resetToDefault();
} else {
reset();
}
};
async function getConfigs() {
[savedConfig, defaultConfig] = await Promise.all([
api.systemConfigApi.getConfig().then((res) => res.data.trash),
@ -90,9 +99,8 @@
/>
<SettingButtonsRow
on:reset={reset}
on:reset={({ detail }) => handleReset(detail)}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
{disabled}
/>