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

UI updates

Browse Source
This commit is contained in:
Adina Țeudan 2020-12-15 14:36:43 +02:00
parent 6da94d2a88
commit f27898ac17
7 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,10 @@ button {
&.show-bg {
background-color: $grey-6;
&:not(.mat-button-disabled):hover {
background-color: $grey-4;
}
}
mat-icon {

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

@ -45,7 +45,7 @@
.red-input-group {
margin-bottom: 16px;
max-width: 450px;
max-width: 300px;
input {
padding-right: 32px;

13
apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
View File

@ -71,11 +71,16 @@
</form>
<div class="actions-container">
<button color="primary" mat-flat-button (click)="save()" [disabled]="configForm.invalid || !changed" class="red-button">
{{ 'watermark-screen.action.save' | translate }}
</button>
<button
color="primary"
mat-flat-button
(click)="save()"
[disabled]="configForm.invalid || !changed"
class="red-button"
translate="watermark-screen.action.save"
></button>
<div class="all-caps-label pointer cancel" [class.disabled]="!changed" (click)="revert()" [translate]="'watermark-screen.action.revert'"></div>
<div class="all-caps-label pointer cancel" [class.disabled]="!changed" (click)="revert()" translate="watermark-screen.action.revert"></div>
</div>
</div>
</div>

2
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
View File

@ -95,7 +95,7 @@
</div>
<div class="red-content-inner">
<div class="left-container" [class.extended]="collapsedDetails">
<div *ngIf="!appStateService.activeProject?.hasFiles" class="no-data">
<div *ngIf="!appStateService.activeProject?.hasFiles" class="empty-state">
<mat-icon svgIcon="red:document"></mat-icon>
<div class="heading-l" translate="project-overview.no-data.title"></div>
<redaction-icon-button (action)="fileInput.click()" icon="red:upload" text="project-overview.no-data.action" type="primary">

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

@ -13,6 +13,7 @@
display: flex;
align-items: center;
line-height: 34px;
transition: opacity 0.2s;
> *:not(last-child) {
margin-right: 6px;
@ -20,17 +21,25 @@
}
&.mat-button-disabled {
background-color: $grey-6 !important;
.mat-button-wrapper {
opacity: 0.3;
}
}
}
.cdk-program-focused .mat-button-focus-overlay {
.mat-button-focus-overlay {
opacity: 0 !important;
}
.mat-flat-button.mat-primary.red-button {
.mat-flat-button.mat-primary {
padding: 0 14px;
transition: background-color 0.2s;
transition: background-color 0.2s, color 0.2s;
background-color: $red-1;
&.mat-button-disabled {
background-color: $red-1;
color: rgba($white, 0.5);
}
&:not(.mat-button-disabled):hover {
background-color: $red-2;
@ -42,10 +51,10 @@ redaction-chevron-button,
redaction-circle-button {
position: relative;
display: flex;
transition: background-color 0.2s;
button {
font-weight: 400 !important;
transition: background-color 0.2s;
&.overlay {
background: rgba($primary, 0.1);

1
apps/red-ui/src/assets/styles/red-input.scss
View File

@ -173,6 +173,7 @@
.mat-datepicker-input {
margin-top: 0;
width: 120px;
}
.mat-datepicker-toggle {

2
apps/red-ui/src/assets/styles/red-page-layout.scss
View File

@ -82,7 +82,7 @@ body {
height: 4px;
}
.no-data {
.empty-state {
display: flex;
flex-direction: column;
align-items: center;