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

4
frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.html
View File

@@ -1,10 +1,10 @@
<h1>{{title}}</h1>
<h2>{{description}}</h2>
<footer>
<button type="button" class="secondary" (click)="closeDialog()" i18n>
<button type="button" class="cod-btn secondary" (click)="closeDialog()" matRipple i18n>
No
</button>
<button type="button" (click)="closeAndValidate()" i18n>
<button type="button" class="cod-btn" (click)="closeAndValidate()" matRipple i18n>
Yes
</button>
</footer>

27
frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.scss
View File

@@ -8,32 +8,5 @@
display: flex;
flex-direction: row;
justify-content: space-between;
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;
}
}
}
}
}

3
frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.ts
View File

@@ -1,4 +1,5 @@
import { Component, inject, Input } from "@angular/core";
import { MatRippleModule } from "@angular/material/core";
import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
export interface ConfirmationDialogData {
@@ -11,7 +12,7 @@ export interface ConfirmationDialogData {
standalone: true,
templateUrl: './confirmation-dialog.component.html',
styleUrl: './confirmation-dialog.component.scss',
imports: []
imports: [MatRippleModule]
})
export class ConfirmationDialog {
private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>);

13
frontend/src/app/components/header/header.component.html
View File

@@ -1,5 +1,9 @@
<div class="left">
<button type="button" (click)="sideMenu.open()" matTooltip="Click to show side menu" i18n-matTooltip>
<button type="button"
(click)="sideMenu.open()"
matTooltip="Click to show side menu"
matRipple
i18n-matTooltip>
<mat-icon>menu</mat-icon>
</button>
<a [routerLink]="['/home']">
@@ -14,7 +18,10 @@
<div class="right">
@if (isAuthenticated) {
<button mat-button class="button" [matMenuTriggerFor]="authenticatedUserMenu">
<button mat-button
class="button"
[matMenuTriggerFor]="authenticatedUserMenu"
matRipple>
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #authenticatedUserMenu="matMenu">
@@ -30,7 +37,7 @@
</div>
</mat-menu>
} @else {
<a [routerLink]="['/login']" class="button" matRipple i18n>Login</a>
<a [routerLink]="['/login']" class="cod-btn" matRipple i18n>Login</a>
}
</div>
<app-side-menu #sideMenu></app-side-menu>

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>

40
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;
}
&: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;
&: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,

2
frontend/src/app/components/publications-search-bar/publications-search-bar.component.html
View File

@@ -1,6 +1,6 @@
<form [formGroup]="formGroup">
<input name="search-query" placeholder="Search something..." formControlName="criteria" i18n-placeholder/>
<button type="submit" (click)="searchPublications()">
<button type="submit" (click)="searchPublications()" matRipple>
<mat-icon>search</mat-icon>
</button>
</form>

2
frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss
View File

@@ -27,7 +27,7 @@
top: 0;
right: 0;
color: #aaaaaa;
padding: .4em;
padding: .3em;
&:hover {
background-color: #eee;

7
frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts
View File

@@ -1,6 +1,6 @@
import { HttpParams } from "@angular/common/http";
import { Component, inject } from "@angular/core";
import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
import { MatRippleModule } from "@angular/material/core";
import { MatIconModule } from "@angular/material/icon";
import { Router } from "@angular/router";
@@ -11,8 +11,9 @@ import { Router } from "@angular/router";
styleUrl: './publications-search-bar.component.scss',
standalone: true,
imports: [
ReactiveFormsModule,
MatIconModule
MatIconModule,
MatRippleModule,
ReactiveFormsModule
],
providers: []
})

6
frontend/src/app/components/side-menu/side-menu.component.html
View File

@@ -4,7 +4,11 @@
<img src="assets/images/codiki.png" alt="logo"/>
Codiki
</a>
<button type="button" (click)="close()" matTooltip="Close the menu" i18n-matTooltip>
<button type="button"
(click)="close()"
matTooltip="Close the menu"
matRipple
i18n-matTooltip>
<mat-icon>close</mat-icon>
</button>
</h1>

11
frontend/src/app/components/side-menu/side-menu.component.ts
View File

