dock-spawn-ts icon indicating copy to clipboard operation
dock-spawn-ts copied to clipboard

How to understand the different grid elements.

Open abalter opened this issue 2 years ago • 6 comments

There seem to be at least two different kinds of grid elements. In the IDE demo, there is an area with some source code tabs, with the tabs at the top. There are also panels which have a persistent header at the top and tabs at the bottom. When one of those tabs is clicked the header title changes to reflect which was chosen. Also, in these (the inverted tabs with header), the close "X" is at the top right of the header, but applies to the currently active tab.

It would be great to have some documentation about the different kinds of panels and tabs, as well as how to integrate other features such as menus, etc.

abalter avatar Dec 11 '22 06:12 abalter

There is a bit of documentation here: https://node-projects.github.io/dock-spawn-ts/

But if you'd like, feel free to add more :-) They UI mostly likes to mimic the UI of Visual Studio. So you have similar containers as there.

jogibear9988 avatar Dec 11 '22 07:12 jogibear9988

If I can figure out how to do things I'll make notes and maybe could create a read-the-docs page.

abalter avatar Dec 11 '22 08:12 abalter

Have you also seen our designer, where we use dockspawn-ts in the sample? see: https://node-projects.github.io/web-component-designer-demo/index.html

jogibear9988 avatar Dec 11 '22 22:12 jogibear9988

I did, but it wasn't working. I just tried it in Edge as opposed to Firefox, and now I see! I'll play around with it. Looks exciting.

...Later... That is really cool! I think you are on your way to filling a great niche between BoxySVG and Gravit and just working in code. I've used those two programs for designing SVG stuff (like for my wife's website), but I was always going back and forth between the graphical and a code editor.

Also, other than two things, I think this has all of the capabilities I'm looking for.

  1. Your app, like most apps, including data science apps, has a global nav/menu across the top. Not a deal breaker. However, almost all the controls generally apply only to the source code edition. I would like to be able to put a menu on the header bar of a collection (of text or non-text panels), or maybe even the title bar of each non-text panel. It seems like this could save space.

  2. Being able to move groups of panels together as in #72. The reason is that I might want to move the source editing to a different section of the app. I should be able to move them together. Or, if I have a group of non-text panels (say file explorer, help files, package manager) that I like to have together, I'd like to be able to move them as a block to a new area. Also not a deal breaker.

Based on what I see here, I think I'm going to actually start building this out.

Also, I may use one of these FOSS Vanilla JS UI libraries for specific elements:

  • https://github.com/vitmalina/w2ui
  • https://github.com/tabler/tabler

This will only be just the framework. I have very little idea how I will implement any functionality---especially when I'm not really an app programmer. My hope is that if I can show proof-of-principle, I can motivate others to jump onboard.

abalter avatar Dec 11 '22 23:12 abalter

The designer works also in firefox, but only nightly at the moment. Cause I use "import assertions" wich have not yet landed in normal firefox. But if someone uses a build chain to deploy their site, it is no problem for them. The Designer sample, also is no full application it's only a demonstration whats possible.

The move of tab groups is not so easy, as I've written. The multi Slection is the easy part, but that we do not support docking in dialogs is the deal braker. It could be possible, but I don't know how many refactoring would be needed at the moment.

It would be no hard task to add the posibility to change the tab headers. If you know exactly what you need, we can look how to add this.

The contextmenu change is already possible: TabHandle.createContextMenuContentCallback, but maybe there should be a better approach, something in the config. It was something early I added, and maybe this should be changed now.

jogibear9988 avatar Dec 12 '22 06:12 jogibear9988

@jogibear9988 -- this is a great discussion! Over the next week or two (I have a full-time job, family, and lots of other stuff), I'm going to put together a draft of the kind of application I want to make using dock-spawn-ts and we can discuss what might or might not be possible for some of the features I want.

abalter avatar Dec 12 '22 06:12 abalter