Add a preference to magnify elements (#283)

(cherry picked from commit 21c8cc8)

CHANGELOG.md

@@ -7,6 +7,9 @@ Versions and bullets are arranged chronologically from latest to oldest.
 - Added paddings to the syntaxhighlight box. (https://github.com/femiwiki/FemiwikiSkin/issues/288)
 - Turned off the interface feature.
 - Apply link colors to the preview of 2017 editor. (https://github.com/femiwiki/FemiwikiSkin/issues/290)
+- Experimental 'Larger Elements' feature is now on testing.
+  - A registered end user can enable the feature in Special:Preference.
+  - A new configuration variable is added: `$wgFemiwikiLegacySmallElementsForAnonymousUser`. This is for enabling the larger elements for anonymous user but will soon be deprecated after finishing the test. Set this to false to enable the feature for anonymous user.
 
 ## v1.9.2
 

i18n/en.json

@@ -13,5 +13,7 @@
   "femiwiki.css": "/* CSS placed here will affect users of the Femiwiki skin */",
   "femiwiki.js": "/* Any JavaScript here will be loaded for users using the Femiwiki skin */",
   "skin-femiwiki-desktop-switch-confirm": "Editing in mobile view is not supported yet. Would {{GENDER:|you}} like to switch to desktop view?",
-  "skin-femiwiki-desktop-switch-canceled": "Editing is canceled."
+  "skin-femiwiki-desktop-switch-canceled": "Editing is canceled.",
+  "prefs-femiwiki-large-elements-label": "Use Larger Elements",
+  "prefs-femiwiki-large-elements-help": " This option lets you preview larger elements. The elements on the screen will be replaced by larger ones."
 }

i18n/ko.json

@@ -13,5 +13,7 @@
 	"skin-femiwiki-share-facebook": "페이스북",
 	"skin-femiwiki-share-twitter": "트위터",
 	"skin-femiwiki-desktop-switch-confirm": "모바일 보기에서는 이 편집이 아직 지원되지 않습니다. 데스크톱 보기로 전환하시겠습니까?",
-	"skin-femiwiki-desktop-switch-canceled": "편집이 취소되었습니다."
+	"skin-femiwiki-desktop-switch-canceled": "편집이 취소되었습니다.",
+  "prefs-femiwiki-large-elements-label": "더 큰 요소 사용",
+  "prefs-femiwiki-large-elements-help": "이 옵션은 더 큰 요소들을 미리 표시하게 합니다. 화면의 요소들이 더 큰 요소들로 교체될 것입니다."
 }

i18n/qqq.json

@@ -16,5 +16,7 @@
 	"femiwiki.css": "",
 	"femiwiki.js": "",
 	"skin-femiwiki-desktop-switch-confirm": "Confirm text for dialog to switch desktop view when the user tried to edit in mobile view",
-	"skin-femiwiki-desktop-switch-canceled": "Text for notification that is shown switching for editing is canceled."
+	"skin-femiwiki-desktop-switch-canceled": "Text for notification that is shown switching for editing is canceled.",
+  "prefs-femiwiki-large-elements-label": "Label for the checkbox to enable larger elements via Special:Preferences.",
+  "prefs-femiwiki-large-elements-help": "Detail explaining the operation of the prefs-femiwiki-large-elements-label checkbox."
 }

includes/Constants.php

@@ -22,4 +22,14 @@ final class Constants {
 	 * @var string
 	 */
 	public const CONFIG_KEY_SHOW_FOOTER_ICONS = 'FemiwikiShowFooterIcons';
+
+	/**
+	 * @var string
+	 */
+	public const CONFIG_KEY_SMALL_ELEMENTS_FOR_ANONYMOUS_USER = 'FemiwikiLegacySmallElementsForAnonymousUser';
+
+	/**
+	 * @var string
+	 */
+	public const PREF_KEY_LARGER_ELEMENTS = "FemiwikiUseLargerElements";
 }

includes/SkinFemiwiki.php

