Merge pull request #26 from mikproto/master

Fixed issue with data paste + style restructure

src/components/data/revogr-data-style.scss

@@ -0,0 +1,49 @@
+@import "../../global/colors";
+
+revogr-data {
+	display: block;
+	width: 100%;
+	position: relative;
+
+	.row {
+		position: absolute;
+		width: 100%;
+		left: 0;
+	}
+
+	.revo-draggable {
+		$drag-icon-color: #d4d4d4;
+
+		float: left;
+		width: 24px;
+		height: 100%;
+		text-align: center;
+		line-height: 24px;
+		cursor: pointer;
+
+		&:hover {
+			> .revo-drag-icon {
+				background-color: black;
+			}
+		}
+
+		> .revo-drag-icon {
+			background-color: $drag-icon-color;
+			vertical-align: middle;
+			display: inline-block;
+			pointer-events: none;
+		}
+	}
+
+	.data-cell {
+		position: absolute;
+		box-sizing: border-box;
+		box-shadow: $cell-shadow-cell;
+		height: 100%;
+		text-align: center;
+
+		&.disabled {
+			background-color: $cell-disabled-bg;
+		}
+	}
+}

src/components/data/revogr-data.tsx

@@ -10,7 +10,8 @@ import {RevoGrid} from '../../interfaces';
 import CellRenderer from './cellRenderer';
 
 @Component({
-  tag: 'revogr-data'
+  tag: 'revogr-data',
+  styleUrl: 'revogr-data-style.scss'
 })
 export class RevogrData {
   private columnService: ColumnService;

src/components/header/revogr-header-style.scss

@@ -0,0 +1,50 @@
+@import "../../global/colors";
+
+$header-size: 30px;
+
+revogr-header {
+	position: relative;
+	line-height: $header-size;
+	box-shadow: $header-shadow;
+	font-weight: 600;
+	z-index: 5;
+	display: block;
+
+	.data-header-cell,
+	.grouped-cell {
+		position: absolute;
+		box-sizing: border-box;
+		height: 100%;
+		z-index: 1;
+	}
+
+	.data-header-cell {
+		$shadow-left: -1px 0 0 0 $cell-border-color;
+		$shadow-right: -1px 0 0 0 $cell-border-color inset;
+		$shadow-bottom: 0 -1px 0 0 $header-border-color inset;
+		$shadow-top: 0 -1px 0 0 $header-border-color;
+		box-shadow: $shadow-left, $shadow-right, $shadow-top, $shadow-bottom;
+		text-align: center;
+	}
+
+	.header-row {
+
+		height: $header-size;
+		display: block;
+		position: relative;
+
+		&.group {
+			box-shadow: none;
+			z-index: 0;
+		}
+	}
+
+	.group-row {
+		position: relative;
+
+		.data-header-cell {
+			color: #9493a2;
+			font-weight: normal;
+		}
+	}
+}

src/components/header/revogr-header.tsx

@@ -12,7 +12,8 @@ import HeaderRenderer from './headerRenderer';
 import GroupHeaderRenderer from './headerGroupRenderer';
 
 @Component({
-  tag: 'revogr-header'
+  tag: 'revogr-header',
+  styleUrl: 'revogr-header-style.scss'
 })
 export class RevogrHeaderComponent {
   @Element() element!: HTMLStencilElement;

src/components/overlay/readme.md

@@ -42,14 +42,14 @@
 
 ### Depends on
 
-- [revogr-order-editor](.)
 - [revogr-edit](.)
+- [revogr-order-editor](.)
 
 ### Graph
 ```mermaid
 graph TD;
-  revogr-overlay-selection --> revogr-order-editor
   revogr-overlay-selection --> revogr-edit
+  revogr-overlay-selection --> revogr-order-editor
   revogr-viewport --> revogr-overlay-selection
   style revogr-overlay-selection fill:#f9f,stroke:#333,stroke-width:4px
 ```

src/components/overlay/revogr-edit-style.scss

@@ -0,0 +1,11 @@
+revogr-edit {
+	display: block;
+	position: absolute;
+	background-color: #fff;
+
+	input {
+		height: 100%;
+		width: 100%;
+		box-sizing: border-box;
+	}
+}

src/components/overlay/revogr-edit.tsx

@@ -4,7 +4,8 @@ import {Edition, RevoGrid} from '../../interfaces';
 import {TextEditor} from './editors/text';
 
 @Component({
-    tag: 'revogr-edit'
+    tag: 'revogr-edit',
+    styleUrl: 'revogr-edit-style.scss'
 })
 export class Edit {
     @Element() element: HTMLElement;

src/components/overlay/revogr-order-editor.tsx

@@ -6,7 +6,8 @@ import { DRAGG_TEXT } from '../../utils/consts';
 import RowOrderService from './rowOrderService';
 
 @Component({
-    tag: 'revogr-order-editor'
+    tag: 'revogr-order-editor',
+    styleUrl: 'revogr-order-style.scss'
 })
 export class OrderEditor {
     private rowOrderService: RowOrderService;

src/components/overlay/revogr-order-style.scss

@@ -0,0 +1,32 @@
+
+@import "../../global/colors";
+
+revogr-order-editor {
+	.draggable {
+		$s: 30px;
+		position: fixed;
+		height: $s;
+		line-height: $s;
+		background: #fff;
+		border-radius: 3px;
+		display: block;
+		z-index: 100;
+		margin-top: 5px;
+		margin-right: -20px;
+		box-shadow: 0 4px 20px 0 rgba(black, .15);
+		padding-left: 20px;
+		padding-right: 5px;
+
+		&.hidden {
+			display: none;
+		}
+
+		.revo-alt-icon {
+			$alt-icon-color: black;
+			background-color: $alt-icon-color;
+			position: absolute;
+			left: 5px;
+			top: 10px;
+		}
+	}
+}