From 0f55527d6a2e63f75bfeb7e97f4ba85bfe2b1b86 Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Mon, 3 Sep 2018 17:57:20 +0200
Subject: [PATCH] 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                           |  5 +++--
 client/e2e/src/app.po.ts                      | 12 ++++++------
 client/src/app/app.component.ts               |  2 +-
 .../projector-container.component.ts          |  2 +-
 .../projector/projector.component.ts          |  2 +-
 .../components/head-bar/head-bar.component.ts |  6 +++---
 .../shared/directives/dom-change.directive.ts |  2 +-
 ...ective.spec.ts => perms.directive.spec.ts} |  2 +-
 ...-perms.directive.ts => perms.directive.ts} | 10 +++++-----
 client/src/app/shared/shared.module.ts        |  6 +++---
 .../agenda-list/agenda-list.component.html    |  5 +++--
 .../agenda-list/agenda-list.component.ts      |  2 +-
 .../assignment-list.component.html            |  3 ++-
 .../assignment-list.component.ts              |  2 +-
 .../legal-notice/legal-notice.component.ts    |  2 +-
 client/src/app/site/login/login.component.ts  |  2 +-
 .../mediafile-list.component.html             |  4 ++--
 .../mediafile-list.component.ts               |  2 +-
 .../category-list.component.html              |  3 ++-
 .../category-list/category-list.component.ts  |  2 +-
 .../motion-detail/motion-detail.component.ts  |  2 +-
 .../motion-list/motion-list.component.html    |  5 +++--
 .../motion-list/motion-list.component.ts      |  2 +-
 .../privacy-policy.component.ts               |  2 +-
 .../settings-list.component.html              |  5 +++--
 .../settings-list/settings-list.component.ts  |  2 +-
 client/src/app/site/site.component.html       | 19 ++++++++-----------
 .../app/site/site.component.scss-theme.scss   |  4 ++--
 client/src/app/site/site.component.ts         |  2 +-
 .../src/app/site/start/start.component.html   |  3 ++-
 client/src/app/site/start/start.component.ts  |  2 +-
 .../users/user-list/user-list.component.html  |  3 ++-
 .../users/user-list/user-list.component.ts    |  2 +-
 client/src/index.html                         | 14 +++++++-------
 client/src/styles.scss                        |  2 +-
 client/src/tslint.json                        |  4 ++--
 36 files changed, 77 insertions(+), 72 deletions(-)
 rename client/src/app/shared/directives/{os-perms.directive.spec.ts => perms.directive.spec.ts} (80%)
 rename client/src/app/shared/directives/{os-perms.directive.ts => perms.directive.ts} (91%)

