basic bulk action

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

@@ -49,6 +49,9 @@ class App.ControllerForm extends App.Controller
             item = @formGenItem( attribute, @model.className, fieldset )
             item.appendTo(fieldset)
 
+    if @no_fieldset
+      fieldset = fieldset.children()
+
     if @fullForm
       if !@formClass
         @formClass = ''

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

@@ -299,22 +299,23 @@ class Table extends App.ControllerContent
 
   bulk_form: =>
     @configure_attributes_ticket = [
-      { name: 'state_id',     display: 'State',    tag: 'select',   multiple: false, null: true, relation: 'TicketState', filter: @bulk, translate: true, nulloption: true, default: '', class: 'span2', item_class: 'pull-left' },
+      { name: 'state_id',     display: 'State',    tag: 'select',   multiple: false, null: true, relation: 'TicketState', filter: @bulk, translate: true, nulloption: true, default: '', class: '', item_class: '' },
-      { name: 'priority_id',  display: 'Priority', tag: 'select',   multiple: false, null: true, relation: 'TicketPriority', filter: @bulk, translate: true, nulloption: true, default: '', class: 'span2', item_class: 'pull-left' },
+      { name: 'priority_id',  display: 'Priority', tag: 'select',   multiple: false, null: true, relation: 'TicketPriority', filter: @bulk, translate: true, nulloption: true, default: '', class: '', item_class: '' },
-      { name: 'group_id',     display: 'Group',    tag: 'select',   multiple: false, null: true, relation: 'Group', filter: @bulk, nulloption: true, class: 'span2', item_class: 'pull-left'  },
+      { 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: 'span2', item_class: 'pull-left' },
+      { name: 'owner_id',     display: 'Owner',    tag: 'select',   multiple: false, null: true, relation: 'User', filter: @bulk, nulloption: true, class: '', item_class: '' },
     ]
 
     # render init page
     html = $( App.view('agent_ticket_view/bulk')() )
