[ACS-5166] Changes to Digital workspace new UI for better experience

This commit is contained in:
Aayush Rohila 2023-06-08 19:05:07 +05:30
parent eb11e3c360
commit 4e4dc315d0
12 changed files with 68 additions and 6 deletions

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M570-320h60v-90h90v-60h-90v-90h-60v90h-90v60h90v90ZM141-160q-24 0-42-18.5T81-220v-520q0-23 18-41.5t42-18.5h280l60 60h340q23 0 41.5 18.5T881-680v460q0 23-18.5 41.5T821-160H141Zm0-580v520h680v-460H456l-60-60H141Zm0 0v520-520Z"/></svg>

After

Width:  |  Height:  |  Size: 329 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M220-80q-24 0-42-18t-18-42v-680q0-24 18-42t42-18h361l219 219v521q0 24-18 42t-42 18H220Zm331-554v-186H220v680h520v-494H551ZM220-820v186-186 680-680Z"/></svg>

After

Width:  |  Height:  |  Size: 253 B

View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 11V8C8 6.89543 8.89543 6 10 6H17.1716C17.702 6 18.2107 6.21071 18.5858 6.58579L23.4142 11.4142C23.7893 11.7893 24 12.298 24 12.8284V24C24 25.1046 23.1046 26 22 26H10C8.89543 26 8 25.1046 8 24V21H6C5.44772 21 5 20.5523 5 20V12C5 11.4477 5.44772 11 6 11H8ZM10 8L17 8V13H22V24H10V21H14C14.5523 21 15 20.5523 15 20V12C15 11.4477 14.5523 11 14 11H10V8Z" fill="#2A7DE1"/>
<path d="M8.10798 18H9.2415L9.98298 15.5625H10.0171L10.7585 18H11.8921L13.179 13.6364H11.858L11.2614 16.3295H11.2273L10.5199 13.6364H9.48014L8.77275 16.321H8.73866L8.14207 13.6364H6.82104L8.10798 18Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 737 B

View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 11V8C8 6.89543 8.89543 6 10 6H17.1716C17.702 6 18.2107 6.21071 18.5858 6.58579L23.4142 11.4142C23.7893 11.7893 24 12.298 24 12.8284V24C24 25.1046 23.1046 26 22 26H10C8.89543 26 8 25.1046 8 24V21H6C5.44772 21 5 20.5523 5 20V12C5 11.4477 5.44772 11 6 11H8ZM10 8L17 8V13H22V24H10V21H14C14.5523 21 15 20.5523 15 20V12C15 11.4477 14.5523 11 14 11H10V8Z" fill="#CA401B"/>
<path d="M8.3125 18H9.49716V16.7045H10.1534C11.1484 16.7045 11.8153 16.1186 11.8153 15.179C11.8153 14.25 11.1655 13.6364 10.196 13.6364H8.3125V18ZM9.49716 15.7841V14.5824H9.91477C10.3303 14.5824 10.5795 14.804 10.5795 15.179C10.5795 15.5518 10.3303 15.7841 9.91477 15.7841H9.49716Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 819 B

View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 11V8C8 6.89543 8.89543 6 10 6H17.1716C17.702 6 18.2107 6.21071 18.5858 6.58579L23.4142 11.4142C23.7893 11.7893 24 12.298 24 12.8284V24C24 25.1046 23.1046 26 22 26H10C8.89543 26 8 25.1046 8 24V21H6C5.44772 21 5 20.5523 5 20V12C5 11.4477 5.44772 11 6 11H8ZM10 8L17 8V13H22V24H10V21H14C14.5523 21 15 20.5523 15 20V12C15 11.4477 14.5523 11 14 11H10V8Z" fill="#00953B"/>
<path d="M9.26303 13.6364H7.93348L9.22894 15.8182L7.89087 18H9.23746L9.97894 16.7045H10.013L10.7545 18H12.1096L10.7545 15.8182L12.0585 13.6364H10.7375L10.013 14.9062H9.97894L9.26303 13.6364Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 728 B

View File

