style modals

app/assets/images/sprite.svg

@@ -197,5 +197,6 @@
             <path d="M6.5,1.6 C8.1,0.8 9.9,0.6 11.8,1 L12.1,4.38538095e-15 C7.2,-1.2 2.9,1.4 1.4,5.7 C0.6,8 0.6,10.3 1.6,12.4 L2.1,13.2 L0,13.8 L4.5,17 L4.9,12.1 L4.9,12 L4.9,11.5 L3,12.9 L2.7,12.1 C1.8,10.2 1.7,8.1 2.4,6.1 C3.1,4.1 4.6,2.5 6.5,1.6 Z M17.4,4 L19.5,3.5 L15,0.3 L14.6,5.8 L16.6,4.3 L17.1,5.2 C18.1,7.1 18.3,9.3 17.6,11.3 C16.9,13.3 15.6,15 13.7,15.9 C12.1,16.7 9.8,16.7 8.8,16.6 L8.5,17.6 C12.4,18.4 17.2,16 18.7,11.7 C19.5,9.4 19.2,7 18.1,4.8 L17.4,4 Z" id="change" fill-opacity="0.7" sketch:type="MSShapeGroup"></path>
         </g>
         <path d="M76.4767712,343.142686 L81.2904338,338.295361 C81.679595,337.903479 82.3127561,337.901273 82.7046388,338.290434 C83.0965214,338.679595 83.0987275,339.312756 82.7095663,339.704639 L77.8909934,344.556908 L82.7039017,349.369816 C83.094426,349.760341 83.094426,350.393506 82.7039017,350.78403 C82.3133774,351.174554 81.6802124,351.174554 81.2896881,350.78403 L76.4817074,345.976049 L71.7095663,350.781562 C71.3204051,351.173444 70.6872439,351.175651 70.2953613,350.786489 C69.9034787,350.397328 69.9012726,349.764167 70.2904338,349.372284 L75.0674852,344.561827 L70.2127651,339.707107 C69.8222408,339.316583 69.8222408,338.683418 70.2127651,338.292893 C70.6032893,337.902369 71.2364543,337.902369 71.6269786,338.292893 L76.4767712,343.142686 Z" id="white-close" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
+        <path d="M89.4767712,343.142686 L94.2904338,338.295361 C94.679595,337.903479 95.3127561,337.901273 95.7046388,338.290434 C96.0965214,338.679595 96.0987275,339.312756 95.7095663,339.704639 L90.8909934,344.556908 L95.7039017,349.369816 C96.094426,349.760341 96.094426,350.393506 95.7039017,350.78403 C95.3133774,351.174554 94.6802124,351.174554 94.2896881,350.78403 L89.4817074,345.976049 L84.7095663,350.781562 C84.3204051,351.173444 83.6872439,351.175651 83.2953613,350.786489 C82.9034787,350.397328 82.9012726,349.764167 83.2904338,349.372284 L88.0674852,344.561827 L83.2127651,339.707107 C82.8222408,339.316583 82.8222408,338.683418 83.2127651,338.292893 C83.6032893,337.902369 84.2364543,337.902369 84.6269786,338.292893 L89.4767712,343.142686 Z" id="dark-close" fill="#000000" sketch:type="MSShapeGroup"></path>
     </g>
 </svg>

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

@@ -438,14 +438,13 @@ class App.ControllerContent extends App.Controller
     @navShow()
 
 class App.ControllerModal extends App.Controller
-  className: 'modal fade',
+  className: 'modal fade'
-  tag: 'div',
 
   events:
-    'submit form':   'submit',
+    'submit form':   'submit'
-    'click .submit': 'submit',
+    'click .js-submit': 'submit'
-    'click .cancel': 'modalHide',
+    'click .js-cancel': 'modalHide'
-    'click .close':  'modalHide',
+    'click .js-close':  'modalHide'
 
   constructor: (options) ->
 
@@ -466,21 +465,21 @@ class App.ControllerModal extends App.Controller
 
   render: ->
     @html App.view('modal')(
-      title:   @title,
+      title:   @title
       message: @message
       detail:  @detail
       close:   @close
     )
     @modalShow(
-      backdrop: @backdrop,
+      backdrop: @backdrop
-      keyboard: @keyboard,
+      keyboard: @keyboard
     )
 
   modalShow: (params) ->
     defaults = {
-      backdrop: true,
+      backdrop: true
-      keyboard: true,
+      keyboard: true
-      show: true,
+      show: true
     }
     data = $.extend({}, defaults, params)
     @el.modal(data)

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

@@ -1,13 +1,16 @@
-<form class="form-horizontal">
+<form>
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
-      <a href="#" class="close">&times;</a>
+      <div class="modal-close js-close">
-      <h2 class="modal-title"><%- @T( 'Change Customer' ) %></h2>
+        <div class="close icon"></div>
+      </div>
+      <h1 class="modal-title"><%- @T( 'Change Customer' ) %></h1>
     </div>
     <div class="modal-body" id="form-customer"></div>