diff --git a/client/angular.json b/client/angular.json
index 18de609eb..d869ce144 100644
--- a/client/angular.json
+++ b/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/**"]
                     }
                 }
diff --git a/client/e2e/src/app.po.ts b/client/e2e/src/app.po.ts
index 82ea75ba5..a9f1cfbac 100644
--- a/client/e2e/src/app.po.ts
+++ b/client/e2e/src/app.po.ts
@@ -1,11 +1,11 @@
 import { browser, by, element } from 'protractor';
 
 export class AppPage {
-  navigateTo() {
-    return browser.get('/');
-  }
+    navigateTo() {
+        return browser.get('/');
+    }
 
-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
-  }
+    getParagraphText() {
+        return element(by.css('os-root h1')).getText();
+    }
 }
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 1fc46e179..ae541185f 100644
--- a/client/src/app/app.component.ts
+++ b/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']
 })
diff --git a/client/src/app/projector-container/projector-container.component.ts b/client/src/app/projector-container/projector-container.component.ts
index 35a61a153..8ccfe12bc 100644
--- a/client/src/app/projector-container/projector-container.component.ts
+++ b/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']
 })
diff --git a/client/src/app/projector-container/projector/projector.component.ts b/client/src/app/projector-container/projector/projector.component.ts
index e77de88f8..4a034ed64 100644
--- a/client/src/app/projector-container/projector/projector.component.ts
+++ b/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']
 })
diff --git a/client/src/app/shared/components/head-bar/head-bar.component.ts b/client/src/app/shared/components/head-bar/head-bar.component.ts
index 379b9102b..8237d8b58 100644
--- a/client/src/app/shared/components/head-bar/head-bar.component.ts
+++ b/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']
 })
diff --git a/client/src/app/shared/directives/dom-change.directive.ts b/client/src/app/shared/directives/dom-change.directive.ts
index d6f742736..60938ff74 100644
--- a/client/src/app/shared/directives/dom-change.directive.ts
+++ b/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;
diff --git a/client/src/app/shared/directives/os-perms.directive.spec.ts b/client/src/app/shared/directives/perms.directive.spec.ts
similarity index 80%
rename from client/src/app/shared/directives/os-perms.directive.spec.ts
rename to client/src/app/shared/directives/perms.directive.spec.ts
index 4d153e626..80363f8ed 100644
--- a/client/src/app/shared/directives/os-perms.directive.spec.ts
+++ b/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();
diff --git a/client/src/app/shared/directives/os-perms.directive.ts b/client/src/app/shared/directives/perms.directive.ts
similarity index 91%
rename from client/src/app/shared/directives/os-perms.directive.ts
rename to client/src/app/shared/directives/perms.directive.ts
index 548386200..738e281fd 100644
--- a/client/src/app/shared/directives/os-perms.directive.ts
+++ b/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 *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') {
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 21df10880..6d734cbf4 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/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 {}
diff --git a/client/src/app/site/agenda/agenda-list/agenda-list.component.html b/client/src/app/site/agenda/agenda-list/agenda-list.component.html
index eb24b6838..d96e3aa28 100644
--- a/client/src/app/site/agenda/agenda-list/agenda-list.component.html
+++ b/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>
diff --git a/client/src/app/site/agenda/agenda-list/agenda-list.component.ts b/client/src/app/site/agenda/agenda-list/agenda-list.component.ts
index 41481e223..3678a9257 100644
--- a/client/src/app/site/agenda/agenda-list/agenda-list.component.ts
+++ b/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']
 })
diff --git a/client/src/app/site/assignments/assignment-list/assignment-list.component.html b/client/src/app/site/assignments/assignment-list/assignment-list.component.html
index a6359530a..76cea8273 100644
--- a/client/src/app/site/assignments/assignment-list/assignment-list.component.html
+++ b/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!
diff --git a/client/src/app/site/assignments/assignment-list/assignment-list.component.ts b/client/src/app/site/assignments/assignment-list/assignment-list.component.ts
index befb41b4a..1bfa974b5 100644
--- a/client/src/app/site/assignments/assignment-list/assignment-list.component.ts
+++ b/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']
 })
diff --git a/client/src/app/site/legal-notice/legal-notice.component.ts b/client/src/app/site/legal-notice/legal-notice.component.ts
index 92a71894b..b866f1f45 100644
--- a/client/src/app/site/legal-notice/legal-notice.component.ts
+++ b/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']
 })
diff --git a/client/src/app/site/login/login.component.ts b/client/src/app/site/login/login.component.ts
index 1b6a43f9a..48937f332 100644
--- a/client/src/app/site/login/login.component.ts
+++ b/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']
 })
diff --git a/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.html b/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.html
index db619f039..677d6cf2e 100644
--- a/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.html
+++ b/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)>
-</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">
diff --git a/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.ts b/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.ts
index 8a7a8a494..94f7f1acf 100644
--- a/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.ts
+++ b/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']
 })
diff --git a/client/src/app/site/motions/category-list/category-list.component.html b/client/src/app/site/motions/category-list/category-list.component.html
index 8fa62310c..1194f89bf 100644
--- a/client/src/app/site/motions/category-list/category-list.component.html
+++ b/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 -->
diff --git a/client/src/app/site/motions/category-list/category-list.component.ts b/client/src/app/site/motions/category-list/category-list.component.ts
index 3aa25f2f1..70263c0db 100644
--- a/client/src/app/site/motions/category-list/category-list.component.ts
+++ b/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']
 })
diff --git a/client/src/app/site/motions/motion-detail/motion-detail.component.ts b/client/src/app/site/motions/motion-detail/motion-detail.component.ts
index e83d837e9..9ab561d1a 100644
--- a/client/src/app/site/motions/motion-detail/motion-detail.component.ts
+++ b/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']
 })
diff --git a/client/src/app/site/motions/motion-list/motion-list.component.html b/client/src/app/site/motions/motion-list/motion-list.component.html
index 69ab25169..6e7cea8dd 100644
--- a/client/src/app/site/motions/motion-list/motion-list.component.html
+++ b/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>
\ No newline at end of file
diff --git a/client/src/app/site/motions/motion-list/motion-list.component.ts b/client/src/app/site/motions/motion-list/motion-list.component.ts
index f08add134..01c22e458 100644
--- a/client/src/app/site/motions/motion-list/motion-list.component.ts
+++ b/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']
 })
diff --git a/client/src/app/site/privacy-policy/privacy-policy.component.ts b/client/src/app/site/privacy-policy/privacy-policy.component.ts
index aa92d2776..f6993c9b0 100644
--- a/client/src/app/site/privacy-policy/privacy-policy.component.ts
+++ b/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']
 })
diff --git a/client/src/app/site/settings/settings-list/settings-list.component.html b/client/src/app/site/settings/settings-list/settings-list.component.html
index b477ea4a2..e98db3b23 100644
--- a/client/src/app/site/settings/settings-list/settings-list.component.html
+++ b/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>
diff --git a/client/src/app/site/settings/settings-list/settings-list.component.ts b/client/src/app/site/settings/settings-list/settings-list.component.ts
index e3f49dfa9..a8c0b5feb 100644
--- a/client/src/app/site/settings/settings-list/settings-list.component.ts
+++ b/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']
 })
diff --git a/client/src/app/site/site.component.html b/client/src/app/site/site.component.html
index 370885c09..c72ca2700 100644
--- a/client/src/app/site/site.component.html
+++ b/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'
-                (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>
diff --git a/client/src/app/site/site.component.scss-theme.scss b/client/src/app/site/site.component.scss-theme.scss
index a3d01c235..008556e1c 100644
--- a/client/src/app/site/site.component.scss-theme.scss
+++ b/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 {
diff --git a/client/src/app/site/site.component.ts b/client/src/app/site/site.component.ts
index 9a9d8bca6..67b780f79 100644
--- a/client/src/app/site/site.component.ts
+++ b/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']
diff --git a/client/src/app/site/start/start.component.html b/client/src/app/site/start/start.component.html
index 83fc3afa0..96ddaa45c 100644
--- a/client/src/app/site/start/start.component.html
+++ b/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>
diff --git a/client/src/app/site/start/start.component.ts b/client/src/app/site/start/start.component.ts
index 837948acf..4ba4c93ec 100644
--- a/client/src/app/site/start/start.component.ts
+++ b/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']
 })
diff --git a/client/src/app/site/users/user-list/user-list.component.html b/client/src/app/site/users/user-list/user-list.component.html
index 851e01203..de6d3ed0a 100644
--- a/client/src/app/site/users/user-list/user-list.component.html
+++ b/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!
diff --git a/client/src/app/site/users/user-list/user-list.component.ts b/client/src/app/site/users/user-list/user-list.component.ts
index 31790f936..b07389915 100644
--- a/client/src/app/site/users/user-list/user-list.component.ts
+++ b/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']
 })
diff --git a/client/src/index.html b/client/src/index.html
index c19a147cb..2677afdef 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -2,16 +2,16 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8">
-  <title>OpenSlides 3</title>
-  <base href="/">
+    <meta charset="utf-8">
+    <title>OpenSlides 3</title>
+    <base href="/">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
 </head>
 
 <body>
-  <app-root></app-root>
+    <os-root></os-root>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/client/src/styles.scss b/client/src/styles.scss
index c64effc96..ed1cfc45a 100644
--- a/client/src/styles.scss
+++ b/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 */
 }
 
diff --git a/client/src/tslint.json b/client/src/tslint.json
index e955328ca..654f99902 100644
--- a/client/src/tslint.json
+++ b/client/src/tslint.json
@@ -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,