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

* [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

View File

@@ -9,7 +9,7 @@
</div>
<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>
</div>
</mat-menu>

View File

@@ -4,11 +4,11 @@
$foreground: map-get($theme, foreground);
$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-opacity: 0.54;
$adf-sidebar-action-menu-item-opacity: 0.87;
$adf-sidebar-action-menu-item-line-spacing: -0.4px;
$adf-sidebar-action-menu-item-font-size: 14px;
.adf {
&-sidebar-action-menu {
@@ -45,6 +45,7 @@
text-align: left;
letter-spacing: $adf-sidebar-action-menu-item-line-spacing;
.mat-menu-item {
font-size: $adf-sidebar-action-menu-item-font-size;
color: mat-color($foreground, text, $adf-sidebar-action-menu-item-opacity);
text-align: left;
line-height: 1.5;
@@ -59,7 +60,6 @@
margin-top: 7.5px;
border-radius: 2px;
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;
}
}
}

View File

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