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

Add buttons in publication editor.

Browse Source
This commit is contained in:
Florian THIERRY
2024-08-25 22:40:11 +02:00
parent 4d20d5f8b8
commit a2f1b511c1
3 changed files with 63 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/app/pages/publication-edition/publication-edition.component.html
View File

@@ -28,7 +28,26 @@
</div>
</div>
<div class="actions">
<button type="button" disabled matTooltip="Click to insert a title 1 section">
H1
</button>
<button type="button" disabled matTooltip="Click to insert a title 2 section">
H2
</button>
<button type="button" disabled matTooltip="Click to insert a title 1 section">
H3
</button>
<button type="button" disabled matTooltip="Click to insert a picture">
<mat-icon>image</mat-icon>
</button>
<button type="button" disabled matTooltip="Click to insert a link">
<mat-icon>link</mat-icon>
</button>
<button type="button" disabled matTooltip="Click to insert a code block">
<mat-icon>code</mat-icon>
</button>
</div>
<mat-form-field class="example-form-field">
<mat-label>Content</mat-label>
<textarea matInput formControlName="text" class="text-input"></textarea>

65
frontend/src/app/pages/publication-edition/publication-edition.component.scss
View File

@@ -29,30 +29,6 @@
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
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;
}
&.secondary {
color: #3f51b5;
background-color: white;
&:hover {
background-color: #f2f4ff;
cursor: pointer;
}
}
}
}
}
}
@@ -118,8 +94,49 @@
}
}
}
.actions {
display: flex;
flex-direction: row;
gap: .5em;
button {
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: 3em;
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;
}
}
}
:host ::ng-deep .test circle {
stroke: white;
}
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;
}
&.secondary {
color: #3f51b5;
background-color: white;
&:hover {
background-color: #f2f4ff;
cursor: pointer;
}
}
}

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

@@ -11,6 +11,7 @@ import {MatDialogModule} from '@angular/material/dialog';
import { PictureSelectionDialog } from './picture-selection-dialog/picture-selection-dialog.component';
import { MatTooltipModule } from '@angular/material/tooltip';
import { SubmitButtonComponent } from '../../components/submit-button/submit-button.component';
import { MatIconModule } from '@angular/material/icon';
@Component({
selector: 'app-publication-edition',
@@ -18,6 +19,7 @@ import { SubmitButtonComponent } from '../../components/submit-button/submit-but
imports: [
CommonModule,
MatDialogModule,
MatIconModule,
MatInputModule,
MatProgressSpinnerModule,
MatTabsModule,