AOSSIE-Org / AOSSIE-Org/PictoPy

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

Đang mở
#633 7 bình luận 0 reaction 1 người được giao Được @JaYRaNa213 nhận Xem trên GitHub
enhancement frontend UI
Ngôn ngữ chính
Python
Star
283
Fork
679
Merge trung bình
7 ngày 2 giờ
Pull request đã merge (30 ngày)
3

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.