diff --git a/README.md b/README.md index c908a970..0fbbf284 100644 --- a/README.md +++ b/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` diff --git a/i18n/en.json b/i18n/en.json index e722a694..1fddaace 100644 --- a/i18n/en.json +++ b/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", diff --git a/i18n/qqq.json b/i18n/qqq.json index 57a29d9e..bdac03a8 100644 --- a/i18n/qqq.json +++ b/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", diff --git a/includes/Partials/Drawer.php b/includes/Partials/Drawer.php index 0b2b2cd1..be4fc804 100644 --- a/includes/Partials/Drawer.php +++ b/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 * diff --git a/includes/SkinCitizen.php b/includes/SkinCitizen.php index 718d95d1..74decf6b 100644 --- a/includes/SkinCitizen.php +++ b/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( diff --git a/includes/templates/Drawer.mustache b/includes/templates/Drawer.mustache index edd15b62..2b0f8990 100644 --- a/includes/templates/Drawer.mustache +++ b/includes/templates/Drawer.mustache @@ -24,6 +24,7 @@ + {{>SiteStats}} {{#data-drawer-subsearch}} +{{/data-drawer-sitestats}} \ No newline at end of file diff --git a/resources/skins.citizen.scripts.theme/theme-switcher.js b/resources/skins.citizen.scripts.theme/theme-switcher.js index a291b8aa..b771b0d5 100644 --- a/resources/skins.citizen.scripts.theme/theme-switcher.js +++ b/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 ) { } diff --git a/resources/skins.citizen.styles.sitestats/skins.citizen.styles.sitestats.less b/resources/skins.citizen.styles.sitestats/skins.citizen.styles.sitestats.less new file mode 100644 index 00000000..acdfbfcd --- /dev/null +++ b/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; + } +} diff --git a/resources/skins.citizen.styles/Logo.less b/resources/skins.citizen.styles/Logo.less index 4793af12..336beafa 100644 --- a/resources/skins.citizen.styles/Logo.less +++ b/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; } } diff --git a/skin.json b/skin.json index a703b004..ca9a83fb 100644 --- a/skin.json +++ b/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 diff --git a/skinStyles/extensions/CookieWarning/ext.CookieWarning.styles.less b/skinStyles/extensions/CookieWarning/ext.CookieWarning.styles.less index 74b5d230..7e8fb7e7 100644 --- a/skinStyles/extensions/CookieWarning/ext.CookieWarning.styles.less +++ b/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; } }