AOSSIE-Org / AOSSIE-Org/PictoPy

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

Ouverte
#633 7 commentaires 0 réactions 1 personne assignée Réclamée par @JaYRaNa213 Voir sur GitHub
enhancement frontend UI
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

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?

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.