editor improvements and simplifications

templates/repo/editor/edit.tmpl

@@ -26,7 +26,7 @@
 				</div>
 			</div>
 			<div class="field">
-				<div class="ui compact small menu small-menu-items repo-editor-menu" data-write="write" data-preview="preview" data-diff="diff">
+				<div class="ui compact small menu small-menu-items repo-editor-menu">
 					<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
 					<a class="item" data-tab="preview" data-url="{{.Repository.Link}}/markup" data-context="{{.RepoLink}}/src/{{.BranchNameSubURL}}" data-markup-mode="file">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
 					{{if not .IsNewFile}}

templates/repo/editor/patch.tmpl

@@ -19,10 +19,10 @@
 				</div>
 			</div>
 			<div class="field">
-				<div class="ui top attached tabular menu" data-write="write">
+				<div class="ui compact small menu small-menu-items repo-editor-menu">
 					<a class="active item" data-tab="write">{{svg "octicon-code" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.editor.new_patch"}}</a>
 				</div>
-				<div class="ui bottom attached active tab segment" data-tab="write">
+				<div class="ui active tab segment tw-rounded tw-p-0" data-tab="write">
 					<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-patch"
 						data-context="{{.RepoLink}}"
 						data-line-wrap-extensions="{{.LineWrapExtensions}}">

web_src/css/modules/menu.css

@@ -799,3 +799,23 @@
 .ui.segment .ui.tabular.menu .active.item:hover {
   background: var(--color-box-body);
 }
+
+.small-menu-items {
+  min-height: 35.4px !important; /* match .small.button in height */
+  background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
+  user-select: none;
+}
+
+.small-menu-items .item {
+  background: var(--color-menu) !important;
+  padding-top: 6px !important;
+  padding-bottom: 6px !important;
+}
+
+.small-menu-items .item:hover {
+  background: var(--color-hover) !important;
+}
+
+.small-menu-items .item.active {
+  background: var(--color-active) !important;
+}

web_src/css/repo/list-header.css

@@ -25,25 +25,6 @@
   flex: 1;
 }
 
-.small-menu-items {
-  min-height: 35.4px !important; /* match .small.button in height */
-  background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
-}
-
-.small-menu-items .item {
-  background: var(--color-menu) !important;
-  padding-top: 6px !important;
-  padding-bottom: 6px !important;
-}
-
-.small-menu-items .item:hover {
-  background: var(--color-hover) !important;
-}
-
-.small-menu-items .item.active {
-  background: var(--color-active) !important;
-}
-
 @media (max-width: 767.98px) {
   .list-header-search {
     order: 0;

web_src/js/features/repo-editor.js

@@ -7,9 +7,9 @@ import {attachRefIssueContextPopup} from './contextpopup.js';
 import {POST} from '../modules/fetch.js';
 
 function initEditPreviewTab($form) {
-  const $tabMenu = $form.find('.repo-editor-menu');
+  const $menu = $form.find('.repo-editor-menu');
-  $tabMenu.find('.item').tab();
+  $menu.find('.item').tab();
-  const $previewTab = $tabMenu.find(`.item[data-tab="${$tabMenu.data('preview')}"]`);
+  const $previewTab = $menu.find('a[data-tab="preview"]');
   if ($previewTab.length) {
     $previewTab.on('click', async function () {
       const $this = $(this);
@@ -24,13 +24,17 @@ function initEditPreviewTab($form) {
       const formData = new FormData();
       formData.append('mode', mode);
       formData.append('context', context);
-      formData.append('text', $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val());
+      formData.append('text', $form.find('.tab[data-tab="write"] textarea').val());
       formData.append('file_path', $treePathEl.val());
       try {
         const response = await POST($this.data('url'), {data: formData});
         const data = await response.text();
-        const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
+        const $previewPanel = $form.find('.tab[data-tab="preview"]');
-        renderPreviewPanelContent($previewPanel, data);
+        if ($previewPanel.length) {
+          $previewPanel.html(data);
+          initMarkupContent();
+          attachRefIssueContextPopup($panelPreviewer.find('p .ref-issue'));
+        }
       } catch (error) {
         console.error('Error:', error);
       }
@@ -174,11 +178,3 @@ export function initRepoEditor() {
     });
   })();
 }
-
-export function renderPreviewPanelContent($panelPreviewer, data) {
-  $panelPreviewer.html(data);
-  initMarkupContent();
-
-  const $refIssues = $panelPreviewer.find('p .ref-issue');
-  attachRefIssueContextPopup($refIssues);
-}