Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add file preview modal #945

Merged
merged 30 commits into from
Mar 23, 2022
Merged

feat: add file preview modal #945

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
5130284
feat: add file preview modal
amanharwara Mar 15, 2022
30c93bd
feat: add new icon
amanharwara Mar 15, 2022
d39473e
feat: make revision history modal non-alert dialog
amanharwara Mar 15, 2022
edf34a2
feat: use updated fileResult type
amanharwara Mar 15, 2022
046f73c
feat: add new utility class
amanharwara Mar 15, 2022
8acc6fa
fix: file icon size
amanharwara Mar 15, 2022
45f33d9
Merge branch 'develop' of github.com:standardnotes/web into feat/file…
amanharwara Mar 16, 2022
5c84de8
chore: bump dependencies
amanharwara Mar 16, 2022
9ce1159
fix: icon name
amanharwara Mar 16, 2022
a5baf03
feat: add non-previewable/error copy
amanharwara Mar 16, 2022
2b1d64f
feat: add new utility classes
amanharwara Mar 16, 2022
7153107
feat: allow object urls as downloadData param
amanharwara Mar 16, 2022
bf181fd
fix: file name word wrap
amanharwara Mar 16, 2022
f04e52c
fix: download button margin
amanharwara Mar 18, 2022
cebc0b8
Merge branch 'develop' of github.com:standardnotes/web into feat/file…
amanharwara Mar 23, 2022
809183d
feat: implement isFilePreviewable util
amanharwara Mar 23, 2022
37cba3c
feat: use correct html element for file preview
amanharwara Mar 23, 2022
d09c113
chore: update dependencies
amanharwara Mar 23, 2022
4ca13fe
feat: determine file type if selected file object doesnt have type
amanharwara Mar 23, 2022
5e22d6a
refactor: use logical or operator
amanharwara Mar 23, 2022
3d30418
fix: dismiss "Uploading..." toast if error
amanharwara Mar 23, 2022
e437999
feat: remove dev-only code
amanharwara Mar 23, 2022
35d50a7
Merge branch 'develop' into feat/file-preview-modal
amanharwara Mar 23, 2022
4dfc067
chore: bump filepicker version
amanharwara Mar 23, 2022
615cc7e
feat: early return if fileType is empty
amanharwara Mar 23, 2022
0fede47
feat: revoke object url on cleanup
amanharwara Mar 23, 2022
bfa193f
feat: remove unnecessary check
amanharwara Mar 23, 2022
6c13d09
feat: get all chunks before downloading/previewing file
amanharwara Mar 23, 2022
1aefaa5
feat: move zip.js lazy-loading to archive service
amanharwara Mar 23, 2022
6c26d8d
feat: move getMimeType function to archive service
amanharwara Mar 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 70 additions & 79 deletions app/assets/javascripts/components/ApplicationView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { PremiumModalProvider } from './Premium';
import { ConfirmSignoutContainer } from './ConfirmSignoutModal';
import { TagsContextMenu } from './Tags/TagContextMenu';
import { ToastContainer } from '@standardnotes/stylekit';
import { FilePreviewModalProvider } from './Files/FilePreviewModalProvider';

