1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-30 07:32:39 +01: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 2016-08-30 20:05:59 +01:00
parent 3f81eba13b
commit 56df64063d
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
8 changed files with 168 additions and 108 deletions

View File

@ -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/');

View File

@ -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);
});
});

View File

@ -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);
}

View File

@ -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;
}

View File

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

View File

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

View File

@ -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

View File

@ -1,84 +1,94 @@
<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="image-manager-content">
<div ng-if="imageType === 'gallery'" class="container">
<div class="image-manager-header row faded-small nav-tabs">
<div class="col-xs-4 tab-item" title="View all images" ng-class="{selected: (view=='all')}" ng-click="setView('all')"><i class="zmdi zmdi-collection-image"></i> All</div>
<div class="col-xs-4 tab-item" title="View images uploaded to this book" ng-class="{selected: (view=='book')}" ng-click="setView('book')"><i class="zmdi zmdi-book text-book"></i> Book</div>
<div class="col-xs-4 tab-item" title="View images uploaded to this page" ng-class="{selected: (view=='page')}" ng-click="setView('page')"><i class="zmdi zmdi-file-text text-page"></i> Page</div>
<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">
<div class="image-manager-header row faded-small nav-tabs">
<div class="col-xs-4 tab-item" title="View all images" ng-class="{selected: (view=='all')}" ng-click="setView('all')"><i class="zmdi zmdi-collection-image"></i> All</div>
<div class="col-xs-4 tab-item" title="View images uploaded to this book" ng-class="{selected: (view=='book')}" ng-click="setView('book')"><i class="zmdi zmdi-book text-book"></i> Book</div>
<div class="col-xs-4 tab-item" title="View images uploaded to this page" ng-class="{selected: (view=='page')}" ng-click="setView('page')"><i class="zmdi zmdi-file-text text-page"></i> Page</div>
</div>
</div>
</div>
<div ng-show="view === 'all'" >
<form ng-submit="searchImages()" class="contained-search-box">
<input type="text" placeholder="Search by image name" ng-model="searchTerm">
<button ng-class="{active: searching}" title="Clear Search" type="button" ng-click="cancelSearch()" class="text-button cancel"><i class="zmdi zmdi-close-circle-o"></i></button>
<button title="Search" class="text-button" type="submit"><i class="zmdi zmdi-search"></i></button>
</form>
</div>
<div class="image-manager-list">
<div ng-repeat="image in images">
<div class="image anim fadeIn" ng-style="{animationDelay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'}"
ng-class="{selected: (image==selectedImage)}" ng-click="imageSelect(image)">
<img ng-src="@{{image.thumbs.gallery}}" ng-attr-alt="@{{image.title}}" ng-attr-title="@{{image.name}}">
<div class="image-meta">
<span class="name" ng-bind="image.name"></span>
<span class="date">Uploaded @{{ getDate(image.created_at) | date:'mediumDate' }}</span>
<div ng-show="view === 'all'" >
<form ng-submit="searchImages()" class="contained-search-box">
<input type="text" placeholder="Search by image name" ng-model="searchTerm">
<button ng-class="{active: searching}" title="Clear Search" type="button" ng-click="cancelSearch()" class="text-button cancel"><i class="zmdi zmdi-close-circle-o"></i></button>
<button title="Search" class="text-button" type="submit"><i class="zmdi zmdi-search"></i></button>
</form>
</div>
<div class="image-manager-list">
<div ng-repeat="image in images">
<div class="image anim fadeIn" ng-style="{animationDelay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'}"
ng-class="{selected: (image==selectedImage)}" ng-click="imageSelect(image)">
<img ng-src="@{{image.thumbs.gallery}}" ng-attr-alt="@{{image.title}}" ng-attr-title="@{{image.name}}">
<div class="image-meta">
<span class="name" ng-bind="image.name"></span>
<span class="date">Uploaded @{{ getDate(image.created_at) | date:'mediumDate' }}</span>
</div>
</div>
</div>
<div class="load-more" ng-show="hasMore" ng-click="fetchData()">Load More</div>
</div>
<div class="load-more" ng-show="hasMore" ng-click="fetchData()">Load More</div>
</div>
<div class="image-manager-sidebar">
<div class="inner">
<div class="image-manager-details anim fadeIn" ng-show="selectedImage">
<form ng-submit="saveImageDetails($event)">
<div>
<a ng-href="@{{selectedImage.url}}" target="_blank" style="display: block;">
<img ng-src="@{{selectedImage.thumbs.gallery}}" ng-attr-alt="@{{selectedImage.title}}" ng-attr-title="@{{selectedImage.name}}">
</a>
</div>
<div class="form-group">
<label for="name">Image Name</label>
<input type="text" id="name" name="name" ng-model="selectedImage.name">
</div>
</form>
<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
this image.
</p>
<ul class="text-neg">
<li ng-repeat="page in dependantPages">
<a ng-href="@{{ page.url }}" target="_blank" class="text-neg" ng-bind="page.name"></a>
</li>
</ul>
</div>
<div class="clearfix">
<form class="float left" ng-submit="deleteImage($event)">
<button class="button neg"><i class="zmdi zmdi-delete"></i></button>
</form>
<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>
<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">
<hr class="even">
<form ng-submit="saveImageDetails($event)">
<div>
<a ng-href="@{{selectedImage.url}}" target="_blank" style="display: block;">
<img ng-src="@{{selectedImage.thumbs.gallery}}" ng-attr-alt="@{{selectedImage.title}}" ng-attr-title="@{{selectedImage.name}}">
</a>
</div>
<div class="form-group">
<label for="name">Image Name</label>
<input type="text" id="name" name="name" ng-model="selectedImage.name">
</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
this image.
</p>
<ul class="text-neg">
<li ng-repeat="page in dependantPages">
<a ng-href="@{{ page.url }}" target="_blank" class="text-neg" ng-bind="page.name"></a>
</li>
</ul>
</div>
<form ng-submit="deleteImage($event)">
<button class="button neg"><i class="zmdi zmdi-delete"></i>Delete Image</button>
</form>
</div>
<div class="image-manager-bottom">
<button class="button pos anim fadeIn" ng-show="selectedImage" ng-click="selectButtonClick()">
<i class="zmdi zmdi-square-right"></i>Select Image
</button>
</div>
</div>
</div>
</div>
</div>