Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • web-et-numerique/factory/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client
1 result
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 382 additions and 337 deletions
src/app/shared/components/v3/tag/tag-item/tag-item.component.ts
View file @ 0242e834
......@@ -7,13 +7,13 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
})
export class TagItemV3Component {
/** Tag label */
@Input() label = 'Bouton';
@Input({ required: true }) label: string;
/** How large should be the button ? */
@Input() size?: 'small' | 'medium' = 'medium';
/** Is the tag selected ? */
@Input() selected = false;
/** What color should the tag be ? */
@Input() color?: 'white' | 'black' | 'red' = 'white';
/** Should the button be clickable ? */
@Input() clickable = true;
......@@ -34,7 +34,7 @@ export class TagItemV3Component {
@Output() action = new EventEmitter<Event>();
public get classes(): string[] {
return [this.size, this.selected ? 'selected' : '', this.clickable ? 'clickable' : 'unclickable'];
return [this.size, this.color, this.clickable ? 'clickable' : 'unclickable'];
}
public get iconSize(): 'icon-12' | 'icon-16' {
......
src/app/shared/components/v3/tag/tag-item/tag-item.stories.ts
View file @ 0242e834
......@@ -22,69 +22,80 @@ const meta: Meta<TagItemV3Component> = {
export default meta;
type Story = StoryObj<TagItemV3Component>;
export const SmallTag: Story = {
export const Small: Story = {
args: {
label: 'Label tag',
size: 'small',
clickable: true,
disabled: false,
selected: false,
action: new EventEmitter(),
},
};
export const SmallTagWithIcon: Story = {
export const SmallWithIcon: Story = {
args: {
...SmallTag.args,
...Small.args,
iconFolder: 'ico',
iconName: 'email',
},
};
export const SmallTagSelected: Story = {
export const Medium: Story = {
args: {
...SmallTag.args,
selected: true,
label: 'Medium tag',
color: 'white',
size: 'medium',
},
};
export const MediumTag: Story = {
export const MediumSelected: Story = {
args: {
label: 'Medium tag',
color: 'black',
size: 'medium',
iconFolder: 'ico',
iconName: 'mail',
},
};
export const MediumTagWithIcon: Story = {
export const MediumRed: Story = {
args: {
...MediumTag.args,
iconFolder: 'ico',
iconName: 'email',
label: 'Médiathèque/Bibliothèque',
color: 'red',
size: 'medium',
clickable: false,
},
};
export const Unclickable: Story = {
export const MediumBlack: Story = {
args: {
label: 'Unclickable tag',
clickable: false,
label: 'Médiathèque/Bibliothèque',
color: 'black',
size: 'medium',
},
};
export const UnclickableWithIcon: Story = {
export const MediumWithIcon: Story = {
args: {
...Unclickable.args,
...Medium.args,
iconFolder: 'ico',
iconName: 'email',
},
};
export const Unclickable: Story = {
args: {
label: 'Unclickable tag',
clickable: false,
},
};
export const MultipleTags: Story = {
render: (args) => ({
props: args,
template: `
<div class="btn-grid">
<app-v3-tag-item label="test 1" />
<app-v3-tag-item label="test 2" selected="true" />
<app-v3-tag-item label="test 2" />
<app-v3-tag-item label="test 3" />
</div>`,
}),
......
src/app/structure-list/components/more-filters/more-filters.component.html
View file @ 0242e834
......@@ -41,61 +41,40 @@
</div>
</div>
<div class="scroll-container">
<div *ngFor="let c of categories" class="blockFiltre" id="{{ c.id }}">
<li class="checkbox">
<div class="checkboxItem categoryCheckBox">
<div fxLayout="row" fxLayoutAlign="start center">
<label>
<input
type="checkbox"
class="multiCheck"
[checked]="getCategoryCheckboxStatus(c) === 'checked'"
(change)="handleCategoryCheckBox($event, c)"
/>
<span
class="customCheck customCheckPrimary"
[ngClass]="{ halfCheck: getCategoryCheckboxStatus(c) === 'halfChecked' }"
></span>
</label>
<div
class="w-100 clickable"
tabindex="0"
fxLayout="row"
fxLayoutAlign="space-between center"
(click)="toggleShowCategory(c.id)"
(keyup.enter)="toggleShowCategory(c.id)"
>
<div class="label">{{ c.name }}</div>
<div class="arrow" [ngClass]="{ toggled: this.toggledCategories.includes(c.id) }"></div>
</div>
</div>
<ul class="blockLigne smallList" [ngClass]="{ show: this.toggledCategories.includes(c.id) }">
<li
*ngFor="let module of c.modules"
fxLayout="row"
fxLayoutAlign="start center"
class="ligneFiltre"
>
<div class="checkbox">
<div class="checkboxItem">
<label fxLayout="row" fxLayoutAlign="start center">
<input
type="checkbox"
class="visually-hidden"
[checked]="searchService.getIndex(checkedModules, module.id, c.id) > -1"
[value]="module.id"
(change)="onCheckboxChange($event, c.id, module.name)"
/>
<span class="customCheck customCheckPrimary"></span>
<div class="label">{{ module.name }}</div>
</label>
</div>
</div>
</li>
</ul>
<app-collapse *ngFor="let c of categories">
<app-collapse-header>
<div class="checkboxHeader">
<app-v3-checkbox
[size]="'medium'"
[checked]="getCategoryCheckboxStatus(c) === 'checked'"
[indeterminate]="getCategoryCheckboxStatus(c) === 'halfChecked'"
(action)="handleCategoryCheckBox($event, c); $event.stopPropagation()"
/>
{{ c.name }}
</div>
</li>
</div>
</app-collapse-header>
<app-collapse-content>
<ul class="blockLigne smallList">
<li *ngFor="let module of c.modules" fxLayout="row" fxLayoutAlign="start center" class="ligneFiltre">
<div class="checkbox">
<div class="checkboxItem">
<label fxLayout="row" fxLayoutAlign="start center">
<input
type="checkbox"
class="visually-hidden"
[checked]="searchService.getIndex(checkedModules, module.id, c.id) > -1"
[value]="module.id"
(change)="onCheckboxChange($event, c.id, module.name)"
/>
<span class="customCheck customCheckPrimary"></span>
<div class="label">{{ module.name }}</div>
</label>
</div>
</div>
</li>
</ul>
</app-collapse-content>
</app-collapse>
</div>
</ul>
</div>
......@@ -110,11 +89,7 @@
<app-button [style]="buttonTypeEnum.modalSecondary" [text]="'Effacer'" (click)="clearFilters()" />
</div>
<div class="half-width">
<app-button
[style]="buttonTypeEnum.modalPrimary"
[text]="'Appliquer'"
(click)="emitModules(checkedModules)"
/>
<app-button [style]="buttonTypeEnum.modalPrimary" [text]="'Appliquer'" (click)="emitModules(checkedModules)" />
</div>
</div>
</div>
......
src/app/structure-list/components/more-filters/more-filters.component.scss
View file @ 0242e834
......@@ -71,6 +71,12 @@
.multipleCategories {
width: fit-content;
margin: auto;
.checkboxHeader {
display: flex;
align-items: center;
gap: 0.5rem;
}
}
.scroll-container {
height: 40vh;
......
src/app/structure-list/components/more-filters/more-filters.component.ts
View file @ 0242e834
......@@ -25,7 +25,6 @@ export class MoreFiltersComponent implements OnInit, OnChanges {
// Checkbox variable
public checkedModules: Module[] = [];
public toggledCategories: string[] = [];
ngOnInit(): void {
// Manage checkbox
......@@ -108,16 +107,6 @@ export class MoreFiltersComponent implements OnInit, OnChanges {
}
}
public toggleShowCategory(categoryId: string): void {
if (this.toggledCategories.includes(categoryId)) {
const index = this.toggledCategories.indexOf(categoryId);
this.toggledCategories.splice(index);
} else {
this.toggledCategories.push(categoryId);
setTimeout(() => document.getElementById(categoryId).scrollIntoView({ behavior: 'smooth', block: 'start' }), 1);
}
}
public getCategoryCheckboxStatus(c: Category): string {
const selectedModule: Module[] = this.checkedModules.filter((m) => m.name === c.id);
if (selectedModule.length === c.modules.length) {
......
src/assets/form/sprite.svg
View file @ 0242e834
Source diff could not be displayed: it is too large. Options to address this: view the blob.
src/assets/ico/fold.svg
View file @ 0242e834
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 16L12.5 9L19 16" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" fill="white" />
<path d="M9.33203 13.3333L15.9987 20L22.6654 13.3333H9.33203Z" fill="#333333" />
</svg>
\ No newline at end of file
src/assets/ico/sprite.svg
View file @ 0242e834
......@@ -722,11 +722,10 @@
fill="#333333" />
</symbol>
<symbol id="arrowBack" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 11L11 20L20 29" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" />
<line x1="12.5679" y1="20.0684" x2="29.8861" y2="20.0684" stroke="black" stroke-width="1.5"
stroke-linecap="round" />
<symbol id="arrowBackSmall" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.8332 9.1666H6.5249L10.5916 5.09993C10.9166 4.77494 10.9166 4.2416 10.5916 3.9166C10.2666 3.5916 9.74157 3.5916 9.41657 3.9166L3.9249 9.40827C3.5999 9.73327 3.5999 10.2583 3.9249 10.5833L9.41657 16.0749C9.74157 16.3999 10.2666 16.3999 10.5916 16.0749C10.9166 15.7499 10.9166 15.2249 10.5916 14.8999L6.5249 10.8333H15.8332C16.2916 10.8333 16.6666 10.4583 16.6666 9.99994C16.6666 9.5416 16.2916 9.1666 15.8332 9.1666Z"
fill="#333333" />
</symbol>
<symbol id="structureAvatar" fill="none" width="52" height="52" xmlns="http://www.w3.org/2000/svg"
......@@ -1548,8 +1547,8 @@
<path d="M6 10L12.5 17L19 10" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</symbol>
<symbol id="fold" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 16L12.5 9L19 16" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<symbol id="fold" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.33203 13.3333L15.9987 20L22.6654 13.3333H9.33203Z" fill="#333333" />
</symbol>
<symbol id="searchPrintMarker" width="20" height="20" viewBox="0 0 20 20" fill="none"
......@@ -1963,15 +1962,6 @@
stroke-linejoin="round" />
</symbol>
<symbol id="warningMini" width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8.5" r="8" fill="#DA6C2E" />
<path d="M8.15415 9.423L8.15415 4.19224" stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M8.15417 13.1808L8.15418 12.8075" stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</symbol>
<symbol id="annuaireUnlogged" width="200" height="200" viewBox="0 0 200 200" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
......@@ -2725,4 +2715,12 @@
fill="white" />
</symbol>
<symbol id="chevronRight" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 25.5L22.5 18L15 10.5V25.5Z" fill="#949494" />
</symbol>
<symbol id="chevronUp" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" fill="white" />
<path d="M9.3335 18.6667L16.0002 12L22.6668 18.6667H9.3335Z" fill="#333333" />
</symbol>
</svg>
\ No newline at end of file
src/assets/scss/_color.scss
View file @ 0242e834
......@@ -7,6 +7,7 @@ $grey-1: #333333;
$grey-2-v3: #4c4d53;
$grey-3: #696969;
$grey-4: #949494;
$grey-4-text: #767676;
$grey-5: #bdbdbd;
$grey-6: #dedede;
$grey-7: #e9e9e9;
......
src/styles.scss
View file @ 0242e834
......@@ -26,8 +26,8 @@ body {
height: 100%;
margin: 0;
padding: 0;
color: $black;
background-color: $grey-9;
color: $grey-1;
background-color: $grey-10;
::-webkit-scrollbar {
width: 8px;
}
......@@ -54,8 +54,7 @@ body {
}
a {
color: $default-link-color;
text-decoration: none;
color: $grey-1;
background-color: transparent;
@include font-regular-14;
cursor: pointer;
......@@ -619,3 +618,12 @@ button {
.warning {
color: $info-warning;
}
.warningBorder {
border-color: $info-warning !important;
}
h1,
h2,
p {
margin: 0;
}