restored the loading graphic (not really needed anymore though) and f…

…ixed some indentation
Apicurio · Feb 21, 2018 · d335621 · d335621
1 parent 0cf2ff5
commit d335621
Show file tree

Hide file tree

Showing 7 changed files with 273 additions and 230 deletions.
diff --git a/front-end/studio/src/app/app-routing.module.ts b/front-end/studio/src/app/app-routing.module.ts
@@ -32,77 +32,77 @@ import {ApiAcceptPageComponent} from './pages/apis/{apiId}/collaboration/accept/
 import {ApiEditorPageComponent, ApiEditorPageGuard} from './pages/apis/{apiId}/editor/api-editor.page';
 
 const routes: Routes = [
-  {
-    path: '',
-    component: DashboardPageComponent,
-    canActivate: [ AuthenticationCanActivateGuard ]
-  },
-  {
-    path: "settings",
-    component: SettingsPageComponent,
-    canActivate: [ AuthenticationCanActivateGuard ]
-  },
-  {
-    path: "settings/profile",
-    component: ProfilePageComponent,
-    canActivate: [ AuthenticationCanActivateGuard ]
-  },
-  {
-    path: "settings/accounts",
-    component: LinkedAccountsPageComponent,
-    canActivate: [ AuthenticationCanActivateGuard ]
-  },
-  {
-    path: "settings/accounts/:accountType/created",
-    component: CreatedLinkedAccountPageComponent,
-    canActivate: [ AuthenticationCanActivateGuard ]
-  },
-  {
-    path: "apis",
-    component: ApisPageComponent,
-    canActivate: [ AuthenticationCanActivateGuard ]
-  },
-  {
-    path: "apis/create",
-    component: CreateApiPageComponent,
-    canActivate: [ AuthenticationCanActivateGuard ]
-  },
-  {
-    path: "apis/import",
-    component: ImportApiPageComponent,
-    canActivate: [ AuthenticationCanActivateGuard ]
-  },
-  {
-    path: "apis/:apiId",
-    component: ApiDetailPageComponent,
-    canActivate: [ AuthenticationCanActivateGuard ]
-  },
-  {
-    path: "apis/:apiId/collaboration",
-    component: ApiCollaborationPageComponent,
-    canActivate: [ AuthenticationCanActivateGuard ]
-  },
-  {
-    path: "apis/:apiId/collaboration/accept/:inviteId",
-    component: ApiAcceptPageComponent,
-    canActivate: [ AuthenticationCanActivateGuard ]
-  },
-  {
-    path: "apis/:apiId/editor",
-    component: ApiEditorPageComponent,
-    canActivate: [ AuthenticationCanActivateGuard ]
-  },
+    {
+        path: '',
+        component: DashboardPageComponent,
+        canActivate: [AuthenticationCanActivateGuard]
+    },
+    {
+        path: "settings",
+        component: SettingsPageComponent,
+        canActivate: [AuthenticationCanActivateGuard]
+    },
+    {
+        path: "settings/profile",
+        component: ProfilePageComponent,
+        canActivate: [AuthenticationCanActivateGuard]
+    },
+    {
+        path: "settings/accounts",
+        component: LinkedAccountsPageComponent,
+        canActivate: [AuthenticationCanActivateGuard]
+    },
+    {
+        path: "settings/accounts/:accountType/created",
+        component: CreatedLinkedAccountPageComponent,
+        canActivate: [AuthenticationCanActivateGuard]
+    },
+    {
+        path: "apis",
+        component: ApisPageComponent,
+        canActivate: [AuthenticationCanActivateGuard]
+    },
+    {
+        path: "apis/create",
+        component: CreateApiPageComponent,
+        canActivate: [AuthenticationCanActivateGuard]
+    },
+    {
+        path: "apis/import",
+        component: ImportApiPageComponent,
+        canActivate: [AuthenticationCanActivateGuard]
+    },
+    {
+        path: "apis/:apiId",
+        component: ApiDetailPageComponent,
+        canActivate: [AuthenticationCanActivateGuard]
+    },
+    {
+        path: "apis/:apiId/collaboration",
+        component: ApiCollaborationPageComponent,
+        canActivate: [AuthenticationCanActivateGuard]
+    },
+    {
+        path: "apis/:apiId/collaboration/accept/:inviteId",
+        component: ApiAcceptPageComponent,
+        canActivate: [AuthenticationCanActivateGuard]
+    },
+    {
+        path: "apis/:apiId/editor",
+        component: ApiEditorPageComponent,
+        canActivate: [AuthenticationCanActivateGuard]
+    },
 ];
 
 
 @NgModule({
-  imports: [
-    RouterModule.forRoot(routes)
-  ],
-  exports: [
-    RouterModule
-  ],
-  declarations: []
+    imports: [
+        RouterModule.forRoot(routes)
+    ],
+    exports: [
+        RouterModule
+    ],
+    declarations: []
 })
 export class AppRoutingModule {
 }
