From 9653453e861242a74919924ccc9ea76f885c2455 Mon Sep 17 00:00:00 2001 From: Pluto Date: Wed, 8 Jan 2025 22:05:10 +0530 Subject: [PATCH 1/5] feat: add 'x' button to remove specific file from Recent Files --- .../NavigationAndHistory/main.js | 47 ++++++++++++++++--- src/styles/Extn-NavigationAndHistory.less | 23 +++++++++ 2 files changed, 63 insertions(+), 7 deletions(-) diff --git a/src/extensionsIntegrated/NavigationAndHistory/main.js b/src/extensionsIntegrated/NavigationAndHistory/main.js index 620043be23..61c75d0cf2 100644 --- a/src/extensionsIntegrated/NavigationAndHistory/main.js +++ b/src/extensionsIntegrated/NavigationAndHistory/main.js @@ -239,33 +239,66 @@ define(function (require, exports, module) { // Try to see if we have same doc split // Check existing list for this doc path and active pane entry var entryIndex = _.findIndex(_mrofList, function (record) { - return (record && record.file === value.file && record.paneId === MainViewManager.getActivePaneId()); + return ( + record && + record.file === value.file && + record.paneId === MainViewManager.getActivePaneId() + ); }); // If found don't process this entry, as the document is already present in active pane if (entryIndex >= 0) { return true; } - // Process this for active pane id + // Process this for active pane id value.paneId = MainViewManager.getActivePaneId(); } var indxInWS = MainViewManager.findInWorkingSet(value.paneId, value.file); - data = {fullPath: value.file, + data = { + fullPath: value.file, name: FileUtils.getBaseName(value.file), - isFile: true}; + isFile: true + }; fileEntry = FileSystem.getFileForPath(value.file); // Create new list item with a link - $link = $("").html(ViewUtils.getFileEntryDisplay({name: FileUtils.getBaseName(value.file)})); + $link = $("").html( + ViewUtils.getFileEntryDisplay({name: FileUtils.getBaseName(value.file)}) + ); + + // Create remove button + var $removeBtn = $("×").on("click", function(e) { + e.preventDefault(); + e.stopPropagation(); + + // Find and remove the entry from _mrofList + var filePath = $(this).parent().data("path"); + var paneId = $(this).parent().data("paneId"); + + _mrofList = _mrofList.filter(function(entry) { + return !(entry && entry.file === filePath && entry.paneId === paneId); + }); + + // Remove the list item from UI + $(this).parent().remove(); + + // Update preferences + PreferencesManager.setViewState( + OPEN_FILES_VIEW_STATE, + _mrofList, + PreferencesManager.STATE_PROJECT_CONTEXT + ); + }); // Use the file icon providers WorkingSetView.useIconProviders(data, $link); - $newItem = $("
  • ").append($link); + // Create list item with link and remove button + $newItem = $("
  • ").append($link).append($removeBtn); if (indxInWS !== -1) { // in working set show differently $newItem.addClass("working-set"); @@ -285,7 +318,7 @@ define(function (require, exports, module) { // Use the class providers(git e.t.c) WorkingSetView.useClassProviders(data, $newItem); - // If a file is dirty , mark it in the list + // If a file is dirty, mark it in the list if (_isOpenAndDirty(fileEntry)) { $(dirtyDotTemplate).prependTo($newItem); } diff --git a/src/styles/Extn-NavigationAndHistory.less b/src/styles/Extn-NavigationAndHistory.less index 1e7a1567f4..21b81b5f41 100644 --- a/src/styles/Extn-NavigationAndHistory.less +++ b/src/styles/Extn-NavigationAndHistory.less @@ -236,4 +236,27 @@ #mrof-container .footer { background-color: #2c2c2c; border-top: 1px solid #343434; +} + +#mrof-list li { + position: relative; +} + +.remove-file { + position: absolute; + right: 8px; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + opacity: 0.6; + font-size: 18px; + display: none; +} + +#mrof-list li:hover .remove-file { + display: block; +} + +.remove-file:hover { + opacity: 1; } \ No newline at end of file From 129e8f80148c010cdccc2872c5c0460245c5356c Mon Sep 17 00:00:00 2001 From: Pluto Date: Wed, 8 Jan 2025 22:15:20 +0530 Subject: [PATCH 2/5] fix: files active in working set cannot be removed --- .../NavigationAndHistory/main.js | 50 +++++++++++-------- 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/src/extensionsIntegrated/NavigationAndHistory/main.js b/src/extensionsIntegrated/NavigationAndHistory/main.js index 61c75d0cf2..91bd168af2 100644 --- a/src/extensionsIntegrated/NavigationAndHistory/main.js +++ b/src/extensionsIntegrated/NavigationAndHistory/main.js @@ -221,7 +221,7 @@ define(function (require, exports, module) { } function _createFileEntries($mrofList) { - var data, fileEntry, $link, $newItem; + var data, fileEntry, $link, $newItem, $removeBtn; // Iterate over the MROF list and create the pop over UI items // If we are in split view we might want to show the panes corresponding to the entries @@ -270,35 +270,41 @@ define(function (require, exports, module) { ViewUtils.getFileEntryDisplay({name: FileUtils.getBaseName(value.file)}) ); - // Create remove button - var $removeBtn = $("×").on("click", function(e) { - e.preventDefault(); - e.stopPropagation(); + // Create remove button only for files not in working set + $removeBtn = null; + if (indxInWS === -1) { + $removeBtn = $("×").on("click", function(e) { + e.preventDefault(); + e.stopPropagation(); - // Find and remove the entry from _mrofList - var filePath = $(this).parent().data("path"); - var paneId = $(this).parent().data("paneId"); + // Find and remove the entry from _mrofList + var filePath = $(this).parent().data("path"); + var paneId = $(this).parent().data("paneId"); - _mrofList = _mrofList.filter(function(entry) { - return !(entry && entry.file === filePath && entry.paneId === paneId); - }); + _mrofList = _mrofList.filter(function(entry) { + return !(entry && entry.file === filePath && entry.paneId === paneId); + }); - // Remove the list item from UI - $(this).parent().remove(); + // Remove the list item from UI + $(this).parent().remove(); - // Update preferences - PreferencesManager.setViewState( - OPEN_FILES_VIEW_STATE, - _mrofList, - PreferencesManager.STATE_PROJECT_CONTEXT - ); - }); + // Update preferences + PreferencesManager.setViewState( + OPEN_FILES_VIEW_STATE, + _mrofList, + PreferencesManager.STATE_PROJECT_CONTEXT + ); + }); + } // Use the file icon providers WorkingSetView.useIconProviders(data, $link); - // Create list item with link and remove button - $newItem = $("
  • ").append($link).append($removeBtn); + // Create list item with link and conditionally add remove button + $newItem = $("
  • ").append($link); + if ($removeBtn) { + $newItem.append($removeBtn); + } if (indxInWS !== -1) { // in working set show differently $newItem.addClass("working-set"); From 43e860033ecb1f6a6a5e9c0c14597f4703b9d51a Mon Sep 17 00:00:00 2001 From: Pluto Date: Wed, 8 Jan 2025 22:52:24 +0530 Subject: [PATCH 3/5] fix: improve icon visibility in light and dark themes --- src/styles/Extn-NavigationAndHistory.less | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/styles/Extn-NavigationAndHistory.less b/src/styles/Extn-NavigationAndHistory.less index 21b81b5f41..4507858a87 100644 --- a/src/styles/Extn-NavigationAndHistory.less +++ b/src/styles/Extn-NavigationAndHistory.less @@ -243,20 +243,24 @@ } .remove-file { + color: #adb9bd; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); cursor: pointer; opacity: 0.6; - font-size: 18px; + font-size: 20px; + font-weight: 500; display: none; } #mrof-list li:hover .remove-file { + color: #fff; display: block; } .remove-file:hover { + color: #fff; opacity: 1; } \ No newline at end of file From 3a240a4670955b375da9dbd5c3b926b54c79531b Mon Sep 17 00:00:00 2001 From: Pluto Date: Thu, 9 Jan 2025 02:16:06 +0530 Subject: [PATCH 4/5] fix: move cross icon towards left for better accessibility --- src/styles/Extn-NavigationAndHistory.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/Extn-NavigationAndHistory.less b/src/styles/Extn-NavigationAndHistory.less index 4507858a87..030d9cf555 100644 --- a/src/styles/Extn-NavigationAndHistory.less +++ b/src/styles/Extn-NavigationAndHistory.less @@ -84,7 +84,7 @@ line-height: 15px; padding: 3px; cursor: default; - padding-left: 10px; + padding-left: 20px; width: 100%; box-sizing: border-box; text-overflow: ellipsis; @@ -104,14 +104,14 @@ background: transparent; color:#8fddff; box-shadow: none !important; - padding-left: 10px; + padding-left: 20px; } #mrof-container #mrof-list > li.highlight > a.mroitem { background: transparent; color:#8fddff; box-shadow: none !important; - padding-left: 10px; + padding-left: 20px; } #mrof-container #mrof-list > li.highlight > a.mroitem > .extension { @@ -245,7 +245,7 @@ .remove-file { color: #adb9bd; position: absolute; - right: 8px; + left: 6px; top: 50%; transform: translateY(-50%); cursor: pointer; From cbb193ce7596419bcaab6526459efd0d69b1ce36 Mon Sep 17 00:00:00 2001 From: Pluto Date: Thu, 9 Jan 2025 02:25:26 +0530 Subject: [PATCH 5/5] chore: nest css styles to prevent polluting the global css styles --- src/styles/Extn-NavigationAndHistory.less | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/styles/Extn-NavigationAndHistory.less b/src/styles/Extn-NavigationAndHistory.less index 030d9cf555..950fc4a891 100644 --- a/src/styles/Extn-NavigationAndHistory.less +++ b/src/styles/Extn-NavigationAndHistory.less @@ -238,11 +238,7 @@ border-top: 1px solid #343434; } -#mrof-list li { - position: relative; -} - -.remove-file { +#mrof-container #mrof-list > li .remove-file { color: #adb9bd; position: absolute; left: 6px; @@ -255,12 +251,12 @@ display: none; } -#mrof-list li:hover .remove-file { +#mrof-container #mrof-list > li:hover .remove-file { color: #fff; display: block; } -.remove-file:hover { +#mrof-container #mrof-list > li .remove-file:hover { color: #fff; opacity: 1; } \ No newline at end of file