mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
90 lines
2.6 KiB
Vue
90 lines
2.6 KiB
Vue
<template>
|
|
<dropdown class="content-menu" :placement="placement" offset="5">
|
|
<template #default="{ openMenu, closeMenu }">
|
|
<slot name="button">
|
|
<base-button
|
|
data-test="content-menu-button"
|
|
icon="question-circle"
|
|
size="small"
|
|
circle
|
|
ghost
|
|
|
|
@mouseover.native="openMenu()"
|
|
@mouseleave.native="closeMenu()"
|
|
/>
|
|
</slot>
|
|
</template>
|
|
<template #popover="" class="legend">
|
|
<div class="legend-container">
|
|
<div class="legend-header">{{$t(`editor.legend.legendTitle`)}}</div>
|
|
<div class="legend-table" v-for="item in legenditems" :key="item.name">
|
|
<base-button size="small" circle ghost :icon="item.iconname" class="legend-icon">
|
|
<span v-if="item.label">{{ item.label }}</span>
|
|
</base-button>
|
|
<span>{{$t(item.name)}}</span>
|
|
<span class="tool-shortcut">{{ item.shortcut }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</dropdown>
|
|
</template>
|
|
|
|
<script>
|
|
import Dropdown from '~/components/Dropdown'
|
|
|
|
export default {
|
|
components: {
|
|
Dropdown,
|
|
},
|
|
props: {
|
|
placement: { type: String, default: 'bottom-start' },
|
|
},
|
|
data() {
|
|
return {
|
|
legenditems: [
|
|
{ iconname: 'bold', name: `editor.legend.bold`, shortcut: 'Ctrl+b' },
|
|
{ iconname: 'italic', name: `editor.legend.italic`, shortcut: 'Ctrl+i' },
|
|
{ iconname: 'underline', name:`editor.legend.underline`, shortcut: 'Ctrl+u' },
|
|
{ iconname: 'link', name:`editor.legend.link`, shortcut: '' },
|
|
{ iconname: 'paragraph', name:`editor.legend.paragraph`, shortcut: '' },
|
|
{ label: 'H3', name:`editor.legend.heading3`, shortcut: '### + space' },
|
|
{ label: 'H4', name:`editor.legend.heading4`, shortcut: '#### + space' },
|
|
{ iconname: 'list-ul', name:`editor.legend.unorderedList`, shortcut: '* + space' },
|
|
{ iconname: 'list-ol', name:`editor.legend.orderedList`, shortcut: '1. + space' },
|
|
{ iconname: 'quote-right', name:`editor.legend.quote`, shortcut: '> + space' },
|
|
{ iconname: 'minus', name:`editor.legend.ruler`, shortcut: '---' },
|
|
],
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.legend {
|
|
padding: 0rem;
|
|
border: 1px solid #e5e3e8;
|
|
}
|
|
.legend-container {
|
|
display: flex;
|
|
width: 18rem !important;
|
|
flex-direction: column;
|
|
}
|
|
.legend-header {
|
|
margin-bottom: 0.5em;
|
|
text-align:center;
|
|
}
|
|
.legend-table {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: 0.5fr 1fr 2fr;
|
|
border-bottom: 0.5px solid grey;
|
|
padding: 0.2em;
|
|
}
|
|
.tool-shortcut {
|
|
padding-left: 2rem;
|
|
}
|
|
.legend-icon {
|
|
pointer-events: none;
|
|
}
|
|
</style>
|