diff --git a/src/app/entity-data/entity-data.component.css b/src/app/entity-data/entity-data.component.css index e69de29..5a7288b 100644 --- a/src/app/entity-data/entity-data.component.css +++ b/src/app/entity-data/entity-data.component.css @@ -0,0 +1,18 @@ +.heading { + display: flex; + position: inherit; + margin-bottom: 0.25rem; +} + +.heading button { + padding: 0.25rem; + min-width: 0; + position: absolute; + right: 0; + top: 0; +} + +.heading h2 { + width: 100%; + text-align: center; +} diff --git a/src/app/entity-data/entity-data.component.html b/src/app/entity-data/entity-data.component.html index 6966270..1bea529 100644 --- a/src/app/entity-data/entity-data.component.html +++ b/src/app/entity-data/entity-data.component.html @@ -1,4 +1,11 @@ +
+

entity {{ent_index}} - {{basemodel.ent_type}}

+ +

Name

@@ -8,12 +15,6 @@

Uniqe ID

-
@@ -58,4 +59,4 @@
-
\ No newline at end of file + diff --git a/src/app/entity-data/entity-data.component.ts b/src/app/entity-data/entity-data.component.ts index 9118c6a..7bca260 100644 --- a/src/app/entity-data/entity-data.component.ts +++ b/src/app/entity-data/entity-data.component.ts @@ -11,6 +11,8 @@ export class EntityDataComponent { @Input() entity_type: number = 1; @Input() basemodel!: MQTTEntity; @Input() created: boolean = false; + @Input() ent_index: number = 0; + @ViewChild('nameinput') nameinput!: any; constructor(public generatorService: GeneratorService) { if (generatorService.selected_entity) { diff --git a/src/app/generator/generator.component.css b/src/app/generator/generator.component.css index 1b35e87..2336ade 100644 --- a/src/app/generator/generator.component.css +++ b/src/app/generator/generator.component.css @@ -9,12 +9,13 @@ .outContainer { background: #9d9d9d; border-radius: 1rem; - padding: 1rem 0.8rem; + padding: 0.75rem; gap: 1rem; } .genContainer { grid-column: 1; + position: relative; } .outContainer { diff --git a/src/app/generator/generator.component.html b/src/app/generator/generator.component.html index 3dced6c..46ae0ab 100644 --- a/src/app/generator/generator.component.html +++ b/src/app/generator/generator.component.html @@ -67,8 +67,8 @@ - - + + \ No newline at end of file diff --git a/src/app/generator/generator.component.ts b/src/app/generator/generator.component.ts index 4bb234d..31d613e 100644 --- a/src/app/generator/generator.component.ts +++ b/src/app/generator/generator.component.ts @@ -23,7 +23,7 @@ export class GeneratorComponent { device: MQTTDevice = this.generatorService.device; get created_entities(): MQTTEntity[] { - return Array.from(this.generatorService.created_enteties).reverse(); + return Array.from(this.generatorService.created_enteties); } get codeSpan(): string { diff --git a/src/app/output/output.component.css b/src/app/output/output.component.css index 3124112..a10880b 100644 --- a/src/app/output/output.component.css +++ b/src/app/output/output.component.css @@ -1,5 +1,5 @@ pre { - max-width: calc(50vw - 1rem); + max-width: calc(50vw - 3rem); overflow-x: scroll; text-wrap: nowrap; } diff --git a/src/styles.css b/src/styles.css index 93abd2c..5b778e2 100644 --- a/src/styles.css +++ b/src/styles.css @@ -5,9 +5,11 @@ :root { --accent: #4cb926; - --text: #535353; + --text: #3d3d3d; --primary: #b3b3b3; --secondary: #f8f8f8; + --placeholder: #777; + --input_bg: #b3b3b3; } input, @@ -35,13 +37,13 @@ span { } input::placeholder { - color: var(--text); + color: var(--placeholder); opacity: 1; } input::-ms-input-placeholder { /* Edge 12 -18 */ - color: var(--text); + color: var(--placeholder); } svg { @@ -62,10 +64,6 @@ button { min-width: 4rem; } -.randomButton { - @apply flex justify-center content-center p-1; -} - button path { color: var(--secondary); } @@ -90,7 +88,7 @@ div.property { } .property span { - background: #b3b3b3; + background: var(--input_bg); padding: 0.25rem 0.75rem; border-radius: 1rem; /* width: 100%; */ @@ -98,12 +96,12 @@ div.property { #entityPlaceholder { background: transparent; - border: 2px dotted #b3b3b3; - color: #b3b3b3; + border: 2px dotted var(--input_bg); + color: var(--input_bg); font-weight: normal; } #entityPlaceholder:hover { - border-color: #f8f8f8; - color: #f8f8f8; + border-color: var(--secondary); + color: var(--secondary); }