feat: revamp drawer header

* wgLogo is always visible in the drawer
* Increase the size of wiki name
* Sitestats will now format large numbers into human readable formats (e.g. 12.2K, 3M, etc.)
* Sitestats now use icons instead of text as labels
* Remove wordmark for now, will revisit later

includes/Partials/Drawer.php

@@ -142,11 +142,14 @@ final class Drawer extends Partial {
 		if ( $this->getConfigValue( 'CitizenEnableDrawerSiteStats' ) ) {
 			$stats = [ 'articles', 'images', 'users', 'edits' ];
 			$items = [];
+			$fmt = new \NumberFormatter('en_US', \NumberFormatter::PADDING_POSITION);
+			$fmt->setAttribute(\NumberFormatter::ROUNDING_MODE, \NumberFormatter::ROUND_DOWN);
+			$fmt->setAttribute(\NumberFormatter::MAX_FRACTION_DIGITS, 1);
 
 			foreach ( $stats as &$stat ) {
 				$items[] = [
 					'id' => $stat,
-					'value' => number_format( call_user_func( 'SiteStats::' . $stat ) ),
+					'value' => $fmt->format( call_user_func( 'SiteStats::' . $stat ) ),
 					'label' => $this->skin->msg( "citizen-sitestats-$stat-label" )->text(),
 				];
 			}
@@ -156,6 +159,46 @@ final class Drawer extends Partial {
 		return $props;
 	}
 
+	/**
+	 * Use to convert large positive numbers in to short form like 1K+, 100K+, 199K+, 1M+, 10M+, 1B+ etc
+	 * 
+	 * @param $n
+	 * @param $precision d
+	 * @return string
+	 */
+	private function number_format_short( $n, $precision = 1 ) {
+		if ($n < 900) {
+			// 0 - 900
+			$n_format = number_format($n, $precision);
+			$suffix = '';
+		} else if ($n < 900000) {
+			// 0.9k-850k
+			$n_format = number_format($n / 1000, $precision);
+			$suffix = 'K';
+		} else if ($n < 900000000) {
+			// 0.9m-850m
+			$n_format = number_format($n / 1000000, $precision);
+			$suffix = 'M';
+		} else if ($n < 900000000000) {
+			// 0.9b-850b
+			$n_format = number_format($n / 1000000000, $precision);
+			$suffix = 'B';
+		} else {
+			// 0.9t+
+			$n_format = number_format($n / 1000000000000, $precision);
+			$suffix = 'T';
+		}
+
+	  // Remove unecessary zeroes after decimal. "1.0" -> "1"; "1.00" -> "1"
+	  // Intentionally does not affect partials, eg "1.50" -> "1.50"
+		if ( $precision > 0 ) {
+			$dotzero = '.' . str_repeat( '0', $precision );
+			$n_format = str_replace( $dotzero, '', $n_format );
+		}
+
+		return $n_format . $suffix;
+	}
+
 	/**
 	 * Add a link to special pages and the upload form to the first portal in the drawer
 	 *

resources/skins.citizen.icons/shared/folderPlaceholder-ltr.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+	<title>
+		folder placeholder
+	</title>
+	<path d="M8 2H2a2 2 0 00-2 2v2h12z"/>
+	<rect width="20" height="14" y="4" rx="2"/>
+</svg>

resources/skins.citizen.icons/shared/folderPlaceholder-rtl.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+	<title>
+		folder placeholder
+	</title>
+	<path d="M8 6h12V4a2 2 0 00-2-2h-6z"/>
+	<rect width="20" height="14" y="4" rx="2"/>
+</svg>

resources/skins.citizen.styles.sitestats/skins.citizen.styles.sitestats.less

@@ -2,31 +2,26 @@
 
 #mw-drawer-sitestats {
 	display: flex;
-	margin-top: 0.4rem;
 	font-size: @ui-menu-text;
 }
 
-.sitestats {
+.sitestats-item {
-	&-item {
+	display: flex;
-		display: flex;
+	align-items: center;
-		align-items: center;
+	margin-right: 15px;
-		margin: 0 10px;
 
-		&-value {
+	&:before {
-			color: var( --color-base--emphasized );
+		width: 14px;
-			font-weight: 600;
+		height: 14px;
-		}
+		margin-right: 7px;
-
+		background-size: contain;
-		&-label {
+		content: '';
-			margin-left: 6px;
+		opacity: var( --opacity-icon-base );
-			color: var( --color-base--subtle );
-			letter-spacing: 0.75px;
-		}
 	}
 }
 
-@media only screen and ( max-width: @width-breakpoint-tablet ) {
+.skin-citizen-dark {
-	.sitestats-item:not( #sitestats-articles ) {
+	.sitestats-item:before {
-		display: none;
+		filter: invert( 1 );
 	}
 }

resources/skins.citizen.styles/Drawer.less

@@ -104,23 +104,28 @@
 
 	&-header {
 		display: flex;
+		justify-content: center;
 		width: 100%;
 		box-sizing: border-box;
-		flex-direction: column;
 		align-items: center;
-		padding: ~'calc( var( --padding-page ) + 10px )' var( --padding-page ) 15px var( --padding-page );
+		padding: ~'calc( var( --padding-page ) + 20px )' var( --padding-page ) 15px var( --padding-page );
 		border-bottom: 1px solid var( --border-color-base );
 	}
 
 	&-logo {
 		.mw-logo-icon {
 			width: auto;
-			height: 80px;
+			height: 48px;
 		}
+	}
 
-		img.mw-logo-wordmark {
+	&-siteinfo {
-			width: auto;
+		margin: 0 20px;
-			height: 16px;
+
+		.mw-logo-wordmark {
+			margin-top: 5px;
+			color: var( --color-base--emphasized );
+			font-size: 1.5rem;
 		}
 	}
 
@@ -240,6 +245,24 @@
 		right: unset;
 		bottom: unset;
 		max-height: ~'calc(100vh - var(--margin-header-item) * 2 )';
+		align-items: flex-start;
+
+		&-header {
+			justify-content: left;
+		}
+
+		&-siteinfo {
+			.mw-logo-wordmark {
+				font-size: 2rem;
+			}
+		}
+
+		&-logo {
+			.mw-logo-icon {
+				width: auto;
+				height: 80px;
+			}
+		}
 	}
 }
 

resources/skins.citizen.styles/Logo.less

@@ -1,20 +1,3 @@
 .mw-logo {
 	display: flex;
-	flex-direction: column;
-	align-items: center;
-
-	.mw-logo-wordmark {
-		color: var( --color-base--emphasized );
-	}
-}
-
-.mw-logo-icon {
-	margin-bottom: 10px;
-}
-
-// Only show title when screen height is less than 800px
-@media ( max-height: 800px ) {
-	.mw-logo-icon {
-		display: none;
-	}
 }

resources/skins.citizen.styles/Wordmark.less

@@ -1,3 +0,0 @@
-.mw-logo-wordmark {
-	display: block;
-}

resources/skins.citizen.styles/skin.less

@@ -22,7 +22,6 @@
 	@import 'Drawer.less';
 	@import 'Siteinfo.less';
 	@import 'Logo.less';
-	@import 'Wordmark.less';
 	@import 'Personalmenu.less';
 	@import 'Searchbox.less';
 	@import 'Pagetools.less';

skin.json

@@ -34,7 +34,8 @@
 						"skins.citizen.icons.t",
 						"skins.citizen.icons.pt",
 						"skins.citizen.icons.footer",
-						"skins.citizen.icons.badges"
+						"skins.citizen.icons.badges",
+						"skins.citizen.icons.sitestats"
 					],
 					"messages": [
 						"citizen-drawer-toggle",
@@ -350,6 +351,22 @@
 				"collapse": "resources/skins.citizen.icons/shared/collapse.svg"
 			}
 		},
+		"skins.citizen.icons.sitestats": {
+			"class": "ResourceLoaderImageModule",
+			"selector": "#sitestats-{name}:before",
+			"useDataURI": false,
+			"images": {
+				"articles": "resources/skins.citizen.icons/shared/article.svg",
+				"images": {
+					"file": {
+						"ltr": "resources/skins.citizen.icons/shared/folderPlaceholder-ltr.svg",
+						"rtl": "resources/skins.citizen.icons/shared/folderPlaceholder-rtl.svg"
+					}
+				},
+				"users": "resources/skins.citizen.icons/shared/userAvatar.svg",
+				"edits": "resources/skins.citizen.icons/shared/edit.svg"
+			}
+		},
 		"skins.citizen.icons.preferences": {
 			"class": "ResourceLoaderImageModule",
 			"selector": "#citizen-pref-{name}:after",

templates/Drawer.mustache

@@ -1,5 +1,6 @@
 {{!
 	string msg-citizen-drawer-toggle The label used by the drawer button.
+	string msg-sitesubtitle the contents of the sitesubtitle message key
 }}
 <input 
 	type="checkbox" 
@@ -24,16 +25,19 @@
 		<div id="mw-drawer-logo" role="banner">
 			{{>Logo}}
 		</div>
-		{{>SiteStats}}
+		<div id="mw-drawer-siteinfo">
-		{{#data-drawer-subsearch}}
+			{{>SiteStats}}
-		<div id="mw-drawer-search">
+			<div class="mw-logo-wordmark">{{msg-sitetitle}}</div>
-			<input
+			{{#data-drawer-subsearch}}
-				type="search"
+			<div id="mw-drawer-search">
-				title="{{msg-citizen-drawer-search}}"
+				<input
-				placeholder="{{msg-citizen-drawer-search}}"
+					type="search"
-				id="mw-drawer-search-input" />
+					title="{{msg-citizen-drawer-search}}"
+					placeholder="{{msg-citizen-drawer-search}}"
+					id="mw-drawer-search-input" />
+			</div>
+			{{/data-drawer-subsearch}}
 		</div>
-		{{/data-drawer-subsearch}}
 	</header>
 	<section id="mw-drawer-menu">
 		{{#data-portals-first}}{{>Menu}}{{/data-portals-first}}

templates/Logo.mustache

@@ -17,14 +17,5 @@
 			}}{{/svg}}{{!
 		}}{{/icon}}"{{!
 		}}alt="" aria-hidden="true" height="50" width="50">
-	<span class="mw-logo-container">
-		{{#wordmark}}
-		<img class="mw-logo-wordmark" alt="{{msg-sitetitle}}"
-			src="{{src}}" width="{{width}}" height="{{height}}">
-		{{/wordmark}}
-		{{^wordmark}}
-		<span class="mw-logo-wordmark">{{msg-sitetitle}}</span>
-		{{/wordmark}}
-	</span>
 </a>
 {{/data-logos}}

templates/SiteStats.mustache

@@ -4,10 +4,7 @@
 {{#data-drawer-sitestats}}
 <div id="mw-drawer-sitestats">
 	{{#array-drawer-sitestats-item}}
-	<div class="sitestats-item" id="sitestats-{{id}}">
+	<div class="sitestats-item" id="sitestats-{{id}}" title="{{label}}">{{value}}</div>
-		<div class="sitestats-item-value">{{value}}</div>
-		<div class="sitestats-item-label">{{label}}</div>
-	</div>
 	{{/array-drawer-sitestats-item}}
 </div>
 {{/data-drawer-sitestats}}