Comments (11)
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:
- On the first line there is an input/textarea with the link to share, with the current page's link as default.
- Then this is followed by two (or more) radio-buttons (like in the Settings dropdown):
link
|iframe code
, with thelink
selected. Changing this would change the code in input above to the code for inserting the textarea. - 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.
- 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.
Related Issues (20)
- Better javascript
- Minor JS issue for IE9 HOT 2
- Inline CSS previewers don't handle HTML entities/escapes in style attributes HOT 1
- Line break lost after paste HOT 2
- Enabling the <script> tags. HOT 5
- JavaScript Syntax Error (Does not show location)
- Why not integrate Codemirror or Ace? HOT 1
- Tab-switching shortcuts stop working after switching to Results tab
- Typo in CSS of 'Circular Text' HOT 1
- Import snipet into Silex with an API HOT 2
- adding images from local memory HOT 2
- line error in editor HOT 3
- This request has been blocked; HOT 1
- Validator returns 415 eror
- Can No Longer Save Gists/Dabblets Anonymously HOT 1
- my menu does not work HOT 1
- Nothing serious, description is removed.
- Log in issue HOT 13
- 404 Error - Link to: View Full Page Result HOT 2
- Why dabblet still not save codes and not login with GitHub HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dabblet.