Merge branch 'develop' of github.com:martini/zammad into develop

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/generic/select.jst.eco

@@ -1,4 +1,4 @@
-<div class="controls-select">
+<div class="controls controls--select">
   <select id="<%= @attribute.id %>" class="form-control<%= " #{ @attribute.class }" if @attribute.class %>" name="<%= @attribute.name %>" <%= @attribute.multiple %> <%= @attribute.required %> <%= @attribute.autofocus %>>
 <% if @attribute.options: %>
 <% for row in @attribute.options: %>

app/assets/javascripts/app/views/layout_ref/chat_to_ticket.jst.eco

@@ -99,7 +99,7 @@
     <div class="formGroup-label">
         <label for="Ticket_890825_group_id">Group <span>*</span></label>
     </div>
-    <div class="controls"><div class="controls-select">
+    <div class="controls"><div class="controls controls--select">
         <select id="Ticket_890825_group_id" class="form-control" name="group_id" required="">
             <option value="">-</option>
             <option value="1">Users</option>
@@ -113,7 +113,7 @@
 <div class="formGroup-label">
 <label for="Ticket_890825_owner_id">Owner <span></span></label>
 </div>
-<div class="controls"><div class="controls-select">
+<div class="controls"><div class="controls controls--select">
 <select id="Ticket_890825_owner_id" class="form-control" name="owner_id">
     <option value="" selected="">-</option>
 </select>
@@ -126,7 +126,7 @@
 <div class="formGroup-label">
 <label for="Ticket_890825_state_id">State <span>*</span></label>
 </div>
-<div class="controls"><div class="controls-select">
+<div class="controls"><div class="controls controls--select">
 <select id="Ticket_890825_state_id" class="form-control" name="state_id" required="">
 <option value="">-</option>
 <option value="4">closed</option>
@@ -157,7 +157,7 @@
 <div class="formGroup-label">
 <label for="Ticket_890825_priority_id">Priority <span>*</span></label>
 </div>
-<div class="controls"><div class="controls-select">
+<div class="controls"><div class="controls controls--select">
 <select id="Ticket_890825_priority_id" class="form-control" name="priority_id" required="">
 <option value="">-</option>
 <option value="1">1 low</option>

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

@@ -8,8 +8,12 @@
 
   <p><%- @T('See your tickets from within your favorite calendar by adding the following url to your calendar app.') %></p>
 
-  <h3><%- @T('URL') %></h3>
-  <input class="form-control js-select" readonly value="<%= @baseurl %>/ical/tickets">
+  <h3><label for="calendar-subscription-url"><%- @T('URL') %></label></h3>
+  <div class="form-group">
+    <div class="controls">
+      <input type="url" class="form-control js-select" readonly value="<%= @baseurl %>/ical/tickets" id="calendar-subscription-url">
+    </div>
+  </div>
 
   <h3><%- @T('Subscription Settings') %></h3>
   <table class="settings-list">

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

@@ -21,10 +21,13 @@
         <td><%= device.name %></td>
         <td><%= device.location %></td>
         <td><%- @humanTime(device.updated_at) %></td>
-        <td><a href="#" data-device-id="<%- device.id %>" data-type="delete" title="<%- @Ti('Delete') %>"<% if device.current: %>disabled<% end %>><%- @Icon('trash') %></a></td>
+        <td class="settings-list-controls">
+          <div>
+            <a class="settings-list-control" href="#" data-device-id="<%- device.id %>" data-type="delete" title="<%- @Ti('Delete') %>"<% if device.current: %>disabled<% end %>><%- @Icon('trash') %></a>
+          </div>
       </tr>
     <% end %>
-    <tbody>
+    </tbody>
   </table>
 
 </form>

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/javascripts/app/views/settings/item.jst.eco

@@ -2,7 +2,7 @@
   <h2><%- @T( @setting.title ) %></h2>
   <p class="help-text"><%- @RichText( @setting.description ) %></p>
   <div class="horizontal end">
-    <div class="form-item flex"></div>
+    <div class="form-item"></div>
     <button type="submit" class="btn btn--primary"><%- @T( 'Submit' ) %></button>
   </div>
 </form>

app/assets/stylesheets/zammad.scss

@@ -353,7 +353,6 @@ pre code.hljs {
 
   &.btn--table {
     padding: 4px 9px;
-    font-weight: 300;
     border: none;
     margin: 5px 6px 0;
     vertical-align: baseline; /* calendar_subscriptions.jst.eco */
@@ -1140,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 */
@@ -1157,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;
@@ -1208,10 +1211,6 @@ https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-h
 
 fieldset > .form-group {
   padding: 0 4px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
 }
 
 .form-group {
@@ -1403,13 +1402,25 @@ fieldset > .form-group {
   .form-control {
     min-width: initial;
   }
+
+  .controls {
+    display: block;
+  }
+
+  .controls--button {
+    display: flex;
+  }
 }
 
 .formGroup--standalone .form-control {
   margin-bottom: 0;
 }
 
-.controls-select {
+.controls {
+  display: table;
+}
+
+.controls--select {
   position: relative;
 }
 
@@ -1434,6 +1445,7 @@ textarea,
   display: block;
   padding: 7px 12px;
   width: 100%;
+  min-width: 200px;
   height: 41px;
   font-size: 14px;
   font-weight: normal;
@@ -1646,7 +1658,7 @@ input.has-error {
 }
 
 .controls--button {
-  display: flex;
+  display: inline-flex;
   
   input,
   .form-control {
@@ -1955,7 +1967,7 @@ kbd {
 }
 
 .page-content {
-  label,
+  .formGroup-label label,
   .label {
     color: hsl(197,18%,70%);
   }
@@ -3419,6 +3431,10 @@ footer {
     text-transform: initial;
     letter-spacing: 0;
   }
+
+  .controls {
+    width: 100%;
+  }
 }
 
 .sidebar-block {
@@ -4086,7 +4102,7 @@ footer {
     background: none;
   }
 
-  .form-inline .controls-select {
+  .form-inline .controls--select {
     position: static;
   }
 
@@ -6943,6 +6959,23 @@ output {
     }
   }
 
+
+  .settings-list-controls {
+    padding: 0;
+    
+    & > div {
+      display: flex;
+      min-height: 40px;
+    }
+
+    .settings-list-control {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 10px;
+    }
+  }
+
   .settings-list-control-cell {
     padding: 5px;
     
@@ -7264,7 +7297,7 @@ output {
   .day {
     width: 27px;
     height: 26px;
-    border-radius: 100%;
+    border-radius: 14px;
     padding: 1px 0 0 !important;
   }