Merge pull request #6009 from tsiegleauq/some-vscroll-for-motion
Some enhancements for motion detail
This commit is contained in:
Emanuel Schütze
GitHub
commit
4f35770769
|
|
@ -35,27 +35,39 @@
|
|||
<mat-step [completed]="contentForm.value.selectedParagraphs.length > 0">
|
||||
<ng-template matStepLabel>{{ 'Select paragraphs' | translate }}</ng-template>
|
||||
<div class="amendment-create-wizard-wrapper">
|
||||
<section
|
||||
*ngFor="let paragraph of paragraphs; let i = index"
|
||||
class="paragraph-row"
|
||||
[class.active]="isParagraphSelected(paragraph)"
|
||||
(click)="onParagraphClicked(paragraph)"
|
||||
>
|
||||
<mat-checkbox
|
||||
*ngIf="multipleParagraphsAllowed"
|
||||
class="paragraph-select"
|
||||
[checked]="isParagraphSelected(paragraph)"
|
||||
(click)="checkboxClicked($event)"
|
||||
<cdk-virtual-scroll-viewport itemSize="90" minBufferPx="400" maxBufferPx="600" class="paragraph-scroll">
|
||||
<section
|
||||
*ngFor="let paragraph of paragraphs; let i = index"
|
||||
class="paragraph-row"
|
||||
[class.active]="isParagraphSelected(paragraph)"
|
||||
(click)="onParagraphClicked(paragraph)"
|
||||
>
|
||||
</mat-checkbox>
|
||||
<mat-radio-button
|
||||
*ngIf="!multipleParagraphsAllowed"
|
||||
class="paragraph-select"
|
||||
[checked]="isParagraphSelected(paragraph)"
|
||||
>
|
||||
</mat-radio-button>
|
||||
<div class="paragraph-text motion-text" [innerHTML]="getParagraphPreview(i) | trust: 'html'"></div>
|
||||
</section>
|
||||
<mat-checkbox
|
||||
*ngIf="multipleParagraphsAllowed"
|
||||
class="paragraph-select"
|
||||
[checked]="isParagraphSelected(paragraph)"
|
||||
(click)="checkboxClicked($event)"
|
||||
>
|
||||
</mat-checkbox>
|
||||
<mat-radio-button
|
||||
*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>
|
||||
</mat-step>
|
||||
<mat-step>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
.amendment-create-wizard-wrapper {
|
||||
.paragraph-scroll {
|
||||
height: calc(100vh - 160px);
|
||||
}
|
||||
|
||||
.paragraph-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -1,47 +1,52 @@
|
|||
<!-- A summary of all changes -->
|
||||
<div class="motion-detail-diff">
|
||||
<section class="change-recommendation-overview" *ngIf="changes.length > 0">
|
||||
<strong> {{ 'Summary of changes' | translate }}: </strong>
|
||||
<div class="change-recommendation-summary" *ngIf="changes?.length">
|
||||
<strong [matBadge]="changes.length" matBadgeOverlap="false">{{ 'Summary of changes' | translate }} </strong>
|
||||
|
||||
<ul>
|
||||
<li *ngFor="let change of changes">
|
||||
<a
|
||||
href=""
|
||||
(click)="scrollToChangeClicked(change, $event)"
|
||||
[class.amendment]="isAmendment(change)"
|
||||
[class.recommendation]="isChangeRecommendation(change)"
|
||||
>
|
||||
<span *ngIf="!change.isTitleChange()" class="line-number">
|
||||
{{ 'Line' | translate }} {{ formatLineRange(change) }}
|
||||
</span>
|
||||
<span *ngIf="change.isTitleChange()">{{ 'Title' | translate }}</span>
|
||||
<span *ngIf="isChangeRecommendation(change)"> ({{ 'Change recommendation' | translate }})</span>
|
||||
<span *ngIf="isAmendment(change)">
|
||||
({{ 'Amendment' | translate }} {{ change.getIdentifier() }})</span
|
||||
>
|
||||
<span class="operation" *ngIf="isChangeRecommendation(change)">
|
||||
– {{ getRecommendationTypeName(change) | translate }}
|
||||
<!--
|
||||
@TODO
|
||||
<span ng-if="change.original.getType(motion.getVersion(version).text) == 3">
|
||||
{ change.other_description }
|
||||
</span>
|
||||
-->
|
||||
</span>
|
||||
<span class="status">
|
||||
<ng-container *ngIf="change.isRejected() && !isAmendment(change)">
|
||||
– <span>{{ 'Rejected' | translate }}</span></ng-container
|
||||
>
|
||||
<ng-container *ngIf="(change.isAccepted() || isAmendment(change)) && change.stateName">
|
||||
– {{ change.stateName | translate }}</ng-container
|
||||
<cdk-virtual-scroll-viewport
|
||||
itemSize="22"
|
||||
minBufferPx="100"
|
||||
maxBufferPx="300"
|
||||
class="summary-of-changes-scroll"
|
||||
>
|
||||
<ul>
|
||||
<li *cdkVirtualFor="let change of changes; let index = index">
|
||||
<span class="one-line">
|
||||
<a href="" (click)="scrollToChangeClicked(change, $event)" *ngIf="!change.isTitleChange()">
|
||||
<span> {{ 'Line' | translate }} {{ formatLineRange(change) }} </span>
|
||||
<span *ngIf="change.isTitleChange()">{{ 'Title' | translate }}</span>
|
||||
<span *ngIf="isChangeRecommendation(change)">
|
||||
({{ 'Change recommendation' | translate }})</span
|
||||
>
|
||||
<span *ngIf="isAmendment(change)">
|
||||
({{ 'Amendment' | translate }} {{ change.getIdentifier() }})
|
||||
</span>
|
||||
</a>
|
||||
<i class="user-subtitle" *ngIf="isChangeRecommendation(change)">
|
||||
– {{ getRecommendationTypeName(change) | translate }}
|
||||
</i>
|
||||
<i class="user-subtitle">
|
||||
<ng-container *ngIf="change.isRejected() && !isAmendment(change)">
|
||||
– <span>{{ 'Rejected' | translate }}</span></ng-container
|
||||
>
|
||||
<ng-container *ngIf="(change.isAccepted() || isAmendment(change)) && change.stateName">
|
||||
– {{ change.stateName | translate }}</ng-container
|
||||
>
|
||||
</i>
|
||||
<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>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div *ngIf="changes.length === 0" class="no-changes">{{ 'No change recommendations yet' | translate }}</div>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</cdk-virtual-scroll-viewport>
|
||||
</div>
|
||||
|
||||
<span class="text-prefix-label" *ngIf="showPreamble">{{ preamble | translate }}</span>
|
||||
|
||||
|
|
@ -97,10 +102,10 @@
|
|||
<div class="collission-hint" *ngIf="hasCollissions(change, getAllTextChangingObjects())">
|
||||
<mat-icon matTooltip="{{ 'This change collides with another one.' | translate }}">warning</mat-icon>
|
||||
</div>
|
||||
<div class="action-row" *osPerms="'motions.can_manage'">
|
||||
<div class="action-row">
|
||||
<button
|
||||
mat-icon-button
|
||||
*ngIf="isRecommendation(change)"
|
||||
*osPerms="'motions.can_manage'; and: isRecommendation(change)"
|
||||
type="button"
|
||||
[matMenuTriggerFor]="changeRecommendationMenu"
|
||||
[matMenuTriggerData]="{ change: change }"
|
||||
|
|
@ -166,41 +171,48 @@
|
|||
|
||||
<mat-menu #amendmentMenu="matMenu">
|
||||
<ng-template matMenuContent let-change="change">
|
||||
<button
|
||||
<a
|
||||
type="button"
|
||||
mat-menu-item
|
||||
[routerLink]="change.amendment.getDetailStateURL()"
|
||||
[state]="{ back: 'true' }"
|
||||
>
|
||||
<mat-icon>visibility_on</mat-icon>
|
||||
<span>{{ 'Show amendment' | translate }}</span>
|
||||
</button>
|
||||
<ng-container *ngIf="!change?.amendment?.identifier">
|
||||
<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
|
||||
*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"> ...</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"> ...</span>
|
||||
</button>
|
||||
<button mat-menu-item (click)="setAmendmentState(change, null)">
|
||||
<mat-icon>replay</mat-icon>
|
||||
{{ 'Reset state' | translate }}
|
||||
</button>
|
||||
<!-- perms.isAllowed('change_state', motion) (which does not exist)-->
|
||||
<ng-container *osPerms="'motions.can_manage'">
|
||||
<mat-divider *ngIf="change.amendment.state.next_states.length > 0"></mat-divider>
|
||||
|
||||
<!-- 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"> ...</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"> ...</span>
|
||||
</button>
|
||||
<button mat-menu-item (click)="setAmendmentState(change, null)">
|
||||
<mat-icon>replay</mat-icon>
|
||||
{{ 'Reset state' | translate }}
|
||||
</button>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
</mat-menu>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
/* Diffbox */
|
||||
.diff-box {
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
|
|
@ -44,48 +43,37 @@
|
|||
}
|
||||
}
|
||||
|
||||
.change-recommendation-overview {
|
||||
.change-recommendation-summary {
|
||||
border-radius: 3px;
|
||||
margin-bottom: 15px;
|
||||
padding: 5px 10px;
|
||||
padding: 0.5em 0 0 0.5em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
a,
|
||||
a:link,
|
||||
a:active {
|
||||
text-decoration: none;
|
||||
.summary-of-changes-scroll {
|
||||
padding-top: 4px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 10px;
|
||||
.amendment-link {
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0 0 0 32px;
|
||||
list-style: none;
|
||||
display: table;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
li {
|
||||
display: table-row;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
& > * {
|
||||
display: table-cell;
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
color: gray;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.no-changes {
|
||||
font-style: italic;
|
||||
color: grey;
|
||||
.mat-badge-content {
|
||||
top: -8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
$background: map-get($theme, background);
|
||||
|
||||
.motion-detail-diff {
|
||||
.change-recommendation-overview,
|
||||
.change-recommendation-summary,
|
||||
.diff-box {
|
||||
background-color: mat-color($background, background);
|
||||
border: 1px solid mat-color($background, selected-button);
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
* https://github.com/angular/components/issues/5227
|
||||
|
|
|
|||
Loading…
Reference in New Issue