style(Node Authoring): Collapse top UI elements (#1357)

WISE-Community · Jul 25, 2023 · dec3eda · dec3eda
1 parent 1be667a
commit dec3eda
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 149 deletions.
diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
@@ -9,92 +9,66 @@
 ></node-advanced-authoring>
 <div *ngIf="$state.current.name === 'root.at.project.node'">
   <div class="top-button-bar">
-    <div fxLayout="row wrap">
+    <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="16px">
       <button
         mat-raised-button
         color="primary"
-        class="top-button"
         (click)="close()"
         matTooltip="Back"
         matTooltipPosition="above"
         i18n-matTooltip
       >
         <mat-icon>arrow_back</mat-icon>
       </button>
-      <button
-        mat-raised-button
-        color="primary"
-        class="top-button"
-        (click)="showAdvancedView()"
-        matTooltip="Advanced"
-        matTooltipPosition="above"
-        i18n-matTooltip
-      >
-        <mat-icon>build</mat-icon>
-      </button>
-      <button
-        *ngIf="!isGroupNode"
-        mat-raised-button
-        color="primary"
-        class="top-button"
-        (click)="undo()"
-        [disabled]="getSelectedComponents().length !== 0 || undoStack.length === 0"
-        matTooltip="Undo"
-        matTooltipPosition="above"
-        i18n-matTooltip
-      >
-        <mat-icon>undo</mat-icon>
-      </button>
-      <span fxFlex></span>
-      <button
-        *ngIf="!isGroupNode"
-        mat-raised-button
-        color="primary"
-        class="top-button"
-        (click)="previewStepInNewWindow()"
-        [disabled]="showEditTransitions"
-        matTooltip="Preview Step"
-        matTooltipPosition="above"
-        i18n-matTooltip
-      >
-        <mat-icon>visibility</mat-icon>
-      </button>
-    </div>
-    <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="20px" class="step-title-bar">
       <teacher-node-icon [nodeId]="nodeId" [canEdit]="true" size="18"></teacher-node-icon>
-      <div class="step-title-input-div">
-        <mat-form-field class="step-title-input">
-          <mat-label *ngIf="!isGroupNode" i18n>Step Title {{ nodePosition }}:</mat-label>
-          <mat-label *ngIf="isGroupNode" i18n> Activity Title {{ nodePosition }}: </mat-label>
-          <input
-            matInput
-            [(ngModel)]="nodeJson.title"
-            [ngModelOptions]="{ debounce: 500 }"
-            (change)="authoringViewNodeChanged()"
-            aria-label="Title"
-            i18n-aria-label
-          />
-        </mat-form-field>
-      </div>
-      <div class="empty-div-after-step-title"></div>
-      <div *ngIf="!isGroupNode" class="expand-collapse-buttons-div" fxLayoutGap="20px">
+      <mat-form-field class="step-title form-field-no-hint">
+        <mat-label *ngIf="!isGroupNode" i18n>Step Title {{ nodePosition }}:</mat-label>
+        <mat-label *ngIf="isGroupNode" i18n> Activity Title {{ nodePosition }}: </mat-label>
+        <input
+          matInput
+          [(ngModel)]="nodeJson.title"
+          [ngModelOptions]="{ debounce: 500 }"
+          (change)="authoringViewNodeChanged()"
+          aria-label="Title"
+          i18n-aria-label
+        />
+      </mat-form-field>
+      <span fxFlex></span>
+      <div class="node-buttons" fxLayoutGap="16px">
         <button
           mat-raised-button
           color="primary"
-          (click)="setAllComponentsIsExpanded(true)"
-          [disabled]="getNumberOfComponentsExpanded() === components.length"
-          i18n
+          (click)="showAdvancedView()"
+          matTooltip="Advanced"
+          matTooltipPosition="above"
+          i18n-matTooltip
         >
-          + Expand All
+          <mat-icon>build</mat-icon>
         </button>
         <button
+          *ngIf="!isGroupNode"
           mat-raised-button
           color="primary"
-          (click)="setAllComponentsIsExpanded(false)"
-          [disabled]="getNumberOfComponentsExpanded() === 0"
-          i18n
+          (click)="undo()"
+          [disabled]="getSelectedComponents().length !== 0 || undoStack.length === 0"
+          matTooltip="Undo"
+          matTooltipPosition="above"
+          i18n-matTooltip
         >
-          - Collapse All
+          <mat-icon>undo</mat-icon>
+        </button>
+        <button
+          *ngIf="!isGroupNode"
+          mat-raised-button
+          color="primary"
+          class="top-button"
+          (click)="previewStepInNewWindow()"
+          [disabled]="showEditTransitions"
+          matTooltip="Preview Step"
+          matTooltipPosition="above"
+          i18n-matTooltip
+        >
+          <mat-icon>visibility</mat-icon>
         </button>
       </div>
     </div>
@@ -110,14 +84,14 @@
         <mat-icon>add_circle</mat-icon>
       </button>
     </ng-template>
-    <h5
+    <div
       *ngIf="!isGroupNode"
-      style="margin-left: 16px"
+      class="components-header"
       fxLayout="row"
       fxLayoutAlign="start center"
       fxLayoutGap="4px"
     >
-      <span i18n>Components</span>
+      <h5 i18n>Components</h5>
       <ng-container
         *ngTemplateOutlet="addComponentButtonTemplate; context: { componentId: null }"
       ></ng-container>
@@ -153,7 +127,28 @@
           <mat-icon>delete</mat-icon>
         </button>
       </div>
-    </h5>
+      <span fxFlex></span>
+      <div *ngIf="!isGroupNode" fxLayoutGap="16px">
+        <button
+          mat-raised-button
+          color="primary"
+          (click)="setAllComponentsIsExpanded(true)"
+          [disabled]="getNumberOfComponentsExpanded() === components.length"
+          i18n
+        >
+          + Expand All
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          (click)="setAllComponentsIsExpanded(false)"
+          [disabled]="getNumberOfComponentsExpanded() === 0"
+          i18n
+        >
+          - Collapse All
+        </button>
+      </div>
+    </div>
   </div>
   <div *ngIf="components.length === 0 && !isGroupNode" class="no-components-message">
     <em i18n>This step does not have any components. Click the + button to add a component.</em>

diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.scss b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.scss
@@ -1,19 +1,25 @@
+@import
+  'style/abstracts/variables',
+  'style/abstracts/functions';
+
 .top-button-bar {
-  margin: 0px 10px;
+  padding: 8px 8px 4px;
   background-color: white;
   position: sticky;
   top: 26px;
   z-index: 2;
 }
 
-.top-button {
-  margin: 6px 8px;
+.step-title {
+  width: 320px;
+
+  @media (min-width: breakpoint('md.min')) {
+    width: 480px;
+  }
 }
 
-.step-title-bar {
-  margin-top: 20px;
-  margin-left: 16px;
-  margin-right: 16px;
+.node-buttons {
+  margin: 8px 0;
 }
 
 .insert-component-message {
@@ -28,32 +34,21 @@
   font-weight: bold;
 }
 
-.step-title-input-div {
-  width: 50%;
-}
-
-.step-title-input {
-  width: 100%;
-}
-
-.empty-div-after-step-title {
-  flex-grow: 1;
-}
-
-.expand-collapse-buttons-div {
-  flex-shrink: 0;
-  margin-top: 10px;
-}
-
 .no-components-message {
   margin-left: 45px;
   margin-top: 45px;
   font-size: 1em;
   font-weight: bold;
 }
 
+.components-header {
+  margin-top: 8px;
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
 .component {
-  margin: 16px;
+  margin: 4px 16px 16px;
   border: 2px solid #dddddd;
   border-radius: 6px;
   position: relative;

diff --git a/src/assets/wise5/vle/node-icon/node-icon.component.html b/src/assets/wise5/vle/node-icon/node-icon.component.html
@@ -19,7 +19,7 @@
   mat-button
   matTooltip="Choose an Icon"
   matTooltipPosition="above"
-  class="mat-form-field-appearance-fill"
+  class="mdc-text-field--filled"
   (click)="openNodeIconChooserDialog()"
 >
   <div class="mat-form-field-flex" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="4px">

diff --git a/src/assets/wise5/vle/node-icon/node-icon.component.scss b/src/assets/wise5/vle/node-icon/node-icon.component.scss
@@ -5,7 +5,8 @@
 
 .mat-mdc-button {
   text-transform: none;
-  padding: 0;
+  padding: 8px;
+  height: 100%;
 }
 
 /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */