Page MenuHomePhorge
Files F85825120

No OneTemporary
Actions

Authored By
Unknown
Size
8 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/error_modal/error_modal.vue b/src/components/error_modal/error_modal.vue
index 7429e8bdc7..ef2654b2e3 100644
--- a/src/components/error_modal/error_modal.vue
+++ b/src/components/error_modal/error_modal.vue
@@ -1,100 +1,103 @@
<template>
<DialogModal
v-body-scroll-lock="true"
class="error-modal"
@cancel="onCancel"
>
<template #header>
<span v-text="title ?? $t('general.generic_error')" />
</template>
<div class="content">
<FAIcon
class="error-icon"
icon="circle-xmark"
size="3x"
fixed-width
/>
<div class="text">
<slot>
<p>
<strong><code v-text="error.name" /></strong>
{{ ' - ' }}
<span v-text="error.message" />
</p>
<details open>
<summary>{{ $t('general.generic_error_details') }}</summary>
- <code class="stack pre" v-text="error.stack" />
+ <code
+ class="stack pre"
+ v-text="error.stack"
+ />
</details>
</slot>
</div>
</div>
<div class="below">
<slot name="below" />
</div>
<template #footer>
<slot name="footerLeft" />
<button
v-if="recoverText"
class="btn button-default"
@click.prevent="$emit('recover')"
v-text="recoverText"
/>
<button
class="btn button-default"
@click.prevent="$emit('clear')"
v-text="clearText ?? $t('general.close')"
/>
</template>
</DialogModal>
</template>
<script src="./error_modal.js"></script>
<style lang="scss">
.error-modal {
.error-icon {
margin-left: 0.75rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.content {
display: flex;
align-items: center;
text-align: left;
justify-content: center;
line-height: 1.5;
p {
margin-top: 0.75em;
margin-bottom: 0.75em;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
.stack {
margin: 0;
overflow-x: auto;
}
.below:not(:empty) {
margin-top: 1em;
}
.text {
max-width: 50ch;
margin-left: 0.5em;
margin-right: 3.5em;
}
}
</style>
diff --git a/src/components/global_error/global_error.vue b/src/components/global_error/global_error.vue
index 3c3901d4ff..2b6e836559 100644
--- a/src/components/global_error/global_error.vue
+++ b/src/components/global_error/global_error.vue
@@ -1,23 +1,26 @@
<template>
<teleport to="#modal">
<ErrorModal
v-if="globalError"
:error="globalError.error"
:title="title"
:recover-text="recoverText"
@recover="recover"
@clear="clear"
>
<template v-if="content">
<p>{{ content }}</p>
<details v-if="details">
<summary>{{ $t('general.generic_error_details') }}</summary>
- <code class="stack pre" v-text="details" />
+ <code
+ class="stack pre"
+ v-text="details"
+ />
</details>
</template>
</ErrorModal>
</teleport>
</template>
<script src="./global_error.js"></script>
diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
index 5b89f2af28..8fe6ba5c4c 100644
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@@ -1,246 +1,248 @@
<template>
<div
class="PaletteEditor"
:class="{ '-compact': compact, '-apply': apply, '-mobile': mobile }"
>
<div class="palette">
- <div v-for="key in paletteKeys">
+ <div
+ v-for="key in paletteKeys"
+ :key="key"
+ >
<ColorInput
- :key="key"
:name="key"
:model-value="props.modelValue[key]"
:fallback="fallback(key)"
:label="$t('settings.style.themes3.palette.' + key)"
@update:model-value="value => updatePalette(key, value)"
/>
<ContrastRatio
v-if="contrast[key]"
:show-ratio="true"
:contrast="contrast[key]"
/>
</div>
</div>
<div class="buttons">
<button
class="btn button-default palette-import-button"
@click="importPalette"
>
<FAIcon icon="file-import" />
{{ $t('settings.style.themes3.palette.import') }}
</button>
<button
class="btn button-default palette-export-button"
@click="exportPalette"
>
<FAIcon icon="file-export" />
{{ $t('settings.style.themes3.palette.export') }}
</button>
</div>
<div class="buttons">
<button
v-if="apply"
class="btn button-default palette-apply-button"
:disabled="disabled"
:class="{ disabled }"
@click="applyPalette"
>
{{ $t('settings.style.themes3.palette.apply') }}
</button>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
import ColorInput from 'src/components/color_input/color_input.vue'
import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
import { getContrastRatio, hex2rgb } from 'src/services/color_convert/color_convert.js'
import { useInterfaceStore } from 'src/stores/interface.js'
import {
newExporter,
newImporter,
} from 'src/services/export_import/export_import.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faFileExport, faFileImport } from '@fortawesome/free-solid-svg-icons'
library.add(faFileImport, faFileExport)
const paletteKeys = [
'bg',
'fg',
'text',
'link',
'accent',
'cRed',
'cBlue',
'cGreen',
'cOrange',
'wallpaper',
]
const props = defineProps(['modelValue', 'compact', 'apply', 'disabled'])
const emit = defineEmits(['update:modelValue', 'applyPalette'])
const getExportedObject = () =>
paletteKeys.reduce((acc, key) => {
const value = props.modelValue[key]
if (value == null) {
return acc
} else {
return { ...acc, [key]: props.modelValue[key] }
}
}, {})
const paletteExporter = newExporter({
filename: 'pleroma_palette',
extension: 'json',
getExportedObject,
})
const paletteImporter = newImporter({
accept: '.json',
onImport(parsed) {
emit('update:modelValue', parsed)
},
})
const exportPalette = () => {
paletteExporter.exportData()
}
const importPalette = () => {
paletteImporter.importData()
}
const hints = (ratio) => ({
text: ratio.toPrecision(3) + ':1',
// AA level, AAA level
aa: ratio >= 4.5,
aaa: ratio >= 7,
// same but for 18pt+ texts
laa: ratio >= 3,
laaa: ratio >= 4.5,
})
const applyPalette = () => {
emit('applyPalette', getExportedObject())
}
const mobile = computed(() => {
return useInterfaceStore().layoutType === 'mobile'
})
const contrast = computed(() => {
const bg = hex2rgb(props.modelValue.bg)
return {
text: hints(getContrastRatio(bg, hex2rgb(props.modelValue.text))),
link: hints(getContrastRatio(bg, hex2rgb(props.modelValue.link))),
}
})
const fallback = (key) => {
if (key === 'accent') {
return props.modelValue.link
}
if (key === 'link') {
return props.modelValue.accent
}
if (key.startsWith('extra')) {
return '#FF00FF'
}
if (key.startsWith('wallpaper')) {
return '#008080'
}
}
const updatePalette = (paletteKey, value) => {
emit('update:modelValue', {
...props.modelValue,
[paletteKey]: value,
})
}
</script>
<style lang="scss">
.PaletteEditor {
justify-content: space-around;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr) auto;
grid-gap: 0.5em;
align-items: baseline;
.buttons {
margin-top: 0.5em;
display: grid;
gap: 0.5em
}
.palette {
display: grid;
grid-template-rows: 1fr;
grid-auto-flow: row;
grid-auto-rows: auto;
grid-template-columns: repeat(auto-fill, 10em);
grid-gap: 0.5em;
margin-bottom: 0.5em;
}
.palette-import-button {
grid-column: 1 / span 2;
}
.palette-export-button {
grid-column: 3 / span 2;
}
.palette-apply-button {
grid-column: 1 / span 2;
}
.color-input.style-control {
margin: 0;
}
&.-compact {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(5, 1fr) auto;
.palette-import-button {
grid-column: 1;
}
.palette-export-button {
grid-column: 2;
}
&.-apply {
grid-template-rows: repeat(5, 1fr) auto auto;
.palette-apply-button {
grid-column: 1 / span 2;
}
}
}
&.-mobile {
&.-apply {
.palette-apply-button {
grid-column: 1 / span 2;
}
}
.color-input {
display: grid;
gap: 0.5em;
label {
flex: 1;
}
}
}
}
</style>

File Metadata

Mime Type
text/x-diff
Expires
Thu, Oct 29, 10:27 PM (1 d, 18 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1798771
Default Alt Text
(8 KB)

Event Timeline