MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

fix attach file button styling, load more button

This commit is contained in:
mchouliara 2024-09-03 17:39:38 +03:00
parent 2b12dafcd4
commit b2ed169976
16 changed files with 112 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.scss
View File

@ -46,19 +46,4 @@
.attach-btn { .attach-btn {
top: -20px; top: -20px;
} }
.attach-file {
width: 156px;
height: 44px;
color: #ffffff;
background: var(--primary-color) 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029;
border-radius: 30px;
}
.attach-file:hover {
background-color: #ffffff;
border: 1px solid var(--primary-color);
color: var(--primary-color);
}

14
frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss
View File

@ -82,20 +82,6 @@ min-width: 101px;
top: -20px; top: -20px;
} }
.attach-file {
width: 156px;
height: 44px;
color: #ffffff;
background: var(--primary-color) 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029;
border-radius: 30px;
}
.attach-file:hover {
background-color: #ffffff;
border: 1px solid var(--primary-color);
color: var(--primary-color);
}
.close-btn:hover{ .close-btn:hover{
cursor: pointer; cursor: pointer;

15
frontend/src/app/ui/admin/tenant-configuration/editor/logo/logo-editor.component.scss
View File

@ -2,18 +2,3 @@
.attach-btn { .attach-btn {
top: -20px; top: -20px;
} }
.attach-file {
width: 156px;
height: 44px;
color: #ffffff;
background: var(--primary-color) 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029;
border-radius: 30px;
}
.attach-file:hover {
background-color: #ffffff;
border: 1px solid var(--primary-color);
color: var(--primary-color);
}

2
frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
View File

@ -44,7 +44,7 @@
</div> </div>
<div *ngIf="listingItems && listingItems.length > 0 && this.lookup.page.offset < currentPage*pageSize" class="d-flex justify-content-center"> <div *ngIf="listingItems && listingItems.length > 0 && this.lookup.page.offset < currentPage*pageSize" class="d-flex justify-content-center">
<button type="button" mat-button class="rounded-btn btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button> <button type="button" mat-button class="rounded-btn load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div> </div>
</div> </div>
</div> </div>

13
frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss
View File

@ -78,19 +78,6 @@ input[type="text"] {
color: var(--primary-color) !important; color: var(--primary-color) !important;
} }
.btn-load-more {
border: 2px solid #212121;
opacity: 1;
min-width: 132px;
width: auto;
margin-top: 4.125rem;
}
.btn-load-more:hover {
background-color: black;
color: white;
}
.draft { .draft {
color: #f16868; color: #f16868;
} }

4
frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html
View File

@ -140,12 +140,12 @@
</ngx-dropzone> </ngx-dropzone>
</div> </div>
<div class="col-12 d-flex justify-content-center attach-btn"> <div class="col-12 d-flex justify-content-center attach-btn">
<button *ngIf="!propertiesFormGroup?.get(field.id).get('textValue').value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file-btn" [disabled]="!!propertiesFormGroup?.get(field.id).get('textValue').value || propertiesFormGroup?.get(field.id).get('textValue').disabled"> <button *ngIf="!propertiesFormGroup?.get(field.id).get('textValue').value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file" [disabled]="!!propertiesFormGroup?.get(field.id).get('textValue').value || propertiesFormGroup?.get(field.id).get('textValue').disabled">
<mat-icon class="mr-2">upload</mat-icon> <mat-icon class="mr-2">upload</mat-icon>
<mat-label>{{field.data.label}}</mat-label> <mat-label>{{field.data.label}}</mat-label>
</button> </button>
<button *ngIf="propertiesFormGroup?.get(field.id).get('textValue').value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file-btn"> <button *ngIf="propertiesFormGroup?.get(field.id).get('textValue').value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file">
<mat-icon class="mr-2">download</mat-icon> <mat-icon class="mr-2">download</mat-icon>
<mat-label>{{ "TYPES.DESCRIPTION-TEMPLATE-UPLOAD-TYPE.DOWNLOAD" | translate }}</mat-label> <mat-label>{{ "TYPES.DESCRIPTION-TEMPLATE-UPLOAD-TYPE.DOWNLOAD" | translate }}</mat-label>
</button> </button>

21
frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.scss
View File

@ -34,27 +34,6 @@
top: -20px; top: -20px;
} }
.attach-file-btn {
min-width: 156px;
height: 44px;
color: #ffffff;
background: var(--primary-color) 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029;
border-radius: 30px;
}
.attach-file-btn:hover {
background-color: #ffffff;
border: 1px solid var(--primary-color);
color: var(--primary-color);
}
.attach-file-btn.mdc-button-disabled, .attach-file-btn.mdc-button-disabled:hover {
background-color: #ffffff;
border: 1px solid darkgray;
color: darkgrey !important;
}
.drop-file { .drop-file {
background-color: #fafafa; background-color: #fafafa;
border: 1px dashed #d1d1d1; border: 1px dashed #d1d1d1;

2
frontend/src/app/ui/description/listing/description-listing.component.html
View File

@ -82,7 +82,7 @@
></app-description-listing-item-component> ></app-description-listing-item-component>
</div> </div>
<div *ngIf="hasListingItems && this.lookup?.page?.offset < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center"> <div *ngIf="hasListingItems && this.lookup?.page?.offset < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center">
<button mat-button type="button" class="rounded-btn btn-load-more" (click)="loadMore()">{{'DESCRIPTION-LISTING.ACTIONS.LOAD-MORE' | translate}}</button> <button mat-button type="button" class="rounded-btn load-more" (click)="loadMore()">{{'DESCRIPTION-LISTING.ACTIONS.LOAD-MORE' | translate}}</button>
</div> </div>
</div> </div>
<div *ngIf="!hasListingItems && hasFilters" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4"> <div *ngIf="!hasListingItems && hasFilters" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4">

13
frontend/src/app/ui/description/listing/description-listing.component.scss
View File

@ -101,19 +101,6 @@
height: 45px; height: 45px;
} }
.btn-load-more {
border: 2px solid #212121;
opacity: 1;
min-width: 132px;
width: auto;
margin-top: 4.125rem;
}
.btn-load-more:hover {
background-color: black;
color: white;
}
.center-content { .center-content {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;

14
frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
View File

@ -220,20 +220,6 @@ input[type="text"] {
color: var(--primary-color) !important; color: var(--primary-color) !important;
} }
.btn-load-more {
border: 2px solid #212121;
border-radius: 30px;
opacity: 1;
min-width: 132px;
width: auto;
height: 40px;
margin-top: 4.125rem;
}
.btn-load-more:hover {
background-color: black;
color: white;
}
.draft { .draft {
color: #f16868; color: #f16868;

14
frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss
View File

@ -240,20 +240,6 @@ input[type="text"] {
color: var(--primary-color) !important; color: var(--primary-color) !important;
} }
.btn-load-more {
border: 2px solid #212121;
border-radius: 30px;
opacity: 1;
min-width: 132px;
width: auto;
height: 40px;
margin-top: 4.125rem;
}
.btn-load-more:hover {
background-color: black;
color: white;
}
.draft { .draft {
color: #f16868; color: #f16868;

2
frontend/src/app/ui/plan/listing/plan-listing.component.html
View File

@ -67,7 +67,7 @@
></app-plan-listing-item-component> ></app-plan-listing-item-component>
</div> </div>
<div *ngIf="hasListingItems && this.lookup?.page?.offset < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center"> <div *ngIf="hasListingItems && this.lookup?.page?.offset < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center">
<button type="button" mat-button class="rounded-btn btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button> <button type="button" mat-button class="rounded-btn load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div> </div>
</div> </div>
<div *ngIf="!hasListingItems && !hasFilters" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4"> <div *ngIf="!hasListingItems && !hasFilters" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4">

12
frontend/src/app/ui/plan/listing/plan-listing.component.scss
View File

@ -134,18 +134,6 @@
padding: 0.4rem; padding: 0.4rem;
} }
.btn-load-more {
border: 2px solid #212121;
opacity: 1;
min-width: 132px;
width: auto;
margin-top: 4.125rem;
}
.btn-load-more:hover {
background-color: black;
color: white;
}
.info-text { .info-text {
text-align: left; text-align: left;

6
frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.html
View File

@ -25,7 +25,7 @@
</ngx-dropzone> </ngx-dropzone>
</div> </div>
<div class="col-12 mb-2 d-flex justify-content-center attach-btn"> <div class="col-12 mb-2 d-flex justify-content-center attach-btn">
<button mat-button type="button" class="col-auto attach-file" (click)="fileInput.click()"> <button mat-button type="button" class="attach-file" (click)="fileInput.click()">
<mat-icon class="mr-2">input</mat-icon> <mat-icon class="mr-2">input</mat-icon>
<span *ngIf="!hasFile()">{{'GENERAL.START-NEW-PLAN-DIALOG.UPLOAD-FILE' | translate}}</span> <span *ngIf="!hasFile()">{{'GENERAL.START-NEW-PLAN-DIALOG.UPLOAD-FILE' | translate}}</span>
<span *ngIf="hasFile()">{{'GENERAL.START-NEW-PLAN-DIALOG.REPLACE-FILE' | translate}}</span> <span *ngIf="hasFile()">{{'GENERAL.START-NEW-PLAN-DIALOG.REPLACE-FILE' | translate}}</span>
@ -81,10 +81,10 @@
<div></div> <div></div>
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<div class="col-auto"> <div class="col-auto">
<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{'PLAN-UPLOAD.ACTIONS.CANCEL' | translate}}</button> <button mat-button type="button" class="rounded-btn neutral" (click)="cancel()">{{'PLAN-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<button mat-button type="button" (click)="confirm()" [disabled]="disableConfirmButton()" class="next-btn">{{'PLAN-UPLOAD.ACTIONS.IMPORT' | translate}}</button> <button mat-button type="button" (click)="confirm()" [disabled]="disableConfirmButton()" class="rounded-btn primary-inverted next-btn">{{'PLAN-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
</div> </div>
</div> </div>
</div> </div>

37
frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.scss
View File

@ -37,27 +37,7 @@ min-width: 101px;
font-weight: 500; font-weight: 500;
} }
.next-btn { .next-btn:hover {
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid var(--primary-color);
border-radius: 30px;
opacity: 1;
min-width: 101px;
height: 43px;
color: var(--primary-color);
font-weight: 500;
}
.next-btn[disabled] {
width: 100px;
height: 43px;
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #b5b5b5;
border-radius: 30px;
opacity: 1;
}
.next-btn:not([disabled]):hover {
background-color: var(--primary-color); background-color: var(--primary-color);
color: #ffffff; color: #ffffff;
} }
@ -66,21 +46,6 @@ min-width: 101px;
top: -20px; top: -20px;
} }
.attach-file {
min-width: 156px;
height: 44px;
color: #ffffff;
background: var(--primary-color) 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029;
border-radius: 30px;
}
.attach-file:hover {
background-color: #ffffff;
border: 1px solid var(--primary-color);
color: var(--primary-color);
}
.drop-file { .drop-file {
background-color: #fafafa; background-color: #fafafa;
border: 1px dashed #d1d1d1; border: 1px dashed #d1d1d1;

164
frontend/src/styles.scss
View File

@ -402,7 +402,8 @@ $mat-dark-theme: mat.m2-define-dark-theme((color: (primary: $mat-dark-theme-prim
@include mat.all-component-densities(-10); @include mat.all-component-densities(-10);
} }
button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[matButtonIcon]), .md-button { button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[matButtonIcon]), .md-button, .mat-mdc-button:not(:disabled) {
&.rounded-btn{ &.rounded-btn{
padding: 0.62rem 1.87rem; padding: 0.62rem 1.87rem;
height: 40px; height: 40px;
@ -412,71 +413,104 @@ button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ma
// padding-left: 2em; // padding-left: 2em;
// padding-right: 2em; // padding-right: 2em;
box-shadow: 0px 3px 6px #1E202029; box-shadow: 0px 3px 6px #1E202029;
}
&.primary { &.primary {
background: var(--primary-color) 0% 0% no-repeat padding-box; background: var(--primary-color) 0% 0% no-repeat padding-box;
color: #ffffff;
border: none;
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
background: #CBCBCB;
color: #ffffff; color: #ffffff;
border: none; border: none;
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
background: #CBCBCB;
color: #ffffff;
border: none;
}
}
&.secondary {
background: var(--secondary-color) 0% 0% no-repeat padding-box;
color: #000000;
border: none;
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
background: #CBCBCB;
color: #ffffff;
border: none;
}
}
&.primary-inverted {
color: var(--primary-color);
border: 1px solid var(--primary-color);
background: #fafafafa;
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
border: 1px solid #CBCBCB;
color: #CBCBCB;
}
}
&.neutral{
border: 1px solid #CBCBCB;
background: #fafafafa;
color: #000000;
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
color: #CBCBCB;
}
}
&.delete {
background: var(--warning-color);
border: none;
color: #ffffff;
}
&.delete-inverted {
background: #fafafafa;
border: 1px solid var(--warning-color);
color: var(--warning-color);
}
&.import {
border: 1px solid #000000;
background: #fafafafa;
color: #000000;
}
&.stepper {
width: 9rem;
} }
} }
&.secondary {
background: var(--secondary-color) 0% 0% no-repeat padding-box;
color: #000000;
border: none;
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
background: #CBCBCB;
color: #ffffff;
border: none;
}
}
&.primary-inverted {
color: var(--primary-color);
border: 1px solid var(--primary-color);
background: #fafafafa;
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
border: 1px solid #CBCBCB;
color: #CBCBCB;
}
}
&.neutral{
border: 1px solid #CBCBCB;
background: #fafafafa;
color: #000000;
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
color: #CBCBCB;
}
}
&.delete {
background: var(--warning-color);
border: none;
color: #ffffff;
}
&.delete-inverted {
background: #fafafafa;
border: 1px solid var(--warning-color);
color: var(--warning-color);
}
&.import {
border: 1px solid #000000;
background: #fafafafa;
color: #000000;
}
&.stepper {
width: 9rem;
}
&.load-more {
border: 2px solid #212121;
min-width: 132px;
margin-top: 4.125rem;
&:hover {
background-color: black;
color: white;
}
}
&.attach-file {
min-width: 156px;
height: 44px;
color: #ffffff;
background: var(--primary-color) 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029;
border-radius: 30px;
&:hover {
background-color: #ffffff;
border: 1px solid var(--primary-color);
color: var(--primary-color);
}
&.attach-file.mdc-button-disabled, &.attach-file.mdc-button-disabled:hover {
background-color: #ffffff;
border: 1px solid darkgray;
color: darkgrey !important;
}
}
} }
.mdc-fab.mdc-fab--mini.mat-mdc-mini-fab { .mdc-fab.mdc-fab--mini.mat-mdc-mini-fab {
@ -504,6 +538,7 @@ button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ma
color: #ffffff; color: #ffffff;
} }
} }
} }
.status-chip { .status-chip {
@ -529,6 +564,11 @@ button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ma
} }
} }
.pointer {
cursor: pointer;
}
.gap-1-rem{ .gap-1-rem{
gap: 1rem; gap: 1rem;
} }