Add collaboration feature

Issue-ID: SDC-767
Change-Id: I14fb4c1f54086ed03a56a7ff7fab9ecd40381795
Signed-off-by: talig <talig@amdocs.com>

1 files changed, 207 insertions, 0 deletions

diff --git a/openecomp-ui/resources/scss/modules/_mergeEditor.scss b/openecomp-ui/resources/scss/modules/_mergeEditor.scss
new file mode 100644
index 0000000000..96648dd20f
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_mergeEditor.scss
@@ -0,0 +1,207 @@
+$yours-bg-color: $tlv-gray;
+$theirs-bg-color: $tlv-light-gray;
+$error-text-color: $red;
+$selected-width: 1px;
+$selected-color: $blue;
+
+@mixin levels {
+	@for $i from 1 to 6 {
+		.level-#{$i} {
+			padding-left: 18px + 10 * $i;
+		}
+	}
+}
+
+.merge-editor-modal {
+	.modal-lg {
+		width: 1300px;
+	}
+}
+
+.merge-editor {
+	margin: 30px 40px;
+	max-height: 600px;
+	border: 1px solid $light-gray;
+	.grid-section {
+		&.conflict-titles-section {
+			@extend .body-1;
+			background-color: $blue;
+			height: 33px;
+			padding-top: 6px;
+			padding-bottom: 3px;
+			color: $white;
+			position: sticky;
+			top: 0;
+			z-index: 2;
+			border-bottom: 1px solid $tlv-light-gray;
+			.grid-item {
+				padding-left: 10px;
+			}
+			.form-group {
+				margin-bottom: 0;
+				.checkbox {
+					label {
+						margin-right: 0;
+					}
+
+					text-align: right;
+
+					input[type="checkbox"] {
+						cursor: pointer;
+						margin-top: 1px;
+					}
+				}
+			}
+		}
+	}
+	.merge-editor-body {
+		max-height: 500px;
+		overflow-y: scroll;
+		padding: 10px;
+		.conflict-section {
+			margin-bottom: 0;
+			border-left: 0;
+			border-right: 0;
+			padding: 5px 0;
+
+			.conflict-resolve-btn {
+				align-self: flex-end;
+			}
+
+			.grid-items {
+				align-items: center;
+
+				input[type="radio"]:not(:checked) {
+					cursor: pointer;
+				}
+			}
+		}
+
+		.collapsible-section {
+			display: flex;
+			cursor: pointer;
+
+			.conflict-title {
+				@extend .heading-5-semibold;
+				text-transform: uppercase;
+			}
+		}
+
+		.merge-chevron {
+			margin-right: 7px;
+			&.right {
+				transform: rotate(90deg);
+			}
+		}
+
+		.grid-section .grid-items .field-col:not(.grid-col-title) {
+			&.grid-col-yours {
+				border-top: $selected-width solid $yours-bg-color;
+				border-bottom: $selected-width solid $yours-bg-color;
+			}
+
+			&.theirs-color {
+				border-top: $selected-width solid $theirs-bg-color;
+				border-bottom: $selected-width solid $theirs-bg-color;
+			}
+		}
+
+		.merge-editor-text-field {
+			display: flex;
+			justify-content: space-between;
+			// margin: 0 0 10px 0;
+			margin: 0;
+
+			.field {
+				color: $text-black;
+
+				&.field-name:not(.field-object-name) {
+					color: $gray;
+				}
+			}
+
+			&.diff {
+				.field {
+					color: $red;
+				}
+			}
+
+			&.grid-section {
+				padding-bottom: 0;
+
+				.grid-items {
+					flex: 1;
+
+
+					.field-col {
+						padding: 7px 0;
+						height: 100%;
+
+						&:not(:first-child) {
+							padding-left: 8px;
+						}
+
+						&.grid-col-yours {
+							background-color: $yours-bg-color;
+						}
+
+						&.grid-col-theirs {
+							background-color: $theirs-bg-color;
+						}
+
+						@include levels;
+
+
+						.field {
+							@extend .body-1;
+							flex: 2;
+							min-width: 0;
+
+							&.field-name {
+								@include multiline-ellipsis($bgColor: white);
+								&.diff {
+									color: $red;
+								}
+								text-transform: uppercase;
+								&.field-object-name {
+									@extend .body-1-semibold;
+									margin-bottom: 5px;
+									margin-top: 10px;
+
+								}
+							}
+
+							&.field-yours {
+								@include multiline-ellipsis($bgColor: $yours-bg-color);
+							}
+
+							&.field-theirs {
+								@include multiline-ellipsis($bgColor: $theirs-bg-color);
+							}
+							&.field-name, &.field.field-yours, &.field.field-theirs {
+								word-break: break-word;
+								text-align: initial;
+							}
+							&.empty-field {
+								padding-top: 2px;
+							}
+						}
+
+						*::after {
+							bottom: 0;
+						}
+					}
+				}
+			}
+
+			&.field-error {
+				@extend .body-1;
+				color: $error-text-color;
+				min-width: 0;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+}