Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Next design iteration #400

Open
joostdevries opened this issue Apr 14, 2016 · 30 comments

Comments

Projects
None yet
@joostdevries
Copy link
Member

commented Apr 14, 2016

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:

  • #377, #132 And overall responsiveness
  • #135 Show page title somewhere
  • #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)
  • #194 Review/improve all copy (like "Save to Github Gist")
  • #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

This comment has been minimized.

Copy link
Member Author

commented Apr 14, 2016

One initial idea is doing a UI like jsfiddle:

image

@HenryVonfire

This comment has been minimized.

Copy link

commented Apr 14, 2016

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

@joostdevries

This comment has been minimized.

Copy link
Member Author

commented Apr 14, 2016

@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

This comment has been minimized.

Copy link

commented Apr 14, 2016

@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

This comment has been minimized.

Copy link
Member Author

commented Apr 14, 2016

@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:
c9

@HenryVonfire

This comment has been minimized.

Copy link

commented Apr 14, 2016

@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

This comment has been minimized.

Copy link
Contributor

commented Apr 14, 2016

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

This comment has been minimized.

Copy link
Member

commented Apr 14, 2016

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

This comment has been minimized.

Copy link

commented Apr 14, 2016

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

ember-twiddle

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

This comment has been minimized.

Copy link
Member

commented Apr 14, 2016

@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

This comment has been minimized.

Copy link
Member Author

commented Apr 14, 2016

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

@sheriffderek

This comment has been minimized.

Copy link

commented Apr 14, 2016

While you're talking about 'design'
screen shot 2016-04-14 at 12 05 56 pm
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 joostdevries self-assigned this Apr 20, 2016

@joostdevries

This comment has been minimized.

Copy link
Member Author

commented Apr 22, 2016

iterating...
image

@Gaurav0

This comment has been minimized.

Copy link
Member

commented Apr 22, 2016

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

Why remove gravatar?

@joostdevries

This comment has been minimized.

Copy link
Member Author

commented Apr 22, 2016

Next iteration.

image

  • 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

This comment has been minimized.

Copy link
Member

commented Apr 25, 2016

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

This comment has been minimized.

Copy link

commented Apr 25, 2016

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

@joostdevries

This comment has been minimized.

Copy link
Member Author

commented Apr 25, 2016

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

This comment has been minimized.

Copy link
Member

commented Apr 25, 2016

[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

This comment has been minimized.

Copy link

commented Jun 6, 2016

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.

twiddle-desktop-hd-framed

@matmac

This comment has been minimized.

Copy link

commented Jun 8, 2016

Here is a mobile version i was working on.

Comments are very welcome.

twiddle-mobile-portrait-hd-framed

@knownasilya

This comment has been minimized.

Copy link
Contributor

commented Oct 19, 2016

Beautiful mockups @matmac

@knownasilya

This comment has been minimized.

Copy link
Contributor

commented Oct 19, 2016

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

@knownasilya knownasilya referenced this issue Oct 20, 2016

Open

Redesign #490

13 of 16 tasks complete
@lukesargeant

This comment has been minimized.

Copy link

commented Mar 20, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Mar 20, 2018

@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

This comment has been minimized.

Copy link

commented Mar 20, 2018

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

This comment has been minimized.

Copy link
Member

commented Jun 15, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Jun 15, 2018

@gokatz it already exists:
screen shot 2018-06-15 at 09 11 14

@gokatz

This comment has been minimized.

Copy link
Member

commented Jun 15, 2018

yeah, I noticed that. I mean something like,

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

This comment has been minimized.

Copy link
Contributor

commented Jun 15, 2018

That would be sweet

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.