Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets/pages/notes.scss
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets/pages/notes.scss')
-rw-r--r--app/assets/stylesheets/pages/notes.scss336
1 files changed, 274 insertions, 62 deletions
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index fc1b78bf730..438b7b1afa6 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -1,15 +1,15 @@
-$system-note-icon-size: 32px;
-$system-note-svg-size: 16px;
+$system-note-icon-size: 2rem;
+$system-note-svg-size: 1rem;
@mixin vertical-line($left) {
&::before {
content: '';
- border-left: 2px solid $gray-10;
+ border-left: 2px solid var(--gray-10, $gray-10);
position: absolute;
top: 0;
bottom: 0;
- left: $left;
- height: calc(100% - 20px);
+ left: calc(#{$left} - 1px);
+ height: calc(100% + 1.5rem);
}
}
@@ -19,17 +19,10 @@ $system-note-svg-size: 16px;
border-radius: $border-radius-default;
}
-.note-wrapper {
- padding: $gl-padding $gl-padding-8 $gl-padding $gl-padding;
-
- &.outlined {
- @include outline-comment();
- }
-}
-
-.issuable-discussion {
- .main-notes-list {
- @include vertical-line(35px);
+.issuable-discussion:not(.incident-timeline-events),
+.limited-width-notes {
+ .main-notes-list > li.timeline-entry:not(:last-of-type) {
+ @include vertical-line(1rem);
}
}
@@ -41,8 +34,6 @@ $system-note-svg-size: 16px;
position: relative;
&.timeline > .timeline-entry {
- border: 1px solid $border-color;
- border-radius: $border-radius-default;
margin: $gl-padding 0;
&.system-note,
@@ -50,6 +41,117 @@ $system-note-svg-size: 16px;
border: 0;
}
+ .timeline-avatar {
+ height: 2rem;
+ }
+
+ &.note-comment,
+ &.note-skeleton,
+ .draft-note {
+ .timeline-avatar {
+ margin-top: 5px;
+ }
+
+ .timeline-content:not(.flash-container) {
+ margin-left: 2.5rem;
+ border: 1px solid $border-color;
+ border-radius: $gl-border-radius-base;
+ background-color: $white;
+ padding: $gl-padding-4 $gl-padding-8;
+ }
+
+ .note-header-info {
+ min-height: 2rem;
+ display: flex;
+ align-items: center;
+ gap: 0 0.25rem;
+ flex-wrap: wrap;
+ }
+ }
+
+ &.note-discussion {
+ .timeline-content .discussion-wrapper {
+ background-color: transparent;
+ }
+
+ .timeline-content {
+ ul li {
+ &:first-of-type {
+ .timeline-avatar {
+ margin-top: 5px;
+ }
+
+ .timeline-content {
+ margin-left: 2.5rem;
+ border-left: 1px solid $border-color;
+ border-right: 1px solid $border-color;
+ border-top: 1px solid $border-color;
+ border-top-left-radius: $gl-border-radius-base;
+ border-top-right-radius: $gl-border-radius-base;
+ background-color: $white;
+ padding: $gl-padding-4 $gl-padding-8;
+ }
+ }
+
+ &:not(:first-of-type) .timeline-entry-inner {
+ margin-left: 2.5rem;
+ border-left: 1px solid $border-color;
+ border-right: 1px solid $border-color;
+ background-color: $white;
+
+ .timeline-content {
+ padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
+ }
+
+ .timeline-avatar {
+ margin: $gl-padding-8 0 0 $gl-padding;
+ }
+
+ .timeline-discussion-body {
+ margin-left: 2rem;
+ }
+ }
+ }
+
+ .diff-content {
+ ul li:first-of-type {
+ .timeline-avatar {
+ margin-top: 0;
+ }
+
+ .timeline-content {
+ margin-left: 0;
+ border: 0;
+ padding: 0;
+ }
+
+ .timeline-entry-inner {
+ margin-left: 2.5rem;
+ border-left: 1px solid $border-color;
+ border-right: 1px solid $border-color;
+ background-color: $white;
+
+ .timeline-content {
+ padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
+ }
+
+ .timeline-avatar {
+ margin: $gl-padding-8 0 0 $gl-padding;
+ }
+
+ .timeline-discussion-body {
+ margin-left: 2rem;
+ }
+ }
+ }
+ }
+ }
+
+ .discussion-reply-holder {
+ border: 1px solid $border-color;
+ }
+ }
+
&.note-form {
margin-left: 0;
@@ -88,10 +190,14 @@ $system-note-svg-size: 16px;
.card {
margin-bottom: 0;
}
- }
- .timeline-discussion-body {
- margin-top: -$gl-padding-8;
+ .note-header-info {
+ min-height: 2rem;
+ display: flex;
+ align-items: center;
+ gap: 0 0.25rem;
+ flex-wrap: wrap;
+ }
}
.discussion {
@@ -116,16 +222,11 @@ $system-note-svg-size: 16px;
&.being-posted {
pointer-events: none;
opacity: 0.5;
- padding: $gl-padding;
.dummy-avatar {
background-color: $gray-100;
border: 1px solid darken($gray-100, 25%);
}
-
- .note-headline-light {
- margin-left: 3px;
- }
}
.editing-spinner {
@@ -156,6 +257,7 @@ $system-note-svg-size: 16px;
.note-edit-form {
display: block;
margin-left: 0;
+ margin-top: 0.5rem;
&.current-note-edit-form + .note-awards {
display: none;
@@ -164,13 +266,17 @@ $system-note-svg-size: 16px;
}
.note-body {
- padding: $gl-padding-4 $gl-padding-4 $gl-padding-4 $gl-padding-8;
+ padding: 0 $gl-padding-8 $gl-padding-8;
overflow-x: auto;
overflow-y: hidden;
.note-text {
word-wrap: break-word;
}
+
+ .suggestions {
+ margin-top: 4px;
+ }
}
.note-awards {
@@ -186,9 +292,10 @@ $system-note-svg-size: 16px;
}
.system-note {
- padding: $gl-padding-4 20px;
+ padding: $gl-padding-8 0;
margin: $gl-padding 0;
background-color: transparent;
+ font-size: $gl-font-size;
.note-header-info {
padding-bottom: 0;
@@ -229,6 +336,15 @@ $system-note-svg-size: 16px;
.note-body {
overflow: hidden;
+ padding: 0;
+
+ ul {
+ margin: 0.5rem 0;
+ }
+
+ p {
+ margin-left: 1rem;
+ }
.description-version {
position: relative;
@@ -305,7 +421,7 @@ $system-note-svg-size: 16px;
height: $system-note-icon-size;
border: 1px solid $gray-10;
border-radius: $system-note-icon-size;
- margin: -6px 0 0;
+ margin: -8px 0 0;
svg {
width: $system-note-svg-size;
@@ -319,25 +435,38 @@ $system-note-svg-size: 16px;
.discussion-filter-note {
.timeline-icon {
- width: $system-note-icon-size + 6;
- height: $system-note-icon-size + 6;
+ width: $system-note-icon-size;
+ height: $system-note-icon-size;
margin-top: -8px;
}
}
}
+.card .notes {
+ .system-note {
+ margin: 0;
+ padding: 0;
+ }
+
+ .timeline-icon {
+ margin: 8px 0 0 14px;
+ }
+}
+
+
// Diff code in discussion view
.discussion-body .diff-file {
.file-title {
cursor: default;
- border-top: 1px solid $border-color;
+ border-top: 0;
border-radius: 0;
+ margin-left: 2.5rem;
@media (min-width: map-get($grid-breakpoints, md)) {
--initial-top: calc(#{$header-height} + #{$mr-tabs-height});
&.is-sidebar-moved {
- --initial-top: calc(#{$header-height} + #{$mr-tabs-height + 28px});
+ --initial-top: calc(#{$header-height} + #{$mr-tabs-height + 24px});
}
.with-performance-bar & {
@@ -357,6 +486,40 @@ $system-note-svg-size: 16px;
.line_content {
white-space: pre-wrap;
}
+
+ .diff-content {
+ margin-left: 2.5rem;
+
+ &.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-left: -2.5rem;
+
+ .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;
+ }
+ }
+ }
}
.tab-pane.notes {
@@ -394,8 +557,17 @@ $system-note-svg-size: 16px;
}
.system-note {
- background-color: $white;
- padding: $gl-padding;
+ background-color: transparent;
+ padding: 0;
+
+ .timeline-icon {
+ margin-top: -2px;
+ }
+
+ .timeline-entry-inner .timeline-icon {
+ margin-top: $grid-size;
+ margin-left: 14px;
+ }
}
}
@@ -487,6 +659,19 @@ $system-note-svg-size: 16px;
.code-commit .notes-content,
.diff-viewer > .image ~ .note-container {
background-color: $white;
+
+ li.note-comment {
+ padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
+
+ .avatar {
+ margin-right: 0;
+ }
+
+ .note-body {
+ padding: $gl-padding-4 0 $gl-padding-8;
+ margin-left: 2.5rem;
+ }
+ }
}
.diff-viewer > .image ~ .note-container form.new-note {
@@ -540,9 +725,21 @@ $system-note-svg-size: 16px;
padding-bottom: 0;
}
+ .timeline-avatar {
+ margin-top: 5px;
+ }
+
.timeline-content {
overflow-x: auto;
overflow-y: hidden;
+ 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;
+ }
}
&.note-wrapper {
@@ -568,19 +765,10 @@ $system-note-svg-size: 16px;
.note {
@include notes-media('max', map-get($grid-breakpoints, sm) - 1) {
.note-header {
- .note-actions {
- flex-wrap: wrap;
- margin-bottom: $gl-padding-12;
-
- > :first-child {
- margin-left: 0;
- }
+ .note-actions > :first-child {
+ margin-left: 0;
}
}
-
- .note-header-author-name {
- display: block;
- }
}
}
@@ -593,11 +781,6 @@ $system-note-svg-size: 16px;
}
}
-.note-header-info,
-.note-actions {
- padding-bottom: $gl-padding-4;
-}
-
.system-note .note-header-info {
padding-bottom: 0;
}
@@ -618,10 +801,6 @@ $system-note-svg-size: 16px;
}
.note-headline-meta {
- .system-note-separator {
- color: $gray-500;
- }
-
.note-timestamp {
white-space: nowrap;
}
@@ -667,18 +846,20 @@ $system-note-svg-size: 16px;
}
.note-actions {
- align-self: flex-start;
justify-content: flex-end;
flex-shrink: 1;
display: inline-flex;
align-items: center;
- margin-left: 10px;
+ margin-left: $gl-padding-8;
color: $gray-400;
- margin-top: -4px;
@include notes-media('max', map-get($grid-breakpoints, sm) - 1) {
+ justify-content: flex-start;
float: none;
- margin-left: 0;
+
+ .note-actions__mobile-spacer {
+ flex-grow: 1;
+ }
}
}
@@ -719,7 +900,7 @@ $system-note-svg-size: 16px;
}
.discussion-toggle-button {
- padding: 0;
+ padding: 0 $gl-padding-8 0 0;
background-color: transparent;
border: 0;
line-height: 20px;
@@ -868,6 +1049,28 @@ $system-note-svg-size: 16px;
.note-discussion.timeline-entry {
padding-left: 0;
+ ul.notes li.note-wrapper {
+ .timeline-content {
+ padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
+ }
+
+ .timeline-avatar {
+ margin: $gl-padding-8 0 0 $gl-padding;
+ }
+ }
+
+ ul.notes {
+ li.toggle-replies-widget {
+ margin-left: 0;
+ border-left: 0;
+ border-right: 0;
+ }
+
+ div.discussion-reply-holder {
+ margin-left: 0;
+ }
+ }
+
&:last-child {
border-bottom: 0;
}
@@ -894,6 +1097,16 @@ $system-note-svg-size: 16px;
}
}
+ .draft-note-component .draft-note.timeline-entry {
+ .timeline-content:not(.flash-container) {
+ padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
+ }
+
+ .timeline-avatar {
+ margin: $gl-padding-8 0 0 $gl-padding;
+ }
+ }
+
.diff-comment-form {
display: block;
}
@@ -909,8 +1122,7 @@ $system-note-svg-size: 16px;
// See https://gitlab.com/gitlab-org/gitlab-foss/issues/53918#note_117038785
.unstyled-comments {
.discussion-header {
- padding: $gl-padding;
- border-bottom: 1px solid $border-color;
+ padding: $gl-padding 0;
}
.discussion-form-container {
generated by cgit v1.2.3 (git 2.25.1) at 2024-08-01 12:28:57 +0300