Skip to content
This repository has been archived by the owner on May 16, 2023. It is now read-only.

Commit

Permalink
Moved component templates to their own files
Browse files Browse the repository at this point in the history
  • Loading branch information
dan-silver committed May 17, 2017
1 parent 4385313 commit 264df96
Show file tree
Hide file tree
Showing 30 changed files with 620 additions and 644 deletions.
37 changes: 18 additions & 19 deletions dist/explorer.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/explorer.js.map

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion rollup-config.js
Expand Up @@ -20,7 +20,9 @@ export default {
plugins: [
nodeResolve({jsnext: true, module: true}),
commonjs({
include: 'node_modules/rxjs/**',
include: [
'node_modules/rxjs/**'
]
}),
uglify()
]
Expand Down
9 changes: 9 additions & 0 deletions src/app/app.component.html
@@ -0,0 +1,9 @@
<div class="ms-Grid">
<div class="ms-Grid-row">
<sidebar class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg4 ms-u-xl3 ms-u-xxl3 ms-u-xxxl2"></sidebar>
<main-column class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg8 ms-u-xl9 ms-u-xxl9 ms-u-xxxl10" id="explorer-main"></main-column>
</div>
<history-panel></history-panel>
<sample-categories-panel></sample-categories-panel>
<scopes-dialog></scopes-dialog>
<generic-dialog></generic-dialog>
18 changes: 3 additions & 15 deletions src/app/app.component.ts
Expand Up @@ -5,8 +5,6 @@
import { Component, OnInit, Input, ChangeDetectorRef, DoCheck, AfterViewInit } from '@angular/core';
import { Response, Headers } from '@angular/http';

import * as moment from "moment";

import { ExplorerOptions, RequestType, ExplorerValues, GraphApiCall, GraphRequestHeader, Message, SampleQuery, MessageBarContent } from "./base";
import { GraphExplorerComponent } from "./GraphExplorerComponent";
import { initAuth, checkHasValidAuthToken, isAuthenticated } from "./auth";
Expand All @@ -21,22 +19,12 @@ import { ResponseStatusBarComponent } from "./response-status-bar.component";
import { GenericDialogComponent } from "./generic-message-dialog.component";
import { getString } from "./localization-helpers";

declare let mwf, ga;
declare let mwf, ga, moment;

@Component({
selector: 'api-explorer',
providers: [GraphService],
template: `
<div class="ms-Grid">
<div class="ms-Grid-row">
<sidebar class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg4 ms-u-xl3 ms-u-xxl3 ms-u-xxxl2"></sidebar>
<main-column class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg8 ms-u-xl9 ms-u-xxl9 ms-u-xxxl10" id="explorer-main"></main-column>
</div>
<history-panel></history-panel>
<sample-categories-panel></sample-categories-panel>
<scopes-dialog></scopes-dialog>
<generic-dialog></generic-dialog>
`,
templateUrl: './app.component.html',
styles: [`
#explorer-main {
padding-left: 12px;
Expand Down Expand Up @@ -90,7 +78,7 @@ export class AppComponent extends GraphExplorerComponent implements OnInit, Afte
'component': mwf.Drawer,
}])

// moment.locale(AppComponent.Options.Language);
moment.locale(AppComponent.Options.Language);
}

static Options: ExplorerOptions = {
Expand Down
44 changes: 44 additions & 0 deletions src/app/authentication.component.css
@@ -0,0 +1,44 @@
#ms-signin-button {
max-width: 215px;
margin: 20px 0 0px 0px;
cursor: pointer;
display: inline-block;
}

#signout {
float: right;
padding-right: 16px;
color: #00bcf2;
}

#userDisplayName {
color: #e2e2e2
}

#userMail {
color: #a0a0a0;
}

#authenticating-progress-bar {
margin: 0px auto;
}

.noPicture .ms-Persona-details {
padding-left: 0px;
}

#ms-signin-button-holder {
position: absolute;
left: 0px;
width: 100%;
text-align: center;
}

#manage-permissions {
float: left;
color: #00bcf2;
}

#signout, #manage-permissions {
margin-top: 9px;
}
29 changes: 29 additions & 0 deletions src/app/authentication.component.html
@@ -0,0 +1,29 @@
<div *ngIf="getAuthenticationStatus() == 'anonymous'">
<div tabindex="-1">{{getStr('Using demo tenant')}}</div>
<div tabindex="-1">{{getStr('To access your own data:')}}</div>
<div id="ms-signin-button-holder">
<img id="ms-signin-button" alt="{{getStr('sign in')}}" src="{{getAssetPath('assets/images/MSSignInButton.svg')}}" (click)="login()"/>
</div>
</div>
<div *ngIf="getAuthenticationStatus() == 'authenticating'">
<div class="c-progress f-indeterminate-local f-progress-small" id="authenticating-progress-bar" role="progressbar" aria-valuetext="Loading..." tabindex="0" aria-label="indeterminate local small progress bar">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div *ngIf="getAuthenticationStatus() == 'authenticated'" id="persona-holder">
<div class="ms-Persona" [ngClass]="{noPicture: !authInfo.user.profileImageUrl}">
<div class="ms-Persona-imageArea" *ngIf="authInfo.user.profileImageUrl">
<img class="ms-Persona-image" [src]="sanitize(authInfo.user.profileImageUrl)">
</div>
<div class="ms-Persona-details">
<div class="ms-Persona-primaryText" id='userDisplayName' *ngIf="authInfo.user.displayName">{{authInfo.user.displayName}}</div>
<div class="ms-Persona-secondaryText" id='userMail' *ngIf="authInfo.user.emailAddress">{{authInfo.user.emailAddress}}</div>
</div>
</div>
<a href="#" id="signout" class="c-hyperlink" tabindex=0 (click)="logout()">{{getStr('sign out')}}</a>
<a href="#" id="manage-permissions" class="c-hyperlink" tabindex=0 (click)="manageScopes()">{{getStr('modify permissions')}}</a>
</div>
80 changes: 2 additions & 78 deletions src/app/authentication.component.ts
Expand Up @@ -13,84 +13,8 @@ import { localLogout } from "./auth";

@Component({
selector: 'authentication',
styles: [`
#ms-signin-button {
max-width: 215px;
margin: 20px 0 0px 0px;
cursor: pointer;
display: inline-block;
}
#signout {
float: right;
padding-right: 16px;
color: #00bcf2;
}
#userDisplayName {
color: #e2e2e2
}
#userMail {
color: #a0a0a0;
}
#authenticating-progress-bar {
margin: 0px auto;
}
.noPicture .ms-Persona-details {
padding-left: 0px;
}
#ms-signin-button-holder {
position: absolute;
left: 0px;
width: 100%;
text-align: center;
}
#manage-permissions {
float: left;
color: #00bcf2;
}
#signout, #manage-permissions {
margin-top: 9px;
}
`],
template: `
<div *ngIf="getAuthenticationStatus() == 'anonymous'">
<div tabindex="-1">{{getStr('Using demo tenant')}}</div>
<div tabindex="-1">{{getStr('To access your own data:')}}</div>
<div id="ms-signin-button-holder">
<img id="ms-signin-button" alt="{{getStr('sign in')}}" src="{{getAssetPath('assets/images/MSSignInButton.svg')}}" (click)="login()"/>
</div>
</div>
<div *ngIf="getAuthenticationStatus() == 'authenticating'">
<div class="c-progress f-indeterminate-local f-progress-small" id="authenticating-progress-bar" role="progressbar" aria-valuetext="Loading..." tabindex="0" aria-label="indeterminate local small progress bar">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div *ngIf="getAuthenticationStatus() == 'authenticated'" id="persona-holder">
<div class="ms-Persona" [ngClass]="{noPicture: !authInfo.user.profileImageUrl}">
<div class="ms-Persona-imageArea" *ngIf="authInfo.user.profileImageUrl">
<img class="ms-Persona-image" [src]="sanitize(authInfo.user.profileImageUrl)">
</div>
<div class="ms-Persona-details">
<div class="ms-Persona-primaryText" id='userDisplayName' *ngIf="authInfo.user.displayName">{{authInfo.user.displayName}}</div>
<div class="ms-Persona-secondaryText" id='userMail' *ngIf="authInfo.user.emailAddress">{{authInfo.user.emailAddress}}</div>
</div>
</div>
<a href="#" id="signout" class="c-hyperlink" tabindex=0 (click)="logout()">{{getStr('sign out')}}</a>
<a href="#" id="manage-permissions" class="c-hyperlink" tabindex=0 (click)="manageScopes()">{{getStr('modify permissions')}}</a>
</div>
`,
styleUrls: ['./authentication.component.css'],
templateUrl: './authentication.component.html',
})
export class AuthenticationComponent extends GraphExplorerComponent {
constructor(private sanitizer: DomSanitizer) {
Expand Down
1 change: 0 additions & 1 deletion src/app/generic-message-dialog.component.ts
Expand Up @@ -16,7 +16,6 @@ declare let fabric, mwf;
`],
template: `
<div>
<div class="ms-Dialog ms-Dialog--close" id="message-dialog">
<button class="ms-Dialog-button ms-Dialog-buttonClose">
Expand Down
5 changes: 3 additions & 2 deletions src/app/history-panel.component.ts
Expand Up @@ -2,7 +2,6 @@
// Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. See License in the project root for license information.
// ------------------------------------------------------------------------------
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import * as moment from "moment"

import { GraphExplorerComponent } from "./GraphExplorerComponent";
import { GraphApiCall } from "./base";
Expand All @@ -11,6 +10,8 @@ import { getShortQueryText } from "./ApiCallDisplayHelpers";
import { getString } from "./localization-helpers";
import { saveHistoryToLocalStorage } from "./history";

declare let moment:any;

@Component({
selector: 'history-panel',
styles: [`
Expand Down Expand Up @@ -113,7 +114,7 @@ export class HistoryPanelComponent extends GraphExplorerComponent implements OnI
ngOnInit(): void {
setInterval(() => {
for (let historyRecord of AppComponent.requestHistory) {
historyRecord.relativeDate = historyRecord.requestSentAt.toString();
historyRecord.relativeDate = moment(historyRecord.requestSentAt).fromNow();
}
this._changeDetectionRef.detectChanges();
}, 5000);
Expand Down
4 changes: 2 additions & 2 deletions src/app/history-query.component.ts
Expand Up @@ -10,7 +10,7 @@ import { getString } from "./localization-helpers";
import { AppModule } from "./app.module";
import { QueryRowComponent } from "./queryrow.component";

import * as moment from "moment"
declare let moment:any;

@Component({
selector: 'history-query-row',
Expand Down Expand Up @@ -68,7 +68,7 @@ export class HistoryRowComponent extends QueryRowComponent implements OnInit {


setRelativeDate() {
this.query.relativeDate = this.query.requestSentAt.toString();
this.query.relativeDate = moment(this.query.requestSentAt).fromNow();
this._changeDetectionRef.detectChanges();
}

Expand Down
77 changes: 77 additions & 0 deletions src/app/main-column.component.css
@@ -0,0 +1,77 @@
#request-bar-row-form {
display: flex;
flex-wrap: wrap;
margin-top: -5px;
}

#request-bar-row-form::after {
content: '';
width: 100%;
}

.c-select.f-border {
min-width: inherit;
}

.c-select:after {
display: none;
}

#responseImg {
max-width: 300px;
}

#graph-request-url {
flex: 1;
margin-right: 8px;
max-width: 100%;
}

#submitBtn {
height: 32px;
margin-top: 20px;
padding-top: 6px;
}

.ms-Spinner {
margin-left: 38px;
position: relative;
top: -1px;
}

#spacer-1 {
margin-bottom: 50px;
}

button.c-button[type=submit]:focus:not(.x-hidden-focus) {
outline: #000 solid 1px !important;
}


.c-auto-suggest .c-menu, .m-auto-suggest .c-menu {
max-width: 100%;
}
.c-menu.f-auto-suggest-no-results {
display: none;
}

.c-menu.f-auto-suggest-scroll {
max-height: 300px !important;
}

#go-lightning-icon {
position: relative;
top: 2px;
}


/*mobile*/


@media (max-width: 639px) {
.bump-flex-row-mobile {
order: 1;
margin: 0px auto;
margin-top: 20px;
}
}

0 comments on commit 264df96

Please sign in to comment.