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

Settings fixed

pull/271/head
Sebastian Stehle 9 years ago
parent
db509665f6
commit
4d917f488d
11 changed files with 287 additions and 474 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. 74
      src/Squidex/app/features/settings/module.ts
  2. 130
      src/Squidex/app/features/settings/pages/backups/backups-page.component.html
  3. 86
      src/Squidex/app/features/settings/pages/clients/clients-page.component.html
  4. 4
      src/Squidex/app/features/settings/pages/clients/clients-page.component.ts
  5. 136
      src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html
  6. 3
      src/Squidex/app/features/settings/pages/contributors/contributors-page.component.ts
  7. 72
      src/Squidex/app/features/settings/pages/languages/languages-page.component.html
  8. 46
      src/Squidex/app/features/settings/pages/patterns/patterns-page.component.html
  9. 100
      src/Squidex/app/features/settings/pages/plans/plans-page.component.html
  10. 108
      src/Squidex/app/features/settings/settings-area.component.html
  11. 2
      src/Squidex/app/framework/angular/panel.component.html

74
src/Squidex/app/features/settings/module.ts
View File

@ -10,8 +10,6 @@ import { RouterModule, Routes } from '@angular/router';
import { DndModule } from 'ng2-dnd';
import {
HelpComponent,
HistoryComponent,
SqxFrameworkModule,
SqxSharedModule
} from '@app/shared';
@ -52,83 +50,19 @@ const routes: Routes = [
},
{
path: 'clients',
component: ClientsPageComponent,
children: [
{
path: 'history',
component: HistoryComponent,
data: {
channel: 'settings.clients'
}
},
{
path: 'help',
component: HelpComponent,
data: {
helpPage: '05-integrated/clients'
}
}
]
component: ClientsPageComponent
},
{
path: 'contributors',
component: ContributorsPageComponent,
children: [
{
path: 'history',
component: HistoryComponent,
data: {
channel: 'settings.contributors'
}
},
{
path: 'help',
component: HelpComponent,
data: {
helpPage: '05-integrated/contributors'
}
}
]
component: ContributorsPageComponent
},
{
path: 'languages',
component: LanguagesPageComponent,
children: [
{
path: 'history',
component: HistoryComponent,
data: {
channel: 'settings.languages'
}
},
{
path: 'help',
component: HelpComponent,
data: {
helpPage: '05-integrated/languages'
}
}
]
component: LanguagesPageComponent
},
{
path: 'patterns',
component: PatternsPageComponent,
children: [
{
path: 'history',
component: HistoryComponent,
data: {
channel: 'settings.patterns'
}
},
{
path: 'help',
component: HelpComponent,
data: {
helpPage: '05-integrated/patterns'
}
}
]
component: PatternsPageComponent
}
]
}

130
src/Squidex/app/features/settings/pages/backups/backups-page.component.html
View File

