From c4e6715797d138115b9af240161fa2a8e1cb4011 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Tue, 16 Sep 2014 10:15:57 +0200
Subject: [PATCH] style modals

---
 app/assets/images/sprite.svg                  |  1 +
 .../_application_controller.js.coffee         | 23 +++--
 .../app/views/agent_ticket_customer.jst.eco   | 13 ++-
 .../app/views/agent_ticket_merge.jst.eco      | 11 ++-
 .../app/views/agent_user_create.jst.eco       | 14 +--
 .../views/dashboard/ticket_settings.jst.eco   | 14 +--
 .../app/views/generic/admin/edit.jst.eco      | 15 +--
 .../app/views/generic/admin/new.jst.eco       | 14 +--
 .../app/views/generic/history.jst.eco         |  6 +-
 .../javascripts/app/views/link/add.jst.eco    | 13 ++-
 .../javascripts/app/views/maintenance.jst.eco |  2 +-
 .../javascripts/app/views/modal.jst.eco       | 18 ++--
 app/assets/stylesheets/zzz.css.erb            | 93 ++++++++++---------
 13 files changed, 132 insertions(+), 105 deletions(-)

diff --git a/app/assets/images/sprite.svg b/app/assets/images/sprite.svg
index e075ec9e7..36e1ac136 100644
--- a/app/assets/images/sprite.svg
+++ b/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>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/controllers/_application_controller.js.coffee b/app/assets/javascripts/app/controllers/_application_controller.js.coffee
index 88016e430..fc2b5c133 100644
--- a/app/assets/javascripts/app/controllers/_application_controller.js.coffee
+++ b/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',
-  tag: 'div',
+  className: 'modal fade'
 
   events:
-    'submit form':   'submit',
-    'click .submit': 'submit',
-    'click .cancel': 'modalHide',
-    'click .close':  'modalHide',
+    'submit form':   'submit'
+    'click .js-submit': 'submit'
+    'click .js-cancel': '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,
-      keyboard: @keyboard,
+      backdrop: @backdrop
+      keyboard: @keyboard
     )
 
   modalShow: (params) ->
     defaults = {
-      backdrop: true,
-      keyboard: true,
-      show: true,
+      backdrop: true
+      keyboard: true
+      show: true
     }
     data = $.extend({}, defaults, params)
     @el.modal(data)
diff --git a/app/assets/javascripts/app/views/agent_ticket_customer.jst.eco b/app/assets/javascripts/app/views/agent_ticket_customer.jst.eco
index 5a09dd410..ef00f83c3 100644
--- a/app/assets/javascripts/app/views/agent_ticket_customer.jst.eco
+++ b/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>
-      <h2 class="modal-title"><%- @T( 'Change Customer' ) %></h2>
+      <div class="modal-close js-close">
+        <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">
-      <button type="submit" class="btn btn-primary"><%- @T( 'Submit' ) %></button>
+    <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>
     </div>
   </div>
 </div>
diff --git a/app/assets/javascripts/app/views/agent_ticket_merge.jst.eco b/app/assets/javascripts/app/views/agent_ticket_merge.jst.eco
index 711c9fea0..e6b91a8bf 100644
--- a/app/assets/javascripts/app/views/agent_ticket_merge.jst.eco
+++ b/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>
-      <h2 class="modal-title"><%- @T( 'Merge' ) %></h2>
+      <div class="modal-close js-close">
+        <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">
-      <button type="submit" class="btn btn-primary"><%- @T( 'Submit' ) %></button>
+    <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>
     </div>
   </div>
 </div>
diff --git a/app/assets/javascripts/app/views/agent_user_create.jst.eco b/app/assets/javascripts/app/views/agent_user_create.jst.eco
index 7a1e6e588..d968f6bbd 100644
--- a/app/assets/javascripts/app/views/agent_user_create.jst.eco
+++ b/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>
-      <h2 class="modal-title"><%- @T( @head ) %></h2>
+      <div class="modal-close js-close">
+        <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">
-      <button class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
-      <button class="btn secondary cancel"><%- @T( 'Cancel' ) %></button>
+    <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>
     </div>
   </div>
 </div>
diff --git a/app/assets/javascripts/app/views/dashboard/ticket_settings.jst.eco b/app/assets/javascripts/app/views/dashboard/ticket_settings.jst.eco
index e22cb6cfa..b728ada1f 100644
--- a/app/assets/javascripts/app/views/dashboard/ticket_settings.jst.eco
+++ b/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>
-      <h2 class="modal-title"><%- @T( 'Edit' ) %>: <%- @T( @overview.name ) %></h2>
+      <div class="modal-close js-close">
+        <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">
-      <button class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
-      <button class="btn cancel"><%- @T( 'Cancel' ) %></button>
+    <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>
     </div>
   </div>
 </div>
diff --git a/app/assets/javascripts/app/views/generic/admin/edit.jst.eco b/app/assets/javascripts/app/views/generic/admin/edit.jst.eco
index 8baba10b3..7a877f055 100644
--- a/app/assets/javascripts/app/views/generic/admin/edit.jst.eco
+++ b/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>
-        <h2 class="modal-title"><%- @T( 'Edit' ) %>: <%- @T( @head ) %></h2>
+        <div class="modal-close js-close">
+          <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">
-          <button class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
-          <button class="btn cancel"><%- @T( 'Cancel' ) %></button>
-        </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>
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/app/views/generic/admin/new.jst.eco b/app/assets/javascripts/app/views/generic/admin/new.jst.eco
index c312c2e88..0c484f506 100644
--- a/app/assets/javascripts/app/views/generic/admin/new.jst.eco
+++ b/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>
-        <h2 class="modal-title"><%- @T( 'Neu' ) %>: <%- @T( @head ) %></h2>
+        <div class="modal-close js-close">
+          <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">
-        <button class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
-        <button class="btn cancel"><%- @T( 'Cancel' ) %></button>
+      <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>
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/app/views/generic/history.jst.eco b/app/assets/javascripts/app/views/generic/history.jst.eco
index 71a425de3..ab8ee2064 100644
--- a/app/assets/javascripts/app/views/generic/history.jst.eco
+++ b/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>
-      <h2 class="modal-title"><%- @T( 'History' ) %></h2>
+      <div class="modal-close js-close">
+        <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">
diff --git a/app/assets/javascripts/app/views/link/add.jst.eco b/app/assets/javascripts/app/views/link/add.jst.eco
index 63513ee39..ee94f57e4 100644
--- a/app/assets/javascripts/app/views/link/add.jst.eco
+++ b/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>
-      <h2 class="modal-title"><%- @T( 'Link' ) %></h2>
+      <div class="modal-close js-close">
+        <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">
-      <button type="submit" class="btn btn-primary"><%- @T( 'Submit' ) %></button>
+    <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>
     </div>
   </div>
 </div>
diff --git a/app/assets/javascripts/app/views/maintenance.jst.eco b/app/assets/javascripts/app/views/maintenance.jst.eco
index 8c211e7d6..3d48ebc7d 100644
--- a/app/assets/javascripts/app/views/maintenance.jst.eco
+++ b/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>
diff --git a/app/assets/javascripts/app/views/modal.jst.eco b/app/assets/javascripts/app/views/modal.jst.eco
index e78295a11..3badf8a3c 100644
--- a/app/assets/javascripts/app/views/modal.jst.eco
+++ b/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">
-<% if @button: %>
-      <button class="btn btn-primary submit"><%- @T( @button ) %></button>
-<% end %>
+    <div class="modal-footer horizontal">
 <% 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>
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index d0cc59df3..94dad9667 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/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;
+  }
+
 /*
 
   ----------------