Merge pull request #296 from lineupjs/sgratzl/filter_tuning

src/renderer/DateHistogramCellRenderer.ts

@@ -164,7 +164,7 @@ function createFilterContext(col: IDateColumn, context: IRenderContext, domain:
         const dialogCtx = {
           attachment,
           manager: context.dialogManager,
-          level: 1,
+          level: context.dialogManager.maxLevel + 1,
           idPrefix: context.idPrefix
         };
         const dialog = new InputDateDialog(dialogCtx, (d) => resolve(d == null ? NaN : shiftFilterDateDay(d.getTime(), type)), {value: isNaN(value) ? null : new Date(value)});

src/renderer/HistogramCellRenderer.ts

@@ -234,7 +234,7 @@ function createFilterContext(col: IMapAbleColumn, context: {idPrefix: string, di
         const dialogCtx = {
           attachment,
           manager: context.dialogManager,
-          level: 1,
+          level: context.dialogManager.maxLevel + 1,
           idPrefix: context.idPrefix
         };
         const dialog = new InputNumberDialog(dialogCtx, resolve, {

src/renderer/histogram.ts

@@ -106,8 +106,8 @@ export function filteredHistTemplate<T>(c: IFilterContext<T>, f: IFilterInfo<T>)
   return `
     <div class="${cssClass('histogram-min-hint')}" style="width: ${c.percent(f.filterMin)}%"></div>
     <div class="${cssClass('histogram-max-hint')}" style="width: ${100 - c.percent(f.filterMax)}%"></div>
-    <div class="${cssClass('histogram-min')}" data-value="${c.format(f.filterMin)}" style="left: ${c.percent(f.filterMin)}%" title="min filter, drag or shift click to change"></div>
-    <div class="${cssClass('histogram-max')}" data-value="${c.format(f.filterMax)}" style="right: ${100 - c.percent(f.filterMax)}%" title="max filter, drag or shift click to change"></div>
+    <div class="${cssClass('histogram-min')}" data-value="${c.format(f.filterMin)}" style="left: ${c.percent(f.filterMin)}%" title="min filter, drag or double click to change"></div>
+    <div class="${cssClass('histogram-max')}" data-value="${c.format(f.filterMax)}" style="right: ${100 - c.percent(f.filterMax)}%" title="max filter, drag or double click to change"></div>
     ${filterMissingNumberMarkup(f.filterMissing, 0)}
   `;
 }
@@ -126,10 +126,7 @@ export function initFilter<T>(node: HTMLElement, context: IFilterContext<T>) {
     context.setFilter(filterMissing.checked, minValue, maxValue);
   };
 
-  min.onclick = (evt) => {
-    if (!evt.shiftKey && !evt.ctrlKey) {
-      return;
-    }
+  const minImpl = (evt: MouseEvent) => {
     evt.preventDefault();
     evt.stopPropagation();
 
@@ -144,10 +141,15 @@ export function initFilter<T>(node: HTMLElement, context: IFilterContext<T>) {
     });
   };
 
-  max.onclick = (evt) => {
+  min.onclick = (evt) => {
     if (!evt.shiftKey && !evt.ctrlKey) {
       return;
     }
+    minImpl(evt);
+  };
+  min.ondblclick = minImpl;
+
+  const maxImpl = (evt: MouseEvent) => {
     evt.preventDefault();
     evt.stopPropagation();
 
@@ -162,6 +164,14 @@ export function initFilter<T>(node: HTMLElement, context: IFilterContext<T>) {
     });
   };
 
+  max.onclick = (evt) => {
+    if (!evt.shiftKey && !evt.ctrlKey) {
+      return;
+    }
+    maxImpl(evt);
+  };
+  max.ondblclick = maxImpl;
+
   filterMissing.onchange = () => setFilter();
 
   const options: Partial<IDragHandleOptions> = {

src/ui/dialogs/ADialog.ts

@@ -14,6 +14,7 @@ export interface IDialogOptions {
   eventsEnabled?: boolean;
   modifiers?: Popper.Modifiers;
   toggleDialog: boolean;
+  cancelSubDialogs?: boolean;
 }
 
 export interface IDialogContext {
@@ -40,6 +41,7 @@ abstract class ADialog {
     popup: false,
     placement: 'bottom-start',
     toggleDialog: true,
+    cancelSubDialogs: false,
     modifiers: {
     }
   };
@@ -160,6 +162,12 @@ abstract class ADialog {
       };
     }
 
+    if (this.options.cancelSubDialogs) {
+      this.node.addEventListener('click', () => {
+        this.dialog.manager.removeAboveLevel(this.dialog.level + 1);
+      });
+    }
+
     this.dialog.manager.push(this);
   }
 

src/ui/dialogs/DateFilterDialog.ts

@@ -12,7 +12,8 @@ export default class DateFilterDialog extends ADialog {
 
   constructor(private readonly column: DateColumn, dialog: IDialogContext) {
     super(dialog, {
-      livePreview: 'filter'
+      livePreview: 'filter',
+      cancelSubDialogs: true,
     });
     this.before = this.column.getFilter() || noDateFilter();
   }

src/ui/dialogs/DialogManager.ts

@@ -61,6 +61,10 @@ export default class DialogManager extends AEventDispatcher {
     return super.on(type, listener);
   }
 
+  get maxLevel() {
+    return this.openDialogs.reduce((acc, a) => Math.max(acc, a.level), 0);
+  }
+
 
   setHighlight(mask: { left: number, top: number, width: number, height: number }) {
     const area = <HTMLElement>this.node.firstElementChild;

src/ui/dialogs/MappingDialog.ts

@@ -34,7 +34,8 @@ export default class MappingDialog extends ADialog {
 
   constructor(private readonly column: IMapAbleColumn, dialog: IDialogContext, ctx: IRankingHeaderContext) {
     super(dialog, {
-      livePreview: 'dataMapping'
+      livePreview: 'dataMapping',
+      cancelSubDialogs: true,
     });
 
     this.idPrefix = `me${ctx.idPrefix}`;
@@ -200,11 +201,6 @@ export default class MappingDialog extends ADialog {
         }
       });
     });
-
-    this.node.addEventListener('click', () => {
-      // any open dialog line editors
-      this.dialog.manager.removeAboveLevel(this.dialog.level + 1);
-    });
   }
 
   private createMappings() {

src/ui/dialogs/NumberFilterDialog.ts

@@ -11,7 +11,8 @@ export default class NumberFilterDialog extends ADialog {
 
   constructor(private readonly column: IMapAbleColumn, dialog: IDialogContext, private readonly ctx: IRankingHeaderContext) {
     super(dialog, {
-      livePreview: 'filter'
+      livePreview: 'filter',
+      cancelSubDialogs: true,
     });
 
     this.before = column.getFilter();