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

Add icon button style.

Browse Source
This commit is contained in:
Florian THIERRY
2024-10-21 16:37:58 +02:00
parent 6a37419cf6
commit c4e60bee2a
14 changed files with 51 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
<div class="left">
<button type="button"
(click)="sideMenu.open()"
class="cod-btn icon"
matTooltip="Click to show side menu"
matRipple
i18n-matTooltip>
@@ -18,8 +19,8 @@
<div class="right">
@if (isAuthenticated) {
<button mat-button
class="button"
<button type="button"
class="cod-btn icon"
[matMenuTriggerFor]="authenticatedUserMenu"
matRipple>
<mat-icon>more_vert</mat-icon>

60
frontend/src/app/components/header/header.component.scss
View File

@@ -26,25 +26,6 @@ $headerHeight: 3.5em;
padding: 0 1em;
z-index: 2;
button {
background-color: #3f51b5;
color: white;
border: none;
border-radius: 10em;
transition: background-color .2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
$buttonSize: 2.5em;
width: $buttonSize;
height: $buttonSize;
&:hover {
cursor: pointer;
background-color: #5c6bc0;
}
}
a {
display: flex;
flex-direction: row;
@@ -120,45 +101,10 @@ $headerHeight: 3.5em;
top: 0;
right: 0;
z-index: 2;
margin-right: .5em;
a {
display: flex;
justify-content: center;
align-items: center;
min-width: 5em;
color: white;
margin: 0.5em 0.5em;
border-radius: 10em;
text-decoration: none;
padding: 0 .8em;
background-color: #3f51b5;
transition: background-color .2s ease-in-out;
&:hover {
background-color: #5c6bc0;
}
}
button {
display: flex;
justify-content: center;
align-items: center;
min-width: 2.5em;
color: white;
margin: 0.5em 0.5em;
border-radius: 10em;
text-decoration: none;
padding: 0;
background-color: #3f51b5;
transition: background-color .2s ease-in-out;
&:hover {
background-color: #5c6bc0;
}
mat-icon {
margin: 0;
}
a, button {
margin: .5em;
}
}
}

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

@@ -1,4 +1,9 @@
<button type="button" class="close" (click)="closeDialog()" matRipple>
<button type="button"
(click)="closeDialog()"
class="cod-btn icon secondary close"
matTooltip="Close"
matRipple
i18n-matTooltip>
<mat-icon>close</mat-icon>
</button>
<header>

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

@@ -6,20 +6,6 @@
position: relative;
max-height: 90vh;
.close {
position: absolute;
top: 1em;
right: 1em;
width: 2.5em;
height: 2.5em;
border-radius: 10em;
border: none;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
header {
flex: 1;
display: flex;

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

@@ -6,6 +6,7 @@ import { MatFormFieldModule } from "@angular/material/form-field";
import { MatIcon } from "@angular/material/icon";
import { MatInputModule } from "@angular/material/input";
import { MatSelectModule } from '@angular/material/select';
import { MatTooltip } from "@angular/material/tooltip";
export interface ProgramingLanguage {
code: string;
@@ -94,6 +95,7 @@ export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
MatInputModule,
MatRippleModule,
MatSelectModule,
MatTooltip,
ReactiveFormsModule,
]
})

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

@@ -1,4 +1,9 @@
<button type="button" class="close" (click)="closeDialog()" matRipple>
<button type="button"
(click)="closeDialog()"
class="cod-btn icon secondary close"
matTooltip="Close"
matRipple
i18n-matTooltip>
<mat-icon>close</mat-icon>
</button>
<header>

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

@@ -6,20 +6,6 @@
position: relative;
max-height: 90vh;
.close {
position: absolute;
top: 1em;
right: 1em;
width: 2.5em;
height: 2.5em;
border-radius: 10em;
border: none;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
header {
flex: 1;
display: flex;

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

@@ -58,13 +58,6 @@
i18n-matTooltip>
H3
</button>
<button type="button"
(click)="selectAPicture()"
matTooltip="Click to insert a picture"
matRipple
i18n-matTooltip>
<mat-icon>image</mat-icon>
</button>
<button type="button"
(click)="insertLink()"
matTooltip="Click to insert a link"
@@ -72,6 +65,13 @@
i18n-matTooltip>
<mat-icon>link</mat-icon>
</button>
<button type="button"
(click)="selectAPicture()"
matTooltip="Click to insert a picture"
matRipple
i18n-matTooltip>
<mat-icon>image</mat-icon>
</button>
<button type="button"
(click)="displayCodeBlockDialog()"
matTooltip="Click to insert a code block"

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

@@ -6,6 +6,7 @@
</a>
<button type="button"
(click)="close()"
class="cod-btn icon"
matTooltip="Close the menu"
matRipple
i18n-matTooltip>

18
frontend/src/app/components/side-menu/side-menu.component.scss
View File

@@ -41,24 +41,6 @@
height: $imageSize;
}
}
button {
border-radius: 10em;
border: none;
display: flex;
justify-content: center;
align-items: center;
width: 2.5em;
height: 2.5em;
color: white;
background-color: #3f51b5;
transition: background-color .2s ease-in-out;
&:hover {
cursor: pointer;
background-color: #5c6bc0;
}
}
}
h2 {

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

@@ -1,5 +1,5 @@
<button type="submit"
class="cod-button {{color}}"
class="cod-btn {{color}}"
[disabled]="disabled || requestPending"
(click)="click.emit()"
matRipple>

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" matRipple i18n>Create an account</a>
<a [routerLink]="['/signin']" class="cod-btn secondary" matRipple i18n>Create an account</a>
</div>
</form>

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" matRipple i18n>I already have an account</a>
<a [routerLink]="['/login']" class="cod-btn secondary" matRipple i18n>I already have an account</a>
</div>
</form>

21
frontend/src/design_system/button.scss
View File

@@ -1,10 +1,13 @@
button.cod-btn, a.cod-button {
button.cod-btn, a.cod-btn {
padding: .8em 1.2em;
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;
&:hover {
background-color: #5b6ed8;
@@ -19,8 +22,22 @@ button.cod-btn, a.cod-button {
background-color: #f2f4ff;
}
}
&.icon {
$buttonSize: 2.5em;
width: $buttonSize;
height: $buttonSize;
padding: 0;
&.close {
position: absolute;
top: 1em;
right: 1em;
color: black;
}
}
}
a.cod-button {
a.cod-btn {
text-decoration: none;
}