@chat21/chat21-ionic 3.0.78 → 3.0.79-rc.2

package/src/app/pages/conversation-detail/conversation-detail.page.scss

@@ -25,8 +25,6 @@
     font-size: 24px;
 }
 
-
-
 #canned > ion-list > ion-item.canned-item.add-canned-response-wpr:hover > span {
     color: #1877f2;
 }
@@ -38,259 +36,32 @@
     color: #1877f2;
 }
 
-// ion-back-button{
-//     display: none!important;
-// }
-// @media (max-width: 767px) {
-//     /* Styles */
-//     ion-back-button{
-//         display: block!important;
-//     }
-// }
-
-// .halfscreen {
-//     width: calc(100% - 320px);
-//     min-width: 50%;
-// }
-
-// ion-header {
-//     border-bottom-style: solid;
-//     border-color: var(--light-gray);
-//     border-bottom-width: thin;
-//     ion-title {
-//         text-align: left;
-//     }
-//     ion-avatar {
-//         position: relative;
-//         display: inline-block;
-//         margin: 0 12px 0 0;
-//         padding: 0;
-//         height: 40px;
-//         width: 40px;
-//         min-width: 40px;
-//         min-height: 40px;
-//         line-height: 40px;
-//         vertical-align: middle;
-//         color: var(--white);
-//         .avatar-placeholder {
-//             position: absolute;
-//             top:0;
-//             left:0;
-//             width: 100%;
-//             height: 100%;
-//             border-radius: 50%;
-//             text-align: center;
-//             font-size: 16px;
-//             color: var(--withe);
-//             font-weight: 500;
-//         }
-//         .avatar-profile {
-//             position: relative;
-//             display: inline-block;
-//             width: 100%;
-//             height: 100%;
-//             background-color: transparent;
-//             background-size: cover;
-//             background-position: top center;
-//             border-radius: 50%;
-//             border-color: var(--basic-gray);
-//             border-style: solid;
-//             border-width: 0px;
-//         }
-//     }
-//     .tile-info-with {
-//         position: relative;
-//         display: inline-block;
-//         vertical-align: middle;
-//         // &.info-open {
-//         //     max-width: calc(100% - 300px);
-//         // }
-//     }
-//     .tile-point {
-//         width: 10px;
-//         height: 10px;
-//         border-radius: 50%;
-//         display: inline-block;
-//         line-height: 10px;
-//         margin-right: 5px;
-//         vertical-align: middle;
-//     }
-//     .tile-username {
-//         display: inline-block;
-//         font-size: 15px;
-//         font-weight: bold;
-//         color: var(--black);
-//         margin: 0;
-//         padding: 0;
-
-//     }
-//     .tile-last-activity {
-//         color: var(--light-gray);
-//         font-size: 12px;
-//         font-weight: normal;
-//         margin-top: 2px;
-//         vertical-align: middle;
-//         position: relative;
-//         .tile-typing-now {
-//             color: var(--basic-blue);
-//         }
-//     }
-//     #tile-spinner {
-//         position: relative;
-//         left: 0;
-//         top: 0;
-//         margin: 0;
-//         &.active {
-//             display: inline-block;
-//             width: 30px;
-//         }
-//     }
-//     #tile-spinner > div {
-//         width: 6px;
-//         height: 6px;
-//         background-color: var(--basic-blue);
-//     }
-//     ion-buttons {
-//         button {
-//             max-width: 30px;
-//             padding: 0;
-//             margin-right: 20px;
-//         }
-//     }
-// }
-
-// ion-content {
 
