Fix/Update style & Adjust messages & Share "Communication failure" toast

Fixes background color of toast on iOS, enlarges font size and simplifies messages. The "Communication failure" toast is shared across SSE and send command (REST) to avoid having the toast popping in and out. Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
openhab · Mar 28, 2023 · b8e41c3 · b8e41c3
1 parent 9189f1a
commit b8e41c3
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 23 deletions.
diff --git a/bundles/org.openhab.ui/web/src/assets/i18n/common/en.json b/bundles/org.openhab.ui/web/src/assets/i18n/common/en.json
@@ -41,8 +41,6 @@
   "page.navbar.back": "Back",
   "page.navbar.edit": "Edit",
   "admin.notTranslatedYet": "The administration area is not translated yet.",
-  "error.sseConnectionFailed": "SSE connection failed!",
-  "error.itemNotFound": "Item not found",
-  "error.sendCommandFailed": "Sending command to {} failed:",
-  "error.reloadRecommended": "Reload recommended"
+  "error.communicationFailure": "Communication failure",
+  "error.itemNotFound": "%s not found"
 }
diff --git a/bundles/org.openhab.ui/web/src/components/app.vue b/bundles/org.openhab.ui/web/src/components/app.vue
@@ -382,7 +382,7 @@ export default {
       showDeveloperSidebar: false,
       currentUrl: '',
 
-      sseFailureToast: null
+      communicationFailureToast: null
     }
   },
   computed: {
@@ -672,9 +672,9 @@ export default {
         closeButtonText: this.$t('dialogs.reload'),
         destroyOnClose: autoClose,
         closeTimeout: (autoClose) ? 5000 : undefined,
+        cssClass: 'failure-toast button-outline',
         position: 'bottom',
-        horizontalPosition: 'bottom',
-        cssClass: 'failure-toast button-outline'
+        horizontalPosition: 'center'
       })
       toast.on('closeButtonClick', () => {
         window.location.reload()
@@ -783,13 +783,13 @@ export default {
         if (mutation.type === 'sseConnected') {
           if (!window.OHApp && this.$f7) {
             if (mutation.payload === false) {
-              if (this.sseFailureToast === null) this.sseFailureToast = this.displayFailureToast(this.$t('error.sseConnectionFailed'), true, false)
-              this.sseFailureToast.open()
+              if (this.communicationFailureToast === null) this.communicationFailureToast = this.displayFailureToast(this.$t('error.communicationFailure'), true, false)
+              this.communicationFailureToast.open()
             } else if (mutation.payload === true) {
-              if (this.sseFailureToast !== null) {
-                this.sseFailureToast.close()
-                this.sseFailureToast.destroy()
-                this.sseFailureToast = null
+              if (this.communicationFailureToast !== null) {
+                this.communicationFailureToast.close()
+                this.communicationFailureToast.destroy()
+                this.communicationFailureToast = null
               }
             }
           }
@@ -800,20 +800,20 @@ export default {
         error: (action, state, error) => {
           if (action.type === 'sendCommand') {
             let reloadButton = true
-            let msg = error
+            let msg = this.$t('error.communicationFailure')
             switch (error) {
-              case 0:
-              case 302:
-              case 'Found':
-                msg = this.$t('error.reloadRecommended')
-                break
               case 404:
               case 'Not Found':
-                msg = this.$t('error.itemNotFound')
+                msg = this.$t('error.itemNotFound').replace('%s', action.payload.itemName)
                 reloadButton = false
-                break
+                return this.displayFailureToast(msg, reloadButton)
+            }
+            if (this.communicationFailureToast === null) {
+              this.communicationFailureToast = this.displayFailureToast(this.$t('error.communicationFailure'), true, true)
+              this.communicationFailureToast.on('closed', () => {
+                this.communicationFailureToast = null
+              })
             }
-            this.displayFailureToast(this.$t('error.sendCommandFailed').replace('{}', action.payload.itemName) + ' ' + msg, reloadButton)
           }
         }
       })

diff --git a/bundles/org.openhab.ui/web/src/css/app.styl b/bundles/org.openhab.ui/web/src/css/app.styl
@@ -287,7 +287,8 @@ html
   user-drag none
 
 .failure-toast
-  --f7-toast-bg-color var(--f7-theme-color)
+  background-color #e64a19 !important
+  font-size 22px !important
   --f7-toast-text-color white
   --f7-button-text-color white
   --f7-button-border-color white