mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-06-18 12:39:29 +00:00
- 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:
@@ -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')
|
||||
)
|
||||
);
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.mce-tinymce .mce-container .mce-panel {
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.mce-panel {
|
||||
border-width: 0px !important;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user