HTML ticket thread, inline images and draft support

Process inline attachments in thread entry and support inline images in
piped emails

Support inline images across the system, with draft support

Migrate to a single attachment table
    That way we don't need a new table for everything we need to attach an
    inline image to (like a signature, for instance)

Add richtext support for internal notes

Implement images on site pages

* Image paste in Redactor
* Make non-local images optional
* Placeholder for non-local images
* Fix local image download hover
* Don't re-attach inline images

ajax.php

@@ -27,7 +27,13 @@ require_once INCLUDE_DIR.'/class.ajax.php';
 
 $dispatcher = patterns('',
     url('^/config/', patterns('ajax.config.php:ConfigAjaxAPI',
-        url_get('^client', 'client')
+        url_get('^client$', 'client')
+    )),
+    url('^/draft/', patterns('ajax.draft.php:DraftAjaxAPI',
+        url_post('^(?P<id>\d+)$', 'updateDraftClient'),
+        url_post('^(?P<id>\d+)/attach$', 'uploadInlineImageClient'),
+        url_get('^(?P<namespace>[\w.]+)$', 'getDraftClient'),
+        url_post('^(?P<namespace>[\w.]+)$', 'createDraftClient')
     ))
 );
 print $dispatcher->resolve($ost->get_path_info());

assets/default/css/theme.css

@@ -520,7 +520,7 @@ body {
 #kb-search #breadcrumbs #breadcrumbs a {
   color: #555;
 }
-#ticketForm div,
+#ticketForm div.clear,
 #clientLogin div {
   clear: both;
   padding: 3px 0;
@@ -648,8 +648,8 @@ body {
 #reply h2 {
   margin-bottom: 10px;
 }
-#reply table {
-  width: 800px;
+#reply > table {
+  width: auto;
 }
 #reply table td {
   vertical-align: top;
@@ -783,7 +783,8 @@ a.refresh {
 .infoTable th {
   text-align: left;
 }
-#ticketThread table {
+#ticketThread table.response,
+#ticketThread table.message {
   margin-top: 10px;
   border: 1px solid #aaa;
   border-bottom: 2px solid #aaa;
@@ -799,9 +800,6 @@ a.refresh {
   color: #888;
   padding-left: 20px;
 }
-#ticketThread table td {
-  padding: 5px;
-}
 #ticketThread .message th {
   background: #d8efff;
 }
@@ -824,3 +822,66 @@ a.refresh {
   background-position: 0 50%;
   background-repeat: no-repeat;
 }
