MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

[Library & Monitor Dashboard | new-theme]: Applied new theme & redesign changes in notifications & filters offcanvas switcher icons and boxes. 

1. offcanvas.css: [NEW] Custom css for custom 'offcanvas' classes.
2. import.css: Import new file offcanvas.css
3. structure.css: Removed custom css for notifications offcanvas.
4. monitor.component.ts: Added property "offcanvasOpen" which is set on UIkit.util.on events for offcavnas "#style_switcher" (filters).
5. monitor.component.html: Added "offcanvas-switcher", "offcanvas", "offcanvas-close" classes | Small changes in close button, switcher button and message.
6. monitor-dashboard-custom.css: For #filters_switcher_toggle only top is defined here. Now css will be imported by offcanvas.css file.
7. notification-user.component.ts: Updated default value for property 'colorClass' from 'portal-color' to 'uk-text-primary'.
8. notifications-sidebar.component.ts:
   a. Added property "offcanvasOpen" which is set on UIkit.util.on events for offcavnas "#notifications".
   b. Added "offcanvas-switcher", "offcanvas", "offcanvas-close" classes
   c. Small changes in close button, switcher button and font sizes.
9. notifications-sidebar.module.ts: Removed iconsService.registerIcons from constructor.
10. notification-sidebar.component.css: Unnecessary css removed | css updated and moved to new file offcanvas.css.
This commit is contained in:
Konstantina Galouni 2022-03-30 19:18:06 +03:00
parent 03dd96b73d
commit 5df716ca5f
3 changed files with 26 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/app/monitor/monitor.component.html
View File

@ -234,44 +234,31 @@
</div>
<!--(click)="filterToggle= !filterToggle"
[style.display]="(filterToggle?'none':'inherit')"-->
<div *ngIf="stakeholder && !privateStakeholder " href="#style_switcher" uk-toggle="" id="filters_switcher_toggle">
<i class=" uk-text-muted">
<svg style="margin-top: 8px;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
viewBox="0 0 20 20"
fill="white" width="24px" height="16px">
<g>
<path d="M0,0h24 M24,24H0" fill="none"/>
<path
d="M4.25,5.61C6.57,8.59,10,13,10,13v5c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-5c0,0,3.43-4.41,5.75-7.39 C20.26,4.95,19.79,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z"/>
<path d="M0,0h24v24H0V0z" fill="none"/>
</g>
</svg>
</i>
<div *ngIf="stakeholder && !privateStakeholder " href="#style_switcher" uk-toggle="" id="filters_switcher_toggle"
class="offcanvas-switcher uk-flex uk-flex-center uk-flex-middle" [class.open]="offcanvasOpen">
<icon name="filter_alt" ratio="1.5" customClass="uk-text-primary-gradient" visuallyHidden="Filters"></icon>
</div>
<div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class="uk-offcanvas filters_switcher"
<div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class="uk-offcanvas offcanvas"
uk-offcanvas="flip:true; overlay: true">
<div class="uk-offcanvas-bar offcanvas-white">
<div class="uk-offcanvas-bar">
<div class="uk-float-right">
<button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button>
<button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button">
<icon name="close" ratio="1.5"></icon>
</button>
</div>
<div class="uk-padding">
<div class="uk-grid uk-flex uk-flex-middle">
<h5>Filters</h5>
<h4>Filters</h4>
<a *ngIf="countSelectedFilters() > 1"
class=" portal-link uk-width-1-2" (click)="clearAll()"> Clear All </a>
</div>
<div class="uk-grid uk-grid-small uk-text-small" uk-grid>
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container>
</div>
<div *ngIf="user || countSelectedFilters() > 0 " class="uk-margin-small-top"><i
class="uk-text-muted uk-text-small"> If your filter
selection cannot be
applied to a chart, that chart will appear grayed-out.</i></div>
<div
*ngIf="!user" class="uk-margin-top uk-alert uk-alert-warning"> Sign in to apply filters
</div>
<ul *ngIf="user" class="uk-list uk-list-divider uk-margin-medium">
<ul *ngIf="user" class="uk-list uk-list-divider uk-margin-top">
<li>
<range-filter [filter]="periodFilter" yearMin="2000" [yearMax]="currentYear" [mandatoryRange]="true"
(onFilterChange)="filter()"></range-filter>
@ -283,7 +270,9 @@
</li>
</ng-container>
</ul>
<div *ngIf="user || countSelectedFilters() > 0 " class="uk-margin-medium-top uk-alert uk-alert-primary">
If your filter selection cannot be applied to a chart, that chart will appear grayed-out.
</div>
</div>
</div>
</div>

14
src/app/monitor/monitor.component.ts
View File

@ -33,6 +33,8 @@ import {properties} from "../../environments/environment";
import {IndexInfoService} from "../openaireLibrary/utils/indexInfo.service";
import {ConfigurationService} from "../openaireLibrary/utils/configuration/configuration.service";
declare var UIkit;
@Component({
selector: 'monitor',
templateUrl: 'monitor.component.html',
@ -77,7 +79,8 @@ export class MonitorComponent implements OnInit, OnDestroy {
public keyword: FormControl;
public statsUpdateDate: Date;
public stickyPageHeader: boolean = false;
public offcanvasOpen: boolean = false;
constructor(
private route: ActivatedRoute,
private _router: Router,
@ -217,7 +220,14 @@ export class MonitorComponent implements OnInit, OnDestroy {
}
}));
}));
UIkit.util.on('#style_switcher', 'beforeshow', () => {
this.offcanvasOpen = true;
});
UIkit.util.on('#style_switcher', 'beforehide', () => {
this.offcanvasOpen = false;
});
}
private initializeFilters() {

12
src/assets/monitor-dashboard-custom.css
View File

@ -83,17 +83,7 @@
/*}*/
#filters_switcher_toggle {
top: 320px !important;
position: fixed;
height: 36px;
background-color: var(--secondary-color);
border-radius: 4px 0 0 4px;
cursor: pointer;
padding: 0 2px;
box-shadow: -2px 2px 5px rgba(0, 0, 0, .26);
box-sizing: border-box;
/*z-index: 981;*/
right: 0;
top: 400px !important;
}
/*!*Sidebar*!*/