florian/codiki-hexagonal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add ripple everywhere.

Browse Source
This commit is contained in:
Florian THIERRY
2024-10-21 15:15:53 +02:00
committed by Florian THIERRY
parent 053ac89e3c
commit 7f99d11209
25 changed files with 163 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html
View File

@@ -1,10 +1,10 @@
<button type="button" class="close" (click)="closeDialog()">
<button type="button" class="close" (click)="closeDialog()" matRipple>
<mat-icon>close</mat-icon>
</button>
<header>
<h1 i18n>Add a code block</h1>
</header>
<form [formGroup]="formGroup" (submit)="closeAndValidate()" ngNativeValidate>
<form [formGroup]="formGroup" (submit)="closeAndValidate()" class="cod-form" ngNativeValidate>
<div class="form-content">
<mat-form-field>
<mat-label i18n>Programming language</mat-label>
@@ -21,11 +21,11 @@
<textarea matInput formControlName="codeBlock"></textarea>
</mat-form-field>
</div>
<div class="actions">
<button type="submit" i18n>
<div class="actions reversed">
<button type="submit" class="cod-btn" matRipple i18n>
Validate
</button>
<button type="button" (click)="closeDialog()" class="secondary" i18n>
<button type="button" (click)="closeDialog()" class="cod-btn secondary" matRipple i18n>
Cancel
</button>
</div>

34
frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss
View File

@@ -39,40 +39,6 @@
}
}
}
&.actions {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
button {
padding: .8em 1.2em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: #5b6ed8;
}
&.secondary {
color: #3f51b5;
background-color: white;
&:hover {
background-color: #f2f4ff;
cursor: pointer;
}
}
}
}
}
}
}

2
frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts
View File

@@ -1,5 +1,6 @@
import { Component, inject } from "@angular/core";
import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
import { MatRippleModule } from "@angular/material/core";
import { MatDialogRef } from "@angular/material/dialog";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatIcon } from "@angular/material/icon";
@@ -91,6 +92,7 @@ export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
MatFormFieldModule,
MatIcon,
MatInputModule,
MatRippleModule,
MatSelectModule,
ReactiveFormsModule,
]

14
frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html
View File

@@ -1,4 +1,4 @@
<button type="button" class="close" (click)="closeDialog()">
<button type="button" class="close" (click)="closeDialog()" matRipple>
<mat-icon>close</mat-icon>
</button>
<header>
@@ -19,10 +19,18 @@
}
</div>
<footer>
<button type="button" class="secondary" matRipple (click)="closeDialog()" i18n>
<button type="button"
(click)="closeDialog()"
class="cod-btn secondary"
matRipple
i18n>
Cancel
</button>
<button type="button" (click)="fileUpload.click()" matRipple i18n>
<button type="button"
(click)="fileUpload.click()"
class="cod-btn"
matRipple
i18n>
<mat-icon>upload_file</mat-icon>
Add new picture
</button>

7
frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.ts
View File

@@ -11,9 +11,14 @@ import { MatTooltip } from "@angular/material/tooltip";
@Component({
selector: 'app-picture-selection',
standalone: true,
imports: [MatProgressSpinnerModule, MatIcon, MatRippleModule, MatTooltip],
templateUrl: './picture-selection-dialog.component.html',
styleUrl: './picture-selection-dialog.component.scss',
imports: [
MatIcon,
MatRippleModule,
MatProgressSpinnerModule,
MatTooltip
],
})
export class PictureSelectionDialog implements OnInit {
private readonly pictureRestService = inject(PictureRestService);

48
frontend/src/app/components/publication-edition/publication-edition.component.html
View File

@@ -37,25 +37,53 @@
</div>
<div class="actions">
<button type="button" matTooltip="Click to insert a title 1 section" (click)="insertTitle(1)" i18n-matTooltip>
<button type="button"
(click)="insertTitle(1)"
matTooltip="Click to insert a title 1 section"
matRipple
i18n-matTooltip>
H1
</button>
<button type="button" matTooltip="Click to insert a title 2 section" (click)="insertTitle(2)" i18n-matTooltip>
<button type="button"
(click)="insertTitle(2)"
matTooltip="Click to insert a title 2 section"
matRipple
i18n-matTooltip>
H2
</button>
<button type="button" matTooltip="Click to insert a title 3 section" (click)="insertTitle(3)" i18n-matTooltip>
<button type="button"
(click)="insertTitle(3)"
matTooltip="Click to insert a title 3 section"
matRipple
i18n-matTooltip>
H3
</button>
<button type="button" matTooltip="Click to insert a picture" (click)="selectAPicture()" i18n-matTooltip>
<button type="button"
(click)="selectAPicture()"
matTooltip="Click to insert a picture"
matRipple
i18n-matTooltip>
<mat-icon>image</mat-icon>
</button>
<button type="button" matTooltip="Click to insert a link" (click)="insertLink()" i18n-matTooltip>
<button type="button"
(click)="insertLink()"
matTooltip="Click to insert a link"
matRipple
i18n-matTooltip>
<mat-icon>link</mat-icon>
</button>
<button type="button" matTooltip="Click to insert a code block" (click)="displayCodeBlockDialog()" i18n-matTooltip>
<button type="button"
(click)="displayCodeBlockDialog()"
matTooltip="Click to insert a code block"
matRipple
i18n-matTooltip>
<mat-icon>code</mat-icon>
</button>
<button type="button" disabled matTooltip="Click to display editor help" i18n-matTooltip>
<button type="button"
matTooltip="Click to display editor help"
disabled
matRipple
i18n-matTooltip>
<mat-icon>help</mat-icon>
</button>
</div>
@@ -93,7 +121,11 @@
</mat-tab-group>
<footer>
<app-submit-button [requestPending]="!!(isSaving$ | async)" i18n>Save</app-submit-button>
<button type="button" class="secondary" (click)="goPreviousLocation()" i18n>
<button type="button"
class="cod-btn secondary"
(click)="goPreviousLocation()"
matRipple
i18n>
Cancel
</button>
</footer>

42
frontend/src/app/components/publication-edition/publication-edition.component.scss
View File

@@ -102,6 +102,11 @@
button {
padding: 0;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
@@ -109,35 +114,16 @@
height: 3em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
font-weight: bold;
}
}
}
button, a.button {
padding: .8em 1.2em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
&:hover {
background-color: #5b6ed8;
cursor: pointer;
}
&:disabled {
background-color: #5f6aa6;
cursor: not-allowed;
}
&.secondary {
color: #3f51b5;
background-color: white;
&:hover {
background-color: #f2f4ff;
cursor: pointer;
&:hover {
background-color: #5b6ed8;
cursor: pointer;
}
&:disabled {
background-color: #5f6aa6;
cursor: not-allowed;
}
}
}
}

2
frontend/src/app/components/publication-edition/publication-edition.component.ts
View File

@@ -15,6 +15,7 @@ import { CategoryService } from "../../core/service/category.service";
import { SubmitButtonComponent } from "../submit-button/submit-button.component";
import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
import { PublicationEditionService } from "./publication-edition.service";
import { MatRippleModule } from "@angular/material/core";
@Component({
selector: 'app-publication-edition',
@@ -26,6 +27,7 @@ import { PublicationEditionService } from "./publication-edition.service";
MatDialogModule,
MatIconModule,
MatInputModule,
MatRippleModule,
MatProgressSpinnerModule,
MatSelectModule,
MatTabsModule,