From 351cf8078d2486284c3edb325df0fb0038aa627b Mon Sep 17 00:00:00 2001 From: Lisa Passing Date: Tue, 17 Feb 2015 17:43:37 +0100 Subject: [PATCH 01/14] remove unnessary(?) things from charmscout script --- Brocfile.js | 1 + app/initializers/charm.coffee | 3 +- app/styles/app/charm.sass | 71 +++++++++++++++++++++ vendor/charmscout.js | 115 +++------------------------------- 4 files changed, 84 insertions(+), 106 deletions(-) diff --git a/Brocfile.js b/Brocfile.js index 328cc541..16bcd676 100644 --- a/Brocfile.js +++ b/Brocfile.js @@ -32,6 +32,7 @@ app.import('bower_components/JavaScript-MD5/js/md5.js'); app.import('vendor/ansiparse.js'); app.import('vendor/log.js'); app.import('vendor/customerio.js'); +app.import('vendor/charmscout.js'); app.import('bower_components/moment/moment.js'); // Use `app.import` to add additional libraries to the generated // output files. diff --git a/app/initializers/charm.coffee b/app/initializers/charm.coffee index d3b2fd02..6e1c0b3d 100644 --- a/app/initializers/charm.coffee +++ b/app/initializers/charm.coffee @@ -6,7 +6,8 @@ initialize = (container, app) -> key: config.charmKey url: "https://charmscout.herokuapp.com/feedback" - $('head').append $('') + window.bootstrapCharm() + # $('head').append $('') Initializer = name: 'charm' diff --git a/app/styles/app/charm.sass b/app/styles/app/charm.sass index 3f8ccdde..ac33bbf5 100644 --- a/app/styles/app/charm.sass +++ b/app/styles/app/charm.sass @@ -1,3 +1,74 @@ +.feedback-button + display: inline-block + position: fixed + right: 0 + left: auto + // top: 35% + bottom: 0 + margin: 0 + padding: 1.5em 1em .5em + border-radius: 4px + // transform: rotate(90deg) translateY(-140%) + will-change: transform + transition: transform ease 200ms + background: $white + font-size: 13px + color: #a2afb3 + text-transform: uppercase + box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.15) + z-index: 999 + +.feedback-button:hover + // transform: rotate(90deg) translateY(-130%) + +.feedback-popup + position: fixed + top: 50% + left: 50% + width: 30em + transform: translate(-50%, -50%) + padding: 1em 1.3em + background-color: #ffffff + border-radius: 5px + z-index: 999 + box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.15) + h1 + margin: 0 0 .4em + padding-left: .4em + color: #347389 + font-size: 20px + textarea + box-sizing: border-box + display: block + width: 100% + height: 10em + margin-bottom: .8em + padding: .5em .6em + resize: vertical + background-color: #f4f3eb + font-size: 15px + color: #7d7e80 + border: none + font-family: $font-family-sans-serif + .submit + margin-right: 1em + padding: .3em .7em + background-color: #37a766 + color: $white + font-size: 15px + border: none + border-radius: 4px + font-family: $font-family-sans-serif + cursor: pointer + a + color: #7d7e80 + font-size: 15px + text-decoration: none + a:hover + text-decoration: underline + +#CHARM_FORM_TARGET + display: none .feedback-button display: none diff --git a/vendor/charmscout.js b/vendor/charmscout.js index 6c1907f9..dc8a56fe 100644 --- a/vendor/charmscout.js +++ b/vendor/charmscout.js @@ -1,81 +1,9 @@ // Copyright (c) 2010-2012 Slash7 LLC http://charmhq.com/ // Copyright (c) 2010-2012 Thomas Fuchs http://mir.aculo.us/ // License: https://github.com/cheerful/charmeur/blob/master/MIT-LICENSE -(function(){ + +window.bootstrapCharm = function(){ var tab, box, email, shown = false, sending = false, openmsg = null, callbacks = {}, - VENDORS = ['webkit','moz','o','ms'], - STYLE = - '.feedback-button {' + - ' display: inline-block;' + - ' position: fixed;' + - ' right: 0;' + - ' left: auto;' + - ' top: 35%;' + - ' margin: 0;' + - ' padding: 1.5em 1em .5em;' + - ' border-radius: 4px;' + - ' transform: rotate(90deg) translateY(-140%);' + - ' will-change: transform;' + - ' transition: transform ease 200ms;' + - ' background: #ffffff;' + - ' font-size: 13px;' + - ' color: #a2afb3;' + - ' text-transform: uppercase;' + - ' box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.15);' + - '}' + - '.feedback-button:hover {' + - ' transform: rotate(90deg) translateY(-130%);' + - '}' + - '.feedback-popup {' + - ' position: fixed;' + - ' top: 50%;' + - ' left: 50%;' + - ' width: 30em;' + - ' transform: translate(-50%, -50%);' + - ' padding: 1em 1.3em;' + - ' background-color: #ffffff;' + - ' border-radius: 5px;' + - ' z-index: 999;' - ' box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.15);' + - ' }' + - ' .feedback-popup h1 {' + - ' margin: 0 0 .4em;' + - ' padding-left: .4em;' + - ' color: #347389;' + - ' font-size: 20px;' + - ' }' + - ' .feedback-popup textarea {' + - ' box-sizing: border-box;' + - ' display: block;' + - ' width: 100%;' + - ' height: 10em;' + - ' margin-bottom: .8em;' + - ' padding: .5em .6em;' + - ' resize: vertical;' + - ' background-color: #f4f3eb;' + - ' font-size: 15px;' + - ' color: #7d7e80;' + - ' border: none;' + - ' font-family: "Source Sans Pro", Helvetica, sans-serif;' + - ' }' + - ' .feedback-popup .submit {' + - ' margin-right: 1em;' + - ' padding: .3em .7em;' + - ' background-color: #37a766;' + - ' color: #ffffff;' + - ' font-size: 15px;' + - ' border: none;' + - ' border-radius: 4px;' + - ' font-family: "Source Sans Pro", Helvetica, sans-serif;' + - ' }' + - ' .feedback-popup a {' + - ' color: #7d7e80;' + - ' font-size: 15px;' + - ' text-decoration: none;' + - ' }' + - ' .feedback-popup a:hover {' + - ' text-decoration: underline;' + - ' }', BOX = '
' + '

