Flat UI for Komodo 9

Just want to alert you that I start develop flat UI for Komodo and I want to see what you think about it. Write your ideas what you want to change here.
Something info about new flat UI:

  • It will be use my special icon font for Komodo
  • It will be controllable - you can change colors for icons, orange and blue lines, backgrounds for panes…
  • It will be works properly only on Komodo IDE 9 - It’s just a my gift for all users who will be use Komodo IDE 9 (and I won’t test it on Komodo 8.5 (why it won’t works on Komodo 8.5)
  • If I complete it earlier than Komodo IDE 9 will be released - I won’t release it until Komodo IDE 9 will be released.

How it looks in my mind:

So share your ideas!

  • Regards, Defman.
Why it won't works on Komodo 8.5

I will be use some new API features that created only in Komodo 9. I will be use some new *.less files that also created only in Komodo 9 (this reason forced me to update Sublime skin and Spacemodo skin because auto-complete popup doesn’t work properly on Komodo 9 without chrome://komodo/skin/plat/shared/editor.less but if I put this line to platform.less - Komodo 8 just crashed. So I need to use 2 files: one for Komodo 9, one for Komodo 8)

Hope you understand me. If you really want to port this to Komodo 8 - I share the Flat UI sources with public after release.

This is something I’ve been wanting to do myself for a while (with SpaceModo), I look forward to seeing where you might take this :slight_smile:

Did you manage to get icon fonts working?

I didn’t try it now… But seems FontForge was released for Windows so I try it tomorrow :smile:

Okay, I’m test it now and all works fine!

@font-face {
  font-family: "Test";
  src: url("chrome://test/skin/test.ttf") format('truetype');
}

.komodoicon() {
  font-family: "Test";
  font-size: 12pt;
}
.anyclass::before {
  .komodoicon();
  content: "A"; /* Because my font use "A" for icon ICON_NAME */
  width: 24px;
  height: 24px;
  color: white;
}

I’m looking for someone who can help me with creating SVG icons, so if you think you’re a cool vector designer - contact with me on this forums or in Facebook: http://facebook.com/defman21

Note this commit may interest you: https://github.com/Komodo/KomodoEdit/commit/7264ac6c295e866dae5fdc29dba1ff94a187a103

The way this is used will still be improved, small steps.

Nice work! So now I can do not make special font but only change colors for svg stuff.

No this has nothing to do with fonts. What you can do is make an SVG iconset and use koicon to apply filters or colors. Koicon will then convert it into a png which is much more performance friendly.

Can you say more about it? How I can use kocion, how I can change colors and convert it to a png?

Documentation will follow, for now you’d have to look at the source to figure that out or wait for the documentation. Sorry it’s a bit much to go over right now and I have bugs to fix to get the beta ready :wink:

I will choose this. I don’t have a time to looking at the source of koicon :smiley:

Don’t look at the source of koicon; look at the places that use it. Ctrl+Shift+F > “koicon://”

I will try this when I really will be needed in this.