Next design iteration

[joostdevries]

We've added quite a lot of functionality to Twiddle over the past months. I think now would be a good time to look into how we can streamline all these functionalities and make the UI a bit cleaner.

Formats

• Desktop 1440x1024
• Phone
• Tablet
• ...

Low-level issues:

• Responsive Header needs design love #377, height of header & file names is too tall on small screens #132 And overall responsiveness
• Display the page title in ember-twiddle near the URL bar #135 Show page title somewhere
• Basic usage instructions #108 Usage instructions (maybe put those in initial twiddle html)

High-level stuff:

• I'd like to incorporate a statusbar or something similar to show status/progress
• I'd like to incorporate the filebrowser in a more elegant way
• I'd like there to be less UI (more content)
• "Save to Github Gist": wording confusing #194 Review/improve all copy (like "Save to Github Gist")
• Suggestions relating to identifying twiddles, stopping twiddle escalation #153 More clarity on what twiddle you're working on (eg. "created by {user}")

User stories

• An addon developer wants to demo an addon he/she has built
• An ember user want to try out a new addon
• An ember user want to demonstrate an issue with an addon
• An ember user want to demonstrate an issue in his/her app
• An ember user wants to play around with a new Ember feature
• An ember novice wants to play around with Ember
• The ember core team wants to demonstrate an Ember feature

[joostdevries]

One initial idea is doing a UI like jsfiddle:

[HenryVonfire]

Wouldn't it be a bit of uncomfortable for laptop screens? they aren't specially big, you know 😔

[joostdevries]

@HenryVonfire you mean height right? I think the main question is how big the code snippets wil generally get. This is the current app in +- 1400px, personally I'm not sure whether narrow columns are better.

[HenryVonfire]

@joostdevries yes, I mean the height. In jsfiddle for example, I find pretty annoying to be resizing the views because the html view is bigger than the javascript view (or vice versa), or having the css view open when I'm not using it at all.

Also, in my opinion the output view should be bigger since it's the result of whatever you are doing in the twiddle. For example, tables tend to need a lot of space (imagine that you are playing around with ember-collection).

Have you considered using tabs?

[joostdevries]

@HenryVonfire understood! Tabs are another alternative I was thinking about but I think that's actually quite similar to how we handle it now. (except that instead of tabs we have dropdowns).

Or do you mean something like cloud9:

[HenryVonfire]

@joostdevries well, something like cloud9 would be great but I don't think that level of complexity is required. The tree view allows to access easily any file and tabs make easier to switch context without losing space. Maybe would be nice to optionally allow the user to create an extra view (vertical or horizontal) that can contain tabs in it (for those people that like to have different files opened at the same time).

Again this is just my opinion and totally based on my experiences 😄

[rwjblue]

I'd much prefer to avoid the "quadrant" style of JSFiddle. It would be nice to close the output window (or have it be a second tab) so that you could focus more on writing the code until it should be ran....

[alexspeller]

I absolutely love the concept @joostdevries posted. I think it fits much better with how I actually use ember-twiddle – lots of small files open at once, file tree small but all files visible in it. I really hope we get towards something like that.

@rwjblue maybe a button & shortcut to fill screen with current editor to focus on it would alleviate that?

[HenryVonfire]