@ -1,82 +1,78 @@
<sqx-title message="{app} | Backups | Settings" parameter1="app" [value1]="ctx.appName"></sqx-title>
<sqx-panel desiredWidth="50rem">
<div class="panel-header">
<div class="panel-title-row">
<div class="float-right">
<button class="btn btn-success" [disabled]="backups.length === 10" (click)="startBackup()">
Start Backup
</button>
</div>
<ng-container title>
Backups
</ng-container>
<h3 class="panel-title">Backups</h3>
</div>
<ng-container menu>
<button class="btn btn-success" [disabled]="backups.length === 10" (click)="startBackup()">
Start Backup
</button>
</ng-container>
<a class="panel-close" sqxParentLink>
<i class="icon-close"></i>
</a>
</div>
<ng-container content>
<div class="panel-alert panel-alert-danger" *ngIf="backups.length >= 10">
Your have reached the maximum number of backups: 10.
</div>
<div class="panel-main">
<div class="panel-content">
<div class="panel-alert panel-alert-danger" *ngIf="backups.length >= 10">
Your have reached the maximum number of backups: 10.
</div>
<div class="table-items-row" *ngFor="let backup of backups; trackBy: trackBy">
<div class="row no-gutter">
<div class="col col-auto">
<div *ngIf="!backup.stopped" class="backup-status backup-status-pending spin">
<i class="icon-hour-glass"></i>
</div>
<div *ngIf="backup.stopped && backup.isFailed" class="backup-status backup-status-failed">
<i class="icon-exclamation"></i>
</div>
<div *ngIf="backup.stopped && !backup.isFailed" class="backup-status backup-status-success">
<i class="icon-checkmark"></i>
</div>
<div class="table-items-row table-items-row-empty" *ngIf="backups && backups.length === 0">
No backups created yet.
</div>
<div class="table-items-row" *ngFor="let backup of backups; trackBy: trackBy">
<div class="row no-gutter">
<div class="col col-auto">
<div *ngIf="!backup.stopped" class="backup-status backup-status-pending spin">
<i class="icon-hour-glass"></i>
</div>
<div class="col col-auto">
<div>
Started:
</div>
<div>
Duration:
</div>
<div *ngIf="backup.stopped && backup.isFailed" class="backup-status backup-status-failed">
<i class="icon-exclamation"></i>
</div>
<div class="col col-auto">
<div>
{{backup.started.toISOString()}}
</div>
<div *ngIf="backup.stopped">
{{getDuration(backup) | sqxDuration}}
</div>
<div *ngIf="backup.stopped && !backup.isFailed" class="backup-status backup-status-success">
<i class="icon-checkmark"></i>
</div>
<div class="col">
<div>
<span title="Archived events">
Events: <strong class="backup-progress">{{backup.handledEvents | sqxKNumber}}</strong>
</span>,
<span title="Archived assets">
Assets: <strong class="backup-progress">{{backup.handledAssets | sqxKNumber}}</strong>
</span>
</div>
<div *ngIf="backup.stopped && !backup.isFailed">
Download:
<a href="{{getDownloadUrl(backup)}}" target="_blank">
Ready
</a>
</div>
</div>
<div class="col col-auto">
<div>
Started:
</div>
<div class="col col-auto">
<button type="button" class="btn btn-link btn-danger" (sqxConfirmClick)="deleteBackup(backup)" confirmTitle="Delete backup"
confirmText="Do you really want to delete the backup?">
<i class="icon-bin2"></i>
</button>
<div>
Duration:
</div>
</div>
<div class="col col-auto">
<div>
{{backup.started.toISOString()}}
</div>
<div *ngIf="backup.stopped">
{{getDuration(backup) | sqxDuration}}
</div>
</div>
<div class="col">
<div>
<span title="Archived events">
Events: <strong class="backup-progress">{{backup.handledEvents | sqxKNumber}}</strong>
</span>,
<span title="Archived assets">
Assets: <strong class="backup-progress">{{backup.handledAssets | sqxKNumber}}</strong>
</span>
</div>
<div *ngIf="backup.stopped && !backup.isFailed">
Download:
<a href="{{getDownloadUrl(backup)}}" target="_blank">
Ready
</a>
</div>
</div>
<div class="col col-auto">
<button type="button" class="btn btn-link btn-danger" (sqxConfirmClick)="deleteBackup(backup)" confirmTitle="Delete backup"
confirmText="Do you really want to delete the backup?">
<i class="icon-bin2"></i>
</button>
</div>
</div>
</div>
</div>
</ng-container>
</sqx-panel>

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