-    <div class="modal-footer">
+    <div class="modal-footer horizontal">
-      <button type="submit" class="btn btn-primary"><%- @T( 'Submit' ) %></button>
+      <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>
     </div>
   </div>
 </div>

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

@@ -2,8 +2,10 @@
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
-      <a href="#" class="close">&times;</a>
+      <div class="modal-close js-close">
-      <h2 class="modal-title"><%- @T( 'Merge' ) %></h2>
+        <div class="close icon"></div>
+      </div>
+      <h1 class="modal-title"><%- @T( 'Merge' ) %></h1>
     </div>
     <div class="modal-body">
       <h4><%- @T( 'Merge to Ticket#' ) %></h4>
@@ -15,8 +17,9 @@
       <h4><%- @T( 'Recent Views Tickets' ) %></h4>
       <div id="ticket-merge-recent-tickets"></div>
     </div>
-    <div class="modal-footer">
+    <div class="modal-footer horizontal">
-      <button type="submit" class="btn btn-primary"><%- @T( 'Submit' ) %></button>
+      <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>
     </div>
   </div>
 </div>

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

@@ -1,14 +1,16 @@
-<form class="form-horizontal">
+<form>
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
-      <a href="#" class="close">&times;</a>
+      <div class="modal-close js-close">
-      <h2 class="modal-title"><%- @T( @head ) %></h2>
+        <div class="close icon"></div>
+      </div>
+      <h1 class="modal-title"><%- @T( @head ) %></h1>
     </div>
     <div class="modal-body" id="form-user"></div>
-    <div class="modal-footer">
+    <div class="modal-footer horizontal">
-      <button class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
+      <a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
-      <button class="btn secondary cancel"><%- @T( 'Cancel' ) %></button>
+      <button type="submit" class="btn btn-create js-submit align-right"><%- @T( 'Create' ) %></button>
     </div>
   </div>
 </div>

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

@@ -1,16 +1,18 @@
-<form class="form-horizontal">
+<form>
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
-      <a href="#" class="close">&times;</a>
+      <div class="modal-close js-close">
-      <h2 class="modal-title"><%- @T( 'Edit' ) %>: <%- @T( @overview.name ) %></h2>
+        <div class="close icon"></div>
+      </div>
+      <h1 class="modal-title"><%- @T( 'Edit' ) %>: <%- @T( @overview.name ) %></h1>
     </div>
     <div class="modal-body">
       <div id="form-setting"></div>
     </div>
-    <div class="modal-footer">
+    <div class="modal-footer horizontal">
-      <button class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
+      <a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
-      <button class="btn cancel"><%- @T( 'Cancel' ) %></button>
+      <button type="submit" class="btn btn-create js-submit align-right"><%- @T('Submit') %></button>
     </div>
   </div>
 </div>

app/assets/javascripts/app/views/generic/admin/edit.jst.eco

@@ -1,15 +1,16 @@
-<form class="form-horizontal">
+<form>
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <a href="#" class="close" title="<%- @Ti( 'close' ) %>">&times;</a>
+        <div class="modal-close js-close">
-        <h2 class="modal-title"><%- @T( 'Edit' ) %>: <%- @T( @head ) %></h2>
+          <div class="close icon"></div>
+        </div>
+        <h1 class="modal-title"><%- @T( 'Edit' ) %>: <%- @T( @head ) %></h1>
       </div>
       <div class="modal-body" id="object_edit"></div>
-        <div class="modal-footer">
+      <div class="modal-footer horizontal">
-          <button class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
+        <a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
-          <button class="btn cancel"><%- @T( 'Cancel' ) %></button>
+        <button type="submit" class="btn btn-create js-submit align-right"><%- @T( 'Submit' ) %></button>
-        </div>
       </div>
     </div>
   </div>

app/assets/javascripts/app/views/generic/admin/new.jst.eco

@@ -1,14 +1,16 @@
-<form class="form-horizontal">
+<form>
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <a href="#" class="close" title="<%- @Ti( 'close' ) %>">&times;</a>
+        <div class="modal-close js-close">
-        <h2 class="modal-title"><%- @T( 'Neu' ) %>: <%- @T( @head ) %></h2>
+          <div class="close icon"></div>
+        </div>
+        <h1 class="modal-title"><%- @T( 'Neu' ) %>: <%- @T( @head ) %></h1>
       </div>
       <div class="modal-body" id="object_new"></div>
-      <div class="modal-footer">
+      <div class="modal-footer horizontal">
-        <button class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
+        <a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
-        <button class="btn cancel"><%- @T( 'Cancel' ) %></button>
+        <button type="submit" class="btn btn-create js-submit align-right"><%- @T('Submit') %></button>
       </div>
     </div>
   </div>

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

@@ -1,8 +1,10 @@
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
-      <a href="#" class="close">&times;</a>
+      <div class="modal-close js-close">
-      <h2 class="modal-title"><%- @T( 'History' ) %></h2>
+        <div class="close icon"></div>
+      </div>
+      <h1 class="modal-title"><%- @T( 'History' ) %></h1>
       <a href="#" data-type="sortorder" class="<%= @orderClass %>"><%- @T( 'Change order' ) %></a>
     </div>
     <div class="modal-body">

