Merge pull request #51 from plausible/issue/26

improve settings page to future proof new settings #26
plausible · Sep 29, 2021 · 49eead0 · 49eead0
2 parents 3eb44df + 65b34e8
commit 49eead0
Show file tree

Hide file tree

Showing 17 changed files with 866 additions and 429 deletions.
diff --git a/assets/src/css/admin/_variables.scss b/assets/src/css/admin/_variables.scss
@@ -1 +1,3 @@
 $base-color: #5850ec;
+$white-color: #fff;
+$black-color: #1f2937;
diff --git a/assets/src/css/admin/general.scss b/assets/src/css/admin/general.scss
@@ -1,63 +1,24 @@
-.plausible-analytics-hidden {
-	display: none;
-}
-
-.plausible-analytics-show {
-	display: block;
-}
-
-.plausible-analytics-content {
-	@extend .plausible-analytics-hidden;
-}
-
-.plausible-analytics-statistics-not-loaded {
-	margin: 20px 0 0 -10px;
-	padding: 0 30px;
-	font-size: 15px;
-	line-height: 24px;
-}
-
-.plausible-analytics-header {
+.plausible-analytics-wrap {
 	display: flex;
-	align-items: center;
-	background-color: #fff;
-	padding: 0;
-	position: relative;
-	margin: 0 0 0 -20px;
-
-	.plausible-analytics-logo {
-		padding: 20px;
-		border-right: 1px solid #f1f1f1;
-
-		img {
-			width: 36px;
-			height: 100%;
-		}
-	}
 
-	.plausible-analytics-header-content {
-		display: inline-flex;
-		justify-content: space-between;
-		align-items: center;
-		width: 100%;
+	input[type='text'] {
+		background-color: #f5f5f5;
+		border: none;
+		border-radius: 5px;
+	}
 
-		.plausible-analytics-title {
-			padding: 20px;
-		}
+	input[name='shared_link'] {
+		width: 75%;
+	}
 
-		.plausible-analytics-actions {
-			display: flex;
-			margin-left: auto;
-			padding: 20px;
-		}
+	.plausible-checkbox-list {
+		margin: 3px 0;
+		display: inline-block;
 	}
-}
 
-.plausible-analytics-wrap {
-	width: 800px;
-	margin: 0 auto;
-	margin-top: 50px;
-	max-width: 100%;
+	.plausible-analytics-content {
+		width: 800px;
+	}
 
 	.plausible-analytics-admin-field {
 		background-color: #fff;
@@ -85,12 +46,16 @@
 			align-items: center;
 		}
 
+		.plausible-analytics-admin-field-body {
+			padding: 10px 0 10px 0;
+			margin: 15px 0 15px 0;
+			border-top: 1px dashed #e5e5e5;
+			border-bottom: 1px dashed #e5e5e5;
+		}
+
 		.plausible-analytics-description {
 			font-style: italic;
 			color: #989898;
-			border-top: 1px dashed #e5e5e5;
-			padding: 10px 0 0 0;
-			margin: 15px 0 0 0;
 
 			ol {
 				margin: 5px 15px;
@@ -104,3 +69,18 @@
 		}
 	}
 }
+
+.plausible-analytics-hidden {
+	display: none;
+}
+
+.plausible-analytics-show {
+	display: block;
+}
+
+.plausible-analytics-statistics-not-loaded {
+	margin: 20px 0 0 -10px;
+	padding: 0 30px;
+	font-size: 15px;
+	line-height: 24px;
+}
diff --git a/assets/src/css/admin/header.scss b/assets/src/css/admin/header.scss
@@ -0,0 +1,39 @@
+.plausible-analytics-header {
+	display: flex;
+	align-items: center;
+	background-color: #fff;
+	padding: 0;
+	position: relative;
+	margin: 0 0 0 -20px;
+	height: 60px;
+
+	.plausible-analytics-logo {
+		padding: 20px;
+		border-right: 1px solid #f1f1f1;
+
+		img {
+			width: 26px;
+			height: 100%;
+		}
+	}
+
+	.plausible-analytics-header-content {
+		display: inline-flex;
+		align-items: center;
+		width: 100%;
+
+		.plausible-analytics-title {
+			padding: 0 20px;
+
+			h1 {
+				font-size: 1.4rem;
+			}
+		}
+
+		.plausible-analytics-actions {
+			display: flex;
+			margin-left: auto;
+			padding: 20px;
+		}
+	}
+}
diff --git a/assets/src/css/admin/main.scss b/assets/src/css/admin/main.scss
@@ -1,6 +1,8 @@
 @import './_variables';
 @import './_mixins';
 @import './menu.scss';
+@import './quick-actions.scss';
+@import './header.scss';
 @import './general.scss';
 @import './switch.scss';
 @import './trigger.scss';

diff --git a/assets/src/css/admin/menu.scss b/assets/src/css/admin/menu.scss
@@ -1,3 +1,21 @@
+.plausible-analytics-header-navigation {
+	background: #fff;
+	display: flex;
+
+	a {
+		padding: 1.4rem;
+		display: flex;
+		align-items: center;
+		color: inherit;
+		text-decoration: none;
+		outline: none;
+
+		&.active {
+			font-weight: 600;
+			box-shadow: inset 0 -3px #5850ec;
+		}
+	}
+}
 .plausible-analytics-admin-menu {
 	// padding: 0 !important;
 

diff --git a/assets/src/css/admin/quick-actions.scss b/assets/src/css/admin/quick-actions.scss
@@ -0,0 +1,38 @@
+.plausible-analytics-quick-actions {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	background-color: $white-color;
+	margin-bottom: 10px;
+	border-radius: 5px;
+	border: 1px solid $base-color;
+
+	.plausible-analytics-quick-actions-title {
+		background-color: $base-color;
+		color: $white-color;
+		padding: 10px;
+		margin-right: 5px;
+	}
+
+	ul {
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		margin: 0;
+
+		li {
+			list-style: none;
+			background-color: $white-color;
+			margin: 0 8px;
+			border-radius: 25px;
+
+			a {
+				text-decoration: none;
+				color: $base-color;
+				text-transform: uppercase;
+				font-weight: 500;
+				font-size: 12px;
+			}
+		}
+	}
+}
diff --git a/assets/src/css/admin/responsive.scss b/assets/src/css/admin/responsive.scss
@@ -0,0 +1,5 @@
+@media screen and (max-width: 1024px) {
+	.plausible-analytics-content {
+		width: 100%;
+	}
+}
diff --git a/assets/src/js/admin/main.js b/assets/src/js/admin/main.js
@@ -7,57 +7,13 @@ document.addEventListener( 'DOMContentLoaded', () => {
 		return;
 	}
 
-	const tabsWrap = formElement.querySelector( '.plausible-analytics-admin-tabs' );
-	const tabs = Array.from( tabsWrap.querySelectorAll( 'a' ) );
-	const tabContents = Array.from( formElement.querySelectorAll( '.plausible-analytics-content' ) );
-
-	tabs.forEach( ( tab ) => {
-		tab.addEventListener( 'click', ( e ) => {
-			e.preventDefault();
-			const tabName = e.target.getAttribute( 'data-tab' );
-
-			tabs.map( ( tabElement ) => tabElement.classList.remove( 'active' ) );
-			tabContents.map( ( tabContent ) => tabContent.classList.remove( 'plausible-analytics-show' ) );
-
-			e.target.classList.add( 'active' );
-			formElement.querySelector( `#plausible-analytics-content-${ tabName }` ).classList.add( 'plausible-analytics-show' );
-		} );
-	} );
-
-	const customDomainElement = formElement.querySelector( 'input[name="plausible_analytics_settings[custom_domain]"]' );
-	const selfHostedAnalyticsElement = formElement.querySelector( 'input[name="plausible_analytics_settings[is_self_hosted_analytics]"]' );
-
 	saveSettings.addEventListener( 'click', ( e ) => {
 		e.preventDefault();
+		const formData = new FormData( formElement );
 
-		const formData = new FormData();
-		const spinner = formElement.querySelector( '.plausible-analytics-spinner' );
-		const domainName = formElement.querySelector( 'input[name="plausible_analytics_settings[domain_name]"]' ).value;
-		const customDomainPrefix = formElement.querySelector( 'input[name="plausible_analytics_settings[custom_domain_prefix]"]' ).value;
-		const isCustomDomain = null !== customDomainElement ? customDomainElement.checked : false;
-		const selfHostedDomain = formElement.querySelector( 'input[name="plausible_analytics_settings[self_hosted_domain]"]' ).value;
-		const isSelfHostedAnalytics = null !== selfHostedAnalyticsElement ? selfHostedAnalyticsElement.checked : false;
-		const trackAdminElement = formElement.querySelector( 'input[name="plausible_analytics_settings[track_administrator]"]:checked' );
-		const isTrackAdmin = null !== trackAdminElement ? parseInt( trackAdminElement.value ) : 0;
-		const embedAnalyticsElement = formElement.querySelector( 'input[name="plausible_analytics_settings[embed_analytics]"]:checked' );
-		const canEmbedAnalytics = null !== embedAnalyticsElement ? parseInt( embedAnalyticsElement.value ) : 0;
-		const roadBlock = null !== formElement.querySelector( '.plausible-analytics-admin-settings-roadblock' ) ? document.querySelector( '.plausible-analytics-admin-settings-roadblock' ).value : '';
-		const sharedLinkElement = formElement.querySelector( 'input[name="plausible_analytics_settings[shared_link]"]' );
-		const sharedLink = null !== sharedLinkElement ? sharedLinkElement.value : 0;
-
-		spinner.style.display = 'block';
 		saveSettings.setAttribute( 'disabled', 'disabled' );
 
 		formData.append( 'action', 'plausible_analytics_save_admin_settings' );
-		formData.append( 'roadblock', roadBlock );
-		formData.append( 'domain_name', domainName );
-		formData.append( 'custom_domain', isCustomDomain === true );
-		formData.append( 'custom_domain_prefix', customDomainPrefix );
-		formData.append( 'is_self_hosted_analytics', isSelfHostedAnalytics === true );
-		formData.append( 'self_hosted_domain', selfHostedDomain );
-		formData.append( 'embed_analytics', canEmbedAnalytics === 1 );
-		formData.append( 'shared_link', sharedLink );
-		formData.append( 'track_administrator', isTrackAdmin === 1 );
 
 		fetch(
 			ajaxurl,
@@ -74,10 +30,10 @@ document.addEventListener( 'DOMContentLoaded', () => {
 		} ).then( response => {
 			if ( response.success ) {
 				saveSettings.querySelector( 'span' ).innerText = saveSettings.getAttribute( 'data-saved-text' );
+				saveSettings.removeAttribute( 'disabled' );
 			}
 
 			setTimeout( () => {
-				spinner.style.display = 'none';
 				saveSettings.removeAttribute( 'disabled' );
 				saveSettings.querySelector( 'span' ).innerText = saveSettings.getAttribute( 'data-default-text' );
 			}, 500 );

diff --git a/readme.txt b/readme.txt
@@ -149,6 +149,11 @@ Please make sure you make a backup of your database before updating any version
 
 == Changelog ==
 
+= 1.3.0 =
+- 40-45% reduction in JS code
+- Exclude the roles editor and author [#11](https://github.com/plausible/wordpress/issues/11)
+- Improve settings page to future proof new settings [#26](https://github.com/plausible/wordpress/issues/26)
+
 = 1.2.2 =
 - Resolve conflicts with WP Rocket plugin.
 

diff --git a/src/Admin/Actions.php b/src/Admin/Actions.php
@@ -8,7 +8,7 @@
  * @subpackage Plausible Analytics
  */
 
- namespace Plausible\Analytics\WP\Admin;
+namespace Plausible\Analytics\WP\Admin;
 
 use Plausible\Analytics\WP\Includes\Helpers;
 
@@ -45,18 +45,26 @@ public function register_assets() {
 		\wp_enqueue_script( 'plausible-admin', PLAUSIBLE_ANALYTICS_PLUGIN_URL . 'assets/dist/js/plausible-admin.js', '', PLAUSIBLE_ANALYTICS_VERSION, true );
 	}
 
+	/**
+	 * Save Admin Settings.
+	 *
+	 * @since  1.3.0
+	 * @access public
+	 *
+	 * @return void
+	 */
 	public function save_admin_settings() {
-		$post_data = $_POST;
+		$post_data = Helpers::clean( $_POST );
+		$settings  = Helpers::get_settings();
 
 		// Security: Roadblock to check for unauthorized access.
 		check_admin_referer( 'plausible-analytics-settings-roadblock', 'roadblock' );
 
-		// Unset unnecessary posted data to store into database.
-		unset( $post_data['action'] );
-		unset( $post_data['roadblock'] );
+		// Prepare new settings.
+		$new_settings = wp_parse_args( $post_data['plausible_analytics_settings'], $settings );
 
 		// Save Settings.
-		update_option( 'plausible_analytics_settings', $post_data );
+		update_option( 'plausible_analytics_settings', $new_settings );
 
 		// Send response.
 		wp_send_json_success(