Feat tab view - Githubissues

foss42 / apidash

API Dash is a beautiful open-source cross-platform API Client built using Flutter which can help you easily create & customize your API requests, visually inspect responses and generate API integration code. It is supported for macOS, Windows, Linux, Android & iOS. A lightweight alternative to postman/insomnia.

https://apidash.dev

Apache License 2.0

1.66k stars 317 forks source link

Feat tab view #327

Open yashas-hm opened 7 months ago

yashas-hm commented 7 months ago

PR Description

Tab View implementation for requests

Related Issues

Related Issue #306
Closes #306

Checklist

[x] I have gone through the contributing guide
[x] I have updated my branch and synced it with project main branch before making this PR
[x] I have run the tests (flutter test) and all tests are passing

Added/updated tests?

[x] No, and this is why: Not sure which test cases to add

https://github.com/foss42/apidash/assets/64674824/989a552c-a76d-4b44-a7f9-1ddcc78a03f6

yashas-hm commented 7 months ago

@animator please review

animator commented 7 months ago

The UI can be made better. It is not looking professional.

yashas-hm commented 7 months ago

Sure will work on it.

yashas-hm commented 7 months ago

How does this look?

ashitaprasad commented 7 months ago

The line below the tabs is not looking good.

yashas-hm commented 7 months ago

ashitaprasad commented 7 months ago

Looks better .. but the goal is not to make it like chrome tabs (smaller & smaller), but more like VS Code tabs that do not shrink beyond a certain width (so that it does not hamper readability) & is scrollable. Also, looks like you have not taken the latest pull of the main branch as we added a top bar above the URL box .. see https://github.com/foss42/apidash/issues/307 So you need to redesign keeping this in mind.

yashas-hm commented 7 months ago

The mentioned issue is not merged with main yet. But ill keep that bar in ming and redesign accordingly. Thanks for the clarity of design implementation.

yashas-hm commented 7 months ago

VS code has an Edgy and sharp look which conflicts with the current app curved designs.

animator commented 7 months ago

@yashas-hm Only the protocol selection dropdown is not merged. The top bar containing the name of the request and the button to rename it is already in the main branch.

animator commented 7 months ago

You are not suggested to copy the exact design of VS Code tabs .. You should take a look at it as to how it functions and adapt it to our design.

yashas-hm commented 7 months ago

I had removed that for testing purposes. Will include the rename button besides the tab as having a separate column below the tab view doesn't look good with the name of the request coming multiple times.

Also can the feature #307 be redesigned like the image below as it would be much better option to place the dropdown in request editor pane.

Screenshot 2024-03-21 at 6 18 52 PM

yashas-hm commented 7 months ago

yashas-hm commented 7 months ago

Will push changes once design finalised.

mmjsmohit commented 7 months ago

Hi @yashas-hm! The top bar has the protocol selection dropdown, the request name and a rename button as shown in the following image. Screenshot from 2024-03-24 13-01-16

yashas-hm commented 7 months ago

I had removed that for testing purposes. Will include the rename button besides the tab as having a separate column below the tab view doesn't look good with the name of the request coming multiple times.

Also can the feature #307 be redesigned like the image below as it would be much better option to place the dropdown in request editor pane.

Hi @mmjsmohit can the dropdown be shifted in the request editor pane? As when including the tab view the name of request coming multiple times would not look pleasing according to me.

If @animator @ashitaprasad and you are ok with the double names under the tabview then I can Implement accordingly.

Current:

With topbar for protocol selection

And I am proposing something like this: Note: This is just UI i have not implemented the dropdown

mmjsmohit commented 7 months ago

Since the type of protocol used alters the rest of the UI, including that of the request and response pane, I think it is not appropriate to put it inside the request pane.

yashas-hm commented 7 months ago

Ok then will make the changes accordingly thanks.

yashas-hm commented 7 months ago

Final Design:

animator commented 7 months ago

How is it looking on Windows .. We have the minimize maximize and close buttons on the top right.

yashas-hm commented 7 months ago

I have a Mac Silicon so not able to run Windows as a VM but will get a friend to test and will send the screenshot.

yashas-hm commented 7 months ago

Windows

animator commented 7 months ago

The padding at the top above the tabs is not looking good.

yashas-hm commented 7 months ago

I have added the top padding to collection panel too for windows before it was not there only in mac. We can add name of the app (APIDash and logo in the top space so that it is not empty., most desktop apps have that.

Else the tabs will be merged with the action buttons on top in windows.

yashas-hm commented 7 months ago

Windows:

MacOS: