From 23e416eadbb81f4af6810486dcb70485b01b2482 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Tue, 23 May 2023 15:24:16 +0200
Subject: [PATCH] [editor] Fix layout of add section button in CanvasComponent
---
.../app/components/canvas/canvas.component.html | 4 ++--
.../app/components/canvas/canvas.component.ts | 16 ++++++----------
2 files changed, 8 insertions(+), 12 deletions(-)
diff --git a/projects/editor/src/app/components/canvas/canvas.component.html b/projects/editor/src/app/components/canvas/canvas.component.html
index 496d8322e..2db4c17e4 100644
--- a/projects/editor/src/app/components/canvas/canvas.component.html
+++ b/projects/editor/src/app/components/canvas/canvas.component.html
@@ -42,9 +42,9 @@
</div>
</div>
- <button mat-fab class="add-section-button"
+ <button mat-raised-button class="add-section-button"
[style.width.px]="page.hasMaxWidth ? page.maxWidth : null"
(click)="addSection()">
- <mat-icon>add</mat-icon>
+ <mat-icon class="add-section-icon">add</mat-icon>
</button>
</div>
diff --git a/projects/editor/src/app/components/canvas/canvas.component.ts b/projects/editor/src/app/components/canvas/canvas.component.ts
index 7254f754c..02a784f3b 100644
--- a/projects/editor/src/app/components/canvas/canvas.component.ts
+++ b/projects/editor/src/app/components/canvas/canvas.component.ts
@@ -21,20 +21,16 @@ import { SectionDynamicComponent } from './section-dynamic.component';
height: 100%;
overflow: auto;
}
+ .add-section-icon{
+ font-size: 24px;
+ color: white;
+ margin-top: -5px;
+ }
.add-section-button {
width: 100%;
height: 25px;
background-color: #BABABA;
margin-top: 10px;
- border-radius: 10%;
- }
- /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
- ::ng-deep .add-section-button span.mat-button-wrapper {
- padding: 0;
- }
- /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
- ::ng-deep .add-section-button span.mat-button-wrapper mat-icon {
- vertical-align: unset;
}
.hidden {
display: none !important;
@@ -51,7 +47,7 @@ import { SectionDynamicComponent } from './section-dynamic.component';
align-items: stretch;
}
`]
-})
+ })
export class CanvasComponent {
@Input() page!: Page;
@ViewChildren('sectionComponent')
--
GitLab