NEED
As a user
I want to be able to get notifications about new changes to an application
So that I can stay informed and be able to reload the application at my own will
DELIVERABLES
- A jquery plugin which can check for updates on GitHub and notify the user by inserting and updating the notification list
- A HTML structure for the list
- A LESS / CSS library to provide styling for the list
PREREQUISITES
TODOS
jQuery
We need to have a container
which in the first place will be empty, this will be targeted by the plugin.
Second, we need to make a jquery plugin, which will have a method called checkForUpdates
with since
, branch
and label
as params. It will return all the issues (title + label) for the specified branch
that have a certain label
(ex: Release) and are newer than the since
param.
If there are any issues then:
- if the
container
is empty, create the list and show the button with a badge - else if the
container
already exists then append the new notifications to the list and update the badge
If we want to check for updates, the only thing that we need to do is to call the checkForUpdates
method.
checkForUpdates(
since,
branch,
[label]
)
checkForUpdates(1400078822660, 'master', 'Release')
// get all merge commits since the given timestamp (filter by branch)
// extract issue meta data from commit issue ID reference (#3351)
// filter issues by label
LESS / CSS
- A notification button with a badge to show the number of new notifications
- A notification list that can be positioned according to it's css class with 4 main positions:
top
,bottom
,left
andright
. Each of these positions can be modified by providing a second class:pull-left
andpull-right
for vertical positions andpull-top
for horizontal positions. The purpose here is to make the list usable in any positioning scenario
SCREENSHOTS
inspiration from github on mac
NOTES
- Add default position to list, when no positioning classes are provided?
- Notification button doesn't show up by default, only when there are notifications to be shown
- All visual elements should have default styling but need to also be customizable. Right now this can be done via the variables in
variables.less
. Should we extend this further? - Reload button(see screenshot above). We need to discuss how to add a header that will contain the reload button and maybe a title. This can't be part of the ul, needs to be a separate element so that it doesn't scroll with the list.