From 8d7aeb3edd870e98542b78d8fef6724aef658d04 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Mon, 23 Aug 2021 15:37:51 +0200 Subject: [PATCH] #61 - Implementation of recently modified files --- CHANGELOG.md | 4 ++ assets/media/styles.css | 44 +++++++++++++++++ src/extension.ts | 10 +++- src/viewpanel/ViewPanel.tsx | 21 +++++++++ src/viewpanel/components/BaseView.tsx | 9 ++-- src/viewpanel/components/FileList.tsx | 47 +++++++++++++------ .../components/Icons/MarkdownIcon.tsx | 9 ++++ src/webview/ExplorerView.ts | 2 +- 8 files changed, 126 insertions(+), 20 deletions(-) create mode 100644 src/viewpanel/components/Icons/MarkdownIcon.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 8b112d7a..0e66424a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Change Log +## [2.6.0] + +- [#61](https://github.com/estruyf/vscode-front-matter/issues/61): List of recently modified files + ## [2.5.1] - 2020-08-23 - Fix typo in the `package.json` file for the preview command diff --git a/assets/media/styles.css b/assets/media/styles.css index f062f8f9..3999bf84 100644 --- a/assets/media/styles.css +++ b/assets/media/styles.css @@ -357,4 +357,48 @@ .table__cell__validation .warning { color: #E6AF2E; +} + +/* File list */ +.file_list vscode-label { + border-bottom: 1px solid var(--vscode-foreground); +} + +.file_list__items { + padding: 0; + list-style: none; +} + +.file_list__items__item { + color: var(--vscode-foreground); + font-size: var(--vscode-font-size); + font-weight: var(--vscode-font-weight); + cursor: pointer; + height: 22px; + line-height: 22px; + margin: 0 -1rem; + padding: 0 1rem; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.file_list__items__item:hover { + background-color: var(--vscode-list-hoverBackground); + color: var(--vscode-list-hoverForeground); + cursor: pointer; +} + +.file_list__items__item svg { + display: block; + flex-shrink: 0; + height: 20px; + width: 20px; + margin-right: .25rem; +} + +.file_list__items__item span { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } \ No newline at end of file diff --git a/src/extension.ts b/src/extension.ts index 62d35d59..005388b0 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -127,12 +127,20 @@ export async function activate({ subscriptions, extensionUri, extensionPath }: v editDebounce = debounceCallback(); subscriptions.push(vscode.workspace.onDidChangeTextDocument(triggerFileChange)); + // Listener for file saves + subscriptions.push(vscode.workspace.onDidSaveTextDocument((doc: vscode.TextDocument) => { + if (doc.languageId === 'markdown') { + // Optimize the list of recently changed files + ExplorerView.getInstance().getSettings(); + } + })); + // Listener for setting changes subscriptions.push(vscode.workspace.onDidChangeConfiguration(MarkdownFoldingProvider.triggerHighlighting)); // Webview for preview Preview.init(); - subscriptions.push(vscode.commands.registerCommand('frontMatter.preview', () => Preview.open(extensionPath) )); + subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.preview, () => Preview.open(extensionPath) )); // Subscribe all commands subscriptions.push( diff --git a/src/viewpanel/ViewPanel.tsx b/src/viewpanel/ViewPanel.tsx index 40d46fc3..4973ac24 100644 --- a/src/viewpanel/ViewPanel.tsx +++ b/src/viewpanel/ViewPanel.tsx @@ -10,6 +10,7 @@ import { OtherActions } from './components/OtherActions'; import { SeoStatus } from './components/SeoStatus'; import { Spinner } from './components/Spinner'; import { TagPicker } from './components/TagPicker'; +import { FileList } from './components/FileList'; import useMessages from './hooks/useMessages'; import { TagType } from './TagType'; @@ -78,6 +79,26 @@ export const ViewPanel: React.FunctionComponent = (props: React } + { + (settings?.contentInfo && settings?.contentInfo.length > 0) && ( + +
+ { + settings.contentInfo.map(folder => ( + <> + {folder.lastModified && ( +
+ +
+ )} + + )) + } +
+ + ) + } + diff --git a/src/viewpanel/components/BaseView.tsx b/src/viewpanel/components/BaseView.tsx index 4e3a460d..22a7ff57 100644 --- a/src/viewpanel/components/BaseView.tsx +++ b/src/viewpanel/components/BaseView.tsx @@ -6,6 +6,7 @@ import { Collapsible } from './Collapsible'; import { GlobalSettings } from './GlobalSettings'; import { OtherActions } from './OtherActions'; import { FileList } from './FileList'; +import { VsLabel } from './VscodeComponents'; export interface IBaseViewProps { settings: PanelSettings | undefined; @@ -36,15 +37,15 @@ export const BaseView: React.FunctionComponent = ({settings}: Re { settings?.contentInfo && ( - +
{ settings.contentInfo.map(folder => (
- {folder.title}: {folder.files} file{folder.files > 1 ? 's' : ''} - { - folder.lastModified ? : null + folder.lastModified ? : ( + {folder.title}: {folder.files} file{folder.files > 1 ? 's' : ''} + ) }
)) diff --git a/src/viewpanel/components/FileList.tsx b/src/viewpanel/components/FileList.tsx index 6aa367b8..10689329 100644 --- a/src/viewpanel/components/FileList.tsx +++ b/src/viewpanel/components/FileList.tsx @@ -2,30 +2,49 @@ import * as React from 'react'; import { FileInfo } from '../../models'; import { CommandToCode } from '../CommandToCode'; import { MessageHelper } from '../helper/MessageHelper'; +import { FileIcon } from './Icons/FileIcon'; +import { MarkdownIcon } from './Icons/MarkdownIcon'; +import { VsLabel } from './VscodeComponents'; export interface IFileListProps { + folderName: string; files: FileInfo[]; + totalFiles: number; } -export const FileList: React.FunctionComponent = ({files}: React.PropsWithChildren) => { +export const FileList: React.FunctionComponent = ({files, folderName, totalFiles}: React.PropsWithChildren) => { const openFile = (filePath: string) => { MessageHelper.sendMessage(CommandToCode.openInEditor, filePath); }; + + if (!files || files.length === 0) { + return null; + } return ( - <> - { - files && ( -
    - { - files.map(file => ( -
  • openFile(file.filePath)}>{file.fileName}
    • - )) - } -
- ) - } - +
+ {folderName} - file{files.length === 1 ? '' : 's'}: {totalFiles} + +
    + { + files.map(file => ( +
  • openFile(file.filePath)}> + { + (file.fileName.endsWith('.md') || file.fileName.endsWith('.mdx')) ? ( + + ) : ( + + ) + } + + {file.fileName} +
    • + )) + } +
+
); }; \ No newline at end of file diff --git a/src/viewpanel/components/Icons/MarkdownIcon.tsx b/src/viewpanel/components/Icons/MarkdownIcon.tsx new file mode 100644 index 00000000..b342b232 --- /dev/null +++ b/src/viewpanel/components/Icons/MarkdownIcon.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +export interface IMarkdownIconProps {} + +export const MarkdownIcon: React.FunctionComponent = (props: React.PropsWithChildren) => { + return ( + + ); +}; \ No newline at end of file diff --git a/src/webview/ExplorerView.ts b/src/webview/ExplorerView.ts index ee1794ac..9c22f4eb 100644 --- a/src/webview/ExplorerView.ts +++ b/src/webview/ExplorerView.ts @@ -286,7 +286,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable { /** * Retrieve the extension settings */ - private async getSettings() { + public async getSettings() { const config = SettingsHelper.getConfig(); this.postWebviewMessage({