inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2888] UX doesn't respect the Sidenav specifiactions (#3303)

Browse Source 
* [ADF-2771] Sidebar action menu component - UX review

* Add a input property to set the width of sidebar-action-menu.

* [ADF-2888]  UX doesn't respect the Sidenav specifiactions

* Add a input property to set the width of sidebar-action-menu.
This commit is contained in:
camorra-skk
2018-05-14 14:30:05 +05:30
committed by Maurizio Vitale
parent 2b9eec4af7
commit 84a9837789
5 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo-shell/src/app/components/process-service/process-service.component.html
View File

@@ -4,7 +4,7 @@
<div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch"> <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="adf-grid-item adf-tasks-menu" fxFlex.gt-md="225px"> <div class="adf-grid-item adf-tasks-menu" fxFlex.gt-md="225px">
<div class="adf-list-buttons"> <div class="adf-list-buttons">
<adf-sidebar-action-menu [expanded]="true" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}"> <adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
<mat-icon sidebar-menu-title-icon >arrow_drop_down</mat-icon> <mat-icon sidebar-menu-title-icon >arrow_drop_down</mat-icon>
<div sidebar-menu-options> <div sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-task" (click)="navigateStartTask()"> <button mat-menu-item data-automation-id="btn-start-task" (click)="navigateStartTask()">

1
docs/core/sidebar-action-menu.component.md
View File

@@ -34,6 +34,7 @@ Displays a sidebar-action menu information panel.
| ---- | ---- | ------------- | ----------- | | ---- | ---- | ------------- | ----------- |
| title | `string` | | The title of the sidebar action. | | title | `string` | | The title of the sidebar action. |
| expanded | `boolean` | | Toggle the sidebar action menu on expand. | | expanded | `boolean` | | Toggle the sidebar action menu on expand. |
| width | `number` | 272 | Width in pixels for sidebar action menu options |
## Details ## Details

2
lib/core/sidebar/sidebar-action-menu.component.html
View File

@@ -9,7 +9,7 @@
</div> </div>
<mat-menu #adfSidebarMenu="matMenu" class="adf-sidebar-action-menu-panel" [overlapTrigger]="false" yPosition="below"> <mat-menu #adfSidebarMenu="matMenu" class="adf-sidebar-action-menu-panel" [overlapTrigger]="false" yPosition="below">
<div class="adf-sidebar-action-menu-options"> <div class="adf-sidebar-action-menu-options" [style.width.px]="width">
<ng-content select="[sidebar-menu-options]"></ng-content> <ng-content select="[sidebar-menu-options]"></ng-content>
</div> </div>
</mat-menu> </mat-menu>

4
lib/core/sidebar/sidebar-action-menu.component.scss
View File

@@ -4,11 +4,11 @@
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$adf-sidebar-action-menu-button-height: 37.5px; $adf-sidebar-action-menu-button-height: 37.5px;
$adf-sidebar-action-menu-panel-width: 202px;
$adf-sidebar-action-menu-button-border-radius: 4px; $adf-sidebar-action-menu-button-border-radius: 4px;
$adf-sidebar-action-menu-opacity: 0.54; $adf-sidebar-action-menu-opacity: 0.54;
$adf-sidebar-action-menu-item-opacity: 0.87; $adf-sidebar-action-menu-item-opacity: 0.87;
$adf-sidebar-action-menu-item-line-spacing: -0.4px; $adf-sidebar-action-menu-item-line-spacing: -0.4px;
$adf-sidebar-action-menu-item-font-size: 14px;
.adf { .adf {
&-sidebar-action-menu { &-sidebar-action-menu {
@@ -45,6 +45,7 @@
text-align: left; text-align: left;
letter-spacing: $adf-sidebar-action-menu-item-line-spacing; letter-spacing: $adf-sidebar-action-menu-item-line-spacing;
.mat-menu-item { .mat-menu-item {
font-size: $adf-sidebar-action-menu-item-font-size;
color: mat-color($foreground, text, $adf-sidebar-action-menu-item-opacity); color: mat-color($foreground, text, $adf-sidebar-action-menu-item-opacity);
text-align: left; text-align: left;
line-height: 1.5; line-height: 1.5;
@@ -59,7 +60,6 @@
margin-top: 7.5px; margin-top: 7.5px;
border-radius: 2px; border-radius: 2px;
box-shadow: #{map-get($_umbra-elevation-map, 2)}, #{map-get($_penumbra-elevation-map, 2)},#{map-get($_ambient-elevation-map, 2)}; box-shadow: #{map-get($_umbra-elevation-map, 2)}, #{map-get($_penumbra-elevation-map, 2)},#{map-get($_ambient-elevation-map, 2)};
min-width: $adf-sidebar-action-menu-panel-width !important;
} }
} }
} }

3
lib/core/sidebar/sidebar-action-menu.component.ts
View File

@@ -36,6 +36,9 @@ export class SidebarActionMenuComponent {
@Input() @Input()
expanded: boolean; expanded: boolean;
@Input()
width: number = 272;
isExpanded(): boolean { isExpanded(): boolean {
return this.expanded; return this.expanded;
} }