Cleaned up tag edit interface

app/Entity.php

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

package.json

@@ -4,10 +4,11 @@
     "gulp": "^3.9.0"
   },
   "dependencies": {
-    "angular": "^1.5.0-rc.0",
+    "angular": "^1.5.5",
-    "angular-animate": "^1.5.0-rc.0",
+    "angular-animate": "^1.5.5",
-    "angular-resource": "^1.5.0-rc.0",
+    "angular-resource": "^1.5.5",
-    "angular-sanitize": "^1.5.0-rc.0",
+    "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",

resources/assets/js/controllers.js

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

resources/assets/js/directives.js

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

resources/assets/js/global.js

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

resources/assets/sass/_buttons.scss

@@ -65,6 +65,9 @@ $button-border-radius: 2px;
   &:focus, &:active {
     outline: 0;
   }
+  &:hover {
+    text-decoration: none;
+  }
   &.neg {
     color: $negative;
   }

resources/assets/sass/styles.scss

@@ -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: 1px solid #DDD;
-  border-radius: 3px;
-  position: fixed;
   right: $-xl*2;
-  top: 100px;
   z-index: 99;
-  height: 800px;
+  width: 48px;
-  width: 480px;
+  overflow: hidden;
-  overflow-y: scroll;
-  display: flex;
   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: $-s $-m;
-    padding: $-m;
+    font-size: 13.5px;
+    line-height: 1.6;
     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-    &.active {
+  }
-      color: #444;
+  &.open .tabs > span.active {
-      background-color: rgba(0, 0, 0, 0.1);
+    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;
 }

resources/views/base.blade.php

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

resources/views/pages/form-toolbox.blade.php

@@ -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 toolbox-toggle><i class="zmdi zmdi-caret-left-circle"></i></span>
-        <span tab-button><i class="zmdi zmdi-wrench"></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">
+                    <tbody ui-sortable="sortOptions" ng-model="tags" >
-                        <td><input class="outline" type="text" ng-model="tag.name" ng-change="tagChange(tag)" ng-blur="tagBlur(tag)" placeholder="Tag"></td>
+                        <tr ng-repeat="tag in tags">
-                        <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="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>

resources/views/partials/custom-styles.blade.php

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