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

app/assets/javascripts/app/controllers/_application_controller_form.js.coffee

@@ -172,6 +172,9 @@ class App.ControllerForm extends App.Controller
     # create item id
     attribute.id = classname + '_' + attribute.name
 
+    # set label class name
+    attribute.label_class = @model.labelClass
+
     # set autofocus
     if @autofocus && attribute_count is 1
       attribute.autofocus = 'autofocus'

app/assets/javascripts/app/controllers/navigation.js.coffee

@@ -59,7 +59,7 @@ class App.Navigation extends App.Controller
       href = $(d).attr('href')
       active_tab[href] = true
     )
-    @el.find('.navbar-items-menu').html App.view('navigation/menu')(
+    @el.find('.main-navigation').html App.view('navigation/menu')(
       items:      items
       open_tab:   open_tab
       active_tab: active_tab

app/assets/javascripts/app/controllers/ticket_overview.js.coffee

@@ -270,6 +270,8 @@ class Table extends App.ControllerContent
 
         # hide
         @el.find('.bulk-action').addClass('hide')
+
+        @resetBulkForm()
       else
 
         # show
@@ -282,6 +284,21 @@ class Table extends App.ControllerContent
         $(e.target).parents().find('[name="bulk_all"]').attr('checked', false)
     )
 
+    # bind bulk form buttons
+    @$('.js-confirm').click(@bulkFormConfirm)
+    @$('.js-cancel').click(@resetBulkForm)
+
+  bulkFormConfirm: =>
+    @$('.js-action-step').addClass('hide')
+    @$('.js-confirm-step').removeClass('hide')
+
+    # need a delay because of the click event
+    setTimeout ( => @$('.textarea.form-group textarea').focus() ), 0
+
+  resetBulkForm: =>
+    @$('.js-action-step').removeClass('hide')
+    @$('.js-confirm-step').addClass('hide')
+
   page: (e) =>
     e.preventDefault()
     id = $(e.target).data('id')
@@ -310,8 +327,7 @@ class Table extends App.ControllerContent
       { name: 'group_id',     display: 'Group',    tag: 'select',   multiple: false, null: true, relation: 'Group', filter: @bulk, nulloption: true, class: '', item_class: ''  },
       { name: 'owner_id',     display: 'Owner',    tag: 'select',   multiple: false, null: true, relation: 'User', filter: @bulk, nulloption: true, class: '', item_class: '' },
       { name: 'type_id',      display: 'Type',     tag: 'select',   multiple: false, null: true, relation: 'TicketArticleType', filter: articleTypeFilter, default: '9', translate: true, class: 'medium' },
-      { name: 'internal',     display: 'Visibility', tag: 'select', null: true, options: { true: 'internal', false: 'public' }, class: 'medium', item_class: '', default: false },
+      { name: 'internal',     display: 'Visibility', tag: 'select', null: true, options: { true: 'internal', false: 'public' }, class: 'medium', item_class: '', default: false }
-      { name: 'body',         display: 'Text',     tag: 'textarea', rows: 8, null: true, upload: false },
     ]
 
     # render init page
@@ -321,6 +337,16 @@ class Table extends App.ControllerContent
       model:
         configure_attributes: @configure_attributes_ticket
         className:            'create'
+        labelClass:           'input-group-addon'
+      form_data:   @bulk
+      noFieldset: true
+    )
+    new App.ControllerForm(
+      el: html.find('#form-ticket-bulk-text')
+      model:
+        configure_attributes: [{ name: 'body', display: 'Comment', tag: 'textarea', rows: 1, null: true, upload: false, item_class: 'flex' }]
+        className:            'create'
+        labelClass:           'input-group-addon'
       form_data:   @bulk
       noFieldset: true
     )

app/assets/javascripts/app/views/agent_ticket_create.jst.eco

@@ -36,7 +36,7 @@
 
         <div class="form-actions horizontal">
           <a class="subtle-link standalone cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
-          <button type="submit" class="btn btn-create submit align-right"><%- @T( 'Create' ) %></button>
+          <button type="submit" class="btn btn--create submit align-right"><%- @T( 'Create' ) %></button>
         </div>
       </form>
     </div>

app/assets/javascripts/app/views/agent_ticket_merge.jst.eco

@@ -19,7 +19,7 @@
     </div>
     <div class="modal-footer horizontal">
       <a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
-      <button type="submit" class="btn btn-create js-submit align-right"><%- @T( 'Submit' ) %></button>
+      <button type="submit" class="btn btn--create js-submit align-right"><%- @T( 'Submit' ) %></button>
     </div>
   </div>
 </div>

