profile/notification: add sound picker and mute checkbox

app/assets/javascripts/app/controllers/_profile/notification.coffee

@@ -1,6 +1,47 @@
 class Index extends App.Controller
   events:
     'submit form': 'update'
+    'change .js-notificationSound': 'previewSound'
+
+  sounds: [
+    {
+      name: 'Bell'
+      file: 'Bell.mp3'
+    },
+    {
+      name: 'Kalimba'
+      file: 'Kalimba.mp3'
+    },
+    {
+      name: 'Marimba'
+      file: 'Marimba.mp3'
+    },
+    {
+      name: 'Peep'
+      file: 'Peep.mp3'
+    },
+    {
+      name: 'Plop'
+      file: 'Plop.mp3'
+    },
+    {
+      name: 'Ring'
+      file: 'Ring.mp3'
+    },
+    {
+      name: 'Space'
+      file: 'Space.mp3'
+    },
+    {
+      name: 'Wood'
+      file: 'Wood.mp3'
+    },
+    {
+      name: 'Xylo'
+      file: 'Xylo.mp3'
+      selected: true
+    }
+  ]
 
   constructor: ->
     super
@@ -43,7 +84,10 @@ class Index extends App.Controller
             config['group_ids'] = []
           config['group_ids'].push group_id.toString()
 
-    @html App.view('profile/notification')( groups: groups, config: config )
+    @html App.view('profile/notification')
+      groups: groups
+      config: config
+      sounds: @sounds
 
   update: (e) =>
 
@@ -135,4 +179,8 @@ class Index extends App.Controller
       msg:  App.i18n.translateContent(data.message)
     )
 
+  previewSound: (event) ->
+    sound = new Audio("assets/sounds/#{ @sounds[event.currentTarget.value].file }")
+    sound.play()
+
 App.Config.set( 'Notifications', { prio: 2600, name: 'Notifications', parent: '#profile', target: '#profile/notifications', role: ['Agent'], controller: Index }, 'NavBarProfile' )

app/assets/javascripts/app/views/profile/notification.jst.eco

@@ -75,5 +75,30 @@
   </div>
   <% end %>
 
+  <h2><%- @T('Sounds') %></h2>
+  <div class="form-group">
+    <div class="formGroup-label">
+      <label for="notification-sound"><%- @T('Notification Sound') %></label>
+    </div>
+    <div class="controls controls--select">
+      <select class="form-control js-notificationSound" id="notification-sound">
+        <% for sound, i in @sounds: %>
+        <option value="<%= i %>"<%= ' selected' if sound.selected %>><%= sound.name %></option>
+        <% end %>
+      </select>
+      <%- @Icon('arrow-down') %>
+    </div>
+  </div>
+  <div class="form-group">
+    <label class="inline-label">
+      <span class="checkbox-replacement checkbox-replacement--inline">
+        <input type="checkbox" name="enable_sound" value="true" checked>
+        <%- @Icon('checkbox', 'icon-unchecked') %>
+        <%- @Icon('checkbox-checked', 'icon-checked') %>
+      </span>
+      <%- @T('Play user interface sound effects') %>
+    </label>
+  </div>
+
   <button type="submit" class="btn btn--primary"><%- @T( 'Submit' ) %></button>
 </form>

app/assets/stylesheets/zammad.scss

@@ -1139,6 +1139,7 @@ label,
   margin-bottom: 4px;
   text-align: left;
   padding: 0;
+  user-select: none;
 }
 
 /* circumventing the label:not(.inline-label) selector because it's too strong */
@@ -1156,6 +1157,9 @@ label,
   display: inline;
   white-space: nowrap; /* for labels in tables that might get crushed view: calendar_subscriptions */
 }
+.inline-label {
+  color: hsl(206,7%,28%);
+}
 .label-text {
   margin-left: 3px;
   user-select: none;
@@ -1954,7 +1958,7 @@ kbd {
 }
 
 .page-content {
-  label,
+  .formGroup-label label,
   .label {
     color: hsl(197,18%,70%);
   }
@@ -7280,7 +7284,7 @@ output {
   .day {
     width: 27px;
     height: 26px;
-    border-radius: 100%;
+    border-radius: 14px;
     padding: 1px 0 0 !important;
   }