@@ -24,12 +24,23 @@ class SkinFemiwiki extends SkinMustache {
 	 * @inheritDoc
 	 */
 	public function __construct( $options = [] ) {
-		if ( $this->getUser()->isLoggedIn() ) {
+		$user = $this->getUser();
+		$loggedIn = $user->isLoggedIn();
+		$config = $this->getConfig();
+		$userOptionsLookup = MediaWikiServices::getInstance()->getUserOptionsLookup();
+
+		if ( $loggedIn ) {
 			$options['scripts'][] = 'skins.femiwiki.notifications';
 		}
 		if ( $this->shouldShowShare() ) {
 			$options['scripts'][] = 'skins.femiwiki.share';
 		}
+		if (
+			( !$loggedIn && $config->get( Constants::CONFIG_KEY_SMALL_ELEMENTS_FOR_ANONYMOUS_USER ) )
+			|| ( $loggedIn && $userOptionsLookup->getOption( $user, Constants::PREF_KEY_LARGER_ELEMENTS, '0' ) === '0' )
+			) {
+			$options['styles'][] = 'skins.femiwiki.smallElements';
+		}
 		parent::__construct( $options );
 	}
 

includes/SmallElementsHooks.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace MediaWiki\Skins\Femiwiki;
+
+class SmallElementsHooks implements \MediaWiki\Preferences\Hook\GetPreferencesHook {
+	/**
+	 * @inheritDoc
+	 */
+	public function onGetPreferences( $user, &$preferences ) {
+		$newPrefs = [
+			Constants::PREF_KEY_LARGER_ELEMENTS => [
+				'type' => 'toggle',
+				'label-message' => 'prefs-femiwiki-large-elements-label',
+				'help-message' => 'prefs-femiwiki-large-elements-help',
+				'section' => 'rendering/skin/skin-prefs',
+				'hide-if' => [ '!==', 'wpskin', Constants::SKIN_NAME ],
+			]
+		];
+
+		$skinSectionIndex = array_search( 'skin', array_keys( $preferences ) );
+		if ( $skinSectionIndex !== false ) {
+			$newSectionIndex = $skinSectionIndex + 1;
+			$preferences = array_slice( $preferences, 0, $newSectionIndex, true )
+				+ $newPrefs
+				+ array_slice( $preferences, $newSectionIndex, null, true );
+		} else {
+			$preferences += $newPrefs;
+		}
+	}
+}

resources/skins.femiwiki.moduleSkinStyles/ext.visualEditor.desktopTarget.less

@@ -1,19 +1,24 @@
 @import '../variables.less';
 
 // Prevent Code mirror glitch
-// @See https://github.com/femiwiki/skin/issues/52
+// https://github.com/femiwiki/skin/issues/52
 .ve-init-mw-desktopArticleTarget .CodeMirror.CodeMirror {
   padding: 0;
 }
 
-// @see https://github.com/femiwiki/FemiwikiSkin/issues/163
+// https://github.com/femiwiki/FemiwikiSkin/issues/163
 .ve-init-mw-progressBarWidget {
   border-color: @color-primary4;
 }
 .ve-init-mw-progressBarWidget-bar {
   background: @color-primary4;
 }
 
+// https://github.com/femiwiki/FemiwikiSkin/issues/295
+.ve-ui-overlay-global {
+  font-size: 15px;
+}
+
 html.ve-active,
 html.ve-activated,
 html.ve-deactivating {
@@ -44,7 +49,7 @@ html.ve-deactivating {
   }
 
   .oo-ui-toolbar {
-    font-size: 12px;
+    font-size: 14px;
   }
 }
 

resources/skins.femiwiki.smallElements/styles.less

@@ -0,0 +1,52 @@
+@import '../variables.less';
+
+// Override variables.less
+@font-size-root-default: 16.5;
+@content-width: 50rem;
+
+html {
+  font-size: unit(@font-size-root-default, px);
+}
+
+.nav-bar #mw-navigation {
+  max-width: @content-width - 1.3rem;
+}
+
+.fw-wiki-portals {
+  max-width: @content-width - @content-horizontal-padding;
+}
+
+#p-header,
+.mw-body,
+#p-lang,
+.mw-footer {
+  max-width: @content-width;
+}
+
+hr#content-end-bar {
+  max-width: @content-width - (@content-horizontal-padding * 2);
+}
+
+.fw-wiki-portals {
+  .mw-portlet {
+    @three-portlets-min-width: (@portal-min-width * 3) +
+      (@portal-column-gap * 2) + (@content-horizontal-padding * 2);
+    @four-portlets-min-width: (@portal-min-width * 4) + (@portal-column-gap * 3) +
+      (@content-horizontal-padding * 2);
+
+    @min-width: unit(@three-portlets-min-width * @font-size-root-default, px);
+    @max-width: unit(@four-portlets-min-width * @font-size-root-default, px);
+
+    @media (min-width: @min-width) and (max-width: @max-width) {
+      flex-basis: 40%;
+    }
+  }
+}
+
+html.ve-active,
+html.ve-activated,
+html.ve-deactivating {
+  .oo-ui-toolbar {
+    font-size: 12px !important;
+  }
+}

