Skip to content

Instantly share code, notes, and snippets.

@RadValentin
Last active August 29, 2015 14:01
Show Gist options
  • Save RadValentin/1a73661be9a1769f87bd to your computer and use it in GitHub Desktop.
Save RadValentin/1a73661be9a1769f87bd to your computer and use it in GitHub Desktop.
changelog

github-changelog

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:

  1. if the container is empty, create the list and show the button with a badge
  2. 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

  1. A notification button with a badge to show the number of new notifications
  2. A notification list that can be positioned according to it's css class with 4 main positions: top, bottom, left and right. Each of these positions can be modified by providing a second class: pull-left and pull-right for vertical positions and pull-top for horizontal positions. The purpose here is to make the list usable in any positioning scenario

SCREENSHOTS

inspiration from github on mac

inspiration from github on mac

NOTES

  1. Add default position to list, when no positioning classes are provided?
  2. Notification button doesn't show up by default, only when there are notifications to be shown
  3. 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?
  4. 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment