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

[Monitor Dashboard | Trunk]: Close dropdowns on selection click. Fix filters on indicators. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57969 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-01-10 14:20:42 +00:00
parent 3b8075b6b9
commit 753cee99bf
9 changed files with 162 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/manageStakeholders/manageStakeholders.component.html
View File

@ -52,13 +52,12 @@
<div class="md-card-dropdown uk-inline"> <div class="md-card-dropdown uk-inline">
<i class="md-icon material-icons" <i class="md-icon material-icons"
(click)="$event.stopPropagation();$event.preventDefault()">more_vert</i> (click)="$event.stopPropagation();$event.preventDefault()">more_vert</i>
<div uk-dropdown="mode: click; pos: bottom-right" class="uk-padding-remove-horizontal"> <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false" class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li><a <li><a (click)="$event.stopPropagation();editStakeholder(stakeholder, true);hide(element);$event.preventDefault()">Edit</a>
(click)="$event.stopPropagation();editStakeholder(stakeholder, true);$event.preventDefault()">Edit</a>
</li> </li>
<li><a <li><a
(click)="$event.stopPropagation();deleteStakeholderOpen(stakeholder);$event.preventDefault()">Delete</a> (click)="$event.stopPropagation();deleteStakeholderOpen(stakeholder);hide(element);$event.preventDefault()">Delete</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -131,13 +130,13 @@
<div class="md-card-dropdown uk-inline"> <div class="md-card-dropdown uk-inline">
<i class="md-icon material-icons" <i class="md-icon material-icons"
(click)="$event.stopPropagation();$event.preventDefault()">more_vert</i> (click)="$event.stopPropagation();$event.preventDefault()">more_vert</i>
<div uk-dropdown="mode: click; pos: bottom-right" class="uk-padding-remove-horizontal"> <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false" class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li><a <li><a
(click)="$event.stopPropagation();editStakeholder(stakeholder);$event.preventDefault()">Edit</a> (click)="$event.stopPropagation();editStakeholder(stakeholder);hide(element);$event.preventDefault()">Edit</a>
</li> </li>
<li><a <li><a
(click)="$event.stopPropagation();deleteStakeholderOpen(stakeholder);$event.preventDefault()">Delete</a> (click)="$event.stopPropagation();deleteStakeholderOpen(stakeholder);hide(element);$event.preventDefault()">Delete</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -203,6 +202,7 @@
label="Alias"> label="Alias">
</div> </div>
</div> </div>
<div dashboard-input class="uk-form-row" [formInput]="stakeholderFb.get('logoUrl')" label="Logo Path/URL"></div>
<div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid> <div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid>
<div dashboard-input [formInput]="stakeholderFb.get('isPublic')" <div dashboard-input [formInput]="stakeholderFb.get('isPublic')"
label="Privacy" [options]="stakeholderUtils.isPublic" type="select"> label="Privacy" [options]="stakeholderUtils.isPublic" type="select">

11
src/app/manageStakeholders/manageStakeholders.component.ts
View File

