@capillarytech/creatives-library 3.9.21 → 3.10.0

package/components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -8,13 +8,13 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { CapRow, CapColumn, CapButton } from '@capillarytech/cap-react-ui-library/';
-import { CapImage } from '@capillarytech/cap-ui-library/';
 import { FormattedMessage } from 'react-intl';
 import _ from 'lodash';
 import SlideBox from '../../SlideBox';
 import './_wechatRichmediaTemplatePrev.scss';
 import messages from './messages';
-const wechatBody = require('../assets/images/wechat_mobile_android.svg');
+
+const wechatBody = require('./../assets/images/WECHAT_5x.png');
 
 class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   preparePreviewData = (mediaList) => {
@@ -25,7 +25,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
         returnObj.push(
           <div style={{ width: "100%", height: 116, position: "relative" }}>
             <CapRow>
-              <CapImage alt="default" width="100%" height="110px" src={contentData.image_url} />
+              <img alt="default" width="100%" height="110px" src={contentData.image_url} />
               <div className="preview-overflow-wrap-fields" style={{ position: "absolute", bottom: "5%", left: "5%" }}>{contentData.title ? contentData.title : ""}</div>
             </CapRow>
             {Object.keys(mediaList).length === 1 ?
@@ -44,7 +44,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
               {contentData.title}
             </CapColumn>
             <CapColumn style={{ float: "right" }}>
-              <CapImage alt="default" width="60px" height="60px" src={contentData.image_url} style={{ "padding-right": "10%", "float": "left" }}/>
+              <img alt="default" width="60px" height="60px" src={contentData.image_url} style={{ "padding-right": "10%", "float": "left" }}/>
             </CapColumn>
           </CapRow>
         );
@@ -60,7 +60,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
         returnObj.push(
           <div style={{ width: "100%", height: 116, position: "relative" }}>
             <CapRow>
-              <CapImage alt="default" width="100%" height="110px" src={contentData.image_url} />
+              <img alt="default" width="100%" height="110px" src={contentData.image_url} />
               <div className="preview-overflow-wrap-fields" style={{ position: "absolute", bottom: "5%", left: "10%", width: "auto" }}>{contentData.title ? contentData.title : ""}</div>
             </CapRow>
             {Object.keys(mediaList).length === 1 ?
@@ -79,7 +79,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
               {contentData.title}
             </CapColumn>
             <CapColumn style={{ float: "right" }}>
-              <CapImage alt="default" width="60px" height="60px" src={contentData.image_url}/>
+              <img alt="default" width="60px" height="60px" src={contentData.image_url}/>
             </CapColumn>
           </CapRow>
         );
@@ -101,7 +101,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
           content={
             <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
               <div className="shell align-center" id="sms-preview">
-                <CapImage className="preview-image" src={wechatBody} alt="Preview is being generated"/>
+                <img className="preview-image" src={wechatBody} alt="Preview is being generated"/>
                 <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
                   <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>{this.preparePreviewData(this.props.content)}
                   </div>

package/components/TemplatePreview/_templatePreview.scss

@@ -1,262 +1,3 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
-
-.shell-lock-screen-ios{
-  display: flex;
-  flex-wrap: nowrap;
-  .lock-screen-preview{
-    margin: 0 20px 0 auto;
-    .action-text-reply{
-      position: absolute;
-      left: 34%;
-      top: 59%;
-      color: #3861ca;
-      font-weight: $FONT_WEIGHT_MEDIUM;
-    }
-    .action-text-cancel{
-      position: absolute;
-      left: 33.5%;
-      top: 66%;
-      color: #3861ca;
-      font-weight: $FONT_WEIGHT_MEDIUM;
-    }
-  }
-  .main-screen-preview{
-    margin: 0 auto 0 20px;
-  }
-  .lock-screen-preview .lock-msgContainer{
-    position: absolute;
-    top: 40%;
-    left: 25.9%;
-    width: 21.5%;
-    height: 60px;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    overflow: hidden;
-    &.wechat{
-      width: 20.5%;
-      left: 25.5%;
-    }
-    .sender-id-text{
-      position: absolute;
-      top: 16%;
-      font-size: $FONT_SIZE_VS;
-      left: 11%;
-      font-weight: $FONT_WEIGHT_MEDIUM;
-    }
-    .message-text-container{
-      width: 176px;
-      left: 11%;
-      top: 50%;
-      position: absolute;
-      text-align: left;
-      text-overflow: ellipsis;
-    }
-  }
-  .main-screen-preview .msgContainer{
-    position: absolute;
-    top: 30%;
-    left: 53%;
-    width: 42%;
-    height: 336px;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-
-    .sms-icon{
-      top: 0;
-      left: 2px;
-      width: 25px;
-      position: absolute;
-    }
-    &.sms{
-      height: 290px;
-      width: 21%;
-      .sms-icon{
-        width: 20px;
-        left: 14px;
-      }
-    }
-
-    .message-pop{
-      .unicode-disabled{
-        font-size: $FONT_SIZE_L;
-      }
-      &.sms {
-        max-height: 100%;
-        position: absolute;
-        // width: initial;
-        overflow: auto;
-        top: 0;
-        white-space: pre-wrap;
-        word-break: break-word;
-        line-height: 14px;
-        padding: 0 8px 8px 8px;
-        font-size: $FONT_SIZE_VS;
-        width: 100%;
-        font-family: 'open-sans';
-        .message-pop-item{
-          padding: 4px;
-          background: #3F51B5;
-          color: $CAP_WHITE;
-          margin-top: 8px;
-          border-radius: 4px;
-          min-height: 26px;
-          &:first-child{
-            margin-top: 0;
-          }
-        }
-      }
-      &.wechat{
-        padding: 4px;
-        background: #3F51B5;
-        position: absolute;
-        // width: initial;
-        overflow: auto;
-        top: 0;
-        left: 2%;
-        white-space: pre-wrap;
-        word-break: break-word;
-        border-radius: 4px;
-        max-height: 100%;
-        color: #FFFFFF;
-        width: 45%;
-        min-height: 26px;
-        line-height: 14px;
-        padding: 8px;
-        font-size: $FONT_SIZE_VS;
-        font-family: 'open-sans';
-      }
-    }
-  }
-}
-
-.shell-lock-screen-android{
-  display: flex;
-  flex-wrap: nowrap;
-  .lock-screen-preview{
-    margin: 0 20px 0 auto;
-    .action-text{
-      position: absolute;
-      left: 27.5%;
-      top: 54%;
-      font-size: $FONT_SIZE_VS;
-      color: #3861ca;
-      font-weight: $FONT_WEIGHT_MEDIUM;
-    }
-  }
-  .main-screen-preview{
-    margin: 0 auto 0 20px;
-  }
-  .lock-screen-preview .lock-msgContainer{
-    position: absolute;
-    top: 43%;
-    left: 25.9%;
-    width: 21.5%;
-    height: 52px;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    overflow: hidden;
-    &.wechat{
-      width: 20.5%;
-      left: 25.5%;
-    }
-    .sender-id-text{
-      position: absolute;
-      top: 14%;
-      font-size: 10px;
-      left: 9%;
-      font-weight: $FONT_WEIGHT_MEDIUM;
-    }
-    .message-text-container{
-      width: 176px;
-      left: 9%;
-      top: 43%;
-      position: absolute;
-      text-align: left;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .main-screen-preview .msgContainer{
-    position: absolute;
-    top: 30%;
-    left: 53%;
-    width: 42%;
-    height: 336px;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-
-    .sms-icon{
-      top: 0;
-      left: 2px;
-      width: 25px;
-      position: absolute;
-    }
-    &.sms{
-      height: 290px;
-      width: 21%;
-      .sms-icon{
-        width: 20px;
-        left: 14px;
-      }
-    }
-
-    .message-pop{
-      .unicode-disabled{
-        font-size: $FONT_SIZE_L;
-      }
-      &.sms {
-        max-height: 100%;
-        position: absolute;
-        // width: initial;
-        overflow: auto;
-        top: 0;
-        white-space: pre-wrap;
-        word-break: break-word;
-        line-height: 14px;
-        padding: 0 8px 8px 8px;
-        font-size: $FONT_SIZE_VS;
-        width: 100%;
-        font-family: 'open-sans';
-        .message-pop-item{
-          padding: 4px;
-          background: #3F51B5;
-          color: $CAP_WHITE;
-          margin-top: 8px;
-          border-radius: 4px;
-          min-height: 26px;
-          &:first-child{
-            margin-top: 0;
-          }
-        }
-      }
-      &:not(.sms){
-        padding: 4px;
-        background: #3F51B5;
-        position: absolute;
-        // width: initial;
-        overflow: auto;
-        top: 14px;
-        left: 2%;
-        white-space: pre-wrap;
-        word-break: break-word;
-        border-radius: 4px;
-        max-height: 100%;
-        color: $CAP_WHITE;
-        width: 45%;
-        min-height: 26px;
-        line-height: 14px;
-        padding: 8px;
-        font-size: $FONT_SIZE_VS;
-        font-family: 'open-sans';
-      }
-    }
-  }
-}
-
 .shell {
   position: relative;
   -webkit-transform: translate(-50%);
@@ -272,14 +13,6 @@
       }
   }
 
-  .cap-carousel-v2 {
-    .line-preview {
-      .message-pop {
-        margin-top: -6px;
-      }
-    }
-  }
-
   .msgContainer {
     position: absolute;
     top: 18%;
@@ -307,26 +40,26 @@
 
     .message-pop{
       .unicode-disabled{
-        font-size: $FONT_SIZE_L;
+        font-size: 16px;
       }
       &.sms {
         max-height: 100%;
         position: absolute;
         // width: initial;
         overflow: auto;
-        top: 4px;
-        left: 3%;
+        top: 0;
+        left: 17%;
         white-space: pre-wrap;
         word-break: break-word;
         line-height: 14px;
         padding: 0 8px 8px 8px;
-        font-size: $FONT_SIZE_VS;
-        width: 100%;
+        font-size: 10px;
+        width: 80%;
         font-family: 'open-sans';
         .message-pop-item{
           padding: 4px;
           background: #3F51B5;
-          color: $CAP_WHITE;
+          color: #FFFFFF;
           margin-top: 8px;
           border-radius: 4px;
           min-height: 26px;
@@ -341,14 +74,14 @@
         position: absolute;
         // width: initial;
         overflow: auto;
-        top: 4px;
-        left: 0;
+        top: 0;
+        left: 17%;
         white-space: pre-wrap;
         word-break: break-word;
         border-radius: 4px;
         max-height: 100%;
         color: #FFFFFF;
-        width: 100%;
+        width: 70%;
         min-height: 26px;
         line-height: 14px;
         padding: 8px;
@@ -379,7 +112,7 @@
       width: 100%;
       min-height: 26px;
       line-height: 15px;
-      font-size: $FONT_SIZE_VS;
+      font-size: 10px;
       .body-image{
         img{
           max-width: 100%;
@@ -392,7 +125,7 @@
   }
   .android-push-message-Container{
     .title, .body-text, .body-image, .app-name{
-      background-color: $CAP_WHITE;
+      background-color: #FFFFFF;
       color: #333333;
     }
     .app-name{
@@ -419,7 +152,7 @@
       padding: 4px;
       .action{
         line-height: 24px;
-        font-size: $FONT_SIZE_VS;
+        font-size: 10px;
         font-weight: 600;
         color: #1970DA;
         height: 12px;
@@ -434,7 +167,7 @@
       word-wrap: break-word;
     }
     .title, .body-text, .body-image, .app-name{
-      background-color: $CAP_WHITE;
+      background-color: #FFFFFF;
       color: #333333;
     }
     .body-image{
@@ -450,7 +183,7 @@
       color: #5D5D5D;
       border-bottom: solid 1px #D6D6D6;
       .material-icons{
-        font-size: $FONT_SIZE_S;
+        font-size: 12px;
         float: right;
       }
     }
@@ -539,8 +272,8 @@
 
     .msgContainer {
       position: absolute;
-      top: 20%;
-      left: 23%;
+      top: 14%;
+      left: 29%;
       width: 42%;
       height: 275px;
       display: -webkit-box;
@@ -570,17 +303,17 @@
           overflow: auto;
           top: 6%;
           left: 17%;
-          width: 100%;
+          width: 80%;
           white-space: pre-wrap;
           word-break: break-word;
           line-height: 14px;
           padding: 0 8px 8px 8px;
-          font-size: $FONT_SIZE_VS;
+          font-size: 10px;
           font-family: 'open-sans';
           .message-pop-item{
             padding: 8px;
             background: #3F51B5;
-            color: $CAP_WHITE;
+            color: #FFFFFF;
             margin-top: 8px;
             border-radius: 4px;
             min-height: 26px;
@@ -603,7 +336,7 @@
           color: #FFFFFF;
           line-height: 14px;
           font-family: "open-sans";
-          font-size: $FONT_SIZE_VS;
+          font-size: 10px;
         }
       }
     }