diff --git a/docs/output.json b/docs/output.json index 86aa8ef496..4734c0ce78 100644 --- a/docs/output.json +++ b/docs/output.json @@ -2064,6 +2064,20 @@ "required": null, "shortDescription": "", "description": "" + }, + { + "name": "platformId", + "type": "Object", + "required": null, + "shortDescription": "", + "description": "" + }, + { + "name": "document", + "type": "any", + "required": null, + "shortDescription": "", + "description": "" } ], "platform": null, @@ -3170,6 +3184,13 @@ "required": null, "shortDescription": "", "description": "" + }, + { + "name": "platformId", + "type": "any", + "required": null, + "shortDescription": "", + "description": "" } ], "platform": null, @@ -4638,24 +4659,6 @@ "name": "color", "shortDescription": "Color of the area shown when no picture specified" }, - { - "kind": "input", - "platform": null, - "isStatic": false, - "type": "NbUserMenuItem[]", - "required": null, - "name": "menu", - "shortDescription": "List of menu items for a user context menu (shown when clicked)" - }, - { - "kind": "output", - "platform": null, - "isStatic": false, - "type": "EventEmitter", - "required": null, - "name": "menuClick", - "shortDescription": "Outputs when a context menu item is clicked" - }, { "kind": "input", "platform": null, @@ -4665,15 +4668,6 @@ "name": "name", "shortDescription": "Specifies a name to be shown on the right of a user picture" }, - { - "kind": "input", - "platform": null, - "isStatic": false, - "type": "string", - "required": null, - "name": "picture", - "shortDescription": "Absolute path to a user picture\nUser name initials (JD for John Doe) will be shown if no picture specified" - }, { "kind": "input", "platform": null, @@ -4701,6 +4695,15 @@ "name": "onlyPicture", "shortDescription": "Whether to show only a picture or also show the name and title" }, + { + "kind": "input", + "platform": null, + "isStatic": false, + "type": "string", + "required": null, + "name": "picture", + "shortDescription": "Absolute path to a user picture. Or base64 image\nUser name initials (JD for John Doe) will be shown if no picture specified" + }, { "kind": "input", "platform": null, @@ -4743,8 +4746,8 @@ "examples": [], "params": [ { - "name": "el", - "type": "ElementRef", + "name": "domSanitizer", + "type": "DomSanitizer", "required": null, "shortDescription": "", "description": "" @@ -4770,80 +4773,10 @@ "isStatic": false, "shortDescription": "", "description": "" - }, - { - "examples": [], - "params": [], - "platform": null, - "name": "hasMenu", - "type": [ - "boolean" - ], - "isStatic": false, - "shortDescription": "", - "description": "" - }, - { - "examples": [], - "params": [ - { - "name": "event", - "type": "any", - "required": null, - "shortDescription": "", - "description": "" - } - ], - "platform": null, - "name": "hideMenu", - "type": [ - "void" - ], - "isStatic": false, - "shortDescription": "", - "description": "" - }, - { - "examples": [], - "params": [ - { - "name": "event", - "type": "any", - "required": null, - "shortDescription": "", - "description": "" - }, - { - "name": "item", - "type": "NbUserMenuItem", - "required": null, - "shortDescription": "", - "description": "" - } - ], - "platform": null, - "name": "itemClick", - "type": [ - "boolean" - ], - "isStatic": false, - "shortDescription": "", - "description": "" - }, - { - "examples": [], - "params": [], - "platform": null, - "name": "toggleMenu", - "type": [ - "void" - ], - "isStatic": false, - "shortDescription": "Toggles a context menu" } ], "name": "NbUserComponent", - "description": "Can be used as a user profile link or can bring a user context menu.\n", + "description": "Can be used as a user profile link.\n", "shortDescription": "Represents a component showing a user avatar (picture) with a user name on the right.", "styles": [ { @@ -4888,87 +4821,11 @@ { "name": "user-size-xlarge", "description": "" - }, - { - "name": "user-menu-fg", - "description": "" - }, - { - "name": "user-menu-bg", - "description": "" - }, - { - "name": "user-menu-active-fg", - "description": "" - }, - { - "name": "user-menu-active-bg", - "description": "" - }, - { - "name": "user-menu-border", - "description": "" } ] } ] }, - { - "kind": "class", - "platform": null, - "examples": [], - "props": [ - { - "kind": "property", - "platform": null, - "isStatic": false, - "type": "string", - "required": null, - "name": "icon", - "shortDescription": "Icon class" - }, - { - "kind": "property", - "platform": null, - "isStatic": false, - "type": "string", - "required": null, - "name": "link", - "shortDescription": "Menu link for [routerLink] directive" - }, - { - "kind": "property", - "platform": null, - "isStatic": false, - "type": "string", - "required": null, - "name": "target", - "shortDescription": "Link target (_blank, _self, etc)" - }, - { - "kind": "property", - "platform": null, - "isStatic": false, - "type": "string", - "required": null, - "name": "title", - "shortDescription": "Menu title" - }, - { - "kind": "property", - "platform": null, - "isStatic": false, - "type": "string", - "required": null, - "name": "url", - "shortDescription": "URL for absolute urls, used directly in href" - } - ], - "methods": [], - "name": "NbUserMenuItem", - "shortDescription": "Action dropdown menu", - "styles": [] - }, { "kind": "service", "platform": null, @@ -5247,11 +5104,31 @@ "styles": [] }, { - "kind": "service", + "kind": "class", "platform": null, "examples": [], "props": [], "methods": [ + { + "examples": [], + "params": [ + { + "name": "document", + "type": "any", + "required": null, + "shortDescription": "", + "description": "" + } + ], + "platform": null, + "name": "constructor", + "type": [ + "NbSpinnerService" + ], + "isStatic": false, + "shortDescription": "", + "description": "" + }, { "examples": [], "params": [], @@ -6112,10 +5989,6 @@ "theme": "default", "prop": "user-bg" }, - { - "theme": "default", - "prop": "user-menu-bg" - }, { "theme": "default", "prop": "popover-bg" @@ -6280,10 +6153,6 @@ "theme": "default", "prop": "route-tabs-fg-heading" }, - { - "theme": "default", - "prop": "user-menu-fg" - }, { "theme": "default", "prop": "popover-fg" @@ -6519,14 +6388,6 @@ "theme": "default", "prop": "route-tabs-selected" }, - { - "theme": "default", - "prop": "user-menu-active-bg" - }, - { - "theme": "default", - "prop": "user-menu-border" - }, { "theme": "default", "prop": "popover-border" @@ -8452,61 +8313,6 @@ } ] }, - "user-menu-fg": { - "name": "user-menu-fg", - "value": "#2a2a2a", - "parents": [ - { - "theme": "default", - "prop": "color-fg-heading" - } - ], - "childs": [] - }, - "user-menu-bg": { - "name": "user-menu-bg", - "value": "#ffffff", - "parents": [ - { - "theme": "default", - "prop": "color-bg" - } - ], - "childs": [] - }, - "user-menu-active-fg": { - "name": "user-menu-active-fg", - "value": "#ffffff", - "parents": [], - "childs": [ - { - "theme": "cosmic", - "prop": "user-menu-active-fg" - } - ] - }, - "user-menu-active-bg": { - "name": "user-menu-active-bg", - "value": "#40dc7e", - "parents": [ - { - "theme": "default", - "prop": "color-success" - } - ], - "childs": [] - }, - "user-menu-border": { - "name": "user-menu-border", - "value": "#40dc7e", - "parents": [ - { - "theme": "default", - "prop": "color-success" - } - ], - "childs": [] - }, "popover-fg": { "name": "popover-fg", "value": "#2a2a2a", @@ -10730,10 +10536,6 @@ "theme": "cosmic", "prop": "user-fg" }, - { - "theme": "cosmic", - "prop": "user-menu-bg" - }, { "theme": "cosmic", "prop": "popover-bg" @@ -10891,10 +10693,6 @@ "theme": "cosmic", "prop": "route-tabs-fg-heading" }, - { - "theme": "cosmic", - "prop": "user-menu-fg" - }, { "theme": "cosmic", "prop": "popover-fg" @@ -11114,14 +10912,6 @@ "theme": "cosmic", "prop": "card-header-primary-bg" }, - { - "theme": "cosmic", - "prop": "user-menu-active-bg" - }, - { - "theme": "cosmic", - "prop": "user-menu-border" - }, { "theme": "cosmic", "prop": "popover-border" @@ -13265,61 +13055,6 @@ ], "childs": [] }, - "user-menu-fg": { - "name": "user-menu-fg", - "value": "#ffffff", - "parents": [ - { - "theme": "cosmic", - "prop": "color-fg-heading" - } - ], - "childs": [] - }, - "user-menu-bg": { - "name": "user-menu-bg", - "value": "#3d3780", - "parents": [ - { - "theme": "cosmic", - "prop": "color-bg" - } - ], - "childs": [] - }, - "user-menu-active-fg": { - "name": "user-menu-active-fg", - "value": "#ffffff", - "parents": [ - { - "theme": "default", - "prop": "user-menu-active-fg" - } - ], - "childs": [] - }, - "user-menu-active-bg": { - "name": "user-menu-active-bg", - "value": "#7659ff", - "parents": [ - { - "theme": "cosmic", - "prop": "color-primary" - } - ], - "childs": [] - }, - "user-menu-border": { - "name": "user-menu-border", - "value": "#7659ff", - "parents": [ - { - "theme": "cosmic", - "prop": "color-primary" - } - ], - "childs": [] - }, "popover-fg": { "name": "popover-fg", "value": "#ffffff", diff --git a/src/app/user-test/user-test.component.ts b/src/app/user-test/user-test.component.ts index 4a78a9916c..b29071f220 100644 --- a/src/app/user-test/user-test.component.ts +++ b/src/app/user-test/user-test.component.ts @@ -19,8 +19,7 @@ import { NbBadgeComponent } from 'framework/theme/components/badge/badge.compone template: ` - + @@ -44,21 +43,17 @@ import { NbBadgeComponent } from 'framework/theme/components/badge/badge.compone
- +
- +
+ name="Dmitry Nehaychik" title="Worker">
- +
@@ -101,8 +96,6 @@ import { NbBadgeComponent } from 'framework/theme/components/badge/badge.compone picture="http://lorempixel.com/400/200/animals/" name="Dmitry Nehaychik" title="Worker" - [menu]="contextMenu" - (menuClick)="onMenuItemClick($event)" badgeText="29" [badgeStatus]="badge.STATUS_DANGER" [badgePosition]="badge.TOP_LEFT"> @@ -119,14 +112,4 @@ import { NbBadgeComponent } from 'framework/theme/components/badge/badge.compone export class NbUserTestComponent { badge = NbBadgeComponent; - - contextMenu = [ - { title: 'Profile', link: 'some/link', icon: 'nb-person' }, - { title: 'Billing', target: '_blank', url: 'http://akveo.com' }, - { title: 'Exit', key: 'exit' }, - ]; - - onMenuItemClick(event) { - console.info(event); - } } diff --git a/src/framework/theme/components/user/_user.component.theme.scss b/src/framework/theme/components/user/_user.component.theme.scss index 9c8218177b..1b8436e575 100644 --- a/src/framework/theme/components/user/_user.component.theme.scss +++ b/src/framework/theme/components/user/_user.component.theme.scss @@ -60,28 +60,5 @@ width: nb-theme(user-size-xlarge); } } - - .user-context-menu { - border: 2px solid nb-theme(user-menu-border); - background: nb-theme(user-menu-bg); - - ul > li > a { - color: nb-theme(user-menu-fg); - - @include hover-focus-active { - color: nb-theme(user-menu-active-fg); - background: nb-theme(user-menu-active-bg); - text-decoration: none; - } - } - - ul > li.arrow { - border-bottom: 11px solid nb-theme(user-menu-border) !important; - - &::after { - border-bottom: 11px solid nb-theme(user-menu-bg) !important; - } - } - } } } diff --git a/src/framework/theme/components/user/user.component.html b/src/framework/theme/components/user/user.component.html index 6e1fd8b3bc..9fd9d0cd69 100644 --- a/src/framework/theme/components/user/user.component.html +++ b/src/framework/theme/components/user/user.component.html @@ -1,4 +1,4 @@ -
+
@@ -13,26 +13,4 @@
{{ name }}
{{ title }}
- -
diff --git a/src/framework/theme/components/user/user.component.scss b/src/framework/theme/components/user/user.component.scss index 40709af8b0..06c9950077 100644 --- a/src/framework/theme/components/user/user.component.scss +++ b/src/framework/theme/components/user/user.component.scss @@ -4,8 +4,6 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../styles/core/mixins'; - :host { display: flex; } @@ -14,10 +12,6 @@ position: relative; display: flex; align-items: center; - - &.with-menu { - cursor: pointer; - } } .user-picture { @@ -44,59 +38,3 @@ .info-container { margin-left: 0.5rem; } - -.user-context-menu { - @include center-horizontal-absolute(); - - z-index: 1000; - top: calc(100% + 10px); - background-clip: padding-box; - border-radius: 5px; - font-size: 0.875rem; - line-height: 1.5rem; - - ul { - margin: 0; - padding: 0.5rem 0; - list-style: none; - - li { - display: block; - white-space: nowrap; - > a { - padding: 0.375rem 3rem; - display: flex; - } - - &.with-icon > a { - padding-left: 1rem; - - .item-icon { - font-size: 1.5rem; - padding-right: 0.5rem; - } - } - - &.arrow { - @include center-horizontal-absolute(); - - top: -22px; - width: 0; - height: 0; - border: 11px solid transparent; - - &::after { - position: absolute; - content: ' '; - width: 0; - height: 0; - top: -9px; - left: 0; - margin-left: -12px; - display: block; - border: 12px solid transparent; - } - } - } - } -} diff --git a/src/framework/theme/components/user/user.component.ts b/src/framework/theme/components/user/user.component.ts index 18dccfe230..54dae404ff 100644 --- a/src/framework/theme/components/user/user.component.ts +++ b/src/framework/theme/components/user/user.component.ts @@ -4,45 +4,14 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -import { Component, Input, HostBinding, Output, EventEmitter, HostListener, ElementRef } from '@angular/core'; +import { Component, Input, HostBinding } from '@angular/core'; import { DomSanitizer, SafeStyle } from '@angular/platform-browser'; import { convertToBoolProperty } from '../helpers'; -/** - * Action dropdown menu - */ -export class NbUserMenuItem { - /** - * Menu title - * @type string - */ - title: string; - /** - * Menu link for [routerLink] directive - * @type string - */ - link?: string; - /** - * URL for absolute urls, used directly in href - * @type string - */ - url?: string; - /** - * Link target (_blank, _self, etc) - * @type string - */ - target?: string; - /** - * Icon class - * @type string - */ - icon?: string; -} - /** * Represents a component showing a user avatar (picture) with a user name on the right. * - * Can be used as a user profile link or can bring a user context menu. + * Can be used as a user profile link. * * @styles * @@ -56,11 +25,6 @@ export class NbUserMenuItem { * user-size-medium: * user-size-large: * user-size-xlarge: - * user-menu-fg: - * user-menu-bg: - * user-menu-active-fg: - * user-menu-active-bg: - * user-menu-border: */ @Component({ selector: 'nb-user', @@ -133,12 +97,6 @@ export class NbUserComponent { */ @Input() color: string; - /** - * List of menu items for a user context menu (shown when clicked) - * @type NbUserMenuItem[] - */ - @Input() menu: NbUserMenuItem[] = []; - /** * Size of the component, small|medium|large * @type string @@ -214,40 +172,13 @@ export class NbUserComponent { */ @Input() badgePosition: string; - /** - * Outputs when a context menu item is clicked - * @type EventEmitter - */ - @Output() menuClick = new EventEmitter(); - imageBackgroundStyle: SafeStyle; showNameValue: boolean = true; showTitleValue: boolean = true; showInitialsValue: boolean = true; isMenuShown: boolean = false; - constructor( - private el: ElementRef, - private domSanitizer: DomSanitizer) { } - - itemClick(event: any, item: NbUserMenuItem): boolean { - this.menuClick.emit(item); - return false; - } - - /** - * Toggles a context menu - */ - toggleMenu() { - this.isMenuShown = !this.isMenuShown; - } - - @HostListener('document:click', ['$event']) - hideMenu(event: any) { - if (!this.el.nativeElement.contains(event.target)) { - this.isMenuShown = false; - } - } + constructor(private domSanitizer: DomSanitizer) { } getInitials(): string { if (this.name) { @@ -258,9 +189,4 @@ export class NbUserComponent { return ''; } - - hasMenu(): boolean { - return this.menu && this.menu.length > 0; - } - } diff --git a/src/framework/theme/styles/themes/_cosmic.scss b/src/framework/theme/styles/themes/_cosmic.scss index 31611eb81a..94f1a0f242 100644 --- a/src/framework/theme/styles/themes/_cosmic.scss +++ b/src/framework/theme/styles/themes/_cosmic.scss @@ -61,8 +61,6 @@ $theme: ( user-fg: color-bg, user-bg: color-fg, user-fg-highlight: color-fg-highlight, - user-menu-active-bg: color-primary, - user-menu-border: color-primary, popover-border: color-primary, popover-shadow: shadow, diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 02b4cadb3a..4d48886709 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -226,11 +226,6 @@ $theme: ( user-size-medium: 2.5rem, user-size-large: 3.25rem, user-size-xlarge: 4rem, - user-menu-fg: color-fg-heading, - user-menu-bg: color-bg, - user-menu-active-fg: #ffffff, - user-menu-active-bg: color-success, - user-menu-border: color-success, popover-fg: color-fg-heading, popover-bg: color-bg,