diff --git a/front-end/studio/src/app/app.component.ts b/front-end/studio/src/app/app.component.ts
@@ -15,33 +15,33 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 import {IAuthenticationService} from './services/auth.service';
 
 @Component({
-  moduleId: module.id,
-  selector: "apicurio-studio",
-  templateUrl: "app.component.html",
-  styleUrls: [ "app.component.css" ]
+    moduleId: module.id,
+    selector: "apicurio-studio",
+    templateUrl: "app.component.html",
+    styleUrls: ["app.component.css"]
 })
 export class AppComponent {
 
-  public routerOutletWrapperId: string;
-  public routerOutletWrapperClass: string;
+    public routerOutletWrapperId: string;
+    public routerOutletWrapperClass: string;
 
-  constructor(public authService: IAuthenticationService) {
-    this.routerOutletWrapperId = "api-page-body";
-    this.routerOutletWrapperClass = "";
-
-    authService.isAuthenticated().subscribe(authed => {
-      if (authed) {
+    constructor(public authService: IAuthenticationService) {
         this.routerOutletWrapperId = "api-page-body";
         this.routerOutletWrapperClass = "";
-      } else {
-        this.routerOutletWrapperId = "login-form";
-        this.routerOutletWrapperClass = "login-pf";
-      }
-    });
-  }
+
+        authService.isAuthenticated().subscribe(authed => {
+            if (authed) {
+                this.routerOutletWrapperId = "api-page-body";
+                this.routerOutletWrapperClass = "";
+            } else {
+                this.routerOutletWrapperId = "login-form";
+                this.routerOutletWrapperClass = "login-pf";
+            }
+        });
+    }
 
 }
diff --git a/front-end/studio/src/app/app.module.ts b/front-end/studio/src/app/app.module.ts
@@ -94,38 +94,41 @@ import {AddPathDialogComponent} from './pages/apis/{apiId}/editor/_components/di
 import {AddResponseDialogComponent} from './pages/apis/{apiId}/editor/_components/dialogs/add-response.component';
 import {AddFormDataParamDialogComponent} from './pages/apis/{apiId}/editor/_components/dialogs/add-formData-param.component';
 import {AddDefinitionDialogComponent} from './pages/apis/{apiId}/editor/_components/dialogs/add-definition.component';
