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

Guardfile

@@ -7,5 +7,5 @@ guard 'livereload' do
   watch(%r{public/.+\.(css|js|html)})
   watch(%r{config/locales/.+\.yml})
   # Rails Assets Pipeline
-  watch(%r{(app|vendor)(/assets/\w+/(.+\.(css|js|html|png|jpg))).*}) { |m| "/assets/#{m[3]}" }
+  watch(%r{(app|vendor)(/assets/\w+/(.+\.(css|js|html|png|jpg|svg))).*}) { |m| "/assets/#{m[3]}" }
 end

app/assets/images/sprite.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="323px" height="352px" viewBox="0 0 323 352" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="333px" height="352px" viewBox="0 0 333 352" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
     <title>sprite</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
@@ -145,7 +145,7 @@
         <path d="M2.70710678,304.292893 L2.71421284,305.699929 L7.61421284,300.699929 L6.18578716,299.300071 L1.28578716,304.300071 L0.592892858,305.007106 L1.29289322,305.707107 L6.19289322,310.607107 L7.60710678,309.192893 L2.70710678,304.292893 L2.70710678,304.292893 Z" id="left-arrow" fill="#000000" sketch:type="MSShapeGroup"></path>
         <path d="M13.1928932,305.607107 L13.1857872,304.200071 L8.28578716,309.200071 L9.71421284,310.599929 L14.6142128,305.599929 L15.3071071,304.892894 L14.6071068,304.192893 L9.70710678,299.292893 L8.29289322,300.707107 L13.1928932,305.607107 L13.1928932,305.607107 Z" id="right-arrow" fill="#000000" sketch:type="MSShapeGroup"></path>
         <path d="M112,343 C112,338.581722 108.418278,335 104,335 C99.5817218,335 96,338.581722 96,343 C96,347.418278 99.5817218,351 104,351 C108.418278,351 112,347.418278 112,343 Z M111,343 C111,339.134007 107.865993,336 104,336 C100.134007,336 97,339.134007 97,343 C97,346.865993 100.134007,350 104,350 C107.865993,350 111,346.865993 111,343 Z M104.860632,344.013214 C104.860632,342.717029 106.871954,342.839943 106.871954,341.029753 C106.871954,340.035266 106.067426,339.152519 104.368976,339.152519 C103.262748,339.152519 102.435872,339.610653 101.787779,340.359312 L102.927528,341.242059 C103.329793,340.783924 103.776753,340.560444 104.223714,340.560444 C104.71537,340.560444 105.005894,340.783924 105.005894,341.186189 C105.005894,342.102458 103.2404,342.035414 103.2404,343.957344 L103.2404,344.236694 L104.860632,344.236694 L104.860632,344.013214 Z M104.067277,347.119508 C104.637152,347.119508 105.084112,346.661374 105.084112,346.102673 C105.084112,345.543973 104.637152,345.085838 104.067277,345.085838 C103.497403,345.085838 103.050442,345.543973 103.050442,346.102673 C103.050442,346.661374 103.497403,347.119508 104.067277,347.119508 Z" id="help" fill="#000000" sketch:type="MSShapeGroup"></path>
-        <g id="avatar-haze" sketch:type="MSLayerGroup" transform="translate(226.000000, 0.000000)">
+        <g id="avatar-haze" sketch:type="MSLayerGroup" transform="translate(236.000000, 0.000000)">
             <mask id="mask-2" sketch:name="Rectangle 1" fill="white">
                 <use xlink:href="#path-1"></use>
             </mask>

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

@@ -734,9 +734,12 @@ class Edit extends App.Controller
 
     @render()
 
-    if @defaults.body
+    if @defaults.body or @isIE10()
       @open_textarea(null, true)
 
+  isIE10: ->
+    Function('/*@cc_on return document.documentMode===10@*/')()
+
   stopPropagation: (e) ->
     e.stopPropagation()
 
@@ -1027,7 +1030,7 @@ class Edit extends App.Controller
 
   close_textarea: =>
     @remove_textarea_catcher()
-    if !@textarea.text().trim() && !@attachments.length
+    if !@textarea.text().trim() && !@attachments.length && not @isIE10()
 
       @textarea.velocity
         properties:

app/assets/stylesheets/application.css

@@ -10,11 +10,8 @@
  *= require ./bootstrap-tokenfield.css
  *= require ./noty_theme_twitter.css
  *= require ./sew.css
