anitab-org / powerup-story-designer Goto Github PK

Description

Safari does not implement the smooth option for the DOM method .scrollIntoView().
https://caniuse.com/#feat=scrollintoview (July 25, 2018)

Need another solution for automatically scrolling in the thumbnail and card tracks. Currently, the app does scroll to the correct thumbnail/card, but it jumps immediately rather than giving proper feedback via scroll.

Mocks

How it should look (working in Chrome and Firefox)

But no smooth scrolling in Safari

Acceptance Criteria

Update [Required]

• Implement a third-party or custom solution that adds smooth, automatic scrolling for the card and thumbnail track in Safari.

Enhancement to Update [Optional]

• Implement a single solution that works for all major browsers.

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

Description

There needs to be a title somewhere on the main editing view showing which saved state you are working in once one is saved/loaded.

Currently, using the save hotkey ctrl+s automatically saves over the last state you saved or loaded, without needing to prompt. We need feedback letting a user know that a state is selected for this, especially between sessions.

Acceptance Criteria

Update [Required]

• Add a title to the main view that displays the name of the last saved or loaded state.

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

Description

The cards on the card track should be able to be reordered, preferably via drag and drop.

Should be done using Vue, not jQuery.

See for possible solutions:
https://sagalbot.github.io/vue-sortable/
https://github.com/SortableJS/Vue.Draggable
https://vuejsexamples.com/tag/drag/

Acceptance Criteria

Update [Required]

• Drag and drop a card to a new position to reorder
• Updates the Vue component state by reordering or recreating the Cards array - does not access, copy, or manipulate individual Card properties.
• Dragging a card should animate the card track to show the current target position
• Reorder actions should be tracked by the time travel/history feature
• Reordering a card in the card track should update the thumbnail track as well

Enhancement [Preferred but optional]

• Duplicate functionality for the thumbnail track

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

Description

This should not interfere with current functionality, but there should be an option on the saved state menu to view a persistent, online database of saved states.

Should include a simple user login functionality as well.

Will require that we set up a cloud database first.

• I think we have access to AWS already.
• mLab is a potential option. NoSQL, free 500mb.
• Airtable lets us manage users via a spreadsheet. It can be interacted with as a database, but then provides a spreadsheet-like frontend for viewing and managing entries. This could be useful for managing users as well as saved states.

The database needs to be set up to manage saved states, users, and a history of complete database states for recovery purposes.

Mocks

One option could be to have a cloud icon that lets you switch between modes

• Is this the best since you would have to duplicate the option or provide another solution on the export screen?
  

Another option could be to show both local and cloud options in both the saved state menu and export menu

Acceptance Criteria

Update [Required]

• Create a cloud database with relevant models to handle saved states and users.
• Update saved state UI with login fields. Logins should consist of email and password. Should offer appropriate feedback for failed/successful logins and should offer a simple email-based password recovery option.
• App should retrieve list of saved states and populate the relevant area when a user logs in.
• Cloud based saved states should work exactly like local saved states, only adding references to users. Each saved state should show who created the state, and who last modified it. Consider retaining a list of modifications per state and showing its history when something is clicked.
• On the frontend, making modifications to the database should work in the same manner as saving/loading/renaming/deleting local saved states. Modifications should be recorded in the local history per cloud saved state, and major modifications (such as deleting an entire saved state) should be recorded in a separate history, allowing us to recover from any serious mistakes.

Enhancement to Update [Optional]

• Creators for saved states could be able to set permissions for other users. Consider public editing, read only, and specific permissions for individual user accounts.
• Ability to safely clone a saved state.
• Real-time collaborative editing (a la google docs) may be more than is necessary, but it could be nice to show if a user is logged in and has loaded a saved state so others will know if it's being worked on. This can help to avoid clashes.
• In app message board? Could be easy to implement by storing messages in the database and having sessions for users who are logged in to regularly update itself. Needs UI considerations.
• Have a logged-in user use an online work session that is automatically saved as changes are made, and restored when logged in. Could still download and upload local sessions. Uploading a session while logged in would be reflected in the cloud. Another more complex option would be to let users manage their own cloud-based work sessions independent of the communal saved states.

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

Description

The export menu UI currently requires each state to be filled out every time a work session is loaded.

This feature should not be implemented per saved state but rather per local work session. This difference can be demonstrated via the difference between saving/loading states and downloading/uploading work session jsons.

Acceptance Criteria

Update [Required]

• Per work session, chosen saved states in the export menu UI should be retained for convenience.
• Should reflect changes to saved state name, and should revert to unselected if the chosen state is deleted.

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

Description

It would be more convenient to the user if the image selection input was split into two parts. It could use a layout to the position and animation selection fields.

On load, the list of image assets should be parsed, and each unique character name (left side of the ^ in the image file name) should be listed in one of the new fields. When a character is selected, then the other field should be populated with all of the mood/type options (right side of the ^ in the image file name).

This will be much more convenient as the library of characters and images grows.

Acceptance Criteria

Update [Required]

• Update the editor UI to have two selection fields for image, one for character and one for type.
• Fill the character selection input when the app is loaded
• Fill/update the type selection input each time a character is selected
• Ensure that the proper strings are still being stored by the Card object - this change may require another step in that process.

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

Description

All hotkeys are bound to ctrl right now. The command modifier does not work exactly the same as ctrl and alt.

For mac users, command is more familiar and should be the default modifier.

Also, preventDefault isn't preventing browser hotkeys from activating. Should be another method to manage this (many web apps properly use command for hotkeys).

Not tested: it's possible that the ctrl hotkeys are not working in windows for a similar reason. I don't have a readily available windows machine for convenient testing.

