From 8e9c0653dd6c6862123c9609ae34e1206d86456e Mon Sep 17 00:00:00 2001 From: talig Date: Wed, 20 Dec 2017 14:30:43 +0200 Subject: Add collaboration feature Issue-ID: SDC-767 Change-Id: I14fb4c1f54086ed03a56a7ff7fab9ecd40381795 Signed-off-by: talig --- .../scss/components/_versionController.scss | 370 +++++++++++++++------ 1 file changed, 270 insertions(+), 100 deletions(-) (limited to 'openecomp-ui/resources/scss/components/_versionController.scss') 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; + } + } } -- cgit 1.2.3-korg