Fix icon/image for scenes mostUsed and playlist in dashboard view

YeonV · Aug 16, 2024 · e1be82a · e1be82a
1 parent 3f35b55
commit e1be82a
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 20 deletions.
diff --git a/src/components/Icons/BladeIcon/BladeIcon.interface.tsx b/src/components/Icons/BladeIcon/BladeIcon.interface.tsx
@@ -15,6 +15,11 @@ export interface BladeIconProps {
    * Icon is rendered in Intro
    */
   intro?: boolean
+  /**
+   * Icon is rendered in SceneList
+   * examples: `true`, `false`
+   */
+  list?: boolean
   /**
    * examples: `wled`, `Light`, `mdi:led-strip`
    */

diff --git a/src/components/Icons/BladeIcon/BladeIcon.tsx b/src/components/Icons/BladeIcon/BladeIcon.tsx
@@ -40,7 +40,8 @@ function BladeIcon({
   style,
   scene = false,
   card = false,
-  intro = false
+  intro = false,
+  list = false
 }: BladeIconProps): JSX.Element {
   return (
     <Icon
@@ -52,14 +53,16 @@ function BladeIcon({
         <YZLogo2Y
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
-            marginTop: '3px'
+            marginTop: '3px',
+            height: list ? '100%' : 'unset'
           }}
         />
       ) : name.startsWith('<svg') ? (
         <div
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
-            marginTop: '3px'
+            marginTop: '3px',
+            height: list ? '100%' : 'unset'
           }}
           dangerouslySetInnerHTML={{ __html: name }}
         />
@@ -70,78 +73,89 @@ function BladeIcon({
           alt="icon"
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
-            marginTop: '3px'
+            marginTop: '3px',
+            height: list ? '100%' : 'unset'
           }}
         />
       ) : name.startsWith('yz:logo2z') ? (
         <YZLogo2Z
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
-            marginTop: '3px'
+            marginTop: '3px',
+            height: list ? '100%' : 'unset'
           }}
         />
       ) : name.startsWith('yz:logo2top') ? (
         <YZLogo2Top
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
-            marginTop: '3px'
+            marginTop: '3px',
+            height: list ? '100%' : 'unset'
           }}
         />
       ) : name.startsWith('yz:logo2bot') ? (
         <YZLogo2Bottom
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
-            marginTop: '3px'
+            marginTop: '3px',
+            height: list ? '100%' : 'unset'
           }}
         />
       ) : name.startsWith('yz:logo2') ? (
         <YZLogo2
           style={{
             // eslint-disable-next-line
             transform: card ? 'unset' : scene ? 'scale(1)' : intro ? 'scale(0.05)' : 'scale(0.012)',
-            marginTop: '3px'
+            marginTop: '3px',
+            height: list ? '100%' : 'unset'
           }}
         />
       ) : name.startsWith('yz:logo3y') ? (
         <YZLogo3Y
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
-            marginTop: '3px'
+            marginTop: '3px',
+            height: list ? '100%' : 'unset'
           }}
         />
       ) : name.startsWith('yz:logo3z') ? (
         <YZLogo3Z
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
-            marginTop: '3px'
+            marginTop: '3px',
+            height: list ? '100%' : 'unset'
           }}
         />
       ) : name.startsWith('yz:logo3top') ? (
         <YZLogo3Top
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
-            marginTop: '3px'
+            marginTop: '3px',
+            height: list ? '100%' : 'unset'
           }}
         />
       ) : name.startsWith('yz:logo3left') ? (
         <YZLogo3Left
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
-            marginTop: '3px'
+            marginTop: '3px',
+            height: list ? '100%' : 'unset'
           }}
         />
       ) : name.startsWith('yz:logo3right') ? (
         <YZLogo3Right
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
-            marginTop: '3px'
+            marginTop: '3px',
+            height: list ? '100%' : 'unset'
           }}
         />
       ) : name.startsWith('yz:logo3') ? (
         <YZLogo3
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
-            marginTop: '3px'
+            marginTop: '3px',
+            height: list ? '100%' : 'unset'
           }}
         />
       ) : name.startsWith('wled') ? (
@@ -167,34 +181,39 @@ function BladeIcon({
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
             marginTop: '3px',
+            height: list ? '100%' : 'unset',
           }}
         />
       ) : name.startsWith('yz:logo2z') ? (
         <YZLogo2Z
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
             marginTop: '3px',
+            height: list ? '100%' : 'unset',
           }}
         />
       ) : name.startsWith('yz:logo2top') ? (
         <YZLogo2Top
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
             marginTop: '3px',
+            height: list ? '100%' : 'unset',
           }}
         />
       ) : name.startsWith('yz:logo2bot') ? (
         <YZLogo2Bottom
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
             marginTop: '3px',
+            height: list ? '100%' : 'unset',
           }}
         />
       ) : name.startsWith('yz:logo2') ? (
         <YZLogo2
           style={{
             transform: card ? 'unset' : scene ? 'scale(1)' : 'scale(0.012)',
             marginTop: '3px',
+            height: list ? '100%' : 'unset',
           }}
         />
       ) : name.startsWith('wled') ? (

diff --git a/src/pages/Device/Presets.tsx b/src/pages/Device/Presets.tsx
@@ -239,7 +239,7 @@ const PresetsCard = ({ virtual, effectType, presets, style }: any) => {
 
   useEffect(() => {
     if (isLogged && features.cloud) getCloudConfigs()
-  }, [isLogged])
+  }, [isLogged, features.cloud])
 
   return (
     <Card variant="outlined" className="step-device-three" style={style}>

diff --git a/src/pages/Scenes/Scenes.styles.tsx b/src/pages/Scenes/Scenes.styles.tsx
@@ -31,6 +31,16 @@ const useStyles = makeStyles({
     '& > span:before': {
       position: 'relative'
     }
+  },
+  iconMediaList: {
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    margin: '0 auto',
+    fontSize: 50,
+    '& > span:before': {
+      position: 'relative'
+    }
   }
 })
 

