diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..e43b0f98 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/submission/issue-18/milestone-2/TeamExponential/README.md b/submission/issue-18/milestone-2/TeamExponential/README.md new file mode 100644 index 00000000..42b08a48 --- /dev/null +++ b/submission/issue-18/milestone-2/TeamExponential/README.md @@ -0,0 +1,58 @@ +# Playground Feature: Markdown READMEs #18 - Milestone 2 +Thank you for reading our Milestone 2 submission, "Implement UI changes.". After receiving [feedback from Max and Pete](https://github.com/onflow/flip-fest/pull/40#issuecomment-926683566), we iterated on our design, moving the project title, description and readme functionality from a button in the top right of the playground that rendered a popup, to a button in the sidebar that utilizes the playground editor window to display the functionality. The first version of our UI design can be found in the [mockups for Milestone 1 submission](https://github.com/hichana/flip-fest/tree/submissions/issue-%2318/milestone-%231/TeamExponential/submissions/issue-%2318/milestone-%231/TeamExponential/wireframe-mockups). Please note that with this milestone 2 we are not making a code submission as that will be made with Milestone 3 "Add support for storing and loading the README data on the frontend.". Below is a screenshot walkthrough of the new/iterated UI with typical user flows. + + +### First load of the playground: +- the user is encouraged to immediately start playing with contracts, scripts or transactions just as they are with the current playground. +![first load](https://github.com/hichana/flip-fest/blob/submissions/issue-%2318/milestone-%232/TeamExponential/submission/issue-18/milestone-2/TeamExponential/images/1%20-%20first%20load.png?raw=true) + + +### User clicks 'Save' button: +- now that the user is serious about making something either for their own use or to share, we redirect them to the 'PROJECT' editor upon clicking 'Save'. +- The URL now includes the project id and type as 'readme' +![save url](https://github.com/hichana/flip-fest/blob/submissions/issue-%2318/milestone-%232/TeamExponential/submission/issue-18/milestone-2/TeamExponential/images/2%20-%201%20-%20save,%20url.png?raw=true) + +- user enters title, description and readme content. Title populates the browser tab with text every three seconds after user enters text. +![title, text tab](https://github.com/hichana/flip-fest/blob/submissions/issue-%2318/milestone-%232/TeamExponential/submission/issue-18/milestone-2/TeamExponential/images/2%20-%202%20-%20title,%20tab%20text.png?raw=true) + +- user can click on any other account, tx or script and the url updates as normal. Upon clicking back on the 'PROJECT' button the URL updates accordingly and the user is shown persisted content that was autosaved. +![same click routing as before](https://github.com/hichana/flip-fest/blob/submissions/issue-%2318/milestone-%232/TeamExponential/submission/issue-18/milestone-2/TeamExponential/images/2%20-%203%20-%20same%20click%20routing%20as%20before.png?raw=true) + +![back to readme url](https://github.com/hichana/flip-fest/blob/submissions/issue-%2318/milestone-%232/TeamExponential/submission/issue-18/milestone-2/TeamExponential/images/2%20-%204%20-%20back%20to%20readme%20url.png?raw=true) + +- user can see a preview of the markdown by clicking on the 'eye' icon in the markdown editor toolbar +![eye preview](https://github.com/hichana/flip-fest/blob/submissions/issue-%2318/milestone-%232/TeamExponential/submission/issue-18/milestone-2/TeamExponential/images/2%20-%205%20-%20eye%20preview.png?raw=true) + +- optionally, the user can see a full-screen split version of the markdown by clicking on the 'split' icon in the markdown editor toolbar +![optional split screen](https://github.com/hichana/flip-fest/blob/submissions/issue-%2318/milestone-%232/TeamExponential/submission/issue-18/milestone-2/TeamExponential/images/2%20-%206%20-%20split%20screen%20option.png?raw=true) + +### User clicks 'Share' button: +- as before, the share link will be a direct link to the section of current selection, giving the user freedom to share whichever part of the playground they choose +![share](https://github.com/hichana/flip-fest/blob/submissions/issue-%2318/milestone-%232/TeamExponential/submission/issue-18/milestone-2/TeamExponential/images/3%20-%201%20-%20share.png?raw=true) + + +### User clicks 'Export' button: +- same functionality from before exists +![export popup](https://github.com/hichana/flip-fest/blob/submissions/issue-%2318/milestone-%232/TeamExponential/submission/issue-18/milestone-2/TeamExponential/images/4%20-%201%20-%20export%20popup.png?raw=true) + +- the download file now bears the project name +![title1](https://github.com/hichana/flip-fest/blob/submissions/issue-%2318/milestone-%232/TeamExponential/submission/issue-18/milestone-2/TeamExponential/images/4%20-%202%20-%20title.png?raw=true) +![title2](https://github.com/hichana/flip-fest/blob/submissions/issue-%2318/milestone-%232/TeamExponential/submission/issue-18/milestone-2/TeamExponential/images/4%20-%202%20-%20title2.png?raw=true) + +- the README.md file is included in the download package and can be opened up in a code editor like VS Code +![readme file](https://github.com/hichana/flip-fest/blob/submissions/issue-%2318/milestone-%232/TeamExponential/submission/issue-18/milestone-2/TeamExponential/images/4%20-%203%20-%201%20readme%20file.png?raw=true) + + - in the readme file, note that the 'Title' is added as an H1 heading, 'Description' as an H2 heading with its text, and Readme content are all present + ![open readme in code editor](https://github.com/hichana/flip-fest/blob/submissions/issue-%2318/milestone-%232/TeamExponential/submission/issue-18/milestone-2/TeamExponential/images/4%20-%203%20-%202%20open%20readme%20in%20code%20editor.png?raw=true) + +Visitor to the playground via shared playground link from owner: +- sees the title, description and readme content as HTML +![visitor html](https://github.com/hichana/flip-fest/blob/submissions/issue-%2318/milestone-%232/TeamExponential/submission/issue-18/milestone-2/TeamExponential/images/5%20-%201%20-%20visitor%20html.png?raw=true) + +Visitor to the playground clicks the 'Fork' button: +- first, if the visitor explores the project before clicking the 'Fork' button, they will see the owner's original code as usual +- upon clicking the 'Fork' button, they are redirected to the PROJECT section, encouraging them to establish the title, description and readme content for their forked version +![visitor redirected](https://github.com/hichana/flip-fest/blob/submissions/issue-%2318/milestone-%232/TeamExponential/submission/issue-18/milestone-2/TeamExponential/images/6%20-%201%20-%20visitor%20redirected.png?raw=true) + + + diff --git a/submission/issue-18/milestone-2/TeamExponential/images/1 - first load.png b/submission/issue-18/milestone-2/TeamExponential/images/1 - first load.png new file mode 100644 index 00000000..3822f25e Binary files /dev/null and b/submission/issue-18/milestone-2/TeamExponential/images/1 - first load.png differ diff --git a/submission/issue-18/milestone-2/TeamExponential/images/2 - 1 - save, url.png b/submission/issue-18/milestone-2/TeamExponential/images/2 - 1 - save, url.png new file mode 100644 index 00000000..a9aef1d8 Binary files /dev/null and b/submission/issue-18/milestone-2/TeamExponential/images/2 - 1 - save, url.png differ diff --git a/submission/issue-18/milestone-2/TeamExponential/images/2 - 2 - title, tab text.png b/submission/issue-18/milestone-2/TeamExponential/images/2 - 2 - title, tab text.png new file mode 100644 index 00000000..27c8f37b Binary files /dev/null and b/submission/issue-18/milestone-2/TeamExponential/images/2 - 2 - title, tab text.png differ diff --git a/submission/issue-18/milestone-2/TeamExponential/images/2 - 3 - same click routing as before.png b/submission/issue-18/milestone-2/TeamExponential/images/2 - 3 - same click routing as before.png new file mode 100644 index 00000000..0e6b2c46 Binary files /dev/null and b/submission/issue-18/milestone-2/TeamExponential/images/2 - 3 - same click routing as before.png differ diff --git a/submission/issue-18/milestone-2/TeamExponential/images/2 - 4 - back to readme url.png b/submission/issue-18/milestone-2/TeamExponential/images/2 - 4 - back to readme url.png new file mode 100644 index 00000000..1a6dcc28 Binary files /dev/null and b/submission/issue-18/milestone-2/TeamExponential/images/2 - 4 - back to readme url.png differ diff --git a/submission/issue-18/milestone-2/TeamExponential/images/2 - 5 - eye preview.png b/submission/issue-18/milestone-2/TeamExponential/images/2 - 5 - eye preview.png new file mode 100644 index 00000000..fcd8db00 Binary files /dev/null and b/submission/issue-18/milestone-2/TeamExponential/images/2 - 5 - eye preview.png differ diff --git a/submission/issue-18/milestone-2/TeamExponential/images/2 - 6 - split screen option.png b/submission/issue-18/milestone-2/TeamExponential/images/2 - 6 - split screen option.png new file mode 100644 index 00000000..08693249 Binary files /dev/null and b/submission/issue-18/milestone-2/TeamExponential/images/2 - 6 - split screen option.png differ diff --git a/submission/issue-18/milestone-2/TeamExponential/images/3 - 1 - share.png b/submission/issue-18/milestone-2/TeamExponential/images/3 - 1 - share.png new file mode 100644 index 00000000..edbed2ec Binary files /dev/null and b/submission/issue-18/milestone-2/TeamExponential/images/3 - 1 - share.png differ diff --git a/submission/issue-18/milestone-2/TeamExponential/images/4 - 1 - export popup.png b/submission/issue-18/milestone-2/TeamExponential/images/4 - 1 - export popup.png new file mode 100644 index 00000000..01679cf1 Binary files /dev/null and b/submission/issue-18/milestone-2/TeamExponential/images/4 - 1 - export popup.png differ diff --git a/submission/issue-18/milestone-2/TeamExponential/images/4 - 2 - title.png b/submission/issue-18/milestone-2/TeamExponential/images/4 - 2 - title.png new file mode 100644 index 00000000..9d9323b2 Binary files /dev/null and b/submission/issue-18/milestone-2/TeamExponential/images/4 - 2 - title.png differ diff --git a/submission/issue-18/milestone-2/TeamExponential/images/4 - 2 - title2.png b/submission/issue-18/milestone-2/TeamExponential/images/4 - 2 - title2.png new file mode 100644 index 00000000..8c036e22 Binary files /dev/null and b/submission/issue-18/milestone-2/TeamExponential/images/4 - 2 - title2.png differ diff --git a/submission/issue-18/milestone-2/TeamExponential/images/4 - 3 - 1 readme file.png b/submission/issue-18/milestone-2/TeamExponential/images/4 - 3 - 1 readme file.png new file mode 100644 index 00000000..92cbab0a Binary files /dev/null and b/submission/issue-18/milestone-2/TeamExponential/images/4 - 3 - 1 readme file.png differ diff --git a/submission/issue-18/milestone-2/TeamExponential/images/4 - 3 - 2 open readme in code editor.png b/submission/issue-18/milestone-2/TeamExponential/images/4 - 3 - 2 open readme in code editor.png new file mode 100644 index 00000000..b736b0cd Binary files /dev/null and b/submission/issue-18/milestone-2/TeamExponential/images/4 - 3 - 2 open readme in code editor.png differ diff --git a/submission/issue-18/milestone-2/TeamExponential/images/5 - 1 - visitor html.png b/submission/issue-18/milestone-2/TeamExponential/images/5 - 1 - visitor html.png new file mode 100644 index 00000000..af0d424a Binary files /dev/null and b/submission/issue-18/milestone-2/TeamExponential/images/5 - 1 - visitor html.png differ diff --git a/submission/issue-18/milestone-2/TeamExponential/images/6 - 1 - visitor redirected.png b/submission/issue-18/milestone-2/TeamExponential/images/6 - 1 - visitor redirected.png new file mode 100644 index 00000000..02b812ba Binary files /dev/null and b/submission/issue-18/milestone-2/TeamExponential/images/6 - 1 - visitor redirected.png differ