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

List columns and actions separated

Browse Source
This commit is contained in:
James Barnsley
2017-11-20 15:49:52 +13:00
parent 7f851b3546
commit 7c9e2a5eba
6 changed files with 66 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,20 +22,17 @@ class ContextMenu extends React.Component{
submenu_expanded: false
}
this.handleScroll = this.handleScroll.bind(this);
this.handleMouseUp = this.handleMouseUp.bind(this);
this.handleTouchEnd = this.handleTouchEnd.bind(this);
this.handleMouseDown = this.handleMouseDown.bind(this);
}
componentDidMount(){
window.addEventListener("scroll", this.handleScroll, false);
window.addEventListener("mouseup", this.handleMouseUp, false);
window.addEventListener("touchend", this.handleTouchEnd, false);
window.addEventListener("mousedown", this.handleMouseDown, false);
}
componentWillUnmount(){
window.removeEventListener("scroll", this.handleScroll, false);
window.removeEventListener("mouseup", this.handleMouseUp, false);
window.removeEventListener("touchend", this.handleTouchEnd, false);
window.removeEventListener("mousedown", this.handleMouseDown, false);
}
componentWillReceiveProps(nextProps){
@ -77,17 +74,7 @@ class ContextMenu extends React.Component{
}
}
handleTouchEnd(e){
console.log('ContextMenu > handleTouchEnd');
this.handleClick(e);
}
handleMouseUp(e){
console.log('ContextMenu > handleMouseUp');
this.handleClick(e);
}
handleClick(e){
handleMouseDown(e){
// if we click (touch or mouse) outside of the context menu or context menu trigger, kill it
if ($(e.target).closest('.context-menu').length <= 0 && $(e.target).closest('.context-menu-trigger').length <= 0){
this.props.uiActions.hideContextMenu()

11
src/js/components/ContextMenuTrigger.js
View File

@ -8,11 +8,15 @@ export default class ContextMenuTrigger extends React.Component{
super(props);
}
handleMouseUp(e){
handleMouseDown(e){
e.preventDefault();
e.stopPropagation();
this.props.onTrigger(e);
}
handleTouchEnd(e){
handleClick(e){
e.preventDefault();
e.stopPropagation();
this.props.onTrigger(e);
}
@ -23,8 +27,7 @@ export default class ContextMenuTrigger extends React.Component{
}
return (
<span className={className}
onMouseUp={e => this.handleMouseUp(e)}
onTouchEnd={e => this.handleTouchEnd(e)}>
onClick={e => this.handleClick(e)}>
<span className="dot"></span>
<span className="dot"></span>
<span className="dot"></span>

31
src/js/components/List.js
View File

@ -89,21 +89,22 @@ class List extends React.Component{
if (row.type ) class_name += ' '+row.type
return (
<div
onClick={e => this.handleClick(e, row.uri)}
onContextMenu={e => this.handleContextMenu(e,row)}
className={class_name}
key={row_index}>
{
this.props.columns.map((col, col_index) => {
var className = 'col '+col.name.replace('.','_')
return (
<div className={className} key={col_index}>
{ this.renderValue(row, col.name) }
</div>
)
})
}
<div className={class_name} key={row_index}>
<div
class="liner"
onClick={e => this.handleClick(e, row.uri)}
onContextMenu={e => this.handleContextMenu(e,row)}>
{
this.props.columns.map((col, col_index) => {
var className = 'col '+col.name.replace('.','_')
return (
<div className={className} key={col_index}>
{ this.renderValue(row, col.name) }
</div>
)
})
}
</div>
{this.props.nocontext ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e, row)} />}
</div>
)

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

@ -100,7 +100,6 @@ export default class Track extends React.Component{
}
handleContextMenu(e){
console.log('handle');
e.preventDefault();
e.stopPropagation();
e.cancelBubble = true;
@ -108,27 +107,29 @@ export default class Track extends React.Component{
}
render(){
if (!this.props.track ) return null
if (!this.props.track){
return null;
}
var track = this.props.track
var className = 'list-item track'
if (this.props.selected) className += ' selected'
if (this.props.selected) className += ' selected'
if (this.props.can_sort) className += ' can-sort'
if (track.type !== undefined) className += ' '+track.type
if (track.playing) className += ' playing'
if (this.state.hover) className += ' hover'
var track = this.props.track;
var className = 'list-item track';
if (this.props.selected) className += ' selected';
if (this.props.can_sort) className += ' can-sort';
if (track.type !== undefined) className += ' '+track.type;
if (track.playing) className += ' playing';
if (this.state.hover) className += ' hover';
var album = '-'
var album = '-';
if (track.album){
if (track.album.uri){
album = <URILink type="album" uri={track.album.uri}>{track.album.name}</URILink>
album = <URILink type="album" uri={track.album.uri}>{track.album.name}</URILink>;
} else {
album = <span>{track.album.name}</span>
album = <span>{track.album.name}</span>;
}
}
let track_columns = []
let track_columns = [];
let track_actions = [];
if (track.type == 'history'){
@ -228,7 +229,7 @@ export default class Track extends React.Component{
)
}
track_columns.push(
track_actions.push(
<ContextMenuTrigger key="context" onTrigger={e => this.handleContextMenu(e)} />
)
@ -236,7 +237,7 @@ export default class Track extends React.Component{
// Select zone handles selection events only
// We use onClick to capture touch as well as mouse events in one tidy parcel
track_columns.push(
track_actions.push(
<span
className="select-zone"
key="select-zone"
@ -246,7 +247,7 @@ export default class Track extends React.Component{
)
if (this.props.can_sort){
track_columns.push(
track_actions.push(
<span
className="drag-zone"
key="drag-zone"
@ -260,22 +261,25 @@ export default class Track extends React.Component{
// the appropriate select/drag zone sub-elements
return (
<div className={className}>
{ track_columns }
{track_actions}
{track_columns}
</div>
)
} else {
return (
<div
className={className}
onMouseEnter={e => this.setState({hover: true})}
onMouseLeave={e => this.setState({hover: false})}
//onTouchEnd={e => this.handleTouchEnd(e)} // When touch dragging is dropped on me
onMouseDown={e => this.handleMouseDown(e)} // Click (or potentially a mouse drag start)
onMouseMove={e => this.handleMouseMove(e)} // Any movement over me
onMouseUp={e => this.handleMouseUp(e)} // End of click, or potentially a dragging drop event
onDoubleClick={e => this.props.handleDoubleClick(e)}
onContextMenu={e => {this.handleContextMenu(e)}}>
{track_columns}
<div className={className}>
{track_actions}
<div className="liner"
onMouseEnter={e => this.setState({hover: true})}
onMouseLeave={e => this.setState({hover: false})}
//onTouchEnd={e => this.handleTouchEnd(e)} // When touch dragging is dropped on me
onMouseDown={e => this.handleMouseDown(e)} // Click (or potentially a mouse drag start)
onMouseMove={e => this.handleMouseMove(e)} // Any movement over me
onMouseUp={e => this.handleMouseUp(e)} // End of click, or potentially a dragging drop event
onDoubleClick={e => this.props.handleDoubleClick(e)}
onContextMenu={e => {this.handleContextMenu(e)}}>
{track_columns}
</div>
</div>
)
}

5
src/js/services/ui/actions.js
View File

@ -12,8 +12,9 @@ export function setSelectedTracks(keys = []){
}
export function showContextMenu(data){
data.position_x = data.e.clientX
data.position_y = data.e.clientY
data.position_x = data.e.clientX;
data.position_y = data.e.clientY;
console.log(data);
return {
type: 'SHOW_CONTEXT_MENU',
data: data

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

@ -21,7 +21,7 @@
font-family: "Overpass";
.title {
display: block;
display: none;
padding: 10px 14px;
font-weight: bold;
box-sizing: border-box;
@ -221,14 +221,6 @@
}
}
@include responsive(null, $bp_medium){
.liner {
.title {
display: none;
}
}
}
@include responsive($bp_medium){
top: 0 !important;
right: 0 !important;
@ -255,7 +247,8 @@
z-index: 2;
border-radius: 3px;
.title {
.title {
display: block;
padding: 14px 18px;
box-sizing: border-box;
border-radius: 3px 3px 0 0;