Resolves #448

app/resources/js/app.js

@@ -799,10 +799,7 @@ window.createVueInstance = function(element) {
                         response.messages.forEach(function(elem, index) {
                             document.getElementById('chat').innerHTML = window.vue.renderNewChatMessage(elem, auth_user) + document.getElementById('chat').innerHTML;
                         
-                            let audio = new Audio(window.location.origin + '/snd/new_message.wav');
-                            audio.onloadeddata = function() {
-                                audio.play();
-                            };
+                            window.vue.playAudio('new_message.wav');
                         });
                     }
                 });
@@ -981,11 +978,8 @@ window.createVueInstance = function(element) {
                     if (response.code == 200) {
                         if (response.message) {
                             window.vue.fadeSystemMessage(target, window.vue.renderNewSystemMessage(response.message), response.message.id);
-                        
-                            let audio = new Audio(window.location.origin + '/snd/new_message.wav');
-                            audio.onloadeddata = function() {
-                                audio.play();
-                            };
+
+                            window.vue.playAudio('new_message.wav');
                         }
                     }
                 });
@@ -2010,6 +2004,13 @@ window.createVueInstance = function(element) {
                 alert(window.vue.copiedToClipboard);
             },
 
+            playAudio: function(soundfile) {
+                let audio = new Audio(window.location.origin + '/snd/' + soundfile);
+                audio.onloadeddata = function() {
+                    audio.play();
+                };
+            },
+
             isProgressiveWebApp: function() {
                 return window.matchMedia('(display-mode: standalone)').matches;
             },

app/resources/sass/app.scss

@@ -1079,11 +1079,12 @@ fieldset .field {
 }
 
 .plant-custom-attribute a {
-    color: rgb(0, 145, 215);
+    color: rgb(55, 145, 243);
 }
 
 .plant-custom-attribute a:hover {
-    color: rgb(0, 145, 215);
+    color: rgb(55, 145, 243);
+    text-decoration: underline;
 }
 
 .plant-custom-attribute-removal {
@@ -1537,7 +1538,7 @@ fieldset .field {
     margin-top: 10px;
     margin-bottom: 10px;
     font-size: 1.3em;
-    color: rgb(0, 145, 215);
+    color: rgb(55, 145, 243);
 }
 
 .log-content {
@@ -1715,11 +1716,11 @@ fieldset .field {
 }
 
 .plant-log-paginate a {
-    color: rgb(0, 145, 215);
+    color: rgb(55, 145, 243);
 }
 
 .plant-log-paginate a:hover {
-    color: rgb(0, 145, 215);
+    color: rgb(55, 145, 243);
     text-decoration: underline;
 }
 
@@ -1774,11 +1775,11 @@ fieldset .field {
 }
 
 .location-log-paginate a {
-    color: rgb(0, 145, 215);
+    color: rgb(55, 145, 243);
 }
 
 .location-log-paginate a:hover {
-    color: rgb(0, 145, 215);
+    color: rgb(55, 145, 243);
     text-decoration: underline;
 }
 
@@ -1795,11 +1796,11 @@ fieldset .field {
 }
 
 .share-log-paginate a {
-    color: rgb(0, 145, 215);
+    color: rgb(55, 145, 243);
 }
 
 .share-log-paginate a:hover {
-    color: rgb(0, 145, 215);
+    color: rgb(55, 145, 243);
     text-decoration: underline;
 }
 
@@ -2002,7 +2003,7 @@ fieldset .field {
 }
 
 .is-task-recurring {
-    color: rgb(0, 145, 215);
+    color: rgb(55, 145, 243);
     margin-left: 5px;
 }
 
@@ -2866,6 +2867,19 @@ fieldset .field {
     margin-bottom: 20px;
 }
 
+.admin-media a {
+    color: rgb(55, 145, 243);
+}
+
+.admin-media a:hover {
+    color: rgb(55, 145, 243);
+    text-decoration: underline;
+}
+
+.admin-media hr {
+    background-color: rgb(100, 100, 100);
+}
+
 .admin-media label {
     color: rgb(150, 150, 150);
 }
@@ -3111,6 +3125,10 @@ fieldset .field {
     margin-bottom: 30px;
 }
 
+.admin-attributes hr {
+    background-color: rgb(100, 100, 100);
+}
+
 .admin-bulk-commands-list {
     position: relative;
 }
@@ -3245,6 +3263,10 @@ fieldset .field {
     font-size: 1.2em;
 }
 
+.admin-themes hr {
+    background-color: rgb(100, 100, 100);
+}
+
 .admin-themes input, .admin-themes select {
     color: rgb(150, 150, 150);
     background-color: rgb(50, 50, 50);
@@ -3301,6 +3323,10 @@ fieldset .field {
     color: rgb(150, 150, 150);
 }
 
+.admin-backup hr {
+    background-color: rgb(100, 100, 100);
+}
+
 .admin-backup-result {
     position: relative;
     padding: 10px;
@@ -3557,11 +3583,11 @@ fieldset .field {
 }
 
 .admin-info-extensions a {
-    color: rgb(0, 145, 215);
+    color: rgb(55, 145, 243);
 }
 
 .admin-info-extensions a:hover {
-    color: rgb(0, 145, 215);
+    color: rgb(55, 145, 243);
     text-decoration: underline;
 }
 

app/views/admin.php

@@ -242,6 +242,10 @@
             </div>
         </div>
 
+        <div class="admin-media-preview">
+            <img src="{{ asset('logo.png') }}" alt="media-preview"/>
+        </div>
+
         <div class="field">
             <div class="control">
                 <input type="submit" class="button is-success" value="{{ __('app.save') }}"/>
@@ -249,6 +253,8 @@
         </div>
     </form>
 
+    <div><hr/></div>
+
     <form method="POST" action="{{ url('/admin/media/banner') }}" enctype="multipart/form-data">
         @csrf
 
@@ -259,6 +265,10 @@
             </div>
         </div>
 
+        <div class="admin-media-preview">
+            <img src="{{ asset('img/banner.jpg') }}" alt="media-preview"/>
+        </div>
+
         <div class="field">
             <div class="control">
                 <input type="submit" class="button is-success" value="{{ __('app.save') }}"/>
@@ -266,6 +276,8 @@
         </div>
     </form>
 
+    <div><hr/></div>
+
     <form method="POST" action="{{ url('/admin/media/background') }}" enctype="multipart/form-data">
         @csrf
 
@@ -276,6 +288,10 @@
             </div>
         </div>
 
+        <div class="admin-media-preview">
+            <img src="{{ asset('img/background.jpg') }}" alt="media-preview"/>
+        </div>
+
         <div class="field">
             <div class="control">
                 <input type="submit" class="button is-success" value="{{ __('app.save') }}"/>
@@ -283,6 +299,8 @@
         </div>
     </form>
 
+    <div><hr/></div>
+
     <form method="POST" action="{{ url('/admin/media/overlay/alpha') }}">
         @csrf
         
@@ -300,6 +318,8 @@
         </div>
     </form>
 
+    <div><hr/></div>
+
     <form method="POST" action="{{ url('/admin/media/sound/message') }}" enctype="multipart/form-data">
         @csrf
 
@@ -310,6 +330,12 @@
             </div>
         </div>
 
+        @if (file_exists(public_path() . '/snd/new_message.wav'))
+        <div class="admin-media-preview">
+            <a href="javascript:void(0);" onclick="window.vue.playAudio('new_message.wav');">new_message.wav</a>
+        </div>
+        @endif
+
         <div class="field">
             <div class="control">
                 <input type="submit" class="button is-success" value="{{ __('app.save') }}"/>