mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-11-26 17:22:43 +01:00
Prettify timeline 3 (#11139)
* Fix timeline comments sections borders * Fix files dropzone right alignment * Update review comment form and controls * Clear segment style from comment form tabs * Remove segment class from pulls tab * Fix Time Tracker - Add Time button border * Fix buttons right alignment * Markdown tab minimal height * Fix DropZone hover effect * Fix Lint + remove unused controls class Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: zeripath <art27@cantab.net>
This commit is contained in:
Sorien
GitHub
parent
a552af8f0d
commit
1982194dc5
11 changed files with 124 additions and 94 deletions
|
|
@ -2,7 +2,7 @@
|
|||
{{if $.hidden}}
|
||||
<button class="comment-form-reply ui green labeled icon tiny button"><i class="reply icon"></i> {{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>
|
||||
{{end}}
|
||||
<form class="ui form {{if $.hidden}}hide comment-form comment-form-reply{{end}}" action="{{$.root.Issue.HTMLURL}}/files/reviews/comments" method="post">
|
||||
<form class="ui form {{if $.hidden}}hide{{end}} comment-form comment-form-reply" action="{{$.root.Issue.HTMLURL}}/files/reviews/comments" method="post">
|
||||
{{$.root.CsrfTokenHtml}}
|
||||
<input type="hidden" name="latest_commit_id" value="{{$.root.AfterCommitID}}"/>
|
||||
<input type="hidden" name="side" value="{{if $.Side}}{{$.Side}}{{end}}">
|
||||
|
|
@ -11,24 +11,24 @@
|
|||
<input type="hidden" name="diff_start_cid">
|
||||
<input type="hidden" name="diff_end_cid">
|
||||
<input type="hidden" name="diff_base_cid">
|
||||
<div class="ui top attached tabular menu" {{if not $.hidden}}onload="assingMenuAttributes(this)" {{end}}data-write="write" data-preview="preview">
|
||||
<div class="ui top tabular menu" {{if not $.hidden}}onload="assingMenuAttributes(this)" {{end}}data-write="write" data-preview="preview">
|
||||
<a class="active item" data-tab="write">{{$.root.i18n.Tr "write"}}</a>
|
||||
<a class="item" data-tab="preview" data-url="{{$.root.Repository.APIURL}}/markdown" data-context="{{$.root.RepoLink}}">{{$.root.i18n.Tr "preview"}}</a>
|
||||
</div>
|
||||
<div class="ui bottom attached active tab segment" data-tab="write">
|
||||
<div class="field">
|
||||
<div class="ui active tab" data-tab="write">
|
||||
<textarea name="content" placeholder="{{$.root.i18n.Tr "repo.diff.comment.placeholder"}}"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui bottom attached tab segment markdown" data-tab="preview">
|
||||
<div class="ui tab markdown" data-tab="preview">
|
||||
{{.i18n.Tr "loading"}}
|
||||
</div>
|
||||
<div class="footer">
|
||||
</div>
|
||||
<div class="field footer">
|
||||
<span class="markdown-info">{{svg "octicon-markdown" 16}} {{$.root.i18n.Tr "repo.diff.comment.markdown_info"}}</span>
|
||||
<div class="ui right floated">
|
||||
<div class="ui right">
|
||||
{{if $.reply}}
|
||||
<input type="hidden" name="reply" value="{{$.reply}}">
|
||||
<button class="ui submit green tiny button btn-reply" onclick="window.submitReply(this);">{{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>
|
||||
<input type="hidden" name="reply" value="{{$.reply}}">
|
||||
{{else}}
|
||||
{{if $.root.CurrentReview}}
|
||||
<button name="is_review" value="true" type="submit"
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
<div class="field">
|
||||
<div class="files"></div>
|
||||
<div class="ui basic button dropzone" id="dropzone" data-upload-url="{{.RepoLink}}/upload-file" data-remove-url="{{.RepoLink}}/upload-remove" data-csrf="{{.CsrfToken}}" data-accepts="{{.UploadAllowedTypes}}" data-max-file="{{.UploadMaxFiles}}" data-max-size="{{.UploadMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"></div>
|
||||
<div class="ui dropzone" id="dropzone" data-upload-url="{{.RepoLink}}/upload-file" data-remove-url="{{.RepoLink}}/upload-remove" data-csrf="{{.CsrfToken}}" data-accepts="{{.UploadAllowedTypes}}" data-max-file="{{.UploadMaxFiles}}" data-max-size="{{.UploadMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"></div>
|
||||
</div>
|
||||
{{template "repo/editor/commit_form" .}}
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
<div class="field">
|
||||
<div class="ui top attached tabular menu" data-write="write" data-preview="preview">
|
||||
<div class="ui top tabular menu" data-write="write" data-preview="preview">
|
||||
<a class="active item" data-tab="write">{{.i18n.Tr "write"}}</a>
|
||||
<a class="item" data-tab="preview" data-url="{{.Repository.APIURL}}/markdown" data-context="{{.RepoLink}}">{{.i18n.Tr "preview"}}</a>
|
||||
</div>
|
||||
<div class="ui bottom attached active tab segment" data-tab="write">
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui bottom active tab" data-tab="write">
|
||||
<textarea id="content" class="edit_area js-quick-submit" name="content" tabindex="4" data-id="issue-{{.RepoName}}" data-url="{{.Repository.APIURL}}/markdown" data-context="{{.Repo.RepoLink}}">
|
||||
{{if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end}}</textarea>
|
||||
</div>
|
||||
<div class="ui bottom attached tab segment markdown" data-tab="preview">
|
||||
<div class="ui bottom tab markdown" data-tab="preview">
|
||||
{{.i18n.Tr "loading"}}
|
||||
</div>
|
||||
</div>
|
||||
{{if .IsAttachmentEnabled}}
|
||||
<div class="field">
|
||||
<div class="files"></div>
|
||||
<div class="ui basic button dropzone" id="dropzone" data-upload-url="{{AppSubUrl}}/attachments" data-accepts="{{.AttachmentAllowedTypes}}" data-max-file="{{.AttachmentMaxFiles}}" data-max-size="{{.AttachmentMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"></div>
|
||||
<div class="ui dropzone" id="dropzone" data-upload-url="{{AppSubUrl}}/attachments" data-accepts="{{.AttachmentAllowedTypes}}" data-max-file="{{.AttachmentMaxFiles}}" data-max-size="{{.AttachmentMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"></div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
{{if .Issue.IsPull}}
|
||||
{{template "repo/issue/view_title" .}}
|
||||
{{template "repo/pulls/tab_menu" .}}
|
||||
<div class="ui bottom attached tab pull segment active" data-tab="request-{{.ID}}">
|
||||
<div class="ui bottom attached tab pull active" data-tab="request-{{.ID}}">
|
||||
{{template "repo/issue/view_content" .}}
|
||||
</div>
|
||||
{{else}}
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@
|
|||
{{template "repo/issue/comment_tab" .}}
|
||||
{{.CsrfTokenHtml}}
|
||||
<input id="status" name="status" type="hidden">
|
||||
<div class="field footer">
|
||||
<div class="text right">
|
||||
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
|
||||
{{if .Issue.IsClosed}}
|
||||
|
|
@ -103,6 +104,7 @@
|
|||
{{.i18n.Tr "repo.issues.create_comment"}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -136,6 +138,7 @@
|
|||
{{template "repo/issue/comment_tab" .}}
|
||||
{{.CsrfTokenHtml}}
|
||||
<input id="status" name="status" type="hidden">
|
||||
<div class="field footer">
|
||||
<div class="text right">
|
||||
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
|
||||
{{if .Issue.IsClosed}}
|
||||
|
|
@ -152,6 +155,7 @@
|
|||
{{.i18n.Tr "repo.issues.create_comment"}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -171,19 +175,22 @@
|
|||
|
||||
<div class="hide" id="edit-content-form">
|
||||
<div class="ui comment form">
|
||||
<div class="ui top attached tabular menu">
|
||||
<div class="ui top tabular menu">
|
||||
<a class="active write item">{{$.i18n.Tr "write"}}</a>
|
||||
<a class="preview item" data-url="{{$.Repository.APIURL}}/markdown" data-context="{{$.RepoLink}}">{{$.i18n.Tr "preview"}}</a>
|
||||
</div>
|
||||
<div class="ui bottom attached active write tab segment">
|
||||
<div class="field">
|
||||
<div class="ui bottom active tab write">
|
||||
<textarea tabindex="1" name="content"></textarea>
|
||||
</div>
|
||||
<div class="ui bottom attached tab preview segment markdown">
|
||||
<div class="ui bottom tab preview markdown">
|
||||
{{$.i18n.Tr "loading"}}
|
||||
</div>
|
||||
</div>
|
||||
{{if .IsAttachmentEnabled}}
|
||||
<div class="field">
|
||||
<div class="comment-files"></div>
|
||||
<div class="ui basic button dropzone" id="comment-dropzone"
|
||||
<div class="ui dropzone" id="comment-dropzone"
|
||||
data-upload-url="{{AppSubUrl}}/attachments"
|
||||
data-remove-url="{{AppSubUrl}}/attachments/delete"
|
||||
data-csrf="{{.CsrfToken}}" data-accepts="{{.AttachmentAllowedTypes}}"
|
||||
|
|
@ -193,12 +200,15 @@
|
|||
data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}"
|
||||
data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}">
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="text right edit buttons">
|
||||
<div class="field footer">
|
||||
<div class="text right edit">
|
||||
<div class="ui basic blue cancel button" tabindex="3">{{.i18n.Tr "repo.issues.cancel"}}</div>
|
||||
<div class="ui green save button" tabindex="2">{{.i18n.Tr "repo.issues.save"}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hide" id="no-content">
|
||||
|
|
|
|||
|
|
@ -304,7 +304,6 @@
|
|||
{{end}}
|
||||
<div class="ui buttons two fluid start-add">
|
||||
<button onclick="this.disabled=true;window.toggleStopwatch()" class="ui button poping up start" data-content='{{.i18n.Tr "repo.issues.start_tracking"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.start_tracking_short"}}</button>
|
||||
<button onclick="window.timeAddManual()" class="ui button green poping up add-time" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
|
||||
<div class="ui mini modal">
|
||||
<div class="header">{{.i18n.Tr "repo.issues.add_time"}}</div>
|
||||
<div class="content">
|
||||
|
|
@ -319,6 +318,7 @@
|
|||
<div class="ui red cancel button">{{.i18n.Tr "repo.issues.add_time_cancel"}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="window.timeAddManual()" class="ui button green poping up add-time" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<div class="ui divider"></div>
|
||||
{{template "repo/issue/view_title" .}}
|
||||
{{template "repo/pulls/tab_menu" .}}
|
||||
<div class="ui bottom attached tab pull segment active">
|
||||
<div class="ui bottom attached tab pull active">
|
||||
{{template "repo/commits_table" .}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
{{template "repo/issue/view_title" .}}
|
||||
{{template "repo/pulls/tab_menu" .}}
|
||||
{{template "base/alert" .}}
|
||||
<div class="ui bottom attached tab pull segment active">
|
||||
<div class="ui bottom attached tab pull active">
|
||||
{{template "repo/diff/box" .}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -49,8 +49,10 @@
|
|||
<textarea name="content">{{.content}}</textarea>
|
||||
</div>
|
||||
{{if .IsAttachmentEnabled}}
|
||||
<div class="field">
|
||||
<div class="files"></div>
|
||||
<div class="ui basic button dropzone" id="dropzone" data-upload-url="{{AppSubUrl}}/attachments" data-accepts="{{.AttachmentAllowedTypes}}" data-max-file="{{.AttachmentMaxFiles}}" data-max-size="{{.AttachmentMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"></div>
|
||||
<div class="ui dropzone" id="dropzone" data-upload-url="{{AppSubUrl}}/attachments" data-accepts="{{.AttachmentAllowedTypes}}" data-max-file="{{.AttachmentMaxFiles}}" data-max-size="{{.AttachmentMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"></div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="ui container">
|
||||
|
|
|
|||
|
|
@ -43,9 +43,9 @@ function initCommentPreviewTab($form) {
|
|||
_csrf: csrf,
|
||||
mode: 'gfm',
|
||||
context: $this.data('context'),
|
||||
text: $form.find(`.tab.segment[data-tab="${$tabMenu.data('write')}"] textarea`).val()
|
||||
text: $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val()
|
||||
}, (data) => {
|
||||
const $previewPanel = $form.find(`.tab.segment[data-tab="${$tabMenu.data('preview')}"]`);
|
||||
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
|
||||
$previewPanel.html(data);
|
||||
$('pre code', $previewPanel[0]).each(function () {
|
||||
highlight(this);
|
||||
|
|
@ -74,9 +74,9 @@ function initEditPreviewTab($form) {
|
|||
_csrf: csrf,
|
||||
mode: 'gfm',
|
||||
context,
|
||||
text: $form.find(`.tab.segment[data-tab="${$tabMenu.data('write')}"] textarea`).val()
|
||||
text: $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val()
|
||||
}, (data) => {
|
||||
const $previewPanel = $form.find(`.tab.segment[data-tab="${$tabMenu.data('preview')}"]`);
|
||||
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
|
||||
$previewPanel.html(data);
|
||||
$('pre code', $previewPanel[0]).each(function () {
|
||||
highlight(this);
|
||||
|
|
@ -94,9 +94,9 @@ function initEditDiffTab($form) {
|
|||
$.post($this.data('url'), {
|
||||
_csrf: csrf,
|
||||
context: $this.data('context'),
|
||||
content: $form.find(`.tab.segment[data-tab="${$tabMenu.data('write')}"] textarea`).val()
|
||||
content: $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val()
|
||||
}, (data) => {
|
||||
const $diffPreviewPanel = $form.find(`.tab.segment[data-tab="${$tabMenu.data('diff')}"]`);
|
||||
const $diffPreviewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('diff')}"]`);
|
||||
$diffPreviewPanel.html(data);
|
||||
});
|
||||
});
|
||||
|
|
@ -971,8 +971,8 @@ async function initRepository() {
|
|||
$tabMenu.attr('data-preview', $editContentZone.data('preview'));
|
||||
$tabMenu.find('.write.item').attr('data-tab', $editContentZone.data('write'));
|
||||
$tabMenu.find('.preview.item').attr('data-tab', $editContentZone.data('preview'));
|
||||
$editContentForm.find('.write.segment').attr('data-tab', $editContentZone.data('write'));
|
||||
$editContentForm.find('.preview.segment').attr('data-tab', $editContentZone.data('preview'));
|
||||
$editContentForm.find('.write').attr('data-tab', $editContentZone.data('write'));
|
||||
$editContentForm.find('.preview').attr('data-tab', $editContentZone.data('preview'));
|
||||
$simplemde = setCommentSimpleMDE($textarea);
|
||||
commentMDEditors[$editContentZone.data('write')] = $simplemde;
|
||||
initCommentPreviewTab($editContentForm);
|
||||
|
|
|
|||
|
|
@ -631,20 +631,13 @@
|
|||
|
||||
.pull {
|
||||
&.tabular.menu {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tab.segment {
|
||||
border: 0;
|
||||
padding: 10px 0 0;
|
||||
box-shadow: none;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.merge.box {
|
||||
.avatar {
|
||||
margin-left: 10px;
|
||||
|
|
@ -853,6 +846,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
> div:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
> div:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
> .header {
|
||||
#avatar-arrow;
|
||||
|
|
@ -861,11 +866,8 @@
|
|||
position: relative;
|
||||
color: #767676;
|
||||
background-color: #f7f7f7;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
|
||||
.text {
|
||||
max-width: 78%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
|
@ -967,13 +969,18 @@
|
|||
}
|
||||
|
||||
.ui.form {
|
||||
.field:first-child {
|
||||
.field {
|
||||
&:first-child {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.tab.segment {
|
||||
border: 0;
|
||||
padding: 10px 0 0;
|
||||
&.footer {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab.markdown {
|
||||
min-height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -1082,11 +1089,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tab.segment {
|
||||
border: 0;
|
||||
padding: 10px 0 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 200px;
|
||||
font-family: @monospaced-fonts, monospace;
|
||||
|
|
@ -2451,10 +2453,19 @@
|
|||
|
||||
.ui.form {
|
||||
.dropzone {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
border: 2px dashed #0087f5;
|
||||
box-shadow: none !important;
|
||||
padding: 0;
|
||||
min-height: 5rem;
|
||||
border-radius: 4px;
|
||||
|
||||
.dz-button {
|
||||
color: rgba(0, 0, 0, .6);
|
||||
}
|
||||
|
||||
&:hover .dz-button {
|
||||
color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
.dz-error-message {
|
||||
top: 140px;
|
||||
|
|
@ -2858,6 +2869,11 @@ td.blob-excerpt {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ui .right .ui.button {
|
||||
margin-left: .25em;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.removed-code {
|
||||
background-color: #ff9999;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue