adde page preview feature, updated page edit ui with preview option button

brain/controller/DashControl.inc.php

@@ -101,8 +101,9 @@ class DashControl
           if (Session::active()) {
             $template = "dash/page-edit.twig";
             $mode = $args["third"];
-            if ($mode == "edit") {
             $uuid = $args["fourth"];
+            switch ($mode) {
+              case "edit":
                 $customPages = (new Themes())->getCustomViews();
                 $pageOptions = [
                   "title" => "Fipamo | Edit Page",
@@ -112,13 +113,35 @@ class DashControl
                   "status" => Session::active(),
                   "views" => $customPages,
                 ];
-            } else {
+                break;
+              case "preview":
+                $config = new Settings();
+                $settings = $config->getSettings();
+                $loader = new \Twig\Loader\FilesystemLoader(
+                  "../content/themes"
+                );
+                $display = new \Twig\Environment($loader, []);
+
+                $book = new Book("../content/pages");
+                $page = $book->findPageById($uuid);
+                $pageOptions = Sorting::page($page);
+                $preview =
+                  $settings["global"]["theme"] .
+                  "/" .
+                  $page["layout"] .
+                  ".twig";
+                $html = $display->render($preview, $pageOptions);
+                $response->getBody()->write($html);
+                return $response;
+                break;
+              default:
                 $pageOptions = [
                   "title" => "Fipamo | Create Page",
                   "token" => Session::get("form_token"),
                   "mode" => $mode,
                   "status" => Session::active(),
                 ];
+                break;
             }
           } else {
             header("Location: /dashboard");

brain/controller/IndexControl.inc.php

@@ -63,6 +63,7 @@ class IndexControl
 
               break;
             default:
+              //check layout to see what page should be rendered
               $template = $settings["global"]["theme"] . "/page.twig";
               $book = new Book("../content/pages");
               $page = $book->findPageBySlug($args["third"]);

brain/utility/Sorting.inc.php

@@ -155,6 +155,7 @@ class Sorting
       "ul",
       "li",
       "i",
+      "em",
       "h1",
       "h2",
       "h3",

brain/views/dash/page-edit.twig

@@ -30,7 +30,7 @@
 {% endblock %}
 
 {% block stylesheets %}
-  <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfdfd">
+  <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfdfdf">
   {% endblock %}
 
   {% block mainContent %}

brain/views/dash/partials/options.twig

@@ -29,9 +29,16 @@
 	  </button>
 	  <button id="option-published" class="option-inactive post-option-btn" data-active="{{ published }}" title='Published'>
 		  <svg id="option-published-icon" viewbox="0 0 20 20" class="icons">
-			  <use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-eye"/>			
+			  <use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>			
 		  </svg>
 	  </button>
+	  <a href="/dashboard/page/preview/{{ uuid }}" target="_blank">
+	  	<button id="option-preview" class="option-inactive post-option-btn"  data-active="false" title='preview page'>
+			<svg id="option-preview-icon" viewbox="0 0 20 20" class="icons">
+				<use id="option-preview-icon" xlink:href="/assets/images/global/sprite.svg#entypo-eye"/>			
+			</svg>
+		</button>
+		</a>
 	  <div id="layouts">
 		  	<label>Page Layouts</label>
 			<select id="page-templates">

src/styles/main/_posts.sass

@@ -214,11 +214,16 @@
                         button:nth-child(1)
                             border-radius: 3px 0 0 3px
 
-                        button:nth-child(3)
+                        button:nth-child(4)
                             border-radius: 0 3px 3px 0
                         
+                        a
+                            button
+                                border-radius: 0 3px 3px 0 !important
+                                
+
                         button
-                            width: 33.3%
+                            width: 25%
                             height: 45px
                             @include object-transitions(0.3s)
                             margin: 0