Ver código fonte

Update text file preview display

Remove scrollbars when showing previews.
pull/1/head
TheoryOfNekomata 1 ano atrás
pai
commit
49039dccd6
4 arquivos alterados com 23 adições e 10 exclusões
  1. +8
    -6
      packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx
  2. +5
    -3
      packages/web-kitchensink-reactnext/src/categories/blob/react/components/VideoFilePreview/index.tsx
  3. +2
    -1
      packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx
  4. +8
    -0
      packages/web-kitchensink-reactnext/src/styles/globals.css

+ 8
- 6
packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx Ver arquivo

@@ -93,10 +93,12 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
className="w-full h-full bg-black flex flex-col items-stretch"
data-testid="preview"
>
<div className="w-full flex-auto relative">
<div
className="w-full flex-auto relative"
key={`${fileWithMetadata?.url ?? ''}:${fileWithMetadata?.type ?? ''}`}
>
<audio
{...etcProps}
key={`${fileWithMetadata?.url ?? ''}:${fileWithMetadata?.type ?? ''}`}
controls={!enhanced}
ref={mediaControllerRef}
onLoadedMetadata={refreshControls}
@@ -115,7 +117,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
<>
<WaveformCanvas
className={clsx(
'sm:absolute w-full sm:h-full top-0 left-0 block object-center object-contain flex-auto aspect-video sm:aspect-auto bg-primary/10',
'sm:absolute w-full sm:h-full top-0 left-0 block object-center object-contain flex-auto aspect-video sm:aspect-auto bg-primary/10 cursor-text',
visualizationMode !== 'waveform' && 'opacity-0',
)}
ref={mediaControllerRef}
@@ -164,7 +166,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
/>
<span
className={clsx(
'block uppercase font-bold h-[1.1em] w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded text-primary',
'flex items-center uppercase font-bold h-full w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded text-primary cursor-pointer',
'peer-focus/waveform:text-secondary',
'peer-active/waveform:text-tertiary',
'peer-checked/waveform:text-tertiary',
@@ -188,7 +190,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
/>
<span
className={clsx(
'block uppercase font-bold h-[1.1em] w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded text-primary',
'flex items-center uppercase font-bold h-full w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded text-primary cursor-pointer',
'peer-focus/waveform:text-secondary',
'peer-active/waveform:text-tertiary',
'peer-checked/waveform:text-tertiary',
@@ -299,7 +301,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
</span>
</div>
<div
className="flex-shrink-0 w-12"
className="flex-shrink-0 w-12 flex items-center"
>
<Slider
ref={volumeRef}


+ 5
- 3
packages/web-kitchensink-reactnext/src/categories/blob/react/components/VideoFilePreview/index.tsx Ver arquivo

@@ -79,10 +79,12 @@ export const VideoFilePreview = React.forwardRef<VideoFilePreviewDerivedComponen
className="w-full h-full bg-black flex flex-col items-stretch"
data-testid="preview"
>
<div className="w-full flex-auto relative">
<div
className="w-full flex-auto relative"
key={`${fileWithMetadata?.url ?? ''}:${fileWithMetadata?.type ?? ''}`}
>
<video
{...etcProps}
key={`${fileWithMetadata?.url ?? ''}:${fileWithMetadata?.type ?? ''}`}
className="sm:absolute w-full sm:h-full top-0 left-0 block object-center object-contain flex-auto aspect-video sm:aspect-auto bg-primary/10"
ref={mediaControllerRef}
onLoadedMetadata={refreshControls}
@@ -208,7 +210,7 @@ export const VideoFilePreview = React.forwardRef<VideoFilePreviewDerivedComponen
</span>
</div>
<div
className="flex-shrink-0 w-12"
className="flex-shrink-0 w-12 flex items-center"
>
<Slider
ref={volumeRef}


+ 2
- 1
packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx Ver arquivo

@@ -183,8 +183,9 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
block && orient !== 'vertical' && 'w-full',
!block && 'align-middle',
className,
orient !== 'vertical' && 'inline-block min-w-[16rem] min-h-[1rem]',
orient !== 'vertical' && 'inline-block min-h-[1rem]',
orient === 'vertical' && 'inline-block min-w-[1rem]',
orient !== 'vertical' && !block && 'min-w-[16rem]',
//orient === 'vertical' && 'inline-block min-h-[16rem] min-w-[1rem]',
)}
style={style}


+ 8
- 0
packages/web-kitchensink-reactnext/src/styles/globals.css Ver arquivo

@@ -33,6 +33,10 @@
align-items: flex-start;
}

.react-prism pre {
overflow: visible;
}

.react-prism .token.number { color: rgb(var(--color-code-number)); }
.react-prism .token.keyword { color: rgb(var(--color-code-keyword)); }
.react-prism .token.type { color: rgb(var(--color-code-type)); }
@@ -47,6 +51,10 @@
.react-prism .token.global { color: rgb(var(--color-code-global)); }
.react-prism .token.comment { opacity: 0.5; }

.binary-file-preview pre {
overflow: visible;
}

.binary-file-preview .x00 { color: rgb(var(--color-code-keyword)); }
.binary-file-preview .x10 { color: rgb(var(--color-code-global)); }
.binary-file-preview .x20 { color: rgb(var(--color-code-string)); }


Carregando…
Cancelar
Salvar