Merge pull request #6009 from tsiegleauq/some-vscroll-for-motion

Some enhancements for motion detail
This commit is contained in:
Emanuel Schütze 2021-04-15 21:21:11 +02:00 committed by GitHub
commit 4f35770769
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 139 additions and 112 deletions

View File

@ -35,27 +35,39 @@
<mat-step [completed]="contentForm.value.selectedParagraphs.length > 0"> <mat-step [completed]="contentForm.value.selectedParagraphs.length > 0">
<ng-template matStepLabel>{{ 'Select paragraphs' | translate }}</ng-template> <ng-template matStepLabel>{{ 'Select paragraphs' | translate }}</ng-template>
<div class="amendment-create-wizard-wrapper"> <div class="amendment-create-wizard-wrapper">
<section <cdk-virtual-scroll-viewport itemSize="90" minBufferPx="400" maxBufferPx="600" class="paragraph-scroll">
*ngFor="let paragraph of paragraphs; let i = index" <section
class="paragraph-row" *ngFor="let paragraph of paragraphs; let i = index"
[class.active]="isParagraphSelected(paragraph)" class="paragraph-row"
(click)="onParagraphClicked(paragraph)" [class.active]="isParagraphSelected(paragraph)"
> (click)="onParagraphClicked(paragraph)"
<mat-checkbox
*ngIf="multipleParagraphsAllowed"
class="paragraph-select"
[checked]="isParagraphSelected(paragraph)"
(click)="checkboxClicked($event)"
> >
</mat-checkbox> <mat-checkbox
<mat-radio-button *ngIf="multipleParagraphsAllowed"
*ngIf="!multipleParagraphsAllowed" class="paragraph-select"
class="paragraph-select" [checked]="isParagraphSelected(paragraph)"
[checked]="isParagraphSelected(paragraph)" (click)="checkboxClicked($event)"
> >
</mat-radio-button> </mat-checkbox>
<div class="paragraph-text motion-text" [innerHTML]="getParagraphPreview(i) | trust: 'html'"></div> <mat-radio-button
</section> *ngIf="!multipleParagraphsAllowed"
class="paragraph-select"
[checked]="isParagraphSelected(paragraph)"
>
</mat-radio-button>
<div class="paragraph-text motion-text">
<div>
<i *ngIf="paragraph.lineFrom >= paragraph.lineTo - 1" class="line-number">
{{ 'Line' | translate }} {{ paragraph.lineFrom }}:</i
>
<i *ngIf="paragraph.lineFrom < paragraph.lineTo - 1" class="line-number">
{{ 'Line' | translate }} {{ paragraph.lineFrom }} - {{ paragraph.lineTo - 1 }}:</i
>
</div>
<div [innerHTML]="getParagraphPreview(i) | trust: 'html'"></div>
</div>
</section>
</cdk-virtual-scroll-viewport>
</div> </div>
</mat-step> </mat-step>
<mat-step> <mat-step>

View File

