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
parent f13fc79d92
commit 370ac7d814
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,