Merge pull request #1233 from omnivore-app/feat/compact-listview

Feat/compact listview

packages/web/components/elements/ProgressBarVertical.tsx

@@ -0,0 +1,32 @@
+import { Box } from './../elements/LayoutPrimitives'
+
+type ProgressBarVProps = {
+  fillPercentage: number
+  fillColor: string
+  backgroundColor: string
+  borderRadius: string
+  height?: string
+}
+
+export function ProgressBarVertical(props: ProgressBarVProps): JSX.Element {
+  return (
+    <Box
+      css={{
+        height: props.height ?? '100%',
+        width: '2px',
+        borderRadius: '$1',
+        overflow: 'hidden',
+        backgroundColor: props.backgroundColor,
+      }}
+    >
+      <Box
+        css={{
+          height: `${props.fillPercentage}%`,
+          width: '100%',
+          backgroundColor: props.fillColor,
+          borderRadius: props.borderRadius,
+        }}
+      />
+    </Box>
+  )
+}

packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx

@@ -1,165 +1,76 @@
-import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
-import { CoverImage } from '../../elements/CoverImage'
+import { VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { StyledText } from '../../elements/StyledText'
 import { removeHTMLTags } from '../ArticleSubtitle'
-import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
 import { theme } from '../../tokens/stitches.config'
-import { CardMenu } from '../CardMenu'
 import { LabelChip } from '../../elements/LabelChip'
-import { ProgressBar } from '../../elements/ProgressBar'
 import type { LinkedItemCardProps } from './CardTypes'
+import { ProgressBarVertical } from '../../elements/ProgressBarVertical'
+
+//Styles
+const ellipsisText = {
+  overflow: 'hidden',
+  display: '-webkit-box',
+  WebkitLineClamp: 1,
+  WebkitBoxOrient: 'vertical',
+  pl: '10px',
+  margin: 'auto 0',
+}
 
 export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
   return (
     <VStack
-      css={{
-        p: '12px',
-        height: '100%',
-        width: '100%',
-        maxWidth: '100%',
-        borderRadius: '8px',
-        cursor: 'pointer',
-        wordBreak: 'break-word',
-        overflow: 'clip',
-        border: '1px solid $libraryActiveMenuItem',
-        position: 'relative',
-      }}
-      alignment="start"
       distribution="start"
-      onClick={() => {
-        props.handleAction('showDetail')
+      alignment="start"
+      css={{
+        width: '100%',
       }}
     >
-      {props.item.image && props.layout !== 'LIST_LAYOUT' && (
-        <CoverImage
-          src={props.item.image}
-          alt="Link Preview Image"
-          width="100%"
-          height={160}
-          css={{ borderRadius: '8px' }}
-          onError={(e) => {
-            ;(e.target as HTMLElement).style.display = 'none'
-          }}
-        />
-      )}
-      <VStack
-        distribution="start"
-        alignment="start"
-        css={{
-          px: '0px',
-          width: '100%',
-          pl: '$1',
-        }}
-      >
-        <HStack
-          alignment="start"
-          distribution="between"
-          css={{
-            width: '100%',
-            p: '0px',
-            mr: '-12px',
-            mt: '15px',
-            display: 'grid',
-            gridTemplateColumns: '1fr 24px',
-            gridTemplateRows: '1fr',
-          }}
-        >
-          <CardTitle title={props.item.title} />
-          <Box
-            css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
-            onClick={(e) => {
-              // This is here to prevent menu click events from bubbling
-              // up and causing us to "click" on the link item.
-              e.stopPropagation()
-            }}
-          >
-            <CardMenu
-              item={props.item}
-              viewer={props.viewer}
-              triggerElement={
-                <MoreOptionsIcon
-                  size={24}
-                  strokeColor={theme.colors.grayTextContrast.toString()}
-                  orientation="horizontal"
-                />
-              }
-              actionHandler={props.handleAction}
-            />
-          </Box>
-        </HStack>
-        <HStack alignment="start" distribution="between">
-          <StyledText style="caption" css={{fontWeight: '600', margin: '5px 8px 5px 0' }}>
-            {props.item.author && (
-              <SpanBox>
-                {removeHTMLTags(props.item.author)}
-              </SpanBox>
-            )}
-            {props.originText && (
-              <>
-                <Box
-                  css={{
-                    height: '4px',
-                    width: '4px',
-                    borderRadius: '50%',
-                    display: 'inline-block',
-                    background: 'var(--colors-graySolid)',
-                    margin: '1px',
-                  }}
-                ></Box>
-                <SpanBox css={{ color: 'var(--colors-graySolid)' }}>
-                  {props.originText}
-                </SpanBox>
-              </>
-            )}
-          </StyledText>
-        </HStack>
-      </VStack>
       <HStack
         alignment="start"
         distribution="between"
         css={{
           width: '100%',
-          pt: '$2',
-          px: '$1',
-          pr: '12px',
-          mt: '7px',
-          flexGrow: '1',
+          display: 'grid',
+          gridTemplateColumns: '0.01fr 1fr 2fr 150px',
+          gridTemplateRows: '1fr',
+          borderBottom: '1px solid $graySeparator',
+          height: '45px',
         }}
       >
+        <ProgressBarVertical
+          fillPercentage={props.item.readingProgressPercent}
+          fillColor={theme.colors.highlight.toString()}
+          backgroundColor={theme.colors.grayProgressBackground.toString()}
+          borderRadius={
+            props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
+          }
+          height={'45px'}
+        />
+        <CardTitle title={props.item.title} />
         <StyledText
           css={{
-            m: 0,
-            py: '0px',
-            mr: '$2',
-            fontStyle: 'normal',
-            fontWeight: '400',
-            fontSize: '14px',
-            lineHeight: '125%',
+            ...ellipsisText,
             color: '$grayTextContrast',
-            flexGrow: '4',
-            overflow: 'hidden',
-            display: '-webkit-box',
-            WebkitLineClamp: 5,
-            WebkitBoxOrient: 'vertical',
           }}
           data-testid="listDesc"
         >
+          {/* <Box css={{ display: 'block', py: '12px' }}> */}
+          {props.item.labels?.map(({ name, color }, index) => (
+            <LabelChip key={index} text={name || ''} color={color} />
+          ))}
+          {/* </Box> */}
           {props.item.description}
         </StyledText>
+
+        <StyledText
+          style="caption"
+          css={{ ...ellipsisText, fontWeight: '400' }}
+        >
+          {props.item.author && (
+            <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
+          )}
+        </StyledText>
       </HStack>
-      <Box css={{ display: 'block', py: '12px' }}>
-        {props.item.labels?.map(({ name, color }, index) => (
-          <LabelChip key={index} text={name || ''} color={color} />
-        ))}
-      </Box>
-      <ProgressBar
-        fillPercentage={props.item.readingProgressPercent}
-        fillColor={theme.colors.highlight.toString()}
-        backgroundColor={theme.colors.lightBorder.toString()}
-        borderRadius={
-          props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
-        }
-      />
     </VStack>
   )
 }
@@ -174,15 +85,10 @@ function CardTitle(props: CardTitleProps): JSX.Element {
       style="listTitle"
       data-testid="listTitle"
       css={{
-        mt: '0',
-        mb: '0',
-        fontSize: '18px',
+        ...ellipsisText,
+        fontSize: '14px',
+        fontWeight: '600',
         textAlign: 'left',
-        lineHeight: '1.25',
-        // whiteSpace: 'nowrap',
-        // textOverflow: 'ellipsis',
-        width: '100%',
-        // overflow: 'hidden',
       }}
     >
       {props.title}

packages/web/components/tokens/stitches.config.ts

@@ -125,6 +125,8 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         grayLine: 'hsl(0 0% 88.7%)',
         grayBorderHover: 'hsl(0 0% 78.0%)',
         grayText: '#3B3938',
+        graySeparator: '#DADADA',
+        grayProgressBackground: '#FFFFFF',
 
         // Semantic Colors
         highlightBackground: 'rgba(255, 210, 52, 0.65)',
@@ -196,6 +198,8 @@ const darkThemeSpec = {
     grayLine: 'hsl(0 0% 19.9%)',
     grayBorderHover: 'hsl(0 0% 31.2%)',
     grayText: '#CDCDCD',
+    graySeparator: '#323232',
+    grayProgressBackground: '#616161',
 
     // Semantic Colors
     highlightBackground: '#867740',

packages/web/styles/globals.css

@@ -310,7 +310,7 @@ button {
   background-clip: padding-box;
 }
 
-.omnivore-masonry-grid_column > div {
-  /* background: grey; */
+/* .omnivore-masonry-grid_column > div {
+  background: grey;
   margin-bottom: 16px;
-}
+} */