Design fixes to include projects (#10501)

* Design fixes to include projects

* Full-width `spot-list` inside `spot-container`
* Remove button margin from include all subprojects toggle
* Dynamic `spot-tooltip` alignment in project include list
* Add dark `spot-tooltip` version

* Add mobile action-bar wrapping rules

* Try fixing spec

* Increase wait times

* Move margins of spot-list inside to accomodate space for the tooltip

* Only work with top margins by default in spot-container

* Fix mobile margins of action-bar

frontend/src/app/shared/components/project-include/project-include.component.html

@@ -53,6 +53,7 @@
           [selected]="selectedProjects"
           [includeSubprojects]="includeSubprojects$ | async"
           [searchText]="searchText"
+          [root]="true"
           (update)="selectedProjects = $event"
           data-qa-selector="project-include-list"
         ></ul>

frontend/src/app/shared/components/project-include/project-list.component.html

@@ -1,14 +1,15 @@
 <li
   class="spot-list--item"
-  *ngFor="let project of projects"
+  *ngFor="let project of projects; index as i; first as isFirst; last as isLast"
 >
   <label
     class="spot-list--item-action op-project-list--item-action"
     [ngClass]="{ 'spot-list--item-action_disabled': isDisabled(project) }"
   >
     <spot-tooltip
-      alignment="top-left"
+      [alignment]="getAlignment(project, isFirst, isLast)"
       [disabled]="!isDisabled(project)"
+      [dark]="true"
     >
       <ng-container slot="trigger">
         <spot-checkbox

frontend/src/app/shared/components/project-include/project-list.component.ts

@@ -9,6 +9,7 @@ import {
 } from '@angular/core';
 import { IProjectData } from './project-data';
 import { CurrentProjectService } from 'core-app/core/current-project/current-project.service';
+import SpotDropAlignmentOption from 'core-app/spot/drop-alignment-options';
 
 @Component({
   selector: '[op-project-list]',
@@ -23,6 +24,8 @@ export class OpProjectListComponent {
 
   @Output() update = new EventEmitter<string[]>();
 
+  @Input() root:boolean = false;
+
   @Input() projects:IProjectData[] = [];
 
   @Input() selected:string[] = [];
@@ -77,4 +80,16 @@ export class OpProjectListComponent {
       ]);
     }
   }
+
+  public getAlignment(project:IProjectData, isFirst:boolean, isLast:boolean):SpotDropAlignmentOption {
+    if (this.root && isFirst) {
+      if (isLast && !project.children.length) {
+        return SpotDropAlignmentOption.RightCenter;
+      }
+       
+      return SpotDropAlignmentOption.BottomLeft;
+    }
+
+    return SpotDropAlignmentOption.TopLeft;
+  }
 }

frontend/src/app/spot/components/tooltip/tooltip.component.ts

