mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-11-23 11:22:33 +01:00
Cleaned up tag edit interface
This commit is contained in:
Dan Brown
parent
b80184cd93
commit
78564ec61d
@ -60,7 +60,7 @@ class Entity extends Ownable
|
||||
*/
|
||||
public function tags()
|
||||
{
|
||||
return $this->morphMany(Tag::class, 'entity');
|
||||
return $this->morphMany(Tag::class, 'entity')->orderBy('order', 'asc');
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -4,10 +4,11 @@
|
||||
"gulp": "^3.9.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"angular": "^1.5.0-rc.0",
|
||||
"angular-animate": "^1.5.0-rc.0",
|
||||
"angular-resource": "^1.5.0-rc.0",
|
||||
"angular-sanitize": "^1.5.0-rc.0",
|
||||
"angular": "^1.5.5",
|
||||
"angular-animate": "^1.5.5",
|
||||
"angular-resource": "^1.5.5",
|
||||
"angular-sanitize": "^1.5.5",
|
||||
"angular-ui-sortable": "^0.14.0",
|
||||
"babel-runtime": "^5.8.29",
|
||||
"bootstrap-sass": "^3.0.0",
|
||||
"dropzone": "^4.0.1",
|
||||
|
||||
7
public/libs/jquery/jquery-ui.min.js
vendored
Normal file
7
public/libs/jquery/jquery-ui.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -405,6 +405,13 @@ module.exports = function (ngApp, events) {
|
||||
|
||||
const pageId = Number($attrs.pageId);
|
||||
$scope.tags = [];
|
||||
|
||||
$scope.sortOptions = {
|
||||
handle: '.handle',
|
||||
items: '> tr',
|
||||
containment: "parent",
|
||||
axis: "y"
|
||||
};
|
||||
|
||||
/**
|
||||
* Push an empty tag to the end of the scope tags.
|
||||
@ -415,6 +422,7 @@ module.exports = function (ngApp, events) {
|
||||
value: ''
|
||||
});
|
||||
}
|
||||
$scope.addEmptyTag = addEmptyTag;
|
||||
|
||||
/**
|
||||
* Get all tags for the current book and add into scope.
|
||||
@ -463,6 +471,9 @@ module.exports = function (ngApp, events) {
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Save the tags to the current page.
|
||||
*/
|
||||
$scope.saveTags = function() {
|
||||
setTagOrder();
|
||||
let postData = {tags: $scope.tags};
|
||||
@ -473,6 +484,15 @@ module.exports = function (ngApp, events) {
|
||||
})
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove a tag from the current list.
|
||||
* @param tag
|
||||
*/
|
||||
$scope.removeTag = function(tag) {
|
||||
let cIndex = $scope.tags.indexOf(tag);
|
||||
$scope.tags.splice(cIndex, 1);
|
||||
};
|
||||
|
||||
}]);
|
||||
|
||||
};
|
||||
|
||||
@ -301,6 +301,42 @@ module.exports = function (ngApp, events) {
|
||||
|
||||
}
|
||||
}
|
||||
}])
|
||||
}]);
|
||||
|
||||
ngApp.directive('toolbox', [function() {
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: function(scope, elem, attrs) {
|
||||
|
||||
// Get common elements
|
||||
const $buttons = elem.find('[tab-button]');
|
||||
const $content = elem.find('[tab-content]');
|
||||
const $toggle = elem.find('[toolbox-toggle]');
|
||||
|
||||
// Handle toolbox toggle click
|
||||
$toggle.click((e) => {
|
||||
elem.toggleClass('open');
|
||||
});
|
||||
|
||||
// Set an active tab/content by name
|
||||
function setActive(tabName, openToolbox) {
|
||||
$buttons.removeClass('active');
|
||||
$content.hide();
|
||||
$buttons.filter(`[tab-button="${tabName}"]`).addClass('active');
|
||||
$content.filter(`[tab-content="${tabName}"]`).show();
|
||||
if (openToolbox) elem.addClass('open');
|
||||
}
|
||||
|
||||
// Set the first tab content active on load
|
||||
setActive($content.first().attr('tab-content'), false);
|
||||
|
||||
// Handle tab button click
|
||||
$buttons.click(function(e) {
|
||||
let name = $(this).attr('tab-button');
|
||||
setActive(name, true);
|
||||
});
|
||||
}
|
||||
}
|
||||
}]);
|
||||
|
||||
};
|
||||
@ -5,9 +5,9 @@ var angular = require('angular');
|
||||
var ngResource = require('angular-resource');
|
||||
var ngAnimate = require('angular-animate');
|
||||
var ngSanitize = require('angular-sanitize');
|
||||
require('angular-ui-sortable');
|
||||
|
||||
var ngApp = angular.module('bookStack', ['ngResource', 'ngAnimate', 'ngSanitize']);
|
||||
|
||||
var ngApp = angular.module('bookStack', ['ngResource', 'ngAnimate', 'ngSanitize', 'ui.sortable']);
|
||||
|
||||
// Global Event System
|
||||
var Events = {
|
||||
|
||||
@ -65,6 +65,9 @@ $button-border-radius: 2px;
|
||||
&:focus, &:active {
|
||||
outline: 0;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&.neg {
|
||||
color: $negative;
|
||||
}
|
||||
|
||||
@ -21,6 +21,11 @@
|
||||
|
||||
[ng\:cloak], [ng-cloak], .ng-cloak {
|
||||
display: none !important;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
[ng-click] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Jquery Sortable Styles
|
||||
@ -206,18 +211,31 @@ $btt-size: 40px;
|
||||
// Attribute form
|
||||
.floating-toolbox {
|
||||
background-color: #FFF;
|
||||
border: 1px solid #BBB;
|
||||
border-radius: 3px;
|
||||
position: fixed;
|
||||
border: 1px solid #DDD;
|
||||
right: $-xl*2;
|
||||
top: 100px;
|
||||
z-index: 99;
|
||||
height: 800px;
|
||||
width: 480px;
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
width: 48px;
|
||||
overflow: hidden;
|
||||
align-items: stretch;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
transition: width ease-in-out 180ms;
|
||||
margin-top: -1px;
|
||||
&.open {
|
||||
width: 480px;
|
||||
}
|
||||
[toolbox-toggle] i {
|
||||
transition: transform ease-in-out 180ms;
|
||||
}
|
||||
[toolbox-toggle] {
|
||||
transition: background-color ease-in-out 180ms;
|
||||
}
|
||||
&.open [toolbox-toggle] {
|
||||
background-color: rgba(255, 0, 0, 0.29);
|
||||
}
|
||||
&.open [toolbox-toggle] i {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
> div {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
@ -229,27 +247,35 @@ $btt-size: 40px;
|
||||
flex: 0;
|
||||
}
|
||||
.tabs i {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.tabs [tab-button] {
|
||||
.tabs > span {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
padding: $-m;
|
||||
padding: $-s $-m;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.6;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
&.active {
|
||||
color: #444;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
&.open .tabs > span.active {
|
||||
color: #444;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
div[tab-content] {
|
||||
padding-bottom: 45px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
div[tab-content] .padded {
|
||||
padding: 0 $-m;
|
||||
flex: 1;
|
||||
padding-top: 0;
|
||||
}
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
margin: $-m 0 0 0;
|
||||
padding: 0 $-m;
|
||||
padding: 0 $-l $-s $-l;
|
||||
}
|
||||
.tags input {
|
||||
max-width: 100%;
|
||||
@ -266,6 +292,7 @@ $btt-size: 40px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $-s;
|
||||
height: 45px;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
@ -274,4 +301,19 @@ $btt-size: 40px;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.handle {
|
||||
user-select: none;
|
||||
cursor: move;
|
||||
color: #999;
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
[tab-content] {
|
||||
display: none;
|
||||
}
|
||||
@ -15,6 +15,7 @@
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/libs/jquery/jquery.min.js?version=2.1.4"></script>
|
||||
<script src="/libs/jquery/jquery-ui.min.js?version=1.11.4"></script>
|
||||
|
||||
@yield('head')
|
||||
|
||||
|
||||
@ -1,17 +1,34 @@
|
||||
<div class="floating-toolbox">
|
||||
|
||||
<div toolbox class="floating-toolbox">
|
||||
<div class="tabs primary-background-light">
|
||||
<span tab-button class="active"><i class="zmdi zmdi-tag"></i></span>
|
||||
<span tab-button><i class="zmdi zmdi-wrench"></i></span>
|
||||
<span toolbox-toggle><i class="zmdi zmdi-caret-left-circle"></i></span>
|
||||
<span tab-button="tags" title="Page Tags" class="active"><i class="zmdi zmdi-tag"></i></span>
|
||||
</div>
|
||||
<div tab-content ng-controller="PageTagController" page-id="{{ $page->id or 0 }}">
|
||||
<div tab-content="tags" ng-controller="PageTagController" page-id="{{ $page->id or 0 }}">
|
||||
<form ng-submit="saveTags()" >
|
||||
<h4>Page Tags</h4>
|
||||
<div class="padded tags">
|
||||
<p class="muted small">Add some tags to better categorise your content. <br> You can assign a value to a tag for more in-depth organisation.</p>
|
||||
<table class="no-style" style="width: 100%;">
|
||||
<tr ng-repeat="tag in tags">
|
||||
<td><input class="outline" type="text" ng-model="tag.name" ng-change="tagChange(tag)" ng-blur="tagBlur(tag)" placeholder="Tag"></td>
|
||||
<td><input class="outline" type="text" ng-model="tag.value" ng-change="tagChange(tag)" ng-blur="tagBlur(tag)" placeholder="Tag Value (Optional)"></td>
|
||||
<tbody ui-sortable="sortOptions" ng-model="tags" >
|
||||
<tr ng-repeat="tag in tags">
|
||||
<td width="20" ><i class="handle zmdi zmdi-menu"></i></td>
|
||||
<td><input class="outline" type="text" ng-model="tag.name" ng-change="tagChange(tag)" ng-blur="tagBlur(tag)" placeholder="Tag"></td>
|
||||
<td><input class="outline" type="text" ng-model="tag.value" ng-change="tagChange(tag)" ng-blur="tagBlur(tag)" placeholder="Tag Value (Optional)"></td>
|
||||
<td width="10" class="text-center text-neg" style="padding: 0;" ng-click="removeTag(tag)"><i class="zmdi zmdi-close"></i></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="no-style" style="width: 100%;">
|
||||
<tbody>
|
||||
<tr class="unsortable">
|
||||
<td width="34"></td>
|
||||
<td ng-click="addEmptyTag()">
|
||||
<button type="button" class="text-button">Add another tag</button>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button class="button pos" type="submit">Save Tags</button>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
.nav-tabs a.selected, .nav-tabs .tab-item.selected {
|
||||
border-bottom-color: {{ Setting::get('app-color') }};
|
||||
}
|
||||
p.primary:hover, p .primary:hover, span.primary:hover, .text-primary:hover, a, a:hover, a:focus {
|
||||
p.primary:hover, p .primary:hover, span.primary:hover, .text-primary:hover, a, a:hover, a:focus, .text-button, .text-button:hover, .text-button:focus {
|
||||
color: {{ Setting::get('app-color') }};
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user