forgejo/templates/repo/editor/edit.tmpl
wxiaoguang 75c62054a6
Improve some modal action buttons ()
Follow  and 

And add a devtest page for modal action button testing.
http://localhost:3000/devtest/fomantic-modal

Now the `modal_actions_confirm.tmpl` could support: green / blue /
yellow positive buttons, the negative button is "secondary".

ps: this PR is only a small improvement, there are still a lot of
buttons not having proper colors. In the future these buttons could be
improved by this approach.

These buttons could also be improved according to the conclusion of
 in the future.



![image](https://user-images.githubusercontent.com/2114189/233847773-a6d6b29b-7b5c-490e-8425-40dfd0ad2529.png)


And add GitHub-like single danger button (context:
https://github.com/go-gitea/gitea/issues/24285#issuecomment-1519100312)


![image](https://user-images.githubusercontent.com/2114189/233891566-055d7611-894d-4d5a-baf5-f6369180bf8d.png)

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-04-24 07:08:59 -04:00

80 lines
3.7 KiB
Handlebars

{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository file editor edit">
{{template "repo/header" .}}
<div class="ui container">
{{template "base/alert" .}}
<form class="ui edit form" method="post">
{{.CsrfTokenHtml}}
<input type="hidden" name="last_commit" value="{{.last_commit}}">
<input type="hidden" name="page_has_posted" value="{{.PageHasPosted}}">
<div class="ui secondary menu">
<div class="fitted item treepath">
<div class="ui breadcrumb field {{if .Err_TreePath}}error{{end}}">
<a class="section" href="{{$.BranchLink}}">{{.Repository.Name}}</a>
{{$n := len .TreeNames}}
{{$l := Eval $n "-" 1}}
{{range $i, $v := .TreeNames}}
<div class="divider"> / </div>
{{if eq $i $l}}
<input id="file-name" value="{{$v}}" placeholder="{{$.locale.Tr "repo.editor.name_your_file"}}" data-editorconfig="{{$.Editorconfig}}" required autofocus>
<span data-tooltip-content="{{$.locale.Tr "repo.editor.filename_help"}}">{{svg "octicon-info"}}</span>
{{else}}
<span class="section"><a href="{{$.BranchLink}}/{{index $.TreePaths $i | PathEscapeSegments}}">{{$v}}</a></span>
{{end}}
{{end}}
<span>{{.locale.Tr "repo.editor.or"}} <a href="{{$.BranchLink}}{{if not .IsNewFile}}/{{PathEscapeSegments .TreePath}}{{end}}">{{.locale.Tr "repo.editor.cancel_lower"}}</a></span>
<input type="hidden" id="tree_path" name="tree_path" value="{{.TreePath}}" required>
</div>
</div>
</div>
<div class="field">
<div class="ui top attached tabular menu" data-write="write" data-preview="preview" data-diff="diff">
<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{.locale.Tr "repo.editor.new_file"}}{{else}}{{.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"}} {{.locale.Tr "preview"}}</a>
{{if not .IsNewFile}}
<a class="item" data-tab="diff" data-url="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" data-context="{{.BranchLink}}">{{svg "octicon-diff"}} {{.locale.Tr "repo.editor.preview_changes"}}</a>
{{end}}
</div>
<div class="ui bottom attached active tab segment" data-tab="write">
<textarea id="edit_area" name="content" class="gt-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
data-url="{{.Repository.Link}}/markup"
data-context="{{.RepoLink}}"
data-previewable-extensions="{{.PreviewableExtensions}}"
data-line-wrap-extensions="{{.LineWrapExtensions}}">
{{.FileContent}}</textarea>
<div class="editor-loading is-loading"></div>
</div>
<div class="ui bottom attached tab segment markup" data-tab="preview">
{{.locale.Tr "loading"}}
</div>
<div class="ui bottom attached tab segment diff edit-diff" data-tab="diff">
{{.locale.Tr "loading"}}
</div>
</div>
{{template "repo/editor/commit_form" .}}
</form>
</div>
<div class="ui g-modal-confirm modal" id="edit-empty-content-modal">
<div class="header">
{{svg "octicon-file"}}
{{.locale.Tr "repo.editor.commit_empty_file_header"}}
</div>
<div class="center content">
<p>{{.locale.Tr "repo.editor.commit_empty_file_text"}}</p>
</div>
<div class="actions">
<button class="ui red cancel button">
{{svg "octicon-x"}}
{{.locale.Tr "repo.editor.cancel"}}
</button>
<button class="ui green ok button">
{{svg "fontawesome-save"}}
{{.locale.Tr "repo.editor.commit_changes"}}
</button>
</div>
</div>
</div>
{{template "base/footer" .}}