search

brimelow / Response-for-Brackets

Responsive design tool for Brackets
171 stars 54 forks source link

Saving while CSS inline editor is open tries to save temp-response.css #66

Open ikbenben opened 9 years ago

ikbenben commented 9 years ago

The plugin is currently loading a temp-response.css file to cache the CSS rules. When a user clicks on the shortcut to save a file while focus is on the CSS inline editor, Brackets will open a save dialog with the filename 'temp-response.css' file in the filename field. Instead, hitting the shortcut to save the file should just save the media-queries.css file

ikbenben commented 9 years ago

The problem here is that the editor is currently using a temp css file to create a 'custom' view that is not a true representation of the media query document. This custom view includes showing all the css rules associated to that css selector and providing different background colours for edits associated to different media queries.

As long as we use this temp css file, we are not able to integrate the media queries css file properly. the inline editor needs to reference the actual document. This is also the issue with #63 though that issue can be worked around by adding for a listener event.

My suggestion is that we rework the editor so that it uses the actual document and shows that in the editor area but also shows a combined css pane to the right. See the mock below as an example:

new-editor-layout

As the user types in the editor, the combined css pane to the right would update dynamically so that the user can see the changes.

Additionally, we could possibly add a + sign to the left of each css rule to allow users to 'copy' a rule from the combined css pane to the editor.

redmunds commented 9 years ago

@ikbenben I think it would be best for user to just edit the media queries directly, but I have another solution if that doesn't work out.

Take a look at the inline editor I write for the Shorthand extension. It uses an InMemory file so there's no temp file. It also hacks the document's dirty flag so file doesn't show up in working set and there's no prompt to save it. Let me know if you have any questions.

ikbenben commented 9 years ago

Hi Randall,

Thanks for the feedback

The response for brackets extension also currently uses an InMemory document and overrides the DirtyFlagChanged event similar to the referenced Shorthand extension. However, it has been discovered if the user clicks on cmd-s while the focus is in the inline editor, brackets will open the save as dialog to save the InMemory document. I haven't tested this on the Shorthand extension yet to see if the same behaviour occurs.

I also believe this would result in a new InMemory document being created for each instance of the editor that is opened. So if you have 5 inline editors open , then you will have 5 InMemory documents opened. Not really resource friendly.

I believe the correct solution is to use the query css doc directly. I'm looking for feedback on the UX to see if what I've put together is a good solution. I'm not a UX expert by any means.