wiki - add 'write' 'preview' buttons to wiki edit like in issues (#7241)

* Add add 'write' 'preview' buttons to wiki edit like in issues

affects #6975

Signed-off-by: Michael Gnehr <[email protected]>

* update dark theme

Signed-off-by: Michael Gnehr <[email protected]>

* fix css lint warnings - missing spaces

Signed-off-by: Michael Gnehr <[email protected]>

* hide preview button on no fullscreen toolbar

Signed-off-by: Michael Gnehr <[email protected]>

Author: Cherrg

public/css/index.css

@@ -754,6 +754,8 @@ i.icon.centerlock{top:1.5em}
 .repository.wiki.new .CodeMirror .CodeMirror-code{font-family:'SF Mono',Consolas,Menlo,'Liberation Mono',Monaco,'Lucida Console',monospace}
 .repository.wiki.new .CodeMirror .CodeMirror-code .cm-comment{background:inherit}
 .repository.wiki.new .editor-preview{background-color:#fff}
+.repository.wiki.new .ui.attached.tabular.menu.previewtabs{margin-bottom:15px}
+.repository.wiki.new .ui.attached.tabular.menu.previewtabs+.field .editor-toolbar:not(.fullscreen) a.fa-eye{display:none}
 .repository.wiki.view .choose.page{margin-top:-5px}
 .repository.wiki.view .ui.sub.header{text-transform:none}
 .repository.wiki.view>.markdown{padding:15px 30px}

public/css/theme-arc-green.css

@@ -94,6 +94,9 @@ footer{background:#2e323e;border-top:1px solid #313131}
 .ui .text.grey{color:#808084!important}
 .ui.attached.table.segment{background:#353945;color:#dbdbdb!important}
 .markdown:not(code) h2{border-bottom:1px solid #304251}
+.repository.wiki.new .ui.container form .ui.tabular.menu{border-bottom:1px solid rgba(187,187,187,.6)}
+.repository.wiki.new .ui.container form .ui.tabular.menu .active.item{border-top:1px solid rgba(187,187,187,.6);border-left:1px solid rgba(187,187,187,.6);border-right:1px solid rgba(187,187,187,.6)}
+.repository.wiki.new .ui.container form .ui.tabular.menu .active.item:hover{background:#4b5162}
 .hljs,.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#9daccc}
 .markdown:not(code) .highlight pre,.markdown:not(code) pre{background-color:#2a2e3a;border:1px solid #404552}
 .markdown:not(code) table tr:nth-child(2n){background-color:#2a2e39}

public/js/index.js

@@ -16,6 +16,10 @@
 			<div class="field {{if .Err_Title}}error{{end}}">
 				<input name="title" value="{{.title}}" autofocus required>
 			</div>
+			<div class="ui top attached tabular menu previewtabs">
+				<a class="active item" data-tab="write">{{.i18n.Tr "write"}}</a>
+				<a class="item" data-tab="preview">{{.i18n.Tr "preview"}}</a>
+			</div>
 			<div class="field">
 				<textarea class="js-quick-submit" id="edit_area" name="content" data-id="wiki-{{.title}}" data-url="{{.Repository.APIURL}}/markdown" data-context="{{.RepoLink}}/wiki" required>{{if .PageIsWikiEdit}}{{.content}}{{else}}{{.i18n.Tr "repo.wiki.welcome"}}{{end}}</textarea>
 			</div>

public/js/index.js.map

@@ -1232,6 +1232,46 @@ function initWikiForm() {
         'clean-block', 'preview', 'fullscreen', 'side-by-side']
     });
     $(simplemde.codemirror.getInputField()).addClass('js-quick-submit');
+
+    setTimeout(() => {
+      const $bEdit = $('.repository.wiki.new .previewtabs a[data-tab="write"]');
+      const $bPrev = $('.repository.wiki.new .previewtabs a[data-tab="preview"]');
+      const $toolbar = $('.editor-toolbar');
+      const $bPreview = $('.editor-toolbar a.fa-eye');
+      const $bSideBySide = $('.editor-toolbar a.fa-columns');
+      $bEdit.on('click', () => {
+        if ($toolbar.hasClass('disabled-for-preview')) {
+          $bPreview.click();
+        }
+      });
+      $bPrev.on('click', () => {
+        if (!$toolbar.hasClass('disabled-for-preview')) {
+          $bPreview.click();
+        }
+      });
+      $bPreview.on('click', () => {
+        setTimeout(() => {
+          if ($toolbar.hasClass('disabled-for-preview')) {
+            if ($bEdit.hasClass('active')) {
+              $bEdit.removeClass('active');
+            }
+            if (!$bPrev.hasClass('active')) {
+              $bPrev.addClass('active');
+            }
+          } else {
+            if (!$bEdit.hasClass('active')) {
+              $bEdit.addClass('active');
+            }
+            if ($bPrev.hasClass('active')) {
+              $bPrev.removeClass('active');
+            }
+          }
+        }, 0);
+      });
+      $bSideBySide.on('click', () => {
+        sideBySideChanges = 10;
+      });
+    }, 0);
   }
 }
 

templates/repo/wiki/new.tmpl

@@ -1717,6 +1717,14 @@
             .editor-preview {
                 background-color: white;
             }
+
+            .ui.attached.tabular.menu.previewtabs {
+                margin-bottom: 15px;
+
+                & + .field .editor-toolbar:not(.fullscreen) a.fa-eye {
+                    display: none;
+                }
+            }
         }
 
         &.view {

web_src/js/index.js

@@ -516,6 +516,19 @@ a.ui.basic.green.label:hover {
     border-bottom: 1px solid #304251;
 }
 
+.repository.wiki.new .ui.container form .ui.tabular.menu {
+    border-bottom: 1px solid rgba(187, 187, 187, 0.6);
+
+    .active.item {
+        border-top: 1px solid rgba(187, 187, 187, 0.6);
+        border-left: 1px solid rgba(187, 187, 187, 0.6);
+        border-right: 1px solid rgba(187, 187, 187, 0.6);
+        &:hover {
+            background: #4b5162;
+        }
+    }
+}
+
 .hljs,
 .hljs-keyword,
 .hljs-selector-tag,