Add collaboration feature

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

1 files changed, 270 insertions, 100 deletions

diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
index 57610986c3..11e5b41675 100644
--- a/openecomp-ui/resources/scss/components/_versionController.scss
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -1,102 +1,272 @@
 .version-controller-bar {
-  display: flex;
-  min-height: 57px;
-  border-bottom: 1px solid $tlv-light-gray;
-  background-color: transparent;
-  .vc-container {
-    display: flex;
-    flex: 1;
-    align-self: center;
-    background-color: transparent;
-    justify-content: space-between;
-    padding-left: 16px;
-    padding-right: 40px;
-    .version-status-container {
-      display: flex;
-      height: 30px;
-      .version-selector {
-        border: none;
-        margin-top: 7px;
-        padding-right: 10px;
-        margin-right: 15px;
-        margin-left: 10px;
-        @extend .body-1;
-      }
-      .version-section {
-        .form-group {
-          margin-right: 20px;
-          .input-options {
-            border: none;
-            .input-options-select {
-              padding-top: 4px;
-            }
-          }
-        }
-      }
-      .vc-status {
-        display: flex;
-        padding-left: 20px;
-        border-left: $light-gray thin solid;
-        .status-text {
-          align-self: center;
-          margin-top: 2px;
-          @extend .heading-5;
-          color: $dark-gray;
-        }
-      }
-    }
-    .save-submit-cancel-container {
-      display: flex;
-      height: 30px;
-      .action-buttons {
-        display: flex;
-        padding: 0 13px;
-        .version-control-buttons {
-          display: flex;
-        }
-        .action-buttons-svg {
-          padding-top: 5px;
-          margin-right: 20px;
-          padding-bottom: 5px;
-
-
-          .svg-icon {
-            fill: $dark-gray;
-            &:hover {
-              fill: $black;
-            }
-            &.__versionControllerLockClosed {
-              margin-top: -3px;
-            }
-            &.__versionControllerLockOpen {
-              margin-top: -6px;
-            }
-            &.__versionControllerSubmit {
-              fill: $blue;
-              &:hover {
-                fill: $dark-blue;
-              }
-              &.disabled {
-                fill: $dark-gray;
-              }
-            }
-          }
-          }
-
-
-
-
-      }
-      .vc-nav-item-close {
-        display: flex;
-        padding-left: 18px;
-        padding-top: 3px;
-        align-self: center;
-        @extend .body-1;
-        color: $gray;
-        cursor: pointer;
-        border-left: $gray thin solid;
-      }
-    }
-  }
+	display: flex;
+	min-height: 70px;
+	border-bottom: 1px solid $tlv-light-gray;
+	background-color: transparent;
+
+	.vc-container {
+		display: flex;
+		flex: 1;
+		align-self: center;
+		background-color: transparent;
+		justify-content: space-between;
+		align-items: center;
+		padding-left: 16px;
+		padding-right: 40px;
+
+		.vc-separator {
+			border-left: 1px solid $tlv-light-gray;
+			height: 37px;
+			margin-left: 5px;
+			margin-right: 5px;
+		}
+
+		.version-status-container {
+			display: flex;
+			height: 30px;
+
+			.version-selector-more-versions {
+				color: $blue;
+				cursor: pointer;
+			}
+
+			.version-selector {
+				margin-top: 0px;
+				padding-right: 10px;
+				margin-right: 15px;
+				margin-left: 10px;
+				border-color: $light-gray;
+				border-radius: 2px;
+				width: 243px;
+				height: 30px;
+				@extend .body-1;
+			}
+
+			.version-section {
+				.form-group {
+					margin-right: 20px;
+
+					.input-options {
+						border: none;
+
+						.input-options-select {
+							padding-top: 4px;
+						}
+					}
+				}
+			}
+
+			.vc-status {
+				display: flex;
+				padding-left: 20px;
+				border-left: $light-gray thin solid;
+
+				.status-text {
+					align-self: center;
+					margin-top: 2px;
+					@extend .heading-5;
+					color: $dark-gray;
+				}
+			}
+		}
+
+		.save-submit-cancel-container {
+			display: flex;
+			align-items: center;
+			height: 100%;
+
+			.action-buttons, .collaborator-action-buttons, .vc-save-section, .vc-submit-section {
+				display: flex;
+				align-items: center;
+				height: 100%;
+
+				.vc-submit-button {
+					border: 1px solid $dark-gray;
+					width: 94px;
+					height: 30px;
+					border-radius: 2px;
+					padding-top: 5px;
+					padding-left: 10px;
+					margin-left: 10px;
+					margin-right: 10px;
+
+					&:hover:not(.disabled) {
+						cursor: pointer;
+						background-color: $tlv-light-gray;
+					}
+
+					&.disabled {
+						border-color: $light-gray;
+					}
+
+					.vc-v-submit {
+						width: 11px;
+						height: 8px;
+						margin-right: 10px;
+						position: relative;
+						top: -1px;
+					}
+				}
+
+				.version-control-buttons {
+					display: flex;
+				}
+
+				.action-button-wrapper {
+					display: flex;
+					align-items: center;
+					height: 70px;
+
+					&:hover:not(.disabled) {
+						background-color: $tlv-light-gray;
+					}
+
+					&:active:not(.disabled) {
+						background-color: $light-gray;
+					}
+
+					.action-buttons-svg {
+						padding-left: 10px;
+						padding-right: 10px;
+
+						.svg-icon {
+							fill: $text-black;
+							height: 20px;
+
+							&, &.__version-controller-save { width: 20px; }
+							&.__version-controller-permissions { width: 32px; }
+							&.__version-controller-undo, &.__version-controller-revert { width: 20px; }
+							&.__version-controller-sync, &.__version-controller-commit { width: 28px; }
+						}
+					}
+
+					.version-controller-permissions {
+						width: 32px;
+						height: 20px;
+						fill: $dark-gray;
+					}
+				}
+
+				.action-button-label {
+					display: block;
+					font-size: $icon-font-size;
+					font-family: $icon-font-family;
+					height: 1em;
+					margin-top: 5px;
+					margin-bottom: 0;
+				}
+
+				.onboarding-overlay {
+					margin-top: -6px;
+					.permissions-overlay {
+						width: 237px;
+
+						.permissions-overlay-header {
+							text-align: left;
+							color: $blue;
+							padding-bottom: 15px;
+							padding-top: 15px;
+							border-bottom: 1px solid $light-gray;
+							.permissions-overlay-header-title {
+								margin-left: 20px;
+							}
+						}
+						.permissions-overlay-content {
+							max-height: 290px;
+							overflow-y: auto;
+							padding-left: 10px;
+							padding-right: 10px;
+							.contributor {
+								&:last-child {
+									border-bottom: none;
+								}
+								border-bottom: 1px solid $tlv-light-gray;
+								.contributor-content {
+									padding-top: 12px;
+									padding-bottom: 10px;
+									margin-left: 10px;
+									display: flex;
+									.contributor-icon-circle {
+										&.selected {
+											border: 1px solid $blue;
+										}
+
+										border-radius: 65px;
+										padding: 2px;
+										width: 32px;
+										height: 32px;
+										margin-top: 4px;
+										.contributer-icon {
+											width: 26px;
+											border-radius: 50px;
+											height: 26px;
+											margin-top: 0px;
+											.__user {
+												height: 18px;
+												width: 16px;
+												stroke: $blue;
+												fill: transparent;
+												margin-left: 5px;
+												margin-top: 3px;
+											}
+											&.selected {
+												border: 1px solid $blue;
+												background-color: $blue;
+												.__user {
+													stroke: $white;
+													margin-left: 4px;
+												}
+											}
+										}
+									}
+
+									.contributer-info {
+										padding-left: 11px;
+										.contributer-name {
+											@extend .body-2-semibold;
+											text-transform: uppercase;
+											color: $dark-gray;
+										}
+										.contributer-role {
+											@extend .body-3;
+											color: $gray;
+											display: flex;
+											text-transform: lowercase;
+											p:first-letter {
+												text-transform: uppercase;
+											}
+											justify-content: space-between;
+										}
+									}
+								}
+							}
+						}
+						.permissions-overlay-footer {
+							.manage-permissions-btn {
+								@extend .body-2-semibold;
+								margin-top: 20px;
+								padding-top: 10px;
+								padding-bottom: 10px;
+								color: $blue;
+								text-align: center;
+								cursor: pointer;
+								background-color: $tlv-gray;
+							}
+						}
+
+					}
+				}
+			}
+		}
+		.vc-nav-item-close {
+			display: flex;
+			padding-left: 18px;
+			padding-top: 3px;
+			align-self: center;
+			@extend .body-1;
+			color: $gray;
+			cursor: pointer;
+			border-left: $gray thin solid;
+		}
+	}
 }