Fixed #6915 - PickList - OrderList does not highlight drop points

primefaces · Nov 26, 2018 · 72e62f3 · 72e62f3
1 parent 6704f3e
commit 72e62f3
Show file tree

Hide file tree

Showing 10 changed files with 2,980 additions and 2,305 deletions.
diff --git a/src/app/components/orderlist/orderlist.ts b/src/app/components/orderlist/orderlist.ts
@@ -26,7 +26,7 @@ import {ObjectUtils} from '../utils/objectutils';
                 <ul #listelement class="ui-widget-content ui-orderlist-list ui-corner-bottom" [ngStyle]="listStyle" (dragover)="onListMouseMove($event)">
                     <ng-template ngFor [ngForTrackBy]="trackBy" let-item [ngForOf]="value" let-i="index" let-l="last">
                         <li class="ui-orderlist-droppoint" *ngIf="dragdrop && isItemVisible(item)" (dragover)="onDragOver($event, i)" (drop)="onDrop($event, i)" (dragleave)="onDragLeave($event)" 
-                            [ngClass]="{'ui-state-highlight': (i === dragOverItemIndex)}"></li>
+                            [ngClass]="{'ui-orderlist-droppoint-highlight': (i === dragOverItemIndex)}"></li>
                         <li class="ui-orderlist-item" [attr.tabindex]="0"
                             [ngClass]="{'ui-state-highlight':isSelected(item)}" 
                             (click)="onItemClick($event,item,i)" (touchend)="onItemTouchEnd($event)"
@@ -35,7 +35,7 @@ import {ObjectUtils} from '../utils/objectutils';
                             <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"></ng-container>
                         </li>
                         <li class="ui-orderlist-droppoint" *ngIf="dragdrop && l" (dragover)="onDragOver($event, i + 1)" (drop)="onDrop($event, i + 1)" (dragleave)="onDragLeave($event)" 
-                            [ngClass]="{'ui-state-highlight': (i + 1 === dragOverItemIndex)}"></li>
+                            [ngClass]="{'ui-orderlist-droppoint-highlight': (i + 1 === dragOverItemIndex)}"></li>
                     </ng-template>
                 </ul>
             </div>
