Merge pull request #327 from StarCitizenTools/dev

Various improvements

README.md

@@ -37,6 +37,7 @@ Name | Description | Values | Default
 `$wgCitizenThemeDefault` | The default theme of the skin | `auto` - switch between light and dark according to OS/browser settings; `light`; `dark` | `auto`
 `$wgCitizenEnableCollapsibleSections` | Enables or disable collapsible sections on content pages | `true` - enable; `false` - disable | `true`
 `$wgCitizenShowPageTools` | The condition of page tools visibility | `true` - always visible; `login` - visible to logged-in users; `permission` - visible to users with the right permissions | `true`
+`$wgCitizenEnableDrawerSiteStats` | Enables the site statistics in drawer menu | `true` - enable; `false` - disable | `true`
 `$wgCitizenEnableDrawerSubSearch` | Enables the drawer search box for menu entries | `true` - enable; `false` - disable | `false`
 `$wgCitizenPortalAttach` | Label of the portal to attach links to upload and special pages to | string | `first`
 `$wgCitizenThemeColor` | The color defined in the `theme-color` meta tag | Hex color code | `#131a21`

i18n/en.json

@@ -16,6 +16,11 @@
 	"citizen-search-toggle": "Toggle search",
 	"citizen-theme-toggle": "Toggle theme color",
 
+	"citizen-sitestats-articles-label": "articles",
+	"citizen-sitestats-images-label": "files",
+	"citizen-sitestats-users-label": "users",
+	"citizen-sitestats-edits-label": "edits",
+
 	"citizen-drawer-search": "Search menu",
 
 	"citizen-footer-desc": "Edit this text on MediaWiki:Citizen-footer-desc",

i18n/qqq.json

@@ -14,6 +14,10 @@
 	"citizen-personalmenu-toggle": "Tooltip of personal menu toggle",
 	"citizen-search-toggle": "Tooltip of search box toggle",
 	"citizen-theme-toggle": "Tooltip of theme color toggle",
+	"citizen-sitestats-articles-label": "Label for the article statistics",
+	"citizen-sitestats-images-label": "Label for the file statistics",
+	"citizen-sitestats-users-label": "Label for the user statistics",
+	"citizen-sitestats-edits-label": "Label for the edit statistics",
 	"citizen-drawer-search": "Placeholder and title text for search input on main menu",
 	"citizen-footer-desc": "Edit this text on MediaWiki:Citizen-footer-desc",
 	"citizen-footer-tagline": "Edit this text on MediaWiki:Citizen-footer-tagline",

includes/Partials/Drawer.php

@@ -119,9 +119,11 @@ final class Drawer extends Partial {
 			'data-portals-first' => $firstPortal,
 			'array-portals-rest' => $props,
 			'data-portals-languages' => $languages,
+			'data-drawer-sitestats' => $this->getSiteStats(),
 			'data-drawer-subsearch' => false,
 		];
 
+		// Drawer subsearch
 		if ( $this->getConfigValue( 'CitizenEnableDrawerSubSearch' ) ) {
 			$portals['data-drawer-subsearch'] = true;
 		}
@@ -129,6 +131,31 @@ final class Drawer extends Partial {
 		return $portals;
 	}
 