app/assets/javascripts/app/views/agent_ticket_view/bulk.jst.eco

@@ -1,9 +1,18 @@
-<form class="pull-left update-box bulk-action-form">
+<form class="update-box bulk-action-form" role="form">
-  <div id="form-ticket-bulk"></div>
+  <div class="horizontal center js-action-step">
-  <input type="submit" class="btn primary submit" value="update">
+    <div id="form-ticket-bulk" class="form-inline form-inline--enclosed flex horizontal"></div>
+    <div class="btn btn--primary js-confirm"><%- @T('Confirm') %></div>
+  </div>
+  <div class="horizontal center hide js-confirm-step">
+    <div id="form-ticket-bulk-text" class="form-inline flex horizontal"></div>
+    <div class="bulkAction-labelOffset">
+      <a class="subtle-link standalone js-cancel"><%- @T( 'Cancel' ) %></a>
+      <input type="submit" class="btn btn--primary submit" value="<%- @T('Update') %>">
+    </div>
+  </div>
 </form>
 <!--
-<form class="form-inline update-box bulk-action-form" role="form">
+<form class="form-inline update-box bulk-action-form">
   <div id="form-ticket-bulk2" class="horizontal">
     <div class="form-group">
       <label for="create_state_id" class="input-group-addon">Status</label>

app/assets/javascripts/app/views/agent_user_create.jst.eco

@@ -10,7 +10,7 @@
     <div class="modal-body" id="form-user"></div>
     <div class="modal-footer horizontal">
       <a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
-      <button type="submit" class="btn btn-create js-submit align-right"><%- @T( 'Create' ) %></button>
+      <button type="submit" class="btn btn--create js-submit align-right"><%- @T( 'Create' ) %></button>
     </div>
   </div>
 </div>

app/assets/javascripts/app/views/customer_not_ticket_exists.jst.eco

@@ -7,7 +7,7 @@
         <p><%- @T('The way to communicate with us is this thing called "Ticket".') %></p>
         <p><%- @T('Please click the button below to create your first one.') %></p>
 
-        <p><a class="btn btn-primary" href="#customer_ticket_new"><%- @T('Create your first Ticket') %></a></p>
+        <p><a class="btn btn--primary" href="#customer_ticket_new"><%- @T('Create your first Ticket') %></a></p>
       </div>
     </div>
   </div>

app/assets/javascripts/app/views/customer_ticket_create.jst.eco

@@ -18,7 +18,7 @@
 
         <div class="form-actions horizontal">
           <a class="subtle-link standalone cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
-          <button type="submit" class="btn btn-create submit align-right"><%- @T( 'Create' ) %></button>
+          <button type="submit" class="btn btn--create submit align-right"><%- @T( 'Create' ) %></button>
         </div>
       </form>
 

app/assets/javascripts/app/views/generic/attribute.jst.eco

@@ -1,5 +1,5 @@
-<div class="form-group <%= @attribute.item_class %>">
+<div class="<%= @attribute.tag %> form-group<%= " #{ @attribute.item_class }" if @attribute.item_class %>">
-  <label for="<%= @attribute.id %>"><%- @T( @attribute.display ) %> <span><% if !@attribute.null: %>*<% end %></span></label>
+  <label for="<%= @attribute.id %>"<% if @attribute.label_class: %> class="<%= @attribute.label_class %>"<% end %>><%- @T( @attribute.display ) %> <span><% if !@attribute.null: %>*<% end %></span></label>
   <div class="controls">
     <%- @item %><% if @attribute.note: %><span class="glyphicon glyphicon-question-sign help-message" title="<%- @Ti( @attribute.note ) + ' ' %>"></span><% end %>
 	<% if @attribute.remove: %><span><a href="#" class="glyphicon glyphicon-minus"></a></span><% end %>

app/assets/javascripts/app/views/generic/select.jst.eco

@@ -1,4 +1,4 @@
-<select id="<%= @attribute.id %>" class="form-control <%= @attribute.class %>" name="<%= @attribute.name %>" <%= @attribute.multiple %> <%= @attribute.required %> <%= @attribute.autofocus %>>
+<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: %>
   <option value="<%= row.value %>" <%= row.selected %> <%= row.disabled %>><%= row.name %></option>

app/assets/javascripts/app/views/getting_started.jst.eco

@@ -8,14 +8,14 @@
     <% if @master_user: %>
     <div class="master_user hero-left">
       <form class="form-stacked" id="form-master">
