Playlist selector V2 - UI issue fix

mgireesha · May 5, 2024 · 589bff4 · 589bff4
1 parent 47b76cf
commit 589bff4
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/src/g-player-react/src/Components/CommnPopup.js b/src/g-player-react/src/Components/CommnPopup.js
@@ -79,8 +79,8 @@ export const CommonPopup = () => {
 
     return (
         <>
-            <div className="common-popup" style={{ display: showPopup ? 'flex' : 'none' }}>
-                <div className="popup-container">
+            <div className="common-popup" style={{ display: showPopup ? 'flex' : 'none',...commonPopupObj.popupStyle?commonPopupObj.popupStyle:'' }}>
+                <div className="popup-container" style={commonPopupObj.popContStyle?commonPopupObj.popContStyle:{}}>
                     <div className="popup-header">
                         <label className='label'>{commonPopupObj.title}</label>
                         <button type="button" className="close" data-dismiss="modal" aria-hidden="true" onClick={closePopup}>×</button>

diff --git a/src/g-player-react/src/Components/main.scss b/src/g-player-react/src/Components/main.scss
@@ -2661,8 +2661,8 @@ a.disabled-click{
 }
 
 .playlist-selector-v2{
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
     column-gap: 20px;
     row-gap: 10px;
     justify-content: space-between;
@@ -2672,7 +2672,7 @@ a.disabled-click{
         border: 1px solid;
         padding: 5px;
         border-radius: 4px;
-        width: 10em;
+        // width: 10em;
         text-wrap: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;

diff --git a/src/g-player-react/src/Components/playlist/PlayllistSelectorV2.js b/src/g-player-react/src/Components/playlist/PlayllistSelectorV2.js
@@ -122,17 +122,18 @@ export const PlaylistSelector = () => {
 
     return(
         <div id={PLAYLIST_SELECTOR} className="playlist-selector-v2" style={styles}>
-            <div className="row" style={{display:'flex',width:'100%', border:'none'}}>
+            <div className="row" style={{gridColumn:'span 4', border:'none', width:'100%'}}>
                 {obj && obj.title+" - "+obj.album}
             </div>
-            <div className="row" style={{display:'flex',width:'100%'}} onClick={addToNewPlayist}>
-                <HiPlus style={{marginTop:4,marginRight:5}} /><label>{NEW_PLAYLIST_BTN_LABEL}</label>
-            </div>
+
             {playLists && playLists.map(playlist =>
                 <div className={assignedPlaylists.includes(playlist.name) ? "selected row" : "row"} onClick={()=>handleOnPlaylistClick(playlist.id,playlist.name)} title={playlist.name}>
                     <label>{playlist.name}</label>
                 </div>
             )}
+            <div className="row" style={{gridColumn:'span 4', width:'100%'}} onClick={addToNewPlayist}>
+                <HiPlus style={{marginTop:4,marginRight:5}} /><label>{NEW_PLAYLIST_BTN_LABEL}</label>
+            </div>
         </div>
     );
 } 
diff --git a/src/g-player-react/src/Components/screen/GPContextMenu.js b/src/g-player-react/src/Components/screen/GPContextMenu.js
@@ -86,6 +86,12 @@ export const GPContexMenu = () => {
                 contentType: COMPONENT,
                 component: PlaylistSelectorV2,
                 primaryClassName: "no-display",
+                popContStyle:{
+                    width:'60%'
+                },
+                popupStyle:{
+                    top:'-5vh'
+                }
 
             }
             dispatch(setCommonPopupObj(commonPopupObj));