TSP-1180-Highlight timing button when timing popup is open (#28)

This PR has changes made to highlight 'Timing' button when timing popup
is open. The same has been changed for 'Edit' button when list popup is
open. Also, drag boundaries for both timing and list popups have been
corrected.

Author: kaur-mananjeet

script-gen-ui/src/app/components/main-sweep/list/list.component.html

@@ -1,4 +1,4 @@
-<div class="sweep-list-popup" cdkDrag>
+<div class="sweep-list-popup" cdkDrag cdkDragBoundary="body">
   <div class="sweep-list-popup-content">
     <div class="sweep-list-popup-header" cdkDragHandle>
       <h3 style="margin: 0">List</h3>

script-gen-ui/src/app/components/main-sweep/main-sweep.component.html

@@ -18,6 +18,7 @@
       <div [attr.aria-label]="'timingTab'">
         <button
           class="timing"
+          [class.timing-open]="showTiming"
           (click)="enableTiming()"
           [attr.aria-label]="'timing'"
         >
@@ -309,6 +310,7 @@ <h3>Sweep</h3>
           <div style="margin-top: auto; margin-bottom: 0.5vh">
             <button
               [attr.aria-label]="'EditSweepList'"
+              [class.sweepList-open]="showList"
               class="timing"
               (click)="enableList()"
               [disabled]="!isListSweep"

script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss

@@ -256,6 +256,17 @@
   border-style: solid;
   border-width: thin;
   padding: 5px 15px;
+  cursor: pointer;
+}
+
+button.timing.timing-open {
+  outline: 1px solid -webkit-focus-ring-color;
+  outline-offset: -1px;
+}
+
+button.timing.sweepList-open {
+  outline: 1px solid -webkit-focus-ring-color;
+  outline-offset: -1px;
 }
 
 button.timing:disabled {

script-gen-ui/src/app/components/main-sweep/step/step.component.html

@@ -181,6 +181,7 @@ <h3>
       <div style="margin-top: auto; margin-bottom: 0.5vh; margin-left: 3vh">
         <button
           class="timing"
+          [class.stepList-open]="showStepList"
           [attr.aria-label]="'EditStepList'"
           (click)="showStepListPopup()"
           [disabled]="!selectedDeviceOption?.isValid || !listStep"

script-gen-ui/src/app/components/main-sweep/step/step.component.scss

@@ -213,6 +213,12 @@ h4 {
   border-style: solid;
   border-width: thin;
   padding: 5px 15px;
+  cursor: pointer;
+}
+
+button.timing.stepList-open {
+  outline: 1px solid -webkit-focus-ring-color;
+  outline-offset: -1px;
 }
 
 button.timing:disabled {

script-gen-ui/src/app/components/main-sweep/timing/timing.component.html

@@ -1,8 +1,8 @@
 <div class="popup">
-  <div class="popup-content" cdkDrag [cdkDragBoundary]="boundaryElement">
+  <div class="popup-content" cdkDrag cdkDragBoundary="body">
     <!-- <span class="close" (click)="close_Timing()">&times;</span> -->
     <div>
-      <div class="popup-header">
+      <div class="popup-header" cdkDragHandle>
         <h3 id="timingLabel">Timing</h3>
         <button (click)="okTiming()" class="button" [attr.aria-label]="'closeTiming'">
           <mat-icon>close</mat-icon>

script-gen-ui/src/app/components/main-sweep/timing/timing.component.scss

@@ -20,6 +20,7 @@ h3 {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  cursor: move;
 }
 
 .measure-count {

script-gen-ui/src/app/components/main-sweep/timing/timing.component.ts

@@ -23,7 +23,7 @@ import { DropdownComponent } from '../../controls/dropdown/dropdown.component';
 import { InputNumericComponent } from '../../controls/input-numeric/input-numeric.component';
 import { InputPlainComponent } from '../../controls/input-plain/input-plain.component';
 import { InputToggleComponent } from '../../controls/input-toggle/input-toggle.component';
-import {CdkDrag} from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'app-timing',
@@ -37,8 +37,9 @@ import {CdkDrag} from '@angular/cdk/drag-drop';
     InputNumericComponent,
     InputPlainComponent,
     InputToggleComponent,
-    CdkDrag
-  ],
+    CdkDrag,
+    CdkDragHandle
+],
   templateUrl: './timing.component.html',
   styleUrl: './timing.component.scss',
 })