Fixes to make content selector styles the same when dragging or static

package.json

@@ -200,5 +200,10 @@
     "tslint": "^6.1.3",
     "typescript": "^4.3.5",
     "vinyl-paths": "^3.0.1"
+  },
+  "overrides": {
+    "gulp-typescript": {
+      "source-map": "0.7.4"
+    }
   }
 }

packages/angular/src/selector/selector.component.html

@@ -35,7 +35,7 @@ <h3 [textContent]="'Selected ' + (type || 'Items')"></h3>
         <!--<span class="selectedModels" style="display: none" [textContent]="dataSub | async | json"></span>-->
         <!--<span class="selectedModels" style="display: none" *ngIf="log('selector.ngIf:', dataSub | async)"></span>-->
         <!-- [cdkDragDisabled]="get(selectedModel, 'status') < 1" -->
-        <div cdkDrag class="selected-list-row selected-box"
+        <div cdkDrag class="selected-list-row selected-box sa-drag-container"
              [ngClass]="{'active': get(selectedModel, 'status') === 1, 'inactive' : get(selectedModel, 'status') !== 1, 'published': get(selectedModel, 'version.published') === 1, 'unpublished': get(selectedModel, 'version.published') !== 1}"
              *ngFor="let selectedModel of dataSub | async">
             <div class="custom-ghost-placeholder" *cdkDragPlaceholder></div>

packages/angular/src/selector/selector.component.scss

@@ -121,9 +121,34 @@ md-autocomplete,
   min-height: 60px;
   display: block;
   border-radius: 4px;
-  overflow: hidden;
+  //overflow: hidden;
+  .routing {
+    color: #333;
+    font-size: 13px;
+  }
+  .selected-list-header {
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+    h3,
+    .note {
+      margin: 0;
+      padding-left: 10px;
+      display: inline-block;
+      vertical-align: text-bottom;
+      line-height: 1.2;
+    }
+  }
+  .selected-message-box {
+    // extra information for the list messages (currently only used for an empty list)
+  }
+}
+
+/* Do not limit these classes with any others, otherwise when the item is dragged it will lose styling */
+.selected-list-container {
+  width: 100% !important;
 }
-.selected-box {
+.sa-drag-container {
+  margin-bottom: 10px;
   padding: 12px 16px;
   color: rgba(0, 0, 0, 0.87);
   display: flex;
@@ -132,45 +157,33 @@ md-autocomplete,
   justify-content: space-between;
   box-sizing: border-box;
   cursor: move;
-  background: white;
   font-size: 14px;
-}
-.selected-box.cdk-drag-preview {
-  box-sizing: border-box;
+  background: white;
   border-radius: 4px;
-  box-shadow: 2px 2px 4px rgba(0,0,0,.3)
-}
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-.selected-box:last-child {
-  border: none;
-}
-.selected-list.cdk-drop-list-dragging .selected-box:not(.cdk-drag-placeholder) {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-.custom-ghost-placeholder {
-  background: rgba(0,0,0,.4);
-  min-height: 60px;
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-
-/* Selected List Custom */
-
-
-sa-selector,
-sa-internal-selector,
-.selected-box.cdk-drag-preview {
+  box-shadow: 2px 2px 4px rgba(0,0,0,.3);
+  //background: rgba(0, 0, 0, 0.04);
+  &.active {
+    // extra options for status >= 1
+  }
+  &.inactive {
+    // extra options for status < 1
+    background: #DDD;
+  }
+  &.published {
+    // extra options for status == 1
+  }
+  &.unpublished {
+    // extra options for published != 1
+    background: #DDD;
+  }
+  &:last-child {
+    border: none;
+  }
   .column-image,
   .column-title,
   .column-action {
     float: left;
   }
-}
-
-sa-selector,
-sa-internal-selector {
   .column-image {
     width: 15%;
     padding-right: 10px;
@@ -183,6 +196,9 @@ sa-internal-selector {
     width: 60%;
     padding-right: 10px;
   }
+  .column-image {
+    width: 15%;
+  }
   .column-action {
     width: 25%;
     > * {
@@ -193,67 +209,6 @@ sa-internal-selector {
         margin-bottom: 0;
       }
     }
-  }
-}
-.selected-box.cdk-drag-preview {
-  .column-image {
-    width: 15%;
-  }
-  .column-title {
-    width: 85%;
-  }
-}
-
-
-
-sa-selector,
-sa-internal-selector {
-  margin: 0 auto;
-  .routing {
-    color: #333;
-    font-size: 13px;
-  }
-  .selected-list {
-    .selected-list-header {
-      margin-bottom: 20px;
-      padding-bottom: 20px;
-      h3,
-      .note {
-        margin: 0;
-        display: inline-block;
-        vertical-align: text-bottom;
-        line-height: 1.2;
-      }
-      .note {
-        padding-left: 10px;
-      }
-    }
-    .selected-message-box {
-      // extra information for the list messages (currently only used for an empty list)
-    }
-    .selected-list-container {
-      width: 100%;
-    }
-    .selected-list-row {
-      margin-bottom: 10px;
-      padding: 12px 16px;
-      background: rgba(0, 0, 0, 0.04);
-      border-radius: 2px;
-      &.active {
-        // extra options for status >= 1
-      }
-      &.inactive {
-        // extra options for status < 1
-        background: #DDD;
-      }
-      &.published {
-        // extra options for status == 1
-      }
-      &.unpublished {
-        // extra options for published != 1
-        background: #DDD;
-      }
-    }
     .btn.btn-delete, .btn.btn-edit, .btn.btn-status {
       float: right;
       width: 35px;
@@ -278,10 +233,28 @@ sa-internal-selector {
     }
   }
 }
-.firefox .btn.btn-delete svg, .firefox .btn.btn-edit svg {
-  &,
-  g {
-    max-width: 28px;
-    max-height: 28px;
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.selected-list.cdk-drop-list-dragging {
+  .selected-box:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+  .custom-ghost-placeholder {
+    background: #fff;
+    min-height: 60px;
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+.firefox {
+  .btn.btn-delete, btn.btn-edit {
+    svg {
+      &,
+      g {
+        max-width: 28px;
+        max-height: 28px;
+      }
+    }
   }
 }