-        <button type="submit" class="btn btn-primary submit pull-right"><%- @T( 'Next Step' ) %></button>
+        <button type="submit" class="btn btn--primary submit pull-right"><%- @T( 'Next Step' ) %></button>
       </form>
     </div>
     <% end %>
     <div class="agent_user hero-left hide">
       <form class="form-stacked" id="form-agent">
         <div class="form-controls">
-          <button type="submit" class="btn btn-primary submit pull-right"><%- @T( 'Send Invitation' ) %></button>
+          <button type="submit" class="btn btn--primary submit pull-right"><%- @T( 'Send Invitation' ) %></button>
         </div>
       </form>
     </div>

app/assets/javascripts/app/views/login.jst.eco

@@ -15,7 +15,7 @@
       </div>
 
       <div class="form-controls">
-        <button class="btn btn-primary" type="submit"><%- @T( 'Sign in' ) %></button>
+        <button class="btn btn--primary" type="submit"><%- @T( 'Sign in' ) %></button>
 
         <% if @C('user_lost_password'): %>
           <a href="#reset_password" class="subtle-link standalone pull-right"><%- @T( 'Forgot password?' ) %></a>

app/assets/javascripts/app/views/maintenance.jst.eco

@@ -22,5 +22,5 @@
     </div>
   </div>
   </fieldset>
-  <button type="submit" class="btn btn-primary submit"><%- @T('Send to clients') %></button>
+  <button type="submit" class="btn btn--primary submit"><%- @T('Send to clients') %></button>
 </form>

app/assets/javascripts/app/views/modal.jst.eco

@@ -22,7 +22,7 @@
         <a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
   <% end %>
   <% if @button: %>
-        <button type="submit" class="btn btn-create js-submit align-right"><%- @T( @button ) %></button>
+        <button type="submit" class="btn btn--create js-submit align-right"><%- @T( @button ) %></button>
   <% end %>
       </div>
     </div>

app/assets/javascripts/app/views/navigation.jst.eco

@@ -9,7 +9,7 @@
   <ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul>
 </form>
 
-<ul class="nav navbar-nav navbar-items-menu"></ul>
+<ul class="main-navigation"></ul>
 
 <div class="tasks tasks-navigation flex"></div>
 

app/assets/javascripts/app/views/package.jst.eco

@@ -13,7 +13,7 @@
     <p>
       <form action="<%= App.Config.get('api_path') %>/packages" method="post" enctype="multipart/form-data">
         <input type="file" name="file_upload"/>
-        <button class="btn btn-primary" type="submit"><%- @T('Install Package') %></button>
+        <button class="btn btn--primary" type="submit"><%- @T('Install Package') %></button>
       </form>
     </p>
   </div>

app/assets/javascripts/app/views/password/reset.jst.eco

@@ -10,7 +10,7 @@
         <div class="form-password-item"></div>
         <div class="form-controls">
           <a class="subtle-link standalone pull-left cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
-          <button class="btn btn-primary submit pull-right"><%- @T( 'Submit' ) %></button>
+          <button class="btn btn--primary submit pull-right"><%- @T( 'Submit' ) %></button>
         </div>
       </form>
     <% end %>

app/assets/javascripts/app/views/password/reset_change.jst.eco

@@ -2,7 +2,7 @@
   <div class="hero-unit">
     <h2><%- @T( 'Choose your new password.' ) %><small></small></h2>
     <form id="form-password-change">
-      <button class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
+      <button class="btn btn--primary submit"><%- @T( 'Submit' ) %></button>
     </form>
   </div>
 </div>

app/assets/javascripts/app/views/signup.jst.eco

@@ -4,7 +4,7 @@
       <form class="signup">
         <div class="form-controls">
           <a class="subtle-link standalone pull-left" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
-          <button class="btn btn-primary submit pull-right"><%- @T( 'Create my account' ) %></button>
+          <button class="btn btn--primary submit pull-right"><%- @T( 'Create my account' ) %></button>
         </div>
       </form>
   </div>

app/assets/javascripts/app/views/task_widget.jst.eco

@@ -3,7 +3,7 @@
   <% if !_.isEmpty( @taskBarActions ): %>
   <div class="taskbar-new">
     <div class="btn-group">
-      <a class="btn btn-small btn-primary dropdown-toggle" data-toggle="dropdown" href="#new">
+      <a class="btn btn-small btn--primary dropdown-toggle" data-toggle="dropdown" href="#new">
         <%- @T('New') %>
         <span class="caret"></span>
       </a>

