change the global prefix to "os"

Also:
Set linting output to "stylish" (more readable error messages in terminal output)
Remove 2nd linting output
rename "appOsPerms" to just "osPerms" including filename and classname
rename all selectors from "app" to "os"
This commit is contained in:
Sean Engelhardt 2018-09-03 17:57:20 +02:00
parent 970f9e19b2
commit 0f55527d6a
36 changed files with 77 additions and 72 deletions

View File

@ -7,7 +7,7 @@
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"prefix": "os",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
@ -78,7 +78,8 @@
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
"tsConfig": "src/tsconfig.spec.json",
"format": "stylish",
"exclude": ["**/node_modules/**"]
}
}

View File

@ -6,6 +6,6 @@ export class AppPage {
}
getParagraphText() {
return element(by.css('app-root h1')).getText();
return element(by.css('os-root h1')).getText();
}
}

View File

@ -10,7 +10,7 @@ import { OpenSlidesService } from './core/services/openslides.service';
* Angular's global App Component
*/
@Component({
selector: 'app-root',
selector: 'os-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})

View File

@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-projector-container',
selector: 'os-projector-container',
templateUrl: './projector-container.component.html',
styleUrls: ['./projector-container.component.css']
})

View File

@ -3,7 +3,7 @@ import { BaseComponent } from 'app/base.component';
import { Title } from '@angular/platform-browser';
@Component({
selector: 'app-projector',
selector: 'os-projector',
templateUrl: './projector.component.html',
styleUrls: ['./projector.component.css']
})

View File

@ -14,13 +14,13 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
* ### Usage of the selector:
*
* ```html
* <app-head-bar
* <os-head-bar
* appName="Files"
* PlusButton=true
* [menuList]=myMenu
* (plusButtonClicked)=onPlusButton()
* (ellipsisMenuItem)=onEllipsisItem($event)>
* </app-head-bar>
* </os-head-bar>
* ```
*
* ### Declaration of a menu provided as `[menuList]=myMenu`:
@ -46,7 +46,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
* ```
*/
@Component({
selector: 'app-head-bar',
selector: 'os-head-bar',
templateUrl: './head-bar.component.html',
styleUrls: ['./head-bar.component.scss']
})

View File

@ -6,7 +6,7 @@ import { Directive, Output, EventEmitter, ElementRef, OnDestroy } from '@angular
* @example (appDomChange)="onChange($event)"
*/
@Directive({
selector: '[appDomChange]'
selector: '[osDomChange]'
})
export class DomChangeDirective implements OnDestroy {
private changes: MutationObserver;

View File

@ -1,4 +1,4 @@
describe('OsPermsDirective', () => {
describe('PermsDirective', () => {
it('should create an instance', () => {
// const directive = new OsPermsDirective();
// expect(directive).toBeTruthy();

View File

@ -7,13 +7,13 @@ import { OpenSlidesComponent } from 'app/openslides.component';
* Directive to check if the {@link OperatorService} has the correct permissions to access certain functions
*
* Successor of os-perms in OpenSlides 2.2
* @example <div *appOsPerms="'perm'" ..> ... < /div>
* @example <div *appOsPerms="['perm1', 'perm2']" ..> ... < /div>
* @example <div *osPerms="'perm'" ..> ... < /div>
* @example <div *osPerms="['perm1', 'perm2']" ..> ... < /div>
*/
@Directive({
selector: '[appOsPerms]'
selector: '[osPerms]'
})
export class OsPermsDirective extends OpenSlidesComponent {
export class PermsDirective extends OpenSlidesComponent {
/**
* Holds the required permissions the access a feature
*/
@ -51,7 +51,7 @@ export class OsPermsDirective extends OpenSlidesComponent {
* The value defines the requires permissions as an array or a single permission.
*/
@Input()
public set appOsPerms(value) {
public set osPerms(value) {
if (!value) {
value = [];
} else if (typeof value === 'string') {

View File

@ -32,7 +32,7 @@ import { fas } from '@fortawesome/free-solid-svg-icons';
import { TranslateModule } from '@ngx-translate/core';
// directives
import { OsPermsDirective } from './directives/os-perms.directive';
import { PermsDirective } from './directives/perms.directive';
import { DomChangeDirective } from './directives/dom-change.directive';
import { HeadBarComponent } from './components/head-bar/head-bar.component';
@ -94,10 +94,10 @@ library.add(fas);
MatSnackBarModule,
FontAwesomeModule,
TranslateModule,
OsPermsDirective,
PermsDirective,
DomChangeDirective,
HeadBarComponent
],
declarations: [OsPermsDirective, DomChangeDirective, HeadBarComponent]
declarations: [PermsDirective, DomChangeDirective, HeadBarComponent]
})
export class SharedModule {}

View File

@ -1,4 +1,5 @@
<app-head-bar appName="Agenda" plusButton=true (plusButtonClicked)=onPlusButton()></app-head-bar>
<os-head-bar appName="Agenda" plusButton=true (plusButtonClicked)=onPlusButton()>
</os-head-bar>
<mat-card class="os-card card-plus-distance">
<div class="app-content">
@ -8,7 +9,7 @@
everyone should see this
</div>
<br/>
<div *appOsPerms="'agenda.can_see'">
<div *osPerms="'agenda.can_see'">
Only permitted users should see this
</div>
</div>

View File

@ -9,7 +9,7 @@ import { TranslateService } from '@ngx-translate/core';
* TODO: Not yet implemented
*/
@Component({
selector: 'app-agenda-list',
selector: 'os-agenda-list',
templateUrl: './agenda-list.component.html',
styleUrls: ['./agenda-list.component.css']
})

View File

@ -13,7 +13,8 @@
</mat-toolbar> -->
<app-head-bar appName="Assignments" plusButton=true [menuList]=assignmentMenu (plusButtonClicked)=onPlusButton() (ellipsisMenuItem)=onEllipsisItem($event)></app-head-bar>
<os-head-bar appName="Assignments" plusButton=true [menuList]=assignmentMenu (plusButtonClicked)=onPlusButton() (ellipsisMenuItem)=onEllipsisItem($event)>
</os-head-bar>
<mat-card class="os-card card-plus-distance">
assignment-list works!

View File

@ -9,7 +9,7 @@ import { Title } from '@angular/platform-browser';
* TODO: not yet implemented
*/
@Component({
selector: 'app-assignment-list',
selector: 'os-assignment-list',
templateUrl: './assignment-list.component.html',
styleUrls: ['./assignment-list.component.css']
})

View File

@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-legal-notice',
selector: 'os-legal-notice',
templateUrl: './legal-notice.component.html',
styleUrls: ['./legal-notice.component.scss']
})

View File

@ -37,7 +37,7 @@ export class ParentErrorStateMatcher implements ErrorStateMatcher {
* Handles user (and potentially guest) login
*/
@Component({
selector: 'app-login',
selector: 'os-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})

View File

@ -1,5 +1,5 @@
<app-head-bar appName="Files" plusButton=true [menuList]=extraMenu (plusButtonClicked)=onPlusButton() (ellipsisMenuItem)=onEllipsisItem($event)>
</app-head-bar>
<os-head-bar appName="Files" plusButton=true [menuList]=extraMenu (plusButtonClicked)=onPlusButton() (ellipsisMenuItem)=onEllipsisItem($event)>
</os-head-bar>
<mat-card class="os-card card-plus-distance">

View File

@ -11,7 +11,7 @@ import { BaseComponent } from '../../../base.component';
* Not yet implemented
*/
@Component({
selector: 'app-mediafile-list',
selector: 'os-mediafile-list',
templateUrl: './mediafile-list.component.html',
styleUrls: ['./mediafile-list.component.css']
})

View File

@ -1,4 +1,5 @@
<app-head-bar appName="Category" plusButton=true (plusButtonClicked)=onPlusButton()></app-head-bar>
<os-head-bar appName="Category" plusButton=true (plusButtonClicked)=onPlusButton()>
</os-head-bar>
<mat-table class='on-transition-fade' [dataSource]="dataSource" matSort>
<!-- name column -->

View File

@ -12,7 +12,7 @@ import { Category } from '../../../shared/models/motions/category';
* TODO: Creation of new Categories
*/
@Component({
selector: 'app-category-list',
selector: 'os-category-list',
templateUrl: './category-list.component.html',
styleUrls: ['./category-list.component.scss']
})

View File

@ -11,7 +11,7 @@ import { DataSendService } from '../../../core/services/data-send.service';
* Component for the motion detail view
*/
@Component({
selector: 'app-motion-detail',
selector: 'os-motion-detail',
templateUrl: './motion-detail.component.html',
styleUrls: ['./motion-detail.component.scss']
})

View File

@ -19,7 +19,8 @@
</mat-toolbar> -->
<app-head-bar appName="Motions" plusButton=true (plusButtonClicked)=onPlusButton() [menuList]=motionMenuList (ellipsisMenuItem)=onEllipsisItem($event)></app-head-bar>
<os-head-bar appName="Motions" plusButton=true (plusButtonClicked)=onPlusButton() [menuList]=motionMenuList (ellipsisMenuItem)=onEllipsisItem($event)>
</os-head-bar>
<div class='custom-table-header on-transition-fade'>
<button mat-button>

View File

@ -11,7 +11,7 @@ import { Workflow } from '../../../shared/models/motions/workflow';
* Component that displays all the motions in a Table using DataSource.
*/
@Component({
selector: 'app-motion-list',
selector: 'os-motion-list',
templateUrl: './motion-list.component.html',
styleUrls: ['./motion-list.component.scss']
})

View File

@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-privacy-policy',
selector: 'os-privacy-policy',
templateUrl: './privacy-policy.component.html',
styleUrls: ['./privacy-policy.component.scss']
})

View File

@ -1,7 +1,8 @@
<app-head-bar appName="Settings"></app-head-bar>
<os-head-bar appName="Settings">
</os-head-bar>
<mat-card class="os-card">
<div *appOsPerms="'core.can_manage_config'" class="app-content">
<div *osPerms="'core.can_manage_config'" class="app-content">
<mat-accordion>
<mat-expansion-panel>

View File

@ -9,7 +9,7 @@ import { BaseComponent } from '../../../base.component';
* TODO: Not yet implemented
*/
@Component({
selector: 'app-settings-list',
selector: 'os-settings-list',
templateUrl: './settings-list.component.html',
styleUrls: ['./settings-list.component.css']
})

View File

@ -45,40 +45,37 @@
<!-- navigation -->
<mat-nav-list class='main-nav'>
<a [@navItemAnim] *appOsPerms="'core.can_see_frontpage'" mat-list-item routerLink='/' routerLinkActive='active' [routerLinkActiveOptions]="{exact: true}"
<a [@navItemAnim] *osPerms="'core.can_see_frontpage'" mat-list-item routerLink='/' routerLinkActive='active' [routerLinkActiveOptions]="{exact: true}"
(click)='toggleSideNav()'>
<fa-icon icon='home'></fa-icon>
<span translate>Home</span>
</a>
<a [@navItemAnim] *appOsPerms="'agenda.can_see'" mat-list-item routerLink='/agenda' routerLinkActive='active' (click)='toggleSideNav()'>
<a [@navItemAnim] *osPerms="'agenda.can_see'" mat-list-item routerLink='/agenda' routerLinkActive='active' (click)='toggleSideNav()'>
<fa-icon icon='calendar'></fa-icon>
<span translate>Agenda</span>
</a>
<a [@navItemAnim] *appOsPerms="'motions.can_see'" mat-list-item routerLink='/motions' routerLinkActive='active' (click)='toggleSideNav()'>
<a [@navItemAnim] *osPerms="'motions.can_see'" mat-list-item routerLink='/motions' routerLinkActive='active' (click)='toggleSideNav()'>
<fa-icon icon='file-alt'></fa-icon>
<span translate>Motions</span>
</a>
<a [@navItemAnim] *appOsPerms="'assignments.can_see'" mat-list-item routerLink='/assignments' routerLinkActive='active'
(click)='vp.isMobile ? sideNav.toggle() : null'>
<a [@navItemAnim] *osPerms="'assignments.can_see'" mat-list-item routerLink='/assignments' routerLinkActive='active' (click)='vp.isMobile ? sideNav.toggle() : null'>
<fa-icon icon='chart-pie'></fa-icon>
<span translate>Assignments</span>
</a>
<a [@navItemAnim] *appOsPerms="'users.can_see_name'" mat-list-item routerLink='/users' routerLinkActive='active' (click)='toggleSideNav()'>
<a [@navItemAnim] *osPerms="'users.can_see_name'" mat-list-item routerLink='/users' routerLinkActive='active' (click)='toggleSideNav()'>
<fa-icon icon='user'></fa-icon>
<span translate>Participants</span>
</a>
<a [@navItemAnim] *appOsPerms="'mediafiles.can_see'" mat-list-item routerLink='/mediafiles' routerLinkActive='active' (click)='toggleSideNav()'>
<a [@navItemAnim] *osPerms="'mediafiles.can_see'" mat-list-item routerLink='/mediafiles' routerLinkActive='active' (click)='toggleSideNav()'>
<fa-icon icon='paperclip'></fa-icon>
<span translate>Files</span>
</a>
<a [@navItemAnim] *appOsPerms="'core.can_manage_config'" mat-list-item routerLink='/settings' routerLinkActive='active'
(click)='toggleSideNav()'>
<a [@navItemAnim] *osPerms="'core.can_manage_config'" mat-list-item routerLink='/settings' routerLinkActive='active' (click)='toggleSideNav()'>
<fa-icon icon='cog'></fa-icon>
<span translate>Settings</span>
</a>
<mat-divider></mat-divider>
<a [@navItemAnim] *appOsPerms="'core.can_see_projector'" mat-list-item routerLink='/projector' routerLinkActive='active'
(click)='toggleSideNav()'>
<a [@navItemAnim] *osPerms="'core.can_see_projector'" mat-list-item routerLink='/projector' routerLinkActive='active' (click)='toggleSideNav()'>
<fa-icon icon='video'></fa-icon>
<span translate>Projector</span>
</a>

View File

@ -1,7 +1,7 @@
@import '~@angular/material/theming';
/** Custom component theme. Only lives in a specific scope */
@mixin app-site-theme($theme) {
@mixin os-site-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, accent);
@ -9,7 +9,7 @@
$background: map-get($theme, background);
/** the name of the selector */
app-site {
os-site {
mat-sidenav-container {
/** nav panel on the left */
mat-sidenav {

View File

@ -10,7 +10,7 @@ import { MatDialog, MatSidenav } from '@angular/material';
import { ViewportService } from '../core/services/viewport.service';
@Component({
selector: 'app-site',
selector: 'os-site',
animations: [pageTransition, navItemAnim],
templateUrl: './site.component.html',
styleUrls: ['./site.component.scss']

View File

@ -1,4 +1,5 @@
<app-head-bar appName="Home"></app-head-bar>
<os-head-bar appName="Home">
</os-head-bar>
<mat-card class="os-card">
<div class="app-content" translate>

View File

@ -12,7 +12,7 @@ import { MotionVersion } from '../../shared/models/motions/motion-version';
import { MotionSubmitter } from '../../shared/models/motions/motion-submitter';
@Component({
selector: 'app-start',
selector: 'os-start',
templateUrl: './start.component.html',
styleUrls: ['./start.component.css']
})

View File

@ -1,4 +1,5 @@
<app-head-bar appName="Users"></app-head-bar>
<os-head-bar appName="Users">
</os-head-bar>
<mat-card class="os-card">
UserList Works!

View File

@ -9,7 +9,7 @@ import { BaseComponent } from '../../../base.component';
* TODO: Not yet implemented
*/
@Component({
selector: 'app-user-list',
selector: 'os-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.css']
})

View File

@ -11,7 +11,7 @@
</head>
<body>
<app-root></app-root>
<os-root></os-root>
</body>
</html>

View File

@ -7,7 +7,7 @@
@import './app/site/site.component.scss-theme';
@mixin openslides-components-theme($theme) {
@include app-site-theme($theme);
@include os-site-theme($theme);
/** More components are added here */
}

View File

@ -1,8 +1,8 @@
{
"extends": "../tslint.json",
"rules": {
"directive-selector": [true, "attribute", "app", "camelCase"],
"component-selector": [true, "element", "app", "kebab-case"],
"directive-selector": [true, "attribute", "os", "camelCase"],
"component-selector": [true, "element", "os", "kebab-case"],
"member-access": [true, "check-accessor", "check-constructor", "check-parameter-property"],
"comment-format": [true, "check-space"],
"curly": true,