@ -1,64 +1,38 @@
<sqx-title message="{app} | Clients | Settings" parameter1="app" [value1]="ctx.appName"></sqx-title>
<sqx-panel desiredWidth="44rem">
<div class="panel-header">
<div class="panel-title-row">
<h3 class="panel-title">Clients</h3>
<ng-container title>
Clients
</ng-container>
<ng-container content>
<div class="table-items-row table-items-row-empty" *ngIf="appClients && appClients.clients.length === 0">
No client created yet.
</div>
<a class="panel-close" sqxParentLink>
<i class="icon-close"></i>
</a>
</div>
<div class="panel-main">
<div class="panel-content panel-content-scroll">
<div class="table-items-row table-items-row-empty" *ngIf="appClients && appClients.clients.length === 0">
No client created yet.
</div>
<div *ngFor="let client of appClients?.clients">
<sqx-client [client]="client"
(updating)="updateClient(client, $event)"
(renaming)="renameClient(client, $event)"
(revoking)="revokeClient(client)"></sqx-client>
</div>
<div class="table-items-footer" *ngIf="appClients">
<form [formGroup]="addClientForm" (ngSubmit)="attachClient()">
<div class="row no-gutters">
<div class="col">
<sqx-control-errors for="name" [submitted]="addClientFormSubmitted"></sqx-control-errors>
<input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter client name" autocomplete="off" sqxLowerCaseInput />
</div>
<div class="col col-auto pl-1">
<button type="submit" class="btn btn-success" [disabled]="!hasName">Add Client</button>
</div>
<div class="col col-auto pl-1">
<button type="reset" class="btn btn-secondary" (click)="cancelAttachClient()">Cancel</button>
</div>
</div>
</form>
</div>
<div *ngFor="let client of appClients?.clients">
<sqx-client [client]="client"
(updating)="updateClient(client, $event)"
(renaming)="renameClient(client, $event)"
(revoking)="revokeClient(client)"></sqx-client>
</div>
<div class="panel-sidebar">
<a class="panel-link" routerLink="history" routerLinkActive="active" #linkHistory>
<i class="icon-time"></i>
</a>
<a class="panel-link" routerLink="help" routerLinkActive="active" #linkHelp>
<i class="icon-help"></i>
</a>
<sqx-onboarding-tooltip id="history" [for]="linkHistory" position="leftTop" after="120000">
The sidebar navigation contains useful context specific links. Here you can view the history how this schema has changed over time.
</sqx-onboarding-tooltip>
<sqx-onboarding-tooltip id="help" [for]="linkHelp" position="leftTop" after="180000">
Click the help icon to show a context specific help page. Go to <a href="https://docs.squidex.io" target="_blank">https://docs.squidex.io</a> for the full documentation.
</sqx-onboarding-tooltip>
<div class="table-items-footer" *ngIf="appClients">
<form [formGroup]="addClientForm" (ngSubmit)="attachClient()">
<div class="row no-gutters">
<div class="col">
<sqx-control-errors for="name" [submitted]="addClientFormSubmitted"></sqx-control-errors>
<input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter client name" autocomplete="off" sqxLowerCaseInput />
</div>
<div class="col col-auto pl-1">
<button type="submit" class="btn btn-success" [disabled]="!hasName">Add Client</button>
</div>
<div class="col col-auto pl-1">
<button type="reset" class="btn btn-secondary" (click)="cancelAttachClient()">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</sqx-panel>
<router-outlet></router-outlet>
</ng-container>
</sqx-panel>

4
src/Squidex/app/features/settings/pages/clients/clients-page.component.ts
View File

@ -14,7 +14,6 @@ import {
AppClientsService,
AppContext,
CreateAppClientDto,
HistoryChannelUpdated,
UpdateAppClientDto,
ValidatorsEx
} from '@app/shared';
@ -108,6 +107,7 @@ export class ClientsPageComponent implements OnInit {
this.resetClientForm();
}, error => {
this.ctx.notifyError(error);
this.resetClientForm();
});
}
@ -125,7 +125,5 @@ export class ClientsPageComponent implements OnInit {
private updateClients(appClients: AppClientsDto) {
this.appClients = appClients;
this.ctx.bus.emit(new HistoryChannelUpdated());
}
}

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