@ -0,0 +1,23 @@
<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_440_151150)">
<g clip-path="url(#clip0_440_151150)">
<rect x="24" y="24" width="28" height="28" rx="14" fill="#F8F8F8"/>
<path d="M44.5217 45L46.1667 43.355L40.8234 38L46.1667 32.645L44.5217 31L37.5217 38L44.5217 45Z" fill="#212121" fill-opacity="0.24"/>
<path d="M36.8334 45L38.4784 43.355L33.135 38L38.4784 32.645L36.8334 31L29.8334 38L36.8334 45Z" fill="#212121" fill-opacity="0.24"/>
</g>
</g>
<defs>
<filter id="filter0_d_440_151150" x="0" y="0" width="76" height="76" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="12"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.129412 0 0 0 0 0.137255 0 0 0 0 0.156863 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_440_151150"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_440_151150" result="shape"/>
</filter>
<clipPath id="clip0_440_151150">
<rect x="24" y="24" width="28" height="28" rx="14" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 20V15C22 11.93 20.37 9.36 17.5 8.68V8C17.5 7.17 16.83 6.5 16 6.5C15.17 6.5 14.5 7.17 14.5 8V8.68C11.64 9.36 10 11.92 10 15V20L8 22V23H24V22L22 20ZM16 26C17.1 26 18 25.1 18 24H14C14 25.1 14.9 26 16 26ZM12 21H20V15C20 12.52 18.49 10.5 16 10.5C13.51 10.5 12 12.52 12 15V21Z" fill="#212328" fill-opacity="0.7"/>
</svg>

After

Width:  |  Height:  |  Size: 464 B

View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.9405 13.9996C21.6518 11.6171 20.3225 9.6635 18.1598 8.87696C18.0558 9.23325 18 9.61011 18 10C18 10.3913 18.0562 10.7696 18.161 11.127C18.907 11.6256 19.4472 12.3896 19.7422 13.3023C20.3695 13.732 21.1255 13.9877 21.9405 13.9996ZM16.0205 10.5001C16.0137 10.5 16.0069 10.5 16 10.5C13.51 10.5 12 12.52 12 15V21H20V15.6586C20.6256 15.8797 21.2987 16 22 16V20L24 22V23H8V22L10 20V15C10 11.92 11.64 9.36 14.5 8.68V8C14.5 7.17 15.17 6.5 16 6.5C16.3455 6.5 16.6632 6.61607 16.9164 6.81143C16.3358 7.73519 16 8.82838 16 10C16 10.1684 16.0069 10.3352 16.0205 10.5001ZM18 24C18 25.1 17.1 26 16 26C14.9 26 14 25.1 14 24H18Z" fill="#212328" fill-opacity="0.7"/>
<circle cx="22" cy="10" r="4" fill="#B00020"/>
</svg>

After

Width:  |  Height:  |  Size: 852 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M510-378h60v-132h132v-60H570v-132h-60v132H378v60h132v132ZM260-200q-24 0-42-18t-18-42v-560q0-24 18-42t42-18h560q24 0 42 18t18 42v560q0 24-18 42t-42 18H260Zm0-60h560v-560H260v560ZM140-80q-24 0-42-18t-18-42v-620h60v620h620v60H140Zm120-740v560-560Z"/></svg>

After

Width:  |  Height:  |  Size: 350 B

View File

@ -158,7 +158,12 @@ export class ThumbnailService {
'save-as': './assets/images/save-as.svg',
save: './assets/images/save.svg',
task: './assets/images/task.svg',
'multipart/related': './assets/images/ft_ic_website.svg'
'multipart/related': './assets/images/ft_ic_website.svg',
side_nav_collapse: './assets/images/icon-expand-navigation.svg',
create_new_folder: './assets/images/create_new_folder.svg',
file_from_template: './assets/images/draft.svg',
create_library: './assets/images/library_add.svg'
};
constructor(matIconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {

View File

@ -6,10 +6,8 @@
class="adf-notification-history-menu_button"
id="adf-notification-history-open-button"
(menuOpened)="onMenuOpened()">
<mat-icon matBadge="&#8288;"
[matBadgeHidden]="!notifications.length"
matBadgeColor="accent"
matBadgeSize="small">notifications</mat-icon>
<mat-icon *ngIf="notifications.length" svgIcon="pending_notifications:notifications"></mat-icon>
<mat-icon *ngIf="!notifications.length" svgIcon="notification:notifications"></mat-icon>
</button>
<mat-menu #menu="matMenu"
[xPosition]="menuPositionX"

View File

@ -23,6 +23,8 @@ import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { StorageService } from '../../common/services/storage.service';
import { PaginationModel } from '../../models/pagination.model';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'adf-notification-history',
@ -55,10 +57,22 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
paginatedNotifications = [];
pagination: PaginationModel;
icons: any = {
notifications: '../../assets/images/icon-notification-outline-default.svg',
pending_notifications: '../../assets/images/icon-notification-outline-default.svg'
};
constructor(
private notificationService: NotificationService,
public storageService: StorageService,
public cd: ChangeDetectorRef) {
public cd: ChangeDetectorRef,
private matIconRegistry: MatIconRegistry,
private sanitizer: DomSanitizer) {
Object.keys(this.icons).forEach((key) => {
const url = this.sanitizer.bypassSecurityTrustResourceUrl(this.icons[key]);
this.matIconRegistry.addSvgIcon(key, url);
this.matIconRegistry.addSvgIconInNamespace('notification', key, url);
});
}