app/assets/javascripts/app/views/link/add.jst.eco

@@ -1,9 +1,11 @@
-<form class="form-horizontal">
+<form>
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
-      <a href="#" class="close">&times;</a>
+      <div class="modal-close js-close">
-      <h2 class="modal-title"><%- @T( 'Link' ) %></h2>
+        <div class="close icon"></div>
+      </div>
+      <h1 class="modal-title"><%- @T( 'Link' ) %></h1>
     </div>
     <div class="modal-body">
   <%- @T( 'Link' ) %>
@@ -27,8 +29,9 @@
   </ul>
 -->
     </div>
-    <div class="modal-footer">
+    <div class="modal-footer horizontal">
-      <button type="submit" class="btn btn-primary"><%- @T( 'Submit' ) %></button>
+      <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>
     </div>
   </div>
 </div>

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

@@ -1,7 +1,7 @@
 <div class="page-header">
   <h1><%- @T('Maintenance Message') %><small></small></h1>
 </div>
-<form class="form-horizontal form-large" id="maintenanceForm">
+<form class="form-large" id="maintenanceForm">
   <fieldset>
   <div class="form-group">
     <label for="title"><%- @T('Title') %></label>

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

@@ -2,24 +2,26 @@
   <div class="modal-content">
     <div class="modal-header">
 <% if @close: %>
-      <a href="#" class="close">&times;</a>
+      <div class="modal-close js-close">
+        <div class="close icon"></div>
+      </div>
 <% end %>
-      <h2 class="modal-title"><%- @T( @title ) %></h2>
+      <h1 class="modal-title"><%- @T( @title ) %></h1>
     </div>
     <div class="modal-body">
-      <form class="form-horizontal">
+      <form>
         <p><%= @message %></p>
     <% if @detail: %>
         <pre><%= @detail %></p>
     <% end %>
       </form>
     </div>
-    <div class="modal-footer">
+    <div class="modal-footer horizontal">
-<% if @button: %>
-      <button class="btn btn-primary submit"><%- @T( @button ) %></button>
-<% end %>
 <% if @cancel: %>
-      <button class="btn cancel"><%- @T( 'Cancel' ) %></button>
+      <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>
 <% end %>
     </div>
   </div>

app/assets/stylesheets/zzz.css.erb

@@ -459,21 +459,6 @@ label {
     z-index: 1;
   }
 
-.form-horizontal label {
-  text-align: right;
-  float: left;
-  margin-left: 0;
-  margin-right: 0;
-  width: 130px;
-  margin-top: 7px;
-}
-.form-horizontal .form-group .checkbox label {
-  text-align: left;
-  width: 100%;
-  margin-top: 0;
-  margin-bottom: 4px;
-}
-
 .form-stacked .checkbox label {
   color: inherit;
   font-size: 13px;
@@ -531,17 +516,6 @@ label {
 .help-block {
   color: #bcbcbc;
 }
-.form-horizontal .help-inline, .form-horizontal .help-block {
-  font-size: 12px;
-  margin-top: 4px;
-}
-
-.form-horizontal .control-label {
-  width: 130px;
-}
-.form-horizontal .controls {
-  margin-left: 150px;
-}
 
 /* replace music icon with attachment */
 .icon-attachment {
@@ -1227,6 +1201,12 @@ ol.tabs li {
     background-position: -70px -338px;
   }
 
+  .close.icon {
+    width: 13px;
+    height: 13px;
+    background-position: -83px -338px;
+  }
+
 
 /*
  * removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
@@ -1248,23 +1228,6 @@ form a.standalone {
     margin-left: auto;
   }
 
-.modal-header {
-  padding: 10px 15px;
-}
-
-.modal .form-group .controls {
-  width: 65%;
-}
-
-.modal .form-group {
-  margin-bottom: 2px;
-}
-
-.modal-footer {
-  margin-top: 0;
-  padding: 14px 20px 20px;
-}
-
 footer {
   clear: both;
   padding-top: 10px;
@@ -3099,6 +3062,50 @@ footer {
   top: 45px;
 }
 
+.modal-dialog {
+  width: 660px;
+  margin-top: 35px;
+  margin-bottom: 35px;
+}
+
+.modal-content {
+  border-radius: 0;
+  border: 1px solid hsl(0,0%,90%);
+  box-shadow: none;
+}
+
+  .modal-header {
+    padding: 30px 23px 23px;
+    border: none;
+  }
+
+  .modal-header h1 {
+    text-align: center;
+  }
+
+  .modal-close {
+    padding: 23px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    cursor: pointer;
+    -webkit-user-select: none;
+            user-select: none;
+  }
+
+  .modal-close .close.icon {
+    opacity: 0.18;
+  }
+
+  .modal-body {
+    padding: 0 23px;
+  }
+
+  .modal-footer {
+    padding: 23px 23px 20px;
+    border: none;
+  }
+
 /*
 
   ----------------