feat: move button to switch into edit mode to a newly created left-al…

…igned side menu chore: remove style definitions of the previously used action buttons
openeduhub · Nov 8, 2024 · 29d1dc7 · 29d1dc7
1 parent 902ba4c
commit 29d1dc7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 55 deletions.
diff --git a/src/app/wlo-search/template/template.component.html b/src/app/wlo-search/template/template.component.html
@@ -16,37 +16,24 @@
           [defaultNodeId]="defaultTopicTextNodeId"
           [topic]="topic()"
         ></wlo-topic-header>
-        <!-- action buttons for editing and creating -->
-        <!-- duplicated code due to https://github.com/angular/components/issues/15367 -->
-        <ng-container *ngIf="userHasEditRights()">
-          <button
-            *ngIf="!editMode"
-            mat-stroked-button
-            class="edit-button"
-            color="primary"
-            [disabled]="requestInProgress"
-            (click)="editMode = !editMode"
-            aria-label="Switch into edit mode"
-          >
-            <mat-icon>edit</mat-icon>
-          </button>
-          <button
-            *ngIf="editMode"
-            mat-flat-button
-            class="edit-button"
-            color="primary"
-            [disabled]="requestInProgress"
-            (click)="editMode = !editMode"
-            aria-label="Switch into view mode"
-          >
-            <mat-icon>edit</mat-icon>
-          </button>
-        </ng-container>
       </div>
     </div>
   </header>
 
-  <!-- SIDE MENU WITH MULTIPLE COLLAPSIBLE ITEMS -->
+  <!-- LEFT SIDE MENU WITH ACTION BUTTONS -->
+  <wlo-side-menu-wrapper position="left">
+    <ng-container slot="menu">
+      <wlo-side-menu-item
+        [attr.aria-label]="editMode ? 'Switch into preview mode' : 'Switch into edit mode'"
+        color="primary"
+        position="left"
+        [title]="editMode ? actionItems.previewMode : actionItems.editMode"
+        (itemClicked)="editMode = !editMode"
+      ></wlo-side-menu-item>
+    </ng-container>
+  </wlo-side-menu-wrapper>
+
+  <!-- RIGHT SIDE MENU WITH MULTIPLE COLLAPSIBLE ITEMS -->
   <wlo-side-menu-wrapper
     [selectedMenuItem]="selectedMenuItem"
     (closeContentView)="selectedMenuItem = ''"

diff --git a/src/app/wlo-search/template/template.component.scss b/src/app/wlo-search/template/template.component.scss
@@ -2,8 +2,6 @@
     --topic-color: #182e5c;
     --border-radius: 24px;
     --maximal-width: 1200px;
-    --action-button-border-radius: 18px;
-    --action-button-spacing: 9px;
     --filterbar-height: 89px;
     --filterbar-offset: 20px;
     display: flex;
@@ -58,32 +56,6 @@
             justify-content: space-between;
             background: #fff;
             border-radius: var(--border-radius) var(--border-radius) 0 0;
-
-            .edit-button,
-            .add-button {
-                position: absolute;
-                top: var(--action-button-spacing);
-                padding: 0;
-                min-width: 42px;
-                height: 36px;
-
-                .mat-icon {
-                    margin: 0 auto;
-                    font-size: 24px;
-                    height: 24px;
-                    width: 24px;
-                }
-            }
-
-            .edit-button {
-                left: var(--action-button-spacing);
-                border-top-left-radius: var(--action-button-border-radius);
-            }
-
-            .add-button {
-                right: var(--action-button-spacing);
-                border-top-right-radius: var(--action-button-border-radius);
-            }
         }
     }
 }

diff --git a/src/app/wlo-search/template/template.component.ts b/src/app/wlo-search/template/template.component.ts
@@ -147,6 +147,11 @@ export class TemplateComponent implements OnInit {
     selectDimensionsLoaded: boolean = false;
 
     selectedMenuItem: string = '';
+    actionItems = {
+        editMode: 'Bearbeitungsmodus',
+        previewMode: 'Zurück zur Vorschau',
+    };
+
     menuItems = {
         feedback: 'Feedback',
         profiling: 'Profilierung',