Skip to content

Commit 718edd6

Browse files
dreylikydreyliky
committed
feat: visual improvements for overview page
1 parent 99c2d8b commit 718edd6

29 files changed

+379
-131
lines changed

‎apps/code-review/src/app/pages/overview/components/code-editor/code-editor.component.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import { ChangeDetectionStrategy, Component, Inject, ViewEncapsulation } from '@angular/core';
22
import type { editor } from 'monaco-editor';
33
import { ReviewRequestCommentsState } from '../../states';
4-
import { MONACO_API, MONACO_EDITOR } from '../../tokens';
4+
import { MONACO_API } from '../../tokens';
55
import { MonacoApi } from '../../types';
66
import {
77
LineCommentsAmountDirective,
88
LineHighlighterDirective,
99
TextSelectionDisablerDirective
1010
} from './directives';
11-
import { MONACO_API_PROVIDER, MONACO_EDITOR_PROVIDER } from './providers';
11+
import { MONACO_EDITOR_PROVIDER } from './providers';
1212
import { LanguageService } from './services';
1313
import { EditorCommentsState } from './states';
14+
import { MONACO_EDITOR } from './tokens';
1415

1516
@Component({
1617
selector: 'acua-code-editor',
@@ -22,7 +23,7 @@ import { EditorCommentsState } from './states';
2223
LineCommentsAmountDirective,
2324
TextSelectionDisablerDirective
2425
],
25-
providers: [MONACO_EDITOR_PROVIDER, MONACO_API_PROVIDER, LanguageService, EditorCommentsState],
26+
providers: [MONACO_EDITOR_PROVIDER, LanguageService, EditorCommentsState],
2627
encapsulation: ViewEncapsulation.None
2728
})
2829
export class CodeEditorComponent {

‎apps/code-review/src/app/pages/overview/components/code-editor/constants/monaco-options.const.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { editor } from 'monaco-editor';
22

33
export const MONACO_OPTIONS: editor.IStandaloneEditorConstructionOptions = {
4-
theme: 'vs-dark',
4+
theme: 'tommorow-night',
55
language: 'typescript',
66
fontSize: 18,
77
domReadOnly: true,

‎apps/code-review/src/app/pages/overview/components/code-editor/directives/line-comments-amount.directive.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Directive, Inject, Injector } from '@angular/core';
22
import type { editor } from 'monaco-editor';
33
import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
4-
import { filter, Subscription, tap } from 'rxjs';
5-
import { MONACO_EDITOR } from '../../../tokens';
4+
import { Subscription, filter, tap } from 'rxjs';
65
import { CommentContentWidget } from '../models';
76
import { EditorCommentsState } from '../states';
7+
import { MONACO_EDITOR } from '../tokens';
88

99
@Directive({
1010
selector: '[acuaLineCommentsAmount]',

‎apps/code-review/src/app/pages/overview/components/code-editor/directives/line-highlighter.directive.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Directive, Inject, OnDestroy } from '@angular/core';
2-
import type { editor, IDisposable } from 'monaco-editor';
2+
import type { IDisposable, editor } from 'monaco-editor';
33
import { Subscription } from 'rxjs';
4-
import { MONACO_EDITOR } from '../../../tokens';
54
import { LINE_DECORATION_HAS_COMMENTS_CLASS_NAME as HAS_COMMENTS_CLASS } from '../constants';
65
import { isTargetOverActualLineOfCode } from '../helpers';
76
import { LineDecoration } from '../models';
87
import { EditorCommentsState } from '../states';
8+
import { MONACO_EDITOR } from '../tokens';
99

1010
@Directive({
1111
selector: '[acuaLineHighlighter]',

‎apps/code-review/src/app/pages/overview/components/code-editor/directives/selection-disabler.directive.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Directive, Inject } from '@angular/core';
2-
import type { editor, IRange } from 'monaco-editor';
3-
import { MONACO_EDITOR } from '../../../tokens';
2+
import type { IRange, editor } from 'monaco-editor';
3+
import { MONACO_EDITOR } from '../tokens';
44

55
@Directive({
66
selector: '[acuaTextSelectionDisabler]',

‎apps/code-review/src/app/pages/overview/components/code-editor/models/comment-content-widget.model.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { ComponentRef, Injector, ViewContainerRef } from '@angular/core';
22
import type { editor } from 'monaco-editor';
3-
import { MONACO_API, MONACO_EDITOR } from '../../../tokens';
3+
import { MONACO_API } from '../../../tokens';
44
import { CommentsAmountComponent } from '../components';
55
import { EditorCommentsState } from '../states';
6+
import { MONACO_EDITOR } from '../tokens';
67

78
export class CommentContentWidget implements editor.IContentWidget {
89
private readonly editor = this.injector.get(MONACO_EDITOR);

‎apps/code-review/src/app/pages/overview/components/code-editor/providers/index.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
export * from './monaco-api.provider';
21
export * from './monaco-editor.provider';

‎apps/code-review/src/app/pages/overview/components/code-editor/providers/monaco-editor.provider.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { ElementRef, inject, Provider } from '@angular/core';
22
import { ActivatedRoute } from '@angular/router';
33
import { OverviewDataParam as DataParam } from '../../../enums';
4-
import { MONACO_EDITOR } from '../../../tokens';
54
import { MonacoApi } from '../../../types';
65
import { MONACO_OPTIONS } from '../constants';
6+
import { MONACO_EDITOR } from '../tokens';
77

88
export const MONACO_EDITOR_PROVIDER: Provider = {
99
provide: MONACO_EDITOR,

‎apps/code-review/src/app/pages/overview/components/code-editor/tokens/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './monaco-editor.token';

‎apps/code-review/src/app/pages/overview/tokens/monaco-editor.token.ts ‎apps/code-review/src/app/pages/overview/components/code-editor/tokens/monaco-editor.token.ts

File renamed without changes.

‎apps/code-review/src/app/pages/overview/components/file-explorer/components/file-tree-node/file-tree-node.component.html

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,25 @@
1-
<div [class]="rowCssClassesAsString" [class.selected]="isSelected" (click)="onButtonToggle()">
1+
<div class="monaco-tree-row" [class.selected]="isSelected" (click)="onRowClick()">
22
<span [style.margin-left]="marginLeftStyleValue"></span>
3-
<i *ngIf="doChildrenExist" [class]="arrowCssClassesAsString"></i>
3+
4+
<i
5+
*ngIf="doChildrenExist"
6+
class="monaco-tree-arrow codicon codicon-chevron-down"
7+
[class.open]="this.isOpened"
8+
></i>
9+
410
<img [src]="fileExplorerIconSrc" class="icon" />
11+
512
<div [title]="node.fullPath" class="monaco-tree-name">
613
{{ node.name }}
714
</div>
815
</div>
916

10-
<ng-container *ngIf="isAllowedToRender">
17+
<ng-container *ngIf="isOpened">
1118
<acua-file-tree-node
1219
*ngFor="let node of node.children"
1320
[node]="node"
1421
[depth]="incrementedDepth"
15-
[hide]="isHidden"
16-
(fileSelected)="onFileSelected($event)"
22+
(fileSelected)="fileSelected.emit($event)"
1723
>
1824
</acua-file-tree-node>
1925
</ng-container>

‎apps/code-review/src/app/pages/overview/components/file-explorer/components/file-tree-node/file-tree-node.component.scss

+26-40
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,39 @@
66
align-items: center;
77
gap: 6px;
88
cursor: pointer;
9-
padding-left: 32px;
9+
padding-left: 20px;
1010
font-size: 14px;
11-
line-height: 24px;
11+
line-height: 28px;
12+
color: #b4b5b5;
1213

1314
@include for-mobile-only {
1415
font-size: 21px;
1516
line-height: 36px;
1617
}
1718

1819
&.selected {
19-
background-color: rgba(65, 75, 236, 0.15) !important;
20+
background-color: rgba(0, 0, 0, 0.1) !important;
21+
color: #2ec9b0;
2022
}
2123

22-
&:hover {
23-
background-color: rgba(255, 255, 255, 0.1);
24+
&.active {
25+
background: rgb(63, 63, 70);
26+
}
27+
28+
&:hover:not(.selected) {
29+
color: #fff;
30+
}
31+
32+
/* stylelint-disable-next-line selector-class-pattern */
33+
.root-2 {
34+
.monaco-tree-icon {
35+
margin-left: 10px;
36+
}
2437
}
2538

2639
.icon {
27-
width: 16px;
28-
height: 22px;
40+
width: 20px;
41+
height: 20px;
2942

3043
@include for-mobile-only {
3144
width: 24px;
@@ -42,46 +55,19 @@
4255
top: 2px;
4356
transform: rotate(-90deg);
4457
transition: all 0.2s;
45-
}
4658

47-
.monaco-tree-arrow.open {
48-
transform: rotate(0deg);
49-
left: -2px;
50-
top: 0;
59+
&.open {
60+
transform: rotate(0deg);
61+
left: -2px;
62+
top: 0;
63+
}
5164
}
5265

5366
.monaco-tree-name {
5467
text-overflow: ellipsis;
5568
white-space: nowrap;
5669
overflow: hidden;
57-
padding-right: 5px;
58-
}
59-
}
60-
61-
.monaco-tree-row.vs-dark:hover {
62-
background: #2a2d2e;
63-
}
64-
65-
.monaco-tree-row.vs-dark.active {
66-
background: rgb(63, 63, 70);
67-
}
68-
69-
.monaco-tree-row.vs-light:hover {
70-
background: #e8e8e8;
71-
}
72-
73-
.monaco-tree-row.vs-light.active {
74-
background: #e4e6f1;
75-
}
76-
77-
.monaco-tree-row.hide {
78-
display: none;
79-
}
80-
81-
/* stylelint-disable-next-line selector-class-pattern */
82-
.monaco-tree-row .root-2 {
83-
.monaco-tree-icon {
84-
margin-left: 10px;
70+
padding: 0 5px 0 2px;
8571
}
8672
}
8773

‎apps/code-review/src/app/pages/overview/components/file-explorer/components/file-tree-node/file-tree-node.component.ts

+11-57
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,8 @@ export class FileTreeNodeComponent implements OnChanges, OnInit {
3535
@Input()
3636
public depth = 0;
3737

38-
@Input()
39-
public hide = false;
40-
4138
@Output()
42-
public fileSelected: EventEmitter<ProjectFile> = new EventEmitter();
39+
public fileSelected = new EventEmitter<ProjectFile>();
4340

4441
public get marginLeftStyleValue(): string {
4542
return `${this.baseMarginLeft * this.depth}px`;
@@ -49,14 +46,6 @@ export class FileTreeNodeComponent implements OnChanges, OnInit {
4946
return !!this.node.children;
5047
}
5148

52-
public get isFile(): boolean {
53-
return !!this.node.content;
54-
}
55-
56-
public get isHidden(): boolean {
57-
return !this.isOpened || this.hide;
58-
}
59-
6049
public get incrementedDepth(): number {
6150
return this.depth + 1;
6251
}
@@ -65,35 +54,9 @@ export class FileTreeNodeComponent implements OnChanges, OnInit {
6554
return `/assets/icons/file-explorer/${this.icon}.svg`;
6655
}
6756

68-
public get arrowCssClassesAsString(): string {
69-
const CLASSES = 'monaco-tree-arrow codicon codicon-chevron-down';
70-
71-
if (this.isOpened) {
72-
return `${CLASSES} open`;
73-
}
74-
75-
return CLASSES;
76-
}
77-
78-
public get rowCssClassesAsString(): string {
79-
const CLASSES = `monaco-tree-row`;
80-
81-
if (this.hide) {
82-
return `${CLASSES} hide`;
83-
}
84-
85-
return CLASSES;
86-
}
87-
88-
public get isAllowedToRender(): boolean {
89-
return !this.isHidden || this.hasBeenOpened;
90-
}
91-
9257
public isOpened = false;
9358
public isSelected = false;
9459

95-
private hasBeenOpened = false;
96-
9760
private readonly baseMarginLeft = 10;
9861

9962
private icon!: string;
@@ -115,34 +78,25 @@ export class FileTreeNodeComponent implements OnChanges, OnInit {
11578
}
11679
}
11780

118-
public onButtonToggle(): void {
81+
public onRowClick(): void {
11982
this.isOpened = !this.isOpened;
120-
this.hasBeenOpened = true;
12183

122-
if (this.doChildrenExist) {
123-
return;
84+
if (!this.doChildrenExist) {
85+
this.fileSelectionState.set(this.node);
12486
}
125-
126-
this.fileSelectionState.set(this.node as ProjectFile);
127-
}
128-
129-
public onFileSelected(node: ProjectFile): void {
130-
this.fileSelected.emit(node);
13187
}
13288

13389
@AutoUnsubscribe()
13490
private initFileSelection(): Subscription {
135-
return this.fileSelectionState.data$
136-
.pipe(filter<ProjectFile | null>(Boolean))
137-
.subscribe((node: ProjectFile) => {
138-
this.isSelected = node.fullPath === this.node.fullPath;
91+
return this.fileSelectionState.data$.pipe(filter(Boolean)).subscribe((node) => {
92+
this.isSelected = node.fullPath === this.node.fullPath;
13993

140-
if (this.isSelected) {
141-
this.fileSelected.emit(this.node as ProjectFile);
142-
}
94+
if (this.isSelected) {
95+
this.fileSelected.emit(this.node);
96+
}
14397

144-
this.changeDetectorRef.markForCheck();
145-
});
98+
this.changeDetectorRef.markForCheck();
99+
});
146100
}
147101

148102
private getIcon(): string {

‎apps/code-review/src/app/pages/overview/components/file-explorer/file-explorer.component.html

-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,5 @@
22
*ngFor="let node of tree"
33
[node]="node"
44
[depth]="0"
5-
[hide]="false"
65
(fileSelected)="onFileSelected($event)"
76
></acua-file-tree-node>

‎apps/code-review/src/app/pages/overview/components/file-explorer/file-explorer.component.scss

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
:host {
2-
width: 200px;
2+
width: 100%;
33
min-width: 200px;
44
height: 100%;
5+
display: flex;
6+
flex-direction: column;
57
user-select: none;
6-
background-color: #212121;
7-
overflow-y: scroll;
8-
resize: horizontal;
8+
background-color: #17191b;
9+
overflow-y: auto;
910
}

‎apps/code-review/src/app/pages/overview/components/header/header.component.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
justify-content: space-between;
66
align-items: center;
77
padding: 0 10px;
8-
background-color: #212121;
8+
background-color: #17191b;
9+
border-bottom: solid 1px #101113;
910
box-sizing: border-box;
1011

1112
mat-icon {
@@ -35,7 +36,7 @@
3536
z-index: 10;
3637

3738
.panel-request {
38-
background-color: #212121;
39+
background-color: #17191b;
3940
box-shadow: none !important;
4041
}
4142

0 commit comments

Comments
 (0)