Add a new vector-based default editor theme

[Calinou]

A new, vector-based theme for the editor is required for good-looking hiDPI support. It should probably be drawn using Inkscape and be exportable to PNG with a script, just like the current icons.

Related issue: UI Concept for Godot

[bojidar-bg]

Would be nice if the editor/godot runtime is able to redraw all those vector icons on start or when resolution is changed :smiley:

[djrm]

i would like to help with this (i started to draw the elements some time ago), however @reduz once said that it will be too much work, i dont know if he was talking about the godot internals, but it those problems are solved i would be glad to help with the graphics.

[djrm]

this is what i have so far.

[djrm]

just another update, and also i think thats all, i have all the ui elements done in svg, next step might be to polish and improve this, even if it does not become the new default theme, someone can use the assets to create a new them or improve this one.

[reduz]

It looks great, I wonder how we could make it so the theme is generated from SVG in real-time.

On Mon, Jan 23, 2017 at 10:58 PM, Daniel Ramirez notifications@github.com wrote:

just another update, and also i think thats all, i have all the ui elements done in svg, next step might be to polish and improve this, even if it does not become the new default theme, someone can use the assets to create a new them or improve this one.

[image: screenshot from 2017-01-23 19-50-01] https://cloud.githubusercontent.com/assets/1103897/22230805/59a5eb96-e1a5-11e6-99be-eb98246996bb.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/godotengine/godot/issues/7294#issuecomment-274678631, or mute the thread https://github.com/notifications/unsubscribe-auth/AF-Z28L10ocXp5EEv3CRZC8JBX5dPopaks5rVVrLgaJpZM4LMKXr .

[djrm]

@reduz that would be really cool, but i guess the SVGs must be optimized for that (maybe after the optimizations we can make sure that only a small subset of SVG is used, and then create a mini SVG parser for that subset).

[bojidar-bg]

BTW, the raphael.js SVG library (which I used a long time ago) countered the small-subset issue by converting everything to bezier curves when things like path collisions, lengths and so on had to be calculated.

[toger5]

damn looks really good and seems to be an amazing approach. If it is possible to do a decent real time svg -> png converter for the icons also plugins would benefit a lot from it. Currently they usually don't support highDPi and are almost unusable.

It even could be used inside final games. So Godot would support svgs and just converts them to the correct sized png when the they are used in a game. #4826 (thats actually the same way iOS handles pdf vector graphics. just converts them to png at the right time)

@djrm the design you are approaching is beautiful. Helps focusing on the actual work (code 2d editor...). I think the green for the selected design is a little too heavy. why did you choose it over s simple grey shade? But thank you a lot! for the effort!

What about having all the svgs and the lowest res inside the Godot download. than ppl can choose whatever dpi they want (percentage based). The ui gets scaled but the default icons (pngs) are still used and just scaled (not resolution wise just stretched). so they are really low quality (blurred) but the correct size. than the svgs are getting converted to pngs with the correct size the images replaced.

But probably you already have a better idea... (or this approach Is more than obvious) still wanted to share it.

[toger5]

I made some tests. The conversion to svgs is pretty fast: average time per icon (tested with all icons) to svgs: (i5 macbook) 10ms to 32X32 11ms to 64x64 13ms to 128x128 and this is for the icons. I guess the theme svgs are even simpler so it should be faster.

[karroffel]

@djrm do you have that theme from the screenshots uploaded somewhere? I'd love to use it, I love the flat design!

[memoryruins]

What would compliment the new internals of 3.0? A fresh update to the default theme / UI, and this is in a fantastic direction. The ui concept calinou originally linked is incredibly fresh and would still be a great guide for continuing the progress djrm has made.

[djrm]

@karroffel no I'm still working on this, but I've been very busy, also it is no a downloadable theme, it has to be merged in order to be used but im still not convinced about it maybe in a few weeks I will give it another try

[nunodonato]

that visual graph editor looks so hot :D

[reduz]

feeel free to PR into 3.0 whenever you want

On Sat, Mar 25, 2017 at 8:02 PM, Nuno Donato notifications@github.com wrote:

that visual graph editor looks so hot :D

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/godotengine/godot/issues/7294#issuecomment-289245584, or mute the thread https://github.com/notifications/unsubscribe-auth/AF-Z2-jomUzmkhc7Tjyk-0BQ0Cbvpqltks5rpZ0jgaJpZM4LMKXr .

[toger5]

@djrm i guess you also know the huge thread about the ui concept. they have no borders on the left and right. if you do a pr can u also do that? I once did that and could show you the changes i made (if that helps)

[djrm]

@toger5 please show me the changes because im not sure what are you talking about.

[toger5]

@djrm the changes I mean can be seen in this screenshot:

there are no borders on the canvas editor (left right) and also for the other UI elements there are no borders: property editor ...

I tried that too for some UI approches i made:

And i think it looks good

[toger5]

@djrm I also made the effort now to search for the code of the theme I made. This was before the time i was comfortable with git... so i needed to push it now.

