From 1982194dc5abe1b400245414bac09f83957b4fe5 Mon Sep 17 00:00:00 2001 From: Sorien Date: Thu, 14 May 2020 21:15:21 +0200 Subject: [PATCH] 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 Co-authored-by: zeripath --- templates/repo/diff/comment_form.tmpl | 22 ++--- templates/repo/editor/upload.tmpl | 2 +- templates/repo/issue/comment_tab.tmpl | 16 ++-- templates/repo/issue/view.tmpl | 2 +- templates/repo/issue/view_content.tmpl | 86 +++++++++++-------- .../repo/issue/view_content/sidebar.tmpl | 2 +- templates/repo/pulls/commits.tmpl | 2 +- templates/repo/pulls/files.tmpl | 2 +- templates/repo/release/new.tmpl | 4 +- web_src/js/index.js | 16 ++-- web_src/less/_repository.less | 64 ++++++++------ 11 files changed, 124 insertions(+), 94 deletions(-) diff --git a/templates/repo/diff/comment_form.tmpl b/templates/repo/diff/comment_form.tmpl index 1389ed73d4..a286725722 100644 --- a/templates/repo/diff/comment_form.tmpl +++ b/templates/repo/diff/comment_form.tmpl @@ -2,7 +2,7 @@ {{if $.hidden}} {{end}} -
+ {{$.root.CsrfTokenHtml}} @@ -11,30 +11,30 @@ -
+
{{$.root.i18n.Tr "write"}} {{$.root.i18n.Tr "preview"}}
-
-
+
+
+
+ {{.i18n.Tr "loading"}} +
-
- {{.i18n.Tr "loading"}} -
-
+
{{svg "octicon-markdown" 16}} {{$.root.i18n.Tr "repo.diff.comment.markdown_info"}} -
+
{{if $.reply}} - + {{else}} {{if $.root.CurrentReview}} {{else}} - diff --git a/templates/repo/editor/upload.tmpl b/templates/repo/editor/upload.tmpl index f1ca5b756f..7794c2a2d3 100644 --- a/templates/repo/editor/upload.tmpl +++ b/templates/repo/editor/upload.tmpl @@ -27,7 +27,7 @@
-
+
{{template "repo/editor/commit_form" .}} diff --git a/templates/repo/issue/comment_tab.tmpl b/templates/repo/issue/comment_tab.tmpl index be113e539a..77537edf73 100644 --- a/templates/repo/issue/comment_tab.tmpl +++ b/templates/repo/issue/comment_tab.tmpl @@ -1,17 +1,19 @@ +
+ {{.i18n.Tr "write"}} + {{.i18n.Tr "preview"}} +
-
- {{.i18n.Tr "write"}} - {{.i18n.Tr "preview"}} -
-
+
-
+
{{.i18n.Tr "loading"}}
{{if .IsAttachmentEnabled}} +
-
+
+
{{end}} diff --git a/templates/repo/issue/view.tmpl b/templates/repo/issue/view.tmpl index 7fcc1f2647..6abf84cab9 100644 --- a/templates/repo/issue/view.tmpl +++ b/templates/repo/issue/view.tmpl @@ -20,7 +20,7 @@ {{if .Issue.IsPull}} {{template "repo/issue/view_title" .}} {{template "repo/pulls/tab_menu" .}} -
+
{{template "repo/issue/view_content" .}}
{{else}} diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl index 2e42c75772..9f3f61ee43 100644 --- a/templates/repo/issue/view_content.tmpl +++ b/templates/repo/issue/view_content.tmpl @@ -87,21 +87,23 @@ {{template "repo/issue/comment_tab" .}} {{.CsrfTokenHtml}} -
- {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}} - {{if .Issue.IsClosed}} -
- {{.i18n.Tr "repo.issues.reopen_issue"}} -
- {{else}} -
- {{.i18n.Tr "repo.issues.close_issue"}} -
+
+
+ {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}} + {{if .Issue.IsClosed}} +
+ {{.i18n.Tr "repo.issues.reopen_issue"}} +
+ {{else}} +
+ {{.i18n.Tr "repo.issues.close_issue"}} +
+ {{end}} {{end}} - {{end}} - + +
@@ -136,21 +138,23 @@ {{template "repo/issue/comment_tab" .}} {{.CsrfTokenHtml}} -
- {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}} - {{if .Issue.IsClosed}} -
- {{.i18n.Tr "repo.issues.reopen_issue"}} -
- {{else}} -
- {{.i18n.Tr "repo.issues.close_issue"}} -
+
+
+ {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}} + {{if .Issue.IsClosed}} +
+ {{.i18n.Tr "repo.issues.reopen_issue"}} +
+ {{else}} +
+ {{.i18n.Tr "repo.issues.close_issue"}} +
+ {{end}} {{end}} - {{end}} - + +
@@ -171,19 +175,22 @@
-
+
{{$.i18n.Tr "write"}} {{$.i18n.Tr "preview"}}
-
- -
-
- {{$.i18n.Tr "loading"}} +
+
+ +
+
+ {{$.i18n.Tr "loading"}} +
{{if .IsAttachmentEnabled}} +
-
+
{{end}} -
-
{{.i18n.Tr "repo.issues.cancel"}}
-
{{.i18n.Tr "repo.issues.save"}}
+
+
+
{{.i18n.Tr "repo.issues.cancel"}}
+
{{.i18n.Tr "repo.issues.save"}}
+
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl index 0f34231b17..bcc69a48b8 100644 --- a/templates/repo/issue/view_content/sidebar.tmpl +++ b/templates/repo/issue/view_content/sidebar.tmpl @@ -304,7 +304,6 @@ {{end}}
-
{{.i18n.Tr "repo.issues.add_time"}}
@@ -319,6 +318,7 @@
{{.i18n.Tr "repo.issues.add_time_cancel"}}
+
{{end}}
diff --git a/templates/repo/pulls/commits.tmpl b/templates/repo/pulls/commits.tmpl index d084f9bc5a..422295f55b 100644 --- a/templates/repo/pulls/commits.tmpl +++ b/templates/repo/pulls/commits.tmpl @@ -11,7 +11,7 @@
{{template "repo/issue/view_title" .}} {{template "repo/pulls/tab_menu" .}} -
+
{{template "repo/commits_table" .}}
diff --git a/templates/repo/pulls/files.tmpl b/templates/repo/pulls/files.tmpl index c882c0c38e..4caebf0b56 100644 --- a/templates/repo/pulls/files.tmpl +++ b/templates/repo/pulls/files.tmpl @@ -12,7 +12,7 @@ {{template "repo/issue/view_title" .}} {{template "repo/pulls/tab_menu" .}} {{template "base/alert" .}} -
+
{{template "repo/diff/box" .}}
diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl index c45c5b20bf..2312a614a2 100644 --- a/templates/repo/release/new.tmpl +++ b/templates/repo/release/new.tmpl @@ -49,8 +49,10 @@
{{if .IsAttachmentEnabled}} +
-
+
+
{{end}}
diff --git a/web_src/js/index.js b/web_src/js/index.js index 02189a5f13..c7b8934874 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -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); diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 6fb089636a..b1576b8784 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -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 { - clear: none; - } + .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; }