Hi Guys,
i made a proposal for a redesign of the embed Object Form. I comitted it on my fork: https://github.com/betaman/elefant/commit/954009892512d53959c04f4cb973a6f0d6ec4e20
Here are some screenshots:
http://download.die-symbionten.de/elefant/eom_1.png
http://download.die-symbionten.de/elefant/eom_2.png
http://download.die-symbionten.de/elefant/eom_3.png
http://download.die-symbionten.de/elefant/eom_4.png
The icons are made with fontawesome (but i made icon-pngs):
http://fortawesome.github.com/Font-Awesome/
I have Tested it on windows with ie9, ff and chrome.
On ie8 the selection of the button seems to be buggy. It seems to works on Browsermode ie8 and Documentmode ie9, but not on Browsermode ie8 and Documentmode ie8. Maybe someone can test it on a real ie8.
Cheers betaman
Comments
This is really cool! There are a few things I'd tweak though:
Embed
button in eom_4.pngBack
link in eom_4.pngThinking about the icons, is there a way to use the font itself instead of specific icon images? I'd prefer something like an icon field in the embed.php file, for example:
It could then add the
<i class="icon-picture"></i>
to the dialog, and custom options could choose from the 200+ icons in the set, instead of just the ones we specifically add as graphics.And I think your diffs on Github may be having trouble because of newline character differences. What OS/editor do you use?
Sorry to be a pain with all the feedback, this is pretty awesome and I think these are all pretty minor :)
Feedback is always welcome :-)
Icons With the Icons there are as always pros and cons:
Pro ImageIcon: I think image icons are more flexible. Some of the the icons I made myself by combining two fontawsome icons. Others were not available (eg embed Flash) so I made it up,
Pro Font: You dont have to use a Photoshop . But you are bound to the icons available on fontawsome, (Although there are a lot and the number is growing)
But I think both solutions are possible..
Maybe we can mix it by checking for .png:
I'll have a look, what's possible ..
Spacing and Backbutton Spacing and BackButton is a good Idea i'll implement that.
Grey Background I would keep the grey Backround because things look more orderly. But I'll change it if the majority wants a white background
Code Conventions And of course I'll do the changes to comply to the code conventions .-)
Cheers betaman
I think a good solution for the icons would be to check if it looks like a file path, such as
icon = "/apps/myapp/pix/myicon.png"
, then use it as the image, and if not, assume it's an icon in the font set. Checking for/
or.
in the value ought to work to tell the difference. That way we get the best of both worlds :)Also, you mentioned converting the
<span>
into a<button>
I believe, but I didn't see that in the commit.I did that before, thats whay it wasnt highlighted: https://github.com/betaman/elefant/commit/3e910cb10cd524e2faaf27a09a3d6964618b96cc
Ah yes. Wow, that's hard to compare with that diff issue...
I'm not sure I see what the advantages of a button are over a span. What does the button change exactly?
The bigest advantage is, that you can not mess the editor up: http://download.die-symbionten.de/elefant/messed_up_editor.png
Ah yes, I was playing around with that issue myself the other day. I had started on a quick fix that moved the label into a
data-label
attribute like this:Then in the CSS we can display the label value like this:
The trouble is, you can't put your cursor into the item, so the only way to edit is to double-click, which they may not know to do (especially since it's the only thing that you click to edit in the content, and it only shows those instructions on hover).
Does the button-based version have similar issues?
I don't know if I understand you correctly. But with the Button you can't edit the text-contents of the embed, but thats exactly the purpose, because otherwise you could mess up the embbedObject.
I think If we give the Button a 'cursor:pointer' Its pretty obviouus that you can click it. In my opinion you could even make it clickable with normal "click".
I see. From testing, it seems the span vs button are interchangeable if we use data-label instead of putting the label between the tags. Adding cursor:pointer and making it single-click also seems to work well, although I was having trouble with updating existing embeds that don't have any customizable options. In fixing that, I think it now works pretty well.
I also fixed a couple other inconsistencies/typos as well, but here's the full commit:
https://github.com/jbroadway/elefant/commit/ce01038eac6d84f508f076e269f1099c217778bc
Hopefully your dialog UI changes can be merged with this without too much trouble.
@jbroadway About this problem with objects that are uncustumitable, I made two git comments in my repo, i hope you can see them:
https://github.com/betaman/elefant/commit/3e910cb10cd524e2faaf27a09a3d6964618b96cc#L2L324
That should fix it..
Hopefully your dialog UI changes can be merged with this without too much trouble.
Merging is my middle name, -- not.
We'll see...
Haha we'll sort it out :)
Hi,
i made a new commit, check it out.. https://github.com/betaman/elefant/commit/ee7cfea123e27f1fac51a4ac5eaa943335dda63a
If you like the implementation of the icons, and everything else I will add all the icons to the various embed configs and then I'll do my first pull-request ever :-)
Made a minor change here is the link to my branch: https://github.com/betaman/elefant/commits/master
I really like the changes to prevent multiple dialogs and repeat fetching of /admin/embed too. I'm still not sure I'm sold on using an input vs a span though. Is there still a functional difference between how a button works vs spans as they are with the last round of changes?
And one last minor gripe: I hate needless typing, so can we change
icon = icon-picture
to justicon = picture
in the embed.php files? Other than that, it's looking good!Dankeschon @betaman. Look sehr gute!
Thanks @jmonroe, and I say dankeschön for the nice feedback :-)
Nichts zu danken. Gern geschehen