From 90704e50498131a3ce50c42752fa37631c46ff84 Mon Sep 17 00:00:00 2001 From: mwojton Date: Wed, 6 Nov 2019 15:19:34 -0500 Subject: [PATCH 1/3] Adding file size to File browser hover Fixes #7352 --- packages/filebrowser/src/listing.ts | 26 ++++++++++++++++++++++++- packages/services/src/contents/index.ts | 5 +++++ 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts index d04f0ab5ff5f..fced7030f0bc 100644 --- a/packages/filebrowser/src/listing.ts +++ b/packages/filebrowser/src/listing.ts @@ -1833,8 +1833,13 @@ export namespace DirListing { // clean up the svg icon annotation, if any delete icon.dataset.icon; } + // add file size to pop up if its available + if (model.size !== null && model.size !== undefined) { + node.title = model.name + ' - ' + Private.formatFileSize(model.size, 1); + } else { + node.title = model.name; + } - node.title = model.name; // If an item is being edited currently, its text node is unavailable. if (text && text.textContent !== model.name) { text.textContent = model.name; @@ -2023,4 +2028,23 @@ namespace Private { ElementExt.hitTest(node, x, y) ); } + + /** + * Format bytes to human readable string. + */ + export function formatFileSize(bytes: number, decimalPoint: number): string { + // https://www.codexworld.com/how-to/convert-file-size-bytes-kb-mb-gb-javascript/ + if (bytes === 0) { + return '0 Bytes'; + } + const k = 1000; + const dm = decimalPoint || 2; + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + if (i >= 0 && i < sizes.length) { + return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; + } else { + return String(bytes); + } + } } diff --git a/packages/services/src/contents/index.ts b/packages/services/src/contents/index.ts index 89ed5e56cc1a..72986e7bc542 100644 --- a/packages/services/src/contents/index.ts +++ b/packages/services/src/contents/index.ts @@ -96,6 +96,11 @@ export namespace Contents { * Only relevant for type: 'file' */ readonly format: FileFormat; + + /** + * The size of then file in bytes. + */ + readonly size?: number; } /** From ad4d929f8b21334e5ba40c9514bade5cfb7225c5 Mon Sep 17 00:00:00 2001 From: mwojton Date: Sat, 9 Nov 2019 00:18:03 -0500 Subject: [PATCH 2/3] Adding path, size, created/mod to hover Fixes #7352 --- packages/filebrowser/src/listing.ts | 28 +++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts index fced7030f0bc..cb498509a3d9 100644 --- a/packages/filebrowser/src/listing.ts +++ b/packages/filebrowser/src/listing.ts @@ -1833,12 +1833,27 @@ export namespace DirListing { // clean up the svg icon annotation, if any delete icon.dataset.icon; } + + let hoverText = 'Name: ' + model.name; // add file size to pop up if its available if (model.size !== null && model.size !== undefined) { - node.title = model.name + ' - ' + Private.formatFileSize(model.size, 1); - } else { - node.title = model.name; + hoverText += '\nSize: ' + Private.formatFileSize(model.size, 1, 1024); + } + if (model.path) { + hoverText += '\nPath: ' + model.path.substr(0, 50); + if (model.path.length > 50) { + hoverText += '...'; + } } + if (model.created) { + hoverText += '\nCreated: ' + Time.formatHuman(new Date(model.created)); + } + if (model.last_modified) { + hoverText += + '\nModified: ' + Time.formatHuman(new Date(model.last_modified)); + } + + node.title = hoverText; // If an item is being edited currently, its text node is unavailable. if (text && text.textContent !== model.name) { @@ -2032,12 +2047,15 @@ namespace Private { /** * Format bytes to human readable string. */ - export function formatFileSize(bytes: number, decimalPoint: number): string { + export function formatFileSize( + bytes: number, + decimalPoint: number, + k: number + ): string { // https://www.codexworld.com/how-to/convert-file-size-bytes-kb-mb-gb-javascript/ if (bytes === 0) { return '0 Bytes'; } - const k = 1000; const dm = decimalPoint || 2; const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); From 322a872e4750e0f8933133d1246d4359bf5bb064 Mon Sep 17 00:00:00 2001 From: mwojton Date: Sun, 10 Nov 2019 00:34:19 -0500 Subject: [PATCH 3/3] changed time format to YYYY-MM-DD HH:mm:ss only show directory in Path Fixes #7352 --- packages/filebrowser/src/listing.ts | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts index cb498509a3d9..cc2fd02f0e09 100644 --- a/packages/filebrowser/src/listing.ts +++ b/packages/filebrowser/src/listing.ts @@ -1840,17 +1840,23 @@ export namespace DirListing { hoverText += '\nSize: ' + Private.formatFileSize(model.size, 1, 1024); } if (model.path) { - hoverText += '\nPath: ' + model.path.substr(0, 50); - if (model.path.length > 50) { - hoverText += '...'; + let dirname = PathExt.dirname(model.path); + if (dirname) { + hoverText += '\nPath: ' + dirname.substr(0, 50); + if (dirname.length > 50) { + hoverText += '...'; + } } } if (model.created) { - hoverText += '\nCreated: ' + Time.formatHuman(new Date(model.created)); + hoverText += + '\nCreated: ' + + Time.format(new Date(model.created), 'YYYY-MM-DD HH:mm:ss'); } if (model.last_modified) { hoverText += - '\nModified: ' + Time.formatHuman(new Date(model.last_modified)); + '\nModified: ' + + Time.format(new Date(model.last_modified), 'YYYY-MM-DD HH:mm:ss'); } node.title = hoverText;