Sharing feature about dabblet HOT 11 OPEN

It already detects whether it's embedded and does a few special things when it is, although you're right it's not as polished as it could be.

• I can't think of a good enough UI for setting the view modes separately for embedding and I wouldn't like to force result to be the default. I wouldn't like a dialog full of settings just for the view modes either :(
• It is smaller on embedded, as long as the iframe is small too (with media queries).

from dabblet.

Well, I though a little on how the UI can be and came with this:

1. On the first line there is an input/textarea with the link to share, with the current page's link as default.
2. Then this is followed by two (or more) radio-buttons (like in the Settings dropdown): link | iframe code, with the link selected. Changing this would change the code in input above to the code for inserting the textarea.
3. On the third line there can be three radio-checkboxes (where only two of them can be checked and when there are two of them clicking on the checked one would uncheck it, and clicking on the third one would turn it on while turning off the previous one). So, with that control you could check what do you want to share: only Result/CSS/HTML or two of them.
4. And on the fourth line there are radios for behind/horizontal/vertical view mode, which are disabled when only one radio-checkbox selected and are enabled when there are two.

And, optionally, there can be a lone checkbox at the end, selected by default, like “include dabblet frame”, disabling which would end with the “dabblet.com/result/…” link/iframe.

Well, here is a quick sketch showing the layout (without the proper icons for almost everything), however I think that for such complex one the current style for checkboxes/radios is too heavy.

from dabblet.

Maybe if the hash was #css or #html or #result, the according tab was loaded, regardless of the gist's saved settings. That would solve the issue of the result being first.

I like your idea about the radio buttons. As for the iframe code or link, I don't think it would hurt if they were shown at the same time.

I'm trying to think of an icon for sharing, but can't come up with anything.

from dabblet.

Also, all the sharing properties mustn't be saved in a dabbler's gist, but must be saved in localstorage, so user could setup the sharing options once and then use the same again the next time he would want to share another dappled.

And one more thought: the three last lines (css/html/result+behind/horizontal/vertical+checkbox) can be hidden after another button like “Sharing options…”, so they won't clutter the interface, so the dropdown would look like the following sketch by default and would become the one above only when you'd click on “…” button.

from dabblet.

Maybe if the hash was #css or #html or #result, the according tab was loaded, regardless of the gist's saved settings. That would solve the issue of the result being first.

I like your idea about the radio buttons. As for the iframe code or link, I don't think it would hurt if they were shown at the same time.

Yes, yes! For the hash I wanted to create another issue, 'cause it's can be done with what the dabblet have now (like when you're opening someone else' dabblet and change the view mode it would be set in the address, so you could share this without cloning the dabblet). And it's a good idea to show both link and the iframe code!

from dabblet.

I love the expander idea!

I still don't know what icon "sharing" should have (settings have a gear, file has a floppy etc). Preferrably something in the unicode table.

from dabblet.

Yeah, the symbol for sharing is almost a holy grail, I hadn't seen anything that would be close enough to it…

However, the closest symbols that I've thought about are stars, arrows and, hmm, links. Arrows are not that good since there is already dropdowny arrow here, but star or the “☍” symbol (which resembles the chain links a bit) maybe would suit the sharing:

from dabblet.

I don't want to use a star or a heart, as I might use these for a "Like" feature. The ☍ symbol doesn't really show what it's for.

I think this requires more thought (I've been trying to come up with something for days).

from dabblet.

And just the word ”share” won't fit? :) It seems that there is enough space for it and it would surely show what it's for. At least for the first time just the word can be ok, and then if someone would find a better symbol, you could always replace the word with it.

BTW, designers at our company, on the same quest, came with rss-shouting pac-man: , which is fun but, well…

from dabblet.

The word "Share" won't fit on mobile or embedded view, even though it's still needed there. I like the idea of the shouting pacman, haha, might use that!

from dabblet.

A simple Share icon

from dabblet.