Зуев Егор / wiki.dev

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
78564ec6 1 parent b80184cd

Cleaned up tag edit interface

Expand all
Inline Side-by-side
Showing 11 changed files with 147 additions and 27 deletions
......@@ -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",
......
......@@ -406,6 +406,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);
});
}
}
}]);
};
\ No newline at end of file
......
......@@ -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 {
}
&.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;
}
\ No newline at end of file
......
......@@ -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')
......
<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%;">
<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>
......