+	/**
+	 * Get messages used for site stats in the drawer
+	 *
+	 * @return array for use in Mustache template.
+	 */
+	private function getSiteStats() {
+		$props = [];
+
+		if ( $this->getConfigValue( 'CitizenEnableDrawerSiteStats' ) ) {
+			$stats = [ 'articles', 'images', 'users', 'edits' ];
+			$items = [];
+
+			foreach ( $stats as &$stat ) {
+				$items[] = [
+					'id' => $stat,
+					'value' => call_user_func( 'SiteStats::' . $stat ),
+					'label' => $this->skin->msg( "citizen-sitestats-$stat-label" )->text(),
+				];
+			}
+		}
+
+		$props['array-drawer-sitestats-item'] = $items;
+		return $props;
+	}
+
 	/**
 	 * Add a link to special pages and the upload form to the first portal in the drawer
 	 *

includes/SkinCitizen.php

@@ -116,6 +116,14 @@ class SkinCitizen extends SkinMustache {
 			);
 		}
 
+		// Load Citizen Drawer SiteStats module if enabled
+		if ( $this->getConfigValue( 'CitizenEnableDrawerSiteStats' ) === true ) {
+			$options['styles'] = array_merge(
+				$options['styles'],
+				[ 'skins.citizen.styles.sitestats' ]
+			);
+		}
+
 		// Load Citizen Drawer SubSearch module if enabled
 		if ( $this->getConfigValue( 'CitizenEnableDrawerSubSearch' ) === true ) {
 			$options['scripts'] = array_merge(

includes/templates/Drawer.mustache

@@ -24,6 +24,7 @@
 		<div id="mw-drawer-logo" role="banner">
 			{{>Logo}}
 		</div>
+		{{>SiteStats}}
 		{{#data-drawer-subsearch}}
 		<div id="mw-drawer-search">
 			<input

includes/templates/SiteStats.mustache

@@ -0,0 +1,13 @@
+{{!
+	
+}}
+{{#data-drawer-sitestats}}
+<div id="mw-drawer-sitestats">
+	{{#array-drawer-sitestats-item}}
+	<div class="sitestats-item" id="sitestats-{{id}}">
+		<div class="sitestats-item-value">{{value}}</div>
+		<div class="sitestats-item-label">{{label}}</div>
+	</div>
+	{{/array-drawer-sitestats-item}}
+</div>
+{{/data-drawer-sitestats}}

resources/skins.citizen.scripts.theme/theme-switcher.js

@@ -7,11 +7,25 @@
 	var prefersColorSchemeDarkQuery,
 		userTheme,
 		theme,
-		setCookieChangeTheme;
+		setCookieChangeTheme,
+		hasCookieConscent,
+		cookieOptions;
 
 	setCookieChangeTheme = function ( themeName ) {
 		try {
-			window.mw.cookie.set( 'skin-citizen-theme', themeName );
+			cookieOptions = {};
+			// The cookie is only used on the site
+			cookieOptions.sameSite = 'Strict';
+			// Check if Extension:CookieWarning is enabled
+			if ( window.mw.loader.getState( 'ext.CookieWarning' ) ) {
+				// Set the cookie as a session cookie if no conscent is given
+				hasCookieConscent = window.mw.cookie.get( 'cookiewarning_dismissed' ) === true ||
+				window.mw.user.options.get( 'cookiewarning_dismissed' ) === 1;
+				if ( !hasCookieConscent ) {
+					cookieOptions.expires = null;
+				}
+			}
+			window.mw.cookie.set( 'skin-citizen-theme', themeName, cookieOptions );
 		} catch ( e ) {
 		}
 

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

@@ -0,0 +1,32 @@
+@import '../variables.less';
+
+#mw-drawer-sitestats {
+	display: none;
+	margin-top: 10px;
+	font-size: @ui-menu-text;
+}
+
+.sitestats {
+	&-item {
+		display: flex;
+		align-items: center;
+		margin: 0 10px;
+
+		&-value {
+			color: var( --color-base--emphasized );
+			font-weight: 600;
+		}
+
+		&-label {
+			margin-left: 6px;
+			color: var( --color-base--subtle );
+			letter-spacing: 0.75px;
+		}
+	}
+}
+
+@media only screen and ( min-width: @width-breakpoint-tablet ) {
+	#mw-drawer-sitestats {
+		display: flex;
+	}
+}

resources/skins.citizen.styles/Logo.less

@@ -4,7 +4,7 @@
 	align-items: center;
 
 	.mw-logo-wordmark {
-		color: var( --color-base );
+		color: var( --color-base--emphasized );
 		font-weight: 700;
 	}
 }

skin.json

@@ -154,6 +154,15 @@
 			"features": [],
 			"styles": [ "resources/skins.citizen.styles.sections/skins.citizen.styles.sections.less" ]
 		},
+		"skins.citizen.styles.sitestats": {
+			"class": "ResourceLoaderSkinModule",
+			"targets": [
+				"desktop",
+				"mobile"
+			],
+			"features": [],
+			"styles": [ "resources/skins.citizen.styles.sitestats/skins.citizen.styles.sitestats.less" ]
+		},
 		"skins.citizen.styles.theme": {
 			"class": "ResourceLoaderSkinModule",
 			"targets": [
@@ -689,6 +698,12 @@
 			"description": "Enables or disable collapsible sections on content pages",
 			"descriptionmsg": "citizen-config-enablecollapsiblesections",
 			"public": true
+		},
+		"EnableDrawerSiteStats": {
+			"value": true,
+			"description": "Enables the site statistics in drawer menu",
+			"descriptionmsg": "citizen-config-enabledrawersitestats",
+			"public": true
 		}
 	},
 	"manifest_version": 2

skinStyles/extensions/CookieWarning/ext.CookieWarning.styles.less

@@ -7,26 +7,26 @@
 @import '../../../resources/mixins.less';
 
 .mw-cookiewarning-container {
-	overflow: hidden;
-	max-width: var( --width-breakpoint-desktop-wide );
+	width: auto;
 	justify-content: space-between;
 	padding: 0 var( --padding-page );
-	margin: 0 auto;
+	border: 1px solid var( --border-color-base );
+	margin: 10px;
 	background-color: #343a40; // dark base 70
-	border-radius: @border-radius-large @border-radius-large 0 0;
+	border-radius: @border-radius-large;
 	font-size: @content-monospace-size;
-	font-weight: normal;
 	line-height: 1.4;
-	opacity: 1;
 	.boxshadow(5);
 
 	.mw-cookiewarning-text {
 		padding: 20px 0;
+		margin-bottom: 0; // Override media styles
+		font-size: inherit;
+		font-weight: 500;
 	}
 
 	form {
 		display: flex;
-		align-items: center;
 		padding: 10px 0;
 	}
 }