Updated popup design and started integrating link selector

Extracted design and base styles from image manager into generic popup
classes that can be used by other app components such as the new
popup Book/Chapter/Page link selector

@@ -69,7 +69,7 @@ module.exports = function (ngApp, events) {
              */
             function callbackAndHide(returnData) {
                 if (callback) callback(returnData);
-                $scope.showing = false;
+                $scope.hide();
             }
 
             /**
@@ -109,6 +109,7 @@ module.exports = function (ngApp, events) {
             function show(doneCallback) {
                 callback = doneCallback;
                 $scope.showing = true;
+                $('#image-manager').find('.overlay').css('display', 'flex').hide().fadeIn(240);
                 // Get initial images if they have not yet been loaded in.
                 if (!dataLoaded) {
                     fetchData();
@@ -131,6 +132,7 @@ module.exports = function (ngApp, events) {
              */
             $scope.hide = function () {
                 $scope.showing = false;
+                $('#image-manager').find('.overlay').fadeOut(240);
             };
 
             var baseUrl = window.baseUrl('/images/' + $scope.imageType + '/all/');

@@ -18,7 +18,7 @@ window.baseUrl = function(path) {
 var ngApp = angular.module('bookStack', ['ngResource', 'ngAnimate', 'ngSanitize', 'ui.sortable']);
 
 // Global Event System
-class Events {
+class EventManager {
     constructor() {
         this.listeners = {};
     }
@@ -39,12 +39,12 @@ class Events {
         return this;
     }
 };
-window.Events = new Events();
+window.Events = new EventManager();
 
 
-var services = require('./services')(ngApp, Events);
-var directives = require('./directives')(ngApp, Events);
-var controllers = require('./controllers')(ngApp, Events);
+var services = require('./services')(ngApp, window.Events);
+var directives = require('./directives')(ngApp, window.Events);
+var controllers = require('./controllers')(ngApp, window.Events);
 
 //Global jQuery Config & Extensions
 
@@ -130,6 +130,10 @@ $(function () {
         $('.entity-list.compact').find('p').not('.empty-text').slideToggle(240);
     });
 
+    // Popup close
+    $('.popup-close').click(function() {
+        $(this).closest('.overlay').fadeOut(240);
+    });
 
 });
 

@@ -95,7 +95,12 @@ var mceOptions = module.exports = {
         alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-right'},
     },
     file_browser_callback: function (field_name, url, type, win) {
+
+        // Show image manager
         window.ImageManager.showExternal(function (image) {
+
+            // Set popover link input to image url then fire change event
+            // to ensure the new value sticks
             win.document.getElementById(field_name).value = image.url;
             if ("createEvent" in document) {
                 var evt = document.createEvent("HTMLEvents");
@@ -104,6 +109,8 @@ var mceOptions = module.exports = {
             } else {
                 win.document.getElementById(field_name).fireEvent("onchange");
             }
+
+            // Replace the actively selected content with the linked image
             var html = '<a href="' + image.url + '" target="_blank">';
             html += '<img src="' + image.thumbs.display + '" alt="' + image.name + '">';
             html += '</a>';
@@ -119,6 +126,8 @@ var mceOptions = module.exports = {
     extraSetups: [],
     setup: function (editor) {
 
+        // Run additional setup actions
+        // Used by the angular side of things
         for (var i = 0; i < mceOptions.extraSetups.length; i++) {
             mceOptions.extraSetups[i](editor);
         }

 .overlay {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0, 0, 0, 0.333);
   position: fixed;
   z-index: 95536;
   width: 100%;
@@ -10,37 +10,61 @@
   left: 0;
   right: 0;
   bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  display: none;
 }
 
-.image-manager-body {
+.popup-body {
   background-color: #FFF;
   max-height: 90%;
-  width: 90%;
-  height: 90%;
+  width: 1200px;
+  height: auto;
   margin: 2% 5%;
   border-radius: 4px;
   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
   overflow: hidden;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
   z-index: 999;
   display: flex;
-  h1, h2, h3 {
-    font-weight: 300;
+  flex-direction: column;
+  &.small {
+    margin: 2% auto;
+    width: 800px;
+    max-width: 90%;
+  }
+  &:before {
+    display: flex;
+    align-self: flex-start;
   }
 }
 
-#image-manager .dropzone-container {
+.popup-header {
+  display: block;
   position: relative;
-  border: 3px dashed #DDD;
+  height: 40px;
+  .popup-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    height: 40px;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  .popup-title {
+    color: #FFF;
+    padding: 8px $-m;
+  }
 }
 
-.image-manager-bottom {
-  position: absolute;
-  bottom: 0;
-  right: 0;
+.image-manager-body {
+  min-height: 60vh;
+}
+
+#image-manager .dropzone-container {
+  position: relative;
+  border: 3px dashed #DDD;
 }
 
 .image-manager-list .image {
@@ -103,18 +127,13 @@
 
 .image-manager-sidebar {
   width: 300px;
-  height: 100%;
   margin-left: 1px;
-  padding: 0 $-l;
+  padding: $-m $-l;
+  overflow-y: auto;
   border-left: 1px solid #DDD;
-}
-
-.image-manager-close {
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: 0;
-  border-radius: 0;
+  .dropzone-container {
+    margin-top: $-m;
+  }
 }
 
 .image-manager-list {
@@ -125,7 +144,6 @@
 .image-manager-content {
   display: flex;
   flex-direction: column;
-  height: 100%;
   flex: 1;
   .container {
     width: 100%;
@@ -141,12 +159,13 @@
  * Copyright (c) 2012 Matias Meno <m@tias.me>
  */
 .dz-message {
-  font-size: 1.4em;
+  font-size: 1.2em;
+  line-height: 1.1;
   font-style: italic;
   color: #aaa;
   text-align: center;
   cursor: pointer;
-  padding: $-xl $-m;
+  padding: $-l $-m;
   transition: all ease-in-out 120ms;
 }
 

@@ -25,6 +25,10 @@ body.flexbox {
   }
 }
 
+.flex-child > div {
+  flex: 1;
+}
+
 /** Rules for all columns */
 div[class^="col-"] img {
   max-width: 100%;

@@ -12,7 +12,7 @@
 @import "animations";
 @import "tinymce";
 @import "highlightjs";
-@import "image-manager";
+@import "components";
 @import "header";
 @import "lists";
 @import "pages";

@@ -21,4 +21,16 @@
     </div>
     @include('partials/image-manager', ['imageType' => 'gallery', 'uploaded_to' => $page->id])
 
+    <div id="entity-selector-wrap">
+        <div class="overlay">
+            <div class="popup-body small flex-child">
+                <div class="popup-header primary-background">
+                    <div class="popup-title">Entity Select</div>
+                    <button class="popup-close neg button">x</button>
+                </div>
+                @include('partials/entity-selector', ['name' => 'entity-selector'])
+            </div>
+        </div>
+    </div>
+
 @stop
\ No newline at end of file