Merge pull request #336 from thebf/visualmultiselect

Added fourth checkedStyle
softsimon · Nov 28, 2017 · f12ed6c · f12ed6c
2 parents 3667f81 + bb948bf
commit f12ed6c
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 1 deletion.
diff --git a/src/dropdown/dropdown.component.css b/src/dropdown/dropdown.component.css
@@ -11,3 +11,34 @@ a {
   white-space: nowrap;
   display: inline-block;
 }
+
+.chunkydropdown-menu {
+  min-width: 20em;
+}
+
+.chunkyrow {
+  line-height: 2;
+  margin-left: 1em;
+  font-size: 2em;
+}
+
+.slider {
+  width:3.8em;
+  height:3.8em;
+  display:block;
+  -webkit-transition: all 0.125s linear;
+  -moz-transition: all 0.125s linear;
+  -o-transition: all 0.125s linear;
+  transition: all 0.125s linear;
+  margin-left: 0.125em;
+  margin-top: auto;
+}
+
+.slideron {
+  margin-left: 1.35em;
+}
+
+.content_wrapper{
+  display: table-cell;
+  vertical-align: middle;
+}
diff --git a/src/dropdown/dropdown.component.html b/src/dropdown/dropdown.component.html
@@ -1,6 +1,7 @@
 <div class="dropdown" [ngClass]="settings.containerClasses" [class.open]="isVisible">
   <button type="button" class="dropdown-toggle" [ngClass]="settings.buttonClasses" (click)="toggleDropdown()" [disabled]="disabled">{{ title }}<span class="caret"></span></button>
   <ul #scroller *ngIf="isVisible" class="dropdown-menu"
+      [ngClass] = "{'chunkydropdown-menu': settings.checkedStyle == 'visual' }"
       (scroll)="settings.isLazyLoad ? checkScrollPosition($event) : null"
       (wheel)="settings.stopScrollPropagation ? checkScrollPropagation($event, scroller) : null"
       [class.pull-right]="settings.pullRight" [class.dropdown-menu-right]="settings.pullRight"
@@ -42,8 +43,17 @@
             <span *ngSwitchCase="'fontawesome'" style="width: 16px;display: inline-block;">
               <i *ngIf="isSelected(option)" class="fa fa-check" aria-hidden="true"></i>
             </span>
+            <span *ngSwitchCase="'visual'" style="display:block;float:left; border-radius: 0.2em; border: 0.1em solid rgba(44, 44, 44, 0.63);background:rgba(0, 0, 0, 0.1);width: 5.5em;">
+              <div class="slider" [ngClass]="{'slideron': isSelected(option)}">
+                <img *ngIf="option.image != null" [src] = option.image style = "height: 100%; width: 100%; object-fit: contain"/>
+                <div *ngIf="option.image == null" style = "height: 100%; width: 100%;text-align: center; display: table; background-color:rgba(0, 0, 0, 0.74)">
+                  <div class="content_wrapper">
+                  <span style="font-size:3em;color:white" class="glyphicon glyphicon-eye-close"></span>
+                </div>
+                </div>
+            </span>
           </ng-container>
-          <span [ngClass]="settings.itemClasses" [style.font-weight]="this.parents.indexOf(option.id)>=0?'bold':'normal'">
+          <span [ngClass] = "{'chunkyrow': settings.checkedStyle == 'visual' }" [ngClass]="settings.itemClasses" [style.font-weight]="this.parents.indexOf(option.id)>=0?'bold':'normal'">
             {{ option.name }}
           </span>
         </a>

diff --git a/src/dropdown/types.ts b/src/dropdown/types.ts
@@ -5,6 +5,7 @@ export interface IMultiSelectOption {
   parentId?: any;
   params?: any;
   classes?: string;
+  image?: string;
 }
 
 export interface IMultiSelectSettings {