From f33f0ba8a08c4243bd066d3fcf365898b6452454 Mon Sep 17 00:00:00 2001 From: Justin Maximillian Kimlim Date: Wed, 6 Oct 2021 21:18:42 +0700 Subject: [PATCH 1/3] feat: showing full file name on hover 1.5 second --- src/Components/Files/files.scss | 4 +++ src/Components/Layout/hover.ts | 44 +++++++++++++++++++++++++++++++++ src/preload.ts | 3 +++ 3 files changed, 51 insertions(+) create mode 100644 src/Components/Layout/hover.ts diff --git a/src/Components/Files/files.scss b/src/Components/Files/files.scss index 7cede990..1d74a48e 100644 --- a/src/Components/Files/files.scss +++ b/src/Components/Files/files.scss @@ -53,6 +53,10 @@ } } +.hovering .file-grid-filename { + -webkit-line-clamp: initial !important; +} + .detail-view { display: inline-flex; width: -webkit-fill-available; diff --git a/src/Components/Layout/hover.ts b/src/Components/Layout/hover.ts new file mode 100644 index 00000000..8c5d00a1 --- /dev/null +++ b/src/Components/Layout/hover.ts @@ -0,0 +1,44 @@ +import path from 'path'; +/** + * Listen to mouse hovering + * @returns {void} + */ +const Hover = (): void => { + let timeOut: number; + let displayName: string; + let hoveringElement: HTMLElement; + + document.querySelector('#workspace').addEventListener('mousemove', (e) => { + window.clearTimeout(timeOut); + + // Ignore workspace hovering + if ((e.target as HTMLElement).id === 'workspace') { + if (hoveringElement?.dataset?.path && displayName) + hoveringElement.querySelector('.file-grid-filename').innerHTML = + displayName; + return; + } + hoveringElement?.classList?.remove('hovering'); + + const target = (e.target as HTMLElement)?.dataset?.path + ? (e.target as HTMLElement) + : ((e.target as HTMLElement)?.parentNode as HTMLElement); + + const filenameGrid = target.querySelector('.file-grid-filename'); + + if (target !== hoveringElement) { + displayName = undefined; + } + hoveringElement = target; + + timeOut = window.setTimeout(() => { + displayName = filenameGrid.innerHTML; + filenameGrid.innerHTML = path.basename( + unescape(target.dataset.path) + ); + target?.classList?.add('hovering'); + }, 1500); + }); +}; + +export default Hover; diff --git a/src/preload.ts b/src/preload.ts index bebeafff..e2ad7880 100644 --- a/src/preload.ts +++ b/src/preload.ts @@ -13,6 +13,7 @@ import { SelectListener } from './Components/Files/File Operation/select'; import { Shortcut } from './Components/Shortcut/shortcut'; import path from 'path'; import fs from 'fs'; +import Hover from './Components/Layout/hover'; const args = ipcRenderer.sendSync('args'); if (args.listen && args.theme) { @@ -68,4 +69,6 @@ document.addEventListener('DOMContentLoaded', async () => { ContextMenu(document.getElementById('workspace')); // Initialize shortcut Shortcut(); + // Initialize hover handler + Hover(); }); From f9f857b07ef97e0281313f4bdb7080db37365f18 Mon Sep 17 00:00:00 2001 From: Justin Maximillian Kimlim Date: Thu, 7 Oct 2021 12:20:31 +0700 Subject: [PATCH 2/3] feat: preview image on hover --- src/Components/Constants/fileTypes.ts | 36 ++++++++++++++++++++ src/Components/Files/File Preview/preview.ts | 5 +-- src/Components/Files/files.scss | 8 +++++ src/Components/Layout/hover.ts | 19 +++++++++++ 4 files changed, 64 insertions(+), 4 deletions(-) create mode 100644 src/Components/Constants/fileTypes.ts diff --git a/src/Components/Constants/fileTypes.ts b/src/Components/Constants/fileTypes.ts new file mode 100644 index 00000000..75d88f47 --- /dev/null +++ b/src/Components/Constants/fileTypes.ts @@ -0,0 +1,36 @@ +const IMAGE_TYPES = [ + '.jpg', + '.png', + '.gif', + '.bmp', + '.jpeg', + '.jpe', + '.jif', + '.jfif', + '.jfi', + '.webp', + '.tiff', + '.tif', + '.ico', + '.svg', + '.webp', +]; +const VIDEO_TYPES = [ + '.mp4', + '.webm', + '.mpg', + '.mp2', + '.mpeg', + '.mpe', + '.mpv', + '.ocg', + '.m4p', + '.m4v', + '.avi', + '.wmv', + '.mov', + '.qt', + '.flv', + '.swf', +]; +export { IMAGE_TYPES, VIDEO_TYPES }; diff --git a/src/Components/Files/File Preview/preview.ts b/src/Components/Files/File Preview/preview.ts index e2d68e73..89a23317 100644 --- a/src/Components/Files/File Preview/preview.ts +++ b/src/Components/Files/File Preview/preview.ts @@ -7,13 +7,10 @@ import { URLify, eURLify } from '../../Functions/urlify'; import hljs from 'highlight.js'; import marked from 'marked'; import storage from 'electron-json-storage-sync'; +import { IMAGE_TYPES, VIDEO_TYPES } from '../../Constants/fileTypes'; //prettier-ignore const FILE_TYPES_AVAILABLE_FOR_PREVIEW = ['.pdf', '.html', '.docx', '.htm', '.xlsx', '.xls', '.xlsb', 'xls', '.ods', '.fods', '.csv', '.txt', '.py', '.js', '.bat', '.css', '.c++', '.cpp', '.cc', '.c', '.diff', '.patch', '.go', '.java', '.json', '.php', '.ts', '.tsx', '.jsx', '.jpg', '.png', '.gif', '.bmp', '.jpeg', '.jpe', '.jif', '.jfif', '.jfi', '.webp', '.tiff', '.tif', '.ico', '.svg', '.webp', '.mp4', '.webm', '.mpg', '.mp2', '.mpeg', '.mpe', '.mpv', '.ocg', '.m4p', '.m4v', '.avi', '.wmv', '.mov', '.qt', '.flv', '.swf', '.md'] -//prettier-ignore -const IMAGE_TYPES = ['.jpg', '.png', '.gif', '.bmp', '.jpeg', '.jpe', '.jif', '.jfif', '.jfi', '.webp', '.tiff', '.tif', '.ico', '.svg', '.webp'] -//prettier-ignore -const VIDEO_TYPES = ['.mp4', '.webm', '.mpg', '.mp2', '.mpeg', '.mpe', '.mpv', '.ocg', '.m4p', '.m4v', '.avi', '.wmv', '.mov', '.qt', '.flv', '.swf'] /** * Close the preview file diff --git a/src/Components/Files/files.scss b/src/Components/Files/files.scss index 1d74a48e..198b7c1d 100644 --- a/src/Components/Files/files.scss +++ b/src/Components/Files/files.scss @@ -136,3 +136,11 @@ background: var(--selected-grid-background) !important; color: var(--selected-grid-color) !important; } + +.hover-preview { + position: fixed; + width: 300px; + img { + width: 100%; + } +} diff --git a/src/Components/Layout/hover.ts b/src/Components/Layout/hover.ts index 8c5d00a1..b909e82a 100644 --- a/src/Components/Layout/hover.ts +++ b/src/Components/Layout/hover.ts @@ -1,4 +1,6 @@ import path from 'path'; +import { IMAGE_TYPES } from '../Constants/fileTypes'; + /** * Listen to mouse hovering * @returns {void} @@ -7,9 +9,13 @@ const Hover = (): void => { let timeOut: number; let displayName: string; let hoveringElement: HTMLElement; + const hoverPreviewElement = document.createElement('div'); document.querySelector('#workspace').addEventListener('mousemove', (e) => { + const x = (e as MouseEvent).clientX; + const y = (e as MouseEvent).clientY; window.clearTimeout(timeOut); + hoverPreviewElement?.parentNode?.removeChild(hoverPreviewElement); // Ignore workspace hovering if ((e.target as HTMLElement).id === 'workspace') { @@ -37,6 +43,19 @@ const Hover = (): void => { unescape(target.dataset.path) ); target?.classList?.add('hovering'); + + if ( + IMAGE_TYPES.indexOf(path.extname(filenameGrid.innerHTML)) !== -1 + ) { + hoverPreviewElement.innerHTML = ``; + hoverPreviewElement.classList.add('hover-preview'); + hoverPreviewElement.style.top = y + 'px'; + hoverPreviewElement.style.left = x + 'px'; + hoverPreviewElement.dataset.path = target.dataset.path; + document.body.appendChild(hoverPreviewElement); + } }, 1500); }); }; From b11e4b6b4312b56fc62c1c12187239ecf6c101cc Mon Sep 17 00:00:00 2001 From: Justin Maximillian Kimlim Date: Thu, 7 Oct 2021 14:01:58 +0700 Subject: [PATCH 3/3] refactor: make hover interval as 500 ms --- src/Components/Layout/hover.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Layout/hover.ts b/src/Components/Layout/hover.ts index b909e82a..896e9dbe 100644 --- a/src/Components/Layout/hover.ts +++ b/src/Components/Layout/hover.ts @@ -56,7 +56,7 @@ const Hover = (): void => { hoverPreviewElement.dataset.path = target.dataset.path; document.body.appendChild(hoverPreviewElement); } - }, 1500); + }, 500); }); };