qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

popover and palette

Browse source
This commit is contained in:
Henry Jameson 2024-09-30 15:11:43 +03:00
parent 89b05cfc57
commit 07a48315a1
5 changed files with 112 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/components/palette_editor/palette_editor.vue Normal file
View file

@ -0,0 +1,63 @@
<template>
<div class="PaletteEditor">
<ColorInput
v-for="key in paletteKeys"
:key="key"
:model-value="props.modelValue[key]"
:fallback="fallback(key)"
:label="$t('settings.style.themes3.editor.palette.' + key)"
@update:modelValue="value => updatePalette(key, value)"
/>
</div>
</template>
<script setup>
import ColorInput from 'src/components/color_input/color_input.vue'
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const paletteKeys = [
'bg',
'fg',
'text',
'link',
'accent',
'cRed',
'cBlue',
'cGreen',
'cOrange',
'extra1',
'extra2',
'extra3'
]
const fallback = (key) => {
if (key === 'accent') {
return props.modelValue.link
}
if (key === 'link') {
return props.modelValue.accent
}
if (key.startsWith('extra')) {
return '#000000'
}
}
const updatePalette = (paletteKey, value) => {
emit('update:modelValue', {
...props.modelValue,
[paletteKey]: value
})
}
</script>
<style lang="scss">
.PaletteEditor {
display: grid;
justify-content: space-around;
grid-template-columns: repeat(4, min-content);
grid-template-rows: repeat(auto-fit, min-content);
grid-gap: 0.5em;
}
</style>

4
src/components/settings_modal/tabs/style_tab/style_tab.js
View file

@ -10,7 +10,7 @@ import ColorInput from 'src/components/color_input/color_input.vue'
import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
import Popover from 'src/components/popover/popover.vue'
import Tooltip from 'src/components/tooltip/tooltip.vue'
import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
import { init } from 'src/services/theme_data/theme_data_3.service.js'
@ -43,7 +43,7 @@ export default {
components: {
Select,
Checkbox,
Popover,
Tooltip,
StringSetting,
ComponentPreview,
TabSwitcher,

74
src/components/settings_modal/tabs/style_tab/style_tab.vue
View file

@ -165,44 +165,29 @@
:disabled="!isBackgroundColorPresent"
:label="$t('settings.style.themes3.editor.background')"
/>
<Popover trigger="hover">
<template #trigger>
<Checkbox v-model="isBackgroundColorPresent" />
</template>
<template #content>
{{ $t('settings.style.themes3.editor.include_in_rule') }}
</template>
</Popover>
<Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
<Checkbox v-model="isBackgroundColorPresent" />
</Tooltip>
<OpacityInput
v-model="editedOpacity"
:disabled="!isOpacityPresent"
:label="$t('settings.style.themes3.editor.opacity')"
/>
<Popover trigger="hover">
<template #trigger>
<Checkbox v-model="isOpacityPresent" />
</template>
<template #content>
{{ $t('settings.style.themes3.editor.include_in_rule') }}
</template>
</Popover>
<Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
<Checkbox v-model="isOpacityPresent" />
</Tooltip>
<ColorInput
v-model="editedTextColor"
:label="$t('settings.style.themes3.editor.text_color')"
:disabled="!isTextColorPresent"
v-if="componentHas('Text')"
/>
<Popover
trigger="hover"
<Tooltip
v-if="componentHas('Text')"
:text="$t('settings.style.themes3.editor.include_in_rule')"
>
<template #trigger>
<Checkbox v-model="isTextColorPresent" />
</template>
<template #content>
{{ $t('settings.style.themes3.editor.include_in_rule') }}
</template>
</Popover>
<Checkbox v-model="isTextColorPresent" />
</Tooltip>
<div class="style-control suboption">
<label
for="textAuto"
@ -227,17 +212,12 @@
</option>
</Select>
</div>
<Popover
trigger="hover"
<Tooltip
v-if="componentHas('Text')"
:text="$t('settings.style.themes3.editor.include_in_rule')"
>
<template #trigger>
<Checkbox v-model="isTextAutoPresent" />
</template>
<template #content>
{{ $t('settings.style.themes3.editor.include_in_rule') }}
</template>
</Popover>
<Checkbox v-model="isTextAutoPresent" />
</Tooltip>
<div>
<ContrastRatio :contrast="getContrast(editedBackgroundColor, editedTextColor)" />
</div>
@ -250,34 +230,24 @@
:disabled="!isLinkColorPresent"
v-if="componentHas('Link')"
/>
<Popover
trigger="hover"
<Tooltip
v-if="componentHas('Link')"
:text="$t('settings.style.themes3.editor.include_in_rule')"
>
<template #trigger>
<Checkbox v-model="isLinkColorPresent" />
</template>
<template #content>
{{ $t('settings.style.themes3.editor.include_in_rule') }}
</template>
</Popover>
<Checkbox v-model="isLinkColorPresent" />
</Tooltip>
<ColorInput
v-model="editedIconColor"
:label="$t('settings.style.themes3.editor.icon_color')"
:disabled="!isIconColorPresent"
v-if="componentHas('Icon')"
/>
<Popover
trigger="hover"
<Tooltip
v-if="componentHas('Icon')"
:text="$t('settings.style.themes3.editor.include_in_rule')"
>
<template #trigger>
<Checkbox v-model="isIconColorPresent" />
</template>
<template #content>
{{ $t('settings.style.themes3.editor.include_in_rule') }}
</template>
</Popover>
<Checkbox v-model="isIconColorPresent" />
</Tooltip>
</div>
<div
class="editor-tab shadow-tab"

24
src/components/tooltip/tooltip.vue Normal file
View file

@ -0,0 +1,24 @@
<template>
<Popover trigger="hover">
<template #trigger>
<slot />
</template>
<template #content>
<div class="tooltip">
{{ props.text }}
</div>
</template>
</Popover>
</template>
<script setup>
import Popover from 'src/components/popover/popover.vue'
const props = defineProps(['text'])
</script>
<style lang="scss">
.tooltip {
margin: 0.5em 1em;
}
</style>

2
src/i18n/en.json
View file

@ -779,7 +779,7 @@
"no-auto": "Disabled"
},
"palette": {
"label": "Edited palette",
"label": "Palette",
"dark": "Dark mode",
"light": "Light mode",
"bg": "Panel background",