mirror of https://github.com/Squidex/squidex.git
24 changed files with 308 additions and 119 deletions
@ -1,26 +1,2 @@ |
|||||
@import '_vars'; |
@import '_vars'; |
||||
@import '_mixins'; |
@import '_mixins'; |
||||
|
|
||||
.content-status { |
|
||||
& { |
|
||||
color: $color-text; |
|
||||
cursor: default !important; |
|
||||
} |
|
||||
|
|
||||
&:hover { |
|
||||
background: transparent; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.discard-changes { |
|
||||
& { |
|
||||
color: $color-theme-blue !important; |
|
||||
cursor: pointer; |
|
||||
font-size: .9rem; |
|
||||
font-weight: normal; |
|
||||
} |
|
||||
|
|
||||
&:hover { |
|
||||
text-decoration: underline !important; |
|
||||
} |
|
||||
} |
|
||||
@ -0,0 +1,30 @@ |
|||||
|
<ng-container *sqxModalView="dueTimeDialog;onRoot:true"> |
||||
|
<sqx-modal-dialog (closed)="cancelStatusChange()"> |
||||
|
<ng-container title> |
||||
|
{{dueTimeAction}} content item(s) |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container content> |
||||
|
<div class="form-check"> |
||||
|
<input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Immediately" id="immediately"> |
||||
|
<label class="form-check-label" for="immediately"> |
||||
|
{{dueTimeAction}} content item(s) immediately. |
||||
|
</label> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-check"> |
||||
|
<input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Scheduled" id="scheduled"> |
||||
|
<label class="form-check-label" for="scheduled"> |
||||
|
{{dueTimeAction}} content item(s) at a later point date and time. |
||||
|
</label> |
||||
|
</div> |
||||
|
|
||||
|
<sqx-date-time-editor [disabled]="dueTimeMode === 'Immediately'" mode="DateTime" hideClear="true" [(ngModel)]="dueTime"></sqx-date-time-editor> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container footer> |
||||
|
<button type="button" class="float-left btn btn-secondary" (click)="cancelStatusChange()">Cancel</button> |
||||
|
<button type="button" class="float-right btn btn-primary" [disabled]="dueTimeMode === 'Scheduled' && !dueTime" (click)="confirmStatusChange()" sqxFocusOnInit>Confirm</button> |
||||
|
</ng-container> |
||||
|
</sqx-modal-dialog> |
||||
|
</ng-container> |
||||
@ -0,0 +1,2 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
@ -0,0 +1,52 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Component } from '@angular/core'; |
||||
|
import { Observable, Subject } from 'rxjs'; |
||||
|
|
||||
|
import { fadeAnimation, ModalView } from '@app/shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-due-time-selector', |
||||
|
styleUrls: ['./due-time-selector.component.scss'], |
||||
|
templateUrl: './due-time-selector.component.html', |
||||
|
animations: [ |
||||
|
fadeAnimation |
||||
|
] |
||||
|
}) |
||||
|
export class DueTimeSelectorComponent { |
||||
|
public dueTimeDialog = new ModalView(); |
||||
|
public dueTime: string | null = ''; |
||||
|
public dueTimeFunction: Subject<string | null>; |
||||
|
public dueTimeAction: string | null = ''; |
||||
|
public dueTimeMode = 'Immediately'; |
||||
|
|
||||
|
public selectDueTime(action: string): Observable<string | null> { |
||||
|
this.dueTimeAction = action; |
||||
|
this.dueTimeFunction = new Subject<string | null>(); |
||||
|
this.dueTimeDialog.show(); |
||||
|
|
||||
|
return this.dueTimeFunction; |
||||
|
} |
||||
|
|
||||
|
public confirmStatusChange() { |
||||
|
const result = this.dueTimeMode === 'Immediately' ? null : this.dueTime; |
||||
|
|
||||
|
this.dueTimeFunction.next(result); |
||||
|
this.dueTimeFunction.complete(); |
||||
|
|
||||
|
this.cancelStatusChange(); |
||||
|
} |
||||
|
|
||||
|
public cancelStatusChange() { |
||||
|
this.dueTimeMode = 'Immediately'; |
||||
|
this.dueTimeDialog.hide(); |
||||
|
this.dueTimeFunction = null!; |
||||
|
this.dueTime = null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
Loading…
Reference in new issue