feat: add soft fade when lyrics are under menu or detail pane

wardellbagby · Jul 4, 2023 · b6a2fb8 · b6a2fb8
1 parent c564d87
commit b6a2fb8
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 7 deletions.
diff --git a/packages/codemirror/main/editorTheme.ts b/packages/codemirror/main/editorTheme.ts
@@ -51,6 +51,10 @@ export const editorTheme = (appTheme: Theme, font: string): Extension => [
       '.cm-scroller': {
         fontFamily: `"${font}"`,
         fontSize: `${appTheme.typography.fontSize}px`,
+        paddingTop: '16px',
+        paddingBottom: '16px',
+        paddingLeft: '8px',
+        paddingRight: '8px',
       },
       '.cm-gutters': {
         width: '60px',

diff --git a/packages/renderer/main/detail/DetailPane.tsx b/packages/renderer/main/detail/DetailPane.tsx
@@ -140,7 +140,10 @@ export const DetailPane: React.FC<DetailPaneProps> = (props) => {
         display={'flex'}
         flexDirection={'column'}
         justifyContent={'end'}
-        padding={'16px'}
+        paddingTop={isSmallLayout ? undefined : '16px'}
+        paddingLeft={isSmallLayout ? '16px' : undefined}
+        paddingRight={'16px'}
+        paddingBottom={'16px'}
         height={'100%'}
         width={'100%'}
         gap={'8px'}

diff --git a/packages/renderer/main/editor/Editor.tsx b/packages/renderer/main/editor/Editor.tsx
@@ -2,7 +2,7 @@ import { useCodeMirror, Text } from '@lyricistant/codemirror/CodeMirror';
 import { TextSelectionData } from '@lyricistant/codemirror/textSelection';
 import { Font } from '@lyricistant/common/preferences/PreferencesData';
 import { useChannelData } from '@lyricistant/renderer/platform/useChannel';
-import { styled } from '@mui/material';
+import { Box, styled, useTheme } from '@mui/material';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { toPlatformFile } from './to-platform-file';
 
@@ -15,11 +15,35 @@ const fontFamily = (font?: Font) => {
   }
 };
 const EditorContainer = styled('div')({
-  paddingTop: '8px',
   flex: '1 1 500px',
   minHeight: '50px',
+  position: 'relative',
 });
 
+interface EdgeFadeProps {
+  endColor: string;
+  towards: 'top' | 'bottom';
+}
+const EdgeFade = ({ endColor, towards }: EdgeFadeProps) => {
+  const startColor = `#00${endColor.slice(1)}`;
+  const rotation = towards === 'bottom' ? '180deg' : '0deg';
+
+  return (
+    <Box
+      sx={{
+        content: "''",
+        height: '24px',
+        width: '100%',
+        background: `linear-gradient(${rotation}, ${startColor} 0%, ${endColor} 100%)`,
+        position: 'absolute',
+        zIndex: 1,
+        top: towards === 'top' ? '0' : undefined,
+        bottom: towards === 'bottom' ? '0' : undefined,
+      }}
+    />
+  );
+};
+
 export interface EditorTextData {
   /** The text to be displayed in the editor. */
   text: Text;
@@ -69,6 +93,7 @@ export interface EditorProps {
 export const Editor: React.FC<EditorProps> = (props) => {
   const editor = useRef();
   const [themeData] = useChannelData('theme-updated');
+  const theme = useTheme();
   const onFileDropped = useCallback((item: DataTransferItem | File) => {
     logger.debug('Attempted to drop a file.');
     toPlatformFile(item)
@@ -120,7 +145,19 @@ export const Editor: React.FC<EditorProps> = (props) => {
   }, [props.value]);
 
   useTextActionEvents(undo, redo, openFindReplaceDialog);
-  return <EditorContainer ref={editor} />;
+  return (
+    <EditorContainer ref={editor}>
+      <Box
+        sx={{ position: 'absolute', top: '0px', bottom: '0px', width: '100%' }}
+      >
+        <EdgeFade towards={'top'} endColor={theme.palette.background.default} />
+        <EdgeFade
+          towards={'bottom'}
+          endColor={theme.palette.background.default}
+        />
+      </Box>
+    </EditorContainer>
+  );
 };
 
 const useTextActionEvents = (

diff --git a/packages/renderer/main/menu/Menu.tsx b/packages/renderer/main/menu/Menu.tsx
@@ -226,9 +226,10 @@ export const Menu: React.FC<MenuProps> = (props) => {
 
   return (
     <Box
-      marginBottom={isSmallLayout ? '8px' : 'inherit'}
-      marginRight={isSmallLayout ? 'inherit' : '8px'}
-      padding={'8px'}
+      paddingTop={'8px'}
+      paddingLeft={'8px'}
+      paddingRight={isSmallLayout ? '8px' : undefined}
+      paddingBottom={isSmallLayout ? undefined : '8px'}
     >
       <Paper
         color={theme.palette.primary.main}