AOSSIE-Org / AOSSIE-Org/PictoPy
Feat:Add View Mode Toggle (Grid / List / Masonry) for Home page
- Langage dominant
- Python
- Étoiles
- 283
- Forks
- 679
- Merge moyen
- 7 j 2 h
- PR mergées (30 j)
- 3
Description
### ****Describe** the feature**
hello @rahulharpal1603 sir
### **Description**
Currently, the gallery displays images in only one default layout.
To improve user experience and introduce more flexibility, I implemented a View Mode Toggle that allows users to switch between:
1. Grid View
2. List View
3. Masonry View
This enhancement gives users more control over how they browse images, especially for large galleries.
### What This Feature Includes
##### **1. New Redux Slice: viewMode**
File added:
```
frontend/src/features/viewMode/viewModeSlice.ts
This slice stores the selected view mode and updates the UI instantly.
```
##### 2. New Component: ViewModeToggle
###### File added:
```
frontend/src/components/ViewModeToggle.tsx
This component displays three toggle buttons (Grid, List, Masonry) and allows switching between layouts.
```
##### **3. Updated Gallery Renderer: GalleryView.tsx**
###### File updated:
```
frontend/src/components/GalleryView.tsx
This file now renders images based on the selected view mode:
```
##### **4. Updated Home Page Integration**
###### File updated:
```
frontend/src/pages/Home/Home.tsx
The view mode toggle is added above the gallery, and layout switches smoothly without affecting existing chronological mode.
```
### Why This Feature Is Useful
```
Adds flexibility and improves overall user experience
Provides multiple ways to view large image collections
Masonry layout works better for mixed aspect ratios
List layout is useful for viewing filenames and metadata
Does not interfere with the existing chronological view
```
### Files Involved
```
frontend/src/features/viewMode/viewModeSlice.ts
frontend/src/components/ViewModeToggle.tsx
frontend/src/components/GalleryView.tsx
frontend/src/pages/Home/Home.tsx ( some updates)
frontend/src/app/store.ts (reducer added)
```
### Add ScreenShots
#### Grid View
#### List View
#### Masonry View
### Record
- [x] I agree to follow this project's Code of Conduct
- [x] I want to work on this issue
### Checklist before Submitting.
- [x] Have you updated docs for it?.
- [ ] Have you added unit tests?.
- [ ] Have you made sure unit tests pass?
- [x] Have you made sure code formatting is correct?
- [x] Does it contain any style related issues?
Guide de contribution
Ouvrir le guide de contribution
Évaluation
Cette issue n'a pas encore été évaluée.