Acceptance Criteria

Update [Required]

• command should be the default modifier for hotkeys on macOS
• Ensure ctrl and command hotkeys work as expected on their respective platforms

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

Description

A recurring issue has been how SimpleBar interacts with the thumbnail track across browsers.

It seems that browser specific quirks concerning the nesting of elements is causing SimpleBar to sometimes not work properly in the thumbnail track only. I've not seen any issues in the other containers.

• The first instance occurred just in Safari. SimpleBar would render, but did not make the proper adjustments to hide the default scroll bar when the scroll bar was activated and appeared. This was isolated to Safari.

• The second instance did occur in Chrome, Firefox, and Safari. There was no immediately obvious change in code before this bug appeared, but the padding for nested elements worked in the thumbnail track was working, then SimpleBar began rendering immediately on load and permanently showed the default scroll bar. I only had to make changes to the size of the padding to fix.

This needs to be watched, but is not currently (July 25, 2018) a visible issue. I'm adding it here because it has popped up multiple times, each requiring a different solution.

It may be that the CSS and HTML nesting for that container needs to simplified/optimized.

Acceptance Criteria

Update [Required]

• Identify the root cause of the problem
• Apply a solution that fixes the issue reliably for the current stable builds of supported browsers

Enhancement to Update [Optional]

• [LIST ITEMS]

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

Description

Currently, a card can only be deleted by focusing it (the card itself, not a related input) and hitting your delete key.

There should be a delete button that becomes available. Perhaps it appears as an icon on the card itself when properly focused, or maybe it should be in the options container and become active when the card is focused.

Acceptance Criteria

Update [Required]

• Create mockups for potential options
• Add a delete button that only becomes active when a card is focused
• The delete button should simply call the same function as using the hotkey.

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

Description

Word wrap is not always hyphenating line breaks.

Not a major issue since the text won't be rendered the same in PowerUp itself, but from a user standpoint this may sometimes look odd and degrade readability for editors.

Acceptance Criteria

Update [Required]

• Look into and fix hyphenating words for line breaks, or remove in favor of normal word wrapping.

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

Description

Currently, the app is hard coded to manage 24 saved state slots.

This should be adjusted to allow for unlimited slots.

The UI for the saved state menu should be changed to show a single track for saved states rather than two sides.

This will require a significant change to relevant code since most functions are currently having to determine which side the chosen slot is on.

Acceptance Criteria

Update [Required]

• Change the saved state menu UI to have an infinite, scrollable list.
  • This can be done independent of the javascript changes, since the 24 slots can be rendered in this way as well.
• Update the related javascript to manage unlimited saved states.
  • Don't forget that these saved states must also report to the export menu in order to be listed for export.

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

As a developer, I want to move all bugs/issues that are now in the Readme file to the Github repo Issue list so that I can easily see all the project issues in one place.

Description

Fading overlays were being added as background image gradients, but they are not positioning correctly in all browsers. Need to check in on .fade-overlay and related css classes.

The relevant div elements have been commented out until this can be resolved. Screenshots below show the problem, but you'll need to uncomment the elements in index.html in order to work on this.

The options container and card track should have these overlays. The thumbnail track could be evaluated for the need.

Mocks

Ok in Chrome

Renders in wrong place in Safari

And Firefox

Acceptance Criteria

Update [Required]

• Fix/add fading overlays on the options container and card track.

Enhancement to Update [Optional]

• Add a similar, horizontal fade to the thumbnail track.

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

The link to the documentation in the Readme file should be https://anitab-org.github.io/powerup-story-designer/

To guide new contributors on how to contribute to this project and what is Systers Open Source workflow, we need a contribution guidelines.

Description

While it's possible to delete all cards except the first, there is no easy way to reset the first card without having to change input fields.

We should add an option to "clear" a focused card. Perhaps this could go in the options menu along with a delete button, and could reset all of the fields to empty. This could be useful in creating a blank card track without reloading the page, and could be convenient for editing in general.

Acceptance Criteria

Update [Required]

• Add a "clear" option to the card options.
• Element becomes active when a card is focused.
• Clicking it should reset the contents of the focused card to all empty values.

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

Description

The animation field works as intended, but does not give visible feedback until a card is actually selected.

We should have some method of showing which animation is selected just by glancing at a card/thumbnail. It could be as simple as showing a number or short title next to the image.

Acceptance Criteria

Update [Required]

• Create mocks of potential candidates for sharing and feedback.
• Implement visual user feedback showing which animation is selected on cards and thumbnails in their respective tracks.

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

Description

The HTML in index.html can be further improved by continuing to abstract it to be handled by and rendered dynamically via VueJS.

We should be able to eliminate using jQuery to handle DOM interactions by giving more responsibility to Vue. Currently, jQuery's primary responsibility is responding to state changes on inputs, but Vue could also handle these things. Many inputs are already being rendered dynamically by Vue.

Acceptance Criteria

Update [Required]

• Abstract html elements to the point that Vue has control of all inputs
• Change state responses to be handled by Vue instead of jQuery
• List any leftover jQuery dependent functions in another issue for evaluation

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

Description

Quick save via hotkey should automatically target the last saved or loaded state.

Currently, saving a state properly sets this target, but loading one does not.

Acceptance Criteria

Update [Required]

• Loading a saved state should set the quick save target.

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

According to opensource.guide:

By definition, every open source project must have an open source license. If the project does not have a license, it is not open source.

Guide on choosing a licence: https://choosealicense.com/

I'm aware most of Systers projects have GPL license, is this the licence that should be added here?