Make file tabs prettier/modernish?

[foxnoodles]

Pretty much what title says, current ones look kinda outdated, something with rounded corners and no shadow under filename should be easy to do and super quick to implement.

Thank you!

P.S. if you're looking for a UI/UX designer to refresh this project just ping me and I'll send over my Linkedin and Portfolio

[HLSiira]

I wouldn't mind adding another theme to the project for people to choose from in future, the default is the only one available right now, but I think that's a matter of taste. Codiad had rounded tabs and that was one of the main things that I wanted changed when I took over the project, I loathe rounded corners. Lol.

I'd love to have more feedback on Atheos though, you don't need to send me a portfolio; you're more than welcome to tell me how you really feel.

[foxnoodles]

Yeah a new theme (more modern looking one) would be awesome, I'm not a huge fan of rounded tabs either, I'm more into Adobe type of UI/UX with square shapes and minimal dividers as well as more lightweight outlined icons. Also, less chevrons(such as right sidebar in Atheos) and less modals. I really love this project, it is fast easy to install/host and has multi-user support. Right now I'm trying to divide primary and side job workflows by having a Mac as a stationary desktop to do all the heavy lifting and move my side projects (mostly game design, writing and some light coding) to ChromeOS. So I'm really focusing on using PWA-s. Atheos is so far the best option for me to use as an IDE.

[HLSiira]

I'll try to spend sometime working on the theming of Atheos, see if I can make it easier, however Atheos was born out of my liking of Hexagons, so I'm a pretty hesitant to push away from that, the chevrons on the right sidebar are my best attempt at half hexagons.

Thanks, I love to hear it. If there is anything I can do to make the process easier, let me know.

[foxnoodles]

Yeah all good, after all it's all about the taste as you've already mentioned. I'm a UX guy so my focus is always towards efficiency, of course depending on the context.

One thing that comes to mind is you could allow theme creators to tinker with layouts as opposed to CSS only theming. These could be divided into panels, for example:

• Main View.html - defines the main container layout (left side bar, right code editor etc);
• Sidebar.html - defines the left sidebar's content layout and default sizing;
• Chevron.html - chevron layout;
• Editor.html - tab bar, status bar, split view, editor layouts
• etc. each file should have it's own css file of the same name with -var-s to quickly change things around. I think this will make theme prototyping much easier compared to what we have now.

Additionally this approach could also serve as a foundation for a things like saving multiple workspaces per user and allowing them to switch between them on the fly. Pretty much a primitive user-style system that saves custom layout.css file for each user(if they changed things around) which gets loaded instead of the default one that comes with the theme (like aforementioned sidebar.css for example)

Not sure if what I've just said makes sense...

[HLSiira]

Alright, so here's what I am going to do. The themes within Atheos are more than the average user can be bothered to use and I doubt even more adept users care that much to create an entire theme. I am going to keep the Atheos theme as it is, but I'm going to modify it to use CSS variables, and try to stick in some global values for border-radius, text shadow, thin/thick border thickness, and then try to create a settings menu where people can adjust those values and save them to their profile.

It'll take a while to get the theming right, it's taken me a few days just to figure out the colors and simplify things a bit. Let me know if that would work for you, or if you'd rather me try something different.

[foxnoodles]

Yeah I've noticed the theme is kinda hardcoded into spagetti of styles, JS and html. I personally prefer to have some sort of template structure to work with, I personally don't mind creating an entire theme (not just colors and radiuses) but the lack of documentation makes it really hard to approach(as you have already mentioned). So I guess the only solution for now is what you're offering. Global css variables to tweak the interface. I don't know, maybe eventually we will have enough variables to do some complex theming without modifying the markup.

[HLSiira]

No, I mean it just uses a variety of different SCSS functions and variables instead of CSS variables; there shouldn't really be any styling hard coded into HTML or JS. Maybe some absolute positioning for the modals and display:show/hide, unless you're talking about the Ace Editor that Atheos uses?

Where are you finding hard coded styling? I'm going to need to fix that.

The actual structure of the SCSS files is pretty modular, the hard part is finding ways to no longer need to use SCSS functions, huge PITA.

[foxnoodles]

Oh sorry I wasn't clear enough, by hardcoded I meant that the actual markup is in the /components section. If someone wants to come up with a different layout other than default one(or maybe optimize the DOM tree to make things faster I don't know) they will hit the wall as there's no way of changing things without altering the core components. I was thinking of having something similar to what Wordpress has in terms of themes, a loop based approach it's called I think, where the main system loops are being intercepted by theme files and plugins before the final output.

[Proantagonist]

Have you seen another IDE that gives you the ability to change the markup? I ask because I primarily use VSC and to my knowledge, it doesn't have that but I could be wrong.

[foxnoodles]

Have you seen another IDE that gives you the ability to change the markup? I ask because I primarily use VSC and to my knowledge, it doesn't have that but I could be wrong.

That's a great question actually I can't remember any from the top of my had. Atom has UI themes driven by styles, but in a way that lets you customize everything, even UI positioning by adjusting the foats and flexboxes. On the other hand Blender is far more complex in terms of UI/UX and it let's you modify whatever you want in your theme by defining custom "workspaces" as well as skinning the elements