Merge pull request #24 from humanmade/better-admin-bar-flags

Better admin bar flags

Author: tomjn

inc/admin-bar.php

@@ -32,6 +32,9 @@ function bootstrap() : void {
  */
 function enqueue_styles() {
 	$css = "
+	#wp-admin-bar-flags .ab-item {
+		cursor: pointer;
+	}
 	#wp-admin-bar-flags .ab-icon:before {
 		content: \"\\f227\";
 	}
@@ -44,10 +47,27 @@ function enqueue_styles() {
 		padding-left: 0.4em;
 		padding-bottom: 0.2em;
 	}
+	#wp-admin-bar-flags.has-active-flags > .ab-item,
+	#wp-admin-bar-flags.has-active-flags > .ab-item > .ab-icon::before { color: lightgreen }
 	#wp-admin-bar-flags .ab-submenu .optin-1.active-1 .ab-item { color: lightgreen }
 	#wp-admin-bar-flags .ab-submenu .optin-1.active-0 .ab-item {}
 	#wp-admin-bar-flags .ab-submenu .optin-0.active-1 .ab-item { color: lightgreen }
-	#wp-admin-bar-flags .ab-submenu .optin-0.active-0 .ab-item { }";
+	#wp-admin-bar-flags .ab-submenu .optin-0.active-0 .ab-item { }
+	#wp-admin-bar-flags .flag-count {
+		display: inline-block;
+		vertical-align: text-bottom;
+		box-sizing: border-box;
+		margin: 1px 0 -1px 0.5em;
+		padding: 0 5px;
+		min-width: 18px;
+		height: 18px;
+		border-radius: 9px;
+		background-color: lightgreen;
+		color: black;
+		font-size: 11px;
+		line-height: 1.6;
+		text-align: center;
+	}";
 	wp_add_inline_style( 'admin-bar', $css );
 }
 
@@ -57,12 +77,20 @@ function enqueue_styles() {
 function render() {
 	/* @var $wp_admin_bar \WP_Admin_Bar Admin bar class */
 	global $wp_admin_bar;
+
+	$available_flags = wp_list_filter( Flags::get_all(), [ 'available' => true ] );
+	$active_flags = wp_list_filter( $available_flags, [ 'active' => true ] );
+	$flag_count = ! empty( $active_flags ) ? '<span class="flag-count">' . count( $active_flags ) . '</span>' : '';
+
 	$wp_admin_bar->add_menu( [
 		'id'    => 'flags',
-		'title' => '<span class="ab-icon"></span>' . esc_html__( 'Flags', 'wp-flags' ),
+		'title' => '<span class="ab-icon"></span>' . esc_html__( 'Flags', 'wp-flags' ) . $flag_count,
+		'meta'   => [
+			'class' => $flag_count > 0 ? 'has-active-flags' : 'no-active-flags',
+		],
 	] );
 
-	array_map( __NAMESPACE__ . '\add_flag_node', wp_list_filter( Flags::get_all(), [ 'available' => true ] ) );
+	array_map( __NAMESPACE__ . '\add_flag_node', $available_flags );
 }
 
 /**