-import {Main20FormComponent, Main30FormComponent} from './pages/apis/{apiId}/editor/_components/forms/main-form.component';
+import {
+    Main20FormComponent,
+    Main30FormComponent
+} from './pages/apis/{apiId}/editor/_components/forms/main-form.component';
 import {AddMediaTypeDialogComponent} from './pages/apis/{apiId}/editor/_components/dialogs/add-media-type.component';
 
 
 @NgModule({
-  imports: [
-    BrowserModule, FormsModule, HttpClientModule, AppRoutingModule, ModalModule.forRoot(), BsDropdownModule.forRoot(),
-    AceEditorModule
-  ],
-  declarations: [
-    AppComponent, DashboardPageComponent, BreadcrumbsComponent, BreadcrumbComponent, PageErrorComponent,
-    VerticalNavComponent, NavHeaderComponent, ConfirmDeleteDialogComponent, CopyUrlDialogComponent,
-    TextAreaAutosize, DivAutoHeight, TextBoxAutosize, NotFoundPageComponent, SettingsNavComponent,
-    CreatedLinkedAccountPageComponent, LinkedAccountsPageComponent, ProfilePageComponent, SettingsPageComponent,
-    ApisPageComponent, CreateApiPageComponent, ImportApiPageComponent, ImportApiFormComponent, CreateApiFormComponent,
-    ApisListComponent, ApisCardsComponent, DropDownComponent, ActivityItemComponent, ApiCollaborationPageComponent,
-    ApiAcceptPageComponent, ApiDetailPageComponent, ValidationIconComponent, ServerUrlComponent, SearchComponent,
-    SchemaTypeComponent, ResponseItemComponent, PathItemComponent, InlineTextAreaComponent, InlineTextEditorComponent,
-    ContextHelpComponent, SetLicenseDialogComponent, SetContactDialogComponent, SecurityScheme30DialogComponent,
-    SecurityScheme20DialogComponent, EditorDisconnectedDialogComponent, ClonePathDialogComponent, CloneDefinitionDialogComponent,
-    AddTagDialogComponent, AddServerDialogComponent, AddSchemaPropertyDialogComponent, ResponseRow30Component, ResponseRowComponent,
-    ParamRowComponent, ContentComponent, PropertyRowComponent, ServersSectionComponent, ProblemFormComponent, PathFormComponent,
-    OperationFormComponent, Operation30FormComponent, DefinitionItemComponent, DefinitionFormComponent, EditorMasterComponent,
-    ApiEditorPageComponent, ApiEditorComponent, AddQueryParamDialogComponent, AddPathDialogComponent, AddResponseDialogComponent,
-    AddFormDataParamDialogComponent, AddDefinitionDialogComponent, AddMediaTypeDialogComponent, Main20FormComponent,
-    Main30FormComponent
-  ],
-  providers: [
-    ApisServiceProvider, LinkedAccountsServiceProvider, AuthenticationServiceProvider, ConfigService,
-    AuthenticationCanActivateGuard
-  ],
-  bootstrap: [AppComponent]
+    imports: [
+        BrowserModule, FormsModule, HttpClientModule, AppRoutingModule, ModalModule.forRoot(), BsDropdownModule.forRoot(),
+        AceEditorModule
+    ],
+    declarations: [
+        AppComponent, DashboardPageComponent, BreadcrumbsComponent, BreadcrumbComponent, PageErrorComponent,
+        VerticalNavComponent, NavHeaderComponent, ConfirmDeleteDialogComponent, CopyUrlDialogComponent,
+        TextAreaAutosize, DivAutoHeight, TextBoxAutosize, NotFoundPageComponent, SettingsNavComponent,
+        CreatedLinkedAccountPageComponent, LinkedAccountsPageComponent, ProfilePageComponent, SettingsPageComponent,
+        ApisPageComponent, CreateApiPageComponent, ImportApiPageComponent, ImportApiFormComponent, CreateApiFormComponent,
+        ApisListComponent, ApisCardsComponent, DropDownComponent, ActivityItemComponent, ApiCollaborationPageComponent,
+        ApiAcceptPageComponent, ApiDetailPageComponent, ValidationIconComponent, ServerUrlComponent, SearchComponent,
+        SchemaTypeComponent, ResponseItemComponent, PathItemComponent, InlineTextAreaComponent, InlineTextEditorComponent,
+        ContextHelpComponent, SetLicenseDialogComponent, SetContactDialogComponent, SecurityScheme30DialogComponent,
+        SecurityScheme20DialogComponent, EditorDisconnectedDialogComponent, ClonePathDialogComponent, CloneDefinitionDialogComponent,
+        AddTagDialogComponent, AddServerDialogComponent, AddSchemaPropertyDialogComponent, ResponseRow30Component, ResponseRowComponent,
+        ParamRowComponent, ContentComponent, PropertyRowComponent, ServersSectionComponent, ProblemFormComponent, PathFormComponent,
+        OperationFormComponent, Operation30FormComponent, DefinitionItemComponent, DefinitionFormComponent, EditorMasterComponent,
+        ApiEditorPageComponent, ApiEditorComponent, AddQueryParamDialogComponent, AddPathDialogComponent, AddResponseDialogComponent,
+        AddFormDataParamDialogComponent, AddDefinitionDialogComponent, AddMediaTypeDialogComponent, Main20FormComponent,
+        Main30FormComponent
+    ],
+    providers: [
+        ApisServiceProvider, LinkedAccountsServiceProvider, AuthenticationServiceProvider, ConfigService,
+        AuthenticationCanActivateGuard
+    ],
+    bootstrap: [AppComponent]
 })
 export class AppModule {
 }
diff --git a/front-end/studio/src/index.html b/front-end/studio/src/index.html
@@ -1,28 +1,113 @@
 <!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <title>Apicurio Studio</title>
-  <base href="/">
+    <meta charset="utf-8">
+    <title>Apicurio Studio</title>
+    <base href="/">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon"/>
 
-  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.37.1/css/patternfly.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.37.1/css/patternfly-additions.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.37.1/css/patternfly.min.css">
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.37.1/css/patternfly-additions.min.css">
 
