rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add image zoom options (#984)

Browse Source
This commit is contained in:
Aman Harwara
2022-04-19 14:00:23 +05:30
committed by GitHub
parent b6eeaea516
commit a78c0ce2a1
13 changed files with 108 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
View File

@@ -98,7 +98,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
<IconButton
icon="arrow-left"
title="Go back"
className="flex mr-2 color-neutral"
className="flex mr-2 color-neutral p-0"
onClick={handleGoBack}
focusable={true}
disabled={isRegistering}

2
app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
View File

@@ -84,7 +84,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(
<IconButton
icon="arrow-left"
title="Go back"
className="flex mr-2 color-neutral"
className="flex mr-2 color-neutral p-0"
onClick={handleClose}
focusable={true}
/>

2
app/assets/javascripts/Components/AccountMenu/SignIn.tsx
View File

@@ -136,7 +136,7 @@ export const SignInPane: FunctionComponent<Props> = observer(
<IconButton
icon="arrow-left"
title="Go back"
className="flex mr-2 color-neutral"
className="flex mr-2 color-neutral p-0"
onClick={() => setMenuPane(AccountMenuPane.GeneralMenu)}
focusable={true}
disabled={isSigningIn}

3
app/assets/javascripts/Components/Button/IconButton.tsx
View File

@@ -46,9 +46,10 @@ export const IconButton: FunctionComponent<Props> = ({
<button
type="button"
title={title}
className={`no-border cursor-pointer bg-transparent flex flex-row items-center hover:brightness-130 p-0 ${focusableClass} ${className}`}
className={`no-border cursor-pointer bg-transparent flex flex-row items-center ${focusableClass} ${className}`}
onClick={click}
disabled={disabled}
aria-label={title}
>
<Icon type={icon} className={iconClassName} />
</button>

21
app/assets/javascripts/Components/Files/FilePreviewModal.tsx
View File

@@ -10,6 +10,7 @@ import { Button } from '@/Components/Button/Button'
import { Icon } from '@/Components/Icon'
import { FilePreviewInfoPanel } from './FilePreviewInfoPanel'
import { isFileTypePreviewable } from './isFilePreviewable'
import { PreviewComponent } from './PreviewComponent'
type Props = {
application: WebApplication
@@ -17,22 +18,6 @@ type Props = {
onDismiss: () => void
}
const getPreviewComponentForFile = (file: SNFile, objectUrl: string) => {
if (file.mimeType.startsWith('image/')) {
return <img src={objectUrl} />
}
if (file.mimeType.startsWith('video/')) {
return <video className="w-full h-full" src={objectUrl} controls />
}
if (file.mimeType.startsWith('audio/')) {
return <audio src={objectUrl} controls />
}
return <object className="w-full h-full" data={objectUrl} />
}
export const FilePreviewModal: FunctionComponent<Props> = ({ application, file, onDismiss }) => {
const [objectUrl, setObjectUrl] = useState<string>()
const [isFilePreviewable, setIsFilePreviewable] = useState(false)
@@ -132,9 +117,9 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, file,
</div>
</div>
<div className="flex flex-grow min-h-0 overflow-auto">
<div className="flex flex-grow items-center justify-center">
<div className="flex flex-grow items-center justify-center relative">
{objectUrl ? (
getPreviewComponentForFile(file, objectUrl)
<PreviewComponent file={file} objectUrl={objectUrl} />
) : isLoadingFile ? (
<div className="sk-spinner w-5 h-5 spinner-info"></div>
) : (

64
app/assets/javascripts/Components/Files/ImagePreview.tsx Normal file
View File

@@ -0,0 +1,64 @@
import { IconType } from '@standardnotes/snjs'
import { FunctionComponent } from 'preact'
import { useEffect, useRef, useState } from 'preact/hooks'
import { IconButton } from '../Button/IconButton'
type Props = {
objectUrl: string
}
export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
const initialImgHeightRef = useRef<number>()
const [imageZoomPercent, setImageZoomPercent] = useState(100)
const [imageHeight, setImageHeight] = useState(initialImgHeightRef.current)
useEffect(() => {
if (initialImgHeightRef.current) {
setImageHeight(imageZoomPercent * (initialImgHeightRef.current / 100))
}
}, [imageZoomPercent])
return (
<div className="flex items-center justify-center w-full h-full overflow-auto">
<img
src={objectUrl}
height={imageHeight}
ref={(imgElement) => {
if (!initialImgHeightRef.current) {
initialImgHeightRef.current = imgElement?.height
}
}}
/>
<div className="flex items-center absolute bottom-6 py-1 px-3 bg-default border-1 border-solid border-main rounded">
<span className="mr-1.5">Zoom:</span>
<IconButton
className="hover:bg-contrast p-1 rounded"
icon="add"
title="Zoom In"
focusable={true}
onClick={() => {
setImageZoomPercent((percent) => percent + 10)
}}
/>
<span className="mx-2">{imageZoomPercent}%</span>
<IconButton
className="hover:bg-contrast p-1 rounded"
icon={'subtract' as IconType}
title="Zoom Out"
focusable={true}
onClick={() => {
setImageZoomPercent((percent) => {
const newPercent = percent - 10
if (newPercent >= 10) {
return newPercent
} else {
return percent
}
})
}}
/>
</div>
</div>
)
}

24
app/assets/javascripts/Components/Files/PreviewComponent.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { SNFile } from '@standardnotes/snjs'
import { FunctionComponent } from 'preact'
import { ImagePreview } from './ImagePreview'
type Props = {
file: SNFile
objectUrl: string
}
export const PreviewComponent: FunctionComponent<Props> = ({ file, objectUrl }) => {
if (file.mimeType.startsWith('image/')) {
return <ImagePreview objectUrl={objectUrl} />
}
if (file.mimeType.startsWith('video/')) {
return <video className="w-full h-full" src={objectUrl} controls />
}
if (file.mimeType.startsWith('audio/')) {
return <audio src={objectUrl} controls />
}
return <object className="w-full h-full" data={objectUrl} />
}

4
app/assets/javascripts/Components/Icon/index.tsx
View File

@@ -88,6 +88,7 @@ import {
UserSwitch,
WarningIcon,
WindowIcon,
SubtractIcon,
} from '@standardnotes/stylekit'
export const ICONS = {
@@ -177,6 +178,7 @@ export const ICONS = {
user: UserIcon,
warning: WarningIcon,
window: WindowIcon,
subtract: SubtractIcon,
}
type Props = {
@@ -194,7 +196,7 @@ export const Icon: FunctionalComponent<Props> = ({ type, className = '', ariaLab
<IconComponent
className={`sn-icon ${className}`}
role="img"
{...(ariaLabel ? { 'aria-label': ariaLabel } : {})}
{...(ariaLabel ? { 'aria-label': ariaLabel } : { 'aria-hidden': true })}
/>
)
}

2
app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx
View File

@@ -10,7 +10,7 @@ const Toggle: FunctionComponent<{
setIsToggled: StateUpdater<boolean>
}> = ({ isToggled, setIsToggled }) => (
<IconButton
className="w-5 h-5 justify-center sk-circle hover:bg-grey-4 color-neutral"
className="w-5 h-5 p-0 justify-center sk-circle hover:bg-grey-4 color-neutral"
icon={isToggled ? 'eye-off' : 'eye'}
iconClassName="sn-icon--small"
title="Show/hide password"

2
app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/CopyButton.tsx
View File

@@ -11,7 +11,7 @@ export const CopyButton: FunctionComponent<{ copyValue: string }> = ({ copyValue
focusable={false}
title="Copy to clipboard"
icon={isCopied ? 'check' : 'copy'}
className={isCopied ? 'success' : undefined}
className={`${isCopied ? 'success' : undefined} p-0`}
onClick={() => {
navigator?.clipboard?.writeText(secretKey).catch(console.error)
setCopied(() => true)

1
app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/SaveSecretKey.tsx
View File

@@ -22,6 +22,7 @@ export const SaveSecretKey: FunctionComponent<{
focusable={false}
title="Download"
icon="download"
className="p-0"
onClick={() => {
downloadSecretKey(act.secretKey)
}}

2
app/assets/javascripts/Components/Tags/TagsSectionAddButton.tsx
View File

@@ -15,7 +15,7 @@ export const TagsSectionAddButton: FunctionComponent<Props> = observer(({ tags }
focusable={true}
icon="add"
title="Create a new tag"
className="color-neutral"
className="color-neutral p-0"
onClick={() => tags.createNewTemplate()}
/>
)

5
app/assets/stylesheets/_sn.scss
View File

@@ -266,6 +266,11 @@
margin-right: 3rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;