@@ -3,13 +3,20 @@ import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { CategoriesMenuComponent } from './categories-menu/categories-menu.component';
import { MatRippleModule } from '@angular/material/core';
@Component({
selector: 'app-side-menu',
standalone: true,
imports: [CategoriesMenuComponent, MatIconModule, MatTooltipModule, RouterModule],
templateUrl: './side-menu.component.html',
styleUrl: './side-menu.component.scss'
styleUrl: './side-menu.component.scss',
imports: [
CategoriesMenuComponent,
MatIconModule,
MatRippleModule,
MatTooltipModule,
RouterModule
]
})
export class SideMenuComponent {
isOpenned: boolean = false;

3
frontend/src/app/components/submit-button/submit-button.component.html
View File

@@ -1,7 +1,8 @@
<button type="submit"
class="cod-button {{color}}"
[disabled]="disabled || requestPending"
(click)="click.emit()">
(click)="click.emit()"
matRipple>
@if (requestPending) {
<mat-spinner class="spinner {{color}}" [diameter]="25"></mat-spinner>
}

10
frontend/src/app/components/submit-button/submit-button.component.ts
View File

@@ -1,14 +1,18 @@
import { CommonModule } from "@angular/common";
import { Component, EventEmitter, Input, Output } from "@angular/core";
import { MatRippleModule } from "@angular/material/core";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
@Component({
selector: 'app-submit-button',
standalone: true,
imports: [MatProgressSpinnerModule, CommonModule],
templateUrl: 'submit-button.component.html',
styleUrl: 'submit-button.component.scss'
styleUrl: 'submit-button.component.scss',
imports: [
CommonModule,
MatRippleModule,
MatProgressSpinnerModule
]
})
export class SubmitButtonComponent {
@Input() requestPending: boolean = false;

2
frontend/src/app/pages/login/login.component.html
View File

@@ -18,6 +18,6 @@
</div>
<div class="actions reversed">
<app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
<a [routerLink]="['/signin']" class="cod-button secondary" i18n>Create an account</a>
<a [routerLink]="['/signin']" class="cod-button secondary" matRipple i18n>Create an account</a>
</div>
</form>

9
frontend/src/app/pages/login/login.component.ts
View File

@@ -6,13 +6,20 @@ import { LoginService } from './login.service';
import { MatIconModule } from '@angular/material/icon';
import { RouterModule } from '@angular/router';
import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
import { MatRippleModule } from '@angular/material/core';
@Component({
selector: 'app-login',
standalone: true,
templateUrl: './login.component.html',
styleUrl: './login.component.scss',
imports: [ReactiveFormsModule, MatIconModule, RouterModule, SubmitButtonComponent],
imports: [
MatIconModule,
MatRippleModule,
ReactiveFormsModule,
RouterModule,
SubmitButtonComponent
],
providers: [LoginService, MatSnackBarModule]
})
export class LoginComponent implements OnInit, OnDestroy {

2
frontend/src/app/pages/publication/publication.component.html
View File

@@ -12,6 +12,7 @@
<a [routerLink]="['edit']"
class="button action"
matTooltip="Click to edit the publication"
matRipple
i18n-matTooltip>
<mat-icon>edit</mat-icon>
</a>
@@ -33,6 +34,7 @@
(click)="deletePublication()"
matTooltip="Click to delete the publication"
matTooltipPosition="left"
matRipple
i18n-matTooltip>
<mat-icon>delete</mat-icon>
Delete

32
frontend/src/app/pages/publication/publication.component.ts
View File

@@ -1,25 +1,33 @@
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { Subscription } from 'rxjs';
import { Publication } from '../../core/rest-services/publications/model/publication';
import { MatSnackBar } from '@angular/material/snack-bar';
import { CommonModule, Location } from '@angular/common';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
import { MatIcon } from '@angular/material/icon';
import { AuthenticationService } from '../../core/service/authentication.service';
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
import { MatRippleModule } from '@angular/material/core';
import { MatDialog } from '@angular/material/dialog';
import { MatIcon } from '@angular/material/icon';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { Subscription } from 'rxjs';
import { ConfirmationDialog } from '../../components/confirmation-dialog/confirmation-dialog.component';
import { Publication } from '../../core/rest-services/publications/model/publication';
import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
import { AuthenticationService } from '../../core/service/authentication.service';
declare let Prism: any;
@Component({
selector: 'app-publication',
standalone: true,
imports: [CommonModule, MatProgressSpinner, MatTooltip, RouterModule, MatIcon, MatTooltipModule],
templateUrl: './publication.component.html',
styleUrl: './publication.component.scss'
styleUrl: './publication.component.scss',
imports: [
CommonModule,
MatIcon,
MatRippleModule,
MatProgressSpinner,
MatTooltipModule,
RouterModule
]
})
export class PublicationComponent implements OnInit, OnDestroy {
private readonly activatedRoute = inject(ActivatedRoute);

2
frontend/src/app/pages/signin/signin.component.html
View File

@@ -34,6 +34,6 @@
</div>
<div class="actions reversed">
<app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
<a [routerLink]="['/login']" class="cod-button secondary" i18n>I already have an account</a>
<a [routerLink]="['/login']" class="cod-button secondary" matRipple i18n>I already have an account</a>
</div>
</form>

9
frontend/src/app/pages/signin/signin.component.ts
View File

@@ -7,13 +7,20 @@ import { SigninService } from './signin.service';
import { LoginService } from '../login/login.service';
import { FormError } from '../../core/model/FormError';
import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
import { MatRippleModule } from '@angular/material/core';
@Component({
selector: 'app-signin',
standalone: true,
imports: [ReactiveFormsModule, MatIconModule, RouterModule, SubmitButtonComponent],
templateUrl: './signin.component.html',
styleUrl: './signin.component.scss',
imports: [
MatIconModule,
MatRippleModule,
ReactiveFormsModule,
RouterModule,
SubmitButtonComponent
],
providers: [SigninService, LoginService]
})
export class SigninComponent implements OnInit, OnDestroy {