Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

More cancel styles, save and add members button with icon

Browse Source
This commit is contained in:
Adina Țeudan 2020-12-11 20:25:09 +02:00
parent b005ef6645
commit e4b34f6929
7 changed files with 18 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html
View File

@ -1,4 +1,4 @@
<button mat-button [class.overlay]="showDot" [class.primary]="primary" (click)="action.emit($event)" [class.link-button]="linkButton" [disabled]="disabled">
<button mat-button [class.overlay]="showDot" [class.primary]="primary" (click)="action.emit($event)" [class.show-bg]="type === 'show-bg'" [disabled]="disabled">
<mat-icon [svgIcon]="icon" *ngIf="icon"></mat-icon>
<span [translate]="text"></span>
</button>

14
apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss
View File

@ -3,17 +3,11 @@
button {
padding: 0 14px 0 10px;
&.show-bg {
background-color: $grey-6;
}
mat-icon {
width: 14px;
}
}
.link-button {
text-transform: uppercase;
opacity: 0.7;
color: $accent;
font-size: 11px;
letter-spacing: 0;
line-height: 14px;
font-weight: 600 !important;
}

2
apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts
View File

@ -10,8 +10,8 @@ export class IconButtonComponent implements OnInit {
@Input() text: string;
@Input() showDot = false;
@Input() primary = false;
@Input() linkButton = false;
@Input() disabled = false;
@Input() type: 'default' | 'show-bg' = 'default';
@Output() action = new EventEmitter<any>();
constructor() {}

13
apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
View File

@ -51,15 +51,14 @@
type="submit"
></button>
<button
<redaction-icon-button
[disabled]="disabled || !changed"
(click)="saveProjectAndAddMembers()"
(action)="saveProjectAndAddMembers()"
*ngIf="!project?.projectId"
color="primary"
mat-flat-button
translate="project-listing.add-edit-dialog.actions.save-and-add-members"
type="button"
></button>
text="project-listing.add-edit-dialog.actions.save-and-add-members"
icon="red:assign"
type="show-bg"
></redaction-icon-button>
</div>
</form>

7
apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
View File

@ -99,12 +99,7 @@
text="dictionary-overview.save-changes"
[primary]="true"
></redaction-icon-button>
<redaction-icon-button
*ngIf="permissionsService.isAdmin()"
(action)="revert()"
text="dictionary-overview.revert-changes"
[linkButton]="true"
></redaction-icon-button>
<div class="all-caps-label cancel" *ngIf="permissionsService.isAdmin()" (click)="revert()" translate="dictionary-overview.revert-changes"></div>
</div>
</div>

7
apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
View File

@ -54,12 +54,7 @@
text="rules-screen.save-changes"
[primary]="true"
></redaction-icon-button>
<redaction-icon-button
*ngIf="permissionsService.isAdmin()"
(action)="revert()"
text="rules-screen.revert-changes"
[linkButton]="true"
></redaction-icon-button>
<div *ngIf="permissionsService.isAdmin()" (click)="revert()" translate="rules-screen.revert-changes" class="all-caps-label cancel"></div>
</div>
</div>
</section>

4
apps/red-ui/src/assets/styles/red-button.scss
View File

@ -18,6 +18,10 @@
margin-right: 6px;
}
}
&.mat-button-disabled {
background-color: $grey-6 !important;
}
}
.cdk-program-focused .mat-button-focus-overlay {