this is the branch: https://github.com/toger5/godot/commit/5e97449a15f0690e8bd584a256758c1b062ed22c

I dont exactly know what i did. but you can go through all the changes and decide what u like. The commented section in line 5288 in editor_node gets rid of the border/margin (i think... maybe i also solved it with some settings in the editor_theme file. You have to try it out)

hope that helps

[toger5]

As i mentioned some time ago, i have cpp code for convertig simple svgs to png. Its really fast and could be used for svg as a recource or for the theme. Two approaches. Generating them once on startup in different resolutions (high low mid dpi). Or we allow percentage base dpi lvls and the theme pngs get recreated after changing the ui size. I wanted to know what to do with the code? Where should i implement it...

[toger5]

I really prefer the colors of the UIConcept. I think I know where you are coming from. the godot editor was using those dark violet like colors for some time now and it makes it stand out from any other editor. But It look kind of washed out for my eyes... @djrm is there a chance that you will change the color? what do others think about the colors?

[djrm]

@toger5 yes i will change the colors, in fact i already changed the colors and lost the old purpleish theme, now, the reason for a lighter color scheme is that when using the editor at daytime it i hard to identify things, but currently im looking for a better color scheme that is not too dark any suggestions are welcome.

the current theme looks like this (i dont like it)

[reduz]

I was thinking of doing some changes to the UI above, we discussed a few things, but probably after alpha

On Fri, Mar 31, 2017 at 7:41 PM, Daniel Ramirez notifications@github.com wrote:

@toger5 https://github.com/toger5 yes i will change the colors, in fact i already changed the colors and lost the old purpleish theme, now, the reason for a lighter color scheme is that when using the editor at daytime it i hard to identify things, but currently im looking for a better color scheme that is not too dark any suggestions are welcome.

the current theme looks like this (i dont like it)

[image: screenshot from 2017-03-31 15-40-25] https://cloud.githubusercontent.com/assets/1103897/24571791/651e7756-1628-11e7-8a0a-4bead7215dd5.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/godotengine/godot/issues/7294#issuecomment-290848860, or mute the thread https://github.com/notifications/unsubscribe-auth/AF-Z21cXaM1wyZiOQHLk_2L24u_R27hLks5rrYD_gaJpZM4LMKXr .

[reduz]

i mean to the top part of the UI (play, options, etc)

On Fri, Mar 31, 2017 at 7:42 PM, Juan Linietsky reduzio@gmail.com wrote:

I was thinking of doing some changes to the UI above, we discussed a few things, but probably after alpha

On Fri, Mar 31, 2017 at 7:41 PM, Daniel Ramirez notifications@github.com wrote:

@toger5 https://github.com/toger5 yes i will change the colors, in fact i already changed the colors and lost the old purpleish theme, now, the reason for a lighter color scheme is that when using the editor at daytime it i hard to identify things, but currently im looking for a better color scheme that is not too dark any suggestions are welcome.

the current theme looks like this (i dont like it)

[image: screenshot from 2017-03-31 15-40-25] https://cloud.githubusercontent.com/assets/1103897/24571791/651e7756-1628-11e7-8a0a-4bead7215dd5.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/godotengine/godot/issues/7294#issuecomment-290848860, or mute the thread https://github.com/notifications/unsubscribe-auth/AF-Z21cXaM1wyZiOQHLk_2L24u_R27hLks5rrYD_gaJpZM4LMKXr .

[toger5]

@djrm I really like the new highlight with green only at the bottom. I still also would try just darker grey.

Although I see the point of making it easier to see it at daylight I'm missing the contrast. maybe you can at least make the background almost completely black

[djrm]

i want the buttons to be like this

i think there should be another node called FlatButton that does not have a box an those buttons can be used in this thing

[toger5]

@djrm this should be really easy to do with just making a transparent style box. And changing the font of the active style.

[djrm]

@toger5 yes, this is what i have so far

of course this is not the final version (but as always im open to suggestions)

[toger5]

@djrm Nice this is looking really good. the idea of using just colors for the 3d 2d ... is really good. i also like the new coloring much better. the only thin which is confusing is they the tab for thw 3d editor is kind of floating. but as you said its not final. im currently putting together a new pr for some minor theme changes. ill post is as soon as im done and you can merge it to see how if u like it.

[karroffel]

I tested @toger5's changes and I really like the left-aligned tabs

I also really like the colors in his theme, but @djrm's theme is really cool as well and I love it too!

[reduz]

Looks, great, planing to move it to Godot 3.0 ?

On Sat, Apr 1, 2017 at 5:49 PM, Thomas Herzog notifications@github.com wrote:

I tested @toger5 https://github.com/toger5's changes and I really like the left-aligned tabs

[image: theme] https://cloud.githubusercontent.com/assets/5209613/24582312/195152b6-172d-11e7-94b6-488ef2abf245.png

I also really like the colors in his theme, but @djrm https://github.com/djrm's theme is really cool as well and I love it too!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/godotengine/godot/issues/7294#issuecomment-290946316, or mute the thread https://github.com/notifications/unsubscribe-auth/AF-Z22kI6CkYXIbeJQmC-sPIMARvV0MUks5rrrhzgaJpZM4LMKXr .

