Merge pull request #537 from GabrielInTheWorld/of-improvements-of-som…

…ething Improves the UI
OpenSlides · Sep 29, 2021 · 4174b74 · 4174b74
2 parents 6b535e7 + 8859c31
commit 4174b74
Show file tree

Hide file tree

Showing 24 changed files with 234 additions and 111 deletions.
diff --git a/client/src/app/core/actions/organization-action.ts b/client/src/app/core/actions/organization-action.ts
@@ -4,5 +4,5 @@ import { OrganizationSetting } from 'app/shared/models/event-management/organiza
 export namespace OrganizationAction {
     export const UPDATE = 'organization.update';
 
-    export interface UpdatePayload extends Identifiable, OrganizationSetting {}
+    export interface UpdatePayload extends Identifiable, Partial<OrganizationSetting> {}
 }
diff --git a/client/src/app/core/definitions/base-menu-entry.ts b/client/src/app/core/definitions/base-menu-entry.ts
@@ -28,4 +28,9 @@ export interface BaseMenuEntry<P = any> {
      * The permission to see the entry.
      */
     permission?: P;
+
+    /**
+     * A string attached as css-class directly to an Html-Tag for this menu-entry.
+     */
+    cssClass?: string;
 }
diff --git a/client/src/app/core/repositories/management/organization-repository.service.ts b/client/src/app/core/repositories/management/organization-repository.service.ts
@@ -6,6 +6,7 @@ import { ViewOrganization } from 'app/management/models/view-organization';
 import { Organization, OrganizationSetting } from 'app/shared/models/event-management/organization';
 import { BaseRepository } from '../base-repository';
 import { RepositoryServiceCollector } from '../repository-service-collector';
+import { ORGANIZATION_ID } from '../../core-services/organization.service';
 
 @Injectable({
     providedIn: 'root'
@@ -40,11 +41,11 @@ export class OrganizationRepositoryService extends BaseRepository<ViewOrganizati
         };
     }
 
-    public update(update: OrganizationAction.UpdatePayload): Promise<void> {
+    public update(update: Partial<OrganizationAction.UpdatePayload>): Promise<void> {
         /**
          * I suppose the orga id is always 1
          */
-        update.id = 1;
+        update.id = ORGANIZATION_ID;
         return this.sendActionToBackend(OrganizationAction.UPDATE, update);
     }
 }
diff --git a/client/src/app/management/components/dashboard/dashboard.component.html b/client/src/app/management/components/dashboard/dashboard.component.html
@@ -6,11 +6,7 @@ <h2>{{ 'Calendar' | translate }}</h2>
 </os-head-bar>
 
 <div class="meeting-list-container">
-    <div class="pseudo-icon-spacer"></div>
-    <div class="orga-information">
-        <div class="orga-name title-font primary-accent-by-theme">{{ orgaName }}</div>
-        <div class="orga-description">{{ orgaDescription }}</div>
-    </div>
+    <div class="meeting-spacer"></div>
 </div>
 
 <mat-card *ngIf="noMeetingsToShow" class="no-content os-card">
@@ -104,27 +100,21 @@ <h2>{{ 'Calendar' | translate }}</h2>
 
 <ng-template let-meeting="meeting" let-cssClass="cssClass" #meetingTemplate>
     <div matRipple class="meeting-box" [ngClass]="cssClass" [routerLink]="meeting.id">
-        <div class="meeting-box--left" *ngIf="!isPhone">
-            <ng-container *ngTemplateOutlet="meetingTime; context: { meeting: meeting }"></ng-container>
-        </div>
-        <div class="meeting-box--mid one-line">
-            <mat-icon *ngIf="meeting.isArchived" matTooltip="{{ 'This meeting is archived' | translate }}">
-                archive
-            </mat-icon>
-            <span class="one-line" [matTooltip]="meeting.name">
+        <div class="one-line">
+            <div class="meeting-box--mid one-line" [matTooltip]="meeting.name">
                 {{ meeting.name }}
-            </span>
-
-            <div *ngIf="isPhone" class="meeting-box--information-phone">
-                <span>
+            </div>
+            <div>
+                <span *ngIf="meeting.location">{{ meeting.location }}</span>
+                <span *ngIf="meeting.location && (meeting.start_time || meeting.end_time)">&nbsp;&middot;&nbsp;</span>
+                <span *ngIf="meeting.start_time || meeting.end_time">
                     <ng-container *ngTemplateOutlet="meetingTime; context: { meeting: meeting }"></ng-container>
                 </span>
-                <span>
-                    {{ meeting.location }}
-                </span>
             </div>
         </div>
-        <div class="meeting-box--right" *ngIf="!isPhone">{{ meeting.location }}</div>
+        <mat-icon *ngIf="meeting.isArchived" matTooltip="{{ 'This meeting is archived' | translate }}">
+            archive
+        </mat-icon>
     </div>
 </ng-template>
 

diff --git a/client/src/app/management/components/dashboard/dashboard.component.scss b/client/src/app/management/components/dashboard/dashboard.component.scss
@@ -13,16 +13,10 @@ os-dashboard {
         text-align: center;
     }
 
-    .orga-information {
-        padding: 0 20px;
-
-        .orga-name {
-            font-size: 1.875rem;
-        }
-
-        .orga-description {
-            font-size: 0.875rem;
-        }
+    .meeting-spacer {
+        height: 1.5em;
+        font-size: 1.875rem;
+        line-height: 1.5;
     }
 
     .dashboard-logo {
@@ -37,27 +31,32 @@ os-dashboard {
             margin: 20px auto;
         }
         display: flex;
-        margin: 0 8px 8px;
+        margin: 0 8px 8px 0;
     }
 
     .meeting-icon-wrapper,
     .pseudo-icon-spacer {
         @include phone {
             width: 40px;
             font-size: 0.75rem;
-            margin-right: 8px;
         }
+        @include tablet {
+            width: 40px;
+        }
+        padding: 0 10px 0 16px;
         width: 80px;
         display: flex;
         align-items: center;
-        justify-content: flex-start;
+        justify-content: center;
         flex-direction: column;
 
         mat-icon {
-            $size: 40px;
+            padding: 0 8px; // Ensures that the wrapper has really a width of 40px
+            $size: 30px;
+            font-size: $size;
             width: $size;
             height: $size;
-            font-size: $size;
+            line-height: $size;
         }
     }
 
@@ -109,21 +108,6 @@ os-dashboard {
 
         &--mid {
             font-size: 18px;
-            flex: 3;
-
-            display: flex;
-            align-items: center;
-        }
-
-        &--information-phone {
-            display: flex;
-            justify-content: space-between;
-            font-size: 0.75rem;
-        }
-
-        &--left,
-        &--right {
-            flex: 1;
         }
 
         &:hover {

diff --git a/client/src/app/management/components/meeting-preview/meeting-preview.component.html b/client/src/app/management/components/meeting-preview/meeting-preview.component.html
@@ -28,8 +28,8 @@
             <!-- location -->
             <span>
                 {{ location }}
-                <span *ngIf="location && (meeting.start_time || meeting.end_time)">,&nbsp;</span>
             </span>
+            <span *ngIf="location && (meeting.start_time || meeting.end_time)">&nbsp;&middot;&nbsp;</span>
             <!-- date -->
             <span>
                 <os-meeting-time [meeting]="meeting"></os-meeting-time>
@@ -48,7 +48,9 @@
     <!-- users -->
     <div class="user-footer">
         <a mat-icon-button matTooltip="{{ 'Participants' | translate }}">
-            <mat-icon [matBadgeHidden]="!showUserAmount" [matBadge]="userAmount" [matBadgeColor]="'accent'">group</mat-icon>
+            <mat-icon [matBadgeHidden]="!showUserAmount" [matBadge]="userAmount" [matBadgeColor]="'accent'">
+                group
+            </mat-icon>
         </a>
     </div>
 </mat-card>

diff --git a/client/src/app/management/components/meeting-preview/meeting-preview.component.scss b/client/src/app/management/components/meeting-preview/meeting-preview.component.scss
@@ -28,6 +28,7 @@
         margin-top: 1em;
 
         .date-loc {
+            display: flex;
             font-size: large;
             margin-bottom: 0.5em;
         }

diff --git a/client/src/app/management/components/orga-settings/orga-settings.component.html b/client/src/app/management/components/orga-settings/orga-settings.component.html
@@ -10,39 +10,38 @@ <h2>{{ pageTitle | translate }}</h2>
     </div>
 </os-head-bar>
 
-<mat-card class="os-card spacer-bottom-60" *ngIf="orgaSettingsForm">
-    <form class="orga-settings-form" [formGroup]="orgaSettingsForm" (ngSubmit)="onSubmit()">
-        <mat-form-field>
-            <mat-label>{{ 'Name' | translate }}</mat-label>
-            <input matInput formControlName="name" />
-        </mat-form-field>
+<form [formGroup]="orgaSettingsForm" (ngSubmit)="onSubmit()" *ngIf="orgaSettingsForm">
+    <mat-card class="os-card spacer-bottom-60">
+        <div class="orga-settings-form" [formGroup]="orgaSettingsForm" (ngSubmit)="onSubmit()">
+            <mat-form-field>
+                <mat-label>{{ 'Name' | translate }}</mat-label>
+                <input matInput formControlName="name" />
+            </mat-form-field>
 
-        <mat-form-field>
-            <mat-label>{{ 'Description' | translate }}</mat-label>
-            <input matInput formControlName="description" />
-        </mat-form-field>
+            <mat-form-field>
+                <mat-label>{{ 'Description' | translate }}</mat-label>
+                <input matInput formControlName="description" />
+            </mat-form-field>
 
-        <mat-form-field>
-            <mat-label>{{ 'Show this text on the login page' | translate }}</mat-label>
-            <input matInput formControlName="login_text" />
-        </mat-form-field>
+            <mat-form-field>
+                <mat-label>{{ 'Show this text on the login page' | translate }}</mat-label>
+                <input matInput formControlName="login_text" />
+            </mat-form-field>
 
-        <mat-form-field>
-            <mat-label>{{ 'OpenSlides design theme' | translate }}</mat-label>
-            <mat-select formControlName="theme">
-                <mat-option *ngFor="let theme of themes" [value]="theme.class">
-                    {{ theme.name | translate }}
-                </mat-option>
-            </mat-select>
-        </mat-form-field>
-
-        <mat-label>{{ 'Legal notice' | translate }}</mat-label>
-        <editor formControlName="legal_notice" [init]="tinyMceSettings"></editor>
-
-        <mat-label>{{ 'Privacy Policy' | translate }}</mat-label>
-        <editor formControlName="privacy_policy" [init]="tinyMceSettings"></editor>
+            <mat-form-field>
+                <mat-label>{{ 'OpenSlides design theme' | translate }}</mat-label>
+                <mat-select formControlName="theme">
+                    <mat-option *ngFor="let theme of themes" [value]="theme.class">
+                        {{ theme.name | translate }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+    </mat-card>
 
-        <div class="superadmin-place" *osOmlPerms="OML.superadmin">
+    <mat-card class="os-card margin-bottom-60" *osOmlPerms="OML.superadmin">
+        <div class="superadmin-place">
+            <h2>Superadmin-{{ 'Settings' | translate }}</h2>
             <!-- electronic voting -->
             <section>
                 <mat-checkbox formControlName="enable_electronic_voting">
@@ -70,5 +69,5 @@ <h2>{{ pageTitle | translate }}</h2>
                 </mat-form-field>
             </section>
         </div>
-    </form>
-</mat-card>
+    </mat-card>
+</form>
diff --git a/client/src/app/shared/components/legal-notice-content/legal-notice-content.component.html b/client/src/app/shared/components/legal-notice-content/legal-notice-content.component.html
@@ -1,5 +1,20 @@
 <mat-card class="os-card">
-    <h1>{{ 'Legal notice' | translate }}</h1>
+    <div class="action-title padding-bottom-10">
+        <h1>{{ 'Legal notice' | translate }}</h1>
+        <div *osOmlPerms="OML.can_manage_organization; and: isEditable">
+            <button (click)="isEditing = true" mat-icon-button *ngIf="!isEditing">
+                <mat-icon>edit</mat-icon>
+            </button>
+            <ng-container *ngIf="isEditing">
+                <button (click)="leaveEditMode(true)" mat-icon-button>
+                    <mat-icon>done</mat-icon>
+                </button>
+                <button (click)="leaveEditMode(false)" mat-icon-button>
+                    <mat-icon>close</mat-icon>
+                </button>
+            </ng-container>
+        </div>
+    </div>
     <div>
         <ng-container *ngIf="!isEditing">
             <div *ngIf="legalNotice" class="legal-notice-text" [innerHtml]="legalNotice | trust: 'html'"></div>

diff --git a/client/src/app/shared/components/legal-notice-content/legal-notice-content.component.ts b/client/src/app/shared/components/legal-notice-content/legal-notice-content.component.ts
@@ -24,14 +24,13 @@ export class LegalNoticeContentComponent extends BaseComponent implements OnInit
      * Defaults to `false`.
      */
     @Input()
-    public canBeEdited = false;
+    public isEditable = false;
 
     /**
      * Sets the editing-state and updates the FormGroup with the current value.
      *
      * @param isEditing whether the component is currently in editing-mode.
      */
-    @Input()
     public set isEditing(isEditing: boolean) {
         this.formGroup.patchValue({ legalNotice: this.legalNotice });
         this._isEditing = isEditing;
@@ -72,6 +71,8 @@ export class LegalNoticeContentComponent extends BaseComponent implements OnInit
      */
     public versionInfo: Observable<string> = this.httpClient.get('/assets/version.txt', { responseType: 'text' });
 
+    private _value: string;
+
     /**
      * Imports the OrgaSettingsService, the translations and the HTTP Service
      * @param orgaSettings
@@ -98,10 +99,16 @@ export class LegalNoticeContentComponent extends BaseComponent implements OnInit
             this.legalNotice = legalNotice;
         });
 
-        if (this.canBeEdited) {
+        if (this.isEditable) {
             this.subscriptions.push(
-                this.formGroup.get('legalNotice').valueChanges.subscribe(value => this.update.emit(value))
+                this.formGroup.get('legalNotice').valueChanges.subscribe(value => (this._value = value))
             );
         }
     }
+
+    public leaveEditMode(doSendUpdate: boolean): void {
+        const toSend = doSendUpdate ? this._value : null;
+        this.update.emit(toSend);
+        this.isEditing = false;
+    }
 }
diff --git a/...nt/src/app/shared/components/privacy-policy-content/privacy-policy-content.component.html b/...nt/src/app/shared/components/privacy-policy-content/privacy-policy-content.component.html
@@ -1,5 +1,20 @@
 <mat-card class="spacer-bottom-60" [ngClass]="isEditing ? 'os-form-card' : 'os-card'">
-    <h1>{{ 'Privacy policy' | translate }}</h1>
+    <div class="action-title padding-bottom-10">
+        <h1>{{ 'Privacy policy' | translate }}</h1>
+        <div *osOmlPerms="OML.can_manage_organization; and: isEditable">
+            <button (click)="isEditing = true" mat-icon-button *ngIf="!isEditing">
+                <mat-icon>edit</mat-icon>
+            </button>
+            <ng-container *ngIf="isEditing">
+                <button (click)="leaveEditMode(true)" mat-icon-button>
+                    <mat-icon>done</mat-icon>
+                </button>
+                <button (click)="leaveEditMode(false)" mat-icon-button>
+                    <mat-icon>close</mat-icon>
+                </button>
+            </ng-container>
+        </div>
+    </div>
     <ng-container *ngIf="!isEditing">
         <div *ngIf="privacyPolicy" [innerHtml]="privacyPolicy | trust: 'html'"></div>
         <div *ngIf="!privacyPolicy">