diff --git a/README.md b/README.md index e5e3e26..c3d19d1 100644 --- a/README.md +++ b/README.md @@ -57,3 +57,23 @@ Pass in a unique name to the ngSortGridGroup input You can also use the async pipe to display items ![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/gs6.png) + +# Style your items on different events +The ng-sortgrid adds different classes on different events to your items. You can either use those classes to style the appereance +of your items on certain events or you can include the build in CSS from the ng-sortgrid library. + +## Integrate the build in CSS +To integrate the built in Stylesheet just import in in your angular.json. + +``` + "styles": [ + "node_modules/ng-sortgrid/dist/lib/ngsg.css", + ], +``` + +Alternative you can provide custom styles for the different classes listed bellow +| Class | Description | +|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------| +| ng-sg-placeholder | This class is added to the placeholder item which previews where the item is inserted | +| ng-sg-dropped | This class is added as soon after you drop an item. The class will be on the item for 500 milliseconds before it gets removed | +| ng-sg-selected | This class is added when you press the CMD or the Ctrl Key and Click on an item. It indicates which items are selected for the multi drag&drop | diff --git a/projects/ng-sortgrid/src/lib/ngsg-class.service.spec.ts b/projects/ng-sortgrid/src/lib/ngsg-class.service.spec.ts index f9680d7..108ddc0 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-class.service.spec.ts +++ b/projects/ng-sortgrid/src/lib/ngsg-class.service.spec.ts @@ -49,18 +49,4 @@ describe('NgsgClassService', () => { expect(removeClassSpy).toHaveBeenCalledWith('ng-sg-selected'); }); - it('should add the dropped class', () => { - const addClassSpy = createSpy(); - const element = {classList: {add: addClassSpy}} as any; - sut.addActiveClass(element); - expect(addClassSpy).toHaveBeenCalledWith('ng-sg-active'); - }); - - it('should remove the placeholder class', () => { - const removeClassSpy = createSpy(); - const element = {classList: {remove: removeClassSpy}} as any; - sut.removeActiveClass(element); - expect(removeClassSpy).toHaveBeenCalledWith('ng-sg-active'); - }); - }); diff --git a/projects/ng-sortgrid/src/lib/ngsg-class.service.ts b/projects/ng-sortgrid/src/lib/ngsg-class.service.ts index a9a7279..37b80b2 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-class.service.ts +++ b/projects/ng-sortgrid/src/lib/ngsg-class.service.ts @@ -33,11 +33,4 @@ export class NgsgClassService { element.classList.remove(this.SELECTED_DEFAULT_CLASS); } - public addActiveClass(element: Element): void { - element.classList.add(this.ACTIVE_DEFAULT_CLASS); - } - - public removeActiveClass(element: Element): void { - element.classList.remove(this.ACTIVE_DEFAULT_CLASS); - } }