From a5e467a078f6d1306c2cb4aecfd650182c7d64c1 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 19:07:14 +0200 Subject: Promenio app component tako da strane mogu da zauzimaju ceo ekran a ne samo sredinu. --- frontend/src/app/_elements/folder/folder.component.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 frontend/src/app/_elements/folder/folder.component.ts (limited to 'frontend/src/app/_elements/folder/folder.component.ts') diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts new file mode 100644 index 00000000..c5ff3c45 --- /dev/null +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-folder', + templateUrl: './folder.component.html', + styleUrls: ['./folder.component.css'] +}) +export class FolderComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} -- 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/_elements/folder/folder.component.ts') 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 8497bc988f2a5cbca10ee6870708bd4c06c24dd2 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sun, 24 Apr 2022 21:47:00 +0200 Subject: Promenio temu material-a tako da se poklapa sa nasom temom. Dodao responzivnost za eksperiment stranu. --- frontend/angular.json | 216 ++++++++--------- .../src/app/_elements/folder/folder.component.css | 4 +- .../src/app/_elements/folder/folder.component.html | 4 +- .../src/app/_elements/folder/folder.component.ts | 1 - .../src/app/_elements/navbar/navbar.component.html | 2 +- .../app/_pages/experiment/experiment.component.css | 47 ++-- .../_pages/experiment/experiment.component.html | 83 ++++--- .../app/_pages/experiment/experiment.component.ts | 16 +- frontend/src/app/app.component.html | 6 +- frontend/src/app/app.component.ts | 18 +- frontend/src/custom-theme.scss | 267 +++++++++++++++++++-- frontend/src/styles/layout.css | 5 + frontend/src/styles/theme.css | 18 ++ 13 files changed, 452 insertions(+), 235 deletions(-) (limited to 'frontend/src/app/_elements/folder/folder.component.ts') diff --git a/frontend/angular.json b/frontend/angular.json index d1983d31..13c27f40 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -1,117 +1,113 @@ { - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "frontend": { - "projectType": "application", - "schematics": { - "@schematics/angular:application": { - "strict": true - } - }, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/frontend", - "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.app.json", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/custom-theme.scss", - "node_modules/bootstrap/dist/css/bootstrap.min.css", - "src/styles.css", - "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css" - ], - "scripts": [ - "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" - ] - }, - "configurations": { - "production": { - "budgets": [ - { - "type": "initial", - "maximumWarning": "2mb", - "maximumError": "4mb" - }, - { - "type": "anyComponentStyle", - "maximumWarning": "10kb", - "maximumError": "15kb" - } - ], - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "frontend": { + "projectType": "application", + "schematics": { + "@schematics/angular:application": { + "strict": true } - ], - "outputHashing": "all" }, - "development": { - "buildOptimizer": false, - "optimization": false, - "vendorChunk": true, - "extractLicenses": false, - "sourceMap": true, - "namedChunks": true - } - }, - "defaultConfiguration": "production" - }, - "serve": { - "builder": "@angular-devkit/build-angular:dev-server", - "configurations": { - "production": { - "browserTarget": "frontend:build:production" - }, - "development": { - "browserTarget": "frontend:build:development" + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/frontend", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.app.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "node_modules/bootstrap/dist/css/bootstrap.min.css", + "src/styles.css", + "src/custom-theme.scss" + ], + "scripts": [ + "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" + ] + }, + "configurations": { + "production": { + "budgets": [{ + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "4mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "10kb", + "maximumError": "15kb" + } + ], + "fileReplacements": [{ + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + }], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "browserTarget": "frontend:build:production" + }, + "development": { + "browserTarget": "frontend:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "frontend:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", + "src/styles.css" + ], + "scripts": [] + } + } } - }, - "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "frontend:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", - "src/styles.css" - ], - "scripts": [] - } } - } - } - }, - "defaultProject": "frontend", - "cli": { - "warnings": { - "versionMismatch": false + }, + "defaultProject": "frontend", + "cli": { + "warnings": { + "versionMismatch": false + } } - } } \ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index cfb0d087..a1c1124a 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -55,7 +55,7 @@ } .tab-link:active { - color: var(--ns-accent) !important; + text-decoration: underline !important; } .selected-tab { @@ -107,7 +107,7 @@ .folder-bottom-button { font-size: large; position: relative; - background-color: var(--ns-bg-dark-100); + background-color: var(--ns-bg-dark-50); width: 10rem; height: 2.5rem; display: flex; diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index 11fccc56..895ac84e 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -51,13 +51,13 @@ {{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}}