@ -1,88 +1,62 @@
<sqx-title message="{app} | Contributors | Settings" parameter1="app" [value1]="ctx.appName"></sqx-title>
<sqx-panel desiredWidth="50rem">
<div class="panel-header">
<div class="panel-title-row">
<h3 class="panel-title">Contributors</h3>
</div>
<a class="panel-close" sqxParentLink>
<i class="icon-close"></i>
</a>
</div>
<ng-container title>
Contributors
</ng-container>
<div class="panel-main">
<div class="panel-content panel-content-scroll">
<div class="panel-alert panel-alert-success" *ngIf="maxContributors > 0">
Your plan allows up to {{maxContributors}} contributors.
</div>
<table class="table table-items table-fixed">
<tbody>
<ng-template ngFor let-contributor [ngForOf]="appContributors?.contributors">
<tr>
<td class="cell-user">
<img class="user-picture" [attr.title]="contributor.contributorId | sqxUserName" [attr.src]="contributor.contributorId | sqxUserPicture" />
</td>
<td class="cell-auto">
<span class="user-name table-cell">{{contributor.contributorId | sqxUserName}}</span>
</td>
<td class="cell-auto">
<span class="user-email table-cell">{{contributor.contributorId | sqxUserEmail}}</span>
</td>
<td class="cell-time">
<select class="form-control" [ngModel]="contributor.permission" (ngModelChange)="changePermission(contributor, $event)" [disabled]="userId === contributor.contributorId">
<option *ngFor="let permission of usersPermissions" [ngValue]="permission">{{permission}}</option>
</select>
</td>
<td class="cell-actions">
<button type="button" class="btn btn-link btn-danger" [disabled]="userId === contributor.contributorId" (click)="removeContributor(contributor)">
<i class="icon-bin2"></i>
</button>
</td>
</tr>
<tr class="spacer"></tr>
</ng-template>
</tbody>
</table>
<div class="table-items-footer" *ngIf="appContributors">
<form [formGroup]="addContributorForm" (ngSubmit)="assignContributor()">
<div class="row no-gutters">
<div class="col">
<sqx-autocomplete [source]="usersDataSource" formControlName="user" [inputName]="'contributor'" placeholder="Find existing user" displayProperty="email">
<ng-template let-user="$implicit">
<img class="user-picture autocomplete-user-picture" [attr.src]="user | sqxUserDtoPicture" />
<ng-container content>
<div class="panel-alert panel-alert-success" *ngIf="maxContributors > 0">
Your plan allows up to {{maxContributors}} contributors.
</div>
<table class="table table-items table-fixed">
<tbody>
<ng-template ngFor let-contributor [ngForOf]="appContributors?.contributors">
<tr>
<td class="cell-user">
<img class="user-picture" [attr.title]="contributor.contributorId | sqxUserName" [attr.src]="contributor.contributorId | sqxUserPicture" />
</td>
<td class="cell-auto">
<span class="user-name table-cell">{{contributor.contributorId | sqxUserName}}</span>
</td>
<td class="cell-auto">
<span class="user-email table-cell">{{contributor.contributorId | sqxUserEmail}}</span>
</td>
<td class="cell-time">
<select class="form-control" [ngModel]="contributor.permission" (ngModelChange)="changePermission(contributor, $event)" [disabled]="userId === contributor.contributorId">
<option *ngFor="let permission of usersPermissions" [ngValue]="permission">{{permission}}</option>
</select>
</td>
<td class="cell-actions">
<button type="button" class="btn btn-link btn-danger" [disabled]="userId === contributor.contributorId" (click)="removeContributor(contributor)">
<i class="icon-bin2"></i>
</button>
</td>
</tr>
<tr class="spacer"></tr>
</ng-template>
</tbody>
</table>
<div class="table-items-footer" *ngIf="appContributors">
<form [formGroup]="addContributorForm" (ngSubmit)="assignContributor()">
<div class="row no-gutters">
<div class="col">
<sqx-autocomplete [source]="usersDataSource" formControlName="user" [inputName]="'contributor'" placeholder="Find existing user" displayProperty="email">
<ng-template let-user="$implicit">
<img class="user-picture autocomplete-user-picture" [attr.src]="user | sqxUserDtoPicture" />
<span class="user-name autocomplete-user-name">{{user.displayName}}</span>
<span class="user-email autocomplete-user-email">{{user.email}}</span>
</ng-template>
</sqx-autocomplete>
</div>
<div class="col col-auto pl-1">
<button type="submit" class="btn btn-success" [disabled]="!canAddContributor">Add Contributor</button>
</div>
<span class="user-name autocomplete-user-name">{{user.displayName}}</span>
<span class="user-email autocomplete-user-email">{{user.email}}</span>
</ng-template>
</sqx-autocomplete>
</div>
</form>
</div>
</div>
<div class="panel-sidebar">
<a class="panel-link" routerLink="history" routerLinkActive="active" #linkHistory>
<i class="icon-time"></i>
</a>
<a class="panel-link" routerLink="help" routerLinkActive="active" #linkHelp>
<i class="icon-help"></i>
</a>
<sqx-onboarding-tooltip id="history" [for]="linkHistory" position="leftTop" after="120000">
The sidebar navigation contains useful context specific links. Here you can view the history how this schema has changed over time.
</sqx-onboarding-tooltip>
<sqx-onboarding-tooltip id="help" [for]="linkHelp" position="leftTop" after="180000">
Click the help icon to show a context specific help page. Go to <a href="https://docs.squidex.io" target="_blank">https://docs.squidex.io</a> for the full documentation.
</sqx-onboarding-tooltip>
<div class="col col-auto pl-1">
<button type="submit" class="btn btn-success" [disabled]="!canAddContributor">Add Contributor</button>
</div>
</div>
</form>
</div>
</div>
</sqx-panel>
<router-outlet></router-outlet>
</ng-container>
</sqx-panel>