[toger5]

Yea i actually promised karroffel to make a pr for 3.0. I started working on it but im not done yet... So hopefully tomorrow

[djrm]

Alright, its almost done

[toger5]

I created a pr which introduces some editor node changes to make the editor look more slick. @karroffel this is compatible with 3.0 so you can just merge it into your version and add the theme png's you want. @djrm I saw you already made some changes to the top part of the editor. this pr has similar changes. So you might have to merge manually. or you only add the textures in your commit and than we merge both, my pr and yours.

[djrm]

@toger5 i think, we will have to solve the conflicts, since i made some changes to expose some extra styleboxes and colors in the default theme file, as far as i can tell, the only difference between your PR and my current code is that you have left aligned tabs and made some stylebox changes, as you can see in my theme only the viewport has no borders but the rest of the docks still have borders, i would like to keep it that way, i dont know what you think maybe i can just implement some of your changes in my local code and then we just merge my PR and work on top of that?

[toger5]

@djrm i knew we will come wo the point where we have different opinions ;). I dont want to stomp into your work so you can decide. I prefer the way i get rid of the border since i still have the top section but there is just no border left and right. I think it has the biggest influence for the 3d view. So im fine when this is the only area where you remove the border. But looking at the mockup from the Ui concept thread i think it is a really good looking idea to remove it from the other tabs as well l. It simplefies the ui, gives a tiny amount of additional space. So I would love to see it implemented. What about this approach: you try how it looks if you take my branch and add your pngs for the theme. This would work well when you have only little changes to the default_theme and editor_node file. Otherwise i would propose, that u make a pr with the svg and all other changes you made. Ill look over it and see what we did differently. That we could try to merge my pr with yours. Since a lot of changes are similar we can just discuss the differnces and decide what to keep. My initial thought was, that i only make changes to the code. I tried to do all the changes needed for your style. (i m refering to the dark top section) than we both could make a pr. My one including the code changes your one the svg -> pngs. Otherwise i also like to just help u as much as i can with your pr. And than when your one is merged we can work on top of it as u proposed.

[toger5]

Oh i had the wrong screenshot in mind. Your top border is there. Okay so your local version seems to almost have everuthong i would like to see.

Only things to discuss:

• no borders for docks?
• left aligned tabs
• intense border colors (i like them but maybe some ppl find them distracrting)

[djrm]

@toger5 I'm ok with no borders for docks it looks good borderless in the concept but in the actual engine not so much because if the tree like structure of the inspector and such

Left aligned tabs, I think I will change that.

And about the buttons, well yeah I'm also not sure about the colors, I will try another variation and see how it goes

[reduz]

I like the colors and overall design myself. Here's how I was planning to rearrange the UI for 3.0, so any ideas or changes welcome:

[volzhs]

@reduz I think we don't need to move [2d, 3d, script, assetlib] buttons to there. we can show more tabs without it.

[toger5]

@reduz i like the new position [2d 3d asseLib...] it makes much more sense beeing close to the main view since it only affects the main view. I also see the concernt with the decreased max tab count. But practically no one uses more than 5 tabs. as soon as you have more you will just use the file browser for a lit of all scenes. so i tink its no big loss.

[toger5]

@djrm maybe you could try a dark bg for the ui elements with the colorful borders. especially for the search bars. which are just a floating blue line atm this could look good. i think i wpuld prefer it with just dark bg no border. would make the ui look more simple, as if less stff would be going on -> less complex. which is a good thing. But maybe im just too conservative and its nice to have a really outstanding element in the engine ui. makes it unique. I Would still live to see how it looks.

[reduz]

@volzhs I'm kind of split on that one.. we can show more tabs, but it's not clear otherwise that they affect that part of the editor. Maybe it can be shrunk somehow

[toger5]

I also would lovw the look of rounded border dark bg instead of the bright color borders. (for 30 height ui element. Png with 15 radius dark circle. Stylebox with margin 15)

[toger5]

@reduz we could use icons for 2d 3d asset lib. would fit well to the fullscreen button which also uses an icon.

[volzhs]

@toger5 I often open more than 5 scenes at the same time and go back and forth while doing project actually. @reduz I like shrink tab like what Chrome, Firefox does. :smile:

[eon-s]

@reduz I prefer (editor) settings on the top right because these are not related with the project, a fullscreen mode button instead of option could be there too to make use of that empty corner.

[SirPigeonz]

I just had to tweak it... I just had to xDDDD My eyes were bleeding... (Dialog setup not theme :P)

PS faded line above Cancel / Create is optional but would be nice I think for confirm dialogs.

[toger5]

@n-pigeon its beautifult!

[djrm]

@n-pigeon looks really good, @toger5, @n-pigeon i also wanted to fix the margins and other style related issues, but its a hard task, if you are willing to help we can split the work and get it done for 3.0

[SirPigeonz]

@djrm I will gladly help. But I'm aspiring junior programmer, so I will take junior jobs if there are any :)