Have feedback or questions?

' + @@ -84,8 +12,8 @@ '
'+ '
'+ '' + - '' + - '' + + '' + + 'cancel' + '' + '
', DEFAULTS = { @@ -99,14 +27,6 @@ feedback_error: 'There was a problem sending your message.
Please contact support directly.

close this message' }; - function vendored(property, value){ - var string = ''; - for(var i=0;i Date: Wed, 18 Feb 2015 12:13:15 +0100 Subject: [PATCH 02/14] some style changes --- app/styles/app/charm.sass | 26 +++++++++++++++++--------- vendor/charmscout.js | 7 ++----- 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/app/styles/app/charm.sass b/app/styles/app/charm.sass index ac33bbf5..f6bd156e 100644 --- a/app/styles/app/charm.sass +++ b/app/styles/app/charm.sass @@ -1,14 +1,22 @@ + +.feedback-button + display: none + +.pro + .feedback-button + display: inline-block + .feedback-button display: inline-block position: fixed - right: 0 + right: 1% left: auto - // top: 35% bottom: 0 margin: 0 - padding: 1.5em 1em .5em + padding: .5em 1em .5em border-radius: 4px // transform: rotate(90deg) translateY(-140%) + transform: translateY(20%) will-change: transform transition: transform ease 200ms background: $white @@ -17,9 +25,12 @@ text-transform: uppercase box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.15) z-index: 999 + &.hidden + display: none .feedback-button:hover // transform: rotate(90deg) translateY(-130%) + transform: translateY(0) .feedback-popup position: fixed @@ -67,12 +78,9 @@ a:hover text-decoration: underline + .closed & + display: none + #CHARM_FORM_TARGET display: none -.feedback-button - display: none - -.pro - .feedback-button - display: inline-block diff --git a/vendor/charmscout.js b/vendor/charmscout.js index dc8a56fe..22cf1f54 100644 --- a/vendor/charmscout.js +++ b/vendor/charmscout.js @@ -221,17 +221,14 @@ window.bootstrapCharm = function(){ if(!shown) return; shown = false; box.className = 'closed' + ($('CHARM_YOUR_EMAIL') ? ' with-email' : ''); - setTimeout(function(){ - css(box, 'display:none'); - }, 260); } function hideTab(){ - tab.className = 'hidden'; + tab.classList.add('hidden'); } function showTab(){ - tab.className = ''; + tab.classList.remove('hidden'); } function after(){ From a89e77a56db702f623d702a30f31998fac46599d Mon Sep 17 00:00:00 2001 From: Piotr Sarnacki Date: Wed, 18 Feb 2015 14:01:10 +0100 Subject: [PATCH 03/14] Fix charm feedback box --- app/initializers/charm.coffee | 2 +- vendor/charmscout.js | 13 ++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/app/initializers/charm.coffee b/app/initializers/charm.coffee index 6e1c0b3d..68088671 100644 --- a/app/initializers/charm.coffee +++ b/app/initializers/charm.coffee @@ -4,7 +4,7 @@ initialize = (container, app) -> if config.charmKey window.__CHARM = key: config.charmKey - url: "https://charmscout.herokuapp.com/feedback" + url: window.location.protocol + "//charmscout.herokuapp.com/feedback" window.bootstrapCharm() # $('head').append $('') diff --git a/vendor/charmscout.js b/vendor/charmscout.js index 22cf1f54..f80103a1 100644 --- a/vendor/charmscout.js +++ b/vendor/charmscout.js @@ -8,7 +8,7 @@ window.bootstrapCharm = function(){ '