secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Submenu takes over context menu

Browse Source
This commit is contained in:
James Barnsley
2017-03-01 08:28:10 +13:00
parent 51514d69d9
commit 6bf76be853
2 changed files with 41 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/js/components/ContextMenu.js
View File

@ -151,6 +151,15 @@ class ContextMenu extends React.Component{
return (
<div className="submenu">
<span className="menu-item-wrapper">
<a className="menu-item close-submenu" onClick={e => this.setState({submenu_expanded: false})}>
<span className="label">
<FontAwesome name='close' />
&nbsp;
Cancel
</span>
</a>
</span>
{
playlists.map( playlist => {
return (
@ -294,7 +303,7 @@ class ContextMenu extends React.Component{
<span key={item.handleClick} className="menu-item-wrapper has-submenu">
<a className="menu-item" onClick={e => this[item.handleClick](e)}>
<span className="label">{ item.label }</span>
<FontAwesome className="submenu-icon" name={this.state.submenu_expanded ? 'caret-up' : 'caret-right'} />
<FontAwesome className="submenu-icon" name='caret-right' />
</a>
{this.state.submenu_expanded ? this.renderPlaylistSubmenu() : null}
</span>
@ -326,7 +335,8 @@ class ContextMenu extends React.Component{
var height = 0
if (items) height = items.length * 34 // this is an approximation of how tall each menu item is
var className = "context-menu"
var className = "context-menu "+this.props.menu.context
if (this.state.submenu_expanded) className += ' submenu-expanded'
if (this.props.menu.position_x > (window.innerWidth - 154)) className += ' right-align'
if (this.props.menu.position_x > (window.innerWidth - 308)) className += ' right-align-submenu'
if (this.props.menu.position_y > (window.innerHeight - height)){

64
src/scss/components/_context-menu.scss
View File

@ -8,14 +8,15 @@
.liner {
background: $dark_grey;
color: #FFFFFF;
width: 160px;
&.right-align {
margin-left: -140px;
margin-left: -160px;
}
&.right-align-submenu .submenu {
left: auto !important;
right: 140px !important;
right: 160px !important;
}
&.bottom-align-submenu .submenu {
@ -26,7 +27,6 @@
.title {
display: block;
padding: 8px 12px;
width: 140px;
font-weight: bold;
box-sizing: border-box;
position: relative;
@ -72,14 +72,16 @@
.menu-item-wrapper {
display: block;
position: relative;
.menu-item {
cursor: pointer;
display: block;
padding: 8px 12px;
width: 140px;
box-sizing: border-box;
box-sizing: border-box;
.notouch &:hover {
background: lighten($dark_grey, 5%);
}
}
.icon {
@ -93,18 +95,27 @@
}
.submenu {
display: none;
position: absolute;
left: 140px;
top: 0;
max-height: 200px;
right: 0;
bottom: 0;
left: 0;
min-height: 200px;
overflow-y: scroll;
background: lighten($dark_grey, 5%);
background: lighten($dark_grey, 10%);
z-index: 3;
.menu-item {
width: 140px;
width: 100%;
&.close-submenu {
background: $dark_grey;
border-top: 0;
color: $mid_grey;
}
.notouch &:hover {
background: lighten($dark_grey, 10%);
background: lighten($dark_grey, 15%);
}
}
}
@ -112,14 +123,13 @@
.menu-item {
border-top: 1px solid lighten($dark_grey, 8%);
}
}
}
&:hover {
.menu-item {
background: lighten($dark_grey, 5%);
}
.submenu {
display: block;
}
@include responsive( null, $bp_medium ){
.liner {
.title {
display: none;
}
}
}
@ -151,30 +161,14 @@
.title {
padding: 16px 20px;
width: 100%;
box-sizing: border-box;
}
.menu-item-wrapper {
.menu-item {
padding: 16px 20px;
width: 100%;
box-sizing: border-box;
}
.submenu {
display: block;
position: relative;
width: 100%;
top: auto;
right: auto;
bottom: auto;
left: auto;
.menu-item {
width: 100%;
}
}
}
}
}