feature(wysiwyg): add styles for side-panel

Author: k-belov

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.html

@@ -1,23 +1,19 @@
-<div class="slides-wrapper">
-  <button (click)="addSlide()">Add</button>
+<div class='slides-wrapper'>
+  <button (click)='addSlide()'>Add</button>
 
-  <div cdkDropList (cdkDropListDropped)="reorder.emit($event)">
+  <div (cdkDropListDropped)='reorder.emit($event)' cdkDropList >
     <button
-      class="slide-wrapper"
-      *ngFor="let slide of slides; let i = index"
-      [class.selected]="i === currentSlideIndex"
-      inert="true"
-      (click)="this.contentService.goToSlide(presentationId, i)"
+      inert
+      (click)='this.contentService.goToSlide(presentationId, i)'
+      *ngFor='let slide of slides; let i = index'
+      [class.selected]='i === currentSlideIndex'
+      class='slide-wrapper'
     >
-      <div
-        cdkDrag
-        class="slide"
-        style="pointer-events: none;text-decoration: none; color: inherit"
-      >
+      <div cdkDrag class='slide'>
         <slides-slide-preview
-          mode="preview"
-          [slide]="slide"
-          [class.selected]="i === currentSlideIndex"
+          [class.selected]='i === currentSlideIndex'
+          [slide]='slide'
+          mode='preview'
         ></slides-slide-preview>
       </div>
     </button>

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.scss

@@ -8,24 +8,34 @@
   overflow: scroll;
   display: flex;
   flex-direction: column;
+  width: 114px;
   height: 100%;
+  padding: 0 4px;
   box-shadow: 1px 0 2px 0 #ddd;
-  width: 114px;
   background: #f8f8f8;
 }
 
 .slide-wrapper.selected {
   background: #dde;
 }
+
 .slide-wrapper {
   display: flex;
   justify-content: space-around;
+  width: 100%;
+  min-height: 40px;
   padding: 4px 20px;
   box-sizing: border-box;
-  border: 0 solid;
+  border: 1px solid #ddd;
+  border-radius: 4px;
   background: #f8f8f8;
   margin: 0;
 }
+
+.slide-wrapper + .slide-wrapper {
+  margin-top: 4px;
+}
+
 .slide {
   padding: 0;
   background: #fff;
@@ -35,6 +45,9 @@
   display: flex;
   margin: 0;
   text-align: left;
+  pointer-events: none;
+  text-decoration: none;
+  color: inherit;
 
   slides-slide-preview {
     zoom: 0.2;