Skip to content
Snippets Groups Projects
Unverified Commit 330886e6 authored by Fatih Acet's avatar Fatih Acet
Browse files

Discussions redesign

parent 79ba3892
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 162 additions and 82 deletions
app/assets/javascripts/diffs/components/diff_discussions.vue
+ 0
− 1
View file @ 330886e6
@@ -36,7 +36,6 @@ export default {
>
<noteable-discussion
:discussion="discussion"
:render-header="false"
:render-diff-file="false"
:always-expanded="true"
:discussions-by-diff-order="true"
app/assets/javascripts/notes/components/note_header.vue
+ 3
− 4
View file @ 330886e6
@@ -92,9 +92,6 @@ export default {
</span>
<span class="note-headline-light">
<span class="note-headline-meta">
<template v-if="actionText">
{{ actionText }}
</template>
<span class="system-note-message">
<slot></slot>
</span>
@@ -102,7 +99,9 @@ export default {
v-if="createdAt"
>
<span class="system-note-separator">
&middot;
<template v-if="actionText">
{{ actionText }}
</template>
</span>
<a
:href="noteTimestampLink"
app/assets/javascripts/notes/components/noteable_discussion.vue
+ 55
− 14
View file @ 330886e6
@@ -46,11 +46,6 @@ export default {
type: Object,
required: true,
},
renderHeader: {
type: Boolean,
required: false,
default: true,
},
renderDiffFile: {
type: Boolean,
required: false,
@@ -72,6 +67,7 @@ export default {
isReplying: false,
isResolving: false,
resolveAsThread: true,
isRepliesCollapsed: false,
};
},
computed: {
@@ -112,6 +108,15 @@ export default {
newNotePath() {
return this.getNoteableData.create_note_path;
},
hasReplies() {
return this.discussion.notes.length > 1;
},
initialDiscussion() {
return this.discussion.notes.slice(0, 1)[0];
},
replies() {
return this.discussion.notes.slice(1);
},
lastUpdatedBy() {
const { notes } = this.discussion;
 
@@ -147,6 +152,12 @@ export default {
 
return diffDiscussion && diffFile && this.renderDiffFile;
},
shouldGroupReplies() {
return !this.shouldRenderDiffs && !this.transformedDiscussion.diffDiscussion;
},
shouldRenderHeader() {
return this.shouldRenderDiffs;
},
wrapperComponent() {
return this.shouldRenderDiffs ? diffWithNote : 'div';
},
@@ -160,6 +171,9 @@ export default {
wrapperClass() {
return this.isDiffDiscussion ? '' : 'card discussion-wrapper';
},
toggleRepliesText() {
return this.isRepliesCollapsed ? s__('Notes|Expand replies') : s__('Notes|Collapse replies');
},
},
watch: {
isReplying() {
@@ -207,6 +221,9 @@ export default {
toggleDiscussionHandler() {
this.toggleDiscussion({ discussionId: this.discussion.id });
},
toggleReplies() {
this.isRepliesCollapsed = !this.isRepliesCollapsed;
},
showReplyForm() {
this.isReplying = true;
},
@@ -278,7 +295,7 @@ Please check your network connection and try again.`;
<div class="timeline-entry-inner">
<div class="timeline-icon">
<user-avatar-link
v-if="author"
v-if="author && shouldRenderHeader"
:link-href="author.path"
:img-src="author.avatar_url"
:img-alt="author.name"
@@ -291,7 +308,7 @@ Please check your network connection and try again.`;
class="discussion js-discussion-container"
>
<div
v-if="renderHeader"
v-if="shouldRenderHeader"
class="discussion-header"
>
<note-header
@@ -348,13 +365,37 @@ Please check your network connection and try again.`;
>
<div class="discussion-notes">
<ul class="notes">
<component
:is="componentName(note)"
v-for="note in discussion.notes"
:key="note.id"
:note="componentData(note)"
@handleDeleteNote="deleteNoteHandler"
/>
<template v-if="shouldGroupReplies">
<component
:is="componentName(initialDiscussion)"
:note="componentData(initialDiscussion)"
@handleDeleteNote="deleteNoteHandler"
/>
<li
class="replies-toggle"
@click="toggleReplies"
>
{{ toggleRepliesText }}
</li>
<template v-if="!isRepliesCollapsed">
<component
:is="componentName(note)"
v-for="note in replies"
:key="note.id"
:note="componentData(note)"
@handleDeleteNote="deleteNoteHandler"
/>
</template>
</template>
<template v-else>
<component
:is="componentName(note)"
v-for="note in discussion.notes"
:key="note.id"
:note="componentData(note)"
@handleDeleteNote="deleteNoteHandler"
/>
</template>
</ul>
<div
:class="{ 'is-replying': isReplying }"
app/assets/javascripts/notes/components/noteable_note.vue
+ 1
− 0
View file @ 330886e6
@@ -190,6 +190,7 @@ export default {
:author="author"
:created-at="note.created_at"
:note-id="note.id"
action-text="commented"
/>
<note-actions
:author-id="author.id"
app/assets/stylesheets/framework/files.scss
+ 1
− 2
View file @ 330886e6
@@ -31,12 +31,12 @@
.file-title {
position: relative;
background-color: $gray-light;
border-top: 1px solid $border-color;
border-bottom: 1px solid $border-color;
margin: 0;
text-align: left;
padding: 10px $gl-padding;
word-wrap: break-word;
border-radius: $border-radius-default $border-radius-default 0 0;
 
&.file-title-clear {
padding-left: 0;
@@ -331,7 +331,6 @@ span.idiff {
border-bottom: 1px solid $border-color;
padding: 5px $gl-padding;
margin: 0;
border-radius: $border-radius-default $border-radius-default 0 0;
}
 
.file-header-content {
app/assets/stylesheets/framework/timeline.scss
+ 4
− 3
View file @ 330886e6
.timeline {
@include basic-list;
// @include basic-list;
margin: 0;
padding: 0;
list-style: none;
 
&::before {
@include notes-media('max', map-get($grid-breakpoints, sm)) {
@@ -26,9 +27,9 @@
}
 
.timeline-entry {
border-color: $white-normal;
// border-color: $white-normal;
color: $gl-text-color;
border-bottom: 1px solid $border-white-light;
// border-bottom: 1px solid $border-white-light;
background: $white-light;
 
.timeline-entry-inner {
app/assets/stylesheets/pages/notes.scss
+ 98
− 58
View file @ 330886e6
/**
* Notes
*/
$system-note-icon-size: 32px;
$system-note-svg-size: 16px;
@mixin connectionLine($height, $top, $left) {
content: '';
border-left: 2px solid #dfdfdf;
position: absolute;
height: $height;
top: $top;
left: $left;
}
 
@-webkit-keyframes targe3-note {
from {
background: $note-targe3-outside;
}
.issuable-discussion {
.notes.timeline > li {
&:not(.system-note) {
border: 1px solid $border-color;
border-radius: $border-radius-default;
}
 
50% {
background: $note-targe3-inside;
}
margin: $gl-padding 0;
 
to {
background: $note-targe3-outside;
&:not(:first-child)::after {
@include connectionLine(16px, -17px, 32px);
}
.notes_content {
border: none;
border-top: 1px solid $border-color;
}
}
}
 
@@ -22,14 +35,43 @@ ul.notes {
margin: 0;
padding: 0;
 
> li.note {
padding: $gl-padding;
}
> li.note-discussion {
padding: 0;
.card {
border: none;
}
.discussion-reply-holder {
border-radius: 0 0 $border-radius-default $border-radius-default;
}
li.note {
border-bottom: 1px solid $border-color;
&:first-child {
border-radius: $border-radius-default $border-radius-default 0 0;
}
}
.replies-toggle {
line-height: $gl-padding-32;
background: $gray-light;
padding-left: $gl-padding;
border-bottom: 1px solid $border-color;
}
}
.note-created-ago,
.note-updated-at {
white-space: normal;
}
 
.discussion-body {
padding-top: 8px;
.card {
margin-bottom: 0;
}
@@ -52,14 +94,9 @@ ul.notes {
position: relative;
border-bottom: 0;
 
@include notes-media('min', map-get($grid-breakpoints, sm)) {
padding-left: $note-icon-gutter-width;
}
.timeline-entry-inner {
padding: $gl-padding $gl-btn-padding;
border-bottom: 1px solid $white-normal;
}
// @include notes-media('min', map-get($grid-breakpoints, sm)) {
// padding-left: $note-icon-gutter-width;
// }
 
&:target,
&.target {
@@ -75,19 +112,19 @@ ul.notes {
}
}
 
.timeline-icon {
@include notes-media('min', map-get($grid-breakpoints, sm)) {
margin-left: -$note-icon-gutter-width;
}
}
// .timeline-icon {
// @include notes-media('min', map-get($grid-breakpoints, sm)) {
// margin-left: -$note-icon-gutter-width;
// }
// }
 
.timeline-content {
margin-left: $note-icon-gutter-width;
// .timeline-content {
// margin-left: $note-icon-gutter-width;
 
@include notes-media('min', map-get($grid-breakpoints, sm)) {
margin-left: 0;
}
}
// @include notes-media('min', map-get($grid-breakpoints, sm)) {
// margin-left: 0;
// }
// }
 
&.being-posted {
pointer-events: none;
@@ -104,12 +141,6 @@ ul.notes {
}
}
 
&.note-discussion {
.timeline-entry-inner {
padding: $gl-padding 10px;
}
}
.editing-spinner {
display: none;
}
@@ -225,17 +256,33 @@ ul.notes {
 
.timeline-icon {
float: left;
display: flex;
align-items: center;
width: $system-note-icon-size;
height: $system-note-icon-size;
border: 1px solid $border-color;
border-radius: $system-note-icon-size;
margin: -6px $gl-padding 0 0;
&::before {
@include connectionLine(11px, -17px, 16px);
}
 
@include notes-media('min', map-get($grid-breakpoints, sm)) {
margin-left: 0;
width: auto;
&::after {
@include connectionLine(12px, 26px, 17px);
}
 
// @include notes-media('min', map-get($grid-breakpoints, sm)) {
// margin-left: 0;
// width: auto;
// }
svg {
width: 16px;
height: 16px;
width: $system-note-svg-size;
height: $system-note-svg-size;
fill: $gray-darkest;
margin-top: 2px;
display: block;
margin: 0 auto;
}
}
 
@@ -302,10 +349,16 @@ ul.notes {
.discussion-body .diff-file {
.file-title {
cursor: default;
line-height: 38px;
padding: 0 $gl-padding;
 
&:hover {
background-color: $gray-light;
}
.btn-clipboard {
top: 10px;
}
}
 
.line_content {
@@ -585,19 +638,6 @@ ul.notes {
z-index: 10;
}
 
.discussion-body,
.diff-file {
.notes .note {
border-bottom: 1px solid $white-normal;
.timeline-entry-inner {
padding-left: $gl-padding;
padding-right: $gl-padding;
border-bottom: 0;
}
}
}
.disabled-comment {
background-color: $gray-light;
border-radius: $border-radius-base;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment