Skip to content

Commit 74e92f8

Browse files
AncocodetAncocodet
authored
🔀 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
1 parent dec3bf1 commit 74e92f8

18 files changed

+197
-68
lines changed

‎.distignore

100644100755
File mode changed.

‎.github/workflows/linting.yml

100644100755
File mode changed.

‎.github/workflows/package.yml

100644100755
File mode changed.

‎.gitignore

100644100755
+6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
### Composer template
22
composer.phar
33
/vendor/
4+
/node_modules/
5+
/wp-env-home/
6+
wp-env-home/
7+
wp-env-home/**/*
8+
./wp-env-home/
9+
*.zip
410

511
# Commit your application's lock file https://getcomposer.org/doc/01-basic-usage.md#commit-your-composer-lock-file-to-version-control
612
# You may choose to ignore a library lock file http://getcomposer.org/doc/02-libraries.md#lock-file

‎.wordpress-org/icon-128x128.png

100644100755
File mode changed.

‎.wordpress-org/icon-256x256.png

100644100755
File mode changed.

‎LICENSE.md

100644100755
File mode changed.

‎composer.json

100644100755
File mode changed.

‎composer.lock

100644100755
File mode changed.

‎css/integrate-umami.css

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.integrate-umami-url {
2+
width: 500px;
3+
}
4+
5+
.integrate-umami-text {
6+
width: 500px;
7+
}
8+
9+
.integrate-umami-collapsed {
10+
padding: 10px;
11+
border: solid 1px #8c8f94;
12+
border-radius: 4px;
13+
background-color: rgba(245, 245, 245, 0.96);
14+
}
15+
16+
.integrate-umami-collapsed .toggle, .integrate-umami-collapsed .content {
17+
display: none;
18+
}
19+
20+
.integrate-umami-collapsed .toggle-label::after {
21+
display: block; content: "\2795";
22+
position: absolute; right: 10px; top: 3px;
23+
transition: all 0.4s;
24+
}
25+
26+
.integrate-umami-collapsed .toggle:checked ~ .content {
27+
padding: 10px;
28+
display: block;
29+
}
30+
31+
.integrate-umami-collapsed .toggle:checked ~ .toggle-label:after {
32+
content: "\2796";
33+
}
34+
35+
.integrate-umami-collapsed .toggle-label {
36+
display: block;
37+
font-weight: bold;
38+
font-size: 16px;
39+
position: relative;
40+
}

‎inc/class-manager.php

