diff --git a/src/js/components/Track.js b/src/js/components/Track.js index b9367e7f3..60b87e817 100755 --- a/src/js/components/Track.js +++ b/src/js/components/Track.js @@ -226,6 +226,15 @@ export default class Track extends React.Component{ ) } + track_columns.push( + this.handleContextMenu(e)}> + + + ) + if (this.props.mini_zones){ // Select zone handles selection events only diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js index ca1d95676..07998c2ac 100755 --- a/src/js/components/TrackList.js +++ b/src/js/components/TrackList.js @@ -435,7 +435,6 @@ class TrackList extends React.Component{ } ) } - {this.props.selected_tracks.length > 0 ? this.handleContextMenu(e, false)} /> : null} ); } diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss index 452e41915..62890853f 100755 --- a/src/scss/components/_context-menu.scss +++ b/src/scss/components/_context-menu.scss @@ -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; - } - } - } - } } \ No newline at end of file diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss index bbbbf000b..f62854e2b 100755 --- a/src/scss/components/_lists.scss +++ b/src/scss/components/_lists.scss @@ -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; } } }