type Props = {
application: WebApplication;
Expand Down Expand Up @@ -175,88 +176,78 @@ export class ApplicationView extends PureComponent<Props, State> {
const renderAppContents = !this.state.needsUnlock && this.state.launched;

return (
<PremiumModalProvider
application={this.application}
appState={this.appState}
>
<div className={this.platformString + ' main-ui-view sn-component'}>
{renderAppContents && (
<div
id="app"
className={this.state.appClass + ' app app-column-container'}
>
<Navigation application={this.application} />

<NotesView
application={this.application}
appState={this.appState}
/>

<NoteGroupView application={this.application} />
</div>
)}

{renderAppContents && (
<>
<Footer
application={this.application}
applicationGroup={this.props.mainApplicationGroup}
/>

<SessionsModal
application={this.application}
appState={this.appState}
/>

<PreferencesViewWrapper
appState={this.appState}
application={this.application}
/>

<RevisionHistoryModalWrapper
application={this.application}
appState={this.appState}
/>
</>
)}

{this.state.challenges.map((challenge) => {
return (
<div className="sk-modal">
<ChallengeModal
key={challenge.id}
<FilePreviewModalProvider application={this.application}>
<PremiumModalProvider
application={this.application}
appState={this.appState}
>
<div className={this.platformString + ' main-ui-view sn-component'}>
{renderAppContents && (
<div
id="app"
className={this.state.appClass + ' app app-column-container'}
>
<Navigation application={this.application} />
<NotesView
application={this.application}
challenge={challenge}
onDismiss={this.removeChallenge}
appState={this.appState}
/>
<NoteGroupView application={this.application} />
</div>
);
})}

{renderAppContents && (
<>
<NotesContextMenu
application={this.application}
appState={this.appState}
/>

<TagsContextMenu appState={this.appState} />

<PurchaseFlowWrapper
application={this.application}
appState={this.appState}
/>

<ConfirmSignoutContainer
appState={this.appState}
application={this.application}
/>

<ToastContainer />
</>
)}
</div>
</PremiumModalProvider>
)}
{renderAppContents && (
<>
<Footer
application={this.application}
applicationGroup={this.props.mainApplicationGroup}
/>
<SessionsModal
application={this.application}
appState={this.appState}
/>
<PreferencesViewWrapper
appState={this.appState}
application={this.application}
/>
<RevisionHistoryModalWrapper
application={this.application}
appState={this.appState}
/>
</>
)}
{this.state.challenges.map((challenge) => {
return (
<div className="sk-modal">
<ChallengeModal
key={challenge.id}
application={this.application}
challenge={challenge}
onDismiss={this.removeChallenge}
/>
</div>
);
})}
{renderAppContents && (
<>
<NotesContextMenu
application={this.application}
appState={this.appState}
/>
<TagsContextMenu appState={this.appState} />
<PurchaseFlowWrapper
application={this.application}
appState={this.appState}
/>
<ConfirmSignoutContainer
appState={this.appState}
application={this.application}
/>
<ToastContainer />
</>
)}
</div>
</PremiumModalProvider>
</FilePreviewModalProvider>
);
}
}
11 changes: 7 additions & 4 deletions app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ import {
} from './PopoverFileItemAction';
import { PopoverFileSubmenu } from './PopoverFileSubmenu';

const getFileIconComponent = (iconType: string) => {
export const getFileIconComponent = (iconType: string, className: string) => {
const IconComponent = ICONS[iconType as keyof typeof ICONS];

return <IconComponent className="w-8 h-8 flex-shrink-0" />;
return <IconComponent className={className} />;
};

export type PopoverFileItemProps = {
Expand Down Expand Up @@ -69,7 +69,10 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
return (
<div className="flex items-center justify-between p-3">
<div className="flex items-center">
{getFileIconComponent(getIconType(file.mimeType))}
{getFileIconComponent(
getIconType(file.mimeType),
'w-8 h-8 flex-shrink-0'
)}
<div className="flex flex-col mx-4">
{isRenamingFile ? (
<input
Expand All @@ -82,7 +85,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
onBlur={handleFileNameInputBlur}
/>
) : (
<div className="text-sm mb-1">{file.name}</div>
<div className="text-sm mb-1 break-word">{file.name}</div>
)}
<div className="text-xs color-grey-0">
{file.created_at.toLocaleString()} ·{' '}
Expand Down
14 changes: 14 additions & 0 deletions app/assets/javascripts/components/AttachedFilesPopover/PopoverFileSubmenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
import { Icon } from '../Icon';
import { Switch } from '../Switch';
import { useCloseOnBlur } from '../utils';
import { useFilePreviewModal } from '../Files/FilePreviewModalProvider';
import { PopoverFileItemProps } from './PopoverFileItem';
import { PopoverFileItemActionType } from './PopoverFileItemAction';

Expand All @@ -32,6 +33,8 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
handleFileAction,
setIsRenamingFile,
}) => {
const filePreviewModal = useFilePreviewModal();

const menuContainerRef = useRef<HTMLDivElement>(null);
const menuButtonRef = useRef<HTMLButtonElement>(null);
const menuRef = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -99,6 +102,17 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
>
{isMenuOpen && (
<>
<button
onBlur={closeOnBlur}
className="sn-dropdown-item focus:bg-info-backdrop"
onClick={() => {
filePreviewModal.activate(file);
closeMenu();
}}
>
<Icon type="file" className="mr-2 color-neutral" />
Preview file
</button>
{isAttachedToNote ? (
<button
onBlur={closeOnBlur}
Expand Down
Loading