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

affects go-gitea#6975 Signed-off-by: Michael Gnehr <michael@gnehr.de>
Cherrg · Jun 18, 2019 · be0dceb · be0dceb
1 parent 2d09765
commit be0dceb
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 1 deletion.
diff --git a/public/css/index.css b/public/css/index.css
@@ -693,6 +693,7 @@ footer .ui.left,footer .ui.right{line-height:40px}
 .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.view .choose.page{margin-top:-5px}
 .repository.wiki.view .ui.sub.header{text-transform:none}
 .repository.wiki.view>.markdown{padding:15px 30px}

diff --git a/public/js/index.js b/public/js/index.js
@@ -1164,8 +1164,44 @@ function initWikiForm() {
                 "unordered-list", "ordered-list", "|",
                 "link", "image", "table", "horizontal-rule", "|",
                 "clean-block", "preview", "fullscreen"]
-        })
+        });
         $(simplemde.codemirror.getInputField()).addClass("js-quick-submit");
+
+        setTimeout(function(){
+            let $bEdit = $('.repository.wiki.new .previewtabs a[data-tab="write"]');
+            let $bPrev = $('.repository.wiki.new .previewtabs a[data-tab="preview"]');
+            let $toolbar = $('.editor-toolbar');
+            let $bPreview = $('.editor-toolbar a.fa-eye');
+            $bEdit.on('click', function () {
+                if ($toolbar.hasClass('disabled-for-preview')){
+                    $bPreview.click();
+                }
+            });
+            $bPrev.on('click', function () {
+                if (!$toolbar.hasClass('disabled-for-preview')){
+                    $bPreview.click();
+                }
+            });
+            $bPreview.on('click', function(){
+                setTimeout(function(){
+                    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');
+                        }
+                    }
+                }, 5);
+            });
+        },5);
     }
 }
 

diff --git a/public/less/_repository.less b/public/less/_repository.less
@@ -1680,6 +1680,10 @@
             .editor-preview {
                 background-color: white;
             }
+
+            .ui.attached.tabular.menu.previewtabs {
+                margin-bottom: 15px;
+            }
         }
 
         &.view {

diff --git a/templates/repo/wiki/new.tmpl b/templates/repo/wiki/new.tmpl
@@ -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>