Folder icon customization and readme updates

refs #9
This commit is contained in:
Denys Vuika
2016-04-28 19:39:21 +01:00
parent d374299db2
commit e156dde15a
8 changed files with 28 additions and 9 deletions

View File

@@ -26,7 +26,6 @@ System.register(['angular2/core', './../services/alfresco.service'], function(ex
this._alfrescoService = _alfrescoService;
this.navigate = true;
this.breadcrumb = false;
this.folderIconClass = 'fa fa-folder-o fa-4x';
this.thumbnails = true;
this.downloads = true;
this.itemClick = new core_1.EventEmitter();
@@ -129,7 +128,7 @@ System.register(['angular2/core', './../services/alfresco.service'], function(ex
__metadata('design:type', Boolean)
], DocumentList.prototype, "breadcrumb", void 0);
__decorate([
core_1.Input('folder-icon-class'),
core_1.Input('folder-icon'),
__metadata('design:type', String)
], DocumentList.prototype, "folderIconClass", void 0);
__decorate([
@@ -148,9 +147,9 @@ System.register(['angular2/core', './../services/alfresco.service'], function(ex
core_1.Component({
selector: 'alfresco-document-list',
styles: [
"\n :host .breadcrumb {\n margin-bottom: 4px;\n }\n\n :host .folder-icon {\n float: left;\n margin-right: 10px;\n }\n\n :host .file-icon {\n width: 52px;\n height: 52px;\n float: left;\n margin-right: 10px;\n }\n \n :host .document-header {\n font-size: 24px;\n line-height: 32px;\n }\n \n :host .document-header:hover {\n text-decoration: underline;\n }\n "
"\n :host .breadcrumb {\n margin-bottom: 4px;\n }\n\n :host .folder-icon {\n float: left;\n margin-right: 10px;\n font-size: 4em;\n }\n\n :host .file-icon {\n width: 52px;\n height: 52px;\n float: left;\n margin-right: 10px;\n }\n \n :host .document-header {\n font-size: 24px;\n line-height: 32px;\n }\n \n :host .document-header:hover {\n text-decoration: underline;\n }\n "
],
template: "\n <ol *ngIf=\"breadcrumb\" class=\"breadcrumb\">\n <li *ngFor=\"#r of route; #last = last\" [class.active]=\"last\" [ngSwitch]=\"last\">\n <span *ngSwitchWhen=\"true\">{{r.name}}</span>\n <a *ngSwitchDefault href=\"#\" (click)=\"goToRoute(r, $event)\">{{r.name}}</a>\n </li>\n </ol>\n <div *ngIf=\"folder\" class=\"list-group\">\n <a href=\"#\" *ngIf=\"canNavigateParent()\" (click)=\"onNavigateParentClick($event)\" class=\"list-group-item\">\n <i class=\"fa fa-level-up\"></i> ...\n </a>\n <a href=\"#\" *ngFor=\"#document of folder.items\" class=\"list-group-item clearfix\">\n \n <!-- folder actions -->\n <div *ngIf=\"document.isFolder && folderActions.length > 0\" class=\"btn-group pull-right\">\n <button type=\"button\" class=\"btn btn-default\"\n *ngFor=\"#qfa of quickFolderActions\" (click)=\"executeContentAction(document, qfa)\">\n <span *ngIf=\"qfa.icon\" class=\"{{qfa.icon}}\"></span>\n <span *ngIf=\"qfa.title\">{{qfa.title}}</span>\n </button>\n <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\" \n aria-haspopup=\"true\" aria-expanded=\"false\">\n Actions <span class=\"caret\"></span>\n </button>\n <ul class=\"dropdown-menu\">\n <li *ngFor=\"#folderAction of folderActions\">\n <a href=\"#\" (click)=\"executeContentAction(document, folderAction)\">{{folderAction.title}}</a>\n </li>\n </ul>\n </div>\n \n <!-- document actions -->\n <div *ngIf=\"!document.isFolder\" class=\"btn-group pull-right\">\n <button type=\"button\" class=\"btn btn-default\"\n *ngFor=\"#qda of quickDocumentActions\" (click)=\"executeContentAction(document, qda)\">\n <span *ngIf=\"qda.icon\" class=\"{{qda.icon}}\"></span>\n <span *ngIf=\"qda.title\">{{qda.title}}</span>\n </button>\n <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\" \n aria-haspopup=\"true\" aria-expanded=\"false\">\n Actions <span class=\"caret\"></span>\n </button>\n <ul class=\"dropdown-menu\">\n <li>\n <a *ngIf=\"downloads && !document.isFolder\" \n href=\"{{getContentUrl(document)}}\" \n download target=\"_blank\">\n Download\n </a>\n </li>\n <li *ngIf=\"documentActions.length > 0\" role=\"separator\" class=\"divider\"></li>\n <li *ngFor=\"#documentAction of documentActions\">\n <a href=\"#\" (click)=\"executeContentAction(document, documentAction)\">{{documentAction.title}}</a>\n </li>\n </ul>\n </div>\n \n <i *ngIf=\"thumbnails && document.isFolder\" class=\"folder-icon {{folderIconClass}}\"\n (click)=\"onItemClick(document, $event)\">\n </i>\n <img *ngIf=\"thumbnails && !document.isFolder\" class=\"file-icon\"\n alt=\"\"\n src=\"{{getDocumentThumbnailUrl(document)}}\"\n (click)=\"onItemClick(document, $event)\">\n <h1 class=\"list-group-item-heading document-header\" (click)=\"onItemClick(document, $event)\" >\n {{document.displayName}}\n </h1>\n <p class=\"list-group-item-text\">{{document.description}}</p>\n <small>\n Modified {{document.modifiedOn}} by {{document.modifiedBy}}\n </small>\n </a>\n </div>\n ",
template: "\n <ol *ngIf=\"breadcrumb\" class=\"breadcrumb\">\n <li *ngFor=\"#r of route; #last = last\" [class.active]=\"last\" [ngSwitch]=\"last\">\n <span *ngSwitchWhen=\"true\">{{r.name}}</span>\n <a *ngSwitchDefault href=\"#\" (click)=\"goToRoute(r, $event)\">{{r.name}}</a>\n </li>\n </ol>\n <div *ngIf=\"folder\" class=\"list-group\">\n <a href=\"#\" *ngIf=\"canNavigateParent()\" (click)=\"onNavigateParentClick($event)\" class=\"list-group-item\">\n <i class=\"fa fa-level-up\"></i> ...\n </a>\n <a href=\"#\" *ngFor=\"#document of folder.items\" class=\"list-group-item clearfix\">\n \n <!-- folder actions -->\n <div *ngIf=\"document.isFolder && folderActions.length > 0\" class=\"btn-group pull-right\">\n <button type=\"button\" class=\"btn btn-default\"\n *ngFor=\"#qfa of quickFolderActions\" (click)=\"executeContentAction(document, qfa)\">\n <span *ngIf=\"qfa.icon\" class=\"{{qfa.icon}}\"></span>\n <span *ngIf=\"qfa.title\">{{qfa.title}}</span>\n </button>\n <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\" \n aria-haspopup=\"true\" aria-expanded=\"false\">\n Actions <span class=\"caret\"></span>\n </button>\n <ul class=\"dropdown-menu\">\n <li *ngFor=\"#folderAction of folderActions\">\n <a href=\"#\" (click)=\"executeContentAction(document, folderAction)\">{{folderAction.title}}</a>\n </li>\n </ul>\n </div>\n \n <!-- document actions -->\n <div *ngIf=\"!document.isFolder\" class=\"btn-group pull-right\">\n <button type=\"button\" class=\"btn btn-default\"\n *ngFor=\"#qda of quickDocumentActions\" (click)=\"executeContentAction(document, qda)\">\n <span *ngIf=\"qda.icon\" class=\"{{qda.icon}}\"></span>\n <span *ngIf=\"qda.title\">{{qda.title}}</span>\n </button>\n <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\" \n aria-haspopup=\"true\" aria-expanded=\"false\">\n Actions <span class=\"caret\"></span>\n </button>\n <ul class=\"dropdown-menu\">\n <li>\n <a *ngIf=\"downloads && !document.isFolder\" \n href=\"{{getContentUrl(document)}}\" \n download target=\"_blank\">\n Download\n </a>\n </li>\n <li *ngIf=\"documentActions.length > 0\" role=\"separator\" class=\"divider\"></li>\n <li *ngFor=\"#documentAction of documentActions\">\n <a href=\"#\" (click)=\"executeContentAction(document, documentAction)\">{{documentAction.title}}</a>\n </li>\n </ul>\n </div>\n \n <i *ngIf=\"thumbnails && document.isFolder\" class=\"folder-icon {{folderIconClass || 'glyphicon glyphicon-folder-close'}}\"\n (click)=\"onItemClick(document, $event)\">\n </i>\n <img *ngIf=\"thumbnails && !document.isFolder\" class=\"file-icon\"\n alt=\"\"\n src=\"{{getDocumentThumbnailUrl(document)}}\"\n (click)=\"onItemClick(document, $event)\">\n <h1 class=\"list-group-item-heading document-header\" (click)=\"onItemClick(document, $event)\" >\n {{document.displayName}}\n </h1>\n <p class=\"list-group-item-text\">{{document.description}}</p>\n <small>\n Modified {{document.modifiedOn}} by {{document.modifiedBy}}\n </small>\n </a>\n </div>\n ",
providers: [alfresco_service_1.AlfrescoService]
}),
__metadata('design:paramtypes', [alfresco_service_1.AlfrescoService])