-    new App.ControllerForm(
+    # new App.ControllerForm(
-      el: html.find('#form-ticket-bulk'),
+    #   el: html.find('#form-ticket-bulk'),
-      model: {
+    #   model: {
-        configure_attributes: @configure_attributes_ticket,
+    #     configure_attributes: @configure_attributes_ticket,
-        className:            'create',
+    #     className:            'create'
-      },
+    #   },
-      form_data: @bulk,
+    #   form_data: @bulk,
-    )
+    #   no_fieldset: true
+    # )
 #    html.delegate('.bulk-action-form', 'submit', (e) =>
     html.bind('submit', (e) =>
       e.preventDefault()

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

@@ -1,4 +1,66 @@
-<form class="form-stacked pull-left update-box bulk-action-form">
+<form class="form-inline update-box bulk-action-form" role="form">
-  <div id="form-ticket-bulk"></div>
+  <div id="form-ticket-bulk" class="horizontal">
+    <div class="form-group">
+      <div class="input-group">
+        <label for="create_state_id" class="input-group-addon">Status</label>
+        <!-- label and select have to be siblings -->
+        <select id="create_state_id" class="form-control" name="state_id">
+          <option value="" selected="">-</option>
+          <option value="4">geschlossen</option>
+          <option value="5">zusammengefügt</optin>
+          <option value="1">neu</option>
+          <option value="2">offen</option>
+          <option value="3">warten</option>
+          <option value="6">zurück gezogen</option>
+        </select>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="input-group">
+        <label for="create_priority_id" class="input-group-addon">Priorität</label>
+        <select id="create_priority_id" class="form-control" name="priority_id">
+          <option value="" selected="">-</option>
+          <option value="1">1 niedrig</option>
+          <option value="2">2 normal</option>
+          <option value="3">3 hoch</option>
+        </select>        
+        <!-- 
+          there can't be any other elements in .input-group
+          otherwise we loose the rounded borders on the dropdown
+          (bootstrap css)
+        -->
+        <!-- 
+          <span class="help-inline"></span>
+          <span class="help-block"></span> 
+        -->
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="input-group">
+        <label for="create_group_id" class="input-group-addon">Gruppe</label>
+        <select id="create_group_id" class="form-control" name="group_id">
+          <option value="">-</option>
+          <option value="4">FillGroup:450863</option>
+          <option value="3">FillGroup::918672</option>
+          <option value="2">Twitter</option>
+          <option value="1">Users</option>
+        </select>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="input-group">
+        <label for="create_owner_id" class="input-group-addon">Besitzer</label>
+        <select id="create_owner_id" class="form-control" name="owner_id">
+          <option value="">-</option>
+          <option value="5">customer 838 customer 1838</option>
+          <option value="3">Felix Niklas</option>
+          <option value="2">Nicole Braun</option>
+          <option value="4">Robert Zammad</option>
+        </select>
+      </div>
+    </div>
+    <div class="form-group">
       <input type="submit" class="btn primary submit" value="update">
+    </div>
+  </div>
 </form>

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

@@ -1,4 +1,6 @@
-<div class="horizontal">
+<div class="fit vertical">
+  <div class="overview flex scrollable">
+    <div class="horizontal">
       <div class="page-header-title">
         <h1><%- @T( @overview.name ) %> <% if @edit: %><small><a href="#" data-type="settings" class="glyphicon glyphicon-edit"></a></small><% end %></h1>
       </div>
@@ -11,25 +13,10 @@
         <% end %>
         </ul>
       </div>
-</div>
-<!--
-  <div class="pagination pull-left">
-    <ul>
-      <% if @start_page != 1: %>
-        <li><a href="#" data-id="<%= @start_page - 1 %>" data-type="page">«</a></li>
-      <% end %>
-      <% for item in [1..@pages_total]: %>
-        <li>
-          <a href="#" data-id="<%= item %>" data-type="page"><%= item %></a>
-        </li>
-      <% end %>
-      <% if @start_page != @pages_total: %>
-        <li><a href="#" data-id="<%= @start_page + 1 %>" data-type="page">»</a></li>
-      <% end %>
-    </ul>
     </div>
--->
 
-<div class="table-overview"></div>
+    <div class="table-overview"></div>
+  </div>
 
-<div class="bulk-action hide well"></div>
+  <div class="bulk-action"></div>
+</div>

app/assets/javascripts/app/views/dashboard/ticket.jst.eco

@@ -1,7 +1,7 @@
 <div>
   <div class="horizontal">
     <div class="page-header-title">
-      <h2 class="can-move"><%- @T( @overview.name ) %> <small><a href="#" data-type="settings" class="glyphicon glyphicon-edit"></a></small></h2>
+      <h1 class="can-move"><%- @T( @overview.name ) %> <small><a href="#" data-type="settings" class="glyphicon glyphicon-edit"></a></small></h1>
     </div>
     <div class="page-header-meta horizontal">
       <div class="pagination-counter">

app/assets/stylesheets/layout.css

@@ -67,6 +67,10 @@ body.fit {
   margin: 0;
 }
 
+.scrollable {
+  overflow: auto;
+}
+
 .flex {
   -webkit-box-flex: 1;
   -ms-flex: 1;
@@ -186,7 +190,8 @@ body.fit {
 }
 
 .two-columns,
-.three-columns {
+.three-columns,
+.wrap {
   -ms-box-lines: multiple;
   -moz-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;

app/assets/stylesheets/zzz.css.erb

@@ -435,7 +435,7 @@ h1 {
 
 h2,
 h2.popover-title {
-  font-size: 22px;
+  font-size: 19px;
   line-height: 25px;
   color: rgba(0,8,14,.73);
 }
@@ -576,12 +576,16 @@ label {
   margin-bottom: 15px;
 }
 
-.page-header-title h2 {
+.page-header-title h1 {
-  margin-top: 10px;
+  margin-top: 13px;
 }
 
 .page-header-meta {
-  margin-top: 5px;
+  margin-top: 10px;
+  margin-left: auto;
+}
+
+.page-header-meta.horizontal .pagination {
   margin-left: auto;
 }
 
@@ -1338,9 +1342,17 @@ footer {
   border-color: #eee;
 }
 
+.overview {
+  padding: 10px 20px;
+}
+
 .bulk-action {
-  position: absolute;
+  background: white;
-  width: 100%;
+  z-index: 1;
+  box-shadow: 
+    0 -1px rgba(0,0,0,.05),
+    0 -2px rgba(0,0,0,.03),
+    0 -3px rgba(0,0,0,.01);
 }
 
 .sidebar .action {
@@ -1537,7 +1549,9 @@ footer {
   padding: 9px 14px;
 }
 
+.btn.primary,
 .btn-primary {
+  color: white;
   background: #419ed7;
   border-color: #419ed7;
 }
@@ -2041,6 +2055,7 @@ footer {
   padding: 10px 20px;
   background: #f8f9fa;
   overflow: auto;
+  position: relative;
 }
 
 .popover {
@@ -2261,6 +2276,44 @@ footer {
     background: white;
   }
 
+.form-inline .input-group-addon,
+.form-inline .form-control {
+  background: white;
+  border: none;
+  line-height: 1;
+}
+
+  .form-inline .form-group {
+    padding: 10px;
+    overflow: hidden;
+  }
+
+  .form-inline .form-group:not(:last-child) {
+    border-right: 1px solid #f0f0f0;
+  }
+
+  .form-inline .input-group-addon {
+    padding: 0 10px 2px;
+    font-size: 13px;
+    text-align: left;
+    letter-spacing: 0.05em;
+    color: #ccc;
+    display: block;
+  }
+
+  .form-inline .form-control {
+    margin: 0 10px;
+    display: block;
+    padding: 0 0 2px;
+    float: none;
+    height: auto;
+    border-radius: 0;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+        -ms-appearance: none;
+            appearance: none;
+  }
+
 /* 
 
   ----------------