@ -1,4 +1,8 @@
.amendment-create-wizard-wrapper { .amendment-create-wizard-wrapper {
.paragraph-scroll {
height: calc(100vh - 160px);
}
.paragraph-row { .paragraph-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

View File

@ -1,47 +1,52 @@
<!-- A summary of all changes --> <!-- A summary of all changes -->
<div class="motion-detail-diff"> <div class="motion-detail-diff">
<section class="change-recommendation-overview" *ngIf="changes.length > 0"> <div class="change-recommendation-summary" *ngIf="changes?.length">
<strong> {{ 'Summary of changes' | translate }}: </strong> <strong [matBadge]="changes.length" matBadgeOverlap="false">{{ 'Summary of changes' | translate }}&nbsp;</strong>
<ul> <cdk-virtual-scroll-viewport
<li *ngFor="let change of changes"> itemSize="22"
<a minBufferPx="100"
href="" maxBufferPx="300"
(click)="scrollToChangeClicked(change, $event)" class="summary-of-changes-scroll"
[class.amendment]="isAmendment(change)" >
[class.recommendation]="isChangeRecommendation(change)" <ul>
> <li *cdkVirtualFor="let change of changes; let index = index">
<span *ngIf="!change.isTitleChange()" class="line-number"> <span class="one-line">
{{ 'Line' | translate }} {{ formatLineRange(change) }} <a href="" (click)="scrollToChangeClicked(change, $event)" *ngIf="!change.isTitleChange()">
</span> <span> {{ 'Line' | translate }} {{ formatLineRange(change) }} </span>
<span *ngIf="change.isTitleChange()">{{ 'Title' | translate }}</span> <span *ngIf="change.isTitleChange()">{{ 'Title' | translate }}</span>
<span *ngIf="isChangeRecommendation(change)"> ({{ 'Change recommendation' | translate }})</span> <span *ngIf="isChangeRecommendation(change)">
<span *ngIf="isAmendment(change)"> ({{ 'Change recommendation' | translate }})</span
({{ 'Amendment' | translate }} {{ change.getIdentifier() }})</span >
> <span *ngIf="isAmendment(change)">
<span class="operation" *ngIf="isChangeRecommendation(change)"> ({{ 'Amendment' | translate }} {{ change.getIdentifier() }})
{{ getRecommendationTypeName(change) | translate }} </span>
<!-- </a>
@TODO <i class="user-subtitle" *ngIf="isChangeRecommendation(change)">
<span ng-if="change.original.getType(motion.getVersion(version).text) == 3"> {{ getRecommendationTypeName(change) | translate }}
{ change.other_description } </i>
</span> <i class="user-subtitle">
--> <ng-container *ngIf="change.isRejected() && !isAmendment(change)">
</span> <span>{{ 'Rejected' | translate }}</span></ng-container
<span class="status"> >
<ng-container *ngIf="change.isRejected() && !isAmendment(change)"> <ng-container *ngIf="(change.isAccepted() || isAmendment(change)) && change.stateName">
<span>{{ 'Rejected' | translate }}</span></ng-container {{ change.stateName | translate }}</ng-container
> >
<ng-container *ngIf="(change.isAccepted() || isAmendment(change)) && change.stateName"> </i>
{{ change.stateName | translate }}</ng-container <a
mat-icon-button
[routerLink]="change.amendment.getDetailStateURL()"
[state]="{ back: 'true' }"
class="smaller-icon-button amendment-link"
*ngIf="isAmendment(change)"
> >
<mat-icon>arrow_forward</mat-icon>
</a>
</span> </span>
</a> </li>
</li> </ul>
</ul> </cdk-virtual-scroll-viewport>
</div>
<div *ngIf="changes.length === 0" class="no-changes">{{ 'No change recommendations yet' | translate }}</div>
</section>
<span class="text-prefix-label" *ngIf="showPreamble">{{ preamble | translate }}</span> <span class="text-prefix-label" *ngIf="showPreamble">{{ preamble | translate }}</span>
@ -97,10 +102,10 @@
<div class="collission-hint" *ngIf="hasCollissions(change, getAllTextChangingObjects())"> <div class="collission-hint" *ngIf="hasCollissions(change, getAllTextChangingObjects())">
<mat-icon matTooltip="{{ 'This change collides with another one.' | translate }}">warning</mat-icon> <mat-icon matTooltip="{{ 'This change collides with another one.' | translate }}">warning</mat-icon>
</div> </div>
<div class="action-row" *osPerms="'motions.can_manage'"> <div class="action-row">
<button <button
mat-icon-button mat-icon-button
*ngIf="isRecommendation(change)" *osPerms="'motions.can_manage'; and: isRecommendation(change)"
type="button" type="button"
[matMenuTriggerFor]="changeRecommendationMenu" [matMenuTriggerFor]="changeRecommendationMenu"
[matMenuTriggerData]="{ change: change }" [matMenuTriggerData]="{ change: change }"
@ -166,41 +171,48 @@
<mat-menu #amendmentMenu="matMenu"> <mat-menu #amendmentMenu="matMenu">
<ng-template matMenuContent let-change="change"> <ng-template matMenuContent let-change="change">
<button <a
type="button" type="button"
mat-menu-item mat-menu-item
[routerLink]="change.amendment.getDetailStateURL()" [routerLink]="change.amendment.getDetailStateURL()"
[state]="{ back: 'true' }" [state]="{ back: 'true' }"
> >
<mat-icon>visibility_on</mat-icon> <mat-icon>visibility_on</mat-icon>
<span>{{ 'Show amendment' | translate }}</span> <ng-container *ngIf="!change?.amendment?.identifier">
</button> <span>{{ 'Show amendment' | translate }}</span>
</ng-container>
<mat-divider *ngIf="change.amendment.state.next_states.length > 0"></mat-divider> <ng-container *ngIf="change?.amendment?.identifier">
<span>{{ change.amendment.identifier }}</span>
</ng-container>
</a>
<button <!-- perms.isAllowed('change_state', motion) (which does not exist)-->
*ngFor="let state of change.amendment.state.next_states" <ng-container *osPerms="'motions.can_manage'">
mat-menu-item <mat-divider *ngIf="change.amendment.state.next_states.length > 0"></mat-divider>
(click)="setAmendmentState(change, state.id)"
>
{{ state.name | translate }} <span *ngIf="state.show_state_extension_field">&nbsp;...</span>
</button>
<mat-divider *ngIf="change.amendment.state.next_states.length > 0"></mat-divider>
<button
*ngFor="let state of change.amendment.state.previous_states"
mat-menu-item
(click)="setAmendmentState(change, state.id)"
>
<mat-icon>arrow_back</mat-icon>
{{ state.name | translate }}
<span *ngIf="state.show_state_extension_field">&nbsp;...</span>
</button>
<button mat-menu-item (click)="setAmendmentState(change, null)">
<mat-icon>replay</mat-icon>
{{ 'Reset state' | translate }}
</button>
<!-- perms.isAllowed('change_state', motion) --> <button
*ngFor="let state of change.amendment.state.next_states"
mat-menu-item
(click)="setAmendmentState(change, state.id)"
>
{{ state.name | translate }} <span *ngIf="state.show_state_extension_field">&nbsp;...</span>
</button>
<mat-divider *ngIf="change.amendment.state.next_states.length > 0"></mat-divider>
<button
*ngFor="let state of change.amendment.state.previous_states"
mat-menu-item
(click)="setAmendmentState(change, state.id)"
>
<mat-icon>arrow_back</mat-icon>
{{ state.name | translate }}
<span *ngIf="state.show_state_extension_field">&nbsp;...</span>
</button>
<button mat-menu-item (click)="setAmendmentState(change, null)">
<mat-icon>replay</mat-icon>
{{ 'Reset state' | translate }}
</button>
</ng-container>
</ng-template> </ng-template>
</mat-menu> </mat-menu>

View File

@ -1,4 +1,3 @@
/* Diffbox */
.diff-box { .diff-box {
position: relative; position: relative;
border-radius: 3px; border-radius: 3px;
@ -44,48 +43,37 @@
} }
} }
.change-recommendation-overview { .change-recommendation-summary {
border-radius: 3px; border-radius: 3px;
margin-bottom: 15px; padding: 0.5em 0 0 0.5em;
padding: 5px 10px; margin-bottom: 1em;
a, .summary-of-changes-scroll {
a:link, padding-top: 4px;
a:active { height: 100px;
text-decoration: none;
} }
h3 { .amendment-link {
margin-top: 10px; margin-left: 0.3em;
} }
ul { ul {
padding: 0 0 0 32px;
list-style: none; list-style: none;
display: table; display: table;
margin-right: 1em;
} }
li { li {
display: table-row; display: table-row;
cursor: pointer;
&:hover {
text-decoration: underline;
}
& > * { & > * {
display: table-cell; display: table-cell;
padding: 1px; padding: 1px;
} }
} }
.mat-badge-content {
.status { top: -8px !important;
color: gray;
font-style: italic;
}
.no-changes {
font-style: italic;
color: grey;
} }
} }

View File

@ -4,7 +4,7 @@
$background: map-get($theme, background); $background: map-get($theme, background);
.motion-detail-diff { .motion-detail-diff {
.change-recommendation-overview, .change-recommendation-summary,
.diff-box { .diff-box {
background-color: mat-color($background, background); background-color: mat-color($background, background);
border: 1px solid mat-color($background, selected-button); border: 1px solid mat-color($background, selected-button);

View File

@ -727,6 +727,17 @@ button.mat-menu-item.selected {
} }
} }
.smaller-icon-button {
height: 24px !important;
width: 24px !important;
line-height: 24px !important;
.mat-button-wrapper {
vertical-align: top;
line-height: initial;
}
}
/** /**
* Fix to enable multi line mat hints. See: * Fix to enable multi line mat hints. See:
* https://github.com/angular/components/issues/5227 * https://github.com/angular/components/issues/5227