feat(start-menu): fix UI and improve dragging

mukuljainx · May 20, 2021 · cc2eedf · cc2eedf
1 parent 06ad88e
commit cc2eedf
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 3 deletions.
diff --git a/src/atoms/styled/appImage/index.tsx b/src/atoms/styled/appImage/index.tsx
@@ -48,6 +48,7 @@ const Image = ({ name, size, ref, height, width, ...rest }: IProps) => {
       {...rest}
       height={height || size}
       width={width || size}
+      draggable={false}
       src={href ? href : require(`./assets/${iconName}`).default}
     />
   );

diff --git a/src/molecules/startMenu/index.tsx b/src/molecules/startMenu/index.tsx
@@ -36,7 +36,7 @@ const Wrapper = styled(animated.div)`
   }
 
   ${Partial}:last-child {
-    width: ${120 * 4 + 32 + 16}px;
+    width: ${120 * 4 + 32 + 24}px;
   }
 
   ${Partial}:not(:last-child) {

diff --git a/src/molecules/startMenu/quickPick/appBlock.tsx b/src/molecules/startMenu/quickPick/appBlock.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import styled from "styled-components";
+import { capitalize } from "lodash-es";
 
 import Image from "atoms/styled/appImage";
 import { Stack, Text } from "atoms/styled";
@@ -28,7 +29,7 @@ const QucikPick = ({ icon, name, ref, ...rest }: IProps) => {
   return (
     <Block {...rest} alignItems="center" justifyContent="center">
       <Image name={icon} size={48} />
-      <StyledText className="ellipsis">{name}</StyledText>
+      <StyledText className="ellipsis">{capitalize(name)}</StyledText>
     </Block>
   );
 };

diff --git a/src/molecules/startMenu/quickPick/index.tsx b/src/molecules/startMenu/quickPick/index.tsx
@@ -30,6 +30,7 @@ const AppWrapper = styled(Stack)`
   overflow: auto;
   flex-wrap: wrap;
   position: relative;
+  overflow-x: hidden;
 `;
 
 const AnimatedWrapper = styled(animated.div)`
@@ -231,7 +232,7 @@ const QucikPick = ({}: IProps) => {
                   width: 128 * apps[i].width - 8,
                   height: 120,
                 }}
-                name={apps[i].name + " " + i}
+                name={apps[i].name}
                 icon={apps[i].name}
               />
             </AnimatedWrapper>