feat: make category tools in acp a dropdown

add view category, view privileges into dropdown
NodeBB · Jul 27, 2020 · 24535a6 · 24535a6
1 parent 37e56d9
commit 24535a6
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 22 deletions.
diff --git a/public/language/en-GB/admin/manage/categories.json b/public/language/en-GB/admin/manage/categories.json
@@ -27,6 +27,8 @@
 	"enable": "Enable",
 	"disable": "Disable",
 	"edit": "Edit",
+	"analytics": "Analytics",
+	"view-category": "View category",
 
 	"select-category": "Select Category",
 	"set-parent-category": "Set Parent Category",

diff --git a/public/less/admin/manage/categories.less b/public/less/admin/manage/categories.less
@@ -33,7 +33,6 @@ div.categories {
 	}
 
 	li {
-		min-height: @acp-line-height;
 		margin: @acp-base-line 0;
 
 		&.placeholder {

diff --git a/public/src/admin/manage/categories.js b/public/src/admin/manage/categories.js
@@ -22,9 +22,9 @@ define('admin/manage/categories', [
 		$('button[data-action="create"]').on('click', Categories.throwCreateModal);
 
 		// Enable/Disable toggle events
-		$('.categories').on('click', 'button[data-action="toggle"]', function () {
+		$('.categories').on('click', '.category-tools [data-action="toggle"]', function () {
 			var $this = $(this);
-			var cid = $this.attr('data-cid');
+			var cid = $this.attr('data-disable-cid');
 			var parentEl = $this.parents('li[data-cid="' + cid + '"]');
 			var disabled = parentEl.hasClass('disabled');
 			var childrenEls = parentEl.find('li[data-cid]');
@@ -34,14 +34,10 @@ define('admin/manage/categories', [
 
 			parentEl.toggleClass('disabled', !disabled);
 			childrenEls.toggleClass('disabled', !disabled);
-
 			$this.translateText(!disabled ? '[[admin/manage/categories:enable]]' : '[[admin/manage/categories:disable]]');
-			$this.toggleClass('btn-primary', !disabled).toggleClass('btn-danger', disabled);
-			childrenEls.find('button[data-action="toggle"]').translateText(!disabled ? '[[admin/manage/categories:enable]]' : '[[admin/manage/categories:disable]]');
-			childrenEls.find('button[data-action="toggle"]').toggleClass('btn-primary', !disabled).toggleClass('btn-danger', disabled);
+			childrenEls.find('li a[data-action="toggle"]').translateText(!disabled ? '[[admin/manage/categories:enable]]' : '[[admin/manage/categories:disable]]');
 
 			Categories.toggle([cid].concat(childrenCids), !disabled);
-			return false;
 		});
 
 		$('.categories').on('click', '.toggle', function () {

diff --git a/src/views/admin/manage/category.tpl b/src/views/admin/manage/category.tpl
@@ -180,6 +180,9 @@
 					<a href="{config.relative_path}/admin/manage/privileges/{category.cid}" class="btn btn-info btn-block">
 						<i class="fa fa-gear"></i> [[admin/manage/privileges:edit-privileges]]
 					</a>
+					<a href="{config.relative_path}/category/{category.cid}" class="btn btn-info btn-block">
+						<i class="fa fa-eye"></i> [[admin/manage/category:view-category]]
+					</a>
 					<button class="btn btn-info btn-block copy-settings">
 						<i class="fa fa-files-o"></i> [[admin/manage/categories:copy-settings]]
 					</button>

diff --git a/src/views/admin/partials/categories/category-rows.tpl b/src/views/admin/partials/categories/category-rows.tpl
@@ -23,20 +23,25 @@
             </div>
             <div class="col-md-3">
                 <div class="clearfix pull-right text-right">
-                    <div class="btn-group">
-                        <button data-cid="{categories.cid}" data-action="toggle" data-disabled="{categories.disabled}" class="btn btn-sm <!-- IF categories.disabled -->btn-primary<!-- ELSE -->btn-danger<!-- ENDIF categories.disabled -->">
-                            <!-- IF categories.disabled -->
-                            [[admin/manage/categories:enable]]
-                            <!-- ELSE -->
-                            [[admin/manage/categories:disable]]
-                            <!-- ENDIF categories.disabled -->
-                        </button>
-                        <a href="./categories/{categories.cid}/analytics" class="btn btn-default btn-sm">
-                            <i class="fa fa-line-chart"></i>
-                        </a>
-                        <a href="./categories/{categories.cid}" class="btn btn-default btn-sm">
-                            [[admin/manage/categories:edit]]
-                        </a>
+                    <div class="btn-group category-tools">
+                        <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" type="button"><i class="fa fa-fw fa-ellipsis-h"></i></button>
+                        <ul class="dropdown-menu dropdown-menu-right">
+                            <li><a href="./categories/{categories.cid}">[[admin/manage/categories:edit]]</a></li>
+                            <li><a href="./categories/{categories.cid}/analytics">[[admin/manage/categories:analytics]]</a></li>
+                            <li><a href="{config.relative_path}/admin/manage/privileges/{categories.cid}">[[admin/manage/categories:privileges]]</a></li>
+
+                            <li><a href="{config.relative_path}/category/{categories.cid}">[[admin/manage/categories:view-category]]</a></li>
+
+                            <li>
+                                <a href="#" data-disable-cid="{categories.cid}" data-action="toggle" data-disabled="{categories.disabled}">
+                                {{{if categories.disabled}}}
+                                [[admin/manage/categories:enable]]
+                                {{{else}}}
+                                [[admin/manage/categories:disable]]
+                                {{{end}}}
+                                </a>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>