From 0907f23080e16af1813e9e445f26a44ed1dc7a5b Mon Sep 17 00:00:00 2001 From: Ivan Ljubisavljevic Date: Wed, 27 Apr 2022 20:53:22 +0200 Subject: Izmenjen izgled upload csv-a #116 --- .../src/app/_elements/folder/folder.component.css | 2 +- .../form-dataset/form-dataset.component.css | 23 +++++++++++++++++++--- .../form-dataset/form-dataset.component.html | 18 +++++++++++------ 3 files changed, 33 insertions(+), 10 deletions(-) (limited to 'frontend/src/app/_elements') diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index ce9b9fad..c90278d2 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -158,7 +158,7 @@ .file-content { width: 100%; - height: 100%; + height: 93%; position: relative; } diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.css b/frontend/src/app/_elements/form-dataset/form-dataset.component.css index 6b3e2bed..66be7f7d 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.css +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.css @@ -1,19 +1,36 @@ .folderBox { width: 100%; - height: 100%; + height: 90%; position: relative; } + +.file-container{ + margin-left: 3%; + margin-top: 3%; + margin-bottom: -50%; + width: 94%; + height: 500px; + border: 4px dotted white; + border-radius: 25px; +} +.file-container .file { + opacity: 0; + padding: 5rem; + width: 100%; + height: 100%; +} + .icon-display { position: absolute; - top: 50%; + top: 45%; left: 50%; transform: translate(-50%, -50%) scale(4); } .bottomBar { position: absolute; - bottom: 0%; + bottom: -6%; left: 5%; } diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.html b/frontend/src/app/_elements/form-dataset/form-dataset.component.html index 50a33583..afe1aeed 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html @@ -1,12 +1,18 @@
- upload - +
+ file_upload + + + - --> + + + +
-- cgit v1.2.3 From d28576bff04b0f5ea9a58037ffee7c4157aa2c61 Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Wed, 27 Apr 2022 20:55:31 +0200 Subject: Datat checkbox za izbor nasumicnih podataka i podvrdi dugme. Promenjen dizajn. --- .../column-table/column-table.component.css | 25 ++++++-- .../column-table/column-table.component.html | 70 ++++++++++++++-------- .../column-table/column-table.component.ts | 8 ++- .../_pages/experiment/experiment.component.html | 2 +- 4 files changed, 74 insertions(+), 31 deletions(-) (limited to 'frontend/src/app/_elements') diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index 0db50cdb..09aa2dff 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -31,13 +31,30 @@ table.fixed th:first-child { } mat-slider { - width: 300px; + width: 150px; + } .belowColumn { - background-color: var(--ns-bg-dark-50); + background-color: transparent; } .slider { - background-color: var(--ns-bg-dark-100); -} \ No newline at end of file + background-color: var(--ns-bg-dark-50); +} + +.bottom-button { + font-size: large; + position: relative; + background-color: var(--ns-primary); + width: 10rem; + height: 2.3rem; + border-color: var(--ns-primary); + border-style: solid; + border-width: 0px 1px 1px 1px; +} +#footer { + display: flex; + flex-direction: row; + justify-content: center; +} diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 55c07b87..67846116 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -111,34 +111,56 @@ -
+
-
-
{{testSetDistribution}}% : {{100-testSetDistribution}}%
-
Trening - Test
- +
+ +
{{testSetDistribution}}% : {{100-testSetDistribution}}%
+
Trening + + Test
+ +
+
+
+ Nasumicni redosled podataka +
-
- - Tip problema - - Regresioni - Binarni-Klasifikacioni - Multi-Klasifikacioni - - +
+ + + Tip problema + + Regresioni + Binarni-Klasifikacioni + Multi-Klasifikacioni + + + +
+
+ + + Izlazna kolona + + {{item.columnName}} + + +
-
- - Izlazna kolona - - {{item.columnName}} - - +
+
-
+
+ -
\ No newline at end of file diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts index 9cb038bc..e938abe4 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChildren } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core'; import Dataset from 'src/app/_data/Dataset'; import Experiment, { ColumnEncoding, Encoding, NullValReplacer, NullValueOptions } from 'src/app/_data/Experiment'; import { DatasetsService } from 'src/app/_services/datasets.service'; @@ -20,7 +20,7 @@ export class ColumnTableComponent implements AfterViewInit { @Input() dataset?: Dataset; @Input() experiment?: Experiment; @ViewChildren("nullValMenu") nullValMenus!: ElementRef[]; - + @Output() okPressed: EventEmitter = new EventEmitter(); Object = Object; Encoding = Encoding; NullValueOptions = NullValueOptions; @@ -204,5 +204,9 @@ export class ColumnTableComponent implements AfterViewInit { return (document.getElementById(columnName)).value; return '0'; } + ok() { + this.okPressed.emit(); + } + } diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 1606adf5..5206c5f2 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -28,7 +28,7 @@
- +
-- cgit v1.2.3 From ad3d99a96d240dbc6c3d3a725fb1ba177a4cb427 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Wed, 27 Apr 2022 22:14:13 +0200 Subject: Dodao tabove za razlicite tabele u column-table komponenti. --- .../column-table/column-table.component.css | 87 +++++- .../column-table/column-table.component.html | 307 +++++++++++++-------- .../column-table/column-table.component.ts | 82 ++++-- .../_elements/form-model/form-model.component.html | 2 - 4 files changed, 337 insertions(+), 141 deletions(-) (limited to 'frontend/src/app/_elements') diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index f40a3aff..4dfb32ee 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -44,7 +44,6 @@ table.fixed th:first-child { mat-slider { width: 150px; - } .belowColumn { @@ -65,13 +64,13 @@ mat-slider { border-style: solid; border-width: 0px 1px 1px 1px; } + #footer { display: flex; flex-direction: row; justify-content: center; } - #missingValuesHeader { font-size: 12px; line-height: 110% !important; @@ -119,3 +118,87 @@ table ::ng-deep .mat-form-field-wrapper { .graphic-class { background-color: white !important; } + + +/* TABS STYLE */ + +#folder-table { + border: 1px solid var(--ns-primary); + border-radius: 4px; +} + +#tabs { + display: flex; + flex-direction: row; + align-items: flex-end; + height: 3.2rem; +} + +#tabs>.folder-tab:not(:first-child) { + margin-left: -5px; +} + +.folder-tab-end { + margin-left: auto; + color: var(--offwhite) !important; + overflow: hidden; +} + +.folder-tab, +.folder-tab-end { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + position: relative; + overflow-x: hidden; + height: 2.5rem; + background-color: var(--ns-bg-dark-100); + border-color: var(--ns-primary); + color: var(--ns-primary); + border-style: solid; + border-width: 1px 1px 0 1px; +} + +.folder-tab:not(:first-child) { + margin-block-start: auto; +} + +.folder-tab { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.selected-tab { + height: 3rem; + background-color: var(--ns-primary); + color: var(--offwhite); +} + +.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 { + text-decoration: underline !important; +} + +.selected-tab { + background-color: var(--ns-primary); +} + +.hidden { + display: none; +} \ No newline at end of file diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 56b95c29..5f4412a1 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -1,38 +1,102 @@ - - - - - - - - - - - - - - - - - - -
Naziv -
- #{{i + 1}}  {{colInfo.columnName}} - -
-
Tip - - - Kategorijski - Numerički - - -
Grafik - - -
Statistika - +
+
+ + {{tab.name}} + +
+ +
+
+ +
+ +
+ + + + + + + + + + + + + +
# + #{{i + 1}}  {{colInfo.columnName}} + +
#{{i}} +
+ {{col}} +
+
+
+ +
+ + + + + + + + + + + + + +
Naziv + #{{i + 1}}  {{colInfo.columnName}} +
#{{i + 1}}  {{colInfo.columnName}} +
+ 0.1 +
+
+
+ +
+ + + + + + + + + + + + + + + + + + + - - - - - - - - + + + + + + + + - - - + + + + +
Naziv +
+ #{{i + 1}}  {{colInfo.columnName}} + +
+
Tip + + + Kategorijski + Numerički + + +
Grafik + + +
Statistika + Mean: {{colInfo.mean}}
Median: {{colInfo.median}}
Min: {{colInfo.min}}
@@ -42,119 +106,122 @@ Q3: {{colInfo.q3}}
--> -
- +
+ {{uniqueValue}}
 -
-
- Enkodiranje  - settings - - - - - {{ optionName }} - - - -
-
Regulisanje
nedostajućih
vrednosti
- settings - 		- -
+ Enkodiranje  + settings + + + + + {{ optionName }} + + + +
+
Regulisanje
nedostajućih
vrednosti
+ settings + 		+ + - - - - - + + + + + - - - - - + + + + + - + - - + + - - - + + + - - - - + + + + -
Vrednosti
+
+
+
- -
{{testSetDistribution}}% : {{100-testSetDistribution}}%
-
Trening + +
{{testSetDistribution}}% : {{100-testSetDistribution}}%
+
Trening Test
- +
- Nasumicni redosled podataka + Nasumicni redosled podataka
- - - Tip problema - - Regresioni - Binarni-Klasifikacioni - Multi-Klasifikacioni - - - + + + Tip problema + + Regresioni + Binarni-Klasifikacioni + Multi-Klasifikacioni + + +
- - - Izlazna kolona - - {{item.columnName}} - - - + + + Izlazna kolona + + {{item.columnName}} + + +
-
- - +
\ No newline at end of file diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts index c48bf869..137c383c 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -26,8 +26,8 @@ export class ColumnTableComponent implements AfterViewInit { tableData?: any[][]; nullValOption: string[] = []; - testSetDistribution:number=70; - constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) { + testSetDistribution: number = 70; + constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) { //ovo mi nece trebati jer primam dataset iz druge komponente } @@ -92,13 +92,13 @@ export class ColumnTableComponent implements AfterViewInit { } } openEncodingDialog() { - const dialogRef = this.dialog.open(EncodingDialogComponent, { - width: '300px' - }); - dialogRef.afterClosed().subscribe(selectedEncoding => { - if (selectedEncoding != undefined) - this.resetColumnEncodings(selectedEncoding); - }); + const dialogRef = this.dialog.open(EncodingDialogComponent, { + width: '300px' + }); + dialogRef.afterClosed().subscribe(selectedEncoding => { + if (selectedEncoding != undefined) + this.resetColumnEncodings(selectedEncoding); + }); } resetMissingValuesTreatment(selectedMissingValuesOption: NullValueOptions) { @@ -115,7 +115,7 @@ export class ColumnTableComponent implements AfterViewInit { }); this.nullValOption[i] = "Obriši kolonu"; } - } + } else if (selectedMissingValuesOption == NullValueOptions.DeleteRows) { this.experiment.nullValues = NullValueOptions.DeleteRows; this.experiment.nullValuesReplacers = []; @@ -135,12 +135,12 @@ export class ColumnTableComponent implements AfterViewInit { width: '400px' }); dialogRef.afterClosed().subscribe(selectedMissingValuesOption => { - if (selectedMissingValuesOption != undefined) + if (selectedMissingValuesOption != undefined) this.resetMissingValuesTreatment(selectedMissingValuesOption); }); } - updateTestSet(event:MatSliderChange){ - this.testSetDistribution=event.value!; + updateTestSet(event: MatSliderChange) { + this.testSetDistribution = event.value!; } @@ -160,7 +160,7 @@ export class ColumnTableComponent implements AfterViewInit { arrayElement.option = (replacementType == NullValueOptions.DeleteColumns) ? NullValueOptions.DeleteColumns : NullValueOptions.DeleteRows; arrayElement.value = ""; } - + this.nullValOption[index] = (replacementType == NullValueOptions.DeleteColumns) ? "Obriši kolonu" : "Obriši redove"; } } @@ -169,7 +169,7 @@ export class ColumnTableComponent implements AfterViewInit { if (this.experiment != undefined) { let fillValue = (event.currentTarget).value; let arrayElement = this.experiment.nullValuesReplacers.filter(x => x.column == columnName)[0]; - + if (arrayElement == undefined) { this.experiment.nullValuesReplacers.push({ column: columnName, @@ -195,4 +195,54 @@ export class ColumnTableComponent implements AfterViewInit { } -} + tabs = [ + new Tab(0, 'Podešavanja kolona', Table.Columns), + new Tab(1, 'Podaci', Table.Data), + new Tab(2, 'Korelaciona matrica', Table.CorrelationMatrix) + ] + + selectedTab: Tab = this.tabs[0]; + hoveringOverTab: (Tab | null) = null; + + tabToDisplay: Table = Table.Columns; + + selectTab(index: number) { + this.selectedTab = this.tabs[index]; + this.tabToDisplay = this.tabs[index].value; + } + + hoverOverTab(index: number) { + if (index < 0) { + this.hoveringOverTab = null; + this.tabToDisplay = this.selectedTab.value; + } else { + this.hoveringOverTab = this.tabs[index]; + this.tabToDisplay = this.tabs[index].value; + } + } + + calcZIndex(i: number) { + let zIndex = (this.tabs.length - i - 1) + if (this.selectedTab.index == i) + zIndex = this.tabs.length + 1; + if (this.hoveringOverTab?.index == i) + zIndex = this.tabs.length + 2; + return zIndex; + } + + Table = Table; +} + +export enum Table { + Columns, + Data, + CorrelationMatrix +} + +export class Tab { + constructor( + public index: number, + public name: string, + public value: Table + ) { } +} diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html index 396d40c6..4c5505f0 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -15,7 +15,6 @@ {{ optionName }} - @@ -104,7 +103,6 @@ -
-- cgit v1.2.3 From 9d5603c5e9b5b2a0d71cd72401fb7e0d91dc74c7 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Wed, 27 Apr 2022 23:17:18 +0200 Subject: Promenio layout za neke kolone tako da su responzivnije. --- .../column-table/column-table.component.html | 19 ++++++------ .../_elements/form-model/form-model.component.css | 34 ---------------------- frontend/src/styles/layout.css | 34 ++++++++++++++++++++++ 3 files changed, 43 insertions(+), 44 deletions(-) (limited to 'frontend/src/app/_elements') diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 5f4412a1..0c33786e 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -186,8 +186,8 @@
-
-
+
+
{{testSetDistribution}}% : {{100-testSetDistribution}}%
Trening @@ -195,14 +195,15 @@ Test
-
+
- Nasumicni redosled podataka + Nasumični redosled podataka
-
+
+
Tip problema @@ -211,19 +212,17 @@ Multi-Klasifikacioni -
-
- +
Izlazna kolona {{item.columnName}} -
-
+
+
+ +
+
+
+ + Aktivaciona funkcija svih slojeva + + + + {{ optionName }} + + +
+ +
+ + Broj Neurona svih slojeva + + +
+
+
+ + Regularizacija svih slojeva + + + {{ optionName }} + + + +
+ +
+ + Stopa regularizacije svih slojeva + + + {{ optionName }} + + + +
+ +
+ + +
@@ -124,7 +174,7 @@ -
{{newModel.layers[i].neurons}}
+
{{newModel.layers[i].neurons}}
diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts index c29fd0bb..062c380e 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -4,8 +4,7 @@ import Shared from 'src/app/Shared'; import Experiment from 'src/app/_data/Experiment'; import Model, { Layer, ActivationFunction, LossFunction, LearningRate, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType, Regularisation, RegularisationRate, BatchSize } from 'src/app/_data/Model'; import { GraphComponent } from '../graph/graph.component'; -import { FormGroupDirective, NgForm } from '@angular/forms'; -import { ErrorStateMatcher } from '@angular/material/core'; + @Component({ selector: 'app-form-model', @@ -104,4 +103,40 @@ export class FormModelComponent implements AfterViewInit { this.updateGraph(); } } + selectedActivation: ActivationFunction = ActivationFunction.Sigmoid; + selectedRegularisationRate: RegularisationRate = RegularisationRate.RR1; + selectedRegularisation: Regularisation = Regularisation.L1; + selectedNumberOfNeurons:number=1; + + changeAllActivation(){ + for(let i=0;i Date: Thu, 28 Apr 2022 01:11:34 +0200 Subject: Sredjen upload csv-a #116 --- .../_elements/datatable/datatable.component.html | 14 +++----- .../src/app/_elements/folder/folder.component.css | 2 +- .../form-dataset/form-dataset.component.css | 40 ++++++++++++++++++---- .../form-dataset/form-dataset.component.html | 23 +++++++++---- .../form-dataset/form-dataset.component.ts | 8 ++++- frontend/src/styles/helper.css | 7 +--- 6 files changed, 62 insertions(+), 32 deletions(-) (limited to 'frontend/src/app/_elements') diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html index fe359db0..17a187ef 100644 --- a/frontend/src/app/_elements/datatable/datatable.component.html +++ b/frontend/src/app/_elements/datatable/datatable.component.html @@ -1,4 +1,4 @@ -
+
@@ -22,15 +22,9 @@
- - - -
-
+ {{tableData.numRows - 11}} redova...
-
- - - +
+
+
+ {{tableData.numRows - 11}} redova...
diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index c90278d2..458e6b4f 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -158,7 +158,7 @@ .file-content { width: 100%; - height: 93%; + height: 92%; position: relative; } diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.css b/frontend/src/app/_elements/form-dataset/form-dataset.component.css index 66be7f7d..56eb3cef 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.css +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.css @@ -4,21 +4,47 @@ position: relative; } - .file-container{ + border: 4px solid transparent; + position: relative; margin-left: 3%; - margin-top: 3%; - margin-bottom: -50%; + margin-top: 3rem; width: 94%; - height: 500px; + min-height: 500px; +} +.fileButton{ + position: absolute; + margin-top: -3rem; + display: flex; + flex-direction: row; + align-items: center; +} +.fileButton label{ + margin-left: 10px; +} +.dottedClass +{ border: 4px dotted white; border-radius: 25px; } -.file-container .file { - opacity: 0; - padding: 5rem; + +.hidden{ + visibility: hidden; +} + +.file { + position: absolute; width: 100%; height: 100%; + opacity: 0; +} + +.file input{ + + border-radius: 4px; + margin-top: -15px; + width: 100%; + height: 100%; } .icon-display { diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.html b/frontend/src/app/_elements/form-dataset/form-dataset.component.html index afe1aeed..e0c7f288 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html @@ -1,11 +1,20 @@
-
-
- +
+ + file_upload + +
+ + +
+ + + + +
+
- file_upload -
@@ -33,8 +42,8 @@
- - +
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts index 9bdd7e14..254f5fe4 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Output, ViewChild } from '@angular/core'; +import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core'; import Dataset from 'src/app/_data/Dataset'; import { DatasetsService } from 'src/app/_services/datasets.service'; import { ModelsService } from 'src/app/_services/models.service'; @@ -29,9 +29,14 @@ export class FormDatasetComponent { tableData: TableData = new TableData(); + @ViewChild('fileInput') fileInput! : ElementRef + + filename: String; + constructor(private modelsService: ModelsService, private datasetsService: DatasetsService, private csv: CsvParseService) { this.dataset = new Dataset(); this.dataset.delimiter = ','; + this.filename = ""; } //@ViewChild('fileImportInput', { static: false }) fileImportInput: any; cemu je ovo sluzilo? @@ -45,6 +50,7 @@ export class FormDatasetComponent { else this.tableData.hasInput = true; + this.filename = this.files[0].name; this.tableData.loaded = false; this.update(); } diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index ef875069..76cb6204 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -29,14 +29,9 @@ .footer-center { position: relative; height: 1rem; + text-align: center; } -.footer-center>* { - position: fixed; - bottom: 15px; - left: 50%; - transform: translateX(-50%); -} .row-height { white-space: nowrap; -- cgit v1.2.3 From 6eb541aa0cf268c41bf8638b73bf764d717be80b Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Thu, 28 Apr 2022 01:22:42 +0200 Subject: Ispravio BUG sa stilom search bar-a u folderu. Smanjio visinu slojeva u form-model. Ispravio material temu. --- .../src/app/_elements/folder/folder.component.css | 4 ++ .../_elements/form-model/form-model.component.html | 11 ++++-- frontend/src/custom-theme.scss | 46 +++++++++++----------- frontend/src/styles/layout.css | 9 +++++ 4 files changed, 43 insertions(+), 27 deletions(-) (limited to 'frontend/src/app/_elements') diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index 458e6b4f..1ce4e6a3 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -64,6 +64,10 @@ background-color: var(--ns-primary); } +#search ::ng-deep .mat-form-field-wrapper { + margin-top: -2.1rem; +} + #searchbar { height: 2.5rem; background-color: var(--ns-bg-dark-100); diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html index 2a8d79a8..33ec85de 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -156,12 +156,15 @@
-
- #{{i+1}} -
+ - Aktivaciona funkcija + Aktivacija + {{ optionName }} diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss index 8f716240..e8626080 100644 --- a/frontend/src/custom-theme.scss +++ b/frontend/src/custom-theme.scss @@ -1,7 +1,7 @@ /** * Generated theme by Material Theme Generator * https://materialtheme.arcsine.dev -* Fork at: https://materialtheme.arcsine.dev/?c=YHBhbGV0dGU$YHByaW1hcnk$YF48IzAwNjNhYiIsIj9lcjwjYjNkMGU2IiwiO2VyPCMwMDQ3OTF$LCIlPmBePCMwMGE4ZTgiLCI~ZXI8I2IzZTVmOCIsIjtlcjwjMDA4ZGRlfiwid2Fybj5gXjwjZjliN2I3IiwiP2VyPCNmZGU5ZTkiLCI7ZXI8I2Y2OWY5Zn4sIj9UZXh0PCMwMDQxNjUiLCI~PTwjZGZkN2Q3IiwiO1RleHQ8I2RmZDdkNyIsIjs9PCMwMDQxNjV$LCJmb250cz5bYEA8KC00fixgQDwoLTN$LGBAPCgtMn4sYEA8KC0xfixgQDxoZWFkbGluZX4sYEA8dGl0bGV$LGBAPHN1YiktMn4sYEA8c3ViKS0xfixgQDxib2R5LTJ$LGBAPGJvZHktMX4sYEA8YnV0dG9ufixgQDxjYXB0aW9ufixgQDxpbnB1dCIsInNpemU$bnVsbH1dLCJpY29uczxGaWxsZWQiLCI~bmVzcz5mYWxzZSwidmVyc2lvbj4xM30= +* Fork at: https://materialtheme.arcsine.dev/?c=YHBhbGV0dGU$YHByaW1hcnk$YF48IzAwYThlOCIsIj9lcjwjYjNlNWY4IiwiO2VyPCMwMDhkZGV$LCIlPmBePCMwMDYzYWIiLCI~ZXI8I2IzZDBlNiIsIjtlcjwjMDA0Nzkxfiwid2Fybj5gXjwjZjliN2I3IiwiP2VyPCNmZGU5ZTkiLCI7ZXI8I2Y2OWY5Zn4sIj9UZXh0PCNkZmQ3ZDciLCI~PTwjMDAzNDU5IiwiO1RleHQ8I2RmZDdkNyIsIjs9PCMwMDM0NTl$LCJmb250cz5bYEA8KC00fixgQDwoLTN$LGBAPCgtMn4sYEA8KC0xfixgQDxoZWFkbGluZX4sYEA8dGl0bGV$LGBAPHN1YiktMn4sYEA8c3ViKS0xfixgQDxib2R5LTJ$LGBAPGJvZHktMX4sYEA8YnV0dG9ufixgQDxjYXB0aW9ufixgQDxpbnB1dCIsInNpemU$bnVsbH1dLCJpY29uczxGaWxsZWQiLCI~bmVzcz5mYWxzZSwidmVyc2lvbj4xM30= */ @use '@angular/material' as mat; @@ -25,7 +25,7 @@ caption: mat.define-typography-level(12px, 20px, 400, 'Roboto', 0.0333em), input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)); // Foreground Elements // Light Theme Text -$dark-text: #004165; +$dark-text: #dfd7d7; $dark-primary-text: rgba($dark-text, 0.87); $dark-accent-text: rgba($dark-primary-text, @@ -83,7 +83,7 @@ slider-off-active: rgba($light-text, 0.3), ); // Background config // Light bg -$light-background : #dfd7d7; +$light-background : #003459; $light-bg-darker-5 : darken($light-background, 5%); $light-bg-darker-10 : darken($light-background, @@ -94,11 +94,11 @@ $light-bg-darker-30 : darken($light-background, 30%); $light-bg-lighter-5 : lighten($light-background, 5%); -$dark-bg-tooltip : lighten(#004165, +$dark-bg-tooltip : lighten(#003459, 20%); -$dark-bg-alpha-4 : rgba(#004165, +$dark-bg-alpha-4 : rgba(#003459, 0.04); -$dark-bg-alpha-12 : rgba(#004165, +$dark-bg-alpha-12 : rgba(#003459, 0.12); $mat-light-theme-background: ( background : $light-background, status-bar : $light-bg-darker-20, @@ -117,7 +117,7 @@ unselected-chip : $light-bg-darker-10, disabled-list-option : $light-bg-darker-10, ); // Dark bg -$dark-background : #004165; +$dark-background : #003459; $dark-bg-lighter-5 : lighten($dark-background, 5%); $dark-bg-lighter-10 : lighten($dark-background, @@ -126,9 +126,9 @@ $dark-bg-lighter-20 : lighten($dark-background, 20%); $dark-bg-lighter-30 : lighten($dark-background, 30%); -$light-bg-alpha-4 : rgba(#dfd7d7, +$light-bg-alpha-4 : rgba(#003459, 0.04); -$light-bg-alpha-12 : rgba(#dfd7d7, +$light-bg-alpha-12 : rgba(#003459, 0.12); // Background palette for dark themes. $mat-dark-theme-background: ( background : $dark-background, @@ -151,36 +151,36 @@ disabled-list-option : $dark-bg-lighter-10, @include mat.core($fontConfig); // Theme Config body { - --primary-color: #0063ab; - --primary-lighter-color: #b3d0e6; - --primary-darker-color: #004791; + --primary-color: #00a8e8; + --primary-lighter-color: #b3e5f8; + --primary-darker-color: #008dde; --text-primary-color: #{$light-primary-text}; --text-primary-lighter-color: #{$dark-primary-text}; --text-primary-darker-color: #{$light-primary-text}; } -$mat-primary: ( main: #0063ab, -lighter: #b3d0e6, -darker: #004791, -200: #0063ab, // For slide toggle, +$mat-primary: ( main: #00a8e8, +lighter: #b3e5f8, +darker: #008dde, +200: #00a8e8, // For slide toggle, contrast: ( main: $light-primary-text, lighter: $dark-primary-text, darker: $light-primary-text, )); $theme-primary: mat.define-palette($mat-primary, main, lighter, darker); body { - --accent-color: #00a8e8; - --accent-lighter-color: #b3e5f8; - --accent-darker-color: #008dde; + --accent-color: #0063ab; + --accent-lighter-color: #b3d0e6; + --accent-darker-color: #004791; --text-accent-color: #{$light-primary-text}; --text-accent-lighter-color: #{$dark-primary-text}; --text-accent-darker-color: #{$light-primary-text}; } -$mat-accent: ( main: #00a8e8, -lighter: #b3e5f8, -darker: #008dde, -200: #00a8e8, // For slide toggle, +$mat-accent: ( main: #0063ab, +lighter: #b3d0e6, +darker: #004791, +200: #0063ab, // For slide toggle, contrast: ( main: $light-primary-text, lighter: $dark-primary-text, darker: $light-primary-text, )); $theme-accent: mat.define-palette($mat-accent, main, diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css index 9dd146b2..676bec32 100644 --- a/frontend/src/styles/layout.css +++ b/frontend/src/styles/layout.css @@ -49,4 +49,13 @@ body { .break-2 { display: none; } +} + +.center-center { + text-align: center; + margin-right: 10px; + padding-right: 10px; + padding-bottom: 15px; + font-size: 20px; + font-weight: 600; } \ No newline at end of file -- cgit v1.2.3