Option Icons Ideas

[sebnitu]

Hey,

Here is a concept of the icons on the options of EpicEditor. Let me know of comments and critiques.

Edit Mode

Preview mode:

Thanks!

[OscarGodson]

That's quite sexy if i do say so myself. Are these your icons or taken from somewhere? I love this idea. Much easier to see and makes a lot more sense.

[OscarGodson]

cc: @johnmdonahue @dadambickford - thoughts? Easy enough change we could get it into 0.1.0

[OscarGodson]

@sebnitu Are these icons the same color for preview and edit? If not it'd be great if they were/could because being able to swap icons based on background color (light/dark) isn't implemented. That's my only concern.

[sebnitu]

The icons are glyphicons ( http://glyphicons.com )

I've purchased the set so whatever you want to try from there or even the Pictos ( http://pictos.cc ) set we can use :D

[johnmdonahue]

Nice! :thumbsup:

[sebnitu]

Ah, yes, they are different icons/colors. Like for example, the toggle edit/preview icon changes depending on the screen you are on preview = open eye, edit = closed eye.

So, it's not possible to make any changes to the buttons depending on the active state?

[OscarGodson]

We can swap out the icons per state (there's a state object built into EE that keeps track of it), I'm purely talking about the color. Is there any way from a design standpoint to make an icon that works on dark and light editor/preview styles? Swap out the dark editor style with the light one for example, would it still look ok?

[sebnitu]

Oh, gotcha. Yeah, we'd have to go with like a 50% gray for something like that. So maybe something more like this:

[OscarGodson]

@sebnitu how do you feel about that? Does it look OK to you? If so I'd love to get this in. I :heart: it!

[sebnitu]

Yeah man, I really like it! I may be suffering from personal work bias though :P

Want me to implement this change? I promise I won't mess up the tabbing again :)

[johnmdonahue]

Just throwing this out there... what if instead of the slashed eye we use a pencil for edit. We could maybe even use the pencil from the awesome EE logo ;)

[dadambickford]

@johnmdonahue I was actually thinking the same thing, and just mentioned it to Oscar on twitter

[OscarGodson]

True, @johnmdonahue i guess just try whatever and send a pull request and see what looks best to you!

That'd be really awesome if you could code it up! Just pull the latest from us checkout 0.1.0-build-refactor then make a new branch like git branch feature/new-icons and when you're done run the tests jake test and if it all passes send us a pull request :)

Just in case you're curious:

$ git checkout 0.1.0-build-refactor #if youre not already on it
$ git pull git@github.com:OscarGodson/EpicEditor 0.1.0-build-refactor
$ #finish making changes...
$ jake test #if it passes...
$ jake build
$ git commit -a -m "Ticket #115 - new icons"

Then send us a pull request :)

[sebnitu]

Here's some more ideas based off @johnmdonahue's suggestion: http://cl.ly/GmAT

The far left one is the EE logo (doesn't look very good at a small scale). The other two are from the glyphicons set. I prefer the one on the far right out of these three but I personally prefer the slashed eye. Totally up to you guys though, just let me know :)

[OscarGodson]

can't edit while on mobile so added the image to my comment. After seeing those I prefer the eye with a line through it also simply for the fact that the transition between the eye and the eye with a line is much more smooth looking IMO. Either way @sebnitu you could work on it and swap out icons easily.

[johnmdonahue]

Thanks for mocking that up @sebnitu! @OscarGodson I see your point about the smoother transition. I'm definitely no designer and I like the slash eye as well anyway so I will defer here.

FWIW though my personal favorite is the stand alone pencil in the middle. From a UI standpoint it just seems more intuitive/descriptive of what the button does - preview/edit. A less smooth transition between views might actually add to the clarity of the UI. Just my 2 cents. I love any of these options. :)

[OscarGodson]

This should also take care of #35. Yay! Then that will leave us with just 2 tickets.

[sebnitu]

Ok so a few things:

I'm not suppose to make changes to the files in the epiceditor directory right? So I made my change to editor.js in src. (pretty much just changing the width of the images). I then assume that I'm suppose to run jake build so that the files in epiceditor grab my changes. I ran jake test and everything passed, but when I run jake build --trace this is what I get:

--> Linting editor
  √ ok
--> Building
jake aborted.
Error: Parser path not found.
    at /usr/local/lib/node_modules/jake/lib/api.js:214:18
    at [object Object].action (/Users/sebnitu/Sites/github/EpicEditor/Jakefile.js:115:5)
    at [object Object].run (/usr/local/lib/node_modules/jake/lib/task/task.js:204:19)
    at [object Object].handlePrereqComplete (/usr/local/lib/node_modules/jake/lib/task/task.js:190:12)
    at [object Object].<anonymous> (/usr/local/lib/node_modules/jake/lib/task/task.js:160:14)
    at [object Object].g (events.js:156:14)
    at [object Object].emit (events.js:64:17)
    at [object Object].complete (/usr/local/lib/node_modules/jake/lib/task/task.js:214:10)
    at /usr/local/lib/node_modules/jake/lib/api.js:175:15
    at /Users/sebnitu/Sites/github/EpicEditor/Jakefile.js:53:7

My second question is if it's ok that I edit the css in the epiceditor directory?

[OscarGodson]

Yeah, only the JS is built when working with the source.

I think you might be missing Marked maybe? This is a @johnmdonahue question. I'd try:

sudo npm install -g marked
git submodule init
git submodule update

I think it's missing the Marked

[sebnitu]

That was it, thank you! I thought I ran the init and update lines though (followed from the wiki). Does it make a difference depending on the branch I'm currently on when I run it?

[johnmdonahue]

@sebnitu Editing the css in epiceditor should fine since it doesn't need to be built. As for the Parser path, that was my mistake on the last Jakefile update. This is being caused by not having the Marked module inited before building. It should init the submodule before checking to see that the parser path exists. I just push this change out. Can you retry with the updated Jakefile?

[johnmdonahue]

@OscarGodson yup its marked... I should have refreshed before commenting. The submodule init/update runs in the Jakefile now so this step should not be necessary and should be removed from the wiki I guess. It was working fine before the last update where I added a check to see if the parser existed before this step causing it to fail in this case but this should be fixed now.

[johnmdonahue]

Also you should be able to see Jake handling it correctly by doing the following:

$ rm -rf src/marked/
$ jake build
Cloning into src/marked...
Submodule path 'src/marked': checked out 'd49ab2c6f50775af23b51e6c01b6057703c71475'
--> Linting editor
  √ ok
--> Building
  √ ok

[sebnitu]

When I run jake build now, it seems to be working:

--> Linting editor
  √ ok
--> Building
Submodule 'src/marked' () registered for path 'src/marked'
  √ ok

And I see the changes getting built in the epiceditor directory :)

[OscarGodson]

:shipit: it has been done (and tested). Only issue is #117 which you reported. I (or @dadambickford ?) need to fix that before shipping completely, but thats an easy and small change! Looks fuckin' great! Huge improvement!