search

piersdeseilligny / betterfountain

A screenwriting app integrated into visual studio code
https://marketplace.visualstudio.com/items?itemName=piersdeseilligny.betterfountain
MIT License
360 stars 54 forks source link

add cheatsheet to extension sidebar #164

Closed prasy-loyola closed 2 years ago

prasy-loyola commented 2 years ago

Added 'Cheat Sheet' section to the extension sidebar, were users can quickly refer to the basic fountain syntaxes. I have grouped the cheats into categories, to better organize them. Got most of the description and examples from fountain.io.

Screenshot cheat-sheet-2

Usage When users click on the extension's icon in the side bar, 'Cheat Sheet' tree will be shown with tree items for multiple categories. Users can expand the category to find about fountain syntax for various items. If the syntax has a keyword/character then that keyword/character will be highlighted at the start of the list item. Following it a simple description of the syntax is shown. Users can hover over any item to see an example for the particular syntax.

tooltip

piersdeseilligny commented 2 years ago

Thanks so much for this, it looks good! Sorry for the slow response though, I've been working 12h days for the past 3 weeks 😅

The only issue I can foresee, is that the text doesn't wrap, so the sidebar needs to be expanded an unusually lot in order to read some of the descriptions: image

A possible alternative could be to use a webview instead? What do you think?

prasy-loyola commented 2 years ago

First of all thanks for writing the extension!

Agree. I also feel it cumbersome to have to expand the pane to read some of the descriptions. I will look into the webview solution and let you know how it goes.

prasy-loyola commented 2 years ago

Webview solved the big description issue. cheatsheet-screenshot

Let me know what you think.

piersdeseilligny commented 2 years ago

@prasy-loyola I'm so sorry for taking so stupidly long to get back to you. I've just tried it again on my side, and the CSS doesn't seem to be loading:

image

Looking at the web tools, I can see that cheatsheet.css failed to load with a server response code of 401 (Unauthorized). I'm not sure what would be causing this?

prasy-loyola commented 2 years ago

@piersdeseilligny I am not able to reproduce this issue in my local machine. I updated the cheatsheet code to follow the same pattern used below in the webview sample from vscode team.

https://github.com/microsoft/vscode-extension-samples/blob/52679f289a1ba34c27fd1504ae7b0a9275505586/webview-view-sample/src/extension.ts#L5

Let me know if this fixes the issue. But if it's not fixed, could you share the developer tools screenshot for the extension window showing the error please.

piersdeseilligny commented 2 years ago

@prasy-loyola Perfect, that fixed it on my side - I made a few changes to the CSS to try and make the styling seem a bit more native to vscode, what do you think?

prasy-loyola commented 2 years ago

@piersdeseilligny Unfortunately, this change broke it for me. The extension is not loading. Let me try to troubleshoot the issue.

prasy-loyola commented 2 years ago

@piersdeseilligny Found the issue. The extension is not getting activated unless a .fountain file is opened. As we are initialising the cheatsheet webview inside the activate function, its not getting displayed.

I think anyone should be able to see the cheatsheet even if they don't have a .fountain file opened. So, I have added the Cheatsheet onView to the activationEvents for the extension.

Let me know what you think.