diff --git a/resources/assets/js/controllers.js b/resources/assets/js/controllers.js index 9067f6ca4..beb2fe93e 100644 --- a/resources/assets/js/controllers.js +++ b/resources/assets/js/controllers.js @@ -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/'); diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js index 3a107afa8..cc868a0ea 100644 --- a/resources/assets/js/global.js +++ b/resources/assets/js/global.js @@ -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); + }); }); diff --git a/resources/assets/js/pages/page-form.js b/resources/assets/js/pages/page-form.js index 86678a1ba..b733494fa 100644 --- a/resources/assets/js/pages/page-form.js +++ b/resources/assets/js/pages/page-form.js @@ -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 = ''; html += '' + image.name + ''; html += ''; @@ -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); } diff --git a/resources/assets/sass/_image-manager.scss b/resources/assets/sass/_components.scss similarity index 89% rename from resources/assets/sass/_image-manager.scss rename to resources/assets/sass/_components.scss index 73b3b59d6..a41277e6f 100644 --- a/resources/assets/sass/_image-manager.scss +++ b/resources/assets/sass/_components.scss @@ -1,5 +1,5 @@ .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,26 +10,56 @@ 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; + } +} + +.popup-header { + display: block; + position: relative; + 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-body { + min-height: 60vh; } #image-manager .dropzone-container { @@ -37,12 +67,6 @@ border: 3px dashed #DDD; } -.image-manager-bottom { - position: absolute; - bottom: 0; - right: 0; -} - .image-manager-list .image { display: block; position: relative; @@ -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 */ .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; } diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss index 1a1321e58..26cfc25ff 100644 --- a/resources/assets/sass/_grid.scss +++ b/resources/assets/sass/_grid.scss @@ -25,6 +25,10 @@ body.flexbox { } } +.flex-child > div { + flex: 1; +} + /** Rules for all columns */ div[class^="col-"] img { max-width: 100%; diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss index a6c364018..90b452a8e 100644 --- a/resources/assets/sass/styles.scss +++ b/resources/assets/sass/styles.scss @@ -12,7 +12,7 @@ @import "animations"; @import "tinymce"; @import "highlightjs"; -@import "image-manager"; +@import "components"; @import "header"; @import "lists"; @import "pages"; diff --git a/resources/views/pages/edit.blade.php b/resources/views/pages/edit.blade.php index 9fe6a6a19..f470d8d80 100644 --- a/resources/views/pages/edit.blade.php +++ b/resources/views/pages/edit.blade.php @@ -21,4 +21,16 @@ @include('partials/image-manager', ['imageType' => 'gallery', 'uploaded_to' => $page->id]) +
+
+
+
+
Entity Select
+ +
+ @include('partials/entity-selector', ['name' => 'entity-selector']) +
+
+
+ @stop \ No newline at end of file diff --git a/resources/views/partials/image-manager.blade.php b/resources/views/partials/image-manager.blade.php index 69928e119..1b3fb0cfb 100644 --- a/resources/views/partials/image-manager.blade.php +++ b/resources/views/partials/image-manager.blade.php @@ -1,84 +1,94 @@
-
-
+
+
-
-
-
-
All
-
Book
-
Page
+
+
Image Select
+ +
+ +
+ +
+
+
+
All
+
Book
+
Page
+
-
-
-
- - - -
-
-
-
-
- -
- - Uploaded @{{ getDate(image.created_at) | date:'mediumDate' }} +
+
+ + + +
+
+
+
+
+ +
+ + Uploaded @{{ getDate(image.created_at) | date:'mediumDate' }} +
+
Load More
-
Load More
+ +
+
+ +
+ +
+
+ + + +
+
+ + +
+
+ +
+

+ This image is used in the pages below, Click delete again to confirm you want to delete + this image. +

+
    +
  • + +
    • +
+
+ +
+
+ +
+ +
+ +
+ + + + +
+
+ + +
- - -
-

Images

- -
- -
- -
-
- - - -
-
- - -
-
- -
- -
-

- This image is used in the pages below, Click delete again to confirm you want to delete - this image. -

-
    -
  • - -
    • -
-
- -
- -
-
- -
- -
- -
\ No newline at end of file