I would suggest something like this (based on @joostdevries's idea):

Things to remark:

• Tabs have the name of the file and under them, in the view, there's the full path to the file.
• The name of the twiddle can be changed by clicking on it (as it currently works)
• Over the output view, there's a button to hide it when it's not needed (right caret)
• "Move file" and "delete file" go over the tree view as buttons (it makes more sense to me to be there with the collapse/expand all)
• Generate is the menu "Add..." (I used generate as it is used in ember-cli, just an idea)
• "Keystrock mode", "dependencies" and other possible menus would be inside the "Preferences menu"
• "Save to github gist" goes alone because in my opinion, it's used very often, so that makes it easy accesible

[alexspeller]

@HenryVonfire I like most of that, but I really wouldn't want to lose side-by-side editing. Editing more than one file at a time is crucial in ember and I personally would love to have more of it, not less ;)

[joostdevries]

@HenryVonfire @alexspeller I think that based on your input I can probably create something to satisfy both.

[sheriffderek]

While you're talking about 'design'

I keep thinking that the hierarchy could be adjusted.
(it may have been moved recently and I didn't notice - but for a while / share and delete twiddle seemed to be right next to each other)

It feels like the most important thing is the "twiddle" and then the "dependencies" and then the "files" - and somewhere below there - the keystroke mode.

This is what would feel intuitive to me. Any thoughts on that?

Twiddle

• Save (this should also be top-level)
• Share / Embed
• Copy
• Dependencies (maybe here instead? twiddle specific, right?)
• Keystroke mode (twiddle specific, right?)
• New
• Delete

Dependencies

• Select list

File(s)

• Add...
• Move
• Delete

Save / Commit

• Save
• Save as?

New

---

Other little notes: Gravitar could be retina quality / and maybe a little list icon to get straight to the list of twiddles.

[joostdevries]

iterating...

[Gaurav0]

Every dropdown is under Preferences? I Most of them have nothing to do with preferences. May I suggest an icon.

Why remove gravatar?

[joostdevries]

Next iteration.

• Versions dropdown is moved to left bottom (when hovering versions)
• Key mode is moved to prev
• User menu is in user menu
• Help is in help
• Avatar
• All file ops are in file menu, contextual file ops will become contextual (so either in editor or from file tree)
• Still have to figure out where to put fork/delete

[alexspeller]

Still have to figure out where to put fork/delete

I'd put those at the bottom of the first orange block, so you'd have something like

My Twiddle                  Save
Created by you on March 1st 2016
________________________________
    🔃Fork       |   🚫 Delete

(because those actions like save apply to the whole of this twiddle, like admin actions)

[HenryVonfire]

I would also move down the save button at the same level that Fork/Delete are.

[joostdevries]

from @locks in slack:

[7:07 PM] not much to add other than thumbs up
[7:07] I see vertical splits, but not horizontal splits @joostdevries ?
[7:08] how do you switch the files in the splits @joostdevries
[7:09] the layout picker could go on the left sidebar with the rest (edited)

[alexspeller]

[7:07] I see vertical splits, but not horizontal splits @joostdevries ?

Yeah that makes sense, I guess adding the buttons next to the existing ones is easy but maybe if there are too many, do something like the chrome devtools does for choosing vertical / horizontal?

[7:08] how do you switch the files in the splits @joostdevries

Use an intelligent string matching algorithm like TextMate, Sublime or even Github when you press t at the root page of a repo. That'd be super awesome.

[7:09] the layout picker could go on the left sidebar with the rest (edited)

It could, but I quite like it where it is - it's applying to that side, it's just a view thing not a global twiddle state control thing. But I don't really care that much about it, it could go anywhere really.

[matmac]

Hello Everyone,

my comments here from the stuff reviewed/commented by the rest of the people:

1. I think the profile module should be moved to the bottom, last item and leave the available space from the top for file name, date, save, embed, share, fork.
2. For the profile, and since the container is left aligned, i would add first the avatar and then the username.
3. Leave only the header for the Twiddle in orange, the file module could probably have the bold title and the icons, then keystroke module.
4. For the file tree use a rollover for each file to let or either move directly from there or delete.`
5. Next module for the versions with the ability to switch directly from there. (needs the dropdown arrow).
6. Then Preferences and Help
7. For the CSS window i would love to have the ability to use not only regular CSS but LESS or SASS/SCSS if i want.
8. Added a blue frame surrounding the window we are currently working on, sometimes, when tired i come back and don't recall on which one i was working.

Attached you'll see a design i've been working.

I've also created a brand, which i like a lot, that can be used if you guys like it, the main idea was to have a Tomster, but in a more digital/squarish shape, shows its part of ember but at the same time holds a particular shape related only to Twiddle, and more importantly due to the shape/form can be used in small sizes that will be easily recognisable, for instance when embedding code, in the header of the embedded module.

The main goal is to have a clean, easy to read design, to focus on writing your code.

Also i think theres the need to create at least a small styleguide for colors, fonts, and so on, mostly for the shape of the embed code and the buttons that potentially the module can hold.

All comments and improvements are more than welcome, lets tear this apart.

[matmac]

Here is a mobile version i was working on.

Comments are very welcome.

[knownasilya]

Beautiful mockups @matmac

[knownasilya]

I'd love to tackle some of this, can you provide the assets, i.e. logo, fonts, icons?

[lukesargeant]

As a user I'd find it way more valuable if Addons worked. There may be wins from a UI refactor, but until what I think is a fundamentally Ember feature is well supported, I'm not sure i'd get any more value from the tool with a redesign.

[knownasilya]

@lukesargeant the redesign is 95% finished lol, see #490. Just need to take the tests over the hump and fix any discovered bugs.

I do agree with addons being a highly requested feature, but I neither had the time or knowledge to do that, so I started here.

[lukesargeant]

Cool. My apologies for not seeing the PR whilst looking through the issues. If it’s in full flight then it’s totally worth finishing :-)

[gokatz]

how about https://codesandbox.io/ like environment which enables dowloading the snippet as a new ember app which can be run on user's machine and may be on the fly deploy! #JustAThought

[locks]

@gokatz it already exists:

[gokatz]

yeah, I noticed that. I mean something like,

• download the zip
• run yarn && ember serve
• go to http://localhost:4200

[knownasilya]

That would be sweet