AOSSIE-Org / AOSSIE-Org/PictoPy

Feat:Add View Mode Toggle (Grid / List / Masonry) for Home page

Aperta
#633 7 commenti 0 reazioni 1 assegnatario Rivendicata da @JaYRaNa213 Vedi su GitHub
enhancement frontend UI
Lingua principale
Python
Stelle
283
Fork
679
Merge medio
7g 2h
PR unite (30g)
3

Descrizione

### ****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

Image

#### List View

Image

#### Masonry View

Image

### 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?

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.