@ -10,6 +10,8 @@ import {AlertModal} from "../openaireLibrary/utils/modal/alert";
import {StakeholderCreator} from "../utils/entities/stakeholderCreator"; import {StakeholderCreator} from "../utils/entities/stakeholderCreator";
import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component"; import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component";
declare var UIkit;
@Component({ @Component({
selector: 'home', selector: 'home',
templateUrl: "./manageStakeholders.component.html" templateUrl: "./manageStakeholders.component.html"
@ -81,6 +83,10 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
}); });
} }
hide(element: any) {
UIkit.dropdown(element).hide();
}
public changeGrid(value) { public changeGrid(value) {
this.grid = value; this.grid = value;
} }
@ -217,7 +223,8 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
} else { } else {
this.stakeholderFb.setValue(StakeholderCreator.createFunderDefaultProfile(this.stakeholderFb.value)); this.stakeholderFb.setValue(StakeholderCreator.createFunderDefaultProfile(this.stakeholderFb.value));
} }
this.stakeholderService.buildStakeholder(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => { this.stakeholderService.buildStakeholder(this.properties.monitorServiceAPIURL,
this.stakeholderFb.value).subscribe(stakeholder => {
if (stakeholder.defaultId === null) { if (stakeholder.defaultId === null) {
this.defaultStakeholders.push(stakeholder); this.defaultStakeholders.push(stakeholder);
} else { } else {
@ -227,7 +234,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
} else { } else {
this.stakeholderFb.get('type').enable(); this.stakeholderFb.get('type').enable();
this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => { this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => {
if (stakeholder.isDefaultProfile) { if (stakeholder.defaultId == null) {
this.defaultStakeholders[this.index] = stakeholder; this.defaultStakeholders[this.index] = stakeholder;
} else { } else {
this.stakeholders[this.index] = stakeholder; this.stakeholders[this.index] = stakeholder;

10
src/app/stakeholder/stakeholder.component.html
View File

@ -37,18 +37,18 @@
</div> </div>
<div class="menu_on_hover" (click)="$event.stopPropagation();$event.preventDefault()"> <div class="menu_on_hover" (click)="$event.stopPropagation();$event.preventDefault()">
<i class="material-icons onHover">more_vert</i> <i class="material-icons onHover">more_vert</i>
<div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false" <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal"> class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editTopicOpen(i)">Edit</a></li> <li><a (click)="editTopicOpen(i); hide(element)">Edit</a></li>
<li><a (click)="toggleTopicStatus(topic)"> <li><a (click)="toggleTopicStatus(topic); hide(element)">
{{topic.isActive ? 'Deactivate' : 'Activate'}}</a> {{topic.isActive ? 'Deactivate' : 'Activate'}}</a>
</li> </li>
<li><a (click)="toggleTopicAccess(topic)"> <li><a (click)="toggleTopicAccess(topic); hide(element)">
{{topic.isPublic?'Unpublish':'Publish'}}</a> {{topic.isPublic?'Unpublish':'Publish'}}</a>
</li> </li>
<hr class="uk-nav-divider"> <hr class="uk-nav-divider">
<li><a (click)="deleteTopicOpen(i)">Delete</a></li> <li><a (click)="deleteTopicOpen(i); hide(element)">Delete</a></li>
</ul> </ul>
</div> </div>
</div> </div>

4
src/app/stakeholder/stakeholder.component.ts
View File

@ -82,6 +82,10 @@ export class StakeholderComponent implements OnInit, OnDestroy, IDeactivateCompo
return true; return true;
} }
hide(element: any) {
UIkit.dropdown(element).hide();
}
get open(): boolean { get open(): boolean {
return this.layoutService.open; return this.layoutService.open;
} }

47
src/app/topic/indicators.component.html
View File

@ -47,12 +47,23 @@
</ul> </ul>
</div> </div>
<div class="uk-flex uk-flex-right"> <div class="uk-flex uk-flex-right">
<button class="md-btn md-btn-primary">Preview</button> <a class="md-btn md-btn-primary waves-button waves-effect">
<i class="material-icons uk-margin-small-right">remove_red_eye</i>
Preview
<i class="material-icons uk-margin-small-left">keyboard_arrow_down</i>
</a>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'public'}" (click)="hide(element)">Public</a></li>
<li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'private'}" (click)="hide(element)">Private</a></li>
</ul>
</div>
</div> </div>
</div> </div>
<h4 class="uk-text-bold">Number Indicators</h4> <h4 class="uk-text-bold">Number Indicators</h4>
<section [class.max-width-large]="!grid" [id]="number._id" <div [class.max-width-large]="!grid" [id]="number._id"
class="uk-grid-match uk-grid-small" class="uk-grid-match section uk-grid-small"
*ngFor="let number of displayNumbers; let i = index" *ngFor="let number of displayNumbers; let i = index"
uk-sortable="group: number" uk-grid> uk-sortable="group: number" uk-grid>
<div class="uk-width-1-1 disable-sortable uk-sortable-nodrag"> <div class="uk-width-1-1 disable-sortable uk-sortable-nodrag">
@ -81,18 +92,18 @@
</ng-template> </ng-template>
<div class="md-card-dropdown uk-inline"> <div class="md-card-dropdown uk-inline">
<i class="md-icon material-icons">more_vert</i> <i class="md-icon material-icons">more_vert</i>
<div uk-dropdown="mode: click; pos: bottom-right" <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal"> class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<!--<li><a (click)="editChartIndicatorOpen(indicator._id)">Edit</a></li>--> <!--<li><a (click)="editChartIndicatorOpen(indicator._id)">Edit</a></li>-->
<li><a (click)="toggleIndicatorStatus(number._id, indicator)"> <li><a (click)="toggleIndicatorStatus(number._id, indicator);hide(element)">
{{indicator.isActive ? 'Deactivate' : 'Activate'}}</a> {{indicator.isActive ? 'Deactivate' : 'Activate'}}</a>
</li> </li>
<li><a (click)="toggleIndicatorAccess(number._id, indicator)"> <li><a (click)="toggleIndicatorAccess(number._id, indicator);hide(element)">
{{indicator.isPublic ? 'Unpublish' : 'Publish'}}</a> {{indicator.isPublic ? 'Unpublish' : 'Publish'}}</a>
</li> </li>
<hr class="uk-nav-divider"> <hr class="uk-nav-divider">
<li><a (click)="deleteIndicatorOpen(number, indicator._id, 'number')">Delete</a> <li><a (click)="deleteIndicatorOpen(number, indicator._id, 'number');hide(element)">Delete</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -121,16 +132,18 @@
</div> </div>
</div> </div>
</ng-template> </ng-template>
</section> </div>
<h4 class="uk-text-bold">Chart Indicators</h4> <h4 class="uk-text-bold">Chart Indicators</h4>
<div> <div>
<ng-template ngFor [ngForOf]="displayCharts" let-chart let-i="index"> <ng-template ngFor [ngForOf]="displayCharts" let-chart let-i="index">
<section [class.max-width-large]="!grid" [id]="'chart-' + chart._id" <div [class.max-width-large]="!grid" [id]="'chart-' + chart._id"
class="uk-grid-match uk-grid-small uk-grid" class="uk-grid-match section uk-grid-small uk-grid"
uk-sortable="group: chart" uk-grid> uk-sortable="group: chart" uk-grid>
<div class="tools disable-sortable uk-sortable-nodrag"> <div class="tools disable-sortable uk-sortable-nodrag">
<div class="md-btn-group"> <div class="md-btn-group">
<button class="md-btn md-btn-primary md-icon"><i class="material-icons">add</i></button> <button class="md-btn md-btn-mini"><i class="material-icons">add</i></button>
<button class="md-btn md-btn-mini"><i class="material-icons">drag_indicator</i></button>
<button class="md-btn md-btn-mini"><i class="material-icons">clear</i></button>
</div> </div>
</div> </div>
<div class="uk-width-1-1 disable-sortable uk-sortable-nodrag"> <div class="uk-width-1-1 disable-sortable uk-sortable-nodrag">
@ -170,18 +183,18 @@
</div> </div>
<div class="md-card-dropdown uk-inline"> <div class="md-card-dropdown uk-inline">
<i class="md-icon material-icons">more_vert</i> <i class="md-icon material-icons">more_vert</i>
<div uk-dropdown="mode: click; pos: bottom-right" <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal"> class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editChartIndicatorOpen(chart, indicator._id)">Edit</a></li> <li><a (click)="editChartIndicatorOpen(chart, indicator._id);hide(element)">Edit</a></li>
<li><a (click)="toggleIndicatorStatus(chart._id, indicator)"> <li><a (click)="toggleIndicatorStatus(chart._id, indicator);hide(element)">
{{indicator.isActive ? 'Deactivate' : 'Activate'}}</a> {{indicator.isActive ? 'Deactivate' : 'Activate'}}</a>
</li> </li>
<li><a (click)="toggleIndicatorAccess(chart._id, indicator)"> <li><a (click)="toggleIndicatorAccess(chart._id, indicator);hide(element)">
{{indicator.isPublic ? 'Unpublish' : 'Publish'}}</a> {{indicator.isPublic ? 'Unpublish' : 'Publish'}}</a>
</li> </li>
<hr class="uk-nav-divider"> <hr class="uk-nav-divider">
<li><a (click)="deleteIndicatorOpen(chart, indicator._id)">Delete</a></li> <li><a (click)="deleteIndicatorOpen(chart, indicator._id);hide(element)">Delete</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -247,7 +260,7 @@
</div> </div>
</div> </div>
</div> </div>
</section> </div>
</ng-template> </ng-template>
</div> </div>
</div> </div>

56
src/app/topic/indicators.component.ts
View File

@ -11,6 +11,7 @@ import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties"
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service"; import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component"; import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component";
import {Router} from "@angular/router";
declare var UIkit; declare var UIkit;
@ -30,6 +31,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
public subcategoryIndex: number = 0; public subcategoryIndex: number = 0;
@Input() @Input()
public stakeholder: Stakeholder = null; public stakeholder: Stakeholder = null;
public preview: string;
public indicatorUtils: IndicatorUtils = new IndicatorUtils(); public indicatorUtils: IndicatorUtils = new IndicatorUtils();
public indicatorFb: FormGroup; public indicatorFb: FormGroup;
/** /**
@ -64,6 +66,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
private stakeholderService: StakeholderService, private stakeholderService: StakeholderService,
private statisticsService: StatisticsService, private statisticsService: StatisticsService,
private fb: FormBuilder, private fb: FormBuilder,
private router: Router,
private sanitizer: DomSanitizer) { private sanitizer: DomSanitizer) {
} }
@ -126,6 +129,13 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.filterCharts(); this.filterCharts();
this.filterNumbers(); this.filterNumbers();
} }
this.preview = '/' + this.stakeholder.alias + '/' + this.stakeholder.topics[this.topicIndex].alias +
'/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].alias +
'/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].alias;
}
hide(element: any) {
UIkit.dropdown(element).hide();
} }
public toggleOpen(event = null) { public toggleOpen(event = null) {
@ -163,7 +173,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
filterCharts() { filterCharts() {
this.displayCharts = this.filterChartType(this.filterPrivacy( this.displayCharts = this.filterChartType(this.filterPrivacy(
this.filterStatus(this.filterByKeyword(this.charts, this.filters.value.keyword), this.filterStatus(this.filterByKeyword(HelperFunctions.copy(this.charts), this.filters.value.keyword),
this.filters.value.status), this.filters.value.status),
this.filters.value.privacy), this.filters.value.privacy),
this.filters.value.chartType this.filters.value.chartType
@ -172,66 +182,62 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
filterNumbers() { filterNumbers() {
this.displayNumbers = this.filterPrivacy(this.filterStatus( this.displayNumbers = this.filterPrivacy(this.filterStatus(
this.filterByKeyword(this.numbers, this.filters.value.keyword), this.filterByKeyword(HelperFunctions.copy(this.numbers), this.filters.value.keyword),
this.filters.value.status), this.filters.value.status),
this.filters.value.privacy); this.filters.value.privacy);
} }
onChartTypeChange(value) { onChartTypeChange(value) {
this.displayCharts = this.filterChartType(this.charts, value); this.displayCharts = this.filterChartType(HelperFunctions.copy(this.charts), value);
} }
onPrivacyChange(value) { onPrivacyChange(value) {
this.displayCharts = this.filterPrivacy(this.charts, value); this.displayCharts = this.filterPrivacy(HelperFunctions.copy(this.charts), value);
this.displayNumbers = this.filterPrivacy(this.numbers, value); this.displayNumbers = this.filterPrivacy(HelperFunctions.copy(this.numbers), value);
} }
onStatusChange(value) { onStatusChange(value) {
this.displayCharts = this.filterStatus(this.charts, value); this.displayCharts = this.filterStatus(HelperFunctions.copy(this.charts), value);
this.displayNumbers = this.filterStatus(this.numbers, value); this.displayNumbers = this.filterStatus(HelperFunctions.copy(this.numbers), value);
} }
onKeywordChange(value) { onKeywordChange(value) {
this.displayCharts = this.filterByKeyword(this.charts, value); this.displayCharts = this.filterByKeyword(HelperFunctions.copy(this.charts), value);
this.displayNumbers = this.filterByKeyword(this.numbers, value); this.displayNumbers = this.filterByKeyword(HelperFunctions.copy(this.numbers), value);
} }
private filterChartType(sections: Section[], value): Section[] { private filterChartType(sections: Section[], value): Section[] {
if (value === 'all') { if (value !== 'all') {
return sections; sections.forEach(section =>
} else {
return sections.filter(section =>
section.indicators = section.indicators.filter(indicator => section.indicators = section.indicators.filter(indicator =>
indicator.indicatorPaths.filter(indicatorPath => indicatorPath.type === value).length > 0)); indicator.indicatorPaths.filter(indicatorPath => indicatorPath.type === value).length > 0));
} }
return sections;
} }
private filterPrivacy(sections: Section[], value): Section[] { private filterPrivacy(sections: Section[], value): Section[] {
if (value === 'all') { if (value !== 'all') {
return sections; sections.forEach(section =>
} else {
return sections.filter(section =>
section.indicators = section.indicators.filter(indicator => indicator.isPublic === value)); section.indicators = section.indicators.filter(indicator => indicator.isPublic === value));
} }
return sections;
} }
private filterStatus(sections: Section[], value): Section[] { private filterStatus(sections: Section[], value): Section[] {
if (value === 'all') { if (value !== 'all') {
return sections; sections.forEach(section =>
} else {
return sections.filter(section =>
section.indicators = section.indicators.filter(indicator => indicator.isActive === value)); section.indicators = section.indicators.filter(indicator => indicator.isActive === value));
} }
return sections;
} }
private filterByKeyword(sections: Section[], value): Section[] { private filterByKeyword(sections: Section[], value): Section[] {
if (value === null || value === '') { if (value !== null && value !== '') {
return sections; sections.forEach(section =>
} else {
return sections.filter(section =>
section.indicators = section.indicators.filter(indicator => (indicator.name && indicator.name.toLowerCase().includes(value.toLowerCase())) section.indicators = section.indicators.filter(indicator => (indicator.name && indicator.name.toLowerCase().includes(value.toLowerCase()))
|| (indicator.description && indicator.description.toLowerCase().includes(value.toLowerCase())))); || (indicator.description && indicator.description.toLowerCase().includes(value.toLowerCase()))));
} }
return sections;
} }
get charts(): Section[] { get charts(): Section[] {

30
src/app/topic/topic.component.html
View File

@ -20,18 +20,18 @@
<div class="menu_on_hover" <div class="menu_on_hover"
(click)="$event.stopPropagation();$event.preventDefault()"> (click)="$event.stopPropagation();$event.preventDefault()">
<i class="material-icons onHover md-color-white">more_vert</i> <i class="material-icons onHover md-color-white">more_vert</i>
<div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false" <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal"> class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editTopicOpen()">Edit</a></li> <li><a (click)="editTopicOpen(); hide(element)">Edit</a></li>
<li><a (click)="toggleTopicStatus()"> <li><a (click)="toggleTopicStatus(); hide(element)">
{{stakeholder.topics[topicIndex].isActive ? 'Deactivate' : 'Activate'}}</a> {{stakeholder.topics[topicIndex].isActive ? 'Deactivate' : 'Activate'}}</a>
</li> </li>
<li><a (click)="toggleTopicAccess()"> <li><a (click)="toggleTopicAccess(); hide(element)">
{{stakeholder.topics[topicIndex].isPublic?'Unpublish':'Publish'}}</a> {{stakeholder.topics[topicIndex].isPublic?'Unpublish':'Publish'}}</a>
</li> </li>
<hr class="uk-nav-divider"> <hr class="uk-nav-divider">
<li><a (click)="deleteTopicOpen()">Delete</a></li> <li><a (click)="deleteTopicOpen(); hide(element)">Delete</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -51,18 +51,18 @@
<div class="menu_on_hover" <div class="menu_on_hover"
(click)="$event.stopPropagation();$event.preventDefault()"> (click)="$event.stopPropagation();$event.preventDefault()">
<i class="material-icons onHover">more_vert</i> <i class="material-icons onHover">more_vert</i>
<div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false" <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal"> class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editCategoryOpen(i)">Edit</a></li> <li><a (click)="editCategoryOpen(i); hide(element)">Edit</a></li>
<li><a (click)="toggleCategoryStatus(i)"> <li><a (click)="toggleCategoryStatus(i); hide(element)">
{{category.isActive ? 'Deactivate' : 'Activate'}}</a> {{category.isActive ? 'Deactivate' : 'Activate'}}</a>
</li> </li>
<li><a (click)="toggleCategoryAccess(i)"> <li><a (click)="toggleCategoryAccess(i); hide(element)">
{{category.isPublic?'Unpublish':'Publish'}}</a> {{category.isPublic?'Unpublish':'Publish'}}</a>
</li> </li>
<hr class="uk-nav-divider"> <hr class="uk-nav-divider">
<li><a (click)="deleteCategoryOpen(i)">Delete</a></li> <li><a (click)="deleteCategoryOpen(i); hide(element)">Delete</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -80,18 +80,18 @@
<div class="menu_on_hover" <div class="menu_on_hover"
(click)="$event.stopPropagation();$event.preventDefault()"> (click)="$event.stopPropagation();$event.preventDefault()">
<i class="material-icons onHover">more_vert</i> <i class="material-icons onHover">more_vert</i>
<div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false" <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal"> class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editSubCategoryOpen(j)">Edit</a></li> <li><a (click)="editSubCategoryOpen(j); hide(element)">Edit</a></li>
<li><a (click)="toggleSubcategoryStatus(j)"> <li><a (click)="toggleSubcategoryStatus(j); hide(element)">
{{subcategory.isActive ? 'Deactivate' : 'Activate'}}</a> {{subcategory.isActive ? 'Deactivate' : 'Activate'}}</a>
</li> </li>
<li><a (click)="toggleSubcategoryAccess(j)"> <li><a (click)="toggleSubcategoryAccess(j); hide(element)">
{{subcategory.isPublic?'Unpublish':'Publish'}}</a> {{subcategory.isPublic?'Unpublish':'Publish'}}</a>
</li> </li>
<hr class="uk-nav-divider"> <hr class="uk-nav-divider">
<li><a (click)="deleteSubcategoryOpen(j)">Delete</a></li> <li><a (click)="deleteSubcategoryOpen(j); hide(element)">Delete</a></li>
</ul> </ul>
</div> </div>
</div> </div>

4
src/app/topic/topic.component.ts
View File

@ -99,6 +99,10 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
return true; return true;
} }
hide(element: any) {
UIkit.dropdown(element).hide();
}
public saveElement() { public saveElement() {
if (this.type === "topic") { if (this.type === "topic") {
this.saveTopic(); this.saveTopic();

97
src/assets/theme-assets/dashboard-custom.css
View File

@ -301,42 +301,6 @@ body.dashboard {
cursor: move; cursor: move;
} }
.dashboard section {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
border: rgba(0, 0, 0, 0) solid 1px;
position: relative;
}
.dashboard section .tools {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
display: none;
}
.dashboard section:hover {
border: rgb(28, 169, 213) solid 1px;
}
.dashboard section:hover .tools {
display: block;
}
.dashboard section:hover .tools .md-btn-group .md-btn {
border-top-left-radius: 100%;
border-bottom-left-radius: 0;
min-width: 36px;
min-height: 36px;
}
.dashboard section:hover .tools .md-btn-group .md-btn:first-child {
border-top-left-radius: 100%;
border-bottom-left-radius: 0;
}
.dashboard .uk-sortable-drag .md-card.md-card-hover { .dashboard .uk-sortable-drag .md-card.md-card-hover {
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
@ -354,15 +318,65 @@ body.dashboard {
cursor: default; cursor: default;
} }
/* Section Tools*/
.dashboard .section {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
border: rgba(0, 0, 0, 0) solid 1px;
position: relative;
}
.dashboard .section .tools {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
display: none;
}
.dashboard .section:hover {
border: rgb(28, 169, 213) solid 1px;
}
.dashboard .section:hover .tools {
display: block;
}
.dashboard .section:hover .tools .md-btn-group .md-btn-mini {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: 0;
background-color: rgb(28, 169, 213);
-webkit-box-shadow: none;
box-shadow: none;
}
.dashboard .section:hover .tools .md-btn-group .md-btn-mini * {
color: white;
}
.dashboard .section:hover .tools .md-btn-group::before {
content: "";
border-bottom: 25px solid rgb(28, 169, 213);
border-left:solid 12px transparent;
width: 0;
}
.dashboard .section:hover .tools .md-btn-group::after {
content: "";
border-bottom: 25px solid rgb(28, 169, 213);
border-right:solid 12px transparent;
width: 0;
}
/* Dropdown*/ /* Dropdown*/
.dashboard .uk-dropdown { .dashboard .uk-dropdown {
opacity: 1; opacity: 1;
transform: none; transform: none;
-webkit-transform: none; -webkit-transform: none;
padding: 5px 0; padding: 5px 0;
}
.dashboard .md-card-dropdown .uk-dropdown {
min-width: 160px; min-width: 160px;
} }
@ -370,6 +384,7 @@ body.dashboard {
padding: 5px 10px; padding: 5px 10px;
} }
/* Badge */
.badge { .badge {
height: 75px; height: 75px;
position: absolute; position: absolute;
@ -377,10 +392,12 @@ body.dashboard {
left: 0; left: 0;
z-index: 1; z-index: 1;
} }
.small-badge { .small-badge {
height: 70px; height: 70px;
} }
.right-badge{
.right-badge{
top: 0; top: 0;
left: auto; left: auto;
transform: rotate(90deg); transform: rotate(90deg);