-  <script type="text/javascript" src="./keycloak.js"></script>
-  <script type="text/javascript" src="./version.js"></script>
-  <script type="text/javascript" src="./config.js"></script>
+    <script type="text/javascript" src="./keycloak.js"></script>
+    <script type="text/javascript" src="./version.js"></script>
+    <script type="text/javascript" src="./config.js"></script>
+
+    <style>
+        #load-container {
+            padding-top: 60px;
+            margin: auto;
+            animation: fadein 2s;
+        }
+        #apicurio-the-hero {
+            display: block;
+            height: auto;
+            margin: auto;
+            width: 200px;
+        }
+        #apicurio-the-hero #path3401,
+        #apicurio-the-hero #path3397,
+        #apicurio-the-hero #path3393 {
+            fill: white;
+            stroke: #bfbfbf;
+            stroke-width: 1;
+        }
+
+        #ball-holder {
+            width: 200px;
+            margin: auto;
+        }
+        #ball-holder #ball {
+            display: block;
+            width: 30px;
+            height: 30px;
+            border-radius: 100%;
+            fill: white;
+            stroke: #bfbfbf;
+            stroke-width: 2;
+            animation: loadball 3s infinite linear;
+        }
+
+        @keyframes loadball {
+            50% { transform: translate(170px, 0px);  }
+        }
+
+        @keyframes fadein {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+    </style>
 
 </head>
 <body class="cards-pf">
-  <apicurio-studio>Loading...</apicurio-studio>
+    <apicurio-studio>
+        <div class="container container-fluid" id="load-container">
+            <div id="apicurio-holder">
+                <svg xmlns="http://www.w3.org/2000/svg" id="apicurio-the-hero" width="407.23865" height="654.2533" viewBox="0 0 407.23865 654.2533">
+                    <defs id="defs3359">
+                        <clipPath id="clipPath3369">
+                            <path id="path3371" d="M0 735h600V0H0v735z" />
+                        </clipPath>
+                    </defs>
+                    <g id="g3363">
+                        <g id="g3365">
+                            <g id="g3367" clip-path="url(#clipPath3369)" transform="matrix(1.25 0 0 -1.25 -342.76 816.93)">
+                                <g id="g3422">
+                                    <g id="g3391">
+                                        <path id="path3393" d="M437.5742 131c.763 8 12.761 24.589 12.761 24.589s-9.107 77.722-7.378 85.474c2.08 9.322 16.74 23.828 19.129 33.068 3.946 15.258-1.168 63.035-1.168 63.035s-47.929-55.918-65.256-73.296c-3.007-3.017-10.129-7.984-12.704-11.377-18.087-23.74-51.163-99.098-51.163-99.098l7.944-22.395h-.298 98.606-.473z" />
+                                    </g>
+                                    <g id="g3395">
+                                        <path id="path3397" d="M276.15572 653.545217l-1.94673-523.402637L301.2419 131h.334-.334c3.836 6 11.046 17.947 11.046 17.947s-3.813 76.975 8.92 101.158c6.295 11.952 27.071 21.567 34.223 33.018 21.335 34.166 55.393 100.066 55.848 135.838.279 21.431-26.776 81.455-26.776 81.455l-30.12-53.561s8.084-9.521 7.803-13.385c-1.382-18.883-17.249-63.034-17.249-63.034l14.589-6.24 5.994-18.876s-5.914-.648-6.704-2.23c-1.183-2.355 3.319-10.01 3.319-10.01s-24.529-12.222-31.302-7.839c-8.148 5.276-6.079 22.791-8.847 41.047-4.621 30.435-10.75 65.263-10.607 66.07.744 4.188 8.621 14.538 8.621 14.538v12.235s8.045 114.963 21.807 121.631c7.584 3.676 50.613 3.088 94.671-3.712 0 0 3.667 6.662 2.851 8.833-1.384 3.682-13.455 8.131-13.455 8.131s-6.252 33.891 9.124 47.033c14.541 12.432 47.498 1.095 48.091-9.67 1.494-27.192 1.967-59.185 11.726-67.798 16.407-14.482 36.629-17.223 44.936-27.432 18.545-22.797 17.007-75.628 15.844-116.481-.109-3.87 7.951-9.103 8.53-12.933 1.884-12.459.555-38.745-3.206-60.608-3.022-17.576-7.613-32.292-13.365-34.667-6.616-2.732-27.775 6.976-27.775 6.976s4.028 6.805 2.977 8.906c-.699 1.402-5.947 1.985-5.947 1.985l4.097 15.881 10.794 5.948-8.177 38.835c-11.407-55.936-20.948-79.243-23.681-106.342-.455-4.539 1.323-13.729.699-18.263-3.721-27.091-26.722-110.96-26.722-110.96L522.7149 131h-.925 78.21l-3.42968 520.830379z" />
+                                    </g>
+                                    <g id="g3399">
+                                        <path id="path3401" d="M458.7998 434.8311s7.744 47.354 8.234 63.401c.365 11.875-4.698 47.289-4.698 47.289l-8.552 17.608s6.93.818 12.252 0c4.941-.76 9.381-3.518 9.381-3.518l-10.059-13.585s13.885-36.203 16.649-48.792c3.636-16.558 8.995-67.438 8.995-67.438s-4.821-7.275-6.65-9.531c-2.615-3.223-11.361-12.104-11.361-12.104s-4.579 11.109-6.472 14.632c-1.694 3.149-7.719 12.038-7.719 12.038" />
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </svg>
+            </div>
+            <div id="ball-holder">
+                <svg id="ball" viewBox="-50 -50 100 100">
+                    <circle cx="0" cy="0" r="30" />
+                </svg>
+            </div>
+        </div>
+    </apicurio-studio>
 
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
-  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.39.0/js/patternfly.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+<script type="text/javascript"
+        src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.39.0/js/patternfly.min.js"></script>
 
 </body>
 </html>