🔀 Improve settings page (#14)

* Change settings page name * Add custom css for better readability * Add line break * Remove unnessecary check * Remove unnessecary check * Update .gitignore * Update .gitignore * Update .gitignore * Fix Issue with escaping * Add collapsable for advanced options * Improve descriptions and labels * Fix validation issue * Update ReadMes
Ancocodet · May 15, 2023 · 74e92f8 · 74e92f8
1 parent dec3bf1
commit 74e92f8
Show file tree

Hide file tree

Showing 18 changed files with 197 additions and 68 deletions.
diff --git a/.distignore b/.distignore
diff --git a/.github/workflows/linting.yml b/.github/workflows/linting.yml
diff --git a/.github/workflows/package.yml b/.github/workflows/package.yml
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,12 @@
 ### Composer template
 composer.phar
 /vendor/
+/node_modules/
+/wp-env-home/
+wp-env-home/
+wp-env-home/**/*
+./wp-env-home/
+*.zip
 
 # Commit your application's lock file https://getcomposer.org/doc/01-basic-usage.md#commit-your-composer-lock-file-to-version-control
 # You may choose to ignore a library lock file http://getcomposer.org/doc/02-libraries.md#lock-file

diff --git a/.wordpress-org/icon-128x128.png b/.wordpress-org/icon-128x128.png
diff --git a/.wordpress-org/icon-256x256.png b/.wordpress-org/icon-256x256.png
diff --git a/LICENSE.md b/LICENSE.md
diff --git a/composer.json b/composer.json
diff --git a/composer.lock b/composer.lock
diff --git a/css/integrate-umami.css b/css/integrate-umami.css
@@ -0,0 +1,40 @@
+.integrate-umami-url {
+    width: 500px;
+}
+
+.integrate-umami-text {
+    width: 500px;
+}
+
+.integrate-umami-collapsed {
+    padding: 10px;
+    border: solid 1px #8c8f94;
+    border-radius: 4px;
+    background-color: rgba(245, 245, 245, 0.96);
+}
+
+.integrate-umami-collapsed .toggle, .integrate-umami-collapsed .content {
+    display: none;
+}
+
+.integrate-umami-collapsed .toggle-label::after {
+    display: block; content: "\2795";
+    position: absolute; right: 10px; top: 3px;
+    transition: all 0.4s;
+}
+
+.integrate-umami-collapsed .toggle:checked ~ .content {
+    padding: 10px;
+    display: block;
+}
+
+.integrate-umami-collapsed .toggle:checked ~ .toggle-label:after {
+    content: "\2796";
+}
+
+.integrate-umami-collapsed .toggle-label {
+    display: block;
+    font-weight: bold;
+    font-size: 16px;
+    position: relative;
+}
diff --git a/inc/class-manager.php b/inc/class-manager.php
@@ -61,7 +61,7 @@ public function render_script() {
 		if ( isset( $options['cache'] ) && $options['cache'] === 1 ) {
 			$umami_options .= 'data-cache="true" ';
 		}
-		if ( isset( $options['host_url'] ) && ! empty( $options['host_url'] ) ) {
+		if ( ! empty( $options['host_url'] ) ) {
 			$umami_options .= 'data-host="' . esc_url( $options['host_url'] ) . '" ';
 		}
 

diff --git a/inc/class-options.php b/inc/class-options.php
diff --git a/inc/class-settings.php b/inc/class-settings.php
@@ -16,10 +16,11 @@ class Settings {
 	 * Settings constructor.
 	 *
 	 * @since 0.1.0
-     * @change 0.3.3 Fix an issue with hook calls.
+	 * @change 0.3.3 Fix an issue with hook calls.
 	 */
 	public function __construct() {
 		if ( is_admin() ) {
+			add_action( 'admin_init', array( $this, 'register_styles' ) );
 			add_action( 'admin_init', array( $this, 'register_settings' ) );
 			add_action( 'admin_init', array( $this, 'load_textdomain' ) );
 			add_action( 'admin_menu', array( $this, 'add_page' ) );
@@ -35,6 +36,28 @@ public function load_textdomain() {
 		load_plugin_textdomain( 'integrate-umami' );
 	}
 
+	/**
+	 * Register styles.
+	 *
+	 * @since 0.4.0
+	 */
+	public function register_styles() {
+		wp_register_style(
+			'integrate-umami-styles',
+			plugins_url( 'css/integrate-umami.css', INTEGRATE_UMAMI_BASE_FILE ),
+			array(),
+			INTEGRATE_UMAMI_VERSION
+		);
+	}
+
+	/**
+	 * Enqueue styles.
+	 *
+	 * @since 0.4.0
+	 */
+	public function enqueue_styles() {
+		wp_enqueue_style( 'integrate-umami-styles' );
+	}
 
 	/**
 	 * Register settings
@@ -53,15 +76,18 @@ public function register_settings() {
 	 * Add umami settings page.
 	 *
 	 * @since 0.1.0
+	 * @change 0.4.0 - Changed page title.
 	 */
 	public function add_page() {
-		add_options_page(
-			__( 'WP-Umami', 'integrate-umami' ),
-			__( 'WP-Umami', 'integrate-umami' ),
+		$page = add_options_page(
+			__( 'Integrate Umami', 'integrate-umami' ),
+			__( 'Integrate Umami', 'integrate-umami' ),
 			'manage_options',
 			'integration_umami',
 			array( $this, 'render_options_page' )
 		);
+
+		add_action( "admin_print_styles-{$page}", array( $this, 'enqueue_styles' ) );
 	}
 
 	/**
@@ -84,24 +110,25 @@ public function validate_options( array $data ): array {
 			'script_url'    => esc_url_raw( $data['script_url'] ),
 			'host_url'      => esc_url_raw( $data['script_url'] ),
 			'website_id'    => sanitize_text_field( $data['website_id'] ),
-			'ignore_admins' => (int) $data['ignore_admins'],
-			'auto_track'    => (int) $data['auto_track'],
-			'do_not_track'  => (int) $data['do_not_track'],
-			'cache'         => (int) $data['cache'],
+			'ignore_admins' => (int) ( $data['ignore_admins'] ?? false ),
+			'auto_track'    => (int) ( $data['auto_track'] ?? false ),
+			'do_not_track'  => (int) ( $data['do_not_track'] ?? false ),
+			'cache'         => (int) ( $data['cache'] ?? false ),
 		);
 	}
 
 	/**
 	 * Render settings page.
 	 *
 	 * @since 0.1.0
+	 * @change 0.4.0 - Changed page title.
 	 */
 	public function render_options_page() {
 		$options = Options::get_options();
 		//phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 		?>
 			<div class="wrap" id="integration_umami">
-				<h1><?php echo esc_html__( 'WP-Umami Settings', 'integrate-umami' ); ?></h1>
+				<h1><?php echo esc_html__( 'Integrate Umami Settings', 'integrate-umami' ); ?></h1>
 				<?php include 'templates/settings-page.php'; ?>
 			</div>
 		<?php

diff --git a/inc/templates/settings-page.php b/inc/templates/settings-page.php
@@ -7,99 +7,147 @@
  *
  * @package Integrate Umami
  */
+
 ?>
 <form method="post" action="options.php" xmlns="http://www.w3.org/1999/html">
 	<?php settings_fields( 'integration_umami' ); ?>
 	<table class="form-table">
 		<tr>
 			<th scope="row">
-				<label for="integration_umami_enabled"><?php esc_html_e( 'Enabled', 'integrate-umami' ); ?></label>
+				<?php esc_html_e( 'Enabled', 'integrate-umami' ); ?>
 			</th>
 			<td>
-				<input type="checkbox" name="umami_options[enabled]" id="integration_umami_enabled"
-					   value="1" <?php checked( $options['enabled'] ); ?> />
-				<p class="description"><?php esc_html_e( 'Enable umami analytics', 'integrate-umami' ); ?></p>
+				<label for="integration_umami_enabled">
+					<input type="checkbox" name="umami_options[enabled]" id="integration_umami_enabled"
+					       value="1" <?php checked( $options['enabled'] ); ?> />
+					<?php esc_html_e( 'Enable umami analytics', 'integrate-umami' ); ?>
+				</label>
 			</td>
 		</tr>
 
 		<tr>
 			<th scope="row">
-				<label for="integration_umami_script_url"><?php esc_html_e( 'Script Url', 'integrate-umami' ); ?></label>
+				<?php esc_html_e( 'Script Url', 'integrate-umami' ); ?>
 			</th>
 			<td>
-				<input type="url" name="umami_options[script_url]" id="integration_umami_script_url"
+				<input class="integrate-umami-url" type="url" name="umami_options[script_url]" id="integration_umami_script_url"
 					   value="<?php echo esc_attr( $options['script_url'] ); ?>"/>
 				<p class="description"><?php esc_html_e( 'The url to your umami tracking script', 'integrate-umami' ); ?></p>
 			</td>
 		</tr>
 
 		<tr>
 			<th scope="row">
-				<label for="integration_umami_host_url"><?php esc_html_e( 'Host Url', 'integrate-umami' ); ?></label>
+				<?php esc_html_e( 'Host Url', 'integrate-umami' ); ?>
 			</th>
 			<td>
-				<input type="url" name="umami_options[host_url]" id="integration_umami_host_url"
+				<input class="integrate-umami-url" type="url" name="umami_options[host_url]" id="integration_umami_host_url"
 					   value="<?php echo esc_attr( $options['host_url'] ); ?>"/>
 				<p class="description"><?php esc_html_e( 'The url to your umami instanace', 'integrate-umami' ); ?></p>
 			</td>
 		</tr>
 
 		<tr>
 			<th scope="row">
-				<label for="integration_umami_website_id"><?php esc_html_e( 'Website ID', 'integrate-umami' ); ?></label>
+				<?php esc_html_e( 'Website ID', 'integrate-umami' ); ?>
 			</th>
 			<td>
-				<input type="text" name="umami_options[website_id]" id="integration_umami_website_id"
+				<input class="integrate-umami-text"  type="text" name="umami_options[website_id]" id="integration_umami_website_id"
 					   value="<?php echo esc_attr( $options['website_id'] ); ?>"/>
 				<p class="description"><?php esc_html_e( 'The umami websiteId generated by your installation', 'integrate-umami' ); ?></p>
 			</td>
 		</tr>
+	</table>
 
-		<tr>
-			<th class="row">
-				<label for="integration_umami_ignore_admins"><?php esc_html_e( 'Ignore Admins', 'integrate-umami' ); ?></label>
-			</th>
-			<td>
-				<input type="checkbox" name="umami_options[ignore_admins]" id="integration_umami_ignore_admins"
-					   value="1"
-					<?php checked( $options['ignore_admins'] ); ?> />
-				<p class="description"><?php esc_html_e( 'Disable tracking for admin users', 'integrate-umami' ); ?></p>
-			</td>
-		</tr>
+	<div class="integrate-umami-collapsed">
+		<input class="toggle" id="advanced-options" type="checkbox">
+		<label class="toggle-label" for="advanced-options"><?php esc_html_e( 'Advanced Options', 'integrate-umami' ); ?></label>
+		<div class="content">
+			<table class="form-table">
+				<tr>
+					<th class="row">
+						<?php esc_html_e( 'Ignore Admins', 'integrate-umami' ); ?>
+					</th>
+					<td>
+						<label for="integration_umami_ignore_admins">
+							<input type="checkbox" name="umami_options[ignore_admins]" id="integration_umami_ignore_admins"
+							       value="1" <?php checked( $options['ignore_admins'] ); ?> />
+							<?php esc_html_e( 'Disable tracking for admin users', 'integrate-umami' ); ?>
+						</label>
+					</td>
+				</tr>
 
-		<tr>
-			<th class="row">
-				<label for="integration_umami_auto_track"><?php esc_html_e( 'Auto Track', 'integrate-umami' ); ?></label>
-			</th>
-			<td>
-				<input type="checkbox" name="umami_options[auto_track]" id="integration_umami_auto_track" value="1"
-					<?php checked( $options['auto_track'] ); ?> />
-				<p class="description"><?php esc_html_e( 'Enable auto tracking', 'integrate-umami' ); ?></p>
-			</td>
-		</tr>
+				<tr>
+					<th class="row">
+						<?php esc_html_e( 'Auto Tracking', 'integrate-umami' ); ?>
+					</th>
+					<td>
+						<label for="integration_umami_auto_track">
+							<input type="checkbox" name="umami_options[auto_track]" id="integration_umami_auto_track"
+							       value="1" <?php checked( $options['auto_track'] ); ?> />
+							<?php esc_html_e( 'Enable the automatic events and pageviews tracking', 'integrate-umami' ); ?>
+							<p class="description">
+								<?php
+								echo wp_kses(
+									__( '<b>Note</b>: You need to add your own <a href="https://umami.is/docs/tracker-functions">Tracker functions</a> when disabled.', 'integrate-umami' ),
+									[
+										'b' => [],
+										'a' => [
+											'href' => [],
+										],
+									]
+								);
+								?>
+							</p>
+						</label>
+					</td>
+				</tr>
 
-		<tr>
-			<th class="row">
-				<label for="integration_umami_do_not_track"><?php esc_html_e( 'Do Not Track', 'integrate-umami' ); ?></label>
-			</th>
-			<td>
-				<input type="checkbox" name="umami_options[do_not_track]" id="integration_umami_do_not_track" value="1"
-					<?php checked( $options['do_not_track'] ); ?> />
-				<p class="description"><?php echo esc_html__( 'Respect visitor`s <b>Do Not Track</b> setting', 'integrate-umami' ); ?></p>
-			</td>
-		</tr>
+				<tr>
+					<th class="row">
+						<?php esc_html_e( 'Do Not Track', 'integrate-umami' ); ?>
+					</th>
+					<td>
+						<label for="integration_umami_do_not_track">
+							<input type="checkbox" name="umami_options[do_not_track]" id="integration_umami_do_not_track"
+								   value="1" <?php checked( $options['do_not_track'] ); ?> />
+							<?php
+							echo wp_kses(
+								__( 'Respect visitor`s <b>Do Not Track</b> setting', 'integrate-umami' ),
+								[
+									'b' => [],
+								]
+							);
+							?>
+						</label>
+					</td>
+				</tr>
 
-		<tr>
-			<th class="row">
-				<label for="integration_umami_cache"><?php esc_html_e( 'Cache', 'integrate-umami' ); ?></label>
-			</th>
-			<td>
-				<input type="checkbox" name="umami_options[cache]" id="integration_umami_cache" value="1"
-					<?php checked( $options['cache'] ); ?> />
-				<p class="description"><?php esc_html_e( 'Cache data for better performance', 'integrate-umami' ); ?></p>
-			</td>
-		</tr>
-	</table>
+				<tr>
+					<th class="row">
+						<?php esc_html_e( 'Cache', 'integrate-umami' ); ?>
+					</th>
+					<td>
+						<label for="integration_umami_cache">
+							<input type="checkbox" name="umami_options[cache]" id="integration_umami_cache"
+							       value="1" <?php checked( $options['cache'] ); ?> />
+							<?php esc_html_e( 'Enable caching of tracking data for better performance', 'integrate-umami' ); ?>
+							<p class="description">
+								<?php
+								echo wp_kses(
+									__( ' <b>Note</b>: This will use session storage so you may need to inform your users.', 'integrate-umami' ),
+									[
+										'b' => [],
+									]
+								);
+								?>
+							</p>
+						</label>
+					</td>
+				</tr>
+			</table>
+		</div>
+	</div>
 
 	<?php submit_button(); ?>
 </form>
diff --git a/phpcs.xml b/phpcs.xml
diff --git a/readme.md b/readme.md
@@ -2,8 +2,8 @@
 **Contributors:** [ancocodet](https://github.com/Ancocodet) <br>
 **Tags:** analytics,umami <br>
 **Requires at least:** 5.0 <br>
-**Tested up to:** 6.1.1 <br>
-**Stable tag:** 0.3.3 <br>
+**Tested up to:** 6.2 <br>
+**Stable tag:** 0.4.0 <br>
 **Requires PHP:** 7.0 <br>
 **License:** GPLv2 or later <br>
 
@@ -16,6 +16,9 @@ Umami is a simple, fast, website analytics tool for those who care about privacy
 
 ## Changelog ##
 
+- **0.4.0** - Improve Settings Page <br> The settings page has been improved to be more user friendly.
+<br>Fixed an issue with the options validation
+<br><br> 
 - **0.3.2 - Update Autoloading** <br> Updated the autoloading to use `plugin_dir_path`
 <br><br>
 - **0.3.1 - Fix Build Process** <br> Fixed an issue with the building mechanism which resulted in an unusable version