diff --git a/application/views/system/messages/ajaxRead.php b/application/views/system/messages/ajaxRead.php index b8d2ea4a6..f5a733c74 100644 --- a/application/views/system/messages/ajaxRead.php +++ b/application/views/system/messages/ajaxRead.php @@ -13,21 +13,20 @@ 'ajaxlib' => true, 'dialoglib' => true, 'tinymce' => true, - 'customJSs' => array('public/js/messaging/read.js') + 'customCSSs' => array('public/css/sbadmin2/admintemplate_contentonly.css', 'public/css/messaging/message.css'), + 'customJSs' => array('public/js/bootstrapper.js', 'public/js/messaging/read.js') ) ); ?> -
-
- - +
+
+ + + +
-
+
diff --git a/application/views/system/messages/ajaxWrite.php b/application/views/system/messages/ajaxWrite.php index a21a724b2..88767628c 100644 --- a/application/views/system/messages/ajaxWrite.php +++ b/application/views/system/messages/ajaxWrite.php @@ -11,7 +11,7 @@ 'ajaxlib' => true, 'dialoglib' => true, 'tinymce' => true, - 'customCSSs' => array('public/css/sbadmin2/admintemplate_contentonly.css', 'public/css/messaging/messageWrite.css'), + 'customCSSs' => array('public/css/sbadmin2/admintemplate_contentonly.css', 'public/css/messaging/message.css'), 'customJSs' => array('public/js/bootstrapper.js', 'public/js/messaging/write.js') ) ); diff --git a/application/views/system/messages/htmlError.php b/application/views/system/messages/htmlError.php index 7e029b50c..78ffc7164 100644 --- a/application/views/system/messages/htmlError.php +++ b/application/views/system/messages/htmlError.php @@ -7,7 +7,7 @@ 'bootstrap' => true, 'fontawesome' => true, 'sbadmintemplate' => true, - 'customCSSs' => array('public/css/sbadmin2/admintemplate_contentonly.css', 'public/css/messaging/messageSent.css') + 'customCSSs' => array('public/css/sbadmin2/admintemplate_contentonly.css', 'public/css/messaging/message.css') ) ); ?> diff --git a/application/views/system/messages/htmlRead.php b/application/views/system/messages/htmlRead.php index 01a5421ac..390e84ccc 100644 --- a/application/views/system/messages/htmlRead.php +++ b/application/views/system/messages/htmlRead.php @@ -7,7 +7,7 @@ 'bootstrap' => true, 'fontawesome' => true, 'sbadmintemplate' => true, - 'customCSSs' => array('public/css/sbadmin2/admintemplate_contentonly.css', 'public/css/messaging/messageReply.css') + 'customCSSs' => array('public/css/sbadmin2/admintemplate_contentonly.css', 'public/css/messaging/message.css') ) ); ?> diff --git a/application/views/system/messages/htmlSuccess.php b/application/views/system/messages/htmlSuccess.php index 0260c9d16..e421a77e0 100644 --- a/application/views/system/messages/htmlSuccess.php +++ b/application/views/system/messages/htmlSuccess.php @@ -7,7 +7,7 @@ 'bootstrap' => true, 'fontawesome' => true, 'sbadmintemplate' => true, - 'customCSSs' => array('public/css/sbadmin2/admintemplate_contentonly.css', 'public/css/messaging/messageSent.css') + 'customCSSs' => array('public/css/sbadmin2/admintemplate_contentonly.css', 'public/css/messaging/message.css') ) ); ?> diff --git a/application/views/system/messages/htmlWriteReply.php b/application/views/system/messages/htmlWriteReply.php index b9932148b..dde6cf17a 100644 --- a/application/views/system/messages/htmlWriteReply.php +++ b/application/views/system/messages/htmlWriteReply.php @@ -8,7 +8,7 @@ 'fontawesome' => true, 'tinymce' => true, 'sbadmintemplate' => true, - 'customCSSs' => array('public/css/sbadmin2/admintemplate_contentonly.css', 'public/css/messaging/messageWrite.css'), + 'customCSSs' => array('public/css/sbadmin2/admintemplate_contentonly.css', 'public/css/messaging/message.css'), 'customJSs' => array('public/js/bootstrapper.js', 'public/js/messaging/messageWriteReply.js') ) ); diff --git a/application/views/system/messages/htmlWriteTemplate.php b/application/views/system/messages/htmlWriteTemplate.php index 7132cfb36..9d087f2ca 100644 --- a/application/views/system/messages/htmlWriteTemplate.php +++ b/application/views/system/messages/htmlWriteTemplate.php @@ -11,7 +11,7 @@ 'tinymce' => true, 'sbadmintemplate' => true, 'widgets' => true, - 'customCSSs' => array('public/css/sbadmin2/admintemplate_contentonly.css', 'public/css/messaging/messageWrite.css'), + 'customCSSs' => array('public/css/sbadmin2/admintemplate_contentonly.css', 'public/css/messaging/message.css'), 'customJSs' => array('public/js/bootstrapper.js', 'public/js/messaging/messageWrite.js') ) ); diff --git a/application/views/templates/FHC-Header.php b/application/views/templates/FHC-Header.php index 7b75e2ad7..2d6a92ace 100644 --- a/application/views/templates/FHC-Header.php +++ b/application/views/templates/FHC-Header.php @@ -80,7 +80,14 @@ } // Tabulator CSS - if ($tabulator === true) generateCSSsInclude('vendor/olifolkerd/tabulator/dist/css/bootstrap/tabulator_bootstrap.min.css'); + if ($tabulator === true) + { + generateCSSsInclude('vendor/olifolkerd/tabulator/dist/css/bootstrap/tabulator_bootstrap.min.css'); + generateCSSsInclude('public/css/Tabulator.css'); + } + + // Tinymce CSS + if ($tinymce === true) generateCSSsInclude('public/css/TinyMCE.css'); // -------------------------------------------------------------------------------------------------------- // From public folder diff --git a/public/css/Tabulator.css b/public/css/Tabulator.css new file mode 100644 index 000000000..359f29e72 --- /dev/null +++ b/public/css/Tabulator.css @@ -0,0 +1,14 @@ +.tabulator-col { + font-size: 14px; +} + +.tabulator-page { + color: black; + opacity: 1 !important; + padding: 2px 7px !important; + border: 0px !important; +} + +.tabulator-page.active { + color: #337ab7 !important; +} diff --git a/public/css/TinyMCE.css b/public/css/TinyMCE.css new file mode 100644 index 000000000..a6d956b48 --- /dev/null +++ b/public/css/TinyMCE.css @@ -0,0 +1,7 @@ +.mce-tinymce .mce-container .mce-panel { + border-width: 0px; +} + +.mce-panel { + border-width: 0px !important; +} diff --git a/public/css/messaging/message.css b/public/css/messaging/message.css new file mode 100644 index 000000000..5d62a5e6a --- /dev/null +++ b/public/css/messaging/message.css @@ -0,0 +1,191 @@ +/* Smaller subject field */ +input[type=text] { + height: 28px; + padding: 0; +} + +.msgfield label { + margin-bottom: 0 !important; + margin-top: 3px; +} + +@media screen and (min-width: 1200px) { + .col-lg-1.msgfieldcol-left { + width: 13%; + } + + .col-lg-11.msgfieldcol-right { + width: 87%; + } +} + +#sendButton { + width: 120px; +} + +/* Overwrites the Widget.css class */ +div .width-150px { + width: 200px; +} + +.panel-heading { + font-size: 16px; +} + +.signatureblock { + color: grey; +} + +.signatureblocklink { + color: grey; +} + +.signatureblocklink:hover { + color: #337ab7; +} + +.rwd-line { + display: block; +} + +@media screen and (min-width: 1831px) { + .rwd-line { + display: inline; + } +} + +.panel-heading { + font-size: 16px; +} + +@media screen and (min-width: 1500px) { + #msgtable { + width: 70%; + } +} + +#msgtable td { + border: none !important; +} + +#replybutton { + width: 120px; +} + +/* STYLE THE HTML ELEMENTS (INCLUDES RESETS FOR THE DEFAULT FIELDSET AND LEGEND STYLES) */ +fieldset { + margin: 0; + padding: 2rem; + box-sizing: border-box; + display: block; + border: none; + border: solid 1px #CCC; + min-width: 0; + background-color: #FFF; +} +fieldset legend { + margin: 0 0 1.5rem; + padding: 0; + width: 100%; + float: left; + display: table; + font-size: 1.5rem; + line-height: 140%; + font-weight: 600; + color: #333; +} +fieldset legend + * { + clear: both; +} +body:not(:-moz-handler-blocked) fieldset { + display: table-cell; +} + +/* TOGGLE STYLING */ +.toggle { + margin: 0 0 1.5rem; + box-sizing: border-box; + font-size: 0; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: stretch; +} +.toggle input { + width: 0; + height: 0; + position: absolute; + left: -9999px; +} +.toggle input + label { + margin: 0; + padding: .75rem 2rem; + box-sizing: border-box; + position: relative; + display: inline-block; + border: solid 1px #DDD; + background-color: #FFF; + font-size: 14px; + line-height: 140%; + font-weight: 600; + text-align: center; + box-shadow: 0 0 0 rgba(255, 255, 255, 0); + transition: border-color .15s ease-out, color .25s ease-out, background-color .15s ease-out, box-shadow .15s ease-out; + cursor: pointer; +} +.toggle input + label:first-of-type { + border-radius: 6px 0 0 6px; + border-right: none; +} +.toggle input + label:last-of-type { + border-radius: 0 6px 6px 0; + border-left: none; +} +.toggle input:hover + label { + border-color: #213140; +} +.toggle input:checked + label { + background-color: #337ab7; + color: #FFF; + box-shadow: 0 0 10px rgba(102, 179, 251, 0.5); + border-color: #337ab7; + z-index: 1; +} +.toggle input:focus + label { + outline: dotted 1px #CCC; + outline-offset: .45rem; +} +@media (max-width: 800px) { + .toggle input + label { + padding: .75rem .25rem; + flex: 0 0 50%; + display: flex; + justify-content: center; + align-items: center; + } +} + +/* STYLING FOR THE STATUS HELPER TEXT FOR THE DEMO */ +.status { + margin: 0; + font-size: 1rem; + font-weight: 400; +} +.status span { + font-weight: 600; + color: #B6985A; +} +.status span:first-of-type { + display: inline; +} +.status span:last-of-type { + display: none; +} +@media (max-width: 800px) { + .status span:first-of-type { + display: none; + } + .status span:last-of-type { + display: inline; + } +} diff --git a/public/css/messaging/messageReply.css b/public/css/messaging/messageReply.css deleted file mode 100644 index 17f978ecc..000000000 --- a/public/css/messaging/messageReply.css +++ /dev/null @@ -1,17 +0,0 @@ -.panel-heading { - font-size: 16px; -} - -@media screen and (min-width: 1500px) { - #msgtable { - width: 70%; - } -} - -#msgtable td { - border: none !important; -} - -#replybutton { - width: 120px; -} diff --git a/public/css/messaging/messageSent.css b/public/css/messaging/messageSent.css deleted file mode 100644 index 96403d797..000000000 --- a/public/css/messaging/messageSent.css +++ /dev/null @@ -1,25 +0,0 @@ -.panel-heading { - font-size: 16px; -} - -.signatureblock { - color: grey; -} - -.signatureblocklink { - color: grey; -} - -.signatureblocklink:hover { - color: #337ab7; -} - -.rwd-line { - display: block; -} - -@media screen and (min-width: 1831px) { - .rwd-line { - display: inline; - } -} diff --git a/public/css/messaging/messageWrite.css b/public/css/messaging/messageWrite.css deleted file mode 100644 index 3b5e1fd0e..000000000 --- a/public/css/messaging/messageWrite.css +++ /dev/null @@ -1,29 +0,0 @@ -/*smaller subject field*/ -input[type=text] { - height: 28px; - padding: 0; -} - -.msgfield label { - margin-bottom: 0 !important; - margin-top: 3px; -} - -@media screen and (min-width: 1200px) { - .col-lg-1.msgfieldcol-left { - width: 13%; - } - - .col-lg-11.msgfieldcol-right { - width: 87%; - } -} - -#sendButton { - width: 120px; -} - -/* Overwrites the Widget.css class */ -div .width-150px { - width: 200px; -} diff --git a/public/js/messaging/read.js b/public/js/messaging/read.js index e1fe784d0..edafe7483 100644 --- a/public/js/messaging/read.js +++ b/public/js/messaging/read.js @@ -85,11 +85,9 @@ function rowClick(e, row) */ function toggleMessages() { - // - if ($(this)[0].className.search("active") == -1) - { - $(this)[0].id == "r" ? getReceivedMessages() : getSentMessages(); - } + $(this)[0].id == "received" ? getReceivedMessages() : getSentMessages(); + + tableMessageLst.redraw(); // redraw table after its content is changed } /** @@ -158,18 +156,20 @@ $(document).ready(function () { tableMessageLst = new Tabulator("#lstMessagesPanel", { height: "400px", pagination: "local", + layout: "fitColumns", + layoutColumnsOnNewData: true, columns: [ - {title: "Subject", field: "subject", width: 700, responsive: 0}, - {title: "From", field: "from", width: 400, visible: false}, - {title: "To", field: "to", width: 400, visible: false}, - {title: "Date", field: "sent", sorter: "datetime", width: 150} + {title: "Subject", field: "subject", responsive: 0}, + {title: "From", field: "from", visible: false}, + {title: "To", field: "to", visible: false}, + {title: "Date", field: "sent", sorter: "datetime"} ], rowClick: rowClick, rowFormatter: rowFormatter }); // Bind radio buttons click event with toggleMessages function - $(".toggleMessages .btn").click(toggleMessages); + $("#toggleMessages input").click(toggleMessages); // First retrieve the received message and populate the tabulator getReceivedMessages();