Skip to content

Commit 69ce370

Browse files
lyubov-voloshkolyubov-voloshko
committed
record view: crate components and data types-components map
1 parent b291314 commit 69ce370

78 files changed

Lines changed: 1714 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎frontend/src/app/components/ui-components/record-view-fields/base-record-view-field/base-record-view-field.component.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.field-display {
2+
position: relative;
3+
display: flex;
4+
align-items: center;
5+
}
6+
7+
.field-value {
8+
flex-grow: 1 0 auto;
9+
text-overflow: ellipsis;
10+
overflow: hidden;
11+
white-space: nowrap;
12+
}
13+
14+
.field-copy-button {
15+
position: absolute;
16+
right: -6px;
17+
top: 50%;
18+
background-color: var(--hover-color);
19+
transform: translate(0, -50%) scale(0.85);
20+
opacity: 0;
21+
transition: opacity 0.1s ease-in-out;
22+
}
23+
24+
.field-display:hover .field-copy-button {
25+
opacity: 1;
26+
}

‎frontend/src/app/components/ui-components/record-view-fields/base-record-view-field/base-record-view-field.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!-- Base template is empty, will be overridden by child components -->

‎frontend/src/app/components/ui-components/record-view-fields/base-record-view-field/base-record-view-field.component.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
2+
import { TableField, WidgetStructure } from 'src/app/models/table';
3+
4+
import { CommonModule } from '@angular/common';
5+
6+
@Component({
7+
selector: 'app-base-record-view-field',
8+
templateUrl: './base-record-view-field.component.html',
9+
styleUrls: ['./base-record-view-field.component.css'],
10+
imports: [CommonModule]
11+
})
12+
export class BaseRecordViewFieldComponent {
13+
@Input() key: string;
14+
@Input() value: any;
15+
@Input() structure: TableField;
16+
@Input() widgetStructure: WidgetStructure;
17+
// @Input() relations: TableForeignKey;
18+
19+
@Output() onCopyToClipboard = new EventEmitter<string>();
20+
}

‎frontend/src/app/components/ui-components/record-view-fields/binary-data-caption/binary-data-caption.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="field-display">
2+
<span class="field-value">{{value || '—'}}</span>
3+
</div>

‎frontend/src/app/components/ui-components/record-view-fields/binary-data-caption/binary-data-caption.component.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { CommonModule } from '@angular/common';
2+
import { Component, Injectable } from '@angular/core';
3+
import { MatButtonModule } from '@angular/material/button';
4+
import { MatIconModule } from '@angular/material/icon';
5+
import { MatTooltipModule } from '@angular/material/tooltip';
6+
import { BaseRecordViewFieldComponent } from '../base-record-view-field/base-record-view-field.component';
7+
8+
@Injectable()
9+
@Component({
10+
selector: 'app-binary-data-caption-display',
11+
templateUrl: './binary-data-caption.component.html',
12+
styleUrls: ['../base-record-view-field/base-record-view-field.component.css', './binary-data-caption.component.css'],
13+
imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule]
14+
})
15+
export class BinaryDataCaptionRecordViewComponent extends BaseRecordViewFieldComponent {
16+
}

‎frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.boolean-icon {
2+
transform: scale(0.85);
3+
}
4+
5+
@media (prefers-color-scheme: light) {
6+
.boolean-icon-true {
7+
color: #1B5E20;
8+
}
9+
10+
.boolean-icon-false {
11+
color: #B71C1C;
12+
}
13+
}
14+
15+
@media (prefers-color-scheme: dark) {
16+
.boolean-icon-true {
17+
color: #4CAF50;
18+
}
19+
20+
.boolean-icon-false {
21+
color: #E53935;
22+
}
23+
}
24+
25+
26+
27+

‎frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="field-display">
2+
<div class="field-value">
3+
<mat-icon *ngIf="value === true" class="boolean-icon boolean-icon-true">check_small</mat-icon>
4+
<mat-icon *ngIf="value === false" class="boolean-icon boolean-icon-false">close_small</mat-icon>
5+
<span *ngIf="value !== true && value !== false">—</span>
6+
</div>
7+
</div>

‎frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Component, Injectable } from '@angular/core';
2+
3+
4+
import { ClipboardModule } from '@angular/cdk/clipboard';
5+
import { CommonModule } from '@angular/common';
6+
import { MatButtonModule } from '@angular/material/button';
7+
import { MatIconModule } from '@angular/material/icon';
8+
import { MatTooltipModule } from '@angular/material/tooltip';
9+
import { BaseRecordViewFieldComponent } from '../base-record-view-field/base-record-view-field.component';
10+
11+
@Injectable()
12+
@Component({
13+
selector: 'app-display-boolean',
14+
templateUrl: './boolean.component.html',
15+
styleUrls: ['../base-record-view-field/base-record-view-field.component.css', './boolean.component.css'],
16+
imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule, CommonModule]
17+
})
18+
export class BooleanRecordViewComponent extends BaseRecordViewFieldComponent {
19+
}

‎frontend/src/app/components/ui-components/record-view-fields/code/code.component.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.field-value {
2+
background-color: #EAEAFF;
3+
border-radius: 4px;
4+
font-family: monospace;
5+
padding: 0 8px;
6+
}
7+
8+
@media (prefers-color-scheme: dark) {
9+
.field-value {
10+
background-color: #2C2C54;
11+
}
12+
}

‎frontend/src/app/components/ui-components/record-view-fields/code/code.component.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div class="field-display">
2+
<span class="field-value">{{value || '—'}}</span>
3+
<button type="button" mat-icon-button
4+
class="field-copy-button"
5+
matTooltip="Copy"
6+
[cdkCopyToClipboard]="value"
7+
(cdkCopyToClipboardCopied)="onCopyToClipboard.emit('Field value was copied to clipboard.')"
8+
(click)="$event.stopPropagation()">
9+
<mat-icon>content_copy</mat-icon>
10+
</button>
11+
</div>

0 commit comments

Comments
 (0)