From 1177f4b29b616a59af39f4aef11b116f9660357d Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 01:28:46 +0200 Subject: Reorganizovao stranice i komponente. --- frontend/src/app/_pages/experiment/experiment.component.html | 1 + 1 file changed, 1 insertion(+) create mode 100644 frontend/src/app/_pages/experiment/experiment.component.html (limited to 'frontend/src/app/_pages/experiment/experiment.component.html') diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html new file mode 100644 index 00000000..bcecd284 --- /dev/null +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -0,0 +1 @@ +

experiment works!

-- cgit v1.2.3 From 036d29ecf68214704de77956a88cdb2af228f37b Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 23:16:45 +0200 Subject: Dodao folder komponentu, odradjeni tabovi i selekcija, ulazi i izlazi komponente, stil. --- .../src/app/_elements/folder/folder.component.css | 124 +++++++++++++++++++++ .../src/app/_elements/folder/folder.component.html | 69 +++++++++++- .../src/app/_elements/folder/folder.component.ts | 95 +++++++++++++++- .../app/_elements/playlist/playlist.component.css | 2 +- .../app/_elements/playlist/playlist.component.html | 6 +- .../_pages/experiment/experiment.component.html | 1 + frontend/src/app/app.component.html | 6 +- frontend/src/styles/helper.css | 12 +- frontend/src/styles/theme.css | 15 ++- 9 files changed, 315 insertions(+), 15 deletions(-) (limited to 'frontend/src/app/_pages/experiment/experiment.component.html') diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index e69de29b..cfb0d087 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -0,0 +1,124 @@ +#folder { + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +#tabs { + display: flex; + flex-direction: row; + align-items: flex-end; + height: 4rem; +} + +#tabs>.folder-tab:not(:first-child) { + margin-left: -5px; +} + +.folder-tab { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + position: relative; + overflow-x: hidden; + background-color: var(--ns-bg-dark-100); + height: 2.5rem; + border-color: var(--ns-primary); + border-style: solid; + border-width: 1px 1px 0 1px; +} + +.folder-tab:not(:first-child) { + margin-block-start: auto; + width: 4rem; +} + +.selected-tab { + height: 3rem; + background-color: var(--ns-primary); +} + +.hover-tab { + height: 3.2rem; +} + +.selected-tab, +.hover-tab { + width: fit-content !important; +} + +.tab-link { + color: var(--offwhite) !important; + text-decoration: none !important; + cursor: pointer; +} + +.tab-link:active { + color: var(--ns-accent) !important; +} + +.selected-tab { + background-color: var(--ns-primary); +} + +#searchbar { + height: 2.5rem; + background-color: var(--ns-bg-dark-100); + border-bottom: 1px solid var(--ns-primary); + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + width: 100%; +} + +.collapse-horizontal { + white-space: nowrap; + height: 2.5rem; + overflow-x: hidden; +} + +#search-options { + margin-left: auto; + margin-top: 7px; + display: flex; + flex-direction: row; + align-items: center; +} + +#selected-content { + background-color: var(--ns-bg-dark-50); + width: 100%; + height: 36rem; + backdrop-filter: blur(2px); + border-color: var(--ns-primary); + border-style: solid; + border-width: 1px 1px 1px 1px; + border-top-right-radius: 4px; +} + +#footer { + display: flex; + flex-direction: row; + justify-content: center; +} + +.folder-bottom-button { + font-size: large; + position: relative; + background-color: var(--ns-bg-dark-100); + width: 10rem; + height: 2.5rem; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + border-color: var(--ns-primary); + border-style: solid; + border-width: 0px 1px 1px 1px; +} + +.folder-bottom-button:hover { + background-color: var(--ns-primary); +} \ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index e4c376a7..455d43cc 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -1 +1,68 @@ -

folder works!

