feat(editor): add proper description for all buttons

This commit is contained in:
kolaente 2023-10-21 11:10:43 +02:00
parent 0772acbead
commit c84bcfddba
Signed by untrusted user: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 47 additions and 17 deletions

View File

@ -256,7 +256,7 @@
<icon :icon="['fa', 'fa-table']"/> <icon :icon="['fa', 'fa-table']"/>
</span> </span>
</BaseButton> </BaseButton>
<div v-if="tableMode"> <div v-if="tableMode" class="editor-toolbar__table-buttons">
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click=" @click="
@ -267,105 +267,105 @@
.run() .run()
" "
> >
insertTable {{ $t('input.editor.table.insert') }}
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().addColumnBefore().run()" @click="editor.chain().focus().addColumnBefore().run()"
:disabled="!editor.can().addColumnBefore" :disabled="!editor.can().addColumnBefore"
> >
addColumnBefore {{ $t('input.editor.table.addColumnBefore') }}
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().addColumnAfter().run()" @click="editor.chain().focus().addColumnAfter().run()"
:disabled="!editor.can().addColumnAfter" :disabled="!editor.can().addColumnAfter"
> >
addColumnAfter {{ $t('input.editor.table.addColumnAfter') }}
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().deleteColumn().run()" @click="editor.chain().focus().deleteColumn().run()"
:disabled="!editor.can().deleteColumn" :disabled="!editor.can().deleteColumn"
> >
deleteColumn {{ $t('input.editor.table.deleteColumn') }}
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().addRowBefore().run()" @click="editor.chain().focus().addRowBefore().run()"
:disabled="!editor.can().addRowBefore" :disabled="!editor.can().addRowBefore"
> >
addRowBefore {{ $t('input.editor.table.addRowBefore') }}
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().addRowAfter().run()" @click="editor.chain().focus().addRowAfter().run()"
:disabled="!editor.can().addRowAfter" :disabled="!editor.can().addRowAfter"
> >
addRowAfter {{ $t('input.editor.table.addRowAfter') }}
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().deleteRow().run()" @click="editor.chain().focus().deleteRow().run()"
:disabled="!editor.can().deleteRow" :disabled="!editor.can().deleteRow"
> >
deleteRow {{ $t('input.editor.table.deleteRow') }}
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().deleteTable().run()" @click="editor.chain().focus().deleteTable().run()"
:disabled="!editor.can().deleteTable" :disabled="!editor.can().deleteTable"
> >
deleteTable {{ $t('input.editor.table.deleteTable') }}
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().mergeCells().run()" @click="editor.chain().focus().mergeCells().run()"
:disabled="!editor.can().mergeCells" :disabled="!editor.can().mergeCells"
> >
mergeCells {{ $t('input.editor.table.mergeCells') }}
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().splitCell().run()" @click="editor.chain().focus().splitCell().run()"
:disabled="!editor.can().splitCell" :disabled="!editor.can().splitCell"
> >
splitCell {{ $t('input.editor.table.splitCell') }}
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeaderColumn().run()" @click="editor.chain().focus().toggleHeaderColumn().run()"
:disabled="!editor.can().toggleHeaderColumn" :disabled="!editor.can().toggleHeaderColumn"
> >
toggleHeaderColumn {{ $t('input.editor.table.toggleHeaderColumn') }}
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeaderRow().run()" @click="editor.chain().focus().toggleHeaderRow().run()"
:disabled="!editor.can().toggleHeaderRow" :disabled="!editor.can().toggleHeaderRow"
> >
toggleHeaderRow {{ $t('input.editor.table.toggleHeaderRow') }}
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeaderCell().run()" @click="editor.chain().focus().toggleHeaderCell().run()"
:disabled="!editor.can().toggleHeaderCell" :disabled="!editor.can().toggleHeaderCell"
> >
toggleHeaderCell {{ $t('input.editor.table.toggleHeaderCell') }}
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().mergeOrSplit().run()" @click="editor.chain().focus().mergeOrSplit().run()"
:disabled="!editor.can().mergeOrSplit" :disabled="!editor.can().mergeOrSplit"
> >
mergeOrSplit {{ $t('input.editor.table.mergeOrSplit') }}
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().fixTables().run()" @click="editor.chain().focus().fixTables().run()"
:disabled="!editor.can().fixTables" :disabled="!editor.can().fixTables"
> >
fixTables {{ $t('input.editor.table.fixTables') }}
</BaseButton> </BaseButton>
</div> </div>
</div> </div>
@ -499,4 +499,17 @@ function setLink() {
font-weight: bold; font-weight: bold;
vertical-align: top; vertical-align: top;
} }
.editor-toolbar__table-buttons {
margin-top: .5rem;
> .editor-toolbar__button {
margin-right: .5rem;
margin-bottom: .5rem;
padding: 0 .25rem;
border: 1px solid var(--grey-400);
font-size: .75rem;
height: 1.5rem;
}
}
</style> </style>

View File

@ -531,7 +531,24 @@
"table": "Table", "table": "Table",
"horizontalRule": "Horizontal Rule", "horizontalRule": "Horizontal Rule",
"sideBySide": "Side By Side", "sideBySide": "Side By Side",
"guide": "Guide" "guide": "Guide",
"table": {
"insert": "Insert table",
"addColumnBefore": "Add column before",
"addColumnAfter": "Add column after",
"deleteColumn": "Delete column",
"addRowBefore": "Add row before",
"addRowAfter": "Add row after",
"deleteRow": "Delete row",
"deleteTable": "Delete table",
"mergeCells": "Merge cells",
"splitCell": "Split cell",
"toggleHeaderColumn": "Toggle header column",
"toggleHeaderRow": "Toggle header row",
"toggleHeaderCell": "Toggle header cell",
"mergeOrSplit": "Merge or split",
"fixTables": "Fix tables"
}
}, },
"multiselect": { "multiselect": {
"createPlaceholder": "Create new", "createPlaceholder": "Create new",