From 9f7be75f420a71626bf62353b94350eefb0a2f4a Mon Sep 17 00:00:00 2001 From: IPdotSetAF Date: Tue, 26 Nov 2024 17:10:23 +0330 Subject: [PATCH 1/3] cleaned up style --- Frontend/src/app/cs2ts/cs2ts.component.ts | 7 +------ Frontend/src/app/md2html/md2html.component.ts | 7 +------ .../src/app/mssql-scaffolder/mssql-scaffolder.component.ts | 7 +------ .../src/app/serialized-tool/serialized-tool.component.ts | 7 +------ Frontend/src/styles.css | 4 ++++ 5 files changed, 8 insertions(+), 24 deletions(-) diff --git a/Frontend/src/app/cs2ts/cs2ts.component.ts b/Frontend/src/app/cs2ts/cs2ts.component.ts index 274917d..de2fd8f 100644 --- a/Frontend/src/app/cs2ts/cs2ts.component.ts +++ b/Frontend/src/app/cs2ts/cs2ts.component.ts @@ -17,12 +17,7 @@ import { Meta } from '@angular/platform-browser'; animate('0.07s ease-in', style({ "border-color": "var(--bs-border-color)" })) ]), ]) - ], - styles: ` - .code-border{ - border: 3px solid var(--bs-border-color); - } - ` + ] }) export class Cs2tsComponent implements AfterContentInit { protected csCode: string = `public class a : b { diff --git a/Frontend/src/app/md2html/md2html.component.ts b/Frontend/src/app/md2html/md2html.component.ts index 294f6f6..1b84109 100644 --- a/Frontend/src/app/md2html/md2html.component.ts +++ b/Frontend/src/app/md2html/md2html.component.ts @@ -18,12 +18,7 @@ import { parse } from 'marked'; animate('0.07s ease-in', style({ "border-color": "var(--bs-border-color)" })) ]), ]) - ], - styles: ` - .code-border{ - border: 3px solid var(--bs-border-color); - } - ` + ] }) export class Md2htmlComponent implements AfterContentInit { protected mdCode: string = `# Hello world diff --git a/Frontend/src/app/mssql-scaffolder/mssql-scaffolder.component.ts b/Frontend/src/app/mssql-scaffolder/mssql-scaffolder.component.ts index f72fc21..11af9dc 100644 --- a/Frontend/src/app/mssql-scaffolder/mssql-scaffolder.component.ts +++ b/Frontend/src/app/mssql-scaffolder/mssql-scaffolder.component.ts @@ -30,12 +30,7 @@ import { RouterLink } from '@angular/router'; 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( diff --git a/Frontend/src/app/serialized-tool/serialized-tool.component.ts b/Frontend/src/app/serialized-tool/serialized-tool.component.ts index bf5739a..b4d4c5f 100644 --- a/Frontend/src/app/serialized-tool/serialized-tool.component.ts +++ b/Frontend/src/app/serialized-tool/serialized-tool.component.ts @@ -27,12 +27,7 @@ import YAML from 'yamljs'; animate('0.2s ease-in-out') ]), ]), - ], - styles: ` - .code-border{ - border: 3px solid var(--bs-border-color); - } - ` + ] }) export class SerializedToolComponent implements AfterContentInit { protected fromCode: string = `{ diff --git a/Frontend/src/styles.css b/Frontend/src/styles.css index 0c39f04..12ef125 100644 --- a/Frontend/src/styles.css +++ b/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%} From ee62aaa250f0543ce12ff741621be465da9ba3c9 Mon Sep 17 00:00:00 2001 From: IPdotSetAF Date: Tue, 26 Nov 2024 17:33:34 +0330 Subject: [PATCH 2/3] separated common animation --- Frontend/src/animations/common-animations.ts | 8 ++++++++ Frontend/src/app/cs2ts/cs2ts.component.ts | 11 ++--------- Frontend/src/app/md2html/md2html.component.ts | 11 ++--------- .../mssql-scaffolder.component.ts | 18 +++++++----------- .../serialized-tool.component.ts | 8 ++------ 5 files changed, 21 insertions(+), 35 deletions(-) create mode 100644 Frontend/src/animations/common-animations.ts diff --git a/Frontend/src/animations/common-animations.ts b/Frontend/src/animations/common-animations.ts new file mode 100644 index 0000000..04afeee --- /dev/null +++ b/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)" })) + ]), +]); \ No newline at end of file diff --git a/Frontend/src/app/cs2ts/cs2ts.component.ts b/Frontend/src/app/cs2ts/cs2ts.component.ts index de2fd8f..38ba102 100644 --- a/Frontend/src/app/cs2ts/cs2ts.component.ts +++ b/Frontend/src/app/cs2ts/cs2ts.component.ts @@ -2,22 +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)" })) - ]), - ]) - ] + animations: [valueChangeAnim] }) export class Cs2tsComponent implements AfterContentInit { protected csCode: string = `public class a : b { diff --git a/Frontend/src/app/md2html/md2html.component.ts b/Frontend/src/app/md2html/md2html.component.ts index 1b84109..29156ce 100644 --- a/Frontend/src/app/md2html/md2html.component.ts +++ b/Frontend/src/app/md2html/md2html.component.ts @@ -2,23 +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)" })) - ]), - ]) - ] + animations: [valueChangeAnim] }) export class Md2htmlComponent implements AfterContentInit { protected mdCode: string = `# Hello world diff --git a/Frontend/src/app/mssql-scaffolder/mssql-scaffolder.component.ts b/Frontend/src/app/mssql-scaffolder/mssql-scaffolder.component.ts index 11af9dc..e953efa 100644 --- a/Frontend/src/app/mssql-scaffolder/mssql-scaffolder.component.ts +++ b/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, GetSPParametersResponse, GetSPReturnColumnsResponse } from './mssql-scaffolder.model'; import { RouterLink } from '@angular/router'; +import { valueChangeAnim } from '../../animations/common-animations'; @Component({ selector: 'app-mssql-scaffolder', @@ -16,6 +17,7 @@ import { RouterLink } from '@angular/router'; 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)" })), @@ -23,12 +25,6 @@ import { RouterLink } from '@angular/router'; 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)" })) - ]), ]) ] }) @@ -215,18 +211,18 @@ ${res.map((p) => `\tpublic ${MssqlScaffolderComponent.convertDataType(p.DataType ps = ps as GetSPParametersResponse[]; this.scaffolder.getSPReturnColumns(this.connectionID, sc.database, sc.schema, sc.sp).subscribe(rs => { rs = rs as GetSPReturnColumnsResponse[]; - + const psc = ps.map((p) => `\tpublic ${MssqlScaffolderComponent.convertDataType(p.Type)}${p.Nullable ? '?' : ''} ${p.Parameter_name} { get; set; }`); const rsc = rs.map((p) => `\tpublic ${MssqlScaffolderComponent.convertDataType(p.system_type_name)}${p.Nullable ? '?' : ''} ${p.column} { get; set; }`); this.csCode = -`${psc.length > 0 ? `public class ${sc.sp}Params {`:'' } + `${psc.length > 0 ? `public class ${sc.sp}Params {` : ''} ${psc.join("\n")} -${psc.length > 0 ? '}':'' } +${psc.length > 0 ? '}' : ''} -${rsc.length>0? `public class ${sc.sp}Result {`:'' } +${rsc.length > 0 ? `public class ${sc.sp}Result {` : ''} ${rsc.join("\n")} -${rsc.length > 0 ? '}':'' }`; +${rsc.length > 0 ? '}' : ''}`; this.codeFlip = !this.codeFlip; }); }); diff --git a/Frontend/src/app/serialized-tool/serialized-tool.component.ts b/Frontend/src/app/serialized-tool/serialized-tool.component.ts index b4d4c5f..dc177a7 100644 --- a/Frontend/src/app/serialized-tool/serialized-tool.component.ts +++ b/Frontend/src/app/serialized-tool/serialized-tool.component.ts @@ -7,6 +7,7 @@ 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', @@ -14,12 +15,7 @@ import YAML from 'yamljs'; 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)" })), From df725a4e63ae41fcef8052d0aee16133750c8506 Mon Sep 17 00:00:00 2001 From: IPdotSetAF Date: Tue, 26 Nov 2024 17:35:14 +0330 Subject: [PATCH 3/3] added padding to md2html --- Frontend/src/app/md2html/md2html.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Frontend/src/app/md2html/md2html.component.html b/Frontend/src/app/md2html/md2html.component.html index 418c217..6e7f706 100644 --- a/Frontend/src/app/md2html/md2html.component.html +++ b/Frontend/src/app/md2html/md2html.component.html @@ -36,7 +36,7 @@

Markdown to HTML Converter

} @else{ -
+
}