[SDC-29] catalog 1707 rebase commit.

Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>

1 files changed, 420 insertions, 0 deletions

diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard.less b/catalog-ui/src/app/view-models/dashboard/dashboard.less
new file mode 100644
index 0000000000..7993390769
--- /dev/null
+++ b/catalog-ui/src/app/view-models/dashboard/dashboard.less
@@ -0,0 +1,420 @@
+.sdc-dashboard-container {
+    .tlv-loader {
+        top: -110px;
+        left: 80px;
+    }
+    .sdc-hide-popover {
+        .popover {
+            display: none !important;
+        }
+    }
+}
+
+.w-sdc-left-sidebar-nav {
+    margin-top: 46px;
+}
+
+.w-sdc-main-right-container-element {
+    float: left;
+    height: 217px;
+    width: 217px;
+    margin: 10px;
+    position: relative;
+}
+
+.w-sdc-main-right-container-element-details-container {
+    position: absolute;
+    top: 165px;
+    left: 50px;
+}
+
+.w-sdc-main-right-container-element-name {
+    font-weight: bold;
+}
+
+.w-sdc-main-right-container-element-owner {
+
+}
+
+//////////////////////////////Cards////////////////////
+.w-sdc-dashboard-card-new {
+    border: 2px dashed @color_m;
+    .border-radius(2px);
+    cursor: pointer;
+    display: inline-block;
+    height: 198px;
+    margin: 11px;
+    position: relative;
+    vertical-align: middle;
+    width: 202px;
+}
+
+.w-sdc-dashboard-card-new-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 100%;
+}
+
+.w-sdc-dashboard-card-new-content-plus {
+    .sprite-new;
+    .add-icon;
+    position: relative;
+    margin-bottom: 20px;
+
+    &:after {
+        .n_14_m;
+        content: 'ADD';
+        position: absolute;
+        top: 25px;
+        left: -3px;
+        vertical-align: -50%;
+    }
+}
+
+.w-sdc-dashboard-card-import-content-plus {
+    .sprite-new;
+    .import-icon;
+    position: relative;
+    margin-bottom: 20px;
+
+    &:after {
+        .n_14_m;
+        content: 'IMPORT';
+        position: absolute;
+        top: 25px;
+        left: -16px;
+        vertical-align: -50%;
+    }
+}
+
+.sdc-dashboard-create-element-container,
+.sdc-dashboard-import-element-container {
+
+    width: 140px;
+
+    .tlv-btn.import-dcae {
+        padding: 0;
+    }
+
+    .tlv-btn {
+        position: relative;
+        width: 100%;
+        margin-bottom: 10px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    input[type="file"] {
+        cursor: inherit;
+        filter: alpha(opacity=0);
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 138px;
+        height: 30px;
+    }
+}
+
+.w-sdc-dashboard-card {
+    width: 204px;
+    height: 200px;
+    background-color:  @main_color_p;
+    .border-radius(2px);
+    .box-shadow(0px 2px 2px 0px rgba(24, 24, 25, 0.05));
+    display: inline-block;
+    margin: 10px;
+    position: relative;
+    vertical-align: middle;
+    border: solid 1px @main_color_p;
+
+    &:hover {
+        border: solid 1px @main_color_o;
+        .box-shadow(3px 3px 2px 0px rgba(24, 24, 25, 0.05));
+    }
+
+    &:active {
+        border: solid 1px @main_color_c;
+        .box-shadow(3px 3px 2px 0px rgba(24, 24, 25, 0.05));
+    }
+}
+
+.w-sdc-dashboard-card-body {
+    .hand;
+    border-bottom: 1px solid @color_j;
+    height: 155px;
+    position: relative;
+    text-align: center;
+}
+
+.w-sdc-dashboard-card-description {
+    .c_3;
+    .hand;
+    background-color: rgba(57, 73, 84, 0.9);
+    border-radius: 4px 4px 0 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    padding: 10px;
+    position: absolute;
+    right: 0;
+    text-align: left;
+    top: 0;
+    word-wrap: break-word;
+    z-index: 4;
+    min-height: 100px;
+    overflow: hidden;
+}
+
+
+.w-sdc-dashboard-card-schema {
+    margin-top: 30px;
+}
+
+.w-sdc-dashboard-card-edit {
+    .hand;
+    position: absolute;
+    right: 13px;
+    top: 15px;
+    z-index: 2;
+}
+
+.w-sdc-dashboard-card-footer {
+    padding: 3px 12px 10px 12px;
+    position: relative;
+}
+
+.w-sdc-dashboard-card-avatar {
+    .uppercase;
+    border-radius: 50%;
+    display: inline-block;
+    position: absolute;
+    left: -6px;
+    text-align: center;
+    top: -6px;
+
+    span {
+
+        background-color: @main_color_p;
+        .border-radius(15px);
+        color: @color_c;
+        content: '';
+        height: 30px;
+        text-align: center;
+        display: block;
+        border: solid 2px #ECEFF3;
+        padding: 3px 10px 2px 10px;
+
+        &.VF {
+            .j_14_m;
+            &::before {
+                content: 'VF';
+            }
+        }
+
+        &.VFC {
+            .j_14_m;
+            &::before {
+                content: 'VFC';
+            }
+        }
+
+        &.CP {
+            .j_14_m;
+            &::before {
+                content: 'CP';
+            }
+        }
+
+        &.VL {
+            .j_14_m;
+            &::before {
+                content: 'VL';
+            }
+        }
+
+        &.SERVICE {
+            .c_14_m;
+            &::before {
+                content: 'S';
+            }
+        }
+
+        &.PRODUCT {
+            .b_14_m;
+            &::before {
+                content: 'P';
+            }
+        }
+
+        &.green {
+            .d_12;
+            &::before {
+                content: 'R';
+            }
+        }
+        &.red {
+            .r_12;
+            &::before {
+                content: 'S';
+            }
+        }
+        &.dblack {
+            .s_12;
+            &::before {
+                content: 'P';
+            }
+        }
+    }
+}
+
+.w-sdc-dashboard-card-info {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 165px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.w-sdc-dashboard-card-info-name-container{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    margin: 0 0 2px 10px;
+}
+.w-sdc-dashboard-card-info-name {
+    .m_14_m;
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 165px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.w-sdc-dashboard-card-info-lifecycleState {
+    .m_13_m;
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 165px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.w-sdc-dashboard-card-info-user {
+    .n_13_r;
+    line-height: 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.w-sdc-dashboard-card-menu-button {
+    display: inline-block;
+    padding: 12px 0 0 10px;
+    position: absolute;
+    right: 12px;
+    top: 8px;
+    border-left: solid 1px @color_k;
+    height: 42px;
+
+    &:hover {
+        .w-sdc-dashboard-card-menu {
+            display: block;
+        }
+    }
+}
+
+.w-sdc-dashboard-card-menu {
+    .bg_c;
+    border-radius: 0 0 4px 4px;
+    border-top: 3px solid @color_a;
+    box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.2);
+    color: @color_s;
+    display: none;
+    min-height: 30px;
+    padding: 9px 0;
+    position: absolute;
+    right: -27px;
+    width: 208px;
+    z-index: 9;
+    max-height: 164px;
+
+    &::before {
+        //TODO: Missing image for small blue triangle.
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE1OTIzNDI1MENFQjExRTU4ODRERTI1MDM2REZCOUYzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE1OTIzNDI2MENFQjExRTU4ODRERTI1MDM2REZCOUYzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTU5MjM0MjMwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTU5MjM0MjQwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4gBXTlAAAAOElEQVR42mK0rp7NgASMgZgFiE/CBJjQJPcA8U4gNkdXAJMUAGJ+ZEVMaJIwAFfEhEUSRRFAgAEAVtgJyiLAPWAAAAAASUVORK5CYII=');
+        content: '';
+        display: block;
+        height: 21px;
+        position: absolute;
+        right: 24px;
+        top: -24px;
+        width: 184px;
+        background-repeat: no-repeat;
+        background-position: 175px 16px;
+    }
+}
+
+.i-sdc-dashboard-card-menu-item {
+    .hand;
+    line-height: 24px;
+    padding: 0 10px;
+    &:hover { .a_7; }
+}
+
+.w-sdc-dashboard-card-info-lifecycleState-icon{
+    position:absolute;
+    bottom:18px;
+    right:10px;
+}
+
+// Same for dashboard and catalog view.
+.w-sdc-dashboard-card-schema-image {
+    position: absolute;
+    top: 41%;
+
+    //TODO: Israel - remove this after getting the services sprite.
+    height: 45px;
+    width: 53px;
+    background-repeat: no-repeat;
+
+    // Center the icon vertical and horizontal.
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: -10px;
+    bottom: 0;
+}
+
+/* dashboard card main icons */
+.w-sdc-dashboard-card-schema-image.service      { .s-sdc-service }
+.w-sdc-dashboard-card-schema-image.resource     { .s-sdc-resource }
+
+/* dashboard card statuses icons */
+.w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKIN        { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKIN; }
+.w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT       { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKOUT; }
+.w-sdc-dashboard-card-edit.CERTIFIED                    { .sprite; .s-sdc-state.CERTIFIED; }
+.w-sdc-dashboard-card-edit.READY_FOR_CERTIFICATION      { .sprite; .s-sdc-state.READY_FOR_CERTIFICATION; }
+.w-sdc-dashboard-card-edit.CERTIFICATION_IN_PROGRESS    { .sprite; .s-sdc-state.CERTIFICATION_IN_PROGRESS; }
+.w-sdc-dashboard-card-edit.DISTRIBUTED                  { .sprite; .s-sdc-state.DISTRIBUTED; }
+
+.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKIN   { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKIN.green; }
+.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT  { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKOUT.green; }
+.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.CERTIFIED               { .sprite; .s-sdc-state.CERTIFIED.green; }
+.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.READY_FOR_CERTIFICATION { .sprite; .s-sdc-state.READY_FOR_CERTIFICATION.green; }
+.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.CERTIFICATION_IN_PROGRESS { .sprite; .s-sdc-state.CERTIFICATION_IN_PROGRESS.green; }
+.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.DISTRIBUTED             { .sprite; .s-sdc-state.DISTRIBUTED.green; }
+
+.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKIN     { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKIN.red; }
+.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT    { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKOUT.red; }
+.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.CERTIFIED                 { .sprite; .s-sdc-state.CERTIFIED.red; }
+.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.READY_FOR_CERTIFICATION   { .sprite; .s-sdc-state.READY_FOR_CERTIFICATION.red; }
+.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.CERTIFICATION_IN_PROGRESS { .sprite; .s-sdc-state.CERTIFICATION_IN_PROGRESS.red; }
+.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.DISTRIBUTED               { .sprite; .s-sdc-state.DISTRIBUTED.red; }