</a>
</div>
<div>
- <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:' + user?.account.displayName }">
+ <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:"' + user?.account.displayName + '"' }">
<div class="dashboard-num">{{ user.videoAbusesCount }}</div>
<div class="dashboard-label" i18n>Incriminated in reports</div>
</a>
</div>
<div>
- <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reporter:' + user?.account.displayName + ' state:accepted' }">
+ <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reporter:"' + user?.account.displayName + '" state:accepted' }">
<div class="dashboard-num">{{ user.videoAbusesAcceptedCount }} / {{ user.videoAbusesCreatedCount }}</div>
<div class="dashboard-label" i18n>Authored reports accepted</div>
</a>
<div *ngIf="!isCreation() && user" class="form-row mt-4"> <!-- danger zone grid -->
<div class="form-group col-12 col-lg-4 col-xl-3">
<div class="anchor" id="danger"></div> <!-- danger zone anchor -->
- <div i18n class="account-title">DANGER ZONE</div>
+ <div i18n class="account-title account-title-danger">DANGER ZONE</div>
</div>
<div class="form-group form-group-right col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }">
.account-title {
@include settings-big-title;
+
+ &.account-title-danger {
+ color: lighten($color: #c54130, $amount: 10);
+ }
}
input:not([type=submit]) {
button {
@include peertube-button;
- @include grey-button;
+ @include danger-button;
@include disable-outline;
}
}
\ No newline at end of file
<div class="form-row mt-5"> <!-- danger zone grid -->
<div class="form-group col-12 col-lg-4 col-xl-3">
- <h2 i18n class="account-title">DANGER ZONE</h2>
+ <h2 i18n class="account-title account-title-danger">DANGER ZONE</h2>
</div>
<div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
.account-title {
@include settings-big-title;
+
+ &.account-title-danger {
+ color: lighten($color: #c54130, $amount: 10);
+ }
}
.progress {
<h1 class="sr-only" i18n>Imports</h1>
<p-table
- [value]="videoImports" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+ [value]="videoImports" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+ [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+ currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} imports"
(onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
>
<ng-template pTemplate="header">
<th style="width: 55%" i18n>Video</th>
<th style="width: 150px" i18n>State</th>
<th style="width: 150px" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
- <th style="width: 60px"></th>
+ <th style="width: 70px"></th>
</tr>
</ng-template>
<div class="submit-container">
<div i18n *ngIf="videoUploaded === false" class="message-submit">Publish will be available when upload is finished</div>
- <div class="submit-button"
- (click)="updateSecondStep()"
- [ngClass]="{ disabled: isPublishingButtonDisabled() }"
- >
- <my-global-icon iconName="circle-tick" aria-hidden="true"></my-global-icon>
- <input [disabled]="isPublishingButtonDisabled()" type="button" i18n-value value="Publish" />
- </div>
+ <my-button className="orange-button" i18n-label label="Publish" icon="circle-tick"
+ (click)="updateSecondStep()" (keydown.enter)="updateSecondStep()"
+ [disabled]="isPublishingButtonDisabled()"
+ ></my-button>
</div>
</form>
></my-video-edit>
<div class="submit-container">
- <div class="submit-button" (click)="update()" [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }">
- <my-global-icon iconName="circle-tick" aria-hidden="true"></my-global-icon>
- <input type="button" i18n-value value="Update" />
- </div>
+ <my-button className="orange-button" i18n-label label="Update" icon="circle-tick"
+ (click)="update()" (keydown.enter)="update()"
+ [disabled]="!form.valid || isUpdatingVideo === true"
+ ></my-button>
</div>
</form>
</div>
-<span class="action-button" [ngClass]="className" [title]="getTitle()">
+<span class="action-button" [ngClass]="getClasses()" [title]="getTitle()">
<my-global-icon *ngIf="!loading" [iconName]="icon"></my-global-icon>
<my-small-loader [loading]="loading"></my-small-loader>
.action-button {
@include peertube-button-link;
- @include button-with-icon(21px, 0, -2px);
+ @include button-with-icon(21px, 0, -1px);
- > :nth-child(2) {
+ > span:nth-child(2) {
margin-left: 5px;
}
}
@Input() icon: GlobalIconName = undefined
@Input() title: string = undefined
@Input() loading = false
+ @Input() disabled = false
getTitle () {
return this.title || this.label
}
+
+ getClasses () {
+ return {
+ [this.className]: true,
+ disabled: this.disabled
+ }
+ }
}
@mixin grey-button {
@include button-focus($grey-button-outline-color);
-
- &, &:active, &:focus {
- background-color: $grey-background-color;
- color: pvar(--greyForegroundColor);
- }
+ background-color: $grey-background-color;
+ color: pvar(--greyForegroundColor);
&:hover, &:active, &:focus, &[disabled], &.disabled {
color: pvar(--greyForegroundColor);
}
}
+@mixin danger-button {
+ $color: lighten($color: #c54130, $amount: 10);
+ $text: #fff6f5;
+
+ @include button-focus(scale-color($color, $alpha: -95%));
+ background-color: $color;
+ color: $text;
+
+ &:hover, &:active, &:focus, &[disabled], &.disabled {
+ background-color: lighten($color: $color, $amount: 10);
+ }
+
+ &[disabled], &.disabled {
+ cursor: default;
+ }
+
+ my-global-icon {
+ @include apply-svg-color($text)
+ }
+}
+
@mixin peertube-button {
border: none;
font-weight: $font-semibold;