3
src/Squidex/app/features/settings/pages/contributors/contributors-page.component.ts
View File

@ -15,7 +15,6 @@ import {
AppContributorsDto,
AppContributorsService,
AutocompleteSource,
HistoryChannelUpdated,
UsersService
} from '@app/shared';
@ -135,7 +134,5 @@ export class ContributorsPageComponent implements OnInit {
private updateContributors(appContributors: AppContributorsDto) {
this.appContributors = appContributors;
this.ctx.bus.emit(new HistoryChannelUpdated());
}
}

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

@ -1,56 +1,30 @@
<sqx-title message="{app} | Languages | Settings" parameter1="app" [value1]="ctx.appName"></sqx-title>
<sqx-panel desiredWidth="42rem">
<div class="panel-header">
<div class="panel-title-row">
<h3 class="panel-title">Languages</h3>
</div>
<a class="panel-close" sqxParentLink>
<i class="icon-close"></i>
</a>
</div>
<ng-container title>
Contributors
</ng-container>
<div class="panel-main">
<div class="panel-content panel-content-scroll">
<div *ngFor="let language of appLanguages?.languages">
<sqx-language [language]="language" [allLanguages]="appLanguages.languages"
(saving)="updateLanguage($event)"
(removing)="removeLanguage($event)"></sqx-language>
</div>
<div class="table-items-footer" *ngIf="appLanguages">
<form [formGroup]="addLanguageForm" (ngSubmit)="addLanguage()">
<div class="row no-gutters">
<div class="col">
<select class="form-control language-select" formControlName="language">
<option *ngFor="let language of newLanguages" [ngValue]="language">{{language.englishName}}</option>
</select>
</div>
<div class="col col-auto pl-1">
<button type="submit" class="btn btn-success" [disabled]="!addLanguageForm.valid">Add Language</button>
</div>
</div>
</form>
</div>
<ng-container content>
<div *ngFor="let language of appLanguages?.languages">
<sqx-language [language]="language" [allLanguages]="appLanguages.languages"
(saving)="updateLanguage($event)"
(removing)="removeLanguage($event)"></sqx-language>
</div>
<div class="panel-sidebar">
<a class="panel-link" routerLink="history" routerLinkActive="active" #linkHistory>
<i class="icon-time"></i>
</a>
<a class="panel-link" routerLink="help" routerLinkActive="active" #linkHelp>
<i class="icon-help"></i>
</a>
<sqx-onboarding-tooltip id="history" [for]="linkHistory" position="leftTop" after="120000">
The sidebar navigation contains useful context specific links. Here you can view the history how this schema has changed over time.
</sqx-onboarding-tooltip>
<sqx-onboarding-tooltip id="help" [for]="linkHelp" position="leftTop" after="180000">
Click the help icon to show a context specific help page. Go to <a href="https://docs.squidex.io" target="_blank">https://docs.squidex.io</a> for the full documentation.
</sqx-onboarding-tooltip>
<div class="table-items-footer" *ngIf="appLanguages">
<form [formGroup]="addLanguageForm" (ngSubmit)="addLanguage()">
<div class="row no-gutters">
<div class="col">
<select class="form-control language-select" formControlName="language">
<option *ngFor="let language of newLanguages" [ngValue]="language">{{language.englishName}}</option>
</select>
</div>
<div class="col col-auto pl-1">
<button type="submit" class="btn btn-success" [disabled]="!addLanguageForm.valid">Add Language</button>
</div>
</div>
</form>
</div>
</div>
</sqx-panel>
<router-outlet></router-outlet>
</ng-container>
</sqx-panel>

46
src/Squidex/app/features/settings/pages/patterns/patterns-page.component.html
View File

