From 4515ecfc3575b2592a97a485888a363e48c75197 Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 11 Jul 2018 17:32:44 +0300 Subject: [PATCH 01/11] Adding basic paste from excel sample. --- src/app/app-routing.module.ts | 5 + src/app/app.module.ts | 4 + src/app/grid/grid-paste/data.ts | 64 +++++++++++ .../grid-paste-sample.component.html | 15 +++ .../grid-paste-sample.component.scss | 32 ++++++ .../grid-paste/grid-paste-sample.component.ts | 104 ++++++++++++++++++ .../grid-paste/paste-handler.directive.ts | 70 ++++++++++++ 7 files changed, 294 insertions(+) create mode 100644 src/app/grid/grid-paste/data.ts create mode 100644 src/app/grid/grid-paste/grid-paste-sample.component.html create mode 100644 src/app/grid/grid-paste/grid-paste-sample.component.scss create mode 100644 src/app/grid/grid-paste/grid-paste-sample.component.ts create mode 100644 src/app/grid/grid-paste/paste-handler.directive.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 55f6f59003..441b8e7cf0 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -126,6 +126,7 @@ import { FilteringSampleComponent } from "./grid/grid-filtering-sample/grid-filt import { GridGroupBySampleComponent } from "./grid/grid-groupby-sample/grid-groupby-sample.component"; import { GridMovingSampleComponent } from "./grid/grid-moving-sample/grid-moving-sample.component"; import { PagingSampleComponent } from "./grid/grid-paging-sample/grid-paging-sample.component"; +import { GridPasteSampleComponent } from "./grid/grid-paste/grid-paste-sample.component"; import { RemoteFilteringSampleComponent } from "./grid/grid-remote-filtering-sample/remote-filtering-sample.component"; import { ResizingSampleComponent } from "./grid/grid-resizing-sample/grid-resizing-sample.component"; import { FinancialSampleComponent } from "./grid/grid-sample-2/grid-sample-2.component"; @@ -890,6 +891,10 @@ export const appRoutes: Routes = [ { component: GridMultiColumnHeadersComponent, path: "multi-column-headers" + }, + { + component: GridPasteSampleComponent, + path: "grid-paste" } ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d48a8726bc..af25292add 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -121,6 +121,8 @@ import { FilteringSampleComponent } from "./grid/grid-filtering-sample/grid-filt import { GridGroupBySampleComponent } from "./grid/grid-groupby-sample/grid-groupby-sample.component"; import { GridMovingSampleComponent } from "./grid/grid-moving-sample/grid-moving-sample.component"; import { PagingSampleComponent } from "./grid/grid-paging-sample/grid-paging-sample.component"; +import { GridPasteSampleComponent } from "./grid/grid-paste/grid-paste-sample.component"; +import { PasteHandler } from "./grid/grid-paste/paste-handler.directive"; import { RemoteFilteringSampleComponent } from "./grid/grid-remote-filtering-sample/remote-filtering-sample.component"; import { ResizingSampleComponent } from "./grid/grid-resizing-sample/grid-resizing-sample.component"; import { FinancialSampleComponent } from "./grid/grid-sample-2/grid-sample-2.component"; @@ -371,6 +373,8 @@ import { ToggleComponent } from "./toggle/toggle.component"; RadioGroupSampleComponent, GridMovingSampleComponent, GridMultiColumnHeadersComponent, + GridPasteSampleComponent, + PasteHandler, RemoteFilteringSampleComponent, ReactiveFormsSampleComponent, RadioGroupSampleComponent, diff --git a/src/app/grid/grid-paste/data.ts b/src/app/grid/grid-paste/data.ts new file mode 100644 index 0000000000..c7241bafd7 --- /dev/null +++ b/src/app/grid/grid-paste/data.ts @@ -0,0 +1,64 @@ +export const LOCAL_DATA = [{ + Country: "USA", + ID: 1, + Name: "Davolio, Nancy", + Phone: "(206) 555-9857", + Title: "Sales Representative" +}, +{ + Country: "USA", + ID: 2, + Name: "Fuller, Andrew", + Phone: "(206) 555-9482", + Title: "Vice President, Sales" +}, +{ + Country: "USA", + ID: 3, + Name: "Leverling, Janet", + Phone: "(206) 555-3412", + Title: "Sales Representative" +}, +{ + Country: "USA", + ID: 4, + Name: "Peacock, Margaret", + Phone: "(206) 555-8122", + Title: "Sales Representative" +}, +{ + Country: "UK", + ID: 5, + Name: "Buchanan, Steven", + Phone: "(71) 555-4848", + Title: "Sales Manager" +}, +{ + Country: "UK", + ID: 6, + Name: "Suyama, Michael", + Phone: "(71) 555-7773", + Title: "Sales Representative" +}, +{ + Country: "UK", + ID: 7, + Name: "King, Robert", + Phone: "(71) 555-5598", + Title: "Sales Representative" +}, +{ + Country: "USA", + ID: 8, + Name: "Callahan, Laura", + Phone: "(206) 555-1189", + Title: "Inside Sales Coordinator" +}, +{ + Country: "UK", + ID: 9, + Name: "Dodsworth, Anne", + Phone: "(71) 555-4444", + Title: "Sales Representative" +} +]; diff --git a/src/app/grid/grid-paste/grid-paste-sample.component.html b/src/app/grid/grid-paste/grid-paste-sample.component.html new file mode 100644 index 0000000000..6f6d9a4ee8 --- /dev/null +++ b/src/app/grid/grid-paste/grid-paste-sample.component.html @@ -0,0 +1,15 @@ +
+ + + + {{ item }} + + + + + + + + + +
diff --git a/src/app/grid/grid-paste/grid-paste-sample.component.scss b/src/app/grid/grid-paste/grid-paste-sample.component.scss new file mode 100644 index 0000000000..d9c6d301df --- /dev/null +++ b/src/app/grid/grid-paste/grid-paste-sample.component.scss @@ -0,0 +1,32 @@ +.grid-controls { + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + margin: 0 16px 24px; + + igx-switch { + margin-top: 24px; + } + +} + +.grid__wrapper { + margin: 0 16px; +} + +.header-icon { + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + cursor: pointer; +} + +.header { + height: 100%; +} + +.igx-grid__th .title { + width: 100%; + cursor: auto; +} diff --git a/src/app/grid/grid-paste/grid-paste-sample.component.ts b/src/app/grid/grid-paste/grid-paste-sample.component.ts new file mode 100644 index 0000000000..44200d2aa2 --- /dev/null +++ b/src/app/grid/grid-paste/grid-paste-sample.component.ts @@ -0,0 +1,104 @@ +import { Component, Directive, HostListener, ViewChild, ViewEncapsulation} from "@angular/core"; +import { + CloseScrollStrategy, + ConnectedPositioningStrategy, + HorizontalAlignment, + IgxDropDownComponent, + IgxGridComponent, + VerticalAlignment +} from "igniteui-angular"; + +import { PasteHandler} from "./paste-handler.directive"; + +import { LOCAL_DATA } from "./data"; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "app-grid-paste-sample", + styleUrls: ["./grid-paste-sample.component.scss"], + templateUrl: "./grid-paste-sample.component.html" +}) +export class GridPasteSampleComponent { + @ViewChild("grid1", { read: IgxGridComponent }) public grid1: IgxGridComponent; + @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent; + public data; + public comboData = [ + "Paste data as new records", + "Paste starting from active cell" + ]; + public pasteMode = this.comboData[0]; + private _positionSettings = { + horizontalStartPoint: HorizontalAlignment.Left, + verticalStartPoint: VerticalAlignment.Bottom + }; + private _overlaySettings = { + closeOnOutsideClick: true, + modal: false, + positionStrategy: new ConnectedPositioningStrategy(this._positionSettings), + scrollStrategy: new CloseScrollStrategy() + }; + + constructor() { + this.data = LOCAL_DATA; + } + + public toggleDropDown(eventArgs) { + this._overlaySettings.positionStrategy.settings.target = eventArgs.target; + this.igxDropDown.toggle(this._overlaySettings); + } + + public selectionChange(eventArgs) { + this.pasteMode = eventArgs.newSelection.elementRef.nativeElement.textContent.trim(); + } + + public dataPasted(processedData) { + if (this.pasteMode === "Paste data as new records") { + this.addRecords(processedData); + } else { + this.updateRecords(processedData); + } + } + + public addRecords(processedData: any[]) { + const columns = this.grid1.visibleColumns; + const pk = this.grid1.primaryKey; + for (const curentDataRow of processedData) { + const rowData = {}; + for (const col of columns) { + rowData[col.field] = curentDataRow[col.visibleIndex]; + } + // generate PK + rowData[pk] = this.grid1.data.length + 1; + this.grid1.addRow(rowData); + } + } + public updateRecords(processedData: any[]) { + const cell = this.grid1.selectedCells[0]; + const pk = this.grid1.primaryKey; + if (!cell) { return; } + const rowIndex = cell.row.index; + // const rowPkValue = cell.row.rowData[pk]; + const cellIndex = cell.column.visibleIndex; + const columns = this.grid1.visibleColumns; + let index = 0; + for (const curentDataRow of processedData) { + const rowData = {}; + const dataRec = this.grid1.data[rowIndex + index]; + const rowPkValue = dataRec ? dataRec[pk] : this.grid1.data.length + 1; + rowData[pk] = rowPkValue; + for (let j = 0; j < columns.length - cellIndex; j++) { + const currentCell = curentDataRow[j]; + const colKey = columns[j + cellIndex].field; + rowData[columns[j + cellIndex].field] = currentCell; + } + if (!dataRec) { + // no rec to update, add instead + rowData[pk] = rowPkValue; + this.grid1.addRow(rowData); + continue; + } + this.grid1.updateRow(rowData, rowPkValue); + index++; + } + } +} diff --git a/src/app/grid/grid-paste/paste-handler.directive.ts b/src/app/grid/grid-paste/paste-handler.directive.ts new file mode 100644 index 0000000000..81458af11d --- /dev/null +++ b/src/app/grid/grid-paste/paste-handler.directive.ts @@ -0,0 +1,70 @@ +import { Directive, EventEmitter, HostListener, Output} from "@angular/core"; + +@Directive({ selector: "[paste-handler]" }) +export class PasteHandler { + public textArea; + + @Output() + public onDataProcessed = new EventEmitter(); + + public ngOnInit(): void { + const div = document.createElement("div"); + const divStyle = div.style; + divStyle.position = "fixed"; + divStyle.top = "-10000px"; + divStyle.left = "-10000px"; + document.body.appendChild(div); + this.textArea = document.createElement("textarea"); + const style = this.textArea.style; + style.opacity = "0"; + style.overflow = "hidden"; + div.appendChild(this.textArea); + + this.textArea.addEventListener("paste", (eventArgs) => { this.onPaste(eventArgs); }); + } + + @HostListener("focusin", ["$event"]) + public focusIn(eventArgs) { + } + + @HostListener("keydown.control.v", ["$event"]) + public ControlV(eventArgs) { + this.textArea.focus(); + } + + public onPaste(eventArgs) { + let data; + const clData = "clipboardData"; + + // get clipboard data - from window.cliboardData for IE or from the original event's argumets. + if (window[clData]) { + window.event.returnValue = false; + data = window[clData].getData("text"); + } else { + data = event[clData].getData("text/plain"); + } + + // process the clipboard data + const processedData = this.processData(data); + + this.onDataProcessed.emit(processedData); + } + + public processData(data) { + const pasteData = data.split("\n"); + for (let i = 0; i < pasteData.length; i++) { + pasteData[i] = pasteData[i].split("\t"); + // Check if last row is a dummy row + if (pasteData[pasteData.length - 1].length === 1 && pasteData[pasteData.length - 1][0] === "") { + pasteData.pop(); + } + // remove empty data + if (pasteData.length === 1 && + pasteData[0].length === 1 && + (pasteData[0][0] === "" || pasteData[0][0] === "\r")) { + pasteData.pop(); + } + } + return pasteData; + } +} From fee471a2787709a6759586ab58ca2f1acf34215e Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 16 Jul 2018 17:02:21 +0300 Subject: [PATCH 02/11] Adding some styling for modified rows. --- .../grid-paste/grid-paste-sample.component.ts | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/src/app/grid/grid-paste/grid-paste-sample.component.ts b/src/app/grid/grid-paste/grid-paste-sample.component.ts index 44200d2aa2..23dfd0ede9 100644 --- a/src/app/grid/grid-paste/grid-paste-sample.component.ts +++ b/src/app/grid/grid-paste/grid-paste-sample.component.ts @@ -12,6 +12,8 @@ import { PasteHandler} from "./paste-handler.directive"; import { LOCAL_DATA } from "./data"; +import { take } from "rxjs/operators"; + @Component({ encapsulation: ViewEncapsulation.None, selector: "app-grid-paste-sample", @@ -42,6 +44,14 @@ export class GridPasteSampleComponent { this.data = LOCAL_DATA; } + public ngOnInit() { + this.grid1.verticalScrollContainer.onChunkLoad.pipe().subscribe(() => { + if (this.grid1.rowList) { + this.clearStyles(); + } + }); + } + public toggleDropDown(eventArgs) { this._overlaySettings.positionStrategy.settings.target = eventArgs.target; this.igxDropDown.toggle(this._overlaySettings); @@ -62,6 +72,7 @@ export class GridPasteSampleComponent { public addRecords(processedData: any[]) { const columns = this.grid1.visibleColumns; const pk = this.grid1.primaryKey; + const addedData = []; for (const curentDataRow of processedData) { const rowData = {}; for (const col of columns) { @@ -70,7 +81,20 @@ export class GridPasteSampleComponent { // generate PK rowData[pk] = this.grid1.data.length + 1; this.grid1.addRow(rowData); + addedData.push(rowData); + this.grid1.cdr.detectChanges(); } + // scroll to last added row + this.grid1.verticalScrollContainer.scrollTo(this.grid1.data.length); + + this.grid1.verticalScrollContainer.onChunkLoad.pipe(take(1)).subscribe(() => { + this.clearStyles(); + for (const data of addedData) { + const rowElem = this.grid1.getRowByKey(data[pk]).nativeElement; + rowElem.style["font-style"] = "italic"; + rowElem.style.color = "gray"; + } + }); } public updateRecords(processedData: any[]) { const cell = this.grid1.selectedCells[0]; @@ -81,6 +105,7 @@ export class GridPasteSampleComponent { const cellIndex = cell.column.visibleIndex; const columns = this.grid1.visibleColumns; let index = 0; + const updatedRecsPK = []; for (const curentDataRow of processedData) { const rowData = {}; const dataRec = this.grid1.data[rowIndex + index]; @@ -98,7 +123,23 @@ export class GridPasteSampleComponent { continue; } this.grid1.updateRow(rowData, rowPkValue); + this.grid1.cdr.detectChanges(); + updatedRecsPK.push(rowPkValue); index++; } + + this.clearStyles(); + for (const pkVal of updatedRecsPK) { + const rowElem = this.grid1.getRowByKey(pkVal).nativeElement; + rowElem.style["font-style"] = "italic"; + rowElem.style.color = "gray"; + } + } + + protected clearStyles() { + for (const row of this.grid1.rowList.toArray()) { + row.nativeElement.style["font-style"] = ""; + row.nativeElement.style.color = ""; + } } } From 61f998d3ac60440289d33db68df990b7dea1d2fd Mon Sep 17 00:00:00 2001 From: Tacho Date: Tue, 17 Jul 2018 12:30:16 +0300 Subject: [PATCH 03/11] fix(columnHiding): adjust columnHiding's height for all browsers #538 --- .../grid-column-hiding-sample.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/grid/grid-column-hiding-sample/grid-column-hiding-sample.component.scss b/src/app/grid/grid-column-hiding-sample/grid-column-hiding-sample.component.scss index 03068a49de..dcc0b14404 100644 --- a/src/app/grid/grid-column-hiding-sample/grid-column-hiding-sample.component.scss +++ b/src/app/grid/grid-column-hiding-sample/grid-column-hiding-sample.component.scss @@ -15,7 +15,7 @@ border-radius: 10px; box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25); igx-column-hiding { - height: 100%; + height: 460px; } } From 608524c4b0c17acfb6cf29cc7e679b19bc8e7fff Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 18 Jul 2018 10:57:28 +0300 Subject: [PATCH 04/11] Changing updating logic to retain values for other columns. --- .../grid/grid-paste/grid-paste-sample.component.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/app/grid/grid-paste/grid-paste-sample.component.ts b/src/app/grid/grid-paste/grid-paste-sample.component.ts index 23dfd0ede9..c080f28a07 100644 --- a/src/app/grid/grid-paste/grid-paste-sample.component.ts +++ b/src/app/grid/grid-paste/grid-paste-sample.component.ts @@ -111,10 +111,13 @@ export class GridPasteSampleComponent { const dataRec = this.grid1.data[rowIndex + index]; const rowPkValue = dataRec ? dataRec[pk] : this.grid1.data.length + 1; rowData[pk] = rowPkValue; - for (let j = 0; j < columns.length - cellIndex; j++) { - const currentCell = curentDataRow[j]; - const colKey = columns[j + cellIndex].field; - rowData[columns[j + cellIndex].field] = currentCell; + for (let j = 0; j < columns.length; j++) { + let currentCell; + if (j >= cellIndex) { + currentCell = curentDataRow.shift(); + } + const colKey = columns[j].field; + rowData[colKey] = currentCell || dataRec[colKey]; } if (!dataRec) { // no rec to update, add instead From c043d7ff57fa70d4b99a8ddcd8f0ab0ff36eb283 Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 18 Jul 2018 11:39:02 +0300 Subject: [PATCH 05/11] Adding checks in case updated/added records don't exist on the current visible view. --- .../grid-paste/grid-paste-sample.component.ts | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/app/grid/grid-paste/grid-paste-sample.component.ts b/src/app/grid/grid-paste/grid-paste-sample.component.ts index c080f28a07..944879a9a9 100644 --- a/src/app/grid/grid-paste/grid-paste-sample.component.ts +++ b/src/app/grid/grid-paste/grid-paste-sample.component.ts @@ -90,9 +90,11 @@ export class GridPasteSampleComponent { this.grid1.verticalScrollContainer.onChunkLoad.pipe(take(1)).subscribe(() => { this.clearStyles(); for (const data of addedData) { - const rowElem = this.grid1.getRowByKey(data[pk]).nativeElement; - rowElem.style["font-style"] = "italic"; - rowElem.style.color = "gray"; + const row = this.grid1.getRowByKey(data[pk]); + if (row) { + row.nativeElement.style["font-style"] = "italic"; + row.nativeElement.style.color = "gray"; + } } }); } @@ -117,7 +119,7 @@ export class GridPasteSampleComponent { currentCell = curentDataRow.shift(); } const colKey = columns[j].field; - rowData[colKey] = currentCell || dataRec[colKey]; + rowData[colKey] = currentCell || (!!dataRec ? dataRec[colKey] : null); } if (!dataRec) { // no rec to update, add instead @@ -133,9 +135,11 @@ export class GridPasteSampleComponent { this.clearStyles(); for (const pkVal of updatedRecsPK) { - const rowElem = this.grid1.getRowByKey(pkVal).nativeElement; - rowElem.style["font-style"] = "italic"; - rowElem.style.color = "gray"; + const row = this.grid1.getRowByKey(pkVal); + if (row) { + row.nativeElement.style["font-style"] = "italic"; + row.nativeElement.style.color = "gray"; + } } } From 4940c432adc2f2b1ded360ad3436e7d94a11bd79 Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 18 Jul 2018 17:49:50 +0300 Subject: [PATCH 06/11] Fix for FireFox paste handling --- src/app/grid/grid-paste/paste-handler.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/grid/grid-paste/paste-handler.directive.ts b/src/app/grid/grid-paste/paste-handler.directive.ts index 81458af11d..4b68b18508 100644 --- a/src/app/grid/grid-paste/paste-handler.directive.ts +++ b/src/app/grid/grid-paste/paste-handler.directive.ts @@ -41,7 +41,7 @@ export class PasteHandler { window.event.returnValue = false; data = window[clData].getData("text"); } else { - data = event[clData].getData("text/plain"); + data = eventArgs[clData].getData("text/plain"); } // process the clipboard data From 22bb5cc3758ec9c0d87d6d8c63f9612e87b745aa Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 18 Jul 2018 18:24:18 +0300 Subject: [PATCH 07/11] Adding some styling so that text with font-style: italic is not cut off at the right edge. --- src/app/grid/grid-paste/grid-paste-sample.component.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app/grid/grid-paste/grid-paste-sample.component.scss b/src/app/grid/grid-paste/grid-paste-sample.component.scss index d9c6d301df..555c6a3f6d 100644 --- a/src/app/grid/grid-paste/grid-paste-sample.component.scss +++ b/src/app/grid/grid-paste/grid-paste-sample.component.scss @@ -30,3 +30,7 @@ width: 100%; cursor: auto; } + +.igx-grid__td-text { + padding-right: 3px; +} From e006e9c3b224bf8f482419fe83f4493a7d96626f Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 18 Jul 2018 18:49:59 +0300 Subject: [PATCH 08/11] Handle generic keydown so that ctrl+V works for KB with different language than EN. --- src/app/grid/grid-paste/paste-handler.directive.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/app/grid/grid-paste/paste-handler.directive.ts b/src/app/grid/grid-paste/paste-handler.directive.ts index 4b68b18508..76f13aa3c1 100644 --- a/src/app/grid/grid-paste/paste-handler.directive.ts +++ b/src/app/grid/grid-paste/paste-handler.directive.ts @@ -27,9 +27,13 @@ export class PasteHandler { public focusIn(eventArgs) { } - @HostListener("keydown.control.v", ["$event"]) + @HostListener("keydown", ["$event"]) public ControlV(eventArgs) { - this.textArea.focus(); + const ctrl = eventArgs.ctrlKey; + const key = eventArgs.keyCode; + if (ctrl && key === 86 || eventArgs.shiftKey && key === 45) { // Ctrl-V || Shift-Ins + this.textArea.focus(); + } } public onPaste(eventArgs) { From 7682f7ce28cdb4be6d04d3dde42fd9e4fac72a4b Mon Sep 17 00:00:00 2001 From: Svetla Boykova Date: Thu, 19 Jul 2018 10:42:10 +0300 Subject: [PATCH 09/11] fix(grid): Fixed cut-off samples --- .../remote-filtering-sample.component.html | 2 +- .../remote-filtering-sample.component.scss | 34 +++++-------------- .../grid-sample-4.component.html | 2 +- .../grid-sample-4.component.scss | 34 +++++-------------- 4 files changed, 18 insertions(+), 54 deletions(-) diff --git a/src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.html b/src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.html index 4f0b3746d1..d4b2513a04 100644 --- a/src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.html +++ b/src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.scss b/src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.scss index 1682db943e..3e4625ee06 100644 --- a/src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.scss +++ b/src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.scss @@ -1,47 +1,29 @@ .grid__wrapper { - width: 1000px; margin: 0 auto; - padding-top: 30px; - } - - @media (max-width: 1000px) { - .grid__wrapper { - width: 98% !important; - margin: 0 auto; - padding-left: 1%; - padding-right: 1%; - } - } - - @media (max-width: 720px) { - .grid__wrapper { - width: 720px !important; - margin: 0 3px; - padding-right: 5px; - } - } - .cellAlignSyle { + padding: 5px; +} + +.cellAlignSyle { text-align: right; float:right; } + .cellAlignSyle > span { float:right; } + .up { color: green; } + .down { color: red; } + .headerAlignSyle { text-align: right !important; } -.grid__wrapper { - margin: 0 auto; - padding: 5px; -} - .currency-badge-container { width: 80px; float: right; diff --git a/src/app/grid/grid-sample-4/grid-sample-4.component.html b/src/app/grid/grid-sample-4/grid-sample-4.component.html index 12ff9c2a4c..1588bbc2d8 100644 --- a/src/app/grid/grid-sample-4/grid-sample-4.component.html +++ b/src/app/grid/grid-sample-4/grid-sample-4.component.html @@ -1,4 +1,4 @@ -
+
 diff --git a/src/app/grid/grid-sample-4/grid-sample-4.component.scss b/src/app/grid/grid-sample-4/grid-sample-4.component.scss index 17ae1147f0..a3d6ba8fb0 100644 --- a/src/app/grid/grid-sample-4/grid-sample-4.component.scss +++ b/src/app/grid/grid-sample-4/grid-sample-4.component.scss @@ -1,47 +1,29 @@ .grid__wrapper { - width: 1000px; margin: 0 auto; - padding-top: 30px; - } - - @media (max-width: 1000px) { - .grid__wrapper { - width: 98% !important; - margin: 0 auto; - padding-left: 1%; - padding-right: 1%; - } - } - - @media (max-width: 720px) { - .grid__wrapper { - width: 720px !important; - margin: 0 3px; - padding-right: 5px; - } - } - .cellAlignSyle { + padding: 5px; +} + +.cellAlignSyle { text-align: right; float:right; } + .cellAlignSyle > span { float:right; } + .up { color: green; } + .down { color: red; } + .headerAlignSyle { text-align: right !important; } -.grid__wrapper { - margin: 0 auto; - padding: 5px; -} - .currency-badge-container { width: 80px; float: right; From 7fd45a5feef6b1683ca5bb91589969beac869402 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 19 Jul 2018 11:08:02 +0300 Subject: [PATCH 10/11] Adding handling for Cmd+V for Mac --- src/app/grid/grid-paste/paste-handler.directive.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/grid/grid-paste/paste-handler.directive.ts b/src/app/grid/grid-paste/paste-handler.directive.ts index 76f13aa3c1..987a035ccd 100644 --- a/src/app/grid/grid-paste/paste-handler.directive.ts +++ b/src/app/grid/grid-paste/paste-handler.directive.ts @@ -31,7 +31,8 @@ export class PasteHandler { public ControlV(eventArgs) { const ctrl = eventArgs.ctrlKey; const key = eventArgs.keyCode; - if (ctrl && key === 86 || eventArgs.shiftKey && key === 45) { // Ctrl-V || Shift-Ins + // Ctrl-V || Shift-Ins || Cmd-V + if ((ctrl || eventArgs.metaKey) && key === 86 || eventArgs.shiftKey && key === 45) { this.textArea.focus(); } } From fd2aec619f4bd19ff5d45fbdb6dca2912d3ae600 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Thu, 19 Jul 2018 17:52:33 +0300 Subject: [PATCH 11/11] Adding some home page text --- src/app/home/home.component.html | 21 ++++++++++++++++----- src/app/home/home.component.scss | 13 +++++++++++++ src/app/home/home.component.ts | 4 ++-- 3 files changed, 31 insertions(+), 7 deletions(-) diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 5b10ea88d4..5061554622 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,7 +1,18 @@

{{title}}

- -