›

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID
Sign In Register

Categories

New Design for the Embed Object UI

betaman
edited October 2012 in Framework

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

  • jbroadway

    This is really cool! There are a few things I'd tweak though:

    • I'd like to keep the formatting of code consistent across Elefant's codebase. There are a couple spots that could be updated to follow the code conventions.
    • I'd like to see a bit more space between the bottom of the options and the top of the pager in eom_3.png as well as the form and the Embed button in eom_4.png
    • I think we should capitalize the Back link in eom_4.png
    • I'm not sure the grey background behind the form fields helps readability (eom_4.png). For me, it's an extra distraction from the text. How do you guys feel about this? Here's a quick edit to compare without.

    Thinking 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:

    [filemanager/slideshow]

label = "Images: Slideshow"
icon = picture

    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 :)

  • betaman

    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:

    [filemanager/slideshow]

label ="Images: Slideshow"
icon = picture // use font
icon = picture.png // use Image as backgroundimage

    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

  • jbroadway

    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.

  • betaman

    I did that before, thats whay it wasnt highlighted: https://github.com/betaman/elefant/commit/3e910cb10cd524e2faaf27a09a3d6964618b96cc

  • jbroadway

    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?

  • betaman

    The bigest advantage is, that you can not mess the editor up: http://download.die-symbionten.de/elefant/messed_up_editor.png

  • jbroadway

    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:

    <span
    class="embedded"
    data-embed="navigation/top"
    data-label="Navigation: Top Level"
    title="Double-click to edit."></span>

    Then in the CSS we can display the label value like this:

    .embedded:before {
    content: attr(data-label);
}

    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?

  • betaman
    edited October 2012

    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".

  • jbroadway

    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.

  • betaman

    @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..

  • betaman

    Hopefully your dialog UI changes can be merged with this without too much trouble.

    Merging is my middle name, -- not.

    We'll see...

  • jbroadway

    Haha we'll sort it out :)

  • betaman

    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 :-)

  • betaman

    Made a minor change here is the link to my branch: https://github.com/betaman/elefant/commits/master

  • jbroadway

    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 just icon = picture in the embed.php files? Other than that, it's looking good!

  • jmonroe

    Dankeschon @betaman. Look sehr gute!

  • betaman

    Thanks @jmonroe, and I say dankeschön for the nice feedback :-)

  • jmonroe
    edited November 2012

    Nichts zu danken. Gern geschehen

Sign In or Register to comment.