This a test issue to help get familiar with the workings of the project.
Need to add a button to the left-hand nav in the viewer that, when pressed, turns the background of the Navigation to red. Pressing it again would return the nav back to normal. Also need to log when the nav is set to the red alert state and returned back to the normal state.
Here would be the steps to implement this:
Start by creating a new branch to work on - git checkout -b issue/next-91-red-alert-status (Convention: If you're working on an issue that touches both the Next project and the Document Engine project create the issue on Next and prefix the name of the issue in the branch for Document Engine with next-)
Add a new event handler to NavStore to listen to nav:redAlert. The payload of the event should include a boolean to indicate if red alert is on or off. This event handler should call APIUtil.postEvent to send a nav:redAlert event to the server.
Modify the state of NavStore to include a new redAlert property holding a boolean if red alert is enabled or not.
Add a new method to NavUtil called setRedAlert to fire the nav:redAlert event. The method should take a boolean to indicate if red alert should be enabled or not.
Add a button to the nav component. Clicking this should call the NavUtil.setRedAlert method.
Add a query method to NavUtil - isRedAlertEnabled - that will return a boolean to indicate if red alert is enabled or not
Add two new CSS classes in the nav component - is-red-alert and is-not-red-alert. The nav component should use the NavUtil.isRedAlertEnabled method to figure out which class to apply to the element.
Add a is-red-alert style to the nav component scss file which turns the background of the nav red.
Testing:
[ ] - In viewer-app.js test if clicking the button multiple times toggles between setting the is-red-alert and is-not-red-alert classes on the appropriate element.
[ ] - Add a NavUtil test ensuring that NavUtil.setRedAlert calls the Dispatcher.trigger method with the correct parameters and that NavUtil.isRedAlertEnabled returns expected values with given inputs.
[ ] - Test that NavUtil.setRedAlert calls Dispatcher.trigger with the correct parameters with given inputs.
(Currently there isn't a test for nav-store.js so you can skip those tests)
Issue by zachberry Wednesday Dec 20, 2017 at 16:22 GMT Originally opened as https://github.com/ucfcdl/Obojobo-Document-Engine/issues/49
This a test issue to help get familiar with the workings of the project.
Need to add a button to the left-hand nav in the viewer that, when pressed, turns the background of the Navigation to red. Pressing it again would return the nav back to normal. Also need to log when the nav is set to the red alert state and returned back to the normal state.
Here would be the steps to implement this:
git checkout -b issue/next-91-red-alert-status
(Convention: If you're working on an issue that touches both the Next project and the Document Engine project create the issue on Next and prefix the name of the issue in the branch for Document Engine withnext-
)nav:redAlert
. The payload of the event should include a boolean to indicate if red alert is on or off. This event handler should callAPIUtil.postEvent
to send anav:redAlert
event to the server.redAlert
property holding a boolean if red alert is enabled or not.setRedAlert
to fire thenav:redAlert
event. The method should take a boolean to indicate if red alert should be enabled or not.isRedAlertEnabled
- that will return a boolean to indicate if red alert is enabled or notis-red-alert
andis-not-red-alert
. The nav component should use the NavUtil.isRedAlertEnabled method to figure out which class to apply to the element.is-red-alert
style to the nav component scss file which turns the background of the nav red.Testing:
is-red-alert
andis-not-red-alert
classes on the appropriate element.(Currently there isn't a test for nav-store.js so you can skip those tests)