From d335621a0cb09f902be9a8ce16f6aa764c7cd9a9 Mon Sep 17 00:00:00 2001 From: Eric Wittmann Date: Wed, 21 Feb 2018 09:46:47 -0500 Subject: [PATCH] restored the loading graphic (not really needed anymore though) and fixed some indentation --- .../studio/src/app/app-routing.module.ts | 134 +++++++++--------- front-end/studio/src/app/app.component.ts | 38 ++--- front-end/studio/src/app/app.module.ts | 59 ++++---- front-end/studio/src/index.html | 115 +++++++++++++-- front-end/studio/src/main.ts | 32 ++--- front-end/studio/src/styles.css | 122 +++++----------- front-end/studio/src/typings.d.ts | 3 +- 7 files changed, 273 insertions(+), 230 deletions(-) diff --git a/front-end/studio/src/app/app-routing.module.ts b/front-end/studio/src/app/app-routing.module.ts index ddee3aec7..20c0b006b 100644 --- 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 index b2fb47f80..cd5b1224b 100644 --- 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 index 11c12d5ff..4c0fad0f9 100644 --- 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 index 47cd66916..d42aa8726 100644 --- a/front-end/studio/src/index.html +++ b/front-end/studio/src/index.html @@ -1,28 +1,113 @@ - - Apicurio Studio - + + Apicurio Studio + - - + + - - - + + + - - - + + + + + - Loading... + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+ - - - + + + diff --git a/front-end/studio/src/main.ts b/front-end/studio/src/main.ts index b1dab3382..6995ec61e 100644 --- a/front-end/studio/src/main.ts +++ b/front-end/studio/src/main.ts @@ -5,7 +5,7 @@ import {AppModule} from './app/app.module'; import {environment} from './environments/environment'; function printBanner(env) { - console.log(`%c ___________________________________________________ + console.log(`%c ___________________________________________________ Welcome to _ _ /\\ (_) (_) / \\ _ __ _ ___ _ _ _ __ _ ___ @@ -21,20 +21,20 @@ function printBanner(env) { } if (environment.production) { - enableProdMode(); - platformBrowserDynamic().bootstrapModule(AppModule).then(() => { - printBanner("Production"); - }).catch(err => console.log(err)); + enableProdMode(); + platformBrowserDynamic().bootstrapModule(AppModule).then(() => { + printBanner("Production"); + }).catch(err => console.log(err)); } else { - var keycloak = window["Keycloak"](); - keycloak.init({onLoad: 'login-required'}).success(function (authenticated) { - if (authenticated) { - window['keycloak'] = keycloak; - platformBrowserDynamic().bootstrapModule(AppModule).then(() => { - printBanner("Development"); - }).catch(err => console.log(err)); - } - }).error(function () { - alert('Failed to initialize authentication subsystem.'); - }); + var keycloak = window["Keycloak"](); + keycloak.init({onLoad: 'login-required'}).success(function (authenticated) { + if (authenticated) { + window['keycloak'] = keycloak; + platformBrowserDynamic().bootstrapModule(AppModule).then(() => { + printBanner("Development"); + }).catch(err => console.log(err)); + } + }).error(function () { + alert('Failed to initialize authentication subsystem.'); + }); } diff --git a/front-end/studio/src/styles.css b/front-end/studio/src/styles.css index e7863ec04..c4b3d2b25 100644 --- a/front-end/studio/src/styles.css +++ b/front-end/studio/src/styles.css @@ -1,133 +1,87 @@ body { - font-size: 13px; + font-size: 13px; } #api-page-body { - margin-left: 120px; + margin-left: 120px; } #api-page-body .modal-header { - background-color: rgb(57, 165, 220); - color: white; + background-color: rgb(57, 165, 220); + color: white; } + #api-page-body .modal-header button.close { - color: white; + color: white; } + #api-page-body .modal-footer { - border-top: 1px solid rgb(221, 221, 221); - background-color: rgb(239, 239, 239); + border-top: 1px solid rgb(221, 221, 221); + background-color: rgb(239, 239, 239); } #login-form { - background-color: black; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; + background-color: black; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; } .modal-dialog { - margin-top: 50px; + margin-top: 50px; } /** PACE Theme: minimal */ .pace { - -webkit-pointer-events: none; - pointer-events: none; + -webkit-pointer-events: none; + pointer-events: none; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } .pace-inactive { - display: none; + display: none; } .pace .pace-progress { - background: #ef6366; - position: fixed; - z-index: 2000; - top: 0; - right: 100%; - width: 100%; - height: 3px; + background: #ef6366; + position: fixed; + z-index: 2000; + top: 0; + right: 100%; + width: 100%; + height: 3px; } form input.ng-invalid.ng-touched { - border-color: red; + border-color: red; } .center-text { - text-align: center; + text-align: center; } .dropdown-menu > li > a { - cursor: pointer; -} - -/* Loading Animations */ -#load-container { - padding-top: 60px; // Approx in content area rather than nav-bar. -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; - } + cursor: pointer; } #api-breadcrumb-bar { - background: white; - border-bottom: 1px solid #ccc; - height: 37px; + background: white; + border-bottom: 1px solid #ccc; + height: 37px; } + #api-breadcrumb-bar .api-breadcrumbs { - height: 37px; + height: 37px; } .dropdown-menu { - font-size: 13px; + font-size: 13px; } diff --git a/front-end/studio/src/typings.d.ts b/front-end/studio/src/typings.d.ts index ef5c7bd62..884a308b7 100644 --- a/front-end/studio/src/typings.d.ts +++ b/front-end/studio/src/typings.d.ts @@ -1,5 +1,6 @@ /* SystemJS module definition */ declare var module: NodeModule; + interface NodeModule { - id: string; + id: string; }