Bug fixes for the inline mode and small style tweak

zefoy · Oct 9, 2017 · a61e66a · a61e66a
1 parent 94b65c5
commit a61e66a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/example/src/app/app.component.html b/example/src/app/app.component.html
@@ -347,6 +347,7 @@ <h4><b>by Alberto Pujante</b></h4>
 &lt;span [(colorPicker)]="arrayColors[selectedColor]"
       [cpDialogDisplay]="'inline'"
       [style.background]="arrayColors[selectedColor]"
+      [cpCancelButton]="true"
       [cpToggle]="true"&gt;&lt;/span&gt;
 
 &lt;div [style.background]="arrayColors['color']"

diff --git a/src/lib/color-picker.component.scss b/src/lib/color-picker.component.scss
@@ -44,8 +44,6 @@
     width: 230px;
     height: auto;
     border:#777 solid 1px;
-    left:30px;
-    top:250px;
     position:absolute;
     z-index:100000;
     background-color: #fff;
@@ -219,6 +217,7 @@
         left: 8px;
         position:absolute;
         @include border-radius(50%);
+        border: 1px solid #a9a9a9;
     }
 
     .selected-color-background{

diff --git a/src/lib/color-picker.component.ts b/src/lib/color-picker.component.ts
@@ -264,12 +264,16 @@ export class ColorPickerComponent implements OnInit, AfterViewInit {
     onResize() {
         if (this.position === 'fixed') {
             this.setDialogPosition();
-        } else {
-          this.closeColorPicker();
+        } else if (this.cpDialogDisplay !== 'inline') {
+            this.closeColorPicker();
         }
     }
 
     setDialogPosition() {
+        if (this.cpDialogDisplay === 'inline') {
+          this.position = 'relative';
+          return;
+        }           
         let dialogHeight = this.dialogElement.nativeElement.offsetHeight;
         let node = this.directiveElementRef.nativeElement.parentNode, position = 'static', transform = '';
         let parentNode: any = null, transformNode: any = null, style: any = null;