Flat UI for Komodo 9

How To Customization
1

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.

2

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?

3

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

4

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;
}

5

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

6

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

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

7

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

8

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.

9

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

10

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:

11

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

12

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

13

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