Add collaboration feature
Issue-ID: SDC-767
Change-Id: I14fb4c1f54086ed03a56a7ff7fab9ecd40381795
Signed-off-by: talig <talig@amdocs.com>
diff --git a/openecomp-ui/resources/scss/modules/_mergeEditor.scss b/openecomp-ui/resources/scss/modules/_mergeEditor.scss
new file mode 100644
index 0000000..96648dd
--- /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;
+ }
+ }
+ }
+}