Changelog is now available in the UI

New: Added changelog to UI

UI/Update/UpdateCollection.js

@@ -0,0 +1,11 @@
+'use strict';
+define(
+    [
+        'backbone',
+        'Update/UpdateModel'
+    ], function (Backbone, UpdateModel) {
+        return  Backbone.Collection.extend({
+            url  : window.NzbDrone.ApiRoot + '/update',
+            model: UpdateModel
+        });
+    });

UI/Update/UpdateCollectionView.js

@@ -0,0 +1,10 @@
+'use strict';
+define(
+    [
+        'marionette',
+        'Update/UpdateItemView'
+    ], function (Marionette, UpdateItemView) {
+        return Marionette.CollectionView.extend({
+            itemView: UpdateItemView
+        });
+    });

UI/Update/UpdateItemView.js

@@ -0,0 +1,11 @@
+'use strict';
+
+define(
+    [
+        'app',
+        'marionette'
+    ], function (App, Marionette) {
+        return Marionette.ItemView.extend({
+            template: 'Update/UpdateItemViewTemplate'
+        });
+    });

UI/Update/UpdateItemViewTemplate.html

@@ -0,0 +1,23 @@
+<div class="update">
+    <fieldset>
+        <legend>{{version}} <span class="date">- {{ShortDate releaseDate}}</span></legend>
+
+        {{#with changes}}
+            {{#each new}}
+                <div class="change">
+                    <span class="label label-success">New</span> {{this}}
+                </div>
+            {{/each}}
+
+            {{#each fixed}}
+                <div class="change">
+                    <span class="label label-info">Fixed</span> {{this}}
+                </div>
+            {{/each}}
+        {{/with}}
+
+        {{#unless changes}}
+            No notable changes
+        {{/unless}}
+    </fieldset>
+</div>

UI/Update/UpdateLayout.js

@@ -0,0 +1,58 @@
+'use strict';
+define(
+    [
+        'marionette',
+        'backgrid',
+        'Update/UpdateCollection',
+        'Update/UpdateCollectionView',
+        'Shared/Toolbar/ToolbarLayout',
+        'Shared/LoadingView'
+    ], function (Marionette, Backgrid, UpdateCollection, UpdateCollectionView, ToolbarLayout, LoadingView) {
+        return Marionette.Layout.extend({
+            template: 'Update/UpdateLayoutTemplate',
+
+            regions: {
+                updates: '#x-updates',
+                toolbar: '#x-toolbar'
+            },
+
+            leftSideButtons: {
+                type      : 'default',
+                storeState: false,
+                items     :
+                    [
+                        {
+                            title  : 'Check for Update',
+                            icon   : 'icon-nd-update',
+                            command: 'applicationUpdate'
+                        }
+                    ]
+            },
+
+            initialize: function () {
+                this.updateCollection = new UpdateCollection();
+            },
+
+            onRender: function () {
+                this.updates.show(new LoadingView());
+                this._showToolbar();
+
+                var self = this;
+                var promise = this.updateCollection.fetch();
+
+                promise.done(function (){
+                    self.updates.show(new UpdateCollectionView({ collection: self.updateCollection }));
+                });
+            },
+
+            _showToolbar: function () {
+                this.toolbar.show(new ToolbarLayout({
+                    left   :
+                        [
+                            this.leftSideButtons
+                        ],
+                    context: this
+                }));
+            }
+        });
+    });

UI/Update/UpdateLayoutTemplate.html

@@ -0,0 +1,6 @@
+<div id="x-toolbar"/>
+<div class="row">
+    <div class="span12">
+        <div id="x-updates"/>
+    </div>
+</div>

UI/Update/UpdateModel.js

@@ -0,0 +1,9 @@
+'use strict';
+define(
+    [
+        'backbone'
+    ], function (Backbone) {
+        return Backbone.Model.extend({
+
+        });
+    });

UI/Update/update.less

@@ -0,0 +1,25 @@
+.update {
+  margin-bottom: 30px;
+
+  legend {
+    margin-bottom: 5px;
+    line-height: 30px;
+
+    .date {
+      font-size: 16px;
+    }
+  }
+
+  .changes-header {
+    font-size: 18px;
+  }
+
+  .label {
+    width: 40px;
+    text-align: center;
+  }
+  .change {
+    margin-bottom: 2px;
+    font-size: 13px;
+  }
+}