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"

client/angular.json

@@ -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/**"]
                     }
                 }

client/e2e/src/app.po.ts

@@ -1,11 +1,11 @@
 import { browser, by, element } from 'protractor';
 
 export class AppPage {
-  navigateTo() {
+    navigateTo() {
-    return browser.get('/');
+        return browser.get('/');
-  }
+    }
 
-  getParagraphText() {
+    getParagraphText() {
-    return element(by.css('app-root h1')).getText();
+        return element(by.css('os-root h1')).getText();
-  }
+    }
 }

client/src/app/app.component.ts

@@ -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']
 })

client/src/app/projector-container/projector-container.component.ts

@@ -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']
 })

client/src/app/projector-container/projector/projector.component.ts

@@ -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']
 })

client/src/app/shared/components/head-bar/head-bar.component.ts

@@ -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']
 })

client/src/app/shared/directives/dom-change.directive.ts

@@ -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;

client/src/app/shared/directives/perms.directive.spec.ts

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

client/src/app/shared/directives/perms.directive.ts

@@ -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 *osPerms="'perm'" ..> ... < /div>
- * @example <div *appOsPerms="['perm1', 'perm2']" ..> ... < /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') {

client/src/app/shared/shared.module.ts

@@ -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 {}

client/src/app/site/agenda/agenda-list/agenda-list.component.html

@@ -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>

client/src/app/site/agenda/agenda-list/agenda-list.component.ts

@@ -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']
 })

client/src/app/site/assignments/assignment-list/assignment-list.component.html

@@ -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!

client/src/app/site/assignments/assignment-list/assignment-list.component.ts

@@ -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']
 })

client/src/app/site/legal-notice/legal-notice.component.ts

@@ -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']
 })

client/src/app/site/login/login.component.ts

@@ -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']
 })

client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.html

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

client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.ts

@@ -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']
 })

client/src/app/site/motions/category-list/category-list.component.html

@@ -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 -->

client/src/app/site/motions/category-list/category-list.component.ts

@@ -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']
 })

client/src/app/site/motions/motion-detail/motion-detail.component.ts

@@ -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']
 })

client/src/app/site/motions/motion-list/motion-list.component.html

@@ -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>
@@ -70,4 +71,4 @@
     <mat-row (click)='selectMotion(row)' *matRowDef="let row; columns: columnsToDisplayMinWidth"></mat-row>
 </mat-table>
 
-<mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>
+<mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>

client/src/app/site/motions/motion-list/motion-list.component.ts

@@ -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']
 })

client/src/app/site/privacy-policy/privacy-policy.component.ts

@@ -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']
 })

client/src/app/site/settings/settings-list/settings-list.component.html

@@ -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>

client/src/app/site/settings/settings-list/settings-list.component.ts

@@ -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']
 })

client/src/app/site/site.component.html

@@ -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'
+            <a [@navItemAnim] *osPerms="'assignments.can_see'" mat-list-item routerLink='/assignments' routerLinkActive='active' (click)='vp.isMobile ? sideNav.toggle() : null'>
-                (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'
+            <a [@navItemAnim] *osPerms="'core.can_manage_config'" mat-list-item routerLink='/settings' routerLinkActive='active' (click)='toggleSideNav()'>
-                (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'
+            <a [@navItemAnim] *osPerms="'core.can_see_projector'" mat-list-item routerLink='/projector' routerLinkActive='active' (click)='toggleSideNav()'>
-                (click)='toggleSideNav()'>
                 <fa-icon icon='video'></fa-icon>
                 <span translate>Projector</span>
             </a>

client/src/app/site/site.component.scss-theme.scss

@@ -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 {

client/src/app/site/site.component.ts

@@ -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']

client/src/app/site/start/start.component.html

@@ -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>

client/src/app/site/start/start.component.ts

@@ -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']
 })

client/src/app/site/users/user-list/user-list.component.html

@@ -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!

client/src/app/site/users/user-list/user-list.component.ts

@@ -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']
 })

client/src/index.html

@@ -2,16 +2,16 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8">
+    <meta charset="utf-8">
-  <title>OpenSlides 3</title>
+    <title>OpenSlides 3</title>
-  <base href="/">
+    <base href="/">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
+    <link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
 </head>
 
 <body>
-  <app-root></app-root>
+    <os-root></os-root>
 </body>
 
-</html>
+</html>

client/src/styles.scss

@@ -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 */
 }
 

client/src/tslint.json

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