From 328cf12ff1db1b001bfd1db832b5f81d0c9f3394 Mon Sep 17 00:00:00 2001 From: Sascha Eggenberger Date: Thu, 2 Nov 2023 16:34:32 +0100 Subject: [PATCH 01/12] A first draft to unbox activity notes Changelog: changed --- .../notes/components/discussion_notes.vue | 1 + .../notes/components/noteable_discussion.vue | 2 +- .../components/toggle_replies_widget.vue | 12 ++--- app/assets/stylesheets/framework/diffs.scss | 2 +- .../stylesheets/framework/timeline.scss | 6 +-- app/assets/stylesheets/pages/note_form.scss | 30 ++++++----- app/assets/stylesheets/pages/notes.scss | 52 ++++++++++--------- 7 files changed, 53 insertions(+), 52 deletions(-) diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue index 79157c3f99cb63..71710a4eeeea90 100644 --- a/app/assets/javascripts/notes/components/discussion_notes.vue +++ b/app/assets/javascripts/notes/components/discussion_notes.vue @@ -131,6 +131,7 @@ export default {
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue index 862f1f764d0457..80ddc99c914164 100644 --- a/app/assets/javascripts/notes/components/noteable_discussion.vue +++ b/app/assets/javascripts/notes/components/noteable_discussion.vue @@ -181,10 +181,9 @@ export default { }, discussionHolderClass() { return { - 'is-replying gl-pt-0!': this.isReplying, + 'is-replying': this.isReplying, 'internal-note': this.isDiscussionInternal, 'public-note': !this.isDiscussionInternal, - 'gl-pt-0!': !this.discussion.diff_discussion && this.isReplying, }; }, }, diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index eb2232efde11a3..da3778f65bfeb2 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -861,12 +861,20 @@ table.code { ul.notes { li.toggle-replies-widget, .discussion-reply-holder { - margin-left: 3.75rem; + // margin-left: 3.75rem; .reply-author-avatar { height: 1.5rem; } } + + li.toggle-replies-widget { + margin-left: 44px; //tbd in rem + } + + .discussion-reply-holder { + margin-left: 65px; //tbd in rem + } } } diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index 8bb6895be0a116..e3f23a492b2908 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -30,6 +30,7 @@ &:not(.note-form).internal-note .timeline-content, &:not(.note-form).draft-note .timeline-content { + padding: $gl-padding-8 !important; background-color: $orange-50 !important; } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 1f8caa9abe1182..018c2d4b619314 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -22,7 +22,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; @mixin outline-comment() { margin: $gl-padding $gl-padding 0; border: 1px solid $border-color; - border-radius: $border-radius-default; + border-radius: $border-radius-large; } .issuable-discussion:not(.incident-timeline-events), @@ -50,9 +50,27 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } } - .notes-group::before { + // .notes-group::before { + // width: 2px; + // background: linear-gradient(180deg, $gray-200 calc(100% - 80px), transparent 100%); + // } + + .toggle-replies-widget ~ .note-wrapper .timeline-content::before, + .toggle-replies-widget ~ .discussion-reply-holder::before, + .discussion-body .diff-file .diff-content .discussion-notes .timeline-entry-inner::before, + .discussion-body .diff-file .diff-content .discussion-notes .discussion-reply-holder::before { + content: ''; + position: absolute; + top: 0; + left: -$gl-padding; width: 2px; - background: linear-gradient(180deg, $gray-200 calc(100% - 80px), transparent 100%); + height: 100%; + background-color: var(--gray-100, $gray-100); + } + + .toggle-replies-widget ~ .discussion-reply-holder::before { + top: -$gl-padding; + height: calc(100% + #{$gl-padding}); } } @@ -64,7 +82,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; position: relative; &.timeline > .timeline-entry { - margin: $gl-padding 0; + margin: $gl-padding-8 0; &.note-discussion { margin-bottom: $gl-padding-24; @@ -101,7 +119,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; .timeline-content:not(.flash-container) { padding: 0 $gl-padding-8 $gl-padding-8 $gl-padding-8; - margin-left: 2.5rem; + margin-left: 2rem; //2.5rem; border-radius: $gl-border-radius-large; } @@ -138,12 +156,17 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } .timeline-content:not(.flash-container) { - margin-left: 2.5rem; + padding: 0 $gl-padding-8 0 0; + margin-left: 40px; //2.5rem; border-radius: $gl-border-radius-large; - padding: $gl-padding-8; } } + // Internal note + &.internal-note:first-of-type .timeline-content:not(.flash-container) { + margin-left: 48px; + } + &:not(.target) .timeline-content:not(.flash-container) { background-color: $white; } @@ -155,11 +178,11 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } &:not(:first-of-type) .timeline-entry-inner { - margin-left: 3.75rem; + margin-left: 66px; //3.75rem; background-color: $white; .timeline-content:not(.flash-container) { - padding: $gl-padding-8; + padding: $gl-padding-4 $gl-padding-8 $gl-padding-8 0 !important; border-radius: $gl-border-radius-large; } @@ -168,7 +191,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } .timeline-avatar { - margin: $gl-padding-8 0 0 $gl-padding-8; + margin: $gl-padding-8 0 0 0; } .timeline-discussion-body { @@ -176,6 +199,13 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } } + // Internal note + &.internal-note:not(:first-of-type) .timeline-entry-inner { + .timeline-avatar { + margin-left: $gl-padding-12; + } + } + &:last-of-type .timeline-entry-inner { border-bottom: 1px solid $border-color; border-bottom-left-radius: $gl-border-radius-base; @@ -196,17 +226,14 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } .timeline-entry-inner { - margin-left: 2.5rem; - border-left: 1px solid $border-color; - border-right: 1px solid $border-color; - background-color: $white; + margin-left: 66px; //2.5rem; .timeline-content { - padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding; + padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 0; } .timeline-avatar { - margin: $gl-padding-8 0 0 $gl-padding; + margin: $gl-padding-8 0 0 0; } .timeline-discussion-body { @@ -342,7 +369,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; .note-awards { .js-awards-block { - margin-top: 16px; + margin-top: 8px; } } @@ -387,7 +414,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } .timeline-content { - margin-left: 30px; + margin-left: 36px; //30px; } .note-header { @@ -484,9 +511,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; .discussion-body .diff-file { .file-title { cursor: default; - border-top: 0; - border-radius: 0; - margin-left: 2.5rem; + // border-top: 0; + // border-radius: 0; + margin-left: 48px; //2.5rem; + margin-top: $gl-padding-4; &:hover { background-color: $gray-light; @@ -502,36 +530,41 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } .diff-content { - margin-left: 2.5rem; + margin-left: 48px; //2.5rem; &.outdated-lines-wrapper { margin-left: 0; } - .line_holder td:first-of-type { - @include gl-border-l; - } + // .line_holder td:first-of-type { + // @include gl-border-l; + // } - .line_holder td:last-of-type { - @include gl-border-r; - } + // .line_holder td:last-of-type { + // @include gl-border-r; + // } .discussion-notes { - margin-left: -2.5rem; + margin-top: $gl-padding-8; + margin-left: -48px; //-2.5rem; - .notes { - background-color: transparent; + .timeline-entry-inner::before { + top: $gl-padding-8 !important; } - .notes-content { - border: 0; - } + // .notes { + // background-color: transparent; + // } - .timeline-content { - border-top: 0 !important; - border-top-left-radius: 0 !important; - border-top-right-radius: 0 !important; - } + // .notes-content { + // border: 0; + // } + + // .timeline-content { + // border-top: 0 !important; + // border-top-left-radius: 0 !important; + // border-top-right-radius: 0 !important; + // } } } } @@ -600,7 +633,8 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; border-left: 0; &.notes-content { - border-width: 1px 0; + // margin-left: 16px; + // border-width: 1px 0; padding: 0; vertical-align: top; white-space: normal; @@ -619,9 +653,9 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } } - .notes { - background-color: $white; - } + // .notes { + // background-color: $white; + // } a code { top: 0; @@ -745,14 +779,9 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } .timeline-content { - border-radius: $gl-border-radius-base; - padding: $gl-padding-8 !important; - @include gl-border; - - &.expanded { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } + overflow-x: auto; + overflow-y: hidden; + border-radius: $gl-border-radius-large; } &.note-wrapper { @@ -990,7 +1019,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; .disabled-comment { background-color: $gray-light; - border-radius: $border-radius-base; + border-radius: $gl-border-radius-large; border: 1px solid $border-color; color: $note-disabled-comment-color; padding: $gl-padding-8 0; @@ -1112,7 +1141,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; .draft-note-component.draft-note.timeline-entry { .timeline-content:not(.flash-container) { - padding: $gl-padding-4 $gl-padding-4 $gl-padding-4 0; + padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 0; } .timeline-avatar { -- GitLab From 4c9a57c8a2424ecfa9937e04339f34f9d0f35ea7 Mon Sep 17 00:00:00 2001 From: Sascha Eggenberger Date: Fri, 3 Nov 2023 13:25:34 +0100 Subject: [PATCH 04/12] Small improvements in the MR file view --- app/assets/javascripts/notes/components/noteable_note.vue | 2 +- app/assets/stylesheets/pages/notes.scss | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue index c817655b649aee..7f1dd86b9f7b70 100644 --- a/app/assets/javascripts/notes/components/noteable_note.vue +++ b/app/assets/javascripts/notes/components/noteable_note.vue @@ -443,7 +443,7 @@ export default { -
+
Date: Fri, 3 Nov 2023 17:18:43 +0100 Subject: [PATCH 05/12] Use a container style for replies --- app/assets/stylesheets/framework/diffs.scss | 2 +- app/assets/stylesheets/pages/note_form.scss | 18 +++--- app/assets/stylesheets/pages/notes.scss | 65 ++++++++++++--------- 3 files changed, 50 insertions(+), 35 deletions(-) diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index da3778f65bfeb2..abe1f838c5a638 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -873,7 +873,7 @@ table.code { } .discussion-reply-holder { - margin-left: 65px; //tbd in rem + margin-left: 66px; //tbd in rem } } } diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 4301bdb086eed5..e9b3862f337c06 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -268,10 +268,14 @@ table { .diff-file, .commit-diff { .discussion-reply-holder { + margin-top: -1px; padding: $gl-padding-12; - background: $gray-10; + background: $white; + // background: $gray-10; border: 1px solid $gray-50; - border-radius: $gl-border-radius-large; + border-bottom-left-radius: $gl-border-radius-large; + border-bottom-right-radius: $gl-border-radius-large; + // border-radius: $gl-border-radius-large; // + .new-note { // border-top: 1px solid $gray-50; @@ -281,11 +285,11 @@ table { // padding-top: $gl-padding-12; // } - &.internal-note, - &.internal-note.is-replying { - // padding-top: $gl-padding-12 !important; - margin-top: $gl-padding-12 !important; - } + // &.internal-note, + // &.internal-note.is-replying { + // // padding-top: $gl-padding-12 !important; + // margin-top: $gl-padding-12 !important; + // } .user-avatar-link { img { diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 5c89eaa875b24f..dc7f61e98527cc 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -34,8 +34,8 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } .main-notes-list::before { - // background: var(--gray-50, $gray-50); - border: 1px dashed var(--gray-100, $gray-100); + background: var(--gray-50, $gray-50); + // border: 1px dashed var(--gray-100, $gray-100); } .timeline-entry:not(.draft-note):last-child::before { @@ -55,23 +55,23 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; // background: linear-gradient(180deg, $gray-200 calc(100% - 80px), transparent 100%); // } - .toggle-replies-widget ~ .note-wrapper .timeline-content::before, - .toggle-replies-widget ~ .discussion-reply-holder::before, - .discussion-body .diff-file .diff-content .discussion-notes .timeline-entry-inner::before, - .discussion-body .diff-file .diff-content .discussion-notes .discussion-reply-holder::before { - content: ''; - position: absolute; - top: 0; - left: -$gl-padding; - width: 2px; - height: 100%; - background-color: var(--gray-100, $gray-100); - } + // .toggle-replies-widget ~ .note-wrapper .timeline-content::before, + // .toggle-replies-widget ~ .discussion-reply-holder::before, + // .discussion-body .diff-file .diff-content .discussion-notes .timeline-entry-inner::before, + // .discussion-body .diff-file .diff-content .discussion-notes .discussion-reply-holder::before { + // content: ''; + // position: absolute; + // top: 0; + // left: -$gl-padding; + // width: 2px; + // height: 100%; + // background-color: var(--gray-100, $gray-100); + // } - .toggle-replies-widget ~ .discussion-reply-holder::before { - top: -$gl-padding; - height: calc(100% + #{$gl-padding}); - } + // .toggle-replies-widget ~ .discussion-reply-holder::before { + // top: -$gl-padding; + // height: calc(100% + #{$gl-padding}); + // } } .notes { @@ -178,13 +178,25 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; border-top-right-radius: 0; } + &.toggle-replies-widget + .timeline-entry .timeline-entry-inner { + .timeline-content:not(.flash-container) { + border-top: 1px solid $gray-50; + border-top-left-radius: $gl-border-radius-large; + border-top-right-radius: $gl-border-radius-large; + } + } + &:not(:first-of-type) .timeline-entry-inner { margin-left: 66px; //3.75rem; background-color: $white; .timeline-content:not(.flash-container) { - padding: $gl-padding-4 $gl-padding-8 $gl-padding-8 0 !important; - border-radius: $gl-border-radius-large; + margin-top: -1px; + padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 0 !important; + background-color: $gray-10; + border: 1px solid $gray-50; + border-top: 0; + // border-radius: $gl-border-radius-large; } .timeline-discussion-body-footer { @@ -192,11 +204,11 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } .timeline-avatar { - margin: $gl-padding-8 0 0 0; + margin: $gl-padding-8 0 0 $gl-padding-12; } .timeline-discussion-body { - margin-left: 2rem; + margin-left: 48px; //2rem; } } @@ -207,11 +219,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } } - &:last-of-type .timeline-entry-inner { - border-bottom: 1px solid $border-color; - border-bottom-left-radius: $gl-border-radius-base; - border-bottom-right-radius: $gl-border-radius-base; - } + // &:last-of-type .timeline-entry-inner { + // border-bottom-left-radius: $gl-border-radius-large; + // border-bottom-right-radius: $gl-border-radius-large; + // } } .diff-content { -- GitLab From d8df0b8f5d99ebe26e0402c88a6c32e95e9b3988 Mon Sep 17 00:00:00 2001 From: Sascha Eggenberger Date: Mon, 6 Nov 2023 12:30:04 +0100 Subject: [PATCH 06/12] Visual fixes in MR diff view --- .../diffs/components/diff_file.vue | 4 +- .../components/diff_discussion_header.vue | 2 +- .../components/toggle_replies_widget.vue | 2 +- app/assets/stylesheets/framework/diffs.scss | 11 +- app/assets/stylesheets/framework/files.scss | 8 +- .../stylesheets/framework/timeline.scss | 6 +- .../page_bundles/merge_requests.scss | 2 +- app/assets/stylesheets/pages/note_form.scss | 46 ++--- app/assets/stylesheets/pages/notes.scss | 172 ++++++------------ 9 files changed, 93 insertions(+), 160 deletions(-) diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue index b2841172fe1e6d..be8b1a16352bf6 100644 --- a/app/assets/javascripts/diffs/components/diff_file.vue +++ b/app/assets/javascripts/diffs/components/diff_file.vue @@ -149,8 +149,8 @@ export default { if (this.showBody) { domParts.header = 'gl-rounded-bottom-left-none gl-rounded-bottom-right-none'; domParts.contentByHash = - 'gl-rounded-none gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-border-1 gl-border-t-0! gl-border-solid gl-border-gray-100'; - domParts.content = 'gl-rounded-bottom-left-base gl-rounded-bottom-right-base'; + 'gl-rounded-none gl-rounded-bottom-left-large gl-rounded-bottom-right-large gl-border-1 gl-border-t-0! gl-border-solid gl-border-gray-100'; + domParts.content = 'gl-rounded-bottom-left-large gl-rounded-bottom-right-large'; } return domParts; diff --git a/app/assets/javascripts/notes/components/diff_discussion_header.vue b/app/assets/javascripts/notes/components/diff_discussion_header.vue index 5b06725c5b9a39..d18609a41fa2d8 100644 --- a/app/assets/javascripts/notes/components/diff_discussion_header.vue +++ b/app/assets/javascripts/notes/components/diff_discussion_header.vue @@ -118,7 +118,7 @@ export default {
-
+
  • .btn { + margin-left: -$gl-padding-4; + } } a { @@ -348,7 +352,7 @@ span.idiff { padding-bottom: $gl-padding; .discussion-reply-holder { - border-bottom: 1px solid $gray-50; + border-bottom: 1px solid $gray-100; border-radius: 0; } } diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index e3f23a492b2908..a0c38c26a9acc9 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -30,7 +30,7 @@ &:not(.note-form).internal-note .timeline-content, &:not(.note-form).draft-note .timeline-content { - padding: $gl-padding-8 !important; + padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding-12 !important; background-color: $orange-50 !important; } @@ -44,10 +44,6 @@ background-color: $line-target-blue; } - // + .public-note.discussion-reply-holder { - // padding-top: $gl-padding-12 !important; - // } - &.system-note .note-body .note-text.system-note-commit-list::after { background: linear-gradient(rgba($line-target-blue, 0.1) -100px, $line-target-blue 100%); } diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index d112fd83ebfd4f..1ecef113fa318d 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -225,7 +225,7 @@ $tabs-holder-z-index: 250; clear: left; .note-body { - padding: 0 $gl-padding-8 $gl-padding-8 $gl-padding-32; + padding: 0 $gl-padding-8 $gl-padding-8 1.75rem; } } diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index e9b3862f337c06..f8b5ee79f8b2e4 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -269,27 +269,12 @@ table { .commit-diff { .discussion-reply-holder { margin-top: -1px; - padding: $gl-padding-12; + padding: 0 $gl-padding-12 $gl-padding-12; background: $white; - // background: $gray-10; - border: 1px solid $gray-50; + border: 1px solid $gray-100; + border-top-color: $white; border-bottom-left-radius: $gl-border-radius-large; border-bottom-right-radius: $gl-border-radius-large; - // border-radius: $gl-border-radius-large; - - // + .new-note { - // border-top: 1px solid $gray-50; - // } - - // &.is-replying { - // padding-top: $gl-padding-12; - // } - - // &.internal-note, - // &.internal-note.is-replying { - // // padding-top: $gl-padding-12 !important; - // margin-top: $gl-padding-12 !important; - // } .user-avatar-link { img { @@ -297,12 +282,21 @@ table { } } } + + .note-wrapper:first-of-type + .discussion-reply-holder { + padding-top: $gl-padding-12; + border-top-color: $gray-100; + } + + .note-wrapper.internal-note:first-of-type + .discussion-reply-holder { + margin-top: $gl-padding-8; + } } -// .diff-td > .content > .discussion-reply-holder { -// padding-top: $gl-padding-12; -// @include gl-bg-gray-10; -// } +.target + .discussion-reply-holder, +.internal-note + .discussion-reply-holder { + padding-top: $gl-padding-12; +} .discussion-with-resolve-btn { @include media-breakpoint-up(sm) { @@ -343,10 +337,6 @@ table { transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; - @include media-breakpoint-down(xs) { - margin-bottom: $gl-padding-8; - } - &:hover { border: 1px solid $gray-500; } @@ -471,3 +461,7 @@ table { transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; } + +.js-comment-form { + margin-top: $gl-padding-24; +} diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index dc7f61e98527cc..d5fad343e52fd1 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -35,7 +35,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; .main-notes-list::before { background: var(--gray-50, $gray-50); - // border: 1px dashed var(--gray-100, $gray-100); } .timeline-entry:not(.draft-note):last-child::before { @@ -50,28 +49,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } } - // .notes-group::before { - // width: 2px; - // background: linear-gradient(180deg, $gray-200 calc(100% - 80px), transparent 100%); - // } - - // .toggle-replies-widget ~ .note-wrapper .timeline-content::before, - // .toggle-replies-widget ~ .discussion-reply-holder::before, - // .discussion-body .diff-file .diff-content .discussion-notes .timeline-entry-inner::before, - // .discussion-body .diff-file .diff-content .discussion-notes .discussion-reply-holder::before { - // content: ''; - // position: absolute; - // top: 0; - // left: -$gl-padding; - // width: 2px; - // height: 100%; - // background-color: var(--gray-100, $gray-100); - // } - - // .toggle-replies-widget ~ .discussion-reply-holder::before { - // top: -$gl-padding; - // height: calc(100% + #{$gl-padding}); - // } + .notes-group .discussion-reply-holder:nth-child(2):last-of-type { + border-top-left-radius: $gl-border-radius-large; + border-top-right-radius: $gl-border-radius-large; + } } .notes { @@ -115,13 +96,13 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; &.note-skeleton, .draft-note { .timeline-avatar { - margin-top: 5px; + margin-top: 7px; } .timeline-content:not(.flash-container) { - padding: 0 $gl-padding-8 $gl-padding-8 $gl-padding-8; - margin-left: 2rem; //2.5rem; + margin-left: 1.75rem; border-radius: $gl-border-radius-large; + padding: $gl-padding-8; } &:not(.target) .timeline-content:not(.flash-container) { @@ -144,6 +125,15 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } } + // Highlighted & internal notes + &.target, + &.internal-note { + .timeline-content:not(.flash-container) { + padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding-12; + margin-left: 2.75rem; + } + } + &.note-discussion { .timeline-content .discussion-wrapper { background-color: transparent; @@ -153,19 +143,25 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; ul li { &:first-of-type { .timeline-avatar { - margin-top: 5px; + margin-top: 7px; } .timeline-content:not(.flash-container) { - padding: 0 $gl-padding-8 0 0; - margin-left: 40px; //2.5rem; + padding: $gl-padding-8 $gl-padding-8 0 0; + margin-left: 2.25rem; border-radius: $gl-border-radius-large; } } + // Highlighted note + &.target:first-of-type .timeline-content:not(.flash-container) { + padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding-12; + margin-left: 2.75rem; + } + // Internal note &.internal-note:first-of-type .timeline-content:not(.flash-container) { - margin-left: 48px; + margin-left: 2.75rem; } &:not(.target) .timeline-content:not(.flash-container) { @@ -180,23 +176,21 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; &.toggle-replies-widget + .timeline-entry .timeline-entry-inner { .timeline-content:not(.flash-container) { - border-top: 1px solid $gray-50; + border-top: 1px solid $gray-100; border-top-left-radius: $gl-border-radius-large; border-top-right-radius: $gl-border-radius-large; } } &:not(:first-of-type) .timeline-entry-inner { - margin-left: 66px; //3.75rem; + margin-left: 3.875rem; background-color: $white; .timeline-content:not(.flash-container) { margin-top: -1px; padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 0 !important; - background-color: $gray-10; - border: 1px solid $gray-50; + border: 1px solid $gray-100; border-top: 0; - // border-radius: $gl-border-radius-large; } .timeline-discussion-body-footer { @@ -208,7 +202,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } .timeline-discussion-body { - margin-left: 48px; //2rem; + margin-left: 2.75rem; } } @@ -218,11 +212,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; margin-left: $gl-padding-12; } } - - // &:last-of-type .timeline-entry-inner { - // border-bottom-left-radius: $gl-border-radius-large; - // border-bottom-right-radius: $gl-border-radius-large; - // } } .diff-content { @@ -231,35 +220,28 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; margin-top: 0; } - .timeline-content { - margin-left: 0; - border: 0; - padding: 0; - } - .timeline-entry-inner { - margin-left: 66px; //2.5rem; + margin-left: 3.875rem; .timeline-content { + margin-top: -1px; + margin-left: 0; padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 0; + border: 1px solid $gray-100; + border-radius: 0; } .timeline-avatar { - margin: $gl-padding-8 0 0 0; + margin: $gl-padding-8 0 0 $gl-padding-12; } .timeline-discussion-body { - margin-left: 2rem; + margin-left: 2.75rem; } } } } } - - // .discussion-reply-holder { - // border: 1px solid $border-color; - // background-color: $white; - // } } &.note-form { @@ -381,7 +363,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; .note-awards { .js-awards-block { - margin-top: 8px; + margin-top: $gl-padding-8; } } @@ -426,7 +408,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } .timeline-content { - margin-left: 36px; //30px; + margin-left: 2rem; } .note-header { @@ -523,9 +505,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; .discussion-body .diff-file { .file-title { cursor: default; - // border-top: 0; - // border-radius: 0; - margin-left: 48px; //2.5rem; + margin-left: 2.75rem; margin-top: $gl-padding-4; &:hover { @@ -542,41 +522,18 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } .diff-content { - margin-left: 48px; //2.5rem; + margin-left: 2.75rem; &.outdated-lines-wrapper { margin-left: 0; } - // .line_holder td:first-of-type { - // @include gl-border-l; - // } - - // .line_holder td:last-of-type { - // @include gl-border-r; - // } - .discussion-notes { - margin-top: $gl-padding-8; - margin-left: -48px; //-2.5rem; + margin-left: -3.875rem; .timeline-entry-inner::before { top: $gl-padding-8 !important; } - - // .notes { - // background-color: transparent; - // } - - // .notes-content { - // border: 0; - // } - - // .timeline-content { - // border-top: 0 !important; - // border-top-left-radius: 0 !important; - // border-top-right-radius: 0 !important; - // } } } } @@ -641,16 +598,13 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; .diff-td, td { - border: 1px solid $border-color; - border-left: 0; - &.notes-content { - // margin-left: 16px; - // border-width: 1px 0; padding: 0; vertical-align: top; white-space: normal; background-color: $white; + border-bottom-left-radius: $border-radius-large - 1px; + border-bottom-right-radius: $border-radius-large - 1px; &.parallel { border-width: 1px; @@ -665,10 +619,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } } - // .notes { - // background-color: $white; - // } - a code { top: 0; margin-right: 0; @@ -676,14 +626,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } } } - - .diff-grid-comments:last-child { - .notes-content { - border-bottom-width: 0; - border-bottom-left-radius: #{$border-radius-default - 1px}; - border-bottom-right-radius: #{$border-radius-default - 1px}; - } - } } .diffs { @@ -700,13 +642,13 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } .discussion-reply-holder { - border-top: 0; - border-radius: $gl-border-radius-base $gl-border-radius-base; + padding-top: 0; + border: 0; + border-radius: 0; position: relative; .discussion-form { width: 100%; - background-color: $gray-light; padding: 0; } @@ -715,6 +657,12 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; width: 100%; } } + + .diff-grid, + .diff-grid-comments:last-of-type .discussion-reply-holder { + border-bottom-left-radius: $gl-border-radius-large; + border-bottom-right-radius: $gl-border-radius-large; + } } .code-commit .notes-content, @@ -786,10 +734,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; padding-bottom: 0; } - .timeline-avatar { - margin-top: 5px; - } - .timeline-content { overflow-x: auto; overflow-y: hidden; @@ -880,11 +824,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; float: right; color: $gray-darkest; - @include media-breakpoint-down(xs) { - width: 100%; - margin: 0 0 $gl-padding-8; - } - .btn-group > .discussion-next-btn { margin-left: -1px; } @@ -1108,13 +1047,13 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } .timeline-avatar { - margin: $gl-padding-4 0 0 $gl-padding; + margin: $gl-padding-4 0 0 $gl-padding-12; } } ul.notes { li.toggle-replies-widget { - margin-left: 0; + margin-left: 1.1875rem; border-left: 0; border-right: 0; border-radius: 0 !important; @@ -1146,6 +1085,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; .discussion-wrapper { border: 0; + border-radius: 0; } } } -- GitLab From 289f2a5e52a775542c9ddb71c4bacf8ee662f293 Mon Sep 17 00:00:00 2001 From: Sascha Eggenberger Date: Mon, 27 Nov 2023 13:00:20 +0100 Subject: [PATCH 07/12] Fix visual regressions --- .../diffs/components/diff_line_note_form.vue | 2 +- .../components/notes/work_item_add_note.vue | 5 +- app/assets/stylesheets/pages/note_form.scss | 19 ++++--- app/assets/stylesheets/pages/notes.scss | 55 ++++++++++++++----- app/views/discussions/_discussion.html.haml | 2 +- app/views/discussions/_notes.html.haml | 2 +- app/views/shared/notes/_form.html.haml | 2 +- 7 files changed, 58 insertions(+), 29 deletions(-) diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue index 287b2fc1973d85..98b80910b221b4 100644 --- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue +++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue @@ -242,7 +242,7 @@ export default { diff --git a/app/assets/javascripts/notes/components/diff_discussion_header.vue b/app/assets/javascripts/notes/components/diff_discussion_header.vue index d18609a41fa2d8..bd19d518349ac9 100644 --- a/app/assets/javascripts/notes/components/diff_discussion_header.vue +++ b/app/assets/javascripts/notes/components/diff_discussion_header.vue @@ -1,5 +1,5 @@ @@ -119,14 +128,7 @@ export default {
    • - + +
    + + + + + +
    diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue index 71710a4eeeea90..e4f828bb48e20f 100644 --- a/app/assets/javascripts/notes/components/discussion_notes.vue +++ b/app/assets/javascripts/notes/components/discussion_notes.vue @@ -171,6 +171,7 @@ export default { v-if="hasReplies" :collapsed="!isExpanded" :replies="replies" + :internal-note="isDiscussionInternal" @toggle="toggleDiscussion({ discussionId: discussion.id })" />