about screen

i18n/settings/en.json

@@ -1,4 +1,13 @@
 {
+    "deputy.about": "About",
+    "deputy.about.homepage": "Homepage",
+    "deputy.about.openSource": "Source",
+    "deputy.about.contact": "Contact",
+    "deputy.about.credit": "Deputy was made with the help of the English Wikipedia Copyright Cleanup WikiProject and the Wikimedia Foundation.",
+    "deputy.about.license": "Deputy is licensed under the <a href=\"$1\">Apache License 2.0</a>. The source code for Deputy is available on <a href=\"$2\">GitHub</a>, and is free for everyone to view and suggest changes.",
+    "deputy.about.thirdParty": "Deputy is bundled with third party libraries to make development easier. All libraries have been vetted for user security and license compatibility. For more information, see the <a href=\"$1\">\"Licensing\"</a> section on Deputy's README.",
+    "deputy.about.footer": "Made with love, coffee, and the tears of copyright editors.",
+
     "deputy.settings.portlet": "Deputy preferences",
     "deputy.settings.portlet.tooltip": "Opens a dialog to modify Deputy preferences",
 

i18n/shared/en.json

@@ -1,5 +1,6 @@
 {
     "deputy.name": "Deputy",
+    "deputy.description": "Copyright cleanup and case processing tool for Wikipedia.",
 
     "deputy.ia": "Infringement Assistant",
     "deputy.ia.short": "I. Assistant",

src/css/settings.css

@@ -9,3 +9,53 @@
 .dp-mb {
 	margin-bottom: 1em;
 }
+
+.deputy-about {
+	display: flex;
+}
+
+.deputy-about > :first-child {
+	flex: 0;
+}
+
+.deputy-about > :first-child > img {
+	height: 5em;
+	width: auto;
+}
+
+.ltr .deputy-about > :first-child {
+	margin-right: 1em;
+}
+
+.rtl .deputy-about > :first-child {
+	margin-left: 1em;
+}
+
+.deputy-about > :nth-child(2) {
+	flex: 1;
+}
+
+.deputy-about > :nth-child(2) > :first-child {
+	font-weight: bold;
+	font-size: 2em;
+}
+
+.deputy-about > :nth-child(2) > :not(:first-child) {
+	margin-top: 0.5em;
+}
+
+.ltr .deputy-about > :nth-child(2) > :last-child > :not(:last-child) {
+	margin-right: 0.5em;
+}
+
+.rtl .deputy-about > :nth-child(2) > :last-child > :not(:last-child) {
+	margin-left: 0.5em;
+}
+
+.ltr .deputy-about > :nth-child(2) > :last-child {
+	text-align: right;
+}
+
+.rtl .deputy-about > :nth-child(2) > :last-child {
+	text-align: left;
+}

src/ui/config/ConfigurationAboutTabPanel.tsx

@@ -0,0 +1,94 @@
+import { h } from 'tsx-dom';
+import '../../types';
+import unwrapWidget from '../../util/unwrapWidget';
+
+let InternalConfigurationGroupTabPanel: any;
+
+/**
+ * Initializes the process element.
+ */
+function initConfigurationGroupTabPanel() {
+	InternalConfigurationGroupTabPanel = class ConfigurationGroupTabPanel
+		extends OO.ui.TabPanelLayout {
+
+		static readonly logoUrl =
+			'https://upload.wikimedia.org/wikipedia/commons/2/2b/Deputy_logo.svg';
+
+		/**
+		 * @return The {@Link Setting}s for this group.
+		 */
+		get settings() {
+			return this.config.config.all[ this.config.group ];
+		}
+
+		/**
+		 */
+		constructor() {
+			super( 'configurationGroupPage_About' );
+
+			this.$element.append( <div>
+				<div class="deputy-about">
+					<div style="flex: 0"><img src={
+						ConfigurationGroupTabPanel.logoUrl
+					} alt="Deputy logo"/></div>
+					<div style="flex: 1">
+						<div>{ mw.msg( 'deputy.name' ) }</div>
+						<div>{ mw.msg( 'deputy.description' ) }</div>
+						<div>
+							<a href="https://w.wiki/5k$q" target="_blank">{
+								unwrapWidget( new OO.ui.ButtonWidget( {
+									label: mw.msg( 'deputy.about.homepage' ),
+									flags: [ 'progressive' ]
+								} ) )
+							}</a>
+							<a href="https://github.com/ChlodAlejandro/deputy" target="_blank">{
+								unwrapWidget( new OO.ui.ButtonWidget( {
+									label: mw.msg( 'deputy.about.openSource' ),
+									flags: [ 'progressive' ]
+								} ) )
+							}</a>
+							<a href="https://w.wiki/5k$p" target="_blank">{
+								unwrapWidget( new OO.ui.ButtonWidget( {
+									label: mw.msg( 'deputy.about.contact' ),
+									flags: [ 'progressive' ]
+								} ) )
+							}</a>
+						</div>
+					</div>
+				</div>
+				<p dangerouslySetInnerHTML={ mw.msg( 'deputy.about.credit' ) }/>
+				<p dangerouslySetInnerHTML={ mw.msg( 'deputy.about.license',
+					'https://www.apache.org/licenses/LICENSE-2.0',
+					'https://github.com/ChlodAlejandro/deputy'
+				) }/>
+				<p dangerouslySetInnerHTML={ mw.msg( 'deputy.about.thirdParty',
+					'https://github.com/ChlodAlejandro/deputy#licensing'
+				) }/>
+				<p
+					style={{ fontSize: '0.9em', color: 'darkgray' }}
+					dangerouslySetInnerHTML={ mw.msg( 'deputy.about.footer' ) }
+				/>
+			</div> );
+		}
+
+		/**
+		 * Sets up the tab item
+		 */
+		setupTabItem() {
+			this.tabItem.setLabel( mw.msg( 'deputy.about' ) );
+		}
+
+	};
+}
+
+/**
+ * Creates a new ConfigurationGroupTabPanel.
+ *
+ * @return A ConfigurationGroupTabPanel object
+ */
+export default function () {
+	if ( !InternalConfigurationGroupTabPanel ) {
+		initConfigurationGroupTabPanel();
+	}
+	return new InternalConfigurationGroupTabPanel();
+}

src/ui/config/ConfigurationDialog.tsx

@@ -8,6 +8,7 @@ import openWindow from '../../wiki/util/openWindow';
 import deputySettingsEnglish from '../../../i18n/settings/en.json';
 import DeputyLanguage from '../../DeputyLanguage';
 import ConfigurationBase from '../../config/ConfigurationBase';
+import ConfigurationAboutTabPanel from './ConfigurationAboutTabPanel';
 
 interface ConfigurationDialogData {
 	config: ConfigurationBase;
@@ -69,6 +70,9 @@ function initConfigurationDialog() {
 
 			this.layout = new OO.ui.IndexLayout();
 			this.layout.addTabPanels( this.generateGroupLayouts() );
+			if ( this.config instanceof UserConfiguration ) {
+				this.layout.addTabPanels( [ ConfigurationAboutTabPanel() ] );
+			}
 			this.$body.append( this.layout.$element );
 		}