Merge pull request IPdotSetAF#33 from IPdotSetAF/31-animation-cleanup

31 animation cleanup

Author: IPdotSetAF

Frontend/src/animations/common-animations.ts

@@ -0,0 +1,8 @@
+import { animate, style, transition, trigger } from "@angular/animations";
+
+export const valueChangeAnim = trigger('valueChangeAnim', [
+    transition('* <=> *', [
+        animate('0.07s ease-out', style({ "border-color": "limegreen" })),
+        animate('0.07s ease-in', style({ "border-color": "var(--bs-border-color)" }))
+    ]),
+]);

Frontend/src/app/cs2ts/cs2ts.component.ts

@@ -2,27 +2,15 @@ import { AfterContentInit, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { debounceTime, Subject, takeLast, tap } from 'rxjs';
 import { CodeAreaComponent } from '../code-area/code-area.component';
-import { animate, style, transition, trigger } from '@angular/animations';
 import { Meta } from '@angular/platform-browser';
+import { valueChangeAnim } from '../../animations/common-animations';
 
 @Component({
   selector: 'app-cs2ts',
   standalone: true,
   imports: [FormsModule, CodeAreaComponent],
   templateUrl: './cs2ts.component.html',
-  animations: [
-    trigger('valueChangeAnim', [
-      transition('* <=> *', [
-        animate('0.07s ease-out', style({ "border-color": "limegreen" })),
-        animate('0.07s ease-in', style({ "border-color": "var(--bs-border-color)" }))
-      ]),
-    ])
-  ],
-  styles: `
-  .code-border{
-    border: 3px solid var(--bs-border-color);
-  }
-  `
+  animations: [valueChangeAnim]
 })
 export class Cs2tsComponent implements AfterContentInit {
   protected csCode: string = `public class a : b {

Frontend/src/app/md2html/md2html.component.html

@@ -36,7 +36,7 @@ <h2>Markdown to HTML Converter</h2>
                 <code-area innerStyle="min-height:500px;" [(code)]="htmlCode" language="markup" readonly="true" />
                 }
                 @else{
-                <div style="min-height:500px;" [innerHTML]="htmlCode"></div>
+                <div style="min-height:500px;" class="p-3" [innerHTML]="htmlCode"></div>
                 }
             </div>
             <br />

Frontend/src/app/md2html/md2html.component.ts

@@ -2,28 +2,16 @@ import { AfterContentInit, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { debounceTime, Subject, takeLast, tap } from 'rxjs';
 import { CodeAreaComponent } from '../code-area/code-area.component';
-import { animate, style, transition, trigger } from '@angular/animations';
 import { Meta } from '@angular/platform-browser';
 import { parse } from 'marked';
+import { valueChangeAnim } from '../../animations/common-animations';
 
 @Component({
   selector: 'app-md2html',
   standalone: true,
   imports: [FormsModule, CodeAreaComponent],
   templateUrl: './md2html.component.html',
-  animations: [
-    trigger('valueChangeAnim', [
-      transition('* <=> *', [
-        animate('0.07s ease-out', style({ "border-color": "limegreen" })),
-        animate('0.07s ease-in', style({ "border-color": "var(--bs-border-color)" }))
-      ]),
-    ])
-  ],
-  styles: `
-  .code-border{
-    border: 3px solid var(--bs-border-color);
-  }
-  `
+  animations: [valueChangeAnim]
 })
 export class Md2htmlComponent implements AfterContentInit {
   protected mdCode: string = `# Hello world

Frontend/src/app/mssql-scaffolder/mssql-scaffolder.component.ts

@@ -9,6 +9,7 @@ import { MssqlScaffolderService } from './mssql-scaffolder.service';
 import { Meta } from '@angular/platform-browser';
 import { GetColumnsResponse, GetSPReturnColumnsResponse, SPDefinition, SPParam } from './mssql-scaffolder.model';
 import { RouterLink } from '@angular/router';
+import { valueChangeAnim } from '../../animations/common-animations';
 import { forkJoin } from 'rxjs';
 
 @Component({
@@ -17,26 +18,16 @@ import { forkJoin } from 'rxjs';
   imports: [FormsModule, ReactiveFormsModule, CodeAreaComponent, RouterLink],
   templateUrl: './mssql-scaffolder.component.html',
   animations: [
+    valueChangeAnim,
     trigger('connection', [
       state("0", style({ "border-width": "3px", "border-color": "var(--bs-border-color)" })),
       state("1", style({ "border-width": "3px", "border-color": "var(--bs-warning)" })),
       state("2", style({ "border-width": "3px", "border-color": "limegreen" })),
       transition('* <=> *', [
         animate('0.1s ease-in-out'),
       ]),
-    ]),
-    trigger('valueChangeAnim', [
-      transition('* <=> *', [
-        animate('0.07s ease-out', style({ "border-color": "limegreen" })),
-        animate('0.07s ease-in', style({ "border-color": "var(--bs-border-color)" }))
-      ]),
     ])
-  ],
-  styles: `
-  .code-border{
-    border: 3px solid var(--bs-border-color);
-  }
-  `
+  ]
 })
 export class MssqlScaffolderComponent {
   protected dbSettings: FormGroup = new FormGroup<DbSetting>(
@@ -248,6 +239,7 @@ ${psc.length > 0 ? '}' : ''}
 ${rsc.length > 0 ? `public class ${sc.sp}Result {` : ''}
 ${rsc.join("\n")}
 ${rsc.length > 0 ? '}' : ''}`;
+
       this.codeFlip = !this.codeFlip;
     });
   }

Frontend/src/app/serialized-tool/serialized-tool.component.ts

@@ -7,32 +7,23 @@ import { Meta } from '@angular/platform-browser';
 import { parse as tomlParse, stringify as tomlStringify } from 'smol-toml';
 import { XMLParser as xmlParse, XMLBuilder as xmlStringify } from 'fast-xml-parser';
 import YAML from 'yamljs';
+import { valueChangeAnim } from '../../animations/common-animations';
 
 @Component({
   selector: 'app-serialized-tool',
   standalone: true,
   imports: [FormsModule, CodeAreaComponent],
   templateUrl: './serialized-tool.component.html',
   animations: [
-    trigger('valueChangeAnim', [
-      transition('* <=> *', [
-        animate('0.07s ease-out', style({ "border-color": "limegreen" })),
-        animate('0.07s ease-in', style({ "border-color": "var(--bs-border-color)" }))
-      ]),
-    ]),
+    valueChangeAnim,
     trigger('hasError', [
       state('true', style({ "border-color": "red" })),
       state('false', style({ "border-color": "var(--bs-border-color)" })),
       transition('* <=> *', [
         animate('0.2s ease-in-out')
       ]),
     ]),
-  ],
-  styles: `
-  .code-border{
-    border: 3px solid var(--bs-border-color);
-  }
-  `
+  ]
 })
 export class SerializedToolComponent implements AfterContentInit {
   protected fromCode: string = `{

Frontend/src/styles.css

@@ -41,6 +41,10 @@
     min-height: 100vh;
 }
 
+.code-border{
+    border: 3px solid var(--bs-border-color);
+}
+
 @keyframes gradient-move {
     0%{background-position:0% 50%}
     50%{background-position:100% 50%}