#60: Added the new version information when an update is available

resources/lang/en/admin.php

@@ -6,6 +6,7 @@ return [
     ],
     'about' => [
         'current_version' => 'You are running version',
+        'date_published_label' => 'Release date:',
         'github_link' => 'Github Project Website',
         'intro' => 'Blue Twilight is an <a href="https://www.andyheathershaw.uk/software/" target="_blank">App by Andy</a>. It is made with <i class="fa fa-heart text-red"></i> by UK software developer <a href="https://www.andyheathershaw.uk" target="_blank">Andy Heathershaw</a>.',
         'latest_version_loading' => 'Checking for the latest release on Github...',
@@ -13,7 +14,9 @@ return [
         'links_header' => 'Useful Links',
         'title' => 'About Blue Twilight',
         'up_to_date' => 'Good job - your installation of Blue Twilight is up-to-date!',
+        'update_available' => 'An update is available to Blue Twilight.',
         'user_guide_link' => 'User Guide',
+        'version_label' => 'Version',
         'versions_header' => 'About &amp; Version',
         'website_link' => 'Main Website'
     ],

resources/lang/en/forms.php

@@ -13,6 +13,7 @@ return [
     'bulk_edit_photos_label' => 'Bulk edit selected photos:',
     'bulk_edit_photos_placeholder' => 'Select an action',
     'cancel_action' => 'Cancel',
+    'close_action' => 'Close',
     'continue_action' => 'Continue',
     'create_action' => 'Create',
     'create_album_label' => 'Create a new album:',
@@ -20,6 +21,7 @@ return [
     'default_storage_label' => 'Use as the default storage location for new albums',
     'delete_action' => 'Delete',
     'description_label' => 'Description:',
+    'download_action' => 'Download',
     'edit_action' => 'Edit',
     'email_label' => 'E-mail address:',
     'labels_label' => 'Labels:',

resources/views/themes/base/admin/about.blade.php

@@ -46,8 +46,39 @@
                                 </div>
 
                                 <p v-cloak v-if="!is_loading && !can_upgrade" class="text-success">
-                                    <i class="fa fa-check"></i> @lang('admin.about.up_to_date')
+                                    <i class="fa fa-check fa-fw"></i> @lang('admin.about.up_to_date')
                                 </p>
+
+                                <div v-cloak v-if="!is_loading && can_upgrade" class="text-danger">
+                                    <p><i class="fa fa-warning fa-fw"></i> @lang('admin.about.update_available')</p>
+                                    <p class="mt-0" style="font-size: 2.5rem;" v-text="version_name"></p>
+                                    <p><a class="btn btn-secondary text-white" href="#version-update-modal" data-toggle="modal">View details</a></p>
+                                </div>
+                            </div>
+
+                            <div class="modal" id="version-update-modal">
+                                <div class="modal-dialog" role="document">
+                                    <div class="modal-content">
+                                        <div class="modal-header">
+                                            <h5 class="modal-title">@lang('admin.about.version_label') <span v-text="version_name"></span></h5>
+                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                                <span aria-hidden="true">&times;</span>
+                                            </button>
+                                        </div>
+                                        <div class="modal-body">
+                                            <div class="alert alert-info">
+                                                <p class="m-0"><b>@lang('admin.about.update_available')</b></p>
+                                                <p class="m-0">@lang('admin.about.date_published_label') <span v-text="version_date"></span></p>
+                                            </div>
+
+                                            <p v-html="version_body"></p>
+                                        </div>
+                                        <div class="modal-footer">
+                                            <a class="btn btn-primary" v-bind:href="version_url">@lang('forms.download_action')</a>
+                                            <a class="btn btn-secondary" href="#" data-dismiss="modal">@lang('forms.cancel_action')</a>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -71,7 +102,7 @@
             var app = new Vue(viewModel);
             app.$watch('can_upgrade', function(value)
             {
-                alert('update available');
+                $('#version-update-modal').modal();
             });
             app.init();
         });