OpenSlides/client/src/app/site/motions/components/motion-block-detail/motion-block-detail.component.html

<os-head-bar>
    <!-- Title -->
    <div class="title-slot">
        <h2 *ngIf="block && !editBlock">{{ block.title }}</h2>

        <form [formGroup]="blockEditForm" (ngSubmit)="saveBlock()" (keydown)="onKeyDown($event)" *ngIf="editBlock">
            <mat-form-field>
                <input
                    type="text"
                    matInput
                    osAutofocus
                    required
                    formControlName="title"
                    placeholder="{{ 'Title' | translate }}"
                />
            </mat-form-field>
        </form>
    </div>

    <!-- Menu -->
    <div class="menu-slot">
        <button type="button" mat-icon-button [matMenuTriggerFor]="motionBlockMenu">
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>
    <!-- Save button -->
    <div *ngIf="editBlock" class="extra-controls-slot on-transition-fade">
        <button mat-button (click)="saveBlock()"><strong translate class="upper">Save</strong></button>
    </div>
</os-head-bar>

<mat-card>
    <button
        *osPerms="['motions.can_manage', 'motions.can_manage_metadata']"
        mat-raised-button
        color="primary"
        (click)="onFollowRecButton()"
        [disabled]="isFollowingProhibited()"
    >
        <mat-icon>done_all</mat-icon>&nbsp;
        <span translate>Follow recommendations for all motions</span>
    </button>

    <table class="os-headed-listview-table on-transition-fade" mat-table [dataSource]="dataSource" matSort>
        <!-- title column -->
        <ng-container matColumnDef="title">
            <mat-header-cell *matHeaderCellDef mat-sort-header> <span translate>Motion</span> </mat-header-cell>
            <mat-cell *matCellDef="let motion" (click)="onClickMotionTitle(motion)"> {{ motion.title }} </mat-cell>
        </ng-container>

        <!-- state column -->
        <ng-container matColumnDef="state">
            <mat-header-cell *matHeaderCellDef> <span translate>State</span> </mat-header-cell>
            <mat-cell class="chip-container" *matCellDef="let motion">
                <mat-basic-chip
                    disableRipple
                    [ngClass]="{
                        green: motion.state.css_class === 'success',
                        red: motion.state.css_class === 'danger',
                        grey: motion.state.css_class === 'default',
                        lightblue: motion.state.css_class === 'primary'
                    }"
                >
                    {{ getStateLabel(motion) }}
                </mat-basic-chip>
            </mat-cell>
        </ng-container>

        <!-- Recommendation column -->
        <ng-container matColumnDef="recommendation">
            <mat-header-cell *matHeaderCellDef> <span translate>Recommendation</span> </mat-header-cell>
            <mat-cell class="chip-container" *matCellDef="let motion">
                <mat-basic-chip disableRipple class="bluegrey">
                    {{ getRecommendationLabel(motion) }}
                </mat-basic-chip>
            </mat-cell>
        </ng-container>

        <!-- Remove motion column -->
        <ng-container matColumnDef="remove">
            <mat-header-cell *matHeaderCellDef></mat-header-cell>
            <mat-cell *matCellDef="let motion">
                <button
                    type="button"
                    mat-icon-button
                    color="warn"
                    matTooltip="{{ 'Remove from motion block' | translate }}"
                    (click)="onRemoveMotionButton(motion)"
                >
                    <mat-icon>close</mat-icon>
                </button>
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
        <mat-row *matRowDef="let row; columns: getColumnDefinition()"> </mat-row>
    </table>
</mat-card>

<!-- The menu content -->
<mat-menu #motionBlockMenu="matMenu">
    <button mat-menu-item [routerLink]="getSpeakerLink()">
        <mat-icon>mic</mat-icon>
        <span translate>List of speakers</span>
    </button>

    <button mat-menu-item *osPerms="'core.can_manage_projector'">
        <mat-icon>videocam</mat-icon>
        <span translate>Project</span>
    </button>
    <div *osPerms="['motions.can_manage', 'motions.can_manage_metadata']">
        <button mat-menu-item (click)="toggleEditMode()">
            <mat-icon>edit</mat-icon>
            <span translate>Edit title</span>
        </button>
        <mat-divider></mat-divider>

        <button mat-menu-item class="red-warning-text" (click)="onDeleteBlockButton()">
            <mat-icon>delete</mat-icon>
            <span translate>Delete</span>
        </button>
    </div>
</mat-menu>