+
+
+ +
+ {{file.name}} +
+
+
+ + {{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}} +
+ +
\ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index c5ff3c45..34c8db82 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -1,4 +1,6 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; +import Model from 'src/app/_data/Model'; @Component({ selector: 'app-folder', @@ -7,9 +9,98 @@ import { Component, OnInit } from '@angular/core'; }) export class FolderComponent implements OnInit { - constructor() { } + @Input() folderName: string = 'Moji podaci'; + + @Input() files!: (Dataset | Model)[] + + newFile!: Dataset | Model; + + @Input() type: FolderType = FolderType.Dataset; + + newFileSelected: boolean = true; + + selectedFileIndex: number = -1; + hoveringOverFileIndex: number = -1; + + fileToDisplay?: (Dataset | Model); + + @Output() selectedFileChanged: EventEmitter<(Dataset | Model)> = new EventEmitter(); + + constructor() { + //PLACEHOLDER + this.files = [ + new Dataset('Titanik'), + new Dataset('Dijamanti'), + new Dataset('Filmovi'), + ] + } ngOnInit(): void { + if (this.files.length > 0) + this.selectFile(0); + else { + this.selectNewFile(); + } + } + + hoverOverFile(i: number) { + this.hoveringOverFileIndex = i; + if (i != -1) { + this.fileToDisplay = this.files[i]; + } else { + if (this.newFileSelected) { + this.fileToDisplay = this.newFile; + } else { + this.fileToDisplay = this.files[this.selectedFileIndex]; + } + } + } + + selectNewFile() { + if (!this.newFile) { + this.createNewFile(); + } + this.fileToDisplay = this.newFile; + this.selectedFileIndex = -1; + this.newFileSelected = true; + this.selectedFileChanged.emit(this.newFile); + } + + selectFile(index: number) { + this.selectedFileIndex = index; + this.fileToDisplay = this.files[index]; + this.newFileSelected = false; + this.selectedFileChanged.emit(this.files[index]); + } + + createNewFile() { + if (this.type == FolderType.Dataset) { + this.newFile = new Dataset(); + } else if (this.type == FolderType.Model) { + this.newFile = new Model(); + } + } + + saveNewFile() { + // TODO + } + + calcZIndex(i: number) { + let zIndex = (this.files.length - i - 1) + if (this.selectedFileIndex == i) + zIndex = this.files.length + 2; + if (this.hoveringOverFileIndex == i) + zIndex = this.files.length + 3; + return zIndex; + } + + newFileZIndex() { + return (this.files.length + 1); } } + +export enum FolderType { + Dataset, + Model +} diff --git a/frontend/src/app/_elements/playlist/playlist.component.css b/frontend/src/app/_elements/playlist/playlist.component.css index 83448e51..353a094c 100644 --- a/frontend/src/app/_elements/playlist/playlist.component.css +++ b/frontend/src/app/_elements/playlist/playlist.component.css @@ -13,7 +13,7 @@ .ns-cards { position: relative; width: 300%; - height: 26rem; + height: 25rem; margin-bottom: 20px; } diff --git a/frontend/src/app/_elements/playlist/playlist.component.html b/frontend/src/app/_elements/playlist/playlist.component.html index 97ebe6a5..b82de163 100644 --- a/frontend/src/app/_elements/playlist/playlist.component.html +++ b/frontend/src/app/_elements/playlist/playlist.component.html @@ -3,13 +3,13 @@
-
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index bcecd284..7f4e14ec 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -1 +1,2 @@

experiment works!

+ \ No newline at end of file diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 06416791..93c27eb8 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,9 +1,9 @@ - + - + - + pozadina diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index 58f00c20..9c520ac3 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -33,7 +33,7 @@ .footer-center>* { position: fixed; - bottom: 8%; + bottom: 15px; left: 50%; transform: translateX(-50%); } @@ -41,4 +41,14 @@ .row-height { white-space: nowrap; height: 1rem; +} + +.icon-double>*:nth-child(2) { + margin-left: -1rem; +} + +.no-wrap { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } \ No newline at end of file diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index 820f5a5a..d0ccc935 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -1,10 +1,11 @@ :root { - --ns-primary: #00a8e8; + --ns-primary: #0063AB; + --ns-accent: #00a8e8; --ns-bg: #003459; --ns-bg-light-30: rgba(0, 152, 189, 0.3); --ns-bg-dark-100: rgba(0, 65, 101, 1.0); --ns-bg-dark-50: rgba(0, 65, 101, 0.5); - --offwhite: #ebe6e6; + --offwhite: #dfd7d7; } body { @@ -16,7 +17,13 @@ body { background-color: var(--ns-bg-light-30) !important; } -.ns-bg-dark-50 {} +.ns-border-primary { + border: 1px solid var(--ns-primary); +} + +.ns-bg-dark-50 { + background-color: var(--ns-bg-dark-50) !important; +} .ns-bg-dark-100 { background-color: var(--ns-bg-dark-100) !important; @@ -27,5 +34,5 @@ a { } .text-offwhite { - color: var(--offwhite); + color: var(--offwhite) !important; } \ No newline at end of file -- cgit v1.2.3 From 9d9cab4488805993ff6f8134f1a31ba6930f8c5e Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Sun, 24 Apr 2022 02:45:18 +0200 Subject: Dodat navbar sa leve strane. Odradjen dizajn. Dodat poziv test funkcije po promeni steppera. --- .../app/_pages/experiment/experiment.component.css | 36 ++++++++++++++++++++ .../_pages/experiment/experiment.component.html | 39 ++++++++++++++++++++-- .../app/_pages/experiment/experiment.component.ts | 6 +++- 3 files changed, 78 insertions(+), 3 deletions(-) (limited to 'frontend/src/app/_pages/experiment/experiment.component.html') diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css index e69de29b..4b16b450 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.css +++ b/frontend/src/app/_pages/experiment/experiment.component.css @@ -0,0 +1,36 @@ +ul{ + list-style: none; +} +.navmenu{ + position: absolute; + background-color: var(--ns-bg-dark-50); + height: 100%; +} +.navmenuwrapper{ + position: relative; + top:40%; + transform: translateY(-50%); +} + + +mat-stepper{ + background-color: transparent; +} + +::ng-deep .mat-step-header .mat-step-icon .mat-step-content{ + background-color: white; + color:var(--ns-primary); + } +::ng-deep .mat-step-header .mat-step-icon{ + color:white; +} +::ng-deep .mat-step-header .mat-step-icon-state-done{ + background: var(--ns-primary); + color:var(--ns-primary) +} +::ng-deep .mat-step-header .mat-step-icon-state-done .label{ + color:var(--ns-primary) +} +.label{ + color: white; +} \ No newline at end of file diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 7f4e14ec..e0746d4a 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -1,2 +1,37 @@ -

experiment works!

- \ No newline at end of file + +
+ + + + + + + +
+ + + diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index 16de7351..f06a7c48 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; - +import { StepperSelectionEvent } from '@angular/cdk/stepper'; @Component({ selector: 'app-experiment', templateUrl: './experiment.component.html', @@ -12,4 +12,8 @@ export class ExperimentComponent implements OnInit { ngOnInit(): void { } + test(event:StepperSelectionEvent){ + console.log(event); + } + } -- cgit v1.2.3 From 8141381f7caefb7b14e02e7a19224c563db4df9b Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Sun, 24 Apr 2022 17:45:07 +0200 Subject: Omogucen rad navigacionom menija. --- .../src/app/_pages/experiment/experiment.component.html | 13 +++++++++++-- frontend/src/app/_pages/experiment/experiment.component.ts | 9 +++++++-- 2 files changed, 18 insertions(+), 4 deletions(-) (limited to 'frontend/src/app/_pages/experiment/experiment.component.html') diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index e0746d4a..2f1a86fd 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -1,9 +1,9 @@ - +