Skip to content

Commit

Permalink
feat: add file preview modal (#945)
Browse files Browse the repository at this point in the history
  • Loading branch information
@amanharwara
amanharwara authored Mar 23, 2022
1 parent 8715a8b commit 12e3bb0
Show file tree
Hide file tree
Showing 15 changed files with 445 additions and 135 deletions.
149 changes: 70 additions & 79 deletions app/assets/javascripts/components/ApplicationView.tsx
View file
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
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
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

0 comments on commit 12e3bb0

Please sign in to comment.