tykayn/ng-implementation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ajout page accueil CSC

Browse source
This commit is contained in:
Tykayn 2025-08-22 11:57:56 +02:00 • committed by tykayn
parent a19b70c0a0
commit dc0f735be8
35 changed files with 535 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

42
my-workspace/projects/sae-lib/filters/filters-group/filters-group.html
View file

@ -1,19 +1,43 @@
<div class="filter-group">
<div class="selectors">
<!-- sélecteurs-->
<div class="input-box">
<i class="ri-search-line"></i>
<input type="text">
</div>
<sae-multi-selector></sae-multi-selector>
</div>
<div class="chips-listing">
<!-- liste de chips-->
<button class="button chips is-rounded is-small">
<div class="chips-column">
filtre 1
<span class="post-button">
<button class="button chips is-rounded is-small">
filtre c1 1
<span class="post-button">
x
</span>
</button>
</button>
<button class="button chips is-rounded is-small">
filtre c1 2
<span class="post-button">
x
</span>
</button>
<button class="button chips is-rounded is-small">
filtre c1 3
<span class="post-button">
x
</span>
</button>
</div>
<div class="chips-column">
<button class="button chips is-rounded is-small">
filtre col 2
<span class="post-button">
x
</span>
</button>
</div>
</div>
</div>

82
my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss Normal file
View file

@ -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;
}
}
}

9
my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts
View file

@ -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 {

0
my-workspace/projects/sae-lib/filters/filters-group/filters-group.css → my-workspace/projects/sae-lib/forms/login-form/login-form.css
View file

1
my-workspace/projects/sae-lib/forms/login-form/login-form.html Normal file
View file

@ -0,0 +1 @@
<p>login-form works!</p>

23
my-workspace/projects/sae-lib/forms/login-form/login-form.spec.ts Normal file
View file

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginForm } from './login-form';
describe('LoginForm', () => {
let component: LoginForm;
let fixture: ComponentFixture<LoginForm>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [LoginForm]
})
.compileComponents();
fixture = TestBed.createComponent(LoginForm);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

11
my-workspace/projects/sae-lib/forms/login-form/login-form.ts Normal file
View file

@ -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 {
}

30
my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.html
View file

@ -3,16 +3,32 @@
<div class="columns">
<div class="column">
<!-- delete button from_text-->
<button class="delete-button button" (click)="emptyText('fromText')">x</button>
<textarea name="from_text" id="from_text" cols="30" rows="10"
placeholder=""
[(ngModel)]="fromText"></textarea>
<div id="fromText">
<!-- delete button from_text-->
@if (fromText.length > 0) {
<button (click)="emptyText('fromText')" class="delete-button button">x</button>
}
<textarea [(ngModel)]="fromText" cols="30" id="from_text" name="from_text"
placeholder=""
rows="10"></textarea>
<button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
<i class="ri-upload-cloud-2-line"></i>
<span class="label">
Upload .csv file
</span>
</button>
<input #fileUpload (change)="onFileSelected($event)" class="is-outlined" id="fileUploadTranslator" type="file">
</div>
</div>
<div class="column">
<button class="delete-button button" (click)="emptyText('toText')">x</button>
<textarea name="to_text" id="to_text" cols="30" rows="10" [(ngModel)]="toText"></textarea>
<div id="toText">
@if (toText.length > 0) {
<button (click)="emptyText('toText')" class="delete-button button">x</button>
}
<textarea [(ngModel)]="toText" cols="30" id="to_text" name="to_text" rows="10"></textarea>
</div>
</div>
</div>
</div>

65
my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.scss Normal file
View file

@ -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;
}

12
my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.ts
View file

@ -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();
}
}

33
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html Normal file
View file

@ -0,0 +1,33 @@
<!-- sélecteurs-->
<div class="input-box">
<i class="ri-search-line"></i>
<!-- <div class="label">Engine type</div>-->
<input class="is-hidden" placeholder="Engine type" type="text">
<div class="dropdown">
<div class="dropdown-button">
<!-- bouton-->
<i class="ri-arrow-down-box-fill"></i>
</div>
<div class="dropdown-list">
<!-- selected:-->
<div class="selected-items">
</div>
<hr>
<div class="available-items">
<!-- available:-->
<div class="dropdown-item">
<div class="label">
choix 1
</div>
</div>
<div class="dropdown-item">
<div class="label">
choix 2
</div>
</div>
</div>
</div>
</div>
</div>

29
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss Normal file
View file

@ -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);
}
}

23
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.spec.ts Normal file
View file

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MultiSelector } from './multi-selector';
describe('MultiSelector', () => {
let component: MultiSelector;
let fixture: ComponentFixture<MultiSelector>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [MultiSelector]
})
.compileComponents();
fixture = TestBed.createComponent(MultiSelector);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

11
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts Normal file
View file

@ -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 {
}

0
my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.css → my-workspace/projects/sae-lib/pages/login/login.css
View file

7
my-workspace/projects/sae-lib/pages/login/login.html Normal file
View file

@ -0,0 +1,7 @@
<form action="">
login form
<input type="text">
<input type="password">
</form>

23
my-workspace/projects/sae-lib/pages/login/login.spec.ts Normal file
View file

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Login } from './login';
describe('Login', () => {
let component: Login;
let fixture: ComponentFixture<Login>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Login]
})
.compileComponents();
fixture = TestBed.createComponent(Login);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

11
my-workspace/projects/sae-lib/pages/login/login.ts Normal file
View file

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
@Component({
selector: 'sae-login',
imports: [],
templateUrl: './login.html',
styleUrl: './login.css'
})
export class Login {
}

1
my-workspace/projects/sae-lib/src/styles/_variables.scss
View file

@ -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;