@ -1,41 +1,23 @@
<sqx-title message="{app} | Patterns | Settings" parameter1="app" [value1]="ctx.appName"></sqx-title>
<sqx-panel desiredWidth="60rem">
<div class="panel-header">
<div class="panel-title-row">
<h3 class="panel-title">Patterns</h3>
</div>
<ng-container title>
Contributors
</ng-container>
<a class="panel-close" sqxParentLink>
<i class="icon-close"></i>
</a>
</div>
<div class="panel-main">
<div class="panel-content panel-content-scroll">
<div *ngIf="appPatterns">
<div *ngFor="let pattern of appPatterns.patterns">
<sqx-pattern [pattern]="pattern"
(removing)="removePattern(pattern)"
(updating)="updatePattern(pattern, $event)">
</sqx-pattern>
</div>
<sqx-pattern [isNew]="true"
(updating)="addPattern($event)">
<ng-container content>
<ng-container *ngIf="appPatterns">
<div *ngFor="let pattern of appPatterns.patterns">
<sqx-pattern [pattern]="pattern"
(removing)="removePattern(pattern)"
(updating)="updatePattern(pattern, $event)">
</sqx-pattern>
</div>
</div>
<div class="panel-sidebar">
<a class="panel-link" routerLink="history" routerLinkActive="active">
<i class="icon-time"></i>
</a>
<a class="panel-link" routerLink="help" routerLinkActive="active">
<i class="icon-help"></i>
</a>
</div>
</div>
<sqx-pattern [isNew]="true"
(updating)="addPattern($event)">
</sqx-pattern>
</ng-container>
</ng-container>
</sqx-panel>
<router-outlet></router-outlet>

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

@ -1,70 +1,62 @@
<sqx-title message="{app} | Plans | Settings" parameter1="app" [value1]="ctx.appName"></sqx-title>
<sqx-panel desiredWidth="61rem">
<div class="panel-header">
<div class="panel-title-row">
<div class="float-right">
<button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Plans (CTRL + SHIFT + R)">
<i class="icon-reset"></i> Refresh
</button>
<sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut>
<ng-container title>
Contributors
</ng-container>
<ng-container menu>
<button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Plans (CTRL + SHIFT + R)">
<i class="icon-reset"></i> Refresh
</button>
<sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut>
</ng-container>
<ng-container content>
<div *ngIf="plans">
<div class="panel-alert panel-alert-danger" *ngIf="!planOwned">
You have not created the subscription. Therefore you cannot change the plan.
</div>
<h3 class="panel-title">Update Plan</h3>
</div>
<a class="panel-close" sqxParentLink>
<i class="icon-close"></i>
</a>
</div>
<div class="panel-main">
<div class="panel-content">
<div *ngIf="plans">
<div class="panel-alert panel-alert-danger" *ngIf="!planOwned">
You have not created the subscription. Therefore you cannot change the plan.
</div>
<div class="text-muted text-center empty" *ngIf="plans.plans.length === 0">
No plan configured, this app has unlimited usage.
</div>
<div class="text-muted text-center empty" *ngIf="plans.plans.length === 0">
No plan configured, this app has unlimited usage.
</div>
<div class="clearfix">
<div class="card plan float-left" *ngFor="let plan of plans.plans">
<div class="card-body plan-header text-center">
<h4 class="card-title">{{plan.name}}</h4>
<h5 class="plan-price">{{plan.costs}}</h5>
<div class="clearfix">
<div class="card plan float-left" *ngFor="let plan of plans.plans">
<div class="card-body plan-header text-center">
<h4 class="card-title">{{plan.name}}</h4>
<h5 class="plan-price">{{plan.costs}}</h5>
<small class="text-muted">Per Month</small>
<small class="text-muted">Per Month</small>
</div>
<div class="card-body">
<div class="plan-fact">
{{plan.maxApiCalls | sqxKNumber}} API Calls
</div>
<div class="card-body">
<div class="plan-fact">
{{plan.maxApiCalls | sqxKNumber}} API Calls
</div>
<div class="plan-fact">
{{plan.maxAssetSize | sqxFileSize}} Storage
</div>
<div class="plan-fact">
{{plan.maxContributors}} Contributors
</div>
<div class="plan-fact">
{{plan.maxAssetSize | sqxFileSize}} Storage
</div>
<div class="card-body">
<button *ngIf="plan.id === plans.currentPlanId" class="btn btn-block btn-link btn-success plan-selected">
&#10003; Selected
</button>
<button *ngIf="plan.id !== plans.currentPlanId" class="btn btn-block btn-success" [disabled]="isDisabled || !planOwned" (click)="changePlan(plan.id)">
Change
</button>
<div class="plan-fact">
{{plan.maxContributors}} Contributors
</div>
</div>
<div class="card-body">
<button *ngIf="plan.id === plans.currentPlanId" class="btn btn-block btn-link btn-success plan-selected">
&#10003; Selected
</button>
<button *ngIf="plan.id !== plans.currentPlanId" class="btn btn-block btn-success" [disabled]="isDisabled || !planOwned" (click)="changePlan(plan.id)">
Change
</button>
</div>
</div>
</div>
<div *ngIf="plans.hasPortal" class="billing-portal-link">
Go to <a target="_blank" href="{{portalUrl}}">Billing Portal</a> for payment history and subscription overview.
</div>
<div *ngIf="plans.hasPortal" class="billing-portal-link">
Go to <a target="_blank" href="{{portalUrl}}">Billing Portal</a> for payment history and subscription overview.
</div>
</div>
</div>
</ng-container>
</sqx-panel>

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

