setting up preview panel in notifications

Author: Gabe Alvarez-Millard

Gruntfile.js

@@ -9,6 +9,7 @@ module.exports = function (grunt) {
     require('time-grunt')(grunt);
 
     //grunt.loadNpmTasks('grunt-remove');
+    require('grunt-remove')(grunt);
 
     // Define the configuration for all the tasks
     grunt.initConfig({
@@ -39,17 +40,17 @@ module.exports = function (grunt) {
                 },
                 dest: ''
             }
-        }
+        },
 
         // Remove prod's css files to force recompilation
-        /*
         remove: {
             default_options: {
                 trace: true,
-                fileList: ['<%= mautic.rootAssets %>/app.css', '<%= mautic.rootAssets %>/libraries.css']
+                fileList: ['<%= mautic.rootAssets %>/app.css', '<%= mautic.rootAssets %>/libraries.css'],
+                tasks: ['remove'],
+                dest: ''
             }
         }
-        */
     });
 
     grunt.registerTask('compile-less', [

app/bundles/CalendarBundle/Assets/css/calendar.css

@@ -1,6 +1,8 @@
-.fc-widget-header table th {padding: 8px 15px;}
+.fc-widget-header table th {
+  padding: 8px 15px;
+}
 div#calendar > .fc-toolbar {
-	border-bottom: 1px solid #ebedf0;
-	margin: -15px -15px 1em;
-	padding: 10px 15px;
-}
+  border-bottom: 1px solid #ebedf0;
+  margin: -15px -15px 1em;
+  padding: 10px 15px;
+}

app/bundles/CoreBundle/Assets/css/app.css

@@ -4370,9 +4370,6 @@ lesshat-selector { -lh-property: 0 ;
   border: 1px solid #eee;
   height: auto;
 }
-#slot_codemode .CodeMirror {
-  height: 200px;
-}
 .CodeMirror-hints {
   position: absolute;
   z-index: 9999 !important;
@@ -4716,10 +4713,6 @@ table.table > tbody > tr > td.long-text {
   vertical-align: top;
   float: none;
 }
-#dynamic-content-container .addNewDynamicContentFilter{
-  display: inline-block !important;
-}
-
 div[data-filter-container] .in-group {
   margin-left: 20px;
 }

app/bundles/NotificationBundle/Entity/Notification.php

@@ -675,4 +675,14 @@ public function setMobileSettings(array $mobileSettings)
 
         return $this;
     }
+
+    /**
+     * @param string $notificationIcon
+     *
+     * @return $this
+     */
+    public function getNotificationIcon()
+    {
+        return 'app/bundles/NotificationBundle/Assets/img/notification.svg';
+    }
 }

app/bundles/NotificationBundle/Views/Notification/form.html.php

@@ -30,16 +30,16 @@
                 <div class="tab-content pa-md">
                     <div class="tab-pane fade in active bdr-w-0" id="notification-container">
                         <div class="row">
-                            <div class="col-md-6">
-                                <?php echo $view['form']->row($form['message']); ?>
-                                <?php include("preview.html.php"); ?>
-                            </div>
                             <div class="col-md-6">
                                 <?php echo $view['form']->row($form['name']); ?>
                                 <?php echo $view['form']->row($form['heading']); ?>
+                                <?php echo $view['form']->row($form['message']); ?>
                                 <?php echo $view['form']->row($form['url']); ?>
                                 <?php echo $view['form']->row($form['button']); ?>
                             </div>
+                            <div class="col-md-6">
+                                <?php include("preview.html.php"); ?>
+                            </div>
                         </div>
                     </div>
                 </div>

app/bundles/NotificationBundle/Views/Notification/preview.html.php

@@ -10,24 +10,25 @@
 /* @var \Mautic\NotificationBundle\Entity\Notification $notification */
 $url    = $notification->getUrl();
 $button = $notification->getButton();
+$icon = $notification->getNotificationIcon();
 
 ?>
-<div class="panel panel-default">
-    <div class="panel-heading">
-        <h3 class="panel-title">
-            <?php echo $notification->getHeading()?>
-            <?php if ($url) : ?>
-            <span class="pull-right">
-                <a href="<?php echo $url; ?>" target="_blank"><span class="fa fa-external-link"></span></a>
-            </span>
-            <?php endif; ?>
-        </h3>
-    </div>
+<label>Preview</label>
+<div id="notification-preview" class="panel panel-default">
     <div class="panel-body">
-        <p><?php echo $notification->getMessage()?></p>
+        <div class="row">
+            <div class="icon height-auto text-center">
+                <img src="../../../<?php echo $icon ?>" />
+            </div>
+            <div class="text height-auto bg-white">
+                <h4><?php echo $notification->getHeading()?></h4>
+                <p><?php echo $notification->getMessage()?></p>
+                <span><?php echo $_SERVER['HTTP_HOST']; ?></span>
+            </div>
+        </div>
         <?php if ($url && $button) : ?>
-            <br>
-            <p><a href="<?php echo $url ?>" class="btn btn-primary"><?php echo $button ?></a></p>
+            <hr>
+            <a href="<?php echo $url ?>"><?php echo $button ?></a>
         <?php endif; ?>
     </div>
 </div>