N°2836 - Portal: Introduce bubbles conversation as default caselog rendering

This commit is contained in:
Molkobain
2020-10-24 12:52:39 +02:00
parent 95a2ffa0f2
commit 27e1f3d64b
7 changed files with 1029 additions and 365 deletions

View File

@@ -62,6 +62,11 @@ Dict::Add('EN US', 'English', 'English', array(
'Portal:File:DisplayInfo' => '<a href="%2$s" class="file_download_link">%1$s</a>',
'Portal:File:DisplayInfo+' => '%1$s (%2$s) <a href="%3$s" class="file_open_link" target="_blank">Open</a> / <a href="%4$s" class="file_download_link">Download</a>',
'Portal:Calendar-FirstDayOfWeek' => 'en-us', //work with moment.js locales
));
// Object form
Dict::Add('EN US', 'English', 'English', array(
'Portal:Form:Caselog:Entry:Close:Tooltip' => 'Close this entry',
'Portal:Form:Close:Warning' => 'Do you want to leave this form ? Data entered may be lost',
));

View File

@@ -1,4 +1,3 @@
@charset "UTF-8";
/*!
* Copyright (C) 2013-2020 Combodo SARL
*
@@ -1066,39 +1065,250 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child {
cursor: zoom-in; }
/* CaseLog field */
.caselog_field_entry {
.caselog-thread {
position: relative;
border: 1px solid #ddd;
border-top: none; }
.caselog_field_entry_header {
padding: 6px;
font-size: 0.9em;
border-bottom: 1px solid #FFFFFF;
background-color: #F2F2F2; }
.caselog-thread--header {
padding: 8px;
font-size: 11px;
background-color: rgba(242, 242, 242, 0.38);
border-bottom: 1px solid #ddd; }
.caselog-thread--header span {
color: #777;
/* body: color */ }
.caselog_field_entry_button {
display: block;
width: 15px;
height: 15px;
.caselog-thread--header-toggler {
cursor: pointer;
color: inherit;
text-decoration: none; }
.caselog-thread--header-toggler:hover, .caselog-thread--header-toggler:active, .caselog-thread--header-toggler:focus {
color: inherit;
text-decoration: none; }
.caselog-thread--header-toggler:not(:first-child)::before {
content: "-";
margin: 0 0.4em 0 0.2em;
/* Note: Difference between left and right margin is due to a left space being output because the line break in the HTML isn't tidy */ }
.caselog-thread--header-info > span {
margin-left: 0.5em; }
.caselog-thread--header-info > span > span {
margin-left: 0.5em; }
.caselog-thread--header-info > span:first-child {
margin-left: 0; }
.caselog-thread--content {
padding: 5px;
/*max-height: 400px;
overflow: auto;*/
background-color: #f2f2f2; }
.caselog-thread--date {
margin-bottom: 10px;
text-align: center;
line-height: 15px;
font-size: 16px;
border: 1px solid #a6a6a6;
border-bottom-color: #979797;
cursor: pointer; }
color: #808080; }
.caselog-thread--date:first-child {
display: none; }
.caselog_field_entry_button:hover {
background-color: #cccccc; }
.caselog-thread--block {
position: relative;
min-height: 40px;
/* .caselog-thread--block-medallion height */
margin-bottom: 15px; }
.caselog-thread--block:last-child {
margin-bottom: 0px; }
.caselog_field_entry_button:before {
content: "▴"; }
.caselog-thread--block-medallion,
.caselog-thread--block-entries {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }
.caselog_field_entry_button.collapsed:before {
content: "▾"; }
.caselog-thread--block-medallion {
position: absolute;
top: 0px;
left: 0px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 18px;
color: #444;
/* .caselog-thread--block-entries color */
background-size: 85%;
background-position: center center;
background-color: #FFFFFF;
/* .caselog-thread--block-entries background-color */
background-repeat: no-repeat;
border-radius: 100%; }
.caselog_field_entry_content {
margin: 10px;
.caselog-thread--block-user {
display: none;
margin-left: 54px;
font-size: 12px;
font-weight: bold;
color: #444;
/* .caselog-thread--block-entries background-color */ }
.caselog-thread--block-entries {
position: relative;
display: inline-block;
margin-left: 60px;
background-color: #FFFFFF;
color: #444; }
.caselog-thread--block-entry {
position: relative;
padding: 8px 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.caselog-thread--block-entry img {
max-width: 100%; }
.caselog-thread--block-entry.closed {
cursor: pointer; }
.caselog-thread--block-entry.closed .caselog-thread--block-entry-content {
height: 0px;
overflow-y: hidden; }
.caselog-thread--block-entry.closed .caselog-thread--block-entry-content:after {
content: "...";
position: absolute;
top: 10px;
left: 9px; }
.caselog-thread--block-entry:first-child .caselog-thread--block-entry-content:before {
content: "";
position: absolute;
top: 0px;
left: -15px;
width: 15px;
height: 15px;
border: 8px solid transparent;
border-top-color: #FFFFFF;
/* .caselog-thread--block-entries background-color */
border-right-color: #FFFFFF;
/* .caselog-thread--block-entries background-color */ }
.caselog-thread--block-entry:last-child {
border-bottom: none; }
.caselog-thread--block-entry:hover .caselog-thread--block-entry-date {
opacity: 1; }
.caselog-thread--block-entry:hover:not(.closed) .caselog-thread--block-entry-toggler {
opacity: 1; }
.caselog-thread--block-entry-content {
display: block;
overflow-x: auto; }
.caselog-thread--block-entry-content > p:last-of-type {
margin-bottom: 0px; }
.caselog-thread--block-entry-date {
margin-top: 5px;
opacity: 0.6;
font-size: 10px;
text-align: right;
transition: all 0.2s linear; }
.caselog-thread--block-entry-toggler {
position: absolute;
top: 2px;
right: 5px;
padding: 2px 5px;
opacity: 0;
cursor: pointer;
background-color: #FFFFFF;
/* .caselog-thread--block-entries background-color */
transition: all 0.2s linear; }
.caselog-thread--block-me {
text-align: right; }
.caselog-thread--block-me .caselog-thread--block-medallion {
left: initial;
right: 0px; }
.caselog-thread--block-me .caselog-thread--block-user {
display: none;
margin-left: initial;
margin-right: 54px; }
.caselog-thread--block-me .caselog-thread--block-entries {
margin-left: initial;
margin-right: 60px;
text-align: right; }
.caselog-thread--block-me .caselog-thread--block-entries .caselog-thread--block-entry {
text-align: left; }
.caselog-thread--block-me .caselog-thread--block-entries .caselog-thread--block-entry .caselog-thread--block-entry-toggler {
right: initial;
left: 5px; }
.caselog-thread--block-me .caselog-thread--block-entries .caselog-thread--block-entry:first-child .caselog-thread--block-entry-content:before {
left: initial;
right: -15px;
border-right-color: transparent;
border-left-color: #FFFFFF;
/* .caselog-thread--block-entries background-color */ }
.caselog-thread--block-color-1 .caselog-thread--block-medallion {
color: #FFFFFF;
background-color: #EA7D1E; }
.caselog-thread--block-color-1 .caselog-thread--block-user {
color: #EA7D1E; }
.caselog-thread--block-color-1 .caselog-thread--block-entries {
color: #FFFFFF;
background-color: #EA7D1E; }
.caselog-thread--block-color-1 .caselog-thread--block-entries .caselog-thread--block-entry .caselog-thread--block-entry-toggler {
background-color: #EA7D1E; }
.caselog-thread--block-color-1 .caselog-thread--block-entries .caselog-thread--block-entry:first-child .caselog-thread--block-entry-content:before {
border-top-color: #EA7D1E;
border-right-color: #EA7D1E; }
.caselog-thread--block-color-2 .caselog-thread--block-medallion {
color: #FFFFFF;
background-color: #e9a537; }
.caselog-thread--block-color-2 .caselog-thread--block-user {
color: #e9a537; }
.caselog-thread--block-color-2 .caselog-thread--block-entries {
color: #FFFFFF;
background-color: #e9a537; }
.caselog-thread--block-color-2 .caselog-thread--block-entries .caselog-thread--block-entry .caselog-thread--block-entry-toggler {
background-color: #e9a537; }
.caselog-thread--block-color-2 .caselog-thread--block-entries .caselog-thread--block-entry:first-child .caselog-thread--block-entry-content:before {
border-top-color: #e9a537;
border-right-color: #e9a537; }
.caselog-thread--block-color-3 .caselog-thread--block-medallion {
color: #FFFFFF;
background-color: #d16c13; }
.caselog-thread--block-color-3 .caselog-thread--block-user {
color: #d16c13; }
.caselog-thread--block-color-3 .caselog-thread--block-entries {
color: #FFFFFF;
background-color: #d16c13; }
.caselog-thread--block-color-3 .caselog-thread--block-entries .caselog-thread--block-entry .caselog-thread--block-entry-toggler {
background-color: #d16c13; }
.caselog-thread--block-color-3 .caselog-thread--block-entries .caselog-thread--block-entry:first-child .caselog-thread--block-entry-content:before {
border-top-color: #d16c13;
border-right-color: #d16c13; }
.caselog-thread--block-color-4 .caselog-thread--block-medallion {
color: #FFFFFF;
background-color: #e3952c; }
.caselog-thread--block-color-4 .caselog-thread--block-user {
color: #e3952c; }
.caselog-thread--block-color-4 .caselog-thread--block-entries {
color: #FFFFFF;
background-color: #e3952c; }
.caselog-thread--block-color-4 .caselog-thread--block-entries .caselog-thread--block-entry .caselog-thread--block-entry-toggler {
background-color: #e3952c; }
.caselog-thread--block-color-4 .caselog-thread--block-entries .caselog-thread--block-entry:first-child .caselog-thread--block-entry-content:before {
border-top-color: #e3952c;
border-right-color: #e3952c; }
.caselog-thread--block-color-5 .caselog-thread--block-medallion {
color: #FFFFFF;
background-color: #b05b10; }
.caselog-thread--block-color-5 .caselog-thread--block-user {
color: #b05b10; }
.caselog-thread--block-color-5 .caselog-thread--block-entries {
color: #FFFFFF;
background-color: #b05b10; }
.caselog-thread--block-color-5 .caselog-thread--block-entries .caselog-thread--block-entry .caselog-thread--block-entry-toggler {
background-color: #b05b10; }
.caselog-thread--block-color-5 .caselog-thread--block-entries .caselog-thread--block-entry:first-child .caselog-thread--block-entry-content:before {
border-top-color: #b05b10;
border-right-color: #b05b10; }
/* collapsable sections*/
.form_linkedset_toggler, .form_linkedset_toggler:hover, .form_linkedset_toggler:focus, .form_upload_toggler, .form_upload_toggler:hover, .form_upload_toggler:focus {

View File

@@ -1146,39 +1146,349 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
cursor: zoom-in;
}
/* CaseLog field */
.caselog_field_entry{
.caselog-thread {
position: relative;
border: 1px solid $gray-lighter;
border-top: none;
}
.caselog_field_entry_header{
padding: 6px;
font-size: 0.9em;
border-bottom: 1px solid $white;
background-color: #F2F2F2;
.caselog-thread--header{
padding: 8px;
font-size: 11px;
background-color: rgba(242, 242, 242, 0.38);
border-bottom: 1px solid $gray-lighter;
span{
color: $gray; /* body: color */
}
}
.caselog_field_entry_button{
display: block;
width: 15px;
height: 15px;
text-align: center;
line-height: 15px;
font-size: 16px;
border: 1px solid #a6a6a6;
border-bottom-color: #979797;
.caselog-thread--header-toggler{
cursor: pointer;
color: inherit;
text-decoration: none;
&:hover,
&:active,
&:focus{
color: inherit;
text-decoration: none;
}
&:not(:first-child){
&::before{
content: "-";
margin: 0 0.4em 0 0.2em; /* Note: Difference between left and right margin is due to a left space being output because the line break in the HTML isn't tidy */
}
}
}
.caselog_field_entry_button:hover{
background-color: #cccccc;
.caselog-thread--header-info{
> span{
margin-left: 0.5em;
> span{
margin-left: 0.5em;
}
&:first-child{
margin-left: 0;
}
}
}
.caselog_field_entry_button:before{
content: "";
.caselog-thread--content{
padding: 5px;
/*max-height: 400px;
overflow: auto;*/
background-color: #f2f2f2;
}
.caselog_field_entry_button.collapsed:before{
content: "";
.caselog-thread--date{
margin-bottom: 10px;
text-align: center;
color: $gray-light;
&:first-child{
display: none;
}
}
.caselog_field_entry_content{
margin: 10px;
.caselog-thread--block{
position: relative;
min-height: 40px; /* .caselog-thread--block-medallion height */
margin-bottom: 15px;
&:last-child{
margin-bottom: 0px;
}
}
.caselog-thread--block-medallion,
.caselog-thread--block-entries{
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.caselog-thread--block-medallion{
position: absolute;
top: 0px;
left: 0px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 18px;
color: $messaging-self-secondary-color; /* .caselog-thread--block-entries color */
background-size: 85%;
background-position: center center;
background-color: $messaging-self-primary-color; /* .caselog-thread--block-entries background-color */
background-repeat: no-repeat;
border-radius: 100%;
}
.caselog-thread--block-user{
display: none;
margin-left: 54px;
font-size: 12px;
font-weight: bold;
color: $messaging-self-secondary-color; /* .caselog-thread--block-entries background-color */
}
.caselog-thread--block-entries{
position: relative;
display: inline-block;
margin-left: 60px;
background-color: $messaging-self-primary-color;
color: $messaging-self-secondary-color;
}
.caselog-thread--block-entry{
position: relative;
padding: 8px 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
img{
max-width: 100%;
}
&.closed{
cursor: pointer;
.caselog-thread--block-entry-content{
height: 0px;
overflow-y: hidden;
&:after{
content: "...";
position: absolute;
top: 10px;
left: 9px;
}
}
}
&:first-child{
.caselog-thread--block-entry-content:before{
content: "";
position: absolute;
top: 0px;
left: -15px;
width: 15px;
height: 15px;
border: 8px solid transparent;
border-top-color: $messaging-self-primary-color; /* .caselog-thread--block-entries background-color */
border-right-color: $messaging-self-primary-color; /* .caselog-thread--block-entries background-color */
}
}
&:last-child{
border-bottom: none;
}
&:hover{
.caselog-thread--block-entry-date{
opacity: 1;
}
&:not(.closed){
.caselog-thread--block-entry-toggler{
opacity: 1;
}
}
}
}
.caselog-thread--block-entry-content{
display: block;
overflow-x: auto;
> p:last-of-type{
margin-bottom: 0px;
}
}
.caselog-thread--block-entry-date{
margin-top: 5px;
opacity: 0.6;
font-size: 10px;
text-align: right;
transition: all 0.2s linear;
}
.caselog-thread--block-entry-toggler{
position: absolute;
top: 2px;
right: 5px;
padding: 2px 5px;
opacity: 0;
cursor: pointer;
background-color: $messaging-self-primary-color; /* .caselog-thread--block-entries background-color */
transition: all 0.2s linear;
}
.caselog-thread--block-me{
text-align: right;
.caselog-thread--block-medallion{
left: initial;
right: 0px;
}
.caselog-thread--block-user{
display: none;
margin-left: initial;
margin-right: 54px;
}
.caselog-thread--block-entries{
margin-left: initial;
margin-right: 60px;
text-align: right;
.caselog-thread--block-entry{
text-align: left;
.caselog-thread--block-entry-toggler{
right: initial;
left: 5px;
}
}
.caselog-thread--block-entry:first-child{
.caselog-thread--block-entry-content:before{
left: initial;
right: -15px;
border-right-color: transparent;
border-left-color: $messaging-self-primary-color; /* .caselog-thread--block-entries background-color */
}
}
}
}
.caselog-thread--block-color-1{
.caselog-thread--block-medallion{
color: $messaging-1st-peer-secondary-color;
background-color: $messaging-1st-peer-primary-color;
}
.caselog-thread--block-user{
color: $messaging-1st-peer-primary-color;
}
.caselog-thread--block-entries{
color: $messaging-1st-peer-secondary-color;
background-color: $messaging-1st-peer-primary-color;
.caselog-thread--block-entry{
.caselog-thread--block-entry-toggler{
background-color: $messaging-1st-peer-primary-color;
}
}
.caselog-thread--block-entry:first-child{
.caselog-thread--block-entry-content:before{
border-top-color: $messaging-1st-peer-primary-color;
border-right-color: $messaging-1st-peer-primary-color;
}
}
}
}
.caselog-thread--block-color-2{
.caselog-thread--block-medallion{
color: $messaging-2nd-peer-secondary-color;
background-color: $messaging-2nd-peer-primary-color;
}
.caselog-thread--block-user{
color: $messaging-2nd-peer-primary-color;
}
.caselog-thread--block-entries{
color: $messaging-2nd-peer-secondary-color;
background-color: $messaging-2nd-peer-primary-color;
.caselog-thread--block-entry{
.caselog-thread--block-entry-toggler{
background-color: $messaging-2nd-peer-primary-color;
}
}
.caselog-thread--block-entry:first-child{
.caselog-thread--block-entry-content:before{
border-top-color: $messaging-2nd-peer-primary-color;
border-right-color: $messaging-2nd-peer-primary-color;
}
}
}
}
.caselog-thread--block-color-3{
.caselog-thread--block-medallion{
color: $messaging-3rd-peer-secondary-color;
background-color: $messaging-3rd-peer-primary-color;
}
.caselog-thread--block-user{
color: $messaging-3rd-peer-primary-color;
}
.caselog-thread--block-entries{
color: $messaging-3rd-peer-secondary-color;
background-color: $messaging-3rd-peer-primary-color;
.caselog-thread--block-entry{
.caselog-thread--block-entry-toggler{
background-color: $messaging-3rd-peer-primary-color;
}
}
.caselog-thread--block-entry:first-child{
.caselog-thread--block-entry-content:before{
border-top-color: $messaging-3rd-peer-primary-color;
border-right-color: $messaging-3rd-peer-primary-color;
}
}
}
}
.caselog-thread--block-color-4{
.caselog-thread--block-medallion{
color: $messaging-4th-peer-secondary-color;
background-color: $messaging-4th-peer-primary-color;
}
.caselog-thread--block-user{
color: $messaging-4th-peer-primary-color;
}
.caselog-thread--block-entries{
color: $messaging-4th-peer-secondary-color;
background-color: $messaging-4th-peer-primary-color;
.caselog-thread--block-entry{
.caselog-thread--block-entry-toggler{
background-color: $messaging-4th-peer-primary-color;
}
}
.caselog-thread--block-entry:first-child{
.caselog-thread--block-entry-content:before{
border-top-color: $messaging-4th-peer-primary-color;
border-right-color: $messaging-4th-peer-primary-color;
}
}
}
}
.caselog-thread--block-color-5{
.caselog-thread--block-medallion{
color: $messaging-5th-peer-secondary-color;
background-color: $messaging-5th-peer-primary-color;
}
.caselog-thread--block-user{
color: $messaging-5th-peer-primary-color;
}
.caselog-thread--block-entries{
color: $messaging-5th-peer-secondary-color;
background-color: $messaging-5th-peer-primary-color;
.caselog-thread--block-entry{
.caselog-thread--block-entry-toggler{
background-color: $messaging-5th-peer-primary-color;
}
}
.caselog-thread--block-entry:first-child{
.caselog-thread--block-entry-content:before{
border-top-color: $messaging-5th-peer-primary-color;
border-right-color: $messaging-5th-peer-primary-color;
}
}
}
}
/* collapsable sections*/
.form_linkedset_toggler, .form_upload_toggler {

View File

@@ -937,3 +937,21 @@ $dl-horizontal-offset: $component-offset-horizontal !default;
$dl-horizontal-breakpoint: $grid-float-breakpoint !default;
//** Horizontal line color.
$hr-border: $gray-lighter !default;
//== Messaging
//
//##
$messaging-self-primary-color: $white !default;
$messaging-self-secondary-color: $gray-dark !default;
$messaging-1st-peer-primary-color: $combodo-orange !default;
$messaging-1st-peer-secondary-color: $white !default;
$messaging-2nd-peer-primary-color: #e9a537 !default;
$messaging-2nd-peer-secondary-color: $white !default;
$messaging-3rd-peer-primary-color: darken($combodo-orange, 7%) !default;
$messaging-3rd-peer-secondary-color: $white !default;
$messaging-4th-peer-primary-color: #e3952c !default;
$messaging-4th-peer-secondary-color: $white !default;
$messaging-5th-peer-primary-color: darken($combodo-orange, 14%) !default;
$messaging-5th-peer-secondary-color: $white !default;

View File

@@ -1025,6 +1025,7 @@ class ObjectController extends BrickController
$sObjectClass = $oRequestManipulator->ReadParam('sObjectClass', '');
$sObjectId = $oRequestManipulator->ReadParam('sObjectId', '');
$sObjectField = $oRequestManipulator->ReadParam('sObjectField', '');
$bCheckSecurity = true;
// When reaching to an Attachment, we have to check security on its host object instead of the Attachment itself
if ($sObjectClass === 'Attachment')
@@ -1037,11 +1038,17 @@ class ObjectController extends BrickController
{
$sHostClass = $sObjectClass;
$sHostId = $sObjectId;
// Security bypass for the image attribute of a class
// Note: This will be changed with a proper DM check when corresponding bug is being worked on
if(is_a($sObjectClass, 'Contact', true) && ($sObjectField === 'picture')){
$bCheckSecurity = false;
}
}
// Checking security layers
// Note: Checking if host object already exists as we can try to download document from an object that is being created
if (($sHostId > 0) && !$oSecurityHelper->IsActionAllowed(UR_ACTION_READ, $sHostClass, $sHostId))
if (($bCheckSecurity === true) && ($sHostId > 0) && !$oSecurityHelper->IsActionAllowed(UR_ACTION_READ, $sHostClass, $sHostId))
{
IssueLog::Warning(__METHOD__.' at line '.__LINE__.' : User #'.UserRights::GetUserId().' not allowed to retrieve document from attribute '.$sObjectField.' as it not allowed to read '.$sHostClass.'::'.$sHostId.' object.');
throw new HttpException(Response::HTTP_NOT_FOUND, Dict::S('UI:ObjectDoesNotExist'));