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

No more context menu dot, every track has one; Fixes #226, Fixes #213

Browse Source
This commit is contained in:
James Barnsley
2017-11-17 22:19:35 +13:00
parent 8836b01ccc
commit 7ec5a858f8
4 changed files with 42 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/js/components/Track.js
View File

@ -226,6 +226,15 @@ export default class Track extends React.Component{
)
}
track_columns.push(
<span
className="context-zone"
key="context-zone"
onClick={e => this.handleContextMenu(e)}>
<FontAwesome name="ellipsis-h" fixedWidth />
</span>
)
if (this.props.mini_zones){
// Select zone handles selection events only

1
src/js/components/TrackList.js
View File

@ -435,7 +435,6 @@ class TrackList extends React.Component{
}
)
}
{this.props.selected_tracks.length > 0 ? <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e, false)} /> : null}
</div>
);
}

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

@ -318,53 +318,4 @@
opacity: 0.15;
}
}
}
#app > .notouch .list.track-list {
.context-menu-trigger {
display: none;
}
}
.list {
&.track-list {
.context-menu-trigger {
@include gradient_overlay(50%, 0.15);
display: block;
position: fixed;
bottom: 55px;
right: 5px;
width: 48px;
height: 8px;
padding: 20px 0;
overflow: hidden;
z-index: 97;
background: $blue;
.dot {
background: $white;
}
&:focus,
&:active {
background: darken($blue, 10%);
}
}
@include responsive($bp_medium){
.context-menu-trigger {
bottom: 8px;
right: 43px;
width: 32px;
height: 8px;
padding: 12px 0;
z-index: 102;
.dot {
width: 5px;
height: 5px;
}
}
}
}
}

51
src/scss/components/_lists.scss
View File

@ -89,8 +89,19 @@
.source {
color: $mid_grey;
position: absolute;
top: 14px;
right: 12px;
top: 16px;
right: 32px;
}
.context-zone {
position: absolute;
top: 12px;
right: 4px;
padding: 4px;
.fa {
font-size: 16px;
}
}
}
}
@ -213,11 +224,11 @@
.list-item {
&.can-sort {
padding-left: 78px !important;
padding-left: 70px !important;
}
&:not(.can-sort){
padding-left: 46px !important;
padding-left: 42px !important;
}
.select-zone {
@ -225,14 +236,14 @@
top: 0;
left: 0;
height: 100%;
width: 38px;
width: 34px;
font-size: 8px;
display: block;
.fa {
position: absolute;
top: 27px;
left: 19px;
left: 17px;
pointer-events: none;
color: $white;
z-index: 1;
@ -247,16 +258,16 @@
height: 14px;
position: absolute;
top: 23px;
left: 16px;
left: 14px;
}
}
.drag-zone {
position: absolute;
top: 0;
left: 38px;
left: 34px;
height: 100%;
width: 38px;
width: 34px;
font-size: 14px;
display: block;
color: $mid_grey;
@ -264,7 +275,7 @@
.fa {
position: absolute;
top: 24px;
left: 8px;
left: 6px;
pointer-events: none;
}
}
@ -286,14 +297,14 @@
top: 0;
left: 0;
height: 100%;
width: 38px;
width: 34px;
font-size: 8px;
display: block;
.fa {
position: absolute;
top: 27px;
left: 19px;
left: 17px;
pointer-events: none;
color: $white;
z-index: 1;
@ -308,16 +319,16 @@
height: 14px;
position: absolute;
top: 16px;
left: 16px;
left: 14px;
}
}
.drag-zone {
position: absolute;
top: 0;
left: 38px;
left: 34px;
height: 100%;
width: 38px;
width: 34px;
font-size: 14px;
display: block;
color: $mid_grey;
@ -325,11 +336,15 @@
.fa {
position: absolute;
top: 24px;
left: 8px;
left: 6px;
pointer-events: none;
}
}
.context-zone {
top: 14px;
}
.col {
&.name {
width: auto !important;
@ -404,10 +419,10 @@
&.track-list {
.list-item.can-sort {
padding-left: 78px !important;
padding-left: 70px !important;
}
.list-item:not(.can-sort){
padding-left: 46px !important;
padding-left: 42px !important;
}
}
}