app/assets/stylesheets/layout.css

@@ -1,9 +1,9 @@
 .horizontal, .vertical, .centered {
-  display: -webkit-box !important;
+  display: -webkit-box;
-  display: -ms-flexbox !important;
+  display: -ms-flexbox;
-  display: -moz-flex !important;
+  display: -moz-flex;
-  display: -webkit-flex !important;
+  display: -webkit-flex;
-  display: flex !important;
+  display: flex;
 }
 
 .horizontal {

app/assets/stylesheets/zzz.css.erb

@@ -578,6 +578,7 @@ label {
   .subtle-link {
     color: rgba(0,0,0,.32);
     text-decoration: underline;
+    cursor: pointer;
   }
 
   .subtle-link:hover {
@@ -1302,6 +1303,14 @@ footer {
     0 -3px rgba(0,0,0,.01);
 }
 
+  .bulk-action .btn {
+    margin: 0 10px;
+  }
+
+  .bulkAction-labelOffset {
+    margin-top: 14px;
+  }
+
 .show_toogle {
   font-size: 10px;
   line-height: 12px;
@@ -1390,14 +1399,15 @@ footer {
   padding: 9px 24px 8px;
 }
 
-.btn-primary {
+.btn--primary,
+.btn--primary:hover {
   color: white;
   background: #419ed7;
   border-color: #419ed7;
 }
 
-.btn-create,
+.btn--create,
-.btn-create:hover {
+.btn--create:hover {
   color: white;
   background: hsl(145,51%,45%);
 }
@@ -1412,26 +1422,34 @@ footer {
     display: none !important;
   }
 
-  .navigation .navbar-nav,
+.main-navigation {
-  .navigation .navbar-nav > li {
+  padding: 0;
-    float: none;
+  margin: 0;
+  list-style: none;
 }
 
-  .navigation .nav > li.active > a,
+  .main-navigation a {
-  .navigation .nav > li > a:hover,
-  .navigation .nav > li > a:focus {
-    background: none;
-    color: #F0FAFF;
-  }
-
-  .navbar-nav > li > a {
     padding: 0 15px;
     height: 48px;
     color: rgba(240, 250, 255, .25);
     border-bottom: 1px solid rgba(240, 250, 255, .05);
+    text-decoration: none;
   }
 
-  .navigation .nav > li.active > a {
+  .main-navigation > li.active > a,
+  .main-navigation > li > a:hover,
+  .main-navigation > li > a:focus {
+    background: none;
+    color: #F0FAFF;
+  }
+
+  .main-navigation > li.active > a .icon,
+  .main-navigation > li > a:hover .icon,
+  .main-navigation > li > a:focus .icon {
+    opacity: 1;
+  }
+
+  .main-navigation li.active > a {
     background: #389ed9;
   }
 
@@ -1441,12 +1459,6 @@ footer {
     vertical-align: bottom;
   }
 
-  .navigation .nav > li.active > a .icon,
-  .navigation .nav > li > a:hover .icon,
-  .navigation .nav > li > a:focus .icon {
-    opacity: 1;
-  }
-
 .tasks {
   background: #2c2d36;
   overflow: auto;
@@ -2194,7 +2206,7 @@ footer {
   }
 
 .form-inline .input-group-addon,
-.form-inline .form-control {
+.form-inline .form-control:not(textarea) {
   background: white;
   border: none;
   line-height: 1;
@@ -2252,7 +2264,8 @@ footer {
     margin: 10px;
   }
 
-  .form-inline .form-group:not(:last-child) {
+  .form-inline .form-group:not(:last-child),
+  .form-inline.form-inline--enclosed .form-group {
     border-right: 1px solid #f0f0f0;
   }
 
@@ -2266,7 +2279,7 @@ footer {
     position: relative;
   }
 
-  .form-inline .form-control {
+  .form-inline .form-control:not(textarea) {
     width: 100%;
     height: 100%;
     left: 0;
@@ -2283,6 +2296,24 @@ footer {
             appearance: none;
   }
 
+  .form-inline .textarea.form-group {
+    padding: 0 18px;
+    height: auto;
+    flex-grow: 1;
+  }
+
+    .form-inline .textarea.form-group  .input-group-addon {
+      margin-left: 0;
+      margin-right: 0;
+      margin-bottom: 5px;
+    }
+
+    .form-inline textarea.form-control {
+      display: block;
+      width: 100%;
+      resize: vertical;
+    }
+
 .ticketZoom {
   background: #f8f9fa;
 }