resources/skins.femiwiki/interface.less

@@ -424,13 +424,19 @@
 
 // End of content
 hr#content-end-bar {
+  @padding: @content-horizontal-padding * 2;
   border: 0;
   border-width: 1px;
   border-color: @color-primary2;
   background-color: #a2a9b1;
-  max-width: 47.4em;
+  max-width: @content-width - @padding;
   margin: 0 auto;
   height: 1px;
+
+  @media (max-width: @width-breakpoint-mobile-small) {
+    @padding: @content-horizontal-padding-mobile-small * 2;
+    max-width: @content-width - @padding;
+  }
 }
 
 #p-lang {

resources/variables.less

@@ -1,11 +1,12 @@
-@font-size-root-default: 16.5;
+@font-size-root-default: 19;
 
 @width-breakpoint-mobile-small: 360px;
 @width-breakpoint-mobile: 480px;
 @width-breakpoint-tablet: 640px;
 
-@content-width: 50rem;
+@content-width: 43.4rem;
 @content-horizontal-padding: 1.3rem;
+@content-horizontal-padding-mobile-small: 0.85rem;
 
 @portal-min-width: 8.8rem;
 @portal-column-gap: 0.8rem;
@@ -94,7 +95,7 @@
   padding-left: @padding;
   padding-right: @padding;
   @media (max-width: @width-breakpoint-mobile-small) {
-    @padding: 0.85rem;
+    @padding: @content-horizontal-padding-mobile-small;
     padding-left: @padding;
     padding-right: @padding;
   }

skin.json

@@ -64,6 +64,11 @@
         "print.less"
       ]
     },
+    "skins.femiwiki.smallElements": {
+      "targets": ["desktop", "mobile"],
+      "position": "top",
+      "styles": ["skins.femiwiki.smallElements/styles.less"]
+    },
     "skins.femiwiki.xeicon": {
       "class": "ResourceLoaderSkinModule",
       "features": {
@@ -172,7 +177,10 @@
     }
   },
   "HookHandlers": {
-    "default": { "class": "MediaWiki\\Skins\\Femiwiki\\Hooks" }
+    "default": { "class": "MediaWiki\\Skins\\Femiwiki\\Hooks" },
+    "SmallElements": {
+      "class": "MediaWiki\\Skins\\Femiwiki\\SmallElementsHooks"
+    }
   },
   "Hooks": {
     "BeforePageDisplay": "MediaWiki\\Skins\\Femiwiki\\Hooks::onBeforePageDisplay",
@@ -181,7 +189,8 @@
     "PersonalUrls": "MediaWiki\\Skins\\Femiwiki\\Hooks::onPersonalUrls",
     "ResourceLoaderGetConfigVars": "MediaWiki\\Skins\\Femiwiki\\Hooks::onResourceLoaderGetConfigVars",
     "UserMailerTransformContent": "MediaWiki\\Skins\\Femiwiki\\Hooks::onUserMailerTransformContent",
-    "SkinTemplateNavigation": "MediaWiki\\Skins\\Femiwiki\\Hooks::onSkinTemplateNavigation"
+    "SkinTemplateNavigation": "MediaWiki\\Skins\\Femiwiki\\Hooks::onSkinTemplateNavigation",
+    "GetPreferences": "SmallElements"
   },
   "config": {
     "FemiwikiFirebaseKey": { "value": "" },
@@ -190,7 +199,8 @@
     "FemiwikiHeadItems": { "value": false },
     "FemiwikiAddThisId": { "value": false },
     "FemiwikiUsePageLangForHeading": { "value": true },
-    "FemiwikiShowFooterIcons": { "value": false }
+    "FemiwikiShowFooterIcons": { "value": false },
+    "FemiwikiLegacySmallElementsForAnonymousUser": { "value": true }
   },
   "OOUIThemePaths": {
     "Femiwiki": {