tsai
/
squidex
mirror of https://github.com/Squidex/squidex.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

1) Caching improvement 

2) Lazy Loading
pull/1/head
Sebastian 9 years ago
parent
394205be49
commit
9ba7f4c68f
11 changed files with 252 additions and 183 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      src/Squidex/Startup.cs
  2. 2
      src/Squidex/app-config/webpack.config.js
  3. 15
      src/Squidex/app/app.routes.ts
  4. 54
      src/Squidex/app/features/settings/pages/clients/clients-page.component.html
  5. 100
      src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html
  6. 125
      src/Squidex/app/features/settings/pages/languages/languages-page.component.html
  7. 38
      src/Squidex/app/features/settings/settings-area.component.html
  8. 2
      src/Squidex/app/shared/services/auth.service.ts
  9. 16
      src/Squidex/app/theme/_bootstrap.scss
  10. 66
      src/Squidex/app/theme/_panels.scss
  11. 1
      src/Squidex/package.json

16
src/Squidex/Startup.cs
View File

@ -26,6 +26,7 @@ using Squidex.Config.Swagger;
using Squidex.Config.Web;
using Squidex.Pipeline;
using Squidex.Store.MongoDb;
// ReSharper disable InvertIf
// ReSharper disable ConvertClosureToMethodGroup
// ReSharper disable AccessToModifiedClosure
@ -179,14 +180,19 @@ namespace Squidex
app.UseStaticFiles(new StaticFileOptions
{
OnPrepareResponse = (context) =>
OnPrepareResponse = context =>
{
var headers = context.Context.Response.GetTypedHeaders();
var response = context.Context.Response;
headers.CacheControl = new CacheControlHeaderValue
if (!string.Equals(response.ContentType, "text/html", StringComparison.OrdinalIgnoreCase))
{
MaxAge = TimeSpan.FromDays(60)
};
var headers = response.GetTypedHeaders();
headers.CacheControl = new CacheControlHeaderValue
{
MaxAge = TimeSpan.FromDays(60)
};
}
}
});
}

2
src/Squidex/app-config/webpack.config.js
View File

