Display a message when no additional language packs are installed

src/octoprint/static/js/app/helpers.js

@@ -11,6 +11,7 @@ function ItemListHelper(listType, supportedSorting, supportedFilters, defaultSor
     self.searchFunction = undefined;
 
     self.allItems = [];
+    self.allSize = ko.observable(0);
 
     self.items = ko.observableArray([]);
     self.pageSize = ko.observable(filesPerPage);
@@ -27,6 +28,7 @@ function ItemListHelper(listType, supportedSorting, supportedFilters, defaultSor
 
     self.updateItems = function(items) {
         self.allItems = items;
+        self.allSize(items.length);
         self._updateItems();
     };
 
@@ -432,16 +434,16 @@ function hideOfflineOverlay() {
     $("#offline_overlay").hide();
 }
 
-function showConfirmationDialog(message, onacknowledge) {
+function showConfirmationDialog(message, onacknowledge) {
     var confirmationDialog = $("#confirmation_dialog");
     var confirmationDialogAck = $(".confirmation_dialog_acknowledge", confirmationDialog);
 
     $(".confirmation_dialog_message", confirmationDialog).text(message);
     confirmationDialogAck.unbind("click");
-    confirmationDialogAck.bind("click", function (e) {
+    confirmationDialogAck.bind("click", function (e) {
         e.preventDefault();
-        $("#confirmation_dialog").modal("hide");
+        $("#confirmation_dialog").modal("hide");
-        onacknowledge(e);
+        onacknowledge(e);
     });
-    confirmationDialog.modal("show");
+    confirmationDialog.modal("show");
-}
+}

src/octoprint/static/js/app/viewmodels/settings.js

@@ -316,6 +316,10 @@ $(function() {
             return item.display + ((item.english != undefined) ? ' (' + item.english + ')' : '');
         };
 
+        self.languagePacksAvailable = ko.computed(function() {
+            return self.translations.allSize() > 0;
+        });
+
         self.deleteLanguagePack = function(locale, pack) {
             $.ajax({
                 url: API_BASEURL + "languages/" + locale + "/" + pack,

src/octoprint/static/less/octoprint.less

@@ -684,6 +684,20 @@ ul.dropdown-menu li a {
   }
 }
 
+
+#settings_appearance_managelanguagesdialog_emptylist {
+  overflow: hidden;
+  width: 100%;
+  height: 300px;
+  text-align: center;
+  display: table;
+
+  div {
+    display: table-cell;
+    vertical-align: middle;
+  }
+}
+
 /** Footer */
 .footer {
   ul {

src/octoprint/templates/dialogs/settings/appearance.jinja2

@@ -44,25 +44,37 @@
         <h3>{{ _('Manage Language Packs...') }}</h3>
     </div>
     <div class="modal-body">
-        <div id="settings_appearance_managelanguagesdialog_list" data-bind="slimScrolledForeach: translations.paginatedItems" style="height: 300px">
+        <h4>{{ _('Available Language Packs') }}</h4>
-            <div class="entry">
+
-                <strong><a href="#" onclick="$(this).children('i').toggleClass('icon-caret-right icon-caret-down').parent().parent().next().slideToggle('fast')"><i class="icon-caret-down"></i> <span data-bind="text: $root.languagePackDisplay($data)"></span></a></strong>
+        <div data-bind="visible: languagePacksAvailable()">
-                <div class="packs">
+            <div id="settings_appearance_managelanguagesdialog_list" data-bind="slimScrolledForeach: translations.paginatedItems" style="height: 300px">
-                    <!-- ko foreach: $data.packs -->
+                <div class="entry">
-                    <div class="row-fluid">
+                    <strong><a href="#" onclick="$(this).children('i').toggleClass('icon-caret-right icon-caret-down').parent().parent().next().slideToggle('fast')"><i class="icon-caret-down"></i> <span data-bind="text: $root.languagePackDisplay($data)"></span></a></strong>
-                        <div class="span8 offset1">
+                    <div class="packs">
-                            <strong data-bind="text: display"></strong><br />
+                        <!-- ko foreach: $data.packs -->
-                            <small data-bind="visible: pack.last_update" class="muted">{{ _('Last update:') }} <span data-bind="text: formatDate($data.pack.last_update)"></span></small>
+                        <div class="row-fluid">
-                        </div>
+                            <div class="span8 offset1">
-                        <div class="span3">
+                                <strong data-bind="text: display"></strong><br />
-                            <button class="btn btn-block btn-small" data-bind="click: function() {$root.deleteLanguagePack($data.pack.locale, $data.identifier)}"><i class="icon-trash"></i> {{ _('Delete') }}</button>
+                                <small data-bind="visible: pack.last_update" class="muted">{{ _('Last update:') }} <span data-bind="text: formatDate($data.pack.last_update)"></span></small>
+                            </div>
+                            <div class="span3">
+                                <button class="btn btn-block btn-small" data-bind="click: function() {$root.deleteLanguagePack($data.pack.locale, $data.identifier)}"><i class="icon-trash"></i> {{ _('Delete') }}</button>
+                            </div>
                         </div>
+                        <!-- /ko -->
                     </div>
-                    <!-- /ko -->
                 </div>
             </div>
         </div>
+        <div id="settings_appearance_managelanguagesdialog_emptylist" data-bind="visible: !languagePacksAvailable()">
+            <div>
+                <p>
+                    <strong>{{ _('No additional Language Packs are installed at the moment.') }}</strong>
+                </p>
+            </div>
+        </div>
 
+        <h4>{{ _('Upload additional Language Packs') }}</h4>
 
         <form class="form-inline">
             <div class="control-group row-fluid" data-bind="css: {error: invalidTranslationArchive}">
@@ -77,6 +89,8 @@
             </div>
             <span class="help-block" data-bind="visible: invalidTranslationArchive">{{ _('This does not look like a valid language pack. Valid language packs should be either zip files or tarballs and have the extension ".zip", ".tar.gz", ".tgz" or ".tar"') }}</span>
         </form>
+
+        <small>{{ _('Please note that you will have to reload the page in order for any newly added language packs to become available.') }}</small>
     </div>
     <div class="modal-footer">
         <button class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Close') }}</button>