-// .row-day {
-//     padding: 0 10px;
-//     text-align: center;
-//     width: 100%;
-//     margin-top: 15px;
-//     margin-bottom: 5px;
-// }
-//     .header-day {
-//         background-color: var(--transparent);
-//         padding-top: 4px;
-//         padding-bottom: 4px;
-//         padding-left: 12px;
-//         padding-right: 12px;
-//         vertical-align: middle;
-//         border-radius: 13px;
-//         font-size: 14px;
-//         font-weight: bold;
-//         color: var(--basic-gray);
-//         display: inline-block;
-//     }
-//     .message {
-//         .bubble-message {
-//             position: relative;
-//             border-radius: 15px;
-//             font-size: 15px;
-//             padding: 5px 10px 10px 10px;
-//             display: block;
-//             width: auto;
-//             max-width: 80%;
-//             line-height: 1.34;
-//             direction: ltr;
-//         }
-//         .message-content:after {
-//             content: "\00a0\00a0\00a0\00a0\00a0\00a0";
-//         }
-//         .timestamp-message {
-//             font-size: 10px;
-//             padding: 0px;
-//             position: absolute;
-//             bottom: 0px;
-//             right: 6px;
-//             line-height: 15px;
-//         }
-//         &.message-other {
-//             width: 100%;
-//             margin-top: 4px;
-//             .bubble-message {
-//                 background-color: var(--light-gray);
-//                 color: var(--black);
-//                 margin-left: 24px;
-//                 float: left;
-//                 border-top-left-radius: 6px;
-//                 border-bottom-left-radius: 6px;
-//             }
-//             .message-sender-fullname {
-//                 margin: 0;
-//                 font-size: 15px;
-//                 color: var(--basic-gray);
-//                 font-weight: bold;
-//                 display: none;
-//             }
-//             .timestamp-message {
-//                 color: var(--basic-gray);
-//                 bottom: 2px;
-//                 right: 10px;
-//             }
-//             &.first-message {
-//                 margin-top: 10px;
-//                 .bubble-message {
-//                     border-top-left-radius: 12px;
-//                     border-bottom-left-radius: 0px;
-//                 }
-//                 .message-sender-fullname {
-//                     display: block;
-//                 }
-//             }
-//         }
-//         &.message-mine {
-//             width: 100%;
-//             margin-top: 4px;
-//             .bubble-message {
-//                 background-color: var(--bubble-blue);
-//                 color: white;
-//                 margin-right: 24px;
-//                 float: right;
-//                 border-top-right-radius: 6px;
-//                 border-bottom-right-radius: 6px;
-//             }
-//             &.first-message {
-//                 margin-top: 10px;
-//                 .bubble-message {
-//                     border-top-right-radius: 12px;
-//                     border-bottom-right-radius: 0px;
-//                 }
-//             }
-//             .timestamp-message {
-//                 color: var(--white);
-//             }
-//             .attribute-message {
-//                 position: absolute;
-//                 width: 100%;
-//                 background-color: transparent;
-//                 bottom: 0;
-//                 right: 0;
-//                 .status-message {
-//                     position: absolute;
-//                     top: 0;
-//                     right: 0;
-//                     width: 15px;
-//                     .material-icons {
-//                         font-size: 15px;
-//                         color: var(--basic-blue);
-//                         position: absolute;
-//                         bottom: 4px;
-//                         right: 2px;
-//                     }
-//                 }
-//             }
-//         }
-//     }
-
-// }
 
 ion-header {
-    border-bottom-style: solid;
-    border-color: var(--light-gray);
-    border-bottom-width: thin;
+    border: none;
+    &.mobile{
+        --ion-background-color: #fff;
+        border-bottom-style: solid;
+        border-color: var(--light-gray);
+        border-bottom-width: thin;
+    }
+    ion-toolbar{
+        height: var(--header-height);
+        &:not(.mobile){
+            --background: var(--list-bkg-color);
+        }
+    }
 }
 
 ion-content {
+
+    &#contentPlaceholder:not(.mobile),
+    &#conv-details:not(.mobile){
+        --background: var(--list-bkg-color);
+    }
+    --background: white;
+
     ion-item {
         --padding-end: 0px;
         --inner-padding-end: 0px;
@@ -302,6 +73,10 @@ ion-content {
         padding: 0;
         margin: 0;
         overflow: hidden;
+
+        &:not(.mobile){
+            padding: var(--padding-conversation-detail);
+        }
     }
     .row_content {
         width: 100%;
@@ -311,6 +86,14 @@ ion-content {
         position: absolute;
         top: 0;
         overflow: hidden;
+        background-color: white;
+
+        &:not(.mobile){
+            border-radius: var(--border-radius-content);;
+            position: unset;
+            
+        }
+
         ion-col {
             padding: 5px 0;
         }
@@ -326,7 +109,7 @@ ion-content {
         position: absolute;
         bottom: 0;
         width: calc(100% - 0px);
-        border-top: 1px solid #e2e2e2;
+        // border-top: 1px solid #e2e2e2;
     }
 
     #chatArea {
@@ -388,6 +171,12 @@ ion-content {
     min-width: calc(100% - 600px) !important;
 }
 
+:host #conv-details .chat-area-apps-sidebar-wide ion-conversation-detail ::ng-deep {
+    div.manage_conversation_info_container{
+        right: calc(300px + 300px + var(--padding-conversation-detail));
+    }
+}
+
 .info-convs-apps-sidebar-wide {
     max-width: 600px !important;
     min-width: 600px !important;
@@ -440,6 +229,7 @@ ion-content {
 
 .ionContentChatArea {
     opacity: 0;
+    --background: white;
     &.active {
         opacity: 1;
     }