- *= require ./zammad.css.scss
  *= require ./fonts/fira-sans.css
- *= require ./layout.css
+ *= require ./zammad.css.scss
- *
- * layout.css after zzz.css because .fix's position absolute should overwrite others
  *
  *= require_tree ./custom/
  *

app/assets/stylesheets/layout.css

@@ -1,219 +0,0 @@
-.horizontal, .vertical, .centered {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -moz-flex;
-  display: -webkit-flex;
-  display: flex;
-}
-.horizontal.hide, .vertical.hide, .centered.hide {
-  display: none;
-}
-
-.horizontal {
-  -webkit-box-orient: horizontal;
-  -ms-flex-direction: row;
-  -moz-flex-direction: row;
-  -webkit-flex-direction: row;
-  flex-direction: row;
-}
-
-.horizontal.reverse {
-  -webkit-box-direction: reverse;
-  -ms-flex-direction: row-reverse;
-  -moz-flex-direction: row-reverse;
-  -webkit-flex-direction: row-reverse;
-  flex-direction: row-reverse;
-}
-
-.vertical {
-  -webkit-box-orient: vertical;
-  -ms-flex-direction: column;
-  -moz-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-}
-
-.vertical.reverse {
-  -webkit-box-direction: reverse;
-  -ms-flex-direction: column-reverse;
-  -moz-flex-direction: column-reverse;
-  -webkit-flex-direction: column-reverse;
-  flex-direction: column-reverse;
-}
-
-.vertical.stretch > *,
-.horizontal.stretch > * {
-  -webkit-box-flex: 1;
-  -ms-flex: 1;
-  -moz-flex: 1;
-  -webkit-flex: 1;
-  flex: 1;
-}
-
-.fullHeight {
-  min-height: 100%;
-}
-
-.relative {
-  position: relative;
-}
-
-.fit {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
-body.fit {
-  margin: 0;
-}
-
-.scrollable {
-  overflow: auto;
-}
-
-.flex {
-  -webkit-box-flex: 1;
-  -ms-flex: 1;
-  -moz-flex: 1;
-  -webkit-flex: 1;
-  flex: 1;
-}
-
-.flex-auto {
-  -webkit-box-flex: 1;
-  -ms-flex: 1 1 auto;
-  -moz-flex: 1 1 auto;
-  -webkit-flex: 1 1 auto;
-  flex: 1 1 auto;
-}
-
-.flex-none {
-  -webkit-box-flex: none;
-  -ms-flex: none;
-  -moz-flex: none;
-  -webkit-flex: none;
-  flex: none;
-}
-
-.flex-1 {
-  -webkit-box-flex: 1;
-  -ms-flex: 1;
-  -moz-flex: 1;
-  -webkit-flex: 1;
-  flex: 1;
-}
-
-.flex-2 {
-  -webkit-box-flex: 2;
-  -ms-flex: 2;
-  -moz-flex: 2;
-  -webkit-flex: 2;
-  flex: 2;
-}
-
-.flex-3 {
-  -webkit-box-flex: 3;
-  -ms-flex: 3;
-  -moz-flex: 3;
-  -webkit-flex: 3;
-  flex: 3;
-}
-
-.justify-start {
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -moz-justify-content: flex-start;
-  -webkit-justify-content: flex-start;
-  justify-content: flex-start;
-}
-
-.justified {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -moz-justify-content: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.justify-end {
-  -webkit-box-pack: end;
-  -ms-flex-pack: end;
-  -moz-justify-content: flex-end;
-  -webkit-justify-content: flex-end;
-  justify-content: flex-end;
-}
-
-.justify-between {
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  -moz-justify-content: space-between;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-}
-
-
-.start {
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  -moz-align-items: flex-start;
-  -webkit-align-items: flex-start;
-  align-items: flex-start;
-}
-
-.center {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -moz-align-items: center;
-  -webkit-align-items: center;
-  align-items: center;
-}
-
-.centered {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -moz-align-items: center;
-  -webkit-align-items: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -moz-justify-content: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.end {
-  -webkit-box-align: end;
-  -ms-flex-align: end;
-  -moz-align-items: flex-end;
-  -webkit-align-items: flex-end;
-  align-items: flex-end;
-}
-
-.two-columns,
-.three-columns,
-.wrap {
-  -ms-box-lines: multiple;
-  -moz-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.two-columns > .column {
-  width: 50%;
-}
-
-.three-columns > .column {
-  width: 33.33%;
-}
-
-.align-right {
-  margin-left: auto;
-}
-
-.align-center {
-  margin-left: auto;
-  margin-right: auto;
-}

app/assets/stylesheets/zammad.css.scss

@@ -159,7 +159,6 @@ time[data-tooltip]:after,
 span[data-tooltip]:after {
   content: "";
   position: absolute;
-  pointer-events: none;
   -webkit-transform: scale(0);
           transform: scale(0);
   opacity: 0;
@@ -199,7 +198,6 @@ time[data-tooltip]:hover:after,
 time[data-tooltip]:hover:before,
 span[data-tooltip]:hover:after,
 span[data-tooltip]:hover:before {
-  pointer-events: auto;
   transform: scale(1);
   opacity: 1;
   -webkit-transition: -webkit-transform 300ms 1.5s cubic-bezier(0.34,1.6,0.71,1), opacity 300ms 1.5s;
@@ -511,6 +509,10 @@ textarea,
     margin-top: -3px;
   }
 
+  select::-ms-expand {
+    display: none;
+  }
+
   .has-error .form-control,
   .has-error .form-control:focus,
   .has-error .form-control.focus {
@@ -711,8 +713,7 @@ ol.tabs li {
     padding: 10px 20px;
     text-align: center;
     border-right: 1px solid rgba(0,8,14,.08);
-    -webkit-flex-grow: 1;
+    @extend .grow;
-            flex-grow: 1;
     @extend .u-clickable;
   }
 
@@ -812,22 +813,22 @@ ol.tabs li {
 }
 
   .facebook .provider_icon {
-    background-image: url(<%= asset_path "facebook.svg" %>);
+    background-image: image_url("facebook.svg");
   }
 
   .google .provider_icon {
-    background-image: url(<%= asset_path "google.svg" %>);
+    background-image: image_url("google.svg");
   }
 
   .twitter .provider_icon {
-    background-image: url(<%= asset_path "twitter.svg" %>);
+    background-image: image_url("twitter.svg");
   }
 
 .icon {
   display: inline-block;
   width: 20px;
   height: 20px;
-  background-image: url(<%= asset_path "sprite.svg" %>);
+  background-image: image_url("sprite.svg");
   background-repeat: no-repeat;
   background-position: 20px 20px; /* make icon empty */
 }
@@ -1829,7 +1830,7 @@ footer {
     height: 30px;
     color: #ECECEC;
     line-height: 20px;
-    background: #31373b url(<%= asset_path "sprite.svg" %>) no-repeat 10px -26px;
+    background: #31373b image-url("sprite.svg") no-repeat 10px -26px;
     outline: none;
     border: none;
     border-radius: 15px;
@@ -1848,7 +1849,7 @@ footer {
   .search .logo {
     width: 41px;
     height: 36px;
-    background: url(<%= asset_path "logo.svg" %>);
+    background: image_url("logo.svg");
     transition: 240ms;
     position: relative;
     @extend .u-clickable;
@@ -2058,7 +2059,7 @@ footer {
   }
 
   .unique.avatar {
-    background-image: url(<%= asset_path "avatar-bg.png" %>);
+    background-image: image_url("avatar-bg.png");
     background-size: auto;
     color: white;
     line-height: 42px;
@@ -2411,15 +2412,13 @@ footer {
 
   .form-inline .form-group {
     overflow: hidden;
-    -webkit-flex-grow: 1;
-            flex-grow: 1;
     position: relative;
     height: 60px;
+    @extend .grow;
   }
 
     .ticket-attributes.form-inline .form-group:last-child {
-      -webkit-flex-grow: 0;
+      @extend .grow;
-              flex-grow: 0;
     }
 
     .form-group.is-changed {
@@ -2499,8 +2498,7 @@ footer {
   .bulkAction-secondStep .form-inline .textarea.form-group {
     padding: 0 10px;
     height: auto;
-    -webkit-flex-grow: 1;
+    @extend .grow;
-            flex-grow: 1;
   }
 
     .bulkAction-secondStep .form-inline .textarea.form-group  .input-group-addon {
@@ -2808,7 +2806,6 @@ footer {
 
   .pop-selectable .icon {
     opacity: 0.3;
-    pointer-events: none;
   }
 
   .pop-selectable:hover .icon {
@@ -3632,10 +3629,11 @@ footer {
   float: right;
   position: relative;
 }
+
 .userInfo .avatar:after {
   content: "";
-  background: url(<%= asset_path "sprite.svg" %>);
+  background: image_url("sprite.svg");
-  background-position: -226px 0;
+  background-position: -236px 0;
   right: 0;
   top: 0;
   width: 97px;
@@ -3862,7 +3860,6 @@ footer {
   width: 52px;
   border-radius: 0 5px 5px 0;
   background: linear-gradient(to right, rgba(255,255,255,0), white 33%);
-  pointer-events: none;
 }
 
 .input-feedback .icon {
@@ -3909,6 +3906,8 @@ footer {
   opacity: 1;
 }
 
+
+
 /*
 
   ----------------
@@ -3922,3 +3921,240 @@ footer {
     display: none;
   }
 }
+
+
+
+/*
+
+  ----------------
+   layout classes
+  ----------------
+
+*/
+
+.horizontal, .vertical, .centered {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: flex;
+}
+.horizontal.hide, .vertical.hide, .centered.hide {
+  display: none;
+}
+
+.horizontal {
+  -webkit-box-orient: horizontal;
+  -ms-flex-direction: row;
+  -moz-flex-direction: row;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+}
+
+.horizontal.reverse {
+  -webkit-box-direction: reverse;
+  -ms-flex-direction: row-reverse;
+  -moz-flex-direction: row-reverse;
+  -webkit-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.vertical {
+  -webkit-box-orient: vertical;
+  -ms-flex-direction: column;
+  -moz-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+
+.vertical.reverse {
+  -webkit-box-direction: reverse;
+  -ms-flex-direction: column-reverse;
+  -moz-flex-direction: column-reverse;
+  -webkit-flex-direction: column-reverse;
+  flex-direction: column-reverse;
+}
+
+.vertical.stretch > *,
+.horizontal.stretch > * {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  -moz-flex: 1;
+  -webkit-flex: 1;
+  flex: 1;
+}
+
+.fullHeight {
+  min-height: 100%;
+}
+
+.relative {
+  position: relative;
+}
+
+.fit {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+body.fit {
+  margin: 0;
+}
+
+.scrollable {
+  overflow: auto;
+}
+
+.flex {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  -moz-flex: 1;
+  -webkit-flex: 1;
+  flex: 1;
+}
+
+.flex-auto {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 auto;
+  -moz-flex: 1 1 auto;
+  -webkit-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.flex-none {
+  -webkit-box-flex: none;
+  -ms-flex: none;
+  -moz-flex: none;
+  -webkit-flex: none;
+  flex: none;
+}
+
+.flex-1 {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  -moz-flex: 1;
+  -webkit-flex: 1;
+  flex: 1;
+}
+
+.flex-2 {
+  -webkit-box-flex: 2;
+  -ms-flex: 2;
+  -moz-flex: 2;
+  -webkit-flex: 2;
+  flex: 2;
+}
+
+.flex-3 {
+  -webkit-box-flex: 3;
+  -ms-flex: 3;
+  -moz-flex: 3;
+  -webkit-flex: 3;
+  flex: 3;
+}
+
+.justify-start {
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -moz-justify-content: flex-start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+}
+
+.justified {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -moz-justify-content: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.justify-end {
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -moz-justify-content: flex-end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.justify-between {
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  -moz-justify-content: space-between;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+
+.start {
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  -moz-align-items: flex-start;
+  -webkit-align-items: flex-start;
+  align-items: flex-start;
+}
+
+.center {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -moz-align-items: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+.centered {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -moz-align-items: center;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -moz-justify-content: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.end {
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  -moz-align-items: flex-end;
+  -webkit-align-items: flex-end;
+  align-items: flex-end;
+}
+
+.grow {
+  -ms-flex: 1 0 auto;
+  -webkit-flex-grow: 1;
+          flex-grow: 1;
+}
+
+.two-columns,
+.three-columns,
+.wrap {
+  -ms-box-lines: multiple;
+  -webkit-flex-wrap: wrap;
+     -moz-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+}
+
+.two-columns > .column {
+  width: 50%;
+}
+
+.three-columns > .column {
+  width: 33.33%;
+}
+
+.align-right {
+  margin-left: auto;
+}
+
+.align-center {
+  margin-left: auto;
+  margin-right: auto;
+}