diff --git a/src/pages/Scenes/ScenesImage.tsx b/src/pages/Scenes/ScenesImage.tsx
@@ -5,7 +5,7 @@ import useStore from '../../store/useStore'
 import useStyles from './Scenes.styles'
 import BladeIcon from '../../components/Icons/BladeIcon/BladeIcon'
 
-const SceneImage = ({ iconName }: { iconName: string }) => {
+const SceneImage = ({ iconName, list }: { iconName: string, list?: boolean }) => {
   const classes = useStyles()
   const [imageData, setImageData] = useState(null)
   const getImage = useStore((state) => state.getImage)
@@ -44,7 +44,7 @@ const SceneImage = ({ iconName }: { iconName: string }) => {
       />
     )
   ) : (
-    <BladeIcon scene className={classes.iconMedia} name={iconName} />
+    <BladeIcon scene className={list ? classes.iconMediaList : classes.iconMedia} name={iconName} list={list} />
   )
 }
 

diff --git a/src/pages/Scenes/ScenesMostUsed.tsx b/src/pages/Scenes/ScenesMostUsed.tsx
@@ -39,7 +39,7 @@ export default function ScenesMostUsed({
       headerName: 'Image',
       width: db ? 100 : 150,
       renderCell: (params: GridRenderCellParams) => (
-        <SceneImage iconName={params.value || 'Wallpaper'} />
+        <SceneImage iconName={params.value || 'Wallpaper'} list />
       )
     },
     {

diff --git a/src/pages/Scenes/ScenesPlaylist.tsx b/src/pages/Scenes/ScenesPlaylist.tsx
@@ -83,7 +83,7 @@ export default function ScenesPlaylist({
       headerName: 'Image',
       width: db ? 100 : 150,
       renderCell: (params: GridRenderCellParams) => (
-        <SceneImage iconName={params.value || 'Wallpaper'} />
+        <SceneImage iconName={params.value || 'Wallpaper'} list />
       )
     },
     {
@@ -96,7 +96,10 @@ export default function ScenesPlaylist({
           sx={{
             whiteSpace: 'nowrap',
             overflow: 'hidden',
-            textOverflow: 'ellipsis'
+            textOverflow: 'ellipsis',
+            display: 'flex',
+            alignItems: 'center',
+            height: '100%'
           }}
         >
           {params.value}