From 7e068c0e751797ae33f526a476c40c518de5952c Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 7 Oct 2014 21:15:41 +0200 Subject: [PATCH 1/5] add svg to guardfile --- Guardfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Guardfile b/Guardfile index 180e51f47..3c5adfccd 100644 --- a/Guardfile +++ b/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 From d50c6a196c83f6b60e94b214f4fb60b695e0b45b Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 7 Oct 2014 21:36:56 +0200 Subject: [PATCH 2/5] switch sass asset image url links --- .../{zammad.css.scss.erb => zammad.css.scss} | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) rename app/assets/stylesheets/{zammad.css.scss.erb => zammad.css.scss} (99%) diff --git a/app/assets/stylesheets/zammad.css.scss.erb b/app/assets/stylesheets/zammad.css.scss similarity index 99% rename from app/assets/stylesheets/zammad.css.scss.erb rename to app/assets/stylesheets/zammad.css.scss index 598347349..b714f9c06 100644 --- a/app/assets/stylesheets/zammad.css.scss.erb +++ b/app/assets/stylesheets/zammad.css.scss @@ -812,22 +812,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 +1829,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 +1848,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 +2058,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; @@ -3634,7 +3634,7 @@ footer { } .userInfo .avatar:after { content: ""; - background: url(<%= asset_path "sprite.svg" %>); + background: image_url("sprite.svg"); background-position: -226px 0; right: 0; top: 0; From f9837d62c0e338eae34a704193ce293498b68af5 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 7 Oct 2014 23:38:28 +0200 Subject: [PATCH 3/5] ie 10 fixes and moved layout.css to zammad.css because of sass @export --- .../app/controllers/ticket_zoom.js.coffee | 2 +- app/assets/stylesheets/application.css | 5 +- app/assets/stylesheets/layout.css | 219 --------------- app/assets/stylesheets/zammad.css.scss | 261 +++++++++++++++++- 4 files changed, 250 insertions(+), 237 deletions(-) delete mode 100755 app/assets/stylesheets/layout.css diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee index badeaac07..bcb5adeb8 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee @@ -734,7 +734,7 @@ class Edit extends App.Controller @render() - if @defaults.body + if @defaults.body or Function('/*@cc_on return document.documentMode===10@*/')() @open_textarea(null, true) stopPropagation: (e) -> diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 374fcf227..5f6258c59 100644 --- a/app/assets/stylesheets/application.css +++ b/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 - * - * layout.css after zzz.css because .fix's position absolute should overwrite others + *= require ./zammad.css.scss * *= require_tree ./custom/ * diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css deleted file mode 100755 index e32940cdf..000000000 --- a/app/assets/stylesheets/layout.css +++ /dev/null @@ -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; -} diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss index b714f9c06..30d685f15 100644 --- a/app/assets/stylesheets/zammad.css.scss +++ b/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; - flex-grow: 1; + @extend .grow; @extend .u-clickable; } @@ -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; - flex-grow: 0; + @extend .grow; } .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; - flex-grow: 1; + @extend .grow; } .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 { @@ -3862,7 +3859,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 +3905,8 @@ footer { opacity: 1; } + + /* ---------------- @@ -3921,4 +3919,241 @@ footer { .sidebar.optional { display: none; } -} \ No newline at end of file +} + + + +/* + + ---------------- + 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; +} From 814b6c3cce2ce5bcd270381e13ffe53dce011c23 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 7 Oct 2014 23:43:21 +0200 Subject: [PATCH 4/5] prevent ticket reply closing in IE10 --- .../javascripts/app/controllers/ticket_zoom.js.coffee | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee index bcb5adeb8..0556b85be 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee @@ -734,9 +734,12 @@ class Edit extends App.Controller @render() - if @defaults.body or Function('/*@cc_on return document.documentMode===10@*/')() + if @defaults.body or @isIE10() @open_textarea(null, true) + isIE10: -> + Function('/*@cc_on return document.documentMode===10@*/')() + stopPropagation: (e) -> e.stopPropagation() @@ -1028,7 +1031,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: From 23a892cfcaab2618c710f85d6d1b41d899adf348 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Wed, 8 Oct 2014 00:01:04 +0200 Subject: [PATCH 5/5] fix that user glare was visible in expanded search --- app/assets/images/sprite.svg | 4 ++-- app/assets/stylesheets/zammad.css.scss | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/app/assets/images/sprite.svg b/app/assets/images/sprite.svg index 5c5e1cbf4..c5ead504e 100644 --- a/app/assets/images/sprite.svg +++ b/app/assets/images/sprite.svg @@ -1,5 +1,5 @@ - + sprite Created with Sketch (http://www.bohemiancoding.com/sketch) @@ -145,7 +145,7 @@ - + diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss index 30d685f15..d182fba4d 100644 --- a/app/assets/stylesheets/zammad.css.scss +++ b/app/assets/stylesheets/zammad.css.scss @@ -3629,10 +3629,11 @@ footer { float: right; position: relative; } + .userInfo .avatar:after { content: ""; background: image_url("sprite.svg"); - background-position: -226px 0; + background-position: -236px 0; right: 0; top: 0; width: 97px;