From 0a3e6c66c15cbe3387b93da7604cfddfb9a4cba1 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@deluan.com>
Date: Fri, 22 May 2020 21:47:48 -0400
Subject: [PATCH] Alwasy show context menu on mobile views

---
 ui/src/album/AlbumSongs.js       |  1 +
 ui/src/common/SongDatagrid.js    | 37 +++++++++++++++++++++++++-------
 ui/src/playlist/PlaylistSongs.js | 17 +++++++++------
 3 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/ui/src/album/AlbumSongs.js b/ui/src/album/AlbumSongs.js
index e1deb61c..19a00ee4 100644
--- a/ui/src/album/AlbumSongs.js
+++ b/ui/src/album/AlbumSongs.js
@@ -124,6 +124,7 @@ const AlbumSongs = (props) => {
               {...controllerProps}
               hasBulkActions={hasBulkActions}
               multiDisc={multiDisc}
+              contextVisible={isXsmall}
             >
               {isDesktop && (
                 <TextField
diff --git a/ui/src/common/SongDatagrid.js b/ui/src/common/SongDatagrid.js
index 43a8b853..9fe14763 100644
--- a/ui/src/common/SongDatagrid.js
+++ b/ui/src/common/SongDatagrid.js
@@ -2,9 +2,14 @@ import React, { useState, isValidElement, cloneElement } from 'react'
 import { Datagrid, DatagridBody, DatagridRow, useTranslate } from 'react-admin'
 import { TableCell, TableRow, Typography } from '@material-ui/core'
 import PropTypes from 'prop-types'
-import RangeField from './RangeField'
 
-export const SongDatagridRow = ({ record, children, multiDisc, ...rest }) => {
+export const SongDatagridRow = ({
+  record,
+  children,
+  multiDisc,
+  contextVisible,
+  ...rest
+}) => {
   const translate = useTranslate()
   const [visible, setVisible] = useState(false)
   return (
@@ -37,7 +42,10 @@ export const SongDatagridRow = ({ record, children, multiDisc, ...rest }) => {
           child &&
           isValidElement(child) &&
           child.type.name === 'SongContextMenu'
-            ? cloneElement(child, { visible, ...rest })
+            ? cloneElement(child, {
+                visible: contextVisible || visible,
+                ...rest,
+              })
             : child
         )}
       </DatagridRow>
@@ -45,16 +53,29 @@ export const SongDatagridRow = ({ record, children, multiDisc, ...rest }) => {
   )
 }
 
-RangeField.propTypes = {
+SongDatagridRow.propTypes = {
   record: PropTypes.object,
   children: PropTypes.node,
   multiDisc: PropTypes.bool,
+  contextVisible: PropTypes.bool,
 }
 
-export const SongDatagrid = (props) => {
-  const multiDisc = props.multiDisc
+export const SongDatagrid = ({ multiDisc, contextVisible, ...rest }) => {
   const SongDatagridBody = (props) => (
-    <DatagridBody {...props} row={<SongDatagridRow multiDisc={multiDisc} />} />
+    <DatagridBody
+      {...props}
+      row={
+        <SongDatagridRow
+          multiDisc={multiDisc}
+          contextVisible={contextVisible}
+        />
+      }
+    />
   )
-  return <Datagrid {...props} body={<SongDatagridBody />} />
+  return <Datagrid {...rest} body={<SongDatagridBody />} />
+}
+
+SongDatagrid.propTypes = {
+  contextVisible: PropTypes.bool,
+  multiDisc: PropTypes.bool,
 }
diff --git a/ui/src/playlist/PlaylistSongs.js b/ui/src/playlist/PlaylistSongs.js
index 246521e3..55e636ab 100644
--- a/ui/src/playlist/PlaylistSongs.js
+++ b/ui/src/playlist/PlaylistSongs.js
@@ -55,13 +55,6 @@ const useStylesListToolbar = makeStyles({
   },
 })
 
-const SongsDatagridBody = (props) => (
-  <DatagridBody {...props} row={<SongDatagridRow />} />
-)
-const SongsDatagrid = (props) => (
-  <Datagrid {...props} body={<SongsDatagridBody />} />
-)
-
 const PlaylistSongs = (props) => {
   const classes = useStyles(props)
   const classesToolbar = useStylesListToolbar(props)
@@ -86,6 +79,16 @@ const PlaylistSongs = (props) => {
     }
   }
 
+  const SongsDatagridBody = (props) => (
+    <DatagridBody
+      {...props}
+      row={<SongDatagridRow contextVisible={isXsmall} />}
+    />
+  )
+  const SongsDatagrid = (props) => (
+    <Datagrid {...props} body={<SongsDatagridBody />} />
+  )
+
   return (
     <>
       <ListToolbar