- Added CSS public/css/Tabulator.css and public/css/TinyMCE.css

- Added these new CSS to views/templates/FHC-Header.php
- Unified messages CSS in public/css/messaging/message.css
- Messages Inbox/Outbox GUI beautified
This commit is contained in:
Paolo
2019-07-04 17:18:01 +02:00
parent 18ea98416f
commit 48bcc77c97
15 changed files with 245 additions and 98 deletions
+9 -10
View File
@@ -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')
)
);
?>
<body>
<div class="toggleMessages">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active" id="r">
<input type="radio" autocomplete="off" checked> Received
</label>
<label class="btn btn-secondary" id="s">
<input type="radio" autocomplete="off"> Sent
</label>
<fieldset>
<div id="toggleMessages" class="toggle">
<input type="radio" name="toggleMessages" id="received" checked>
<label for="received">Received</label>
<input type="radio" name="toggleMessages" id="sent">
<label for="sent">Sent</label>
</div>
</div>
</fieldset>
<div id="lstMessagesPanel"></div>
<div id="readMessagePanel"></div>
</body>
@@ -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')
)
);
@@ -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')
)
);
?>
@@ -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')
)
);
?>
@@ -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')
)
);
?>
@@ -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')
)
);
@@ -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')
)
);
+8 -1
View File
@@ -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
+14
View File
@@ -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;
}
+7
View File
@@ -0,0 +1,7 @@
.mce-tinymce .mce-container .mce-panel {
border-width: 0px;
}
.mce-panel {
border-width: 0px !important;
}
+191
View File
@@ -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;
}
}
-17
View File
@@ -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;
}
-25
View File
@@ -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;
}
}
-29
View File
@@ -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;
}
+10 -10
View File
@@ -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();