diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html index a152d55..4cf882f 100644 --- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html +++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html @@ -1,19 +1,43 @@
- -
- - -
+ + +
- + + + +
+
+ + +
diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss new file mode 100644 index 0000000..51ee03e --- /dev/null +++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss @@ -0,0 +1,82 @@ +@use '../../src/styles/variables'; + +.dropdown { + .dropdown-button { + padding: 10px; + position: relative; + right: 0; + top: 0; + + cursor: pointer; + + + } + + &:hover { + .dropdown-item { + display: block; + } + } + + .dropdown-item { + display: none; + background: white; + padding: 12px; + cursor: pointer; + + + &:hover { + background: #dedede; + color: #222; + } + } +} + +.chips-listing { + display: flex; +} + +.filter-group { + + + .search { + display: flex; + min-height: 42px; + max-height: 42px; + padding: var(--Spacing-Spacing-30, 12px) var(--Spacing-Spacing-40, 16px); + align-items: center; + gap: var(--Spacing-Spacing-20, 8px); + align-self: stretch; + } + + .chips-listing { + margin-top: 16px; + border-radius: 4px; + background: variables.$csc-filters-box-color; + width: 100%; + height: 400px; + padding: 12px; + + .chips-column { + padding-right: 10px; + width: 210px; + } + + + .chips { + background: variables.$csc-chips-bg-color; + color: white; + border: solid 1px variables.$csc-chips-bg-color; + width: 100%; + border-radius: 20px; + margin-bottom: 10px; + display: flex; + padding: 8px 10px 10px 12px; + justify-content: center; + align-items: center; + gap: 5px; + align-self: stretch; + padding-right: 10px; + } + } +} diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts index 262e14d..20f1bac 100644 --- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts +++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts @@ -1,10 +1,13 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; +import {MultiSelector} from '../../inputs/multi-selector/multi-selector'; @Component({ selector: 'sae-filters-group', - imports: [], + imports: [ + MultiSelector + ], templateUrl: './filters-group.html', - styleUrl: './filters-group.css' + styleUrl: './filters-group.scss' }) export class FiltersGroup { diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.css b/my-workspace/projects/sae-lib/forms/login-form/login-form.css similarity index 100% rename from my-workspace/projects/sae-lib/filters/filters-group/filters-group.css rename to my-workspace/projects/sae-lib/forms/login-form/login-form.css diff --git a/my-workspace/projects/sae-lib/forms/login-form/login-form.html b/my-workspace/projects/sae-lib/forms/login-form/login-form.html new file mode 100644 index 0000000..d189308 --- /dev/null +++ b/my-workspace/projects/sae-lib/forms/login-form/login-form.html @@ -0,0 +1 @@ +

login-form works!

diff --git a/my-workspace/projects/sae-lib/forms/login-form/login-form.spec.ts b/my-workspace/projects/sae-lib/forms/login-form/login-form.spec.ts new file mode 100644 index 0000000..4aba92a --- /dev/null +++ b/my-workspace/projects/sae-lib/forms/login-form/login-form.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoginForm } from './login-form'; + +describe('LoginForm', () => { + let component: LoginForm; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [LoginForm] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LoginForm); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/my-workspace/projects/sae-lib/forms/login-form/login-form.ts b/my-workspace/projects/sae-lib/forms/login-form/login-form.ts new file mode 100644 index 0000000..5eab44f --- /dev/null +++ b/my-workspace/projects/sae-lib/forms/login-form/login-form.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sae-login-form', + imports: [], + templateUrl: './login-form.html', + styleUrl: './login-form.css' +}) +export class LoginForm { + +} diff --git a/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.html b/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.html index 524f858..a54f65b 100644 --- a/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.html +++ b/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.html @@ -3,16 +3,32 @@
- - - +
+ + + @if (fromText.length > 0) { + + } + + + +
- - +
+ @if (toText.length > 0) { + + } + +
diff --git a/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.scss b/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.scss new file mode 100644 index 0000000..2f38b6a --- /dev/null +++ b/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.scss @@ -0,0 +1,65 @@ +@use '../../src/styles/variables'; + +:host { + textarea { + width: 100%; + height: 236px; + flex-shrink: 0; + border-radius: 4px; + background: #FFF; + box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05); + border-width: 0; + + color: variables.$csc-textarea-color; + + padding: 16px 42px 16px 16px; + + color: #1B1D27; + font-family: Barlow; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 140%; /* 22.4px */ + + + } + + .textarea-placeholder { + color: variables.$csc-textarea-placeholder-color; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 140%; + } +} + +#fromText { + + + textarea { + } +} + +button.is-outlined { + display: inline-flex; + height: 34px; + padding: var(--Spacing-Spacing-10, 4px) var(--Spacing-Spacing-30, 12px) var(--Spacing-Spacing-10, 4px) var(--Spacing-Spacing-20, 8px); + justify-content: center; + align-items: center; + flex-shrink: 0; + color: #255B8E; + border-radius: 8px; + border: 1px solid var(--color-text-title, #255B8E); + background: var(--color-background-card-on-base, #FFF); + left: 16px; + top: -50px; + position: relative; + + i { + margin-right: 4px; + } +} + +#fileUploadTranslator { + display: none; +} diff --git a/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.ts b/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.ts index 04a4727..9cfe7a3 100644 --- a/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.ts +++ b/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.ts @@ -6,7 +6,7 @@ import {FormsModule} from '@angular/forms'; standalone: true, imports: [FormsModule], templateUrl: './translate-texts.html', - styleUrl: './translate-texts.css' + styleUrl: './translate-texts.scss' }) export class TranslateTexts { public fromText: string = '' @@ -15,4 +15,14 @@ export class TranslateTexts { emptyText(someText: 'fromText' | 'toText') { this[someText] = ''; } + + onFileSelected($event: Event) { + + } + + clickFileUpload(fileUpload: HTMLInputElement) { + + fileUpload.click(); + + } } diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html new file mode 100644 index 0000000..1329a80 --- /dev/null +++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html @@ -0,0 +1,33 @@ + +
+ + + +
+
+ + + +
+
+ +
+ +
+
+
+ +
+
+ choix 1 +
+
+
+
+ choix 2 +
+
+
+
+
+
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss new file mode 100644 index 0000000..16a0347 --- /dev/null +++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss @@ -0,0 +1,29 @@ +@use '../../src/styles/variables'; + +.input-box { + margin-left: -1rem; + + i { + position: relative; + left: 2rem; + + } + + input { + + border-radius: 8px; + border: 1px solid #8D91A4; + background: var(--color-background-card-on-base, #FFF); + + + padding-left: 2rem; + padding-top: 6px; + padding-bottom: 6px; + + overflow: hidden; + color: var(--color-text-secondary, #525668); + text-overflow: ellipsis; + font-size: var(--Font-Base, 14px); + + } +} diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.spec.ts b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.spec.ts new file mode 100644 index 0000000..5a15049 --- /dev/null +++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MultiSelector } from './multi-selector'; + +describe('MultiSelector', () => { + let component: MultiSelector; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MultiSelector] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MultiSelector); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts new file mode 100644 index 0000000..5645da9 --- /dev/null +++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +@Component({ + selector: 'sae-multi-selector', + imports: [], + templateUrl: './multi-selector.html', + styleUrl: './multi-selector.scss' +}) +export class MultiSelector { + +} diff --git a/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.css b/my-workspace/projects/sae-lib/pages/login/login.css similarity index 100% rename from my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.css rename to my-workspace/projects/sae-lib/pages/login/login.css diff --git a/my-workspace/projects/sae-lib/pages/login/login.html b/my-workspace/projects/sae-lib/pages/login/login.html new file mode 100644 index 0000000..a482604 --- /dev/null +++ b/my-workspace/projects/sae-lib/pages/login/login.html @@ -0,0 +1,7 @@ +
+ login form + + + + +
diff --git a/my-workspace/projects/sae-lib/pages/login/login.spec.ts b/my-workspace/projects/sae-lib/pages/login/login.spec.ts new file mode 100644 index 0000000..dd8bbb3 --- /dev/null +++ b/my-workspace/projects/sae-lib/pages/login/login.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Login } from './login'; + +describe('Login', () => { + let component: Login; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [Login] + }) + .compileComponents(); + + fixture = TestBed.createComponent(Login); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/my-workspace/projects/sae-lib/pages/login/login.ts b/my-workspace/projects/sae-lib/pages/login/login.ts new file mode 100644 index 0000000..079b9a7 --- /dev/null +++ b/my-workspace/projects/sae-lib/pages/login/login.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +@Component({ + selector: 'sae-login', + imports: [], + templateUrl: './login.html', + styleUrl: './login.css' +}) +export class Login { + +} diff --git a/my-workspace/projects/sae-lib/src/styles/_variables.scss b/my-workspace/projects/sae-lib/src/styles/_variables.scss index 65f1975..683dd7e 100644 --- a/my-workspace/projects/sae-lib/src/styles/_variables.scss +++ b/my-workspace/projects/sae-lib/src/styles/_variables.scss @@ -61,6 +61,7 @@ $csc-nav-color: $main-color-400; $csc-chips-bg-color: $main-color-400; $csc-textarea-color: #1B1D27; +$csc-textarea-placeholder-color: #7B7B7B; $csc-filters-box-color: #E3EAF1; $bot-bubble: $csc-light-yellow-color; diff --git a/sae-csc/.npmrc b/sae-csc/.npmrc index bde6b3a..0b4ed73 100644 --- a/sae-csc/.npmrc +++ b/sae-csc/.npmrc @@ -1,2 +1 @@ -preserve-symlinks=true prefix=/home/tykayn/.npm-global diff --git a/sae-csc/public/safran_bg.jpg b/sae-csc/public/safran_bg.jpg new file mode 100644 index 0000000..cca88ec Binary files /dev/null and b/sae-csc/public/safran_bg.jpg differ diff --git a/sae-csc/src/app/app.html b/sae-csc/src/app/app.html index 64e2f33..d65366b 100644 --- a/sae-csc/src/app/app.html +++ b/sae-csc/src/app/app.html @@ -3,13 +3,11 @@ CSC implémentation - + @if (currentUrl !== '/login') { + + + } -

- logo - CSC -

- diff --git a/sae-csc/src/app/app.routes.ts b/sae-csc/src/app/app.routes.ts index 2efbff3..d04fe9f 100644 --- a/sae-csc/src/app/app.routes.ts +++ b/sae-csc/src/app/app.routes.ts @@ -2,6 +2,7 @@ import {Routes} from '@angular/router'; import {Main} from './pages/main/main'; import {Admin} from './pages/admin/admin'; import {SimilarCases} from './pages/similar-cases/similar-cases'; +import {Login} from './pages/login/login'; export const routes: Routes = [{ path: '', @@ -11,6 +12,10 @@ export const routes: Routes = [{ path: 'admin', component: Admin }, + { + path: 'login', + component: Login + }, { path: 'similar-cases', component: SimilarCases diff --git a/sae-csc/src/app/app.ts b/sae-csc/src/app/app.ts index 4b84cfb..74b3139 100644 --- a/sae-csc/src/app/app.ts +++ b/sae-csc/src/app/app.ts @@ -1,7 +1,9 @@ -import { Component, signal } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; +import {Component, inject, signal} from '@angular/core'; +import {ActivatedRoute, Router, RouterOutlet, NavigationEnd} from '@angular/router'; import {TopNavigation} from './shared/navigation/top-navigation/top-navigation'; import {FeedbackButton} from 'sae-lib/buttons/feedback-button/feedback-button'; +import {filter} from 'rxjs/operators'; + // import {SaeLib} from '@sae-lib/src/public-api'; @Component({ @@ -11,5 +13,16 @@ import {FeedbackButton} from 'sae-lib/buttons/feedback-button/feedback-button'; styleUrl: './app.scss' }) export class App { + public router = inject(Router); + currentUrl: string = ''; protected readonly title = signal('implem'); + + constructor() { + this.router.events.pipe( + filter(event => event instanceof NavigationEnd) + ).subscribe((event: any) => { + this.currentUrl = event.urlAfterRedirects; + console.log('Current URL:', this.currentUrl); + }); + } } diff --git a/sae-csc/src/app/pages/login/login.html b/sae-csc/src/app/pages/login/login.html new file mode 100644 index 0000000..3230e9d --- /dev/null +++ b/sae-csc/src/app/pages/login/login.html @@ -0,0 +1,18 @@ +
+ +
+
…
+
…
+
…
+
+ + +
+ + +
+
diff --git a/sae-csc/src/app/pages/login/login.scss b/sae-csc/src/app/pages/login/login.scss new file mode 100644 index 0000000..8d1fb0d --- /dev/null +++ b/sae-csc/src/app/pages/login/login.scss @@ -0,0 +1,32 @@ +#cscLogin { + background: #1b1d27; + color: white; + display: flex; + width: 100vw; + height: 100vh; + padding: 121px 127px; + + .bg-login { + background: url('/safran_bg.jpg') center no-repeat; + background-size: cover; + width: 600px; + } +} + +.Aligner { + display: flex; + align-items: center; + justify-content: center; +} + +.Aligner-item { + max-width: 50%; +} + +.Aligner-item--top { + align-self: flex-start; +} + +.Aligner-item--bottom { + align-self: flex-end; +} diff --git a/sae-csc/src/app/pages/login/login.spec.ts b/sae-csc/src/app/pages/login/login.spec.ts new file mode 100644 index 0000000..dd8bbb3 --- /dev/null +++ b/sae-csc/src/app/pages/login/login.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Login } from './login'; + +describe('Login', () => { + let component: Login; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [Login] + }) + .compileComponents(); + + fixture = TestBed.createComponent(Login); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/sae-csc/src/app/pages/login/login.ts b/sae-csc/src/app/pages/login/login.ts new file mode 100644 index 0000000..9a422e2 --- /dev/null +++ b/sae-csc/src/app/pages/login/login.ts @@ -0,0 +1,14 @@ +import {Component} from '@angular/core'; +import {LoginForm} from 'sae-lib/forms/login-form/login-form'; + +@Component({ + selector: 'app-login', + imports: [ + LoginForm + ], + templateUrl: './login.html', + styleUrl: './login.scss' +}) +export class Login { + +} diff --git a/sae-csc/src/app/pages/main/main.html b/sae-csc/src/app/pages/main/main.html index 82d371a..1d6d35a 100644 --- a/sae-csc/src/app/pages/main/main.html +++ b/sae-csc/src/app/pages/main/main.html @@ -11,7 +11,6 @@
-
@@ -43,4 +42,5 @@ +
diff --git a/sae-csc/src/app/pages/main/main.scss b/sae-csc/src/app/pages/main/main.scss index d08836e..ac6d613 100644 --- a/sae-csc/src/app/pages/main/main.scss +++ b/sae-csc/src/app/pages/main/main.scss @@ -1,3 +1,20 @@ -.magic-text{ - color: #EEA100; +.magic-text { + color: #A86CFD; + font-family: Barlow; + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: normal; + + i { + font-size: 1.25em; + margin-left: 2px; + } } + +#translation_request { + .helper { + padding-left: 4.5%; + } +} + diff --git a/sae-csc/src/app/pages/main/main.ts b/sae-csc/src/app/pages/main/main.ts index 5a7dcf6..e5a3495 100644 --- a/sae-csc/src/app/pages/main/main.ts +++ b/sae-csc/src/app/pages/main/main.ts @@ -3,6 +3,7 @@ import {TranslateTexts} from 'sae-lib/inbox/translate-texts/translate-texts'; import {FiltersGroup} from '../../../../../my-workspace/projects/sae-lib/filters/filters-group/filters-group'; import {BottomNavigation} from '../../shared/navigation/bottom-navigation/bottom-navigation'; import {ColorDisplay} from 'sae-lib/colours/color-display/color-display'; +import {FeedbackButton} from 'sae-lib/buttons/feedback-button/feedback-button'; @Component({ @@ -11,7 +12,8 @@ import {ColorDisplay} from 'sae-lib/colours/color-display/color-display'; TranslateTexts, FiltersGroup, BottomNavigation, - ColorDisplay + ColorDisplay, + FeedbackButton ], templateUrl: './main.html', styleUrl: './main.scss' diff --git a/sae-csc/src/app/pages/similar-cases/similar-cases.scss b/sae-csc/src/app/pages/similar-cases/similar-cases.scss index 956326f..5a96d31 100644 --- a/sae-csc/src/app/pages/similar-cases/similar-cases.scss +++ b/sae-csc/src/app/pages/similar-cases/similar-cases.scss @@ -1,3 +1,3 @@ -.toggle-ai-suggestion{ - color: #FEAD02; +.toggle-ai-suggestion { + color: #A86CFD; } diff --git a/sae-csc/src/app/shared/navigation/top-navigation/top-navigation.html b/sae-csc/src/app/shared/navigation/top-navigation/top-navigation.html index 6ed8a87..ae77cea 100644 --- a/sae-csc/src/app/shared/navigation/top-navigation/top-navigation.html +++ b/sae-csc/src/app/shared/navigation/top-navigation/top-navigation.html @@ -39,7 +39,7 @@ Quick Start - + diff --git a/sae-csc/src/styles.scss b/sae-csc/src/styles.scss index 11ddb74..6bc98d9 100644 --- a/sae-csc/src/styles.scss +++ b/sae-csc/src/styles.scss @@ -1,13 +1,13 @@ // from global to more precise // sass lang utils @use "sass:color"; -@use "app/styles/app.scss"; // lib SAE Aero styles @use 'sae-lib/src/styles/index.scss'; /* Fichier de styles global pour l'application */ // Importer les styles principaux -@import 'styles/main.scss'; +@use "app/styles/app.scss"; +@use 'styles/main.scss'; // Styles globaux supplémentaires html, body { diff --git a/sae-csc/src/styles/app/styles/pages/_main.scss b/sae-csc/src/styles/app/styles/pages/_main.scss index 3cbb90b..6d135f5 100644 --- a/sae-csc/src/styles/app/styles/pages/_main.scss +++ b/sae-csc/src/styles/app/styles/pages/_main.scss @@ -37,23 +37,17 @@ left: 92%; top: 50px; width: 37px; + display: none; &:hover { background: #888; color: #222; + display: block; } } textarea { - width: 648px; - height: 236px; - flex-shrink: 0; - border-radius: 4px; - background: #FFF; - box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05); - border-width: 0; - padding: 11px 14px; - color: variables.$csc-textarea-color; + } } @@ -64,52 +58,6 @@ } -.filter-group { - - .input-box{ - margin-left: -1rem; - i{ - position: relative; - left: 2rem; - - } - input{ - padding-left: 2rem; - padding-top: 6px; - padding-bottom: 6px; - } - } - .search { - display: flex; - min-height: 42px; - max-height: 42px; - padding: var(--Spacing-Spacing-30, 12px) var(--Spacing-Spacing-40, 16px); - align-items: center; - gap: var(--Spacing-Spacing-20, 8px); - align-self: stretch; - } - - .chips-listing { - margin-top: 16px; - border-radius: 4px; - background: variables.$csc-filters-box-color; - width: 100%; - height: 400px; - padding: 12px; - - - .chips { - background: variables.$csc-chips-bg-color; - color: white; - padding: 12px 16px; - border: solid 1px variables.$csc-chips-bg-color; - width: 100%; - border-radius: 20px; - - } - } -} - .bottom-navigation { .nav-item {