diff --git a/static/css/checkbox.css b/static/css/checkbox.css new file mode 100644 index 00000000..82d94824 --- /dev/null +++ b/static/css/checkbox.css @@ -0,0 +1,252 @@ +.checkbox { + padding-left: 24px; +} +.checkbox label { + display: inline-block; + vertical-align: middle; + position: relative; + padding-left: 5px; +} +.checkbox label::before { + content: ""; + display: inline-block; + position: absolute; + width: 24px; + height: 24px; + left: 0; + margin-top:5px; + margin-left: -24px; + border: 1px solid #cccccc; + border-radius: 3px; + background-color: #fff; + -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + transition: border 0.15s ease-in-out, color 0.15s ease-in-out; +} +.checkbox label::after { + display: inline-block; + position: absolute; + width: 16px; + height: 16px; + left: 0; + top: 0; + margin-left: -20px; + padding-left: 3px; + padding-top: 5px; + font-size: 11px; + color: #555555; +} +.checkbox input[type="checkbox"], +.checkbox input[type="radio"] { + opacity: 0; + z-index: 1; +} +.checkbox input[type="checkbox"]:focus + label::before, +.checkbox input[type="radio"]:focus + label::before { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +.checkbox input[type="checkbox"]:checked + label::after, +.checkbox input[type="radio"]:checked + label::after { + font-family: "FontAwesome"; + content: "\f00c"; +} +.checkbox input[type="checkbox"]:disabled + label, +.checkbox input[type="radio"]:disabled + label { + opacity: 0.65; +} +.checkbox input[type="checkbox"]:disabled + label::before, +.checkbox input[type="radio"]:disabled + label::before { + background-color: #eeeeee; + cursor: not-allowed; +} +.checkbox.checkbox-circle label::before { + border-radius: 50%; +} +.checkbox.checkbox-inline { + margin-top: 0; +} + +.checkbox-primary input[type="checkbox"]:checked + label::before, +.checkbox-primary input[type="radio"]:checked + label::before { + background-color: #337ab7; + border-color: #337ab7; +} +.checkbox-primary input[type="checkbox"]:checked + label::after, +.checkbox-primary input[type="radio"]:checked + label::after { + color: #fff; +} + +.checkbox-danger input[type="checkbox"]:checked + label::before, +.checkbox-danger input[type="radio"]:checked + label::before { + background-color: #d9534f; + border-color: #d9534f; +} +.checkbox-danger input[type="checkbox"]:checked + label::after, +.checkbox-danger input[type="radio"]:checked + label::after { + color: #fff; +} + +.checkbox-info input[type="checkbox"]:checked + label::before, +.checkbox-info input[type="radio"]:checked + label::before { + background-color: #5bc0de; + border-color: #5bc0de; +} +.checkbox-info input[type="checkbox"]:checked + label::after, +.checkbox-info input[type="radio"]:checked + label::after { + color: #fff; +} + +.checkbox-warning input[type="checkbox"]:checked + label::before, +.checkbox-warning input[type="radio"]:checked + label::before { + background-color: #f0ad4e; + border-color: #f0ad4e; +} +.checkbox-warning input[type="checkbox"]:checked + label::after, +.checkbox-warning input[type="radio"]:checked + label::after { + color: #fff; +} + +.checkbox-success input[type="checkbox"]:checked + label::before, +.checkbox-success input[type="radio"]:checked + label::before { + background-color: #5cb85c; + border-color: #5cb85c; +} +.checkbox-success input[type="checkbox"]:checked + label::after, +.checkbox-success input[type="radio"]:checked + label::after { + color: #fff; +} + +.radio { + padding-left: 20px; +} +.radio label { + display: inline-block; + vertical-align: middle; + position: relative; + padding-left: 5px; +} +.radio label::before { + content: ""; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + left: 0; + margin-left: -20px; + border: 1px solid #cccccc; + border-radius: 50%; + background-color: #fff; + -webkit-transition: border 0.15s ease-in-out; + -o-transition: border 0.15s ease-in-out; + transition: border 0.15s ease-in-out; +} +.radio label::after { + display: inline-block; + position: absolute; + content: " "; + width: 11px; + height: 11px; + left: 3px; + top: 3px; + margin-left: -20px; + border-radius: 50%; + background-color: #555555; + -webkit-transform: scale(0, 0); + -ms-transform: scale(0, 0); + -o-transform: scale(0, 0); + transform: scale(0, 0); + -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); + -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); + -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); + transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); +} +.radio input[type="radio"] { + opacity: 0; + z-index: 1; +} +.radio input[type="radio"]:focus + label::before { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +.radio input[type="radio"]:checked + label::after { + -webkit-transform: scale(1, 1); + -ms-transform: scale(1, 1); + -o-transform: scale(1, 1); + transform: scale(1, 1); +} +.radio input[type="radio"]:disabled + label { + opacity: 0.65; +} +.radio input[type="radio"]:disabled + label::before { + cursor: not-allowed; +} +.radio.radio-inline { + margin-top: 0; +} + +.radio-primary input[type="radio"] + label::after { + background-color: #337ab7; +} +.radio-primary input[type="radio"]:checked + label::before { + border-color: #337ab7; +} +.radio-primary input[type="radio"]:checked + label::after { + background-color: #337ab7; +} + +.radio-danger input[type="radio"] + label::after { + background-color: #d9534f; +} +.radio-danger input[type="radio"]:checked + label::before { + border-color: #d9534f; +} +.radio-danger input[type="radio"]:checked + label::after { + background-color: #d9534f; +} + +.radio-info input[type="radio"] + label::after { + background-color: #5bc0de; +} +.radio-info input[type="radio"]:checked + label::before { + border-color: #5bc0de; +} +.radio-info input[type="radio"]:checked + label::after { + background-color: #5bc0de; +} + +.radio-warning input[type="radio"] + label::after { + background-color: #f0ad4e; +} +.radio-warning input[type="radio"]:checked + label::before { + border-color: #f0ad4e; +} +.radio-warning input[type="radio"]:checked + label::after { + background-color: #f0ad4e; +} + +.radio-success input[type="radio"] + label::after { + background-color: #5cb85c; +} +.radio-success input[type="radio"]:checked + label::before { + border-color: #5cb85c; +} +.radio-success input[type="radio"]:checked + label::after { + background-color: #5cb85c; +} + +input[type="checkbox"].styled:checked + label:after, +input[type="radio"].styled:checked + label:after { + font-family: 'FontAwesome'; + content: "\f00c"; +} +input[type="checkbox"] .styled:checked + label::before, +input[type="radio"] .styled:checked + label::before { + color: #fff; +} +input[type="checkbox"] .styled:checked + label::after, +input[type="radio"] .styled:checked + label::after { + color: #fff; +} diff --git a/static/js/app/templates.js b/static/js/app/templates.js index 919fde8b..4da16ac1 100644 --- a/static/js/app/templates.js +++ b/static/js/app/templates.js @@ -21,6 +21,12 @@ function save(idx){ template.html = CKEDITOR.instances["html_editor"].getData(); // Fix the URL Scheme added by CKEditor (until we can remove it from the plugin) template.html = template.html.replace(/https?:\/\/{{\.URL}}/gi, "{{.URL}}") + // If the "Add Tracker Image" checkbox is checked, add the tracker + if ($("#use_tracker_checkbox").prop("checked") && + template.html.indexOf("{{.Tracker}}") == -1 && + template.html.indexOf("{{.TrackingUrl}}") == -1){ + template.html = template.html.replace("", "{{.Tracker}}") + } template.text = $("#text_editor").val() // Add the attachments $.each($("#attachmentsTable").DataTable().rows().data(), function(i, target){ diff --git a/templates/base.html b/templates/base.html index 9fc6ea3d..5fdcc301 100644 --- a/templates/base.html +++ b/templates/base.html @@ -24,6 +24,7 @@ +