From 266dfe15a310f238fd4656dd3ca296d1e1a27b45 Mon Sep 17 00:00:00 2001 From: cfs4819 Date: Tue, 23 Jan 2024 12:02:53 +0800 Subject: [PATCH 1/3] Improve sftp visual effects --- .../src/components/sftpPanel.component.scss | 6 +++ .../src/components/sftpPanel.component.ts | 52 +++++++++++++++++++ 2 files changed, 58 insertions(+) diff --git a/tabby-ssh/src/components/sftpPanel.component.scss b/tabby-ssh/src/components/sftpPanel.component.scss index 5a8b3ea7..64510b94 100644 --- a/tabby-ssh/src/components/sftpPanel.component.scss +++ b/tabby-ssh/src/components/sftpPanel.component.scss @@ -29,6 +29,12 @@ font-weight: bold; } + .list-group-item-action { + &:hover { + box-shadow: 0 0 0 1px white; + } + } + .mode, .size, .date { font-family: monospace; opacity: .5; diff --git a/tabby-ssh/src/components/sftpPanel.component.ts b/tabby-ssh/src/components/sftpPanel.component.ts index b24134d6..67918c77 100644 --- a/tabby-ssh/src/components/sftpPanel.component.ts +++ b/tabby-ssh/src/components/sftpPanel.component.ts @@ -81,6 +81,46 @@ export class SFTPPanelComponent { a.name.localeCompare(b.name)) } + getFileType(fileExtension: string): string { + const codeExtensions = ["js", "ts", "py", "java", "cpp", "h", "cs", "html", "css", "rb", "php", "swift", "go", "kt", "sh", "json", "cc", + "c", "xml"]; + const imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp"]; + const pdfExtensions = ["pdf"]; + const archiveExtensions = ["zip", "rar", "tar", "gz"]; + const wordExtensions = ["doc", "docx"]; + const videoExtensions = ["mp4", "avi", "mkv", "mov"]; + const powerpointExtensions = ["ppt", "pptx"]; + const textExtensions = ["txt", "log"]; + const audioExtensions = ["mp3", "wav", "flac"]; + const excelExtensions = ["xls", "xlsx"]; + + const lowerCaseExtension = fileExtension.toLowerCase(); + + if (codeExtensions.includes(lowerCaseExtension)) { + return "code"; + } else if (imageExtensions.includes(lowerCaseExtension)) { + return "image"; + } else if (pdfExtensions.includes(lowerCaseExtension)) { + return "pdf"; + } else if (archiveExtensions.includes(lowerCaseExtension)) { + return "archive"; + } else if (wordExtensions.includes(lowerCaseExtension)) { + return "word"; + } else if (videoExtensions.includes(lowerCaseExtension)) { + return "video"; + } else if (powerpointExtensions.includes(lowerCaseExtension)) { + return "powerpoint"; + } else if (textExtensions.includes(lowerCaseExtension)) { + return "text"; + } else if (audioExtensions.includes(lowerCaseExtension)) { + return "audio"; + } else if (excelExtensions.includes(lowerCaseExtension)) { + return "excel"; + } else { + return "unknown"; + } + } + getIcon (item: SFTPFile): string { if (item.isDirectory) { return 'fas fa-folder text-info' @@ -88,6 +128,18 @@ export class SFTPPanelComponent { if (item.isSymlink) { return 'fas fa-link text-warning' } + const fileMatch = /\.([^.]+)$/.exec(item.name); + const extension = fileMatch?fileMatch[1]:null; + if (extension !== null) { + const fileType = this.getFileType(extension); + + switch (fileType) { + case "unknown": + return 'fas fa-file'; + default: + return `fa-solid fa-file-${fileType} `; + } + } return 'fas fa-file' } From cf09d95602899b014f54086f11c08067355a2332 Mon Sep 17 00:00:00 2001 From: cfs4819 Date: Tue, 23 Jan 2024 12:27:49 +0800 Subject: [PATCH 2/3] Improve sftp visual effects --- .../src/components/sftpPanel.component.ts | 65 +++++++++---------- 1 file changed, 32 insertions(+), 33 deletions(-) diff --git a/tabby-ssh/src/components/sftpPanel.component.ts b/tabby-ssh/src/components/sftpPanel.component.ts index 67918c77..e9662443 100644 --- a/tabby-ssh/src/components/sftpPanel.component.ts +++ b/tabby-ssh/src/components/sftpPanel.component.ts @@ -81,43 +81,42 @@ export class SFTPPanelComponent { a.name.localeCompare(b.name)) } - getFileType(fileExtension: string): string { - const codeExtensions = ["js", "ts", "py", "java", "cpp", "h", "cs", "html", "css", "rb", "php", "swift", "go", "kt", "sh", "json", "cc", - "c", "xml"]; - const imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp"]; - const pdfExtensions = ["pdf"]; - const archiveExtensions = ["zip", "rar", "tar", "gz"]; - const wordExtensions = ["doc", "docx"]; - const videoExtensions = ["mp4", "avi", "mkv", "mov"]; - const powerpointExtensions = ["ppt", "pptx"]; - const textExtensions = ["txt", "log"]; - const audioExtensions = ["mp3", "wav", "flac"]; - const excelExtensions = ["xls", "xlsx"]; - - const lowerCaseExtension = fileExtension.toLowerCase(); - + getFileType (fileExtension: string): string { + const codeExtensions = ['js', 'ts', 'py', 'java', 'cpp', 'h', 'cs', 'html', 'css', 'rb', 'php', 'swift', 'go', 'kt', 'sh', 'json', 'cc', 'c', 'xml'] + const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp'] + const pdfExtensions = ['pdf'] + const archiveExtensions = ['zip', 'rar', 'tar', 'gz'] + const wordExtensions = ['doc', 'docx'] + const videoExtensions = ['mp4', 'avi', 'mkv', 'mov'] + const powerpointExtensions = ['ppt', 'pptx'] + const textExtensions = ['txt', 'log'] + const audioExtensions = ['mp3', 'wav', 'flac'] + const excelExtensions = ['xls', 'xlsx'] + + const lowerCaseExtension = fileExtension.toLowerCase() + if (codeExtensions.includes(lowerCaseExtension)) { - return "code"; + return 'code' } else if (imageExtensions.includes(lowerCaseExtension)) { - return "image"; + return 'image' } else if (pdfExtensions.includes(lowerCaseExtension)) { - return "pdf"; + return 'pdf' } else if (archiveExtensions.includes(lowerCaseExtension)) { - return "archive"; + return 'archive' } else if (wordExtensions.includes(lowerCaseExtension)) { - return "word"; + return 'word' } else if (videoExtensions.includes(lowerCaseExtension)) { - return "video"; + return 'video' } else if (powerpointExtensions.includes(lowerCaseExtension)) { - return "powerpoint"; + return 'powerpoint' } else if (textExtensions.includes(lowerCaseExtension)) { - return "text"; + return 'text' } else if (audioExtensions.includes(lowerCaseExtension)) { - return "audio"; + return 'audio' } else if (excelExtensions.includes(lowerCaseExtension)) { - return "excel"; + return 'excel' } else { - return "unknown"; + return 'unknown' } } @@ -128,16 +127,16 @@ export class SFTPPanelComponent { if (item.isSymlink) { return 'fas fa-link text-warning' } - const fileMatch = /\.([^.]+)$/.exec(item.name); - const extension = fileMatch?fileMatch[1]:null; + const fileMatch = /\.([^.]+)$/.exec(item.name) + const extension = fileMatch ? fileMatch[1] : null if (extension !== null) { - const fileType = this.getFileType(extension); - + const fileType = this.getFileType(extension) + switch (fileType) { - case "unknown": - return 'fas fa-file'; + case 'unknown': + return 'fas fa-file' default: - return `fa-solid fa-file-${fileType} `; + return `fa-solid fa-file-${fileType} ` } } return 'fas fa-file' From fec5d809b7b3e785c942009f74a4fcbc2560e623 Mon Sep 17 00:00:00 2001 From: Eugene Date: Tue, 23 Jan 2024 20:33:28 +0100 Subject: [PATCH 3/3] style tweak --- tabby-ssh/src/components/sftpPanel.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tabby-ssh/src/components/sftpPanel.component.scss b/tabby-ssh/src/components/sftpPanel.component.scss index 64510b94..b321d53b 100644 --- a/tabby-ssh/src/components/sftpPanel.component.scss +++ b/tabby-ssh/src/components/sftpPanel.component.scss @@ -31,7 +31,7 @@ .list-group-item-action { &:hover { - box-shadow: 0 0 0 1px white; + background: rgba(white, .05); } }