100644100755
+1-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ public function render_script() {
6161
if ( isset( $options['cache'] ) && $options['cache'] === 1 ) {
6262
$umami_options .= 'data-cache="true" ';
6363
}
64-
if ( isset( $options['host_url'] ) && ! empty( $options['host_url'] ) ) {
64+
if ( ! empty( $options['host_url'] ) ) {
6565
$umami_options .= 'data-host="' . esc_url( $options['host_url'] ) . '" ';
6666
}
6767

‎inc/class-options.php

100644100755
File mode changed.

‎inc/class-settings.php

100644100755
+36-9
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,11 @@ class Settings {
1616
* Settings constructor.
1717
*
1818
* @since 0.1.0
19-
* @change 0.3.3 Fix an issue with hook calls.
19+
* @change 0.3.3 Fix an issue with hook calls.
2020
*/
2121
public function __construct() {
2222
if ( is_admin() ) {
23+
add_action( 'admin_init', array( $this, 'register_styles' ) );
2324
add_action( 'admin_init', array( $this, 'register_settings' ) );
2425
add_action( 'admin_init', array( $this, 'load_textdomain' ) );
2526
add_action( 'admin_menu', array( $this, 'add_page' ) );
@@ -35,6 +36,28 @@ public function load_textdomain() {
3536
load_plugin_textdomain( 'integrate-umami' );
3637
}
3738

39+
/**
40+
* Register styles.
41+
*
42+
* @since 0.4.0
43+
*/
44+
public function register_styles() {
45+
wp_register_style(
46+
'integrate-umami-styles',
47+
plugins_url( 'css/integrate-umami.css', INTEGRATE_UMAMI_BASE_FILE ),
48+
array(),
49+
INTEGRATE_UMAMI_VERSION
50+
);
51+
}
52+
53+
/**
54+
* Enqueue styles.
55+
*
56+
* @since 0.4.0
57+
*/
58+
public function enqueue_styles() {
59+
wp_enqueue_style( 'integrate-umami-styles' );
60+
}
3861

3962
/**
4063
* Register settings
@@ -53,15 +76,18 @@ public function register_settings() {
5376
* Add umami settings page.
5477
*
5578
* @since 0.1.0
79+
* @change 0.4.0 - Changed page title.
5680
*/
5781
public function add_page() {
58-
add_options_page(
59-
__( 'WP-Umami', 'integrate-umami' ),
60-
__( 'WP-Umami', 'integrate-umami' ),
82+
$page = add_options_page(
83+
__( 'Integrate Umami', 'integrate-umami' ),
84+
__( 'Integrate Umami', 'integrate-umami' ),
6185
'manage_options',
6286
'integration_umami',
6387
array( $this, 'render_options_page' )
6488
);
89+
90+
add_action( "admin_print_styles-{$page}", array( $this, 'enqueue_styles' ) );
6591
}
6692

6793
/**
@@ -84,24 +110,25 @@ public function validate_options( array $data ): array {
84110
'script_url' => esc_url_raw( $data['script_url'] ),
85111
'host_url' => esc_url_raw( $data['script_url'] ),
86112
'website_id' => sanitize_text_field( $data['website_id'] ),
87-
'ignore_admins' => (int) $data['ignore_admins'],
88-
'auto_track' => (int) $data['auto_track'],
89-
'do_not_track' => (int) $data['do_not_track'],
90-
'cache' => (int) $data['cache'],
113+
'ignore_admins' => (int) ( $data['ignore_admins'] ?? false ),
114+
'auto_track' => (int) ( $data['auto_track'] ?? false ),
115+
'do_not_track' => (int) ( $data['do_not_track'] ?? false ),
116+
'cache' => (int) ( $data['cache'] ?? false ),
91117
);
92118
}
93119

94120
/**
95121
* Render settings page.
96122
*
97123
* @since 0.1.0
124+
* @change 0.4.0 - Changed page title.
98125
*/
99126
public function render_options_page() {
100127
$options = Options::get_options();
101128
//phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
102129
?>
103130
<div class="wrap" id="integration_umami">
104-
<h1><?php echo esc_html__( 'WP-Umami Settings', 'integrate-umami' ); ?></h1>
131+
<h1><?php echo esc_html__( 'Integrate Umami Settings', 'integrate-umami' ); ?></h1>
105132
<?php include 'templates/settings-page.php'; ?>
106133
</div>
107134
<?php

‎inc/templates/settings-page.php

100644100755
+100-52
Original file line numberDiff line numberDiff line change
@@ -7,99 +7,147 @@
77
*
88
* @package Integrate Umami
99
*/
10+
1011
?>
1112
<form method="post" action="options.php" xmlns="http://www.w3.org/1999/html">
1213
<?php settings_fields( 'integration_umami' ); ?>
1314
<table class="form-table">
1415
<tr>
1516
<th scope="row">
16-
<label for="integration_umami_enabled"><?php esc_html_e( 'Enabled', 'integrate-umami' ); ?></label>
17+
<?php esc_html_e( 'Enabled', 'integrate-umami' ); ?>
1718
</th>
1819
<td>
19-
<input type="checkbox" name="umami_options[enabled]" id="integration_umami_enabled"
20-
value="1" <?php checked( $options['enabled'] ); ?> />
21-
<p class="description"><?php esc_html_e( 'Enable umami analytics', 'integrate-umami' ); ?></p>
20+
<label for="integration_umami_enabled">
21+
<input type="checkbox" name="umami_options[enabled]" id="integration_umami_enabled"
22+
value="1" <?php checked( $options['enabled'] ); ?> />
23+
<?php esc_html_e( 'Enable umami analytics', 'integrate-umami' ); ?>
24+
</label>
2225
</td>
2326
</tr>
2427

2528
<tr>
2629
<th scope="row">
27-
<label for="integration_umami_script_url"><?php esc_html_e( 'Script Url', 'integrate-umami' ); ?></label>
30+
<?php esc_html_e( 'Script Url', 'integrate-umami' ); ?>
2831
</th>
2932
<td>
30-
<input type="url" name="umami_options[script_url]" id="integration_umami_script_url"
33+
<input class="integrate-umami-url" type="url" name="umami_options[script_url]" id="integration_umami_script_url"
3134
value="<?php echo esc_attr( $options['script_url'] ); ?>"/>
3235
<p class="description"><?php esc_html_e( 'The url to your umami tracking script', 'integrate-umami' ); ?></p>
3336
</td>
3437
</tr>
3538

3639
<tr>
3740
<th scope="row">
38-
<label for="integration_umami_host_url"><?php esc_html_e( 'Host Url', 'integrate-umami' ); ?></label>
41+
<?php esc_html_e( 'Host Url', 'integrate-umami' ); ?>
3942
</th>
4043
<td>
41-
<input type="url" name="umami_options[host_url]" id="integration_umami_host_url"
44+
<input class="integrate-umami-url" type="url" name="umami_options[host_url]" id="integration_umami_host_url"
4245
value="<?php echo esc_attr( $options['host_url'] ); ?>"/>
4346
<p class="description"><?php esc_html_e( 'The url to your umami instanace', 'integrate-umami' ); ?></p>
4447
</td>
4548
</tr>
4649

4750
<tr>
4851
<th scope="row">
49-
<label for="integration_umami_website_id"><?php esc_html_e( 'Website ID', 'integrate-umami' ); ?></label>
52+
<?php esc_html_e( 'Website ID', 'integrate-umami' ); ?>
5053
</th>
5154
<td>
52-
<input type="text" name="umami_options[website_id]" id="integration_umami_website_id"
55+
<input class="integrate-umami-text" type="text" name="umami_options[website_id]" id="integration_umami_website_id"
5356
value="<?php echo esc_attr( $options['website_id'] ); ?>"/>
5457
<p class="description"><?php esc_html_e( 'The umami websiteId generated by your installation', 'integrate-umami' ); ?></p>
5558
</td>
5659
</tr>
60+
</table>
5761

58-
<tr>
59-
<th class="row">
60-
<label for="integration_umami_ignore_admins"><?php esc_html_e( 'Ignore Admins', 'integrate-umami' ); ?></label>
61-
</th>
62-
<td>
63-
<input type="checkbox" name="umami_options[ignore_admins]" id="integration_umami_ignore_admins"
64-
value="1"
65-
<?php checked( $options['ignore_admins'] ); ?> />
66-
<p class="description"><?php esc_html_e( 'Disable tracking for admin users', 'integrate-umami' ); ?></p>
67-
</td>
68-
</tr>
62+
<div class="integrate-umami-collapsed">
63+
<input class="toggle" id="advanced-options" type="checkbox">
64+
<label class="toggle-label" for="advanced-options"><?php esc_html_e( 'Advanced Options', 'integrate-umami' ); ?></label>
65+
<div class="content">
66+
<table class="form-table">
67+
<tr>
68+
<th class="row">
69+
<?php esc_html_e( 'Ignore Admins', 'integrate-umami' ); ?>
70+
</th>
71+
<td>
72+
<label for="integration_umami_ignore_admins">
73+
<input type="checkbox" name="umami_options[ignore_admins]" id="integration_umami_ignore_admins"
74+
value="1" <?php checked( $options['ignore_admins'] ); ?> />
75+
<?php esc_html_e( 'Disable tracking for admin users', 'integrate-umami' ); ?>
76+
</label>
77+
</td>
78+
</tr>
6979

70-
<tr>
71-
<th class="row">
72-
<label for="integration_umami_auto_track"><?php esc_html_e( 'Auto Track', 'integrate-umami' ); ?></label>
73-
</th>
74-
<td>
75-
<input type="checkbox" name="umami_options[auto_track]" id="integration_umami_auto_track" value="1"
76-
<?php checked( $options['auto_track'] ); ?> />
77-
<p class="description"><?php esc_html_e( 'Enable auto tracking', 'integrate-umami' ); ?></p>
78-
</td>
79-
</tr>
80+
<tr>
81+
<th class="row">
82+
<?php esc_html_e( 'Auto Tracking', 'integrate-umami' ); ?>
83+
</th>
84+
<td>
85+
<label for="integration_umami_auto_track">
86+
<input type="checkbox" name="umami_options[auto_track]" id="integration_umami_auto_track"
87+
value="1" <?php checked( $options['auto_track'] ); ?> />
88+
<?php esc_html_e( 'Enable the automatic events and pageviews tracking', 'integrate-umami' ); ?>
89+
<p class="description">
90+
<?php
91+
echo wp_kses(
92+
__( '<b>Note</b>: You need to add your own <a href="https://umami.is/docs/tracker-functions">Tracker functions</a> when disabled.', 'integrate-umami' ),
93+
[
94+
'b' => [],
95+
'a' => [
96+
'href' => [],
97+
],
98+
]
99+
);
100+
?>
101+
</p>
102+
</label>
103+
</td>
104+
</tr>
80105

81-
<tr>
82-
<th class="row">
83-
<label for="integration_umami_do_not_track"><?php esc_html_e( 'Do Not Track', 'integrate-umami' ); ?></label>
84-
</th>
85-
<td>
86-
<input type="checkbox" name="umami_options[do_not_track]" id="integration_umami_do_not_track" value="1"
87-
<?php checked( $options['do_not_track'] ); ?> />
88-
<p class="description"><?php echo esc_html__( 'Respect visitor`s <b>Do Not Track</b> setting', 'integrate-umami' ); ?></p>
89-
</td>
90-
</tr>
106+
<tr>
107+
<th class="row">
108+
<?php esc_html_e( 'Do Not Track', 'integrate-umami' ); ?>
109+
</th>
110+
<td>
111+
<label for="integration_umami_do_not_track">
112+
<input type="checkbox" name="umami_options[do_not_track]" id="integration_umami_do_not_track"
113+
value="1" <?php checked( $options['do_not_track'] ); ?> />
114+
<?php
115+
echo wp_kses(
116+
__( 'Respect visitor`s <b>Do Not Track</b> setting', 'integrate-umami' ),
117+
[
118+
'b' => [],
119+
]
120+
);
121+
?>
122+
</label>
123+
</td>
124+
</tr>
91125

92-
<tr>
93-
<th class="row">
94-
<label for="integration_umami_cache"><?php esc_html_e( 'Cache', 'integrate-umami' ); ?></label>
95-
</th>
96-
<td>
97-
<input type="checkbox" name="umami_options[cache]" id="integration_umami_cache" value="1"
98-
<?php checked( $options['cache'] ); ?> />
99-
<p class="description"><?php esc_html_e( 'Cache data for better performance', 'integrate-umami' ); ?></p>
100-
</td>
101-
</tr>
102-
</table>
126+
<tr>
127+
<th class="row">
128+
<?php esc_html_e( 'Cache', 'integrate-umami' ); ?>
129+
</th>
130+
<td>
131+
<label for="integration_umami_cache">
132+
<input type="checkbox" name="umami_options[cache]" id="integration_umami_cache"
133+
value="1" <?php checked( $options['cache'] ); ?> />
134+
<?php esc_html_e( 'Enable caching of tracking data for better performance', 'integrate-umami' ); ?>
135+
<p class="description">
136+
<?php
137+
echo wp_kses(
138+
__( ' <b>Note</b>: This will use session storage so you may need to inform your users.', 'integrate-umami' ),
139+
[
140+
'b' => [],
141+
]
142+
);
143+
?>
144+
</p>
145+
</label>
146+
</td>
147+
</tr>
148+
</table>
149+
</div>
150+
</div>
103151

104152
<?php submit_button(); ?>
105153
</form>

‎phpcs.xml

100644100755
File mode changed.

‎readme.md

100644100755
+5-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
**Contributors:** [ancocodet](https://github.com/Ancocodet) <br>
33
**Tags:** analytics,umami <br>
44
**Requires at least:** 5.0 <br>
5-
**Tested up to:** 6.1.1 <br>
6-
**Stable tag:** 0.3.3 <br>
5+
**Tested up to:** 6.2 <br>
6+
**Stable tag:** 0.4.0 <br>
77
**Requires PHP:** 7.0 <br>
88
**License:** GPLv2 or later <br>
99

@@ -16,6 +16,9 @@ Umami is a simple, fast, website analytics tool for those who care about privacy
1616

1717
## Changelog ##
1818

19+
- **0.4.0** - Improve Settings Page <br> The settings page has been improved to be more user friendly.
20+
<br>Fixed an issue with the options validation
21+
<br><br>
1922
- **0.3.2 - Update Autoloading** <br> Updated the autoloading to use `plugin_dir_path`
2023
<br><br>
2124
- **0.3.1 - Fix Build Process** <br> Fixed an issue with the building mechanism which resulted in an unusable version

0 commit comments

Comments
 (0)