- Feature: Add a thumbnail corner radius slider to the Change View co…

resources/style/themes.scss

@@ -60,7 +60,7 @@
   color: var(--text-color);
   background: var(--background-color);
 
-  --thumbnail-radius: 0.5rem;
+  --thumbnail-radius: 0.25rem;
 }
 
 // Scrollbar themes

src/frontend/containers/AppToolbar/Menus.tsx

@@ -46,6 +46,9 @@ export const ViewCommand = () => {
       <MenuDivider />
 
       <ThumbnailSizeSliderMenuItem />
+      <br />
+      <ThumbnailRadiusSliderMenuItem />
+      <br />
       <ThumbnailPaddingSizeSliderMenuItem />
     </MenuButton>
   );
@@ -153,6 +156,60 @@ const thumbnailSizeOptions = [
   { value: 608 },
 ];
 
+const thumbnailRadiusOptions = [
+  { value: 0, label: '0%' },
+  { value: 1 },
+  { value: 2 },
+  { value: 3 },
+  { value: 4 },
+  { value: 5 },
+  { value: 6 },
+  { value: 7 },
+  { value: 8 },
+  { value: 9 },
+  { value: 10, label: '10%' },
+  { value: 11 },
+  { value: 12 },
+  { value: 13 },
+  { value: 14 },
+  { value: 15 },
+  { value: 16 },
+  { value: 17 },
+  { value: 18 },
+  { value: 19 },
+  { value: 20, label: '20%' },
+  { value: 21 },
+  { value: 22 },
+  { value: 23 },
+  { value: 24 },
+  { value: 25 },
+  { value: 26 },
+  { value: 27 },
+  { value: 28 },
+  { value: 29 },
+  { value: 30, label: '30%' },
+  { value: 31 },
+  { value: 32 },
+  { value: 33 },
+  { value: 34 },
+  { value: 35 },
+  { value: 36 },
+  { value: 37 },
+  { value: 38 },
+  { value: 39 },
+  { value: 40, label: '40%' },
+  { value: 41 },
+  { value: 42 },
+  { value: 43 },
+  { value: 44 },
+  { value: 45 },
+  { value: 46 },
+  { value: 47 },
+  { value: 48 },
+  { value: 49 },
+  { value: 50, label: '50%' },
+];
+
 const thumbnailPaddingSizeOptions = [
   { value: 0, label: '0' },
   { value: 1 },
@@ -175,6 +232,16 @@ const thumbnailPaddingSizeOptions = [
   { value: 18 },
   { value: 19 },
   { value: 20, label: '20' },
+  { value: 21 },
+  { value: 22 },
+  { value: 23 },
+  { value: 24 },
+  { value: 25 },
+  { value: 26 },
+  { value: 27 },
+  { value: 28 },
+  { value: 29 },
+  { value: 30, label: '30' },
 ];
 
 export const LayoutMenuItems = observer(() => {
@@ -230,6 +297,22 @@ export const ThumbnailSizeSliderMenuItem = observer(() => {
   );
 });
 
+export const ThumbnailRadiusSliderMenuItem = observer(() => {
+  const { uiStore } = useStore();
+  return (
+    <MenuSliderItem
+      value={uiStore.thumbnailRadius}
+      label="Thumbnail Corner Radius"
+      onChange={uiStore.setThumbnailRadius}
+      id="thumbnail-padding-sizes"
+      options={thumbnailRadiusOptions}
+      min={thumbnailRadiusOptions[0].value}
+      max={thumbnailRadiusOptions[thumbnailRadiusOptions.length - 1].value}
+      step={1}
+    />
+  );
+});
+
 export const ThumbnailPaddingSizeSliderMenuItem = observer(() => {
   const { uiStore } = useStore();
   return (

src/frontend/containers/ContentView/index.tsx

@@ -27,6 +27,7 @@ const ContentView = observer(() => {
     <div
       id="content-view"
       className={`thumbnail-${uiStore.thumbnailSize} thumbnail-${uiStore.thumbnailShape}`}
+      style={{ '--thumbnail-radius': `${uiStore.thumbnailRadius}%` } as React.CSSProperties}
     >
       <ContentProgressBar />
       {fileList.length === 0 || fileDimensions.length === 0 ? <Placeholder /> : <Content />}

src/frontend/stores/UiStore.ts

@@ -141,6 +141,7 @@ type PersistentPreferenceFields =
   | 'importDirectory'
   | 'method'
   | 'thumbnailSize'
+  | 'thumbnailRadius'
   | 'largeThumbFullResThreshold'
   | 'masonryItemPadding'
   | 'thumbnailShape'
@@ -217,6 +218,7 @@ class UiStore {
   //   unnecessary conversions every time we set or read the value. Converting the index to an ID once per refetch is simpler and more efficient.
   @observable firstItem: number = 0;
   @observable thumbnailSize: ThumbnailSize | number = 'medium';
+  @observable thumbnailRadius: number = 1;
   @observable largeThumbFullResThreshold: number = 3840;
   @observable masonryItemPadding: number = 8;
   @observable thumbnailShape: ThumbnailShape = 'square';
@@ -320,10 +322,13 @@ class UiStore {
     this.thumbnailSize = size;
   }
 
+  @action.bound setThumbnailRadius(size: number): void {
+    this.thumbnailRadius = clamp(size, 0, 50);
+  }
+
   @action.bound setMasonryItemPadding(size: number): void {
-    // constrain between 0 to 20
-    const limitedValue = Math.max(0, Math.min(20, size));
-    this.masonryItemPadding = limitedValue;
+    // constrain between 0 to 30
+    this.masonryItemPadding = clamp(size, 0, 30);
   }
 
   @action.bound setThumbnailShape(shape: ThumbnailShape): void {
@@ -1385,6 +1390,9 @@ class UiStore {
         if (prefs.thumbnailSize) {
           this.setThumbnailSize(prefs.thumbnailSize);
         }
+        if (prefs.thumbnailRadius) {
+          this.setThumbnailRadius(prefs.thumbnailRadius);
+        }
         if ('largeThumbFullResThreshold' in prefs) {
           this.setLargeThumbFullResThreshold(prefs.largeThumbFullResThreshold);
         }
@@ -1486,6 +1494,7 @@ class UiStore {
       importDirectory: this.importDirectory,
       method: this.method,
       thumbnailSize: this.thumbnailSize,
+      thumbnailRadius: this.thumbnailRadius,
       largeThumbFullResThreshold: this.largeThumbFullResThreshold,
       masonryItemPadding: this.masonryItemPadding,
       thumbnailShape: this.thumbnailShape,