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>

2 files changed, 48 insertions, 32 deletions

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;
 }