bjoernager/forgejo
bjoernager/forgejo
1
Fork 0
Code Issues Pull requests Activity

ui: use switch for markdown editor modes (#7481)

Browse source 
Replaces https://codeberg.org/forgejo/forgejo/pulls/5478
Closes https://codeberg.org/forgejo/forgejo/issues/244

Use switch for preview mode switching instead of tabs. It is placed in line with the toolbar buttons.

Preview:
* https://codeberg.org/attachments/38910747-c14c-41d1-9935-c35f3e17033b
* https://codeberg.org/attachments/ff8ea47a-f157-424f-8b7f-af1008d5e8b5

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7481
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
This commit is contained in:
0ko 2025-04-07 13:47:13 +00:00
parent 8296a23d79
commit afffbe2982
5 changed files with 94 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web_src/css/editor/combomarkdowneditor.css
View file

@ -11,6 +11,14 @@
flex-wrap: wrap;
}
markdown-toolbar .switch .item {
padding: 0.25em 1em;
}
.markdown-toolbar-hidden .markdown-toolbar-button {
display: none;
}
.combo-markdown-editor .markdown-toolbar-group {
display: flex;
}

5
web_src/js/features/comp/ComboMarkdownEditor.js
View file

@ -151,7 +151,7 @@ class ComboMarkdownEditor {
setupTab() {
const $container = $(this.container);
const tabs = $container[0].querySelectorAll('.tabular.menu > .item');
const tabs = $container[0].querySelectorAll('.switch > .item');
// Fomantic Tab requires the "data-tab" to be globally unique.
// So here it uses our defined "data-tab-for" and "data-tab-panel" to generate the "data-tab" attribute for Fomantic.
@ -159,12 +159,14 @@ class ComboMarkdownEditor {
const tabPreviewer = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer');
tabEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`);
tabPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`);
const toolbar = $container[0].querySelector('markdown-toolbar');
const panelEditor = $container[0].querySelector('.ui.tab[data-tab-panel="markdown-writer"]');
const panelPreviewer = $container[0].querySelector('.ui.tab[data-tab-panel="markdown-previewer"]');
panelEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`);
panelPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`);
tabEditor.addEventListener('click', () => {
toolbar.classList.remove('markdown-toolbar-hidden');
requestAnimationFrame(() => {
this.focus();
});
@ -177,6 +179,7 @@ class ComboMarkdownEditor {
this.previewMode = this.options.previewMode ?? 'comment';
this.previewWiki = this.options.previewWiki ?? false;
tabPreviewer.addEventListener('click', async () => {
toolbar.classList.add('markdown-toolbar-hidden');
const formData = new FormData();
formData.append('mode', this.previewMode);
formData.append('context', this.previewContext);

2
web_src/js/features/repo-legacy.js
View file

@ -469,7 +469,7 @@ async function onEditContent(event) {
editContentZone.querySelector('button[data-button-name="cancel-edit"]').addEventListener('click', cancelAndReset);
editContentZone.querySelector('button[data-button-name="save-edit"]').addEventListener('click', saveAndRefresh);
} else {
const tabEditor = editContentZone.querySelector('.combo-markdown-editor').querySelector('.tabular.menu > a[data-tab-for=markdown-writer]');
const tabEditor = editContentZone.querySelector('.combo-markdown-editor').querySelector('.switch > a[data-tab-for=markdown-writer]');
tabEditor?.click();
}