mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-01-31 17:51:46 +08:00
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
This commit is contained in:
Dan Brown
parent
3f81eba13b
commit
56df64063d
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <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
|
||||
|
|
@ -1,6 +1,13 @@
|
|||
<div id="image-manager" image-type="{{ $imageType }}" ng-controller="ImageManagerController" uploaded-to="{{ $uploaded_to or 0 }}">
|
||||
<div class="overlay anim-slide" ng-show="showing" ng-cloak ng-click="hide()">
|
||||
<div class="image-manager-body" ng-click="$event.stopPropagation()">
|
||||
<div class="overlay" ng-cloak ng-click="hide()">
|
||||
<div class="popup-body" ng-click="$event.stopPropagation()">
|
||||
|
||||
<div class="popup-header primary-background">
|
||||
<div class="popup-title">Image Select</div>
|
||||
<button class="popup-close neg button">x</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-fill image-manager-body">
|
||||
|
||||
<div class="image-manager-content">
|
||||
<div ng-if="imageType === 'gallery'" class="container">
|
||||
|
|
@ -32,14 +39,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<button class="neg button image-manager-close" ng-click="hide()">x</button>
|
||||
|
||||
<div class="image-manager-sidebar">
|
||||
<h2>Images</h2>
|
||||
<drop-zone upload-url="@{{getUploadUrl()}}" uploaded-to="@{{uploadedTo}}" event-success="uploadSuccess"></drop-zone>
|
||||
<div class="image-manager-details anim fadeIn" ng-show="selectedImage">
|
||||
<div class="inner">
|
||||
|
||||
<hr class="even">
|
||||
<div class="image-manager-details anim fadeIn" ng-show="selectedImage">
|
||||
|
||||
<form ng-submit="saveImageDetails($event)">
|
||||
<div>
|
||||
|
|
@ -53,8 +56,6 @@
|
|||
</div>
|
||||
</form>
|
||||
|
||||
<hr class="even">
|
||||
|
||||
<div ng-show="dependantPages">
|
||||
<p class="text-neg text-small">
|
||||
This image is used in the pages below, Click delete again to confirm you want to delete
|
||||
|
|
@ -67,18 +68,27 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<form ng-submit="deleteImage($event)">
|
||||
<button class="button neg"><i class="zmdi zmdi-delete"></i>Delete Image</button>
|
||||
<div class="clearfix">
|
||||
<form class="float left" ng-submit="deleteImage($event)">
|
||||
<button class="button neg"><i class="zmdi zmdi-delete"></i></button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="image-manager-bottom">
|
||||
<button class="button pos anim fadeIn" ng-show="selectedImage" ng-click="selectButtonClick()">
|
||||
<button class="button pos anim fadeIn float right" ng-show="selectedImage" ng-click="selectButtonClick()">
|
||||
<i class="zmdi zmdi-square-right"></i>Select Image
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<drop-zone upload-url="@{{getUploadUrl()}}" uploaded-to="@{{uploadedTo}}" event-success="uploadSuccess"></drop-zone>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user