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

MVP1- Quick Tactic Selector + New Tactic + Manage Tactics #183

Open
2 of 12 tasks
bryansamuel1 opened this issue Apr 21, 2020 · 0 comments
Open
2 of 12 tasks

MVP1- Quick Tactic Selector + New Tactic + Manage Tactics #183

bryansamuel1 opened this issue Apr 21, 2020 · 0 comments
Labels
enhancement New feature or request frontend Frontend related good first issue Good for newcomers
Milestone

Comments

@bryansamuel1
Copy link
Contributor

bryansamuel1 commented Apr 21, 2020

  • Bottom left corner, not touching either side, add a Vuetify Nested list component that expands vertically. Initially the input will be closed and have a title of "Tactics". This input will be around 250px and be white with a light grey border
  • When the bar is closed it is has a title of "Tactics". When the bar is clicked it is opened vertically and will show a list of all tactics that are currently within the room.
  • Clicking on a tactic will switch the active tactic to that one. All users in the room will have their tactic switched.
  • In addition to the nested list component add a row above the row that says "Tactics".
  • On the right side of this row add a button with fa-cog as an icon. Add a tooltip and title that says "Manage Tactics".
  • On the left side of this row add a button with fa-plus as an icon. Add a tooltip and title that says "New Tactic".
  • Clicking "Manage Tactic" pops open a new Vuetify dialog. This will have a Save and Close button at the bottom. The dialog cannot be closed by clicking outside of it. User must click the cancel button.
    Add the following to the dialog
  • List of all the tactics using Vue Draggable (https://sortablejs.github.io/Vue.Draggable/#/transition-example).
    On each record
  • On the left have an icon fa-bars this is allow a user to drag a record up and down
  • In the middle have the text of the tactic as an editable input. so they can rename them
  • On the right have an red button with an icon fa-times. When clicked pop a dialog above with the following text "This will delete the tactic "TACTICNAME", are you sure you want to do this?" then with two buttons yes and no. Yes will delete the tactic and close that dialog. Cancel will just close the dialog.
  • Clicking "New Tactic" pops open a new Vuetify dialog. This will have a Save and Close button at the bottom. The dialog cannot be closed by clicking outside of it. User must click the cancel button.

https://vuetifyjs.com/en/components/lists/#nested-lists

@bryansamuel1 bryansamuel1 added enhancement New feature or request frontend Frontend related good first issue Good for newcomers labels Apr 21, 2020
@bryansamuel1 bryansamuel1 changed the title MVP1- Quick Tactic Selector MVP1- Quick Tactic Selector + Add Tactic + Manage Tactic Apr 26, 2020
@bryansamuel1 bryansamuel1 added this to the 0.1.0 milestone Apr 26, 2020
@bryansamuel1 bryansamuel1 changed the title MVP1- Quick Tactic Selector + Add Tactic + Manage Tactic MVP1- Quick Tactic Selector + New Tactic + Manage Tactics Apr 26, 2020
@bryansamuel1 bryansamuel1 mentioned this issue Apr 26, 2020
87 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request frontend Frontend related good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

1 participant