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

csc multiple selectors

Browse source
This commit is contained in:
Tykayn 2025-08-22 12:52:30 +02:00 • committed by tykayn
parent 9307e1852f
commit 05d8ba8117
13 changed files with 96 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,11 @@
<div class="filter-group">
<div class="selectors">
<sae-multi-selector></sae-multi-selector>
<sae-multi-selector [label]="'Engine type'"></sae-multi-selector>
<sae-multi-selector [label]="'Findings'"></sae-multi-selector>
<sae-multi-selector [label]="'ATA'"></sae-multi-selector>
<sae-multi-selector [label]="'Part number'"></sae-multi-selector>
<sae-multi-selector [label]="'Technical Manual'"></sae-multi-selector>
<sae-multi-selector [label]="'On-wing/off-wing'"></sae-multi-selector>
</div>
<div class="chips-listing">
<!-- liste de chips-->

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

@ -1,5 +1,11 @@
@use '../../src/styles/variables';
.selectors {
display: flex;
flex-direction: row;
gap: 10px;
}
.dropdown {
.dropdown-button {
padding: 10px;

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

@ -1,8 +1,8 @@
<!-- 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="label">{{ label }}</div>
<input class="is-hidden" placeholder="{{label}}" type="text">
<div class="dropdown">
<div class="dropdown-button">

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

@ -1,4 +1,4 @@
import {Component} from '@angular/core';
import {Component, Input} from '@angular/core';
@Component({
selector: 'sae-multi-selector',
@ -7,5 +7,6 @@ import {Component} from '@angular/core';
styleUrl: './multi-selector.scss'
})
export class MultiSelector {
@Input() label!: string;
}

16
sae-csc/src/app/app.routes.ts
View file

@ -8,13 +8,25 @@ export const routes: Routes = [{
path: '',
component: Main
},
{
path: 'login',
component: Login
},
{
path: 'admin',
component: Admin
},
{
path: 'login',
component: Login
path: 'home',
component: Main
},
{
path: 'main',
component: Main
},
{
path: 'login/home',
component: Main
},
{
path: 'similar-cases',

9
sae-csc/src/app/pages/login/login.html
View file

@ -26,12 +26,15 @@
</a>
</p>
<p>
<button class="button has-gradient">
<a class="button has-gradient" routerLink="/home">
<span class="label">
Login to start |
Login to start
</span>
<span class="pipe">
|
</span>
<i class="ri-arrow-right-line"></i>
</button>
</a>
</p>
</div>

3
sae-csc/src/app/pages/login/login.scss
View file

@ -25,7 +25,6 @@
margin-bottom: 40px;
a {
color: var(--Dark-brand-primary-400, #337DC3);
/* Body/Body 4/Sb */
font-family: Barlow;
@ -36,6 +35,8 @@
&:hover {
color: white;
}
text-decoration: none;
}
}

4
sae-csc/src/app/pages/login/login.ts
View file

@ -1,10 +1,10 @@
import {Component} from '@angular/core';
import {LoginForm} from 'sae-lib/forms/login-form/login-form';
import {RouterLink} from '@angular/router';
@Component({
selector: 'app-login',
imports: [
LoginForm
RouterLink
],
templateUrl: './login.html',
styleUrl: './login.scss'

3
sae-csc/src/app/pages/main/main.html
View file

@ -32,8 +32,11 @@
</h2>
<!--filters-->
<!-- advanced filters-->
<div class="filters-container">
<sae-filters-group></sae-filters-group>
</div>
</div>
</main>
<footer>

3
sae-csc/src/app/pages/main/main.scss
View file

@ -14,7 +14,8 @@
#translation_request {
.helper {
padding-left: 4.5%;
padding-left: 5.3vw;
padding-bottom: 16px;
}
}

7
sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.html
View file

@ -9,7 +9,14 @@
</nav>
<div class="fixed-navigation">
<button class="next-step" routerLink="similar-cases">
<span class="label">
Search similar cases
</span>
<span class="pipe">
|
</span>
<i class="ri-arrow-right-line"></i>
</button>
</div>
</div>

40
sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss
View file

@ -1,6 +1,13 @@
.next-step{
color: var(--color-text-invert, #FFF);
text-align: center;
.bottom-navigation {
padding: 0 60px 16px;
.nav-item {
display: inline-flex;
padding: 12px 16px;
justify-content: center;
align-items: center;
gap: 10px;
color: var(--color-text-title, #255B8E);
leading-trim: both;
text-edge: cap;
@ -11,4 +18,31 @@
font-weight: 600;
line-height: 100%; /* 14px */
letter-spacing: 1.12px;
text-transform: uppercase;
margin-left: -12px;
cursor: pointer;
&:hover {
color: white;
background: var(--color-primary, #073A7C);
}
}
}
.next-step {
text-align: center;
leading-trim: both;
text-edge: cap;
min-width: 230px;
padding: 14px 16px;
border-radius: 10px;
color: var(--Light-base-solid-white, #FFF);
font-size: 16px;
font-weight: 600;
line-height: 24px;
background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
}

44
sae-csc/src/styles/app/styles/pages/_main.scss
View file

@ -58,30 +58,6 @@
}
.bottom-navigation {
.nav-item {
display: inline-flex;
padding: 12px 16px;
justify-content: center;
align-items: center;
gap: 10px;
color: var(--color-text-title, #255B8E);
leading-trim: both;
text-edge: cap;
/* Text/text-button */
font-family: var(--Fonts-Font-text, Barlow);
font-size: var(--Font-Base, 14px);
font-style: normal;
font-weight: 600;
line-height: 100%; /* 14px */
letter-spacing: 1.12px;
}
}
.fixed-navigation {
display: flex;
position: fixed;
@ -97,24 +73,4 @@
box-shadow: 0 -10px 20px 0 rgba(30, 31, 34, 0.05);
.next-step {
display: flex;
padding: 12px;
align-items: center;
gap: 5px;
border: 1px solid white;
border-radius: 8px;
background: linear-gradient(145deg, #55BCEC -21.82%, #005AA2 82.35%), #FFF;
min-width: 200px;
color: var(--color-text-invert, #FFF);
text-align: center;
font-size: var(--Font-Base, 14px);
font-style: normal;
font-weight: 600;
letter-spacing: 1.12px;
}
}