@ -1,64 +1,56 @@
<sqx-title message="{app} | Settings" parameter1="app" [value1]="ctx.appName"></sqx-title>
<sqx-panel theme="dark" desiredWidth="16rem">
<div class="panel-header">
<div class="panel-title-row">
<h3 class="panel-title">Settings</h3>
</div>
<a class="panel-close" sqxParentLink isLazyLoaded="true">
<i class="icon-close"></i>
</a>
</div>
<div class="panel-main">
<div class="panel-content">
<ul class="nav nav-panel nav-dark flex-column">
<li class="nav-item" *ngIf="ctx.app.permission === 'Owner'">
<a class="nav-link" routerLink="backups" routerLinkActive="active">
Backups
<i class="icon-angle-right"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="clients" routerLinkActive="active">
Clients
<i class="icon-angle-right"></i>
</a>
</li>
<li class="nav-item" *ngIf="ctx.app.permission === 'Owner'">
<a class="nav-link" routerLink="contributors" routerLinkActive="active">
Contributors
<i class="icon-angle-right"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="languages" routerLinkActive="active">
Languages
<i class="icon-angle-right"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="patterns" routerLinkActive="active">
Patterns
<i class="icon-angle-right"></i>
</a>
</li>
<li class="nav-item" *ngIf="ctx.app.permission === 'Owner'">
<a class="nav-link" routerLink="plans" routerLinkActive="active">
Subscription
<i class="icon-angle-right"></i>
</a>
</li>
<li class="nav-item" *ngIf="ctx.app.permission === 'Owner'">
<a class="nav-link" routerLink="more" routerLinkActive="active">
More
<i class="icon-angle-right"></i>
</a>
</li>
</ul>
</div>
</div>
<ng-container title>
Settings
</ng-container>
<ng-container content>
<ul class="nav nav-panel nav-dark flex-column">
<li class="nav-item" *ngIf="ctx.app.permission === 'Owner'">
<a class="nav-link" routerLink="backups" routerLinkActive="active">
Backups
<i class="icon-angle-right"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="clients" routerLinkActive="active">
Clients
<i class="icon-angle-right"></i>
</a>
</li>
<li class="nav-item" *ngIf="ctx.app.permission === 'Owner'">
<a class="nav-link" routerLink="contributors" routerLinkActive="active">
Contributors
<i class="icon-angle-right"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="languages" routerLinkActive="active">
Languages
<i class="icon-angle-right"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="patterns" routerLinkActive="active">
Patterns
<i class="icon-angle-right"></i>
</a>
</li>
<li class="nav-item" *ngIf="ctx.app.permission === 'Owner'">
<a class="nav-link" routerLink="plans" routerLinkActive="active">
Subscription
<i class="icon-angle-right"></i>
</a>
</li>
<li class="nav-item" *ngIf="ctx.app.permission === 'Owner'">
<a class="nav-link" routerLink="more" routerLinkActive="active">
More
<i class="icon-angle-right"></i>
</a>
</li>
</ul>
</ng-container>
</sqx-panel>
<router-outlet></router-outlet>

2
src/Squidex/app/framework/angular/panel.component.html
View File

@ -24,7 +24,7 @@
</div>
<div class="panel-sidebar" *ngIf="showSidebar">
<ng-content select=[sidebar]></ng-content>>
<ng-content select=[sidebar]></ng-content>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save