+/* Inline image hovering with download link */
+.image-hover {
+    display: inline-block;
+    position: relative;
+}
+.image-hover .caption {
+    background-color: rgba(0,0,0,0.5);
+    min-width: 20em;
+    color: white;
+    padding: 1em;
+    display: none;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
+}
+.image-hover .caption .filename {
+    display: inline-block;
+    max-width: 60%;
+}
+.ticket-thread-body img {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+}
+.action-button {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  color: #777 !important;
+  display: inline-block;
+  border: 1px solid #aaa;
+  cursor: pointer;
+  font-size: 11px;
+  height: 18px;
+  overflow: hidden;
+  background-color: #dddddd;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #efefef), color-stop(100% #dddddd));
+  background-image: -webkit-linear-gradient(top, #efefef 0%, #dddddd 100%);
+  background-image: -moz-linear-gradient(top, #efefef 0%, #dddddd 100%);
+  background-image: -ms-linear-gradient(top, #efefef 0%, #dddddd 100%);
+  background-image: -o-linear-gradient(top, #efefef 0%, #dddddd 100%);
+  background-image: linear-gradient(top, #efefef 0%, #dddddd 100%);
+  padding: 0 5px;
+  text-decoration: none;
+  line-height:18px;
+  float:right;
+  margin-left:5px;
+}
+.action-button span,
+.action-button a {
+  color: #777 !important;
+  display: inline-block;
+  float: left;
+}
+.action-button a {
+  color: #777;
+  text-decoration: none;
+}

bootstrap.php

@@ -60,11 +60,12 @@ class Bootstrap {
         define('CONFIG_TABLE',$prefix.'config');
 
         define('CANNED_TABLE',$prefix.'canned_response');
-        define('CANNED_ATTACHMENT_TABLE',$prefix.'canned_attachment');
         define('PAGE_TABLE', $prefix.'page');
         define('FILE_TABLE',$prefix.'file');
         define('FILE_CHUNK_TABLE',$prefix.'file_chunk');
 
+        define('ATTACHMENT_TABLE',$prefix.'attachment');
+
         define('STAFF_TABLE',$prefix.'staff');
         define('TEAM_TABLE',$prefix.'team');
         define('TEAM_MEMBER_TABLE',$prefix.'team_member');
@@ -73,10 +74,10 @@ class Bootstrap {
         define('GROUP_DEPT_TABLE', $prefix.'group_dept_access');
 
         define('FAQ_TABLE',$prefix.'faq');
-        define('FAQ_ATTACHMENT_TABLE',$prefix.'faq_attachment');
         define('FAQ_TOPIC_TABLE',$prefix.'faq_topic');
         define('FAQ_CATEGORY_TABLE',$prefix.'faq_category');
 
+        define('DRAFT_TABLE',$prefix.'draft');
         define('TICKET_TABLE',$prefix.'ticket');
         define('TICKET_THREAD_TABLE',$prefix.'ticket_thread');
         define('TICKET_ATTACHMENT_TABLE',$prefix.'ticket_attachment');

client.inc.php

@@ -63,6 +63,9 @@ if ($_POST  && !$ost->checkCSRFToken()) {
     die('Action denied (400)!');
 }
 
+//Add token to the header - used on ajax calls [DO NOT CHANGE THE NAME]
+$ost->addExtraHeader('<meta name="csrf_token" content="'.$ost->getCSRFToken().'" />');
+
 /* Client specific defaults */
 define('PAGE_LIMIT', DEFAULT_PAGE_LIMIT);
 

css/osticket.css

@@ -23,3 +23,7 @@
 }
 
 #loading h4 { margin: 3px 0 0 0; padding: 0; color: #d80; }
+
+.pull-right {
+    float: right;
+}

css/thread.css

+/*!
+ * Bootstrap v3.0.0
+ *
+ * Copyright 2013 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ */
+
+/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
+.thread-body article,
+.thread-body aside,
+.thread-body details,
+.thread-body figcaption,
+.thread-body figure,
+.thread-body footer,
+.thread-body header,
+.thread-body hgroup,
+.thread-body main,
+.thread-body nav,
+.thread-body section,
+.thread-body summary {
+  display: block;
+}
+.thread-body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px !important;
+  line-height: 1.428571429;
+  color: #333333;
+  background-color: #ffffff;
+  margin: 0;
+  padding: 0.5em;
+}
+.thread-body a:focus {
+  outline: thin dotted;
+}
+.thread-body a:active,
+.thread-body a:hover {
+  outline: 0;
+}
+.thread-body h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+.thread-body abbr[title] {
+  border-bottom: 1px dotted;
+}
+.thread-body b,
+.thread-body strong {
+  font-weight: bold;
+}
+.thread-body dfn {
+  font-style: italic;
+}
+.thread-body hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+.thread-body mark {
+  background: #ff0;
+  color: #000;
+}
+.thread-body code,
+.thread-body kbd,
+.thread-body pre,
+.thread-body samp {
+  font-family: monospace, serif;
+  font-size: 1em;
+}
+.thread-body pre {
+  white-space: pre-wrap;
+}
+.thread-body q {
+  quotes: "\201C" "\201D" "\2018" "\2019";
+}
+.thread-body small {
+  font-size: 80%;
+}
+.thread-body sub,
+.thread-body sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+.thread-body sup {
+  top: -0.5em;
+}
+.thread-body sub {
+  bottom: -0.25em;
+}
+.thread-body img {
+  border: 0;
+}
+.thread-body svg:not(:root) {
+  overflow: hidden;
+}
+.thread-body table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+.thread-body *,
+.thread-body *:before,
+.thread-body *:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.thread-body a {
+  color: #428bca;
+  text-decoration: none;
+}
+.thread-body a:hover,
+.thread-body a:focus {
+  color: #2a6496;
+  text-decoration: underline;
+}
+.thread-body a:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+.thread-body img {
+  vertical-align: middle;
+}
+.thread-body hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eeeeee;
+}
+.thread-body .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+}
+.thread-body p {
+  margin: 0 0 10px;
+}
+.thread-body .lead {
+  margin-bottom: 20px;
+  font-size: 16.099999999999998px;
+  font-weight: 200;
+  line-height: 1.4;
+}
+@media (min-width: 768px) {
+  .thread-body .lead {
+    font-size: 21px;
+  }
+}
+.thread-body small {
+  font-size: 85%;
+}
+.thread-body cite {
+  font-style: normal;
+}
+.thread-body .text-muted {
+  color: #999999;
+}
+.thread-body .text-primary {
+  color: #428bca;
+}
+.thread-body .text-warning {
+  color: #c09853;
+}
+.thread-body .text-danger {
+  color: #b94a48;
+}
+.thread-body .text-success {
+  color: #468847;
+}
+.thread-body .text-info {
+  color: #3a87ad;
+}
+.thread-body .text-left {
+  text-align: left;
+}
+.thread-body .text-right {
+  text-align: right;
+}
+.thread-body .text-center {
+  text-align: center;
+}
+.thread-body h1,
+.thread-body h2,
+.thread-body h3,
+.thread-body h4,
+.thread-body h5,
+.thread-body h6,
+.thread-body .h1,
+.thread-body .h2,
+.thread-body .h3,
+.thread-body .h4,
+.thread-body .h5,
+.thread-body .h6 {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 500;
+  line-height: 1.1;
+  color: black;
+}
+.thread-body h1 small,
+.thread-body h2 small,
+.thread-body h3 small,
+.thread-body h4 small,
+.thread-body h5 small,
+.thread-body h6 small,
+.thread-body .h1 small,
+.thread-body .h2 small,
+.thread-body .h3 small,
+.thread-body .h4 small,
+.thread-body .h5 small,
+.thread-body .h6 small {
+  font-weight: normal;
+  line-height: 1;
+  color: #999999;
+}
+.thread-body h1,
+.thread-body h2,
+.thread-body h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+.thread-body h4,
+.thread-body h5,
+.thread-body h6 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.thread-body h1,
+.thread-body .h1 {
+  font-size: 36px;
+}
+.thread-body h2,
+.thread-body .h2 {
+  font-size: 30px;
+}
+.thread-body h3,
+.thread-body .h3 {
+  font-size: 24px;
+}
+.thread-body h4,
+.thread-body .h4 {
+  font-size: 18px;
+}
+.thread-body h5,
+.thread-body .h5 {
+  font-size: 14px;
+}
+.thread-body h6,
+.thread-body .h6 {
+  font-size: 12px;
+}
+.thread-body h1 small,
+.thread-body .h1 small {
+  font-size: 24px;
+}
+.thread-body h2 small,
+.thread-body .h2 small {
+  font-size: 18px;
+}
+.thread-body h3 small,
+.thread-body .h3 small,
+.thread-body h4 small,
+.thread-body .h4 small {
+  font-size: 14px;
+}
+.thread-body .page-header {
+  padding-bottom: 9px;
+  margin: 40px 0 20px;
+  border-bottom: 1px solid #eeeeee;
+}
+.thread-body ul,
+.thread-body ol {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+.thread-body ul ul,
+.thread-body ol ul,
+.thread-body ul ol,
+.thread-body ol ol {
+  margin-bottom: 0;
+}
+.thread-body .list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+.thread-body .list-inline {
+  padding-left: 0;
+  list-style: none;
+}
+.thread-body .list-inline > li {
+  display: inline-block;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.thread-body blockquote {
+  padding: 10px 20px;
+  margin: 0 0 20px;
+  border-left: 5px solid #eeeeee;
+}
+.thread-body blockquote p {
+  font-size: 17.5px;
+  font-weight: 300;
+  line-height: 1.25;
+}
+.thread-body blockquote p:last-child {
+  margin-bottom: 0;
+}
+.thread-body blockquote small {
+  display: block;
+  line-height: 1.428571429;
+  color: #999999;
+}
+.thread-body blockquote small:before {
+  content: '\2014 \00A0';
+}
+.thread-body blockquote.pull-right {
+  padding-right: 15px;
+  padding-left: 0;
+  border-right: 5px solid #eeeeee;
+  border-left: 0;
+}
+.thread-body blockquote.pull-right p,
+.thread-body blockquote.pull-right small {
+  text-align: right;
+}
+.thread-body blockquote.pull-right small:before {
+  content: '';
+}
+.thread-body blockquote.pull-right small:after {
+  content: '\00A0 \2014';
+}
+.thread-body q:before,
+.thread-body q:after,
+.thread-body blockquote:before,
+.thread-body blockquote:after {
+  content: "";
+}
+.thread-body address {
+  display: block;
+  margin-bottom: 20px;
+  font-style: normal;
+  line-height: 1.428571429;
+}
+.thread-body th {
+  text-align: left;
+}
+.thread-body table {
+  max-width: 100%;
+  background-color: transparent;
+  width: auto;
+  margin-bottom: 20px;
+}
+.thread-body table thead > tr > td,
+.thread-body table thead > tr > th,
+.thread-body table tr > th {
+  background-color: #f0f0f0 !important;
+  font-weight: bold;
+}
+.thread-body table thead > tr > th,
+.thread-body table tbody > tr > th,
+.thread-body table tfoot > tr > th,
+.thread-body table thead > tr > td,
+.thread-body table tbody > tr > td,
+.thread-body table tfoot > tr > td {
+  padding: 8px;
+  line-height: 1.428571429;
+  vertical-align: top;
+  border-top: 1px solid #dddddd;
+}
+.thread-body table thead > tr > th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #dddddd;
+}
+.thread-body table caption + thead tr:first-child th,
+.thread-body table colgroup + thead tr:first-child th,
+.thread-body table thead:first-child tr:first-child th,
+.thread-body table caption + thead tr:first-child td,
+.thread-body table colgroup + thead tr:first-child td,
+.thread-body table thead:first-child tr:first-child td {
+  border-top: 0;
+}
+.thread-body table tbody + tbody {
+  border-top: 2px solid #dddddd;
+}
+.thread-body table table {
+  background-color: #ffffff;
+}
+.thread-body table thead > tr > th,
+.thread-body table tbody > tr > th,
+.thread-body table tfoot > tr > th,
+.thread-body table thead > tr > td,
+.thread-body table tbody > tr > td,
+.thread-body table tfoot > tr > td {
+  padding: 5px;
+}
+.thread-body table col[class*="col-"] {
+  float: none;
+  display: table-column;
+}
+.thread-body table td[class*="col-"],
+.thread-body table th[class*="col-"] {
+  float: none;
+  display: table-cell;
+}