@ -45,7 +45,7 @@ module.exports = {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript', helpers.root('app-config', 'auto-loader') + '?[file].html=template&[file].scss=styles', 'tslint']
loaders: ['awesome-typescript', 'angular2-router-loader', helpers.root('app-config', 'auto-loader') + '?[file].html=template&[file].scss=styles', 'tslint']
}, {
test: /\.html$/,
loader: 'html'

15
src/Squidex/app/app.routes.ts
View File

@ -23,11 +23,6 @@ import {
} from './shared';
import { SqxFeatureAppsModule } from './features/apps';
import { SqxFeatureContentModule } from './features/content';
import { SqxFeatureDashboardModule } from './features/dashboard';
import { SqxFeatureMediaModule } from './features/media';
import { SqxFeatureSchemasModule } from './features/schemas';
import { SqxFeatureSettingsModule } from './features/settings';
export const routes: Ng2Router.Routes = [
{
@ -49,19 +44,19 @@ export const routes: Ng2Router.Routes = [
children: [
{
path: '',
loadChildren: () => SqxFeatureDashboardModule
loadChildren: './features/dashboard/module#SqxFeatureDashboardModule'
}, {
path: 'content',
loadChildren: () => SqxFeatureContentModule
loadChildren: './features/content/module#SqxFeatureContentModule'
}, {
path: 'media',
loadChildren: () => SqxFeatureMediaModule
loadChildren: './features/media/module#SqxFeatureMediaModule'
}, {
path: 'schemas',
loadChildren: () => SqxFeatureSchemasModule
loadChildren: './features/schemas/module#SqxFeatureSchemaModule'
}, {
path: 'settings',
loadChildren: () => SqxFeatureSettingsModule
loadChildren: './features/settings/module#SqxFeatureSettingsModule'
}
]
}

54
src/Squidex/app/features/settings/pages/clients/clients-page.component.html
View File

@ -9,37 +9,39 @@
</a>
</div>
<div class="panel-content">
<div class="table-items-row" *ngIf="appClients && appClients.length === 0">
No client created yet.
</div>
<div class="panel-main">
<div class="panel-content">
<div class="table-items-row" *ngIf="appClients && appClients.length === 0">
No client created yet.
</div>
<div *ngFor="let client of appClients">
<sqx-client [client]="client" [appName]="appName() | async" (renamed)="renameClient(client, $event)"></sqx-client>
</div>
<div *ngFor="let client of appClients">
<sqx-client [client]="client" [appName]="appName() | async" (renamed)="renameClient(client, $event)"></sqx-client>
</div>
<div class="table-items-footer">
<form class="form-inline" [formGroup]="createForm" (submit)="attachClient()">
<div class="errors-box" *ngIf="createForm.get('name').invalid && createForm.get('name').dirty">
<div class="errors">
<span *ngIf="createForm.get('name').hasError('required')">
Name is required.
</span>
<span *ngIf="createForm.get('name').hasError('maxlength')">
Name can not have more than 40 characters.
</span>
<span *ngIf="createForm.get('name').hasError('pattern')">
Name can contain lower case letters (a-z), numbers and dashes (not at the end).
</span>
<div class="table-items-footer">
<form class="form-inline" [formGroup]="createForm" (submit)="attachClient()">
<div class="errors-box" *ngIf="createForm.get('name').invalid && createForm.get('name').dirty">
<div class="errors">
<span *ngIf="createForm.get('name').hasError('required')">
Name is required.
</span>
<span *ngIf="createForm.get('name').hasError('maxlength')">
Name can not have more than 40 characters.
</span>
<span *ngIf="createForm.get('name').hasError('pattern')">
Name can contain lower case letters (a-z), numbers and dashes (not at the end).
</span>
</div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="app-name" formControlName="name" maxlength="40" placeholder="Enter client name" />
</div>
<div class="form-group">
<input type="text" class="form-control" id="app-name" formControlName="name" maxlength="40" placeholder="Enter client name" />
</div>
<button type="submit" class="btn btn-success" [disabled]="createForm.invalid">Add Client</button>
</form>
<button type="submit" class="btn btn-success" [disabled]="createForm.invalid">Add Client</button>
</form>
</div>
</div>
</div>
</div>

100
src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html
View File

@ -9,57 +9,59 @@
</a>
</div>
<div class="panel-content">
<table class="table table-items table-fixed">
<colgroup>
<col style="width: 50px" />
<col style="width: 50%" />
<col style="width: 50%" />
<col style="width: 150px" />
<col style="width: 80px" />
</colgroup>
<div class="panel-main">
<div class="panel-content">
<table class="table table-items table-fixed">
<colgroup>
<col style="width: 50px" />
<col style="width: 50%" />
<col style="width: 50%" />
<col style="width: 150px" />
<col style="width: 80px" />
</colgroup>
<tbody>
<template ngFor let-contributor [ngForOf]="appContributors">
<tr>
<td>
<img class="user-picture" [attr.src]="userPicture(contributor.contributorId) | async" />
</td>
<td>
<span class="user-name">{{userName(contributor.contributorId) | async}}</span>
</td>
<td>
<span class="user-email">{{userEmail(contributor.contributorId) | async}}</span>
</td>
<td>
<select class="form-control" [(ngModel)]="contributor.permission" (ngModelChange)="changePermission(contributor, $event)" [disabled]="currentUserId === contributor.contributorId">
<option *ngFor="let permission of usersPermissions">{{permission}}</option>
</select>
</td>
<td>
<button type="button" class="btn btn-link btn-danger" [disabled]="currrentUserId === contributor.contributorId" (click)="removeContributor(contributor)">
<i class="icon-bin"></i>
</button>
</td>
</tr>
<tr class="spacer"></tr>
</template>
</tbody>
</table>
<div class="table-items-footer">
<form class="form-inline" (submit)="assignContributor()" >
<div class="form-group">
<sqx-autocomplete [source]="usersDataSource"
(ngModelChange)="selectUser($event.model)"
[ngModel]="selectedUser"
[ngModelOptions]="{standalone: true}"
[inputName]="contributor">
</sqx-autocomplete>
</div>
<tbody>
<template ngFor let-contributor [ngForOf]="appContributors">
<tr>
<td>
<img class="user-picture" [attr.src]="userPicture(contributor.contributorId) | async" />
</td>
<td>
<span class="user-name">{{userName(contributor.contributorId) | async}}</span>
</td>
<td>
<span class="user-email">{{userEmail(contributor.contributorId) | async}}</span>
</td>
<td>
<select class="form-control" [(ngModel)]="contributor.permission" (ngModelChange)="changePermission(contributor, $event)" [disabled]="currentUserId === contributor.contributorId">
<option *ngFor="let permission of usersPermissions">{{permission}}</option>
</select>
</td>
<td>
<button type="button" class="btn btn-link btn-danger" [disabled]="currrentUserId === contributor.contributorId" (click)="removeContributor(contributor)">
<i class="icon-bin"></i>
</button>
</td>
</tr>
<tr class="spacer"></tr>
</template>
</tbody>
</table>
<div class="table-items-footer">
<form class="form-inline" (submit)="assignContributor()" >
<div class="form-group">
<sqx-autocomplete [source]="usersDataSource"
(ngModelChange)="selectUser($event.model)"
[ngModel]="selectedUser"
[ngModelOptions]="{standalone: true}"
[inputName]="contributor">
</sqx-autocomplete>
</div>
<button type="submit" class="btn btn-success" [disabled]="!selectedUser">Add Contributor</button>
</form>
<button type="submit" class="btn btn-success" [disabled]="!selectedUser">Add Contributor</button>
</form>
</div>
</div>
</div>
</div>

125
src/Squidex/app/features/settings/pages/languages/languages-page.component.html
View File

@ -9,68 +9,79 @@
</a>
</div>
<div class="panel-content">
<table class="table table-items table-fixed">
<colgroup>
<col style="width: 60px" />
<col style="width: 100%" />
<col style="width: 200px" />
<col style="width: 80px" />
</colgroup>
<div class="panel-main">
<div class="panel-content">
<table class="table table-items table-fixed">
<colgroup>
<col style="width: 60px" />
<col style="width: 100%" />
<col style="width: 200px" />
<col style="width: 80px" />
</colgroup>
<thead>
<tr>
<th>
Code
</th>
<th>
Name
</th>
<th>
Options
</th>
</tr>
</thead>
<tbody>
<template ngFor let-language [ngForOf]="appLanguages">
<thead>
<tr>
<td>
<span class="language-code">
{{language.iso2Code}}
</span>
</td>
<td>
<span class="language-name">
{{language.englishName}}
</span>
</td>
<td>
<label class="language-default">
<input type="radio" [value]="true" [ngModel]="language.isMasterLanguage" (ngModelChange)="setMasterLanguage(language)"> Master Language
</label>
</td>
<td>
<button type="button" class="btn btn-link btn-danger" [disabled]="language.isMasterLanguage" (click)="removeLanguage(language)">
<i class="icon-bin"></i>
</button>
</td>
<th>
Code
</th>
<th>
Name
</th>
<th>
Options
</th>
</tr>
<tr class="spacer"></tr>
</template>
</tbody>
</table>
</thead>
<tbody>
<template ngFor let-language [ngForOf]="appLanguages">
<tr>
<td>
<span class="language-code">
{{language.iso2Code}}
</span>
</td>
<td>
<span class="language-name">
{{language.englishName}}
</span>
</td>
<td>
<label class="language-default">
<input type="radio" [value]="true" [ngModel]="language.isMasterLanguage" (ngModelChange)="setMasterLanguage(language)"> Master Language
</label>
</td>
<td>
<button type="button" class="btn btn-link btn-danger" [disabled]="language.isMasterLanguage" (click)="removeLanguage(language)">
<i class="icon-bin"></i>
</button>
</td>
</tr>
<tr class="spacer"></tr>
</template>
</tbody>
</table>
<div class="table-items-footer">
<form class="form-inline" (submit)="addLanguage()" name="addLanguageForm">
<div class="form-group">
<select class="form-control language-select" [(ngModel)]="selectedLanguage" name="newLanguage">
<option *ngFor="let language of allLanguages" [ngValue]="language">{{language.englishName}}</option>
</select>
</div>
<div class="table-items-footer">
<form class="form-inline" (submit)="addLanguage()" name="addLanguageForm">
<div class="form-group">
<select class="form-control language-select" [(ngModel)]="selectedLanguage" name="newLanguage">
<option *ngFor="let language of allLanguages" [ngValue]="language">{{language.englishName}}</option>
</select>
</div>
<button type="submit" class="btn btn-success" [disabled]="!selectedLanguage">Add Language</button>
</form>
<button type="submit" class="btn btn-success" [disabled]="!selectedLanguage">Add Language</button>
</form>
</div>
</div>
<div class="panel-sidebar">
<div class="nav nav-pills nav-stacked nav-light">
<li class="nav-item">
<a class="nav-link">
<i class="icon-filter"></i>
</a>
</li>
</div>
</div>
</div>
</div>

38
src/Squidex/app/features/settings/settings-area.component.html
View File

@ -7,24 +7,26 @@
</a>
</div>
<div class="panel-content">
<ul class="nav nav-pills nav-stacked nav-dark">
<li class="nav-item">
<a class="nav-link" routerLink="clients" routerLinkActive="active">
Clients
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="contributors" routerLinkActive="active">
Contributors
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="languages" routerLinkActive="active">
Languages
</a>
</li>
</ul>
<div class="panel-main">
<div class="panel-content">
<ul class="nav nav-pills nav-stacked nav-dark">
<li class="nav-item">
<a class="nav-link" routerLink="clients" routerLinkActive="active">
Clients
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="contributors" routerLinkActive="active">
Contributors
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="languages" routerLinkActive="active">
Languages
</a>
</li>
</ul>
</div>
</div>
</div>

2
src/Squidex/app/shared/services/auth.service.ts
View File

@ -188,7 +188,7 @@ export class AuthService {
private checkResponse(response: Observable<Ng2Http.Response>) {
return response.catch((error: Ng2Http.Response) => {
if (error.status === 401) {
if (error.status === 401 || error.status === 404) {
this.loginRedirect();
} else if (error.status === 403) {
this.router.navigate(['/404']);

16
src/Squidex/app/theme/_bootstrap.scss
View File

@ -255,8 +255,7 @@
&.nav-pills {
.nav-link {
&,
&.active {
& {
color: $color-dark-foreground;
}
@ -271,6 +270,7 @@
@include border-radius(0);
background: $color-dark-selected;
pointer-events: none;
color: lighten($color-dark-foreground, 30%);
}
&:hover {
@ -279,4 +279,16 @@
}
}
}
}
.nav-light {
&.nav-pills {
.nav-link {
&.active {
& {
@include border-radius(0);
}
}
}
}
}

66
src/Squidex/app/theme/_panels.scss
View File

@ -1,8 +1,9 @@
@import '_mixins';
@import '_vars';
$panel-padding: 15px;
$panel-header: 60px;
$panel-padding: 20px;
$panel-header: 70px;
$panel-sidebar: 60px;
.panel-container {
@include absolute($size-navbar-height, 0, 0, $size-sidebar-width);
@ -17,13 +18,19 @@ $panel-header: 60px;
flex-direction: column;
}
&-content,
&-header {
padding: 15px;
&-header,
&-content {
padding: $panel-padding;
}
&-main,
&-content {
overflow-y: auto;
@include flex-grow(1);
}
&-main {
@include flex-box;
flex-direction: row;
}
&-title {
@ -32,11 +39,38 @@ $panel-header: 60px;
}
&-header {
height: $panel-header;
min-height: $panel-header;
max-height: $panel-header;
position: relative;
padding-right: 60px;
}
&-content {
& {
overflow-y: auto;
}
& .nav-stacked {
margin-left: -$panel-padding;
margin-right: -$panel-padding;
}
& .nav-link {
padding-left: $panel-padding;
}
}
&-sidebar {
& {
min-width: $panel-sidebar;
max-width: $panel-sidebar;
}
& .nav-link {
text-align: center;
}
}
&-close {
& {
@include absolute($panel-padding, $panel-padding, auto, auto);
@ -77,12 +111,21 @@ $panel-header: 60px;
.panel-header {
background: $color-card-footer;
border-bottom: 1px solid $color-border;
}
.panel-content {
border-top: 1px solid $color-border;
}
.panel-sidebar {
background: $color-card-footer;
border-left: 1px solid $color-border;
color: lighten($color-dark-foreground, 20%);
}
.panel-close {
& {
color: $color-dark-foreground;
color: lighten($color-dark-foreground, 20%);
}
&:hover {
@ -90,11 +133,6 @@ $panel-header: 60px;
}
}
}
& .nav-stacked {
margin-left: -$panel-padding;
margin-right: -$panel-padding;
}
}
.panel-menu {

1
src/Squidex/package.json
View File

@ -39,6 +39,7 @@
"@types/jasmine": "^2.5.38",
"@types/mousetrap": "^1.5.32",
"@types/node": "^6.0.51",
"angular2-router-loader": "^0.3.4",
"awesome-typescript-loader": "^2.2.4",
"cpx": "^1.5.0",
"css-loader": "^0.26.0",

Write Preview
Loading…
Cancel
Save