apidash icon indicating copy to clipboard operation
apidash copied to clipboard

Feat tab view

Open yashas-hm opened this issue 11 months ago • 25 comments

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 avatar Mar 19 '24 11:03 yashas-hm

@animator please review

yashas-hm avatar Mar 19 '24 11:03 yashas-hm

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

animator avatar Mar 20 '24 19:03 animator

Sure will work on it.

yashas-hm avatar Mar 21 '24 02:03 yashas-hm

How does this look?

Screenshot 2024-03-21 at 10 25 32 AM

yashas-hm avatar Mar 21 '24 04:03 yashas-hm

The line below the tabs is not looking good.

ashitaprasad avatar Mar 21 '24 11:03 ashitaprasad

Screenshot 2024-03-21 at 5 26 57 PM Screenshot 2024-03-21 at 5 27 15 PM

yashas-hm avatar Mar 21 '24 11:03 yashas-hm

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.

ashitaprasad avatar Mar 21 '24 12:03 ashitaprasad

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 avatar Mar 21 '24 12:03 yashas-hm

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

yashas-hm avatar Mar 21 '24 12:03 yashas-hm

@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 avatar Mar 21 '24 12:03 animator

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.

animator avatar Mar 21 '24 12:03 animator

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 avatar Mar 21 '24 12:03 yashas-hm

Screenshot 2024-03-21 at 6 19 10 PM

yashas-hm avatar Mar 21 '24 13:03 yashas-hm

Will push changes once design finalised.

yashas-hm avatar Mar 21 '24 13:03 yashas-hm

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

mmjsmohit avatar Mar 24 '24 07:03 mmjsmohit

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

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: Screenshot 2024-03-24 at 1 17 53 PM

With topbar for protocol selection Screenshot 2024-03-24 at 1 19 27 PM

And I am proposing something like this: Note: This is just UI i have not implemented the dropdown Screenshot 2024-03-24 at 1 24 19 PM

yashas-hm avatar Mar 24 '24 07:03 yashas-hm

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.

mmjsmohit avatar Mar 24 '24 08:03 mmjsmohit

Ok then will make the changes accordingly thanks.

yashas-hm avatar Mar 24 '24 08:03 yashas-hm

Final Design:

Screenshot 2024-03-24 at 1 19 27 PM

yashas-hm avatar Mar 26 '24 03:03 yashas-hm

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

animator avatar Mar 26 '24 10:03 animator

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 avatar Mar 26 '24 10:03 yashas-hm

Windows

S1

S2

yashas-hm avatar Mar 26 '24 13:03 yashas-hm

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

animator avatar Mar 26 '24 18:03 animator

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 avatar Mar 27 '24 02:03 yashas-hm

Windows: Screenshot 2024-03-27 at 4 16 04 PM

MacOS: Screenshot 2024-03-27 at 4 16 04 PM

yashas-hm avatar Mar 27 '24 11:03 yashas-hm