Wick Fork with New UI, Other Improvements!

Feature Suggestions Patch Feedback
#1

I made a fork of Wick at https://github.com/kryptot7/wick-editor! It’s my first time contributing to an open source project on Github, so pardon any dust :stuck_out_tongue: The highlights are a sleek UI overhaul and several other improvements relating to the inspector, color picker, and timeline.

Before

image
image.png1304×675 33.6 KB

After
image
image.png1304×675 28.5 KB

85200eb6-77cb-4511-884a-d4b1d590fc3c

Inspector Styling
imageimage

Trimmed-down Color Picker
image

Loading font…
image

Changelog

  • Dark theme that makes heavy use of CSS variables for easy customization
  • Cleaned up and/or redrew all Tool .svgs, removing all shadow effects (which showed up as vague fuzzyness due to the small size of the icons)
  • Changed font from Anonymous Pro to Segoe UI (Windows), San Francisco/Helvetica Neue (Mac), or sans-serif. I think this is more readable. You can change it to whatever you want by tweaking --ui-font in editor.css.
  • Smaller, space-saving timeline
  • Timeline can now be resized
  • Fixed some timeline bugs related to resizing
  • Got rid of “Inspector” label to save space, as I felt it was redundant
  • Input fields in inspector now have styling
  • Menu bar behavior is much more intuitive. Mousing over other menus while one is open behaves as you’d expect.
  • Menu bar selections and right-click menu look better now
  • Added ellipses to various menu items (like “Export…”)
  • Various capitalization fixes throughout UI
  • Alert box now tells you when a web font is loading or when loading fails
  • Fonts in inspector now load proper bold/italic variant (#768)
  • Tweens now have rainbow colors, just for fun! (this may have a small impact on performance, though)
    image
  • Better color coding of buttons and highlight colors
  • Script editor API headings don’t clip on bottom anymore
  • Fixed color picker not closing (did I cause this bug? idk. well I fixed it!)
  • Got rid of color picker close button, it now applies new color on clickout (thanks spectrum.js!)
  • Color picker is more compact now (I love saving screen space)
  • Alert box showMessage function is more versatile

Let me know what you think of these contributions and if they can be merged into the main repository! The default branch in my fork is called ‘all-improvements’ and it’s based on the upstream branch ‘151’.

3 Likes
Wick Editor Overhaul Design Proposal (Revised)
#2

I do like the user-interface sporting a darker background, but I think as far as it being solid black goes–it’s a bit intense, and it can be impractical if you’re looking to use a black background in an animation/project. A “Who turned out the lights?” scene comes to mind.

A lot of what you added is really cool. I think some more screenshots would work in your favor. For example, where you mention cleaning up the right-click menu.

The rainbow frames are really pretty as well, I don’t know about practicality, but they’re a fun sight to see. :laughing:

1 Like
#3

!!!

Hey this is awesome!!!

I’m going to do a more in-depth look as soon as a get back from vacation, but so far this looks really good.

1 Like
#4

How do I make my own wickeditor design?

#5

True :stuck_out_tongue_closed_eyes: The viewport background isn’t exactly solid black, but it’s pretty close. How’s this?

image
image.png1304×675 28.5 KB

Here’s a right-click menu and menu bar gif:
85200eb6-77cb-4511-884a-d4b1d590fc3c

Inspector Styling:
image

1 Like
#6

I like it. :grin: :+1:
…And the screenshots look great! :star_struck:

1 Like
#7

Thanks! :smiley: I’m aware that the next version of Wick will be an overhaul, but this can be a nice update inbetween then. It could also help inform the design of the next version (like using more CSS variables, the resizable timeline bugfixes, etc.)

1 Like
#8

To change how the editor looks, you’ll have to edit the CSS of the webpage - check out this tutorial, it should be able to get you started :slight_smile:

2 Likes
#9

Bold/Italic fonts now show up properly in the project preview!
image

Works in the exported .html too:
image

Edit: Just realized Arial doesn’t show up as italic in these screenshots -.-
Edit 2: I don’t know how to fix this, but most users are likely using web fonts anyway. The other bugs were a bit tedious to fix since the WickObject font loading code is duplicated (with a few differences) three different times in three seperate .js files. Hopefully the upcoming overhaul can cut down on code duplication like this.
I’m pushing the changes to my GitHub fork now and I plan to submit a pull request soon.

#10

This is so nice! Maybe you can Join the others that started forks?

Thank you for continuing a great editor!

1 Like
#11

6 years ago.

#12

This is 6 years old pal, but do not fret im making a Wick editor Extension and potentially making it open source.