Initial OpenECOMP SDC commit

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

3 files changed, 163 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/view-models/preloading/preloading-view.html b/catalog-ui/app/scripts/view-models/preloading/preloading-view.html
new file mode 100644
index 0000000000..c0512dd9ec
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/preloading/preloading-view.html
@@ -0,0 +1,9 @@
+<div class="sdc-loading-page">
+    <h1 class="caption1" translate="SIGN_IN_CAPTION"></h1>
+    <p class="caption2" translate="SIGN_IN_DESCRIPTION"></p>
+
+    <div class="load-container-wrapper">
+        <div class="load-container load2 animated fadeIn"><div class="loader">Loading...</div></div>
+    </div>
+
+</div>
diff --git a/catalog-ui/app/scripts/view-models/preloading/preloading-view.less b/catalog-ui/app/scripts/view-models/preloading/preloading-view.less
new file mode 100644
index 0000000000..b02ea54621
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/preloading/preloading-view.less
@@ -0,0 +1,107 @@
+/*
+.sdc-loading-page {
+
+    background-color: @main_color_l;
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    h1 {
+        .c_5;
+        text-align: center;
+    }
+
+    p {
+        display: block;
+        .e_4;
+    }
+
+    .caption1, .caption2 {
+        visibility: hidden;
+    }
+
+    .load-container-wrapper {
+        position: relative;
+
+        .load-container {
+
+            @background_color: #000000;
+
+            .loader,
+            .loader:before,
+            .loader:after {
+                border-radius: 50%;
+            }
+            .loader:before,
+            .loader:after {
+                position: absolute;
+                content: '';
+            }
+            .loader:before {
+                width: 5.2em;
+                height: 10.2em;
+                background: @background_color;
+                border-radius: 10.2em 0 0 10.2em;
+                top: -0.1em;
+                left: -0.1em;
+                -webkit-transform-origin: 5.2em 5.1em;
+                transform-origin: 5.2em 5.1em;
+                -webkit-animation: load2 2s infinite ease 1.5s;
+                animation: load2 2s infinite ease 1.5s;
+            }
+            .loader {
+                color: #ffffff;
+                font-size: 11px;
+                text-indent: -99999em;
+                margin: 0 auto;
+                /!*margin: 55px auto;*!/
+                position: relative;
+                width: 10em;
+                height: 10em;
+                box-shadow: inset 0 0 0 1em;
+                -webkit-transform: translateZ(0);
+                -ms-transform: translateZ(0);
+                transform: translateZ(0);
+            }
+            .loader:after {
+                width: 5.2em;
+                height: 10.2em;
+                background: @background_color;
+                border-radius: 0 10.2em 10.2em 0;
+                top: -0.1em;
+                left: 5.1em;
+                -webkit-transform-origin: 0px 5.1em;
+                transform-origin: 0px 5.1em;
+                -webkit-animation: load2 2s infinite ease;
+                animation: load2 2s infinite ease;
+            }
+            @-webkit-keyframes load2 {
+                0% {
+                    -webkit-transform: rotate(0deg);
+                    transform: rotate(0deg);
+                }
+                100% {
+                    -webkit-transform: rotate(360deg);
+                    transform: rotate(360deg);
+                }
+            }
+            @keyframes load2 {
+                0% {
+                    -webkit-transform: rotate(0deg);
+                    transform: rotate(0deg);
+                }
+                100% {
+                    -webkit-transform: rotate(360deg);
+                    transform: rotate(360deg);
+                }
+            }
+        }
+
+    }
+
+}
+*/
diff --git a/catalog-ui/app/scripts/view-models/preloading/preloading-view.ts b/catalog-ui/app/scripts/view-models/preloading/preloading-view.ts
new file mode 100644
index 0000000000..7127b70e3c
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/preloading/preloading-view.ts
@@ -0,0 +1,47 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+module Sdc.ViewModels {
+    'use strict';
+
+    interface IPreLoadingViewScope {
+        startZoomIn: boolean;
+    }
+
+    export class PreLoadingViewModel {
+
+        static '$inject' = ['$scope'];
+        constructor(private $scope:IPreLoadingViewScope){
+            this.init($scope);
+        }
+
+        private init = ($scope:IPreLoadingViewScope):void => {
+            this.animate($('.caption1'),'fadeInUp',400);
+            this.animate($('.caption2'),'fadeInUp',800);
+        };
+
+        private animate = (element:any, animation:string, when:number):void => {
+            window.setTimeout(()=>{
+                element.addClass("animated " + animation);
+                element[0].style="visibility: visible;";
+            },when);
+        };
+
+    }
+}