diff --git a/packages/qgrid-core/src/highlight/highlight.let.js b/packages/qgrid-core/src/highlight/highlight.let.js
index a12fefef6..bfd4032e1 100644
--- a/packages/qgrid-core/src/highlight/highlight.let.js
+++ b/packages/qgrid-core/src/highlight/highlight.let.js
@@ -69,7 +69,6 @@ export class HighlightLet {
hasChanges = true;
}
}
-
if (hasChanges) {
model.highlight({ rows }, {
source: 'highlight.view'
@@ -78,6 +77,36 @@ export class HighlightLet {
}
});
+ this.oneRow = new Command({
+ source: 'highlight.oneRow',
+ canExecute: () => !this.isRendering,
+ execute: (row, state) => {
+ let rows = Array.from(model.highlight().rows);
+ const index = rows.indexOf(row);
+ let hasChanges = false;
+ if (state) {
+ if (index < 0) {
+ rows.push(row);
+ hasChanges = true;
+ }
+ }
+ else {
+ if (index >= 0) {
+ rows.splice(index, 1);
+ hasChanges = true;
+ }
+ }
+ if (hasChanges) {
+ if(rows.length > 1) {
+ rows = rows.splice(rows.length-1, 1);
+ }
+ model.highlight({ rows }, {
+ source: 'highlight.oneRow'
+ });
+ }
+ }
+ });
+
this.cell = new Command({
source: 'highlight.view',
canExecute: () => !this.isRendering,
diff --git a/packages/qgrid-core/src/model/model.bind.js b/packages/qgrid-core/src/model/model.bind.js
index 01340a990..c25f71696 100644
--- a/packages/qgrid-core/src/model/model.bind.js
+++ b/packages/qgrid-core/src/model/model.bind.js
@@ -1,5 +1,5 @@
-import { noop, toCamelCase, isUndefined, isArray } from '../utility/kit';
import { Log } from '../infrastructure//log';
+import { isArray, isUndefined, noop, toCamelCase } from '../utility/kit';
export class ModelBinder {
constructor(host, plugin) {
diff --git a/packages/qgrid-core/src/model/model.js b/packages/qgrid-core/src/model/model.js
index 672ec0eea..15112869e 100644
--- a/packages/qgrid-core/src/model/model.js
+++ b/packages/qgrid-core/src/model/model.js
@@ -1,8 +1,8 @@
-import { GridError } from '../infrastructure/error';
import { Event } from '../event/event';
+import { GridError } from '../infrastructure/error';
import { Guard } from '../infrastructure/guard';
-import { isArray, isObject, getTypeName } from '../utility/kit';
import { Log } from '../infrastructure/log';
+import { getTypeName, isArray, isObject } from '../utility/kit';
function equals(x, y) {
// TODO: improve equality algorithm
diff --git a/packages/qgrid-core/src/view/view.host.js b/packages/qgrid-core/src/view/view.host.js
index c29c00b88..d95f1294a 100644
--- a/packages/qgrid-core/src/view/view.host.js
+++ b/packages/qgrid-core/src/view/view.host.js
@@ -1,7 +1,7 @@
import { final } from '../infrastructure/final';
import {
- checkButtonCode, getButtonCode, LEFT_BUTTON,
- NO_BUTTON, stringify
+ checkButtonCode, getButtonCode, LEFT_BUTTON,
+ NO_BUTTON, stringify
} from '../mouse/mouse.code';
import { PathService } from '../path/path.service';
import { PipeUnit } from '../pipe/pipe.unit';
@@ -209,12 +209,8 @@ export class ViewHost {
if (tr) {
const { index } = tr;
- if (highlight.row.canExecute(index)) {
- rows
- .filter(i => i !== index)
- .forEach(i => highlight.row.execute(i, false));
-
- highlight.row.execute(index, true);
+ if (highlight.oneRow.canExecute(index)) {
+ highlight.oneRow.execute(index, true);
}
}
diff --git a/packages/qgrid-ngx-plugins/src/lib/cell-tooltip/cell-tooltip.directive.ts b/packages/qgrid-ngx-plugins/src/lib/cell-tooltip/cell-tooltip.directive.ts
index 3c7ca0dcc..3dde031ca 100644
--- a/packages/qgrid-ngx-plugins/src/lib/cell-tooltip/cell-tooltip.directive.ts
+++ b/packages/qgrid-ngx-plugins/src/lib/cell-tooltip/cell-tooltip.directive.ts
@@ -10,9 +10,16 @@ import { GridPlugin, TemplateHostService } from '@qgrid/ngx';
providers: [GridPlugin, TemplateHostService],
})
+//TODO: Re-name to TooltipDirective
export class CellTooltipDirective implements OnChanges {
@Input() host: HTMLElement;
@Input() showDelay = 1000;
+ @Input() position: (host: HTMLElement) => [number, number] = (host) => {
+ const { top, left, height } = host.getBoundingClientRect();
+ const box = this.getBoxRect(host);
+
+ return [left - box.left, top - box.top + height];
+ };
private job = jobLine(this.showDelay);
@@ -28,13 +35,12 @@ export class CellTooltipDirective implements OnChanges {
}
if (e.host && this.host) {
- const { top, left, height } = this.host.getBoundingClientRect();
- const box = this.getBoxRect(this.host);
- const host = this.elementRef.nativeElement;
+ const nativeElement = this.elementRef.nativeElement;
this.job(() => {
- this.renderer.setStyle(host, 'top', top - box.top + height + 'px');
- this.renderer.setStyle(host, 'left', left - box.left + 'px');
- this.renderer.removeClass(host, 'q-grid-hide');
+ const [left, top] = this.position(this.host);
+ this.renderer.setStyle(nativeElement, 'top', top + 'px');
+ this.renderer.setStyle(nativeElement, 'left', left + 'px');
+ this.renderer.removeClass(nativeElement, 'q-grid-hide');
});
}
diff --git a/packages/qgrid-ngx-theme-material/src/lib/templates/body-cell-row-indicator.tpl.html b/packages/qgrid-ngx-theme-material/src/lib/templates/body-cell-row-indicator.tpl.html
index 4f610c638..bebb11688 100644
--- a/packages/qgrid-ngx-theme-material/src/lib/templates/body-cell-row-indicator.tpl.html
+++ b/packages/qgrid-ngx-theme-material/src/lib/templates/body-cell-row-indicator.tpl.html
@@ -10,10 +10,11 @@
+ unfold_more
\ No newline at end of file
diff --git a/packages/qgrid-ngx/src/lib/layer/layer.service.ts b/packages/qgrid-ngx/src/lib/layer/layer.service.ts
index 6c3938da0..b2a6d34b3 100644
--- a/packages/qgrid-ngx/src/lib/layer/layer.service.ts
+++ b/packages/qgrid-ngx/src/lib/layer/layer.service.ts
@@ -25,22 +25,25 @@ export class LayerService {
const { nativeElement } = container.element;
nativeElement.parentElement.classList.add(`q-grid-layer-${name}`);
this.getHostElement()?.classList.add(`q-grid-${name}`);
- container.createEmbeddedView(link.template, {});
- }
+ const embeddedViewRef = container.createEmbeddedView(link.template, {});
+
- const destroy = container
- ? () => {
+ const destroy = () => {
this.layers.delete(name);
const { nativeElement } = container.element;
- nativeElement.parentElement.classList.add(`q-grid-layer-${name}`);
+ nativeElement.parentElement.classList.remove(`q-grid-layer-${name}`);
this.getHostElement()?.classList.remove(`q-grid-${name}`);
- container.clear();
+ embeddedViewRef.destroy();
}
- : () => this.layers.delete(name);
- const layer = new Layer(destroy);
- this.layers.set(name, layer);
- return layer;
+ const layer = new Layer(destroy);
+ this.layers.set(name, layer);
+ return layer;
+ }
+ const noopLayer = new Layer(() => this.layers.delete(name));
+ this.layers.set(name, noopLayer);
+
+ return noopLayer;
}
get count() {
diff --git a/packages/qgrid-ngx/src/lib/row/row.component.ts b/packages/qgrid-ngx/src/lib/row/row.component.ts
index a18427f21..19ac3475f 100644
--- a/packages/qgrid-ngx/src/lib/row/row.component.ts
+++ b/packages/qgrid-ngx/src/lib/row/row.component.ts
@@ -8,7 +8,7 @@ import { TemplateHostService } from '../template/template-host.service';
@Component({
selector: 'q-grid-row',
- template: '',
+ template: ``,
providers: [
TemplateHostService,
GridPlugin,
@@ -90,10 +90,22 @@ export class RowComponent implements OnChanges, OnInit {
});
}
}
+
+
}
ngOnChanges() {
const { model } = this.plugin;
this.stateAccessor.write(model);
}
+
+ private addRowResizeLayer(): void {
+ const rowResizeLayer = 'row-resize';
+ const table = this.plugin.table;
+ if (table.view.hasLayer(rowResizeLayer)) {
+ table.view.removeLayer(rowResizeLayer);
+ }
+
+ table.view.addLayer(rowResizeLayer);
+ }
}
diff --git a/packages/qgrid-ngx/src/lib/row/row.module.ts b/packages/qgrid-ngx/src/lib/row/row.module.ts
index 53ac0d245..62b506a69 100644
--- a/packages/qgrid-ngx/src/lib/row/row.module.ts
+++ b/packages/qgrid-ngx/src/lib/row/row.module.ts
@@ -1,9 +1,15 @@
import { NgModule } from '@angular/core';
+import { LayerModule } from '../layer/layer.module';
+import { TemplateModule } from '../template/template.module';
import { RowComponent } from './row.component';
import { TrCoreDirective } from './tr-core.directive';
import { TrhCoreDirective } from './trh-core.directive';
@NgModule({
+ imports: [
+ LayerModule,
+ TemplateModule
+ ],
declarations: [
RowComponent,
TrCoreDirective,
diff --git a/packages/qgrid-styles/focus.scss b/packages/qgrid-styles/focus.scss
index 556869242..a4bb604b4 100644
--- a/packages/qgrid-styles/focus.scss
+++ b/packages/qgrid-styles/focus.scss
@@ -7,6 +7,19 @@ td.q-grid-focused {
}
}
+
+.q-grid-row-size-indicator {
+ display: none;
+}
+
+.q-grid-highlighted {
+ .q-grid-row-size-indicator {
+ display: block;
+ position: absolute;
+ bottom: 0;
+ }
+}
+
.q-grid-view.q-grid-active {
td.q-grid-focused {
outline-color: $blue-outline025;