@@ -14,7 +14,9 @@ import SpotDropAlignmentOption from '../../drop-alignment-options';
 export class SpotTooltipComponent {
   @HostBinding('class.spot-tooltip') public className = true;
 
-  @Input() disabled = false;
+  @Input() @HostBinding('class.spot-tooltip_dark') public dark = false;
+
+  @Input() public disabled = false;
 
   @Input() public alignment:SpotDropAlignmentOption = SpotDropAlignmentOption.BottomCenter;
 

frontend/src/app/spot/spot-docs.component.html

@@ -311,35 +311,47 @@ Currently selected value is {{ toggleValue }}
 
 <h1>Tooltip</h1>
 
-<select [(ngModel)]="tooltipAlignment">
-  <option>left-top</option>
-  <option>left-center</option>
-  <option>left-bottom</option>
-  <option>top-left</option>
-  <option>top-center</option>
-  <option>top-right</option>
-  <option>right-top</option>
-  <option>right-center</option>
-  <option>right-bottom</option>
-  <option>bottom-left</option>
-  <option>bottom-center</option>
-  <option>bottom-right</option>
-</select>
-<spot-tooltip [alignment]="tooltipAlignment">
-  <ng-container slot="trigger">Trigger</ng-container>
-  <p
-    slot="body"
-    class="spot-body-small"
-  >Body</p>
-</spot-tooltip>
-
-<spot-tooltip [alignment]="tooltipAlignment">
-  <ng-container slot="trigger">Trigger</ng-container>
-  <ng-container slot="body">
-    <p class="spot-body-small">Body with multiple paragraphs coming in here</p>
-    <p class="spot-body-small">This is the second paragraph</p>
-  </ng-container>
-</spot-tooltip>
+<section class="space-children">
+  <select [(ngModel)]="tooltipAlignment">
+    <option>left-top</option>
+    <option>left-center</option>
+    <option>left-bottom</option>
+    <option>top-left</option>
+    <option>top-center</option>
+    <option>top-right</option>
+    <option>right-top</option>
+    <option>right-center</option>
+    <option>right-bottom</option>
+    <option>bottom-left</option>
+    <option>bottom-center</option>
+    <option>bottom-right</option>
+  </select>
+  <spot-tooltip [alignment]="tooltipAlignment">
+    <ng-container slot="trigger">Trigger</ng-container>
+    <p
+      slot="body"
+      class="spot-body-small"
+    >Body</p>
+  </spot-tooltip>
+
+  <spot-tooltip [alignment]="tooltipAlignment">
+    <ng-container slot="trigger">Trigger</ng-container>
+    <ng-container slot="body">
+      <p class="spot-body-small">Body with multiple paragraphs coming in here</p>
+      <p class="spot-body-small">This is the second paragraph</p>
+    </ng-container>
+  </spot-tooltip>
+
+  <spot-tooltip
+    [alignment]="tooltipAlignment"
+    [dark]="true"
+  >
+    <ng-container slot="trigger">Dark tooltip trigger</ng-container>
+    <ng-container slot="body">
+      <p class="spot-body-small">This is a dark tooltip</p>
+    </ng-container>
+  </spot-tooltip>
+</section>
 
 <h1>Action Bar</h1>
 

frontend/src/app/spot/styles/sass/common/container.sass

@@ -9,12 +9,18 @@
   > .spot-body-big,
   > .spot-body-small,
   > .spot-caption,
-  > .spot-text-field,
+  > .spot-text-field
+    margin: 0 $spot-spacing-1
+    margin-top: $spot-spacing-1
+
+    &:last-child
+      margin-bottom: $spot-spacing-1
+
   > .spot-list
-    margin: $spot-spacing-0_5 $spot-spacing-1
+    padding: $spot-spacing-1 0
 
     &:first-child
-      margin-top: $spot-spacing-1
+      padding-top: $spot-spacing-1
 
     &:last-child
-      margin-bottom: $spot-spacing-1
+      padding-bottom: $spot-spacing-1

frontend/src/app/spot/styles/sass/components/action-bar.sass

@@ -1,9 +1,10 @@
 .spot-action-bar
   display: flex
-  flex-direction: row
+  flex-direction: column
   flex-wrap: nowrap
   justify-content: space-between
   padding: $spot-spacing-1
+  padding-bottom: $spot-spacing-0_5
   background-color: $spot-color-basic-gray-6
 
   &--left,
@@ -12,15 +13,28 @@
     flex-direction: row
     flex-wrap: wrap
     align-items: center
+    justify-content: flex-end
 
-  &--left
-    justify-content: flex-start
+    > *
+      margin-bottom: $spot-spacing-0_5
+      margin-left: $spot-spacing-0_5
 
-    > *:not(:last-child)
-      margin-right: $spot-spacing-1
+  @media #{$spot-mq-action-bar-change}
+    flex-direction: row
 
-  &--right
-    justify-content: flex-end
+    &--left,
+    &--right
+      > *
+        margin-left: 0
+
+    &--left
+      justify-content: flex-start
+
+      > *:not(:last-child)
+        margin-right: $spot-spacing-1
+
+    &--right
+      justify-content: flex-end
 
-    > *:not(:first-child)
-      margin-left: $spot-spacing-1
+      > *:not(:first-child)
+        margin-left: $spot-spacing-1

frontend/src/app/spot/styles/sass/components/tooltip.sass

@@ -16,6 +16,7 @@
 
     box-shadow: $spot-shadow-light-low
     background: $spot-color-main-light
+    color: $spot-color-basic-gray-1
 
     display: flex
     flex-direction: column
@@ -140,3 +141,11 @@
   &:hover &--body
     pointer-events: all
     opacity: 1
+
+  &_dark &--body
+    color: $spot-color-basic-white
+    background: $spot-color-basic-gray-1
+
+    &::before
+      border-bottom-color: $spot-color-basic-gray-1
+    

frontend/src/app/spot/styles/tokens/dist/tokens.json

@@ -54,7 +54,7 @@
   "spot-shadow-hard-low": "2px 2px 5px rgba(0, 0, 0, 0.25)",
   "spot-shadow-hard-mid": "4px 4px 10px rgba(0, 0, 0, 0.25)",
   "spot-shadow-hard-high": "6px 6px 20px rgba(0, 0, 0, 0.25)",
-  "spot-mq-portrait": "'(orientation: portrait)'",
   "spot-mq-landscape": "'(orientation: landscape)'",
-  "spot-mq-drop-modal-in-context": "'(min-width: 680px) and (min-height: 500px)'"
+  "spot-mq-drop-modal-in-context": "'(min-width: 1000px) and (min-height: 500px)'",
+  "spot-mq-action-bar-change": "'(min-width: 768px)'"
 }

frontend/src/app/spot/styles/tokens/dist/tokens.sass

@@ -54,6 +54,6 @@ $spot-shadow-light-high: 6px 6px 20px rgba(0, 0, 0, 0.15)
 $spot-shadow-hard-low: 2px 2px 5px rgba(0, 0, 0, 0.25)
 $spot-shadow-hard-mid: 4px 4px 10px rgba(0, 0, 0, 0.25)
 $spot-shadow-hard-high: 6px 6px 20px rgba(0, 0, 0, 0.25)
-$spot-mq-portrait: '(orientation: portrait)'
 $spot-mq-landscape: '(orientation: landscape)'
-$spot-mq-drop-modal-in-context: '(min-width: 680px) and (min-height: 500px)'
+$spot-mq-drop-modal-in-context: '(min-width: 1000px) and (min-height: 500px)'
+$spot-mq-action-bar-change: '(min-width: 768px)'

frontend/src/app/spot/styles/tokens/media-queries.yml

@@ -5,6 +5,9 @@ props:
   spot-mq-drop-modal-in-context:
     value: "'(min-width: 1000px) and (min-height: 500px)'"
 
+  spot-mq-action-bar-change:
+    value: "'(min-width: 768px)'"
+
 global:
   type: media-query
   category: media-query