@@ -319,6 +319,7 @@ export class OrderList implements AfterViewChecked,AfterContentInit {
     }
 
     onDragStart(event: DragEvent, index: number) {
+        (<HTMLLIElement> event.target).blur();
         this.dragging = true;
         this.draggedItemIndex = index;
         if (this.dragdropScope) {

diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts
@@ -534,6 +534,7 @@ export class PickList implements AfterViewChecked,AfterContentInit {
     }
 
     onDragStart(event: DragEvent, index: number, listType: number) {
+        (<HTMLLIElement> event.target).blur();
         this.dragging = true;
         this.fromListType = listType;
         if(listType === this.SOURCE_LIST)

diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css
@@ -417,7 +417,7 @@ body .ui-dropdown {
 body .ui-dropdown:not(.ui-state-disabled):hover {
   border-color: #FFB300;
 }
-body .ui-dropdown:not(.ui-state-disabled):focus {
+body .ui-dropdown:not(.ui-state-disabled).ui-state-focus {
   border-color: #FFB300;
   outline: 0 none;
   -webkit-box-shadow: none;
@@ -441,13 +441,6 @@ body .ui-dropdown .ui-dropdown-trigger .ui-dropdown-trigger-icon:before {
 body .ui-dropdown .ui-dropdown-clear-icon {
   color: #dedede;
 }
-body .ui-dropdown:not(.ui-state-disabled).ui-state-focus {
-  border-color: #FFB300;
-  outline: 0 none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
 body .ui-dropdown-panel {
   padding: 0;
   border: 1px solid #191919;
@@ -505,7 +498,7 @@ body .ui-multiselect {
 body .ui-multiselect:not(.ui-state-disabled):hover {
   border-color: #FFB300;
 }
-body .ui-multiselect:not(.ui-state-disabled):focus {
+body .ui-multiselect:not(.ui-state-disabled).ui-state-focus {
   border-color: #FFB300;
   outline: 0 none;
   -webkit-box-shadow: none;
@@ -2121,6 +2114,9 @@ body .ui-picklist .ui-picklist-list .ui-picklist-item.ui-state-highlight {
   background-color: #FFB300;
   color: #212121;
 }
+body .ui-picklist .ui-picklist-list .ui-picklist-droppoint-highlight {
+  background-color: #FFB300;
+}
 @media (max-width: 40em) {
   body .ui-picklist.ui-picklist-responsive .ui-picklist-buttons {
     padding: 0.571em 1em;
@@ -2187,6 +2183,9 @@ body .ui-orderlist .ui-orderlist-list .ui-orderlist-item.ui-state-highlight {
   background-color: #FFB300;
   color: #212121;
 }
+body .ui-orderlist .ui-orderlist-list .ui-orderlist-droppoint-highlight {
+  background-color: #FFB300;
+}
 body .ui-tree {
   border: 1px solid #191919;
   background-color: #323232;
@@ -3414,5 +3413,3 @@ body .ui-fluid .ui-inplace.ui-inplace-closable .ui-inplace-content > :first-chil
 }
 
 /* Add your customizations of theme here */
-
-/*# sourceMappingURL=theme.css.map */
diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css
@@ -417,7 +417,7 @@ body .ui-dropdown {
 body .ui-dropdown:not(.ui-state-disabled):hover {
   border-color: #1f7ed0;
 }
-body .ui-dropdown:not(.ui-state-disabled):focus {
+body .ui-dropdown:not(.ui-state-disabled).ui-state-focus {
   border-color: #1f7ed0;
   outline: 0 none;
   -webkit-box-shadow: none;
@@ -441,13 +441,6 @@ body .ui-dropdown .ui-dropdown-trigger .ui-dropdown-trigger-icon:before {
 body .ui-dropdown .ui-dropdown-clear-icon {
   color: #dedede;
 }
-body .ui-dropdown:not(.ui-state-disabled).ui-state-focus {
-  border-color: #1f7ed0;
-  outline: 0 none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
 body .ui-dropdown-panel {
   padding: 0;
   border: 1px solid #191919;
@@ -505,7 +498,7 @@ body .ui-multiselect {
 body .ui-multiselect:not(.ui-state-disabled):hover {
   border-color: #1f7ed0;
 }
-body .ui-multiselect:not(.ui-state-disabled):focus {
+body .ui-multiselect:not(.ui-state-disabled).ui-state-focus {
   border-color: #1f7ed0;
   outline: 0 none;
   -webkit-box-shadow: none;
@@ -2121,6 +2114,9 @@ body .ui-picklist .ui-picklist-list .ui-picklist-item.ui-state-highlight {
   background-color: #1f7ed0;
   color: #ffffff;
 }
+body .ui-picklist .ui-picklist-list .ui-picklist-droppoint-highlight {
+  background-color: #1f7ed0;
+}
 @media (max-width: 40em) {
   body .ui-picklist.ui-picklist-responsive .ui-picklist-buttons {
     padding: 0.571em 1em;
@@ -2187,6 +2183,9 @@ body .ui-orderlist .ui-orderlist-list .ui-orderlist-item.ui-state-highlight {
   background-color: #1f7ed0;
   color: #ffffff;
 }
+body .ui-orderlist .ui-orderlist-list .ui-orderlist-droppoint-highlight {
+  background-color: #1f7ed0;
+}
 body .ui-tree {
   border: 1px solid #191919;
   background-color: #323232;
@@ -3414,5 +3413,3 @@ body .ui-fluid .ui-inplace.ui-inplace-closable .ui-inplace-content > :first-chil
 }
 
 /* Add your customizations of theme here */
-
-/*# sourceMappingURL=theme.css.map */
diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css
@@ -417,7 +417,7 @@ body .ui-dropdown {
 body .ui-dropdown:not(.ui-state-disabled):hover {
   border-color: #1ea04c;
 }
-body .ui-dropdown:not(.ui-state-disabled):focus {
+body .ui-dropdown:not(.ui-state-disabled).ui-state-focus {
   border-color: #1ea04c;
   outline: 0 none;
   -webkit-box-shadow: none;
@@ -441,13 +441,6 @@ body .ui-dropdown .ui-dropdown-trigger .ui-dropdown-trigger-icon:before {
 body .ui-dropdown .ui-dropdown-clear-icon {
   color: #dedede;
 }
-body .ui-dropdown:not(.ui-state-disabled).ui-state-focus {
-  border-color: #1ea04c;
-  outline: 0 none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
 body .ui-dropdown-panel {
   padding: 0;
   border: 1px solid #191919;
@@ -505,7 +498,7 @@ body .ui-multiselect {
 body .ui-multiselect:not(.ui-state-disabled):hover {
   border-color: #1ea04c;
 }
-body .ui-multiselect:not(.ui-state-disabled):focus {
+body .ui-multiselect:not(.ui-state-disabled).ui-state-focus {
   border-color: #1ea04c;
   outline: 0 none;
   -webkit-box-shadow: none;
@@ -2121,6 +2114,9 @@ body .ui-picklist .ui-picklist-list .ui-picklist-item.ui-state-highlight {
   background-color: #1ea04c;
   color: #ffffff;
 }
+body .ui-picklist .ui-picklist-list .ui-picklist-droppoint-highlight {
+  background-color: #1ea04c;
+}
 @media (max-width: 40em) {
   body .ui-picklist.ui-picklist-responsive .ui-picklist-buttons {
     padding: 0.571em 1em;
@@ -2187,6 +2183,9 @@ body .ui-orderlist .ui-orderlist-list .ui-orderlist-item.ui-state-highlight {
   background-color: #1ea04c;
   color: #ffffff;
 }
+body .ui-orderlist .ui-orderlist-list .ui-orderlist-droppoint-highlight {
+  background-color: #1ea04c;
+}
 body .ui-tree {
   border: 1px solid #191919;
   background-color: #323232;
@@ -3414,5 +3413,3 @@ body .ui-fluid .ui-inplace.ui-inplace-closable .ui-inplace-content > :first-chil
 }
 
 /* Add your customizations of theme here */
-
-/*# sourceMappingURL=theme.css.map */
diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css
@@ -417,7 +417,7 @@ body .ui-dropdown {
 body .ui-dropdown:not(.ui-state-disabled):hover {
   border-color: #cc285c;
 }
-body .ui-dropdown:not(.ui-state-disabled):focus {
+body .ui-dropdown:not(.ui-state-disabled).ui-state-focus {
   border-color: #cc285c;
   outline: 0 none;
   -webkit-box-shadow: none;
@@ -441,13 +441,6 @@ body .ui-dropdown .ui-dropdown-trigger .ui-dropdown-trigger-icon:before {
 body .ui-dropdown .ui-dropdown-clear-icon {
   color: #dedede;
 }
-body .ui-dropdown:not(.ui-state-disabled).ui-state-focus {
-  border-color: #cc285c;
-  outline: 0 none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
 body .ui-dropdown-panel {
   padding: 0;
   border: 1px solid #191919;
@@ -505,7 +498,7 @@ body .ui-multiselect {
 body .ui-multiselect:not(.ui-state-disabled):hover {
   border-color: #cc285c;
 }
-body .ui-multiselect:not(.ui-state-disabled):focus {
+body .ui-multiselect:not(.ui-state-disabled).ui-state-focus {
   border-color: #cc285c;
   outline: 0 none;
   -webkit-box-shadow: none;
@@ -2121,6 +2114,9 @@ body .ui-picklist .ui-picklist-list .ui-picklist-item.ui-state-highlight {
   background-color: #cc285c;
   color: #ffffff;
 }
+body .ui-picklist .ui-picklist-list .ui-picklist-droppoint-highlight {
+  background-color: #cc285c;
+}
 @media (max-width: 40em) {
   body .ui-picklist.ui-picklist-responsive .ui-picklist-buttons {
     padding: 0.571em 1em;
@@ -2187,6 +2183,9 @@ body .ui-orderlist .ui-orderlist-list .ui-orderlist-item.ui-state-highlight {
   background-color: #cc285c;
   color: #ffffff;
 }
+body .ui-orderlist .ui-orderlist-list .ui-orderlist-droppoint-highlight {
+  background-color: #cc285c;
+}
 body .ui-tree {
   border: 1px solid #191919;
   background-color: #323232;
@@ -3414,5 +3413,3 @@ body .ui-fluid .ui-inplace.ui-inplace-closable .ui-inplace-content > :first-chil
 }
 
 /* Add your customizations of theme here */
-
-/*# sourceMappingURL=theme.css.map */
diff --git a/src/assets/components/themes/nova-colored/theme.css b/src/assets/components/themes/nova-colored/theme.css
@@ -417,7 +417,7 @@ body .ui-dropdown {
 body .ui-dropdown:not(.ui-state-disabled):hover {
   border-color: #212121;
 }
-body .ui-dropdown:not(.ui-state-disabled):focus {
+body .ui-dropdown:not(.ui-state-disabled).ui-state-focus {
   border-color: #007ad9;
   outline: 0 none;
   -webkit-box-shadow: none;
@@ -441,13 +441,6 @@ body .ui-dropdown .ui-dropdown-trigger .ui-dropdown-trigger-icon:before {
 body .ui-dropdown .ui-dropdown-clear-icon {
   color: #737373;
 }
-body .ui-dropdown:not(.ui-state-disabled).ui-state-focus {
-  border-color: #007ad9;
-  outline: 0 none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
 body .ui-dropdown-panel {
   padding: 0;
   border: 1px solid #c8c8c8;
@@ -505,7 +498,7 @@ body .ui-multiselect {
 body .ui-multiselect:not(.ui-state-disabled):hover {
   border-color: #212121;
 }
-body .ui-multiselect:not(.ui-state-disabled):focus {
+body .ui-multiselect:not(.ui-state-disabled).ui-state-focus {
   border-color: #007ad9;
   outline: 0 none;
   -webkit-box-shadow: none;
@@ -2121,6 +2114,9 @@ body .ui-picklist .ui-picklist-list .ui-picklist-item.ui-state-highlight {
   background-color: #e02365;
   color: #ffffff;
 }
+body .ui-picklist .ui-picklist-list .ui-picklist-droppoint-highlight {
+  background-color: #e02365;
+}
 @media (max-width: 40em) {
   body .ui-picklist.ui-picklist-responsive .ui-picklist-buttons {
     padding: 0.571em 1em;
@@ -2187,6 +2183,9 @@ body .ui-orderlist .ui-orderlist-list .ui-orderlist-item.ui-state-highlight {
   background-color: #e02365;
   color: #ffffff;
 }
+body .ui-orderlist .ui-orderlist-list .ui-orderlist-droppoint-highlight {
+  background-color: #e02365;
+}
 body .ui-tree {
   border: 1px solid #c8c8c8;
   background-color: #ffffff;
@@ -3414,5 +3413,3 @@ body .ui-fluid .ui-inplace.ui-inplace-closable .ui-inplace-content > :first-chil
 }
 
 /* Add your customizations of theme here */
-
-/*# sourceMappingURL=theme.css.map */
diff --git a/src/assets/components/themes/nova-dark/theme.css b/src/assets/components/themes/nova-dark/theme.css
@@ -417,7 +417,7 @@ body .ui-dropdown {
 body .ui-dropdown:not(.ui-state-disabled):hover {
   border-color: #212121;
 }
-body .ui-dropdown:not(.ui-state-disabled):focus {
+body .ui-dropdown:not(.ui-state-disabled).ui-state-focus {
   border-color: #007ad9;
   outline: 0 none;
   -webkit-box-shadow: none;
@@ -441,13 +441,6 @@ body .ui-dropdown .ui-dropdown-trigger .ui-dropdown-trigger-icon:before {
 body .ui-dropdown .ui-dropdown-clear-icon {
   color: #737373;
 }
-body .ui-dropdown:not(.ui-state-disabled).ui-state-focus {
-  border-color: #007ad9;
-  outline: 0 none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
 body .ui-dropdown-panel {
   padding: 0;
   border: 1px solid #c8c8c8;
@@ -505,7 +498,7 @@ body .ui-multiselect {
 body .ui-multiselect:not(.ui-state-disabled):hover {
   border-color: #212121;
 }
-body .ui-multiselect:not(.ui-state-disabled):focus {
+body .ui-multiselect:not(.ui-state-disabled).ui-state-focus {
   border-color: #007ad9;
   outline: 0 none;
   -webkit-box-shadow: none;
@@ -2121,6 +2114,9 @@ body .ui-picklist .ui-picklist-list .ui-picklist-item.ui-state-highlight {
   background-color: #007ad9;
   color: #ffffff;
 }
+body .ui-picklist .ui-picklist-list .ui-picklist-droppoint-highlight {
+  background-color: #007ad9;
+}
 @media (max-width: 40em) {
   body .ui-picklist.ui-picklist-responsive .ui-picklist-buttons {
     padding: 0.571em 1em;
@@ -2187,6 +2183,9 @@ body .ui-orderlist .ui-orderlist-list .ui-orderlist-item.ui-state-highlight {
   background-color: #007ad9;
   color: #ffffff;
 }
+body .ui-orderlist .ui-orderlist-list .ui-orderlist-droppoint-highlight {
+  background-color: #007ad9;
+}
 body .ui-tree {
   border: 1px solid #c8c8c8;
   background-color: #ffffff;
@@ -3414,5 +3413,3 @@ body .ui-fluid .ui-inplace.ui-inplace-closable .ui-inplace-content > :first-chil
 }
 
 /* Add your customizations of theme here */
-
-/*# sourceMappingURL=theme.css.map */