mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
ACS-8256: Move "menu buttons" to Insights where it belongs (#9849)
This commit is contained in:
Denys Vuika
GitHub
parent
80ff96a317
commit
5fa3afe3a5
@ -87,7 +87,6 @@ for more information about installing and using the source code.
|
||||
| [About GitHub Link Component](core/components/about-github-link.component.md)  | Shows which version of the application is running based on the latest GitHub commit, as well as the server settings for the application. | [Source](../lib/core/src/lib/about/about-github-link/about-github-link.component.ts) |
|
||||
| [About Product Version Component](core/components/about-product-version.component.md)  | Shows which version of Process Services (BPM) and Content Services (ECM) an application is running. It also shows the relevant license information, application status and Alfresco modules running in an application. | [Source](../lib/core/src/lib/about/about-product-version/about-product-version.component.ts) |
|
||||
| [About Component](core/components/about.component.md) | Presentational component to display About information as a set of collapsible panels. | [Source](../lib/core/src/lib/about/about.component.ts) |
|
||||
| [Buttons Menu Component](core/components/buttons-menu.component.md) | Displays buttons on a responsive menu. | [Source](../lib/core/src/lib/buttons-menu/buttons-menu.component.ts) |
|
||||
| [Card View component](core/components/card-view.component.md) | Displays a configurable property list renderer. | [Source](../lib/core/src/lib/card-view/components/card-view/card-view.component.ts) |
|
||||
| [Comment list component](core/components/comment-list.component.md) | Shows a list of comments. | [Source](../lib/core/src/lib/comments/comment-list/comment-list.component.ts) |
|
||||
| [Comments Component](core/components/comments.component.md) | Displays comments from users involved in a specified environment and allows an involved user to add a comment to a environment. | [Source](../lib/core/src/lib/comments/comments.component.ts) |
|
||||
|
||||
@ -1,119 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { CoreStoryModule } from '../testing/core.story.module';
|
||||
import { ButtonsMenuComponent } from './buttons-menu.component';
|
||||
import { ButtonsMenuModule } from './buttons-menu.module';
|
||||
|
||||
export default {
|
||||
component: ButtonsMenuComponent,
|
||||
title: 'Core/Buttons Menu/Buttons Menu',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CoreStoryModule, ButtonsMenuModule]
|
||||
})
|
||||
],
|
||||
argTypes: {
|
||||
mobile: {
|
||||
type: { name: 'boolean' },
|
||||
name: 'isMobile',
|
||||
description:
|
||||
'Determines whether it is displayed on a mobile device',
|
||||
defaultValue: true,
|
||||
control: {
|
||||
disable: false
|
||||
},
|
||||
table: {
|
||||
category: 'Component methods',
|
||||
type: {
|
||||
summary: '() => boolean'
|
||||
}
|
||||
}
|
||||
},
|
||||
isMenuEmpty: {
|
||||
description: 'Determines whether it has anything to display',
|
||||
table: {
|
||||
category: 'Component properties',
|
||||
type: {
|
||||
summary: 'boolean'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
export const sixButtons: Story = args => ({
|
||||
props: {
|
||||
...args,
|
||||
isMenuEmpty: false,
|
||||
isMobile() {
|
||||
return args.mobile;
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<adf-buttons-action-menu>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>settings</mat-icon><span> Settings </span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>home</mat-icon><span> Home </span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>search</mat-icon><span> Search </span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>done</mat-icon><span> Done </span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>delete</mat-icon><span> Delete </span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>block</mat-icon><span> Block </span>
|
||||
</button>
|
||||
</adf-buttons-action-menu>
|
||||
`
|
||||
});
|
||||
|
||||
export const oneButton: Story = args => ({
|
||||
props: {
|
||||
...args,
|
||||
isMenuEmpty: false,
|
||||
isMobile() {
|
||||
return args.mobile;
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<adf-buttons-action-menu>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>settings</mat-icon><span> Settings </span>
|
||||
</button>
|
||||
</adf-buttons-action-menu>
|
||||
`
|
||||
});
|
||||
|
||||
export const noButtons: Story = args => ({
|
||||
props: {
|
||||
...args,
|
||||
isMenuEmpty: true,
|
||||
isMobile() {
|
||||
return args.mobile;
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<adf-buttons-action-menu></adf-buttons-action-menu>`
|
||||
});
|
||||
@ -1,36 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { ButtonsMenuComponent } from './buttons-menu.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatIconModule,
|
||||
MatMenuModule,
|
||||
TranslateModule
|
||||
],
|
||||
declarations: [ButtonsMenuComponent],
|
||||
exports: [ButtonsMenuComponent, MatIconModule, MatMenuModule, MatButtonModule]
|
||||
})
|
||||
export class ButtonsMenuModule {}
|
||||
@ -1,18 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export * from './public-api';
|
||||
@ -1,19 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export * from './buttons-menu.component';
|
||||
export * from './buttons-menu.module';
|
||||
@ -35,7 +35,6 @@ import { FormBaseModule } from './form/form-base.module';
|
||||
import { SidenavLayoutModule } from './layout/layout.module';
|
||||
import { CommentsModule } from './comments/comments.module';
|
||||
import { CommentListModule } from './comments/comment-list/comment-list.module';
|
||||
import { ButtonsMenuModule } from './buttons-menu/buttons-menu.module';
|
||||
import { TemplateModule } from './templates/template.module';
|
||||
import { ClipboardModule } from './clipboard/clipboard.module';
|
||||
import { NotificationHistoryModule } from './notifications/notification-history.module';
|
||||
@ -95,7 +94,6 @@ import { DynamicChipListModule } from './dynamic-chip-list';
|
||||
LanguageMenuModule,
|
||||
InfoDrawerModule,
|
||||
DataTableModule,
|
||||
ButtonsMenuModule,
|
||||
TemplateModule,
|
||||
IconModule,
|
||||
SortingPickerModule,
|
||||
@ -135,7 +133,6 @@ import { DynamicChipListModule } from './dynamic-chip-list';
|
||||
InfoDrawerModule,
|
||||
DataTableModule,
|
||||
TranslateModule,
|
||||
ButtonsMenuModule,
|
||||
TemplateModule,
|
||||
SortingPickerModule,
|
||||
IconModule,
|
||||
|
||||
@ -32,7 +32,6 @@ export * from './lib/app-config/index';
|
||||
export * from './lib/form/index';
|
||||
export * from './lib/layout/index';
|
||||
export * from './lib/comments/index';
|
||||
export * from './lib/buttons-menu/index';
|
||||
export * from './lib/sorting-picker/index';
|
||||
export * from './lib/templates/index';
|
||||
export * from './lib/pipes/index';
|
||||
|
||||
@ -7,6 +7,10 @@
|
||||
"extends": [
|
||||
"plugin:@nrwl/nx/angular"
|
||||
],
|
||||
"parserOptions": {
|
||||
"project": ["lib/insights/tsconfig.lib.json", "lib/insights/tsconfig.spec.json"],
|
||||
"createDefaultProgram": true
|
||||
},
|
||||
"rules": {
|
||||
"no-underscore-dangle": ["error", { "allowAfterThis": true }],
|
||||
"@angular-eslint/no-output-native": "off",
|
||||
@ -74,6 +78,10 @@
|
||||
{
|
||||
"files": ["*.html"],
|
||||
"extends": ["plugin:@nrwl/nx/angular-template"],
|
||||
"parserOptions": {
|
||||
"project": ["lib/insights/tsconfig.lib.json", "lib/insights/tsconfig.spec.json"],
|
||||
"createDefaultProgram": true
|
||||
},
|
||||
"rules": {
|
||||
"@angular-eslint/template/no-autofocus": "error",
|
||||
"@angular-eslint/template/no-positive-tabindex": "error"
|
||||
|
||||
@ -2,19 +2,17 @@
|
||||
Title: Buttons Menu Component
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-06-08
|
||||
Last reviewed: 2024-06-21
|
||||
---
|
||||
|
||||
# [Buttons Menu Component](../../../lib/core/src/lib/buttons-menu/buttons-menu.component.ts "Defined in buttons-menu.component.ts")
|
||||
# Buttons Menu Component
|
||||
|
||||
Displays buttons on a responsive menu.
|
||||
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
### [Transclusions](../../user-guide/transclusion.md)
|
||||
|
||||
Place the buttons for the menu inside this component's HTML tags.
|
||||
They must use the following structure:
|
||||
|
||||
@ -42,16 +40,16 @@ They also make use of the Angular material directive `mat-menu-item`.
|
||||
|
||||
## Details
|
||||
|
||||
This component is fully responsive and it will display one of two different layouts
|
||||
This component is fully responsive, and it will display one of two different layouts
|
||||
depending on the screen size:
|
||||
|
||||
**Desktop View**
|
||||
|
||||
|
||||
|
||||
|
||||
**Mobile View**
|
||||
|
||||
|
||||
|
||||
|
||||
The component has a property called `isMenuEmpty` that you can access from code. If this is
|
||||
set to true then the component will not show an empty menu with no buttons defined.
|
||||
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 8.8 KiB After Width: | Height: | Size: 8.8 KiB |
@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { AdfDateFnsAdapter, ButtonsMenuModule, DownloadService, ToolbarComponent, ToolbarTitleComponent } from '@alfresco/adf-core';
|
||||
import { AdfDateFnsAdapter, DownloadService, ToolbarComponent, ToolbarTitleComponent } from '@alfresco/adf-core';
|
||||
import {
|
||||
AfterContentChecked,
|
||||
Component,
|
||||
@ -45,6 +45,7 @@ import { MatInputModule } from '@angular/material/input';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { WIDGET_DIRECTIVES } from './widgets';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { ButtonsMenuComponent } from './buttons-menu/buttons-menu.component';
|
||||
|
||||
const FORMAT_DATE_ACTIVITI = 'YYYY-MM-DD';
|
||||
|
||||
@ -113,15 +114,15 @@ export interface ReportFormValues {
|
||||
MatIconModule,
|
||||
ReactiveFormsModule,
|
||||
ToolbarComponent,
|
||||
ToolbarTitleComponent,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatMenuModule,
|
||||
ToolbarTitleComponent,
|
||||
...WIDGET_DIRECTIVES,
|
||||
MatDialogModule,
|
||||
FormsModule,
|
||||
MatButtonModule,
|
||||
ButtonsMenuModule
|
||||
ButtonsMenuComponent
|
||||
],
|
||||
templateUrl: './analytics-report-parameters.component.html',
|
||||
styleUrls: ['./analytics-report-parameters.component.scss'],
|
||||
|
||||
@ -21,7 +21,8 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
button > mat-icon.mat-icon.material-icons {
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
button > .mat-icon {
|
||||
color: black;
|
||||
margin: 0 10px;
|
||||
}
|
||||
@ -16,15 +16,19 @@
|
||||
*/
|
||||
|
||||
import { TestBed, ComponentFixture } from '@angular/core/testing';
|
||||
import { MaterialModule } from '../material.module';
|
||||
import { CoreTestingModule } from '../testing/core.testing.module';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
import { ButtonsMenuComponent } from '@alfresco/adf-insights';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-custom-container',
|
||||
standalone: true,
|
||||
imports: [CommonModule, ButtonsMenuComponent, MatMenuModule, MatIconModule],
|
||||
template: `
|
||||
<adf-buttons-action-menu>
|
||||
<button mat-menu-item (click)="assignValue()"><mat-icon>settings</mat-icon><span> Button </span></button>
|
||||
<button mat-menu-item (click)="assignValue()"><mat-icon>settings</mat-icon><span>Button</span></button>
|
||||
</adf-buttons-action-menu>
|
||||
`
|
||||
})
|
||||
@ -50,9 +54,7 @@ describe('ButtonsMenuComponent', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [CoreTestingModule, MaterialModule],
|
||||
declarations: [CustomContainerComponent],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
imports: [ButtonsMenuComponent, CustomContainerComponent]
|
||||
});
|
||||
fixture = TestBed.createComponent(CustomContainerComponent);
|
||||
element = fixture.debugElement.nativeElement;
|
||||
@ -93,9 +95,8 @@ describe('ButtonsMenuComponent', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [CoreTestingModule, MaterialModule],
|
||||
declarations: [CustomEmptyContainerComponent],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
imports: [ButtonsMenuComponent],
|
||||
declarations: [CustomEmptyContainerComponent]
|
||||
});
|
||||
fixture = TestBed.createComponent(CustomEmptyContainerComponent);
|
||||
element = fixture.nativeElement;
|
||||
@ -16,17 +16,20 @@
|
||||
*/
|
||||
|
||||
import { Component, ContentChildren, QueryList, AfterContentInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MatMenuItem } from '@angular/material/menu';
|
||||
import { MatMenuItem, MatMenuModule } from '@angular/material/menu';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-buttons-action-menu',
|
||||
standalone: true,
|
||||
imports: [CommonModule, MatButtonModule, MatMenuModule, MatIconModule],
|
||||
templateUrl: './buttons-menu.component.html',
|
||||
styleUrls: ['./buttons-menu.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
export class ButtonsMenuComponent implements AfterContentInit {
|
||||
|
||||
export class ButtonsMenuComponent implements AfterContentInit {
|
||||
@ContentChildren(MatMenuItem) buttons: QueryList<MatMenuItem>;
|
||||
|
||||
isMenuEmpty: boolean;
|
||||
@ -21,6 +21,7 @@ import { AnalyticsReportListComponent } from './components/analytics-report-list
|
||||
import { AnalyticsReportParametersComponent } from './components/analytics-report-parameters.component';
|
||||
import { AnalyticsGeneratorComponent } from './components/analytics-generator.component';
|
||||
import { AnalyticsReportHeatMapComponent } from './components/analytics-report-heat-map.component';
|
||||
import { ButtonsMenuComponent } from './components/buttons-menu/buttons-menu.component';
|
||||
|
||||
export * from './components/analytics.component';
|
||||
export * from './components/analytics-report-heat-map.component';
|
||||
@ -28,12 +29,14 @@ export * from './components/analytics-generator.component';
|
||||
export * from './components/analytics-report-list.component';
|
||||
export * from './components/analytics-report-parameters.component';
|
||||
export * from './components/analytics.component';
|
||||
export * from './components/buttons-menu/buttons-menu.component';
|
||||
|
||||
export * from './services/analytics.service';
|
||||
export * from './components/widgets';
|
||||
|
||||
export const ANALYTICS_PROCESS_DIRECTIVES = [
|
||||
...WIDGET_DIRECTIVES,
|
||||
ButtonsMenuComponent,
|
||||
AnalyticsComponent,
|
||||
AnalyticsReportListComponent,
|
||||
AnalyticsReportParametersComponent,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user