🚀 Merge pull request #101 from geriyoco/main

v1.0.0

.vscode/settings.json

@@ -9,5 +9,9 @@
         "dist": true // set this to false to include "dist" folder in search results
     },
     // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-    "typescript.tsc.autoDetect": "off"
+    "typescript.tsc.autoDetect": "off",
+    "cSpell.words": [
+        "codicon",
+        "codicons"
+    ]
 }

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## [1.0.0] - 2022-09-12
+### Added
+- Support sorting by name, type, size, created time, and modified time
+- Support supporting in both ascending order and descending order
+- Folders are only sorted by name in ascending order
+
+### Changed
+- Separated the "collapse all" and "expand all" buttons
+- Dropped support for web extension to improve performance (web support will be added back in the future)
+
+### Fixed
+- Icons are now consistent with the VS Code's codicons.
+- Gallery view is automatically updated when an image is added, modified, or deleted. However, when changes are made to the folder structure, the user needs to manually refresh the view by reopening the gallery.
+
 ## [0.4.1] - 2022-08-01
 ### Fixed
 - Buttons to expand/collapse all sub-folders were not showing up (temporary fix without using [@vscode/codicons](https://github.com/microsoft/vscode-codicons))

README.md

@@ -1,20 +1,17 @@
 # Image Gallery
 [![.github/workflows/vsce_publish.yml](https://github.com/geriyoco/vscode-image-gallery/actions/workflows/vsce_publish.yml/badge.svg?branch=production)](https://github.com/geriyoco/vscode-image-gallery/actions/workflows/vsce_publish.yml)
 
-A light-weighted extension that brings you the best image browsing experience in VS Code.
+A light-weighted extension that brings you the best image browsing experience in VS Code, especially for remote / cloud development.
 
 ## Highlights
-- Excellent for image browsing on a remote server (e.g. via [SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh))
-- Gallery view of all images in the selected folder, including its sub-folders.
-- Smooth panning and zooming when viewing individual images.
-- Auto-refresh when images are modified, added, or deleted
-- Extension size less than 1 MB
+- **Remote**: Excellent for browsing images on a cloud (e.g. via [SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh))
+- **Gallery**: Collapsible grid view of all images in the selected folder, including its sub-folders
+- **Performance**: Lazy loading of images (tested on 10k images with a start-up time of 1.5s)
+- **Refresh**: Automatically update view as images are modified, added, or deleted
+- **Light**: Extension size less than 500 kB, installation time is typically negligible
 
-### Gallery view
-![demo-gallery](docs/demo-gallery.gif)
-
-### Panning and zooming
-![demo-editor](docs/demo-editor.gif)
+## Usage
+![demo](docs/demo-v1.0.0.gif)
 
 See [here](docs/photo_credits.md) for the photo credits.
 

media/gallery.css

@@ -33,7 +33,7 @@ html {
 	position: relative;
 }
 
-.tooltiptext {
+.tooltip-text {
 	position: absolute;
 	z-index: 1;
 	visibility: hidden;
@@ -48,12 +48,21 @@ html {
 	white-space: pre;
 }
 
-.tooltip:hover .tooltiptext {
+.tooltip:hover .tooltip-text {
 	opacity: 0.8;
 	visibility: visible;
 	transition-delay: 1s;
 }
 
+button.codicon+.tooltip-text {
+	width: auto;
+	transform: translate(5rem, 1.8rem);
+	background-color: hsl(240, 1%, 14%);
+	padding: 6px;
+	border-radius: 0px;
+	border: 2px solid white;
+}
+
 .image-container:hover {
 	box-shadow: 0 0 10px white;
 }
@@ -127,17 +136,52 @@ html {
 	background-color: hsl(0, 0%, 17%);
 }
 
+.toolbar-item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
 .codicon {
 	padding: 3px;
-	width: 20px;
-	height: 20px;
+	border: 0;
 	background-color: hsl(0, 0%, 17%);
-	border-color: white;
-	border-width: 1px;
 	color: white;
 }
 
 .codicon:hover {
 	background-color: hsl(180, 0%, 21%);
-	border-radius: 3px;
+	border-radius: 5px;
+}
+
+.sort-options {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-left: 30px;
+}
+
+.sort-options span {
+	font-size: 15px;
+	margin-left: 10px;
+	margin-right: 10px;
+	align-items: center;
+	justify-content: center;
+}
+
+.dropdown {
+	padding: 6px;
+	background-color: hsl(0, 0%, 23%);
+	color: white;
+	border-width: 0px;
+}
+
+.dropdown:checked {
+	border-width: 0px;
+}
+
+select option {
+	background-color: hsl(0, 0%, 23%);
+	color: white;
+	border-radius: 0px;
 }