Merge pull request #245 from gyselroth/v3.2.x

V3.2.x readme improvements / fix #242
gyselroth · Jul 2, 2019 · 08b24f9 · 08b24f9
2 parents 5dc8625 + d0409f4
commit 08b24f9
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## 3.2.5
+**Maintainer**: balloon-team <[email protected]>\
+**Date**: 
+
+* [CHANGE] "Reload" Banner, when update is available #242
+
+
 ## 3.2.4
 **Maintainer**: balloon-team <[email protected]>\
 **Date**: Fri Jun 28 09:41:04 CEST 2019 

diff --git a/README.md b/README.md
@@ -11,23 +11,27 @@ This is the web based user interface for the [balloon](https://github.com/gyselr
 </p>
 
 * Modern html5/css, well designed web user interface
+* Progressive Web App
+* Support for WebAuthn (Fingerprint authentication and more) 
 * Various dms features like tagging, meta data, file history, event log
 * File previews
 * Create shared links/shared folders, (optional with expiration timestamps or automatic self-destruction)
 * Download multiple files at once (zip on demand)
 * Upload multiple files at once
+* Implelements office client support for the balloon server WOPI implementation (Tested with Libreoffice Online and Microsoft Online)
+* Markdown support including markdown editor
+* Create burl files (URL bookmark in the cloud)
 * Create new files in the ui itself
 * Support for move, copy, cut
 * Superfast user interface (Single Page Application)
-* Responsive (Browse with your smartphone, tablet, desktop, whatever you like!)
-* Multilangual (And locale based)
+* Full responsive (Browse with your smartphone, tablet, desktop, whatever you like!)
+* Multilangual
 * Keyboard navigation
 * Drag&Drop support to upload files from your desktop onto balloon
 * Video&Audio player
 * Support for various other file formats
 * HTTP basic authentication and/or support for multiple OpenID-Connect provider
 * Inbuilt app system to support 3rd party apps (and core apps as well)
-* Configureable (JSON)
 * ... And more
 
 ## Requirements

diff --git a/src/index.html b/src/index.html
@@ -85,6 +85,11 @@
     </style>
 </head>
 <body>
+    <div id="update-notification" class="app-notification">
+        <div class="app-notification-button"><svg class="gr-icon gr-i-refresh"><use xlink:href="<%= iconsSvg %>#refresh"></use></svg></div>
+        <div class="app-notification-text" data-i18n="misc.app_notifications.update_available"></div>
+    </div>
+
     <div id="login-loader">
         <div id="login-loader-inner">
             <div id="login-loader-logo">

diff --git a/src/locale/de.json b/src/locale/de.json
@@ -499,6 +499,9 @@
     "name": "Name"
   },
   "misc": {
-    "rename_node": "Datei umbenennen"
+    "rename_node": "Datei umbenennen",
+    "app_notifications": {
+      "update_available": "Ein update ist verfügbar"
+    }
   }
 }
diff --git a/src/locale/en.json b/src/locale/en.json
@@ -498,6 +498,9 @@
     "name": "Name"
   },
   "misc": {
-    "rename_node": "Rename file"
+    "rename_node": "Rename file",
+    "app_notifications": {
+      "update_available": "An update is available"
+    }
   }
 }
diff --git a/src/main.js b/src/main.js
@@ -34,11 +34,16 @@ $.ajax({
 if ('serviceWorker' in navigator) {
   const wb = new Workbox('/service-worker.js');
 
-  wb.addEventListener('activated', (event) => {
-    if (event.isUpdate) {
-      // reload when there is a newer version available
-      window.location.reload();
-    }
+  wb.addEventListener('waiting', (event) => {
+    $('body').addClass('app-notification-visible');
+    $('#update-notification').show().off('click').on('click', () => {
+
+      wb.addEventListener('activated', (event) => {
+        window.location.reload();
+      });
+
+      wb.messageSW({type: 'SKIP_WAITING'});
+    });
   });
 
   wb.register();

diff --git a/src/themes/default/scss/_app-notification.scss b/src/themes/default/scss/_app-notification.scss
@@ -0,0 +1,41 @@
+
+.app-notification {
+  $buttonHeight: 30px;
+
+  @include clearfix;
+
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: $appNotificationHeight;
+  background-color: $colorActiveBlue;
+  color: $colorWhite;
+  z-index: 12001;
+  padding: 5px;
+  box-sizing: border-box;
+
+  .app-notification-button {
+    @include icon-button-small($buttonHeight);
+
+    float: left;
+
+    &:hover {
+      color: $colorActiveBlue;
+      border-color: $colorWhite;
+      background-color: $colorWhite;
+    }
+  }
+
+  .app-notification-text {
+    width: 100%;
+  }
+
+  .app-notification-button + .app-notification-text {
+    $margin-left: 10px;
+
+    float: left;
+    line-height: $buttonHeight;
+    margin-left: $margin-left;
+    width: calc(100% - #{$buttonHeight + $margin-left});
+  }
+}
diff --git a/src/themes/default/scss/balloon.scss b/src/themes/default/scss/balloon.scss
@@ -25,6 +25,9 @@ $UbuntuFontsPath: '../../../../node_modules/ubuntu-fontface/fonts';
 
 @import 'kendo-ui-override';
 
+// update banner
+@import 'app-notification';
+
 // header top bar
 @import 'header';
 

diff --git a/src/themes/default/scss/fsContent/_fsContentView.scss b/src/themes/default/scss/fsContent/_fsContentView.scss
@@ -77,6 +77,13 @@
     overflow-y: scroll;
     z-index: 10;
 
+    .app-notification-visible & {
+      $topUpdateAvailable: $top + $appNotificationHeight;
+
+      height: calc(100% - #{$topUpdateAvailable});
+      top: $topUpdateAvailable;
+    }
+
     &.active-mobile {
       right: auto;
       animation: none;

diff --git a/src/themes/default/scss/includes/_fsContentMobileOverlay.scss b/src/themes/default/scss/includes/_fsContentMobileOverlay.scss
@@ -11,6 +11,11 @@
   transition: right 0.2s ease-in-out;
   z-index: 18;
 
+  .app-notification-visible & {
+    top: $appNotificationHeight;
+    height: calc(100% - #{$appNotificationHeight});
+  }
+
   .fs-content-overlay-header {
     @include clearfix;
 

diff --git a/src/themes/default/scss/includes/_variables.scss b/src/themes/default/scss/includes/_variables.scss
@@ -4,3 +4,5 @@ $pannelWidthM: 400px;
 
 $fsContentSidePaddingM: 30px;
 $fsContentSidePaddingS: 20px;
+
+$appNotificationHeight: 40px;
diff --git a/webpack.common.js b/webpack.common.js
@@ -111,7 +111,7 @@ module.exports = {
     new GenerateSW({
       importWorkboxFrom: 'local',
       clientsClaim: true,
-      skipWaiting: true
+      skipWaiting: false
     }),
     new webpack.DefinePlugin({
       'process.env.VERSION': JSON.stringify(process.env.VERSION || gitRevisionPlugin.version()),
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,3 +4,5 @@ $pannelWidthM: 400px;

		$fsContentSidePaddingM: 30px;
		$fsContentSidePaddingS: 20px;

		$appNotificationHeight: 40px;