Skip to content

Commit a593781

Browse files
josephfuscojosephfusco
committed
Leverage native WP styles
1 parent 166eae6 commit a593781

File tree

2 files changed

+149
-98
lines changed

2 files changed

+149
-98
lines changed

‎plugins/wp-graphql-headless-webhooks/src/Admin/assets/admin.css‎

Lines changed: 114 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -34,64 +34,151 @@
3434
width: 200px;
3535
}
3636

37-
/* Test webhook link */
38-
.test-webhook {
39-
cursor: pointer;
37+
/* Webhooks table column widths */
38+
.wp-list-table.webhooks .column-cb {
39+
width: 2.2em;
4040
}
4141

42-
/* Test webhook button states */
43-
.test-webhook.testing {
44-
color: #3858e9;
45-
cursor: not-allowed;
46-
pointer-events: none;
42+
.wp-list-table.webhooks .column-name {
43+
width: 25%;
4744
}
4845

49-
.test-webhook.success {
50-
color: #00a32a;
46+
.wp-list-table.webhooks .column-event {
47+
width: 15%;
5148
}
5249

53-
.test-webhook.error {
54-
color: #d63638;
50+
.wp-list-table.webhooks .column-method {
51+
width: 10%;
5552
}
5653

57-
/* Webhooks table column widths */
58-
.wp-list-table.webhooks-table .column-event {
54+
.wp-list-table.webhooks .column-url {
55+
width: auto;
56+
}
57+
58+
.wp-list-table.webhooks .column-headers {
5959
width: 15%;
6060
}
6161

62-
.wp-list-table.webhooks-table .column-method {
63-
width: 80px;
62+
/* Improve table styling */
63+
.wp-list-table.webhooks {
64+
margin-top: 0.5em;
6465
}
6566

66-
.wp-list-table.webhooks-table .column-headers {
67-
width: 15%;
67+
.wp-list-table.webhooks th:not(.check-column),
68+
.wp-list-table.webhooks td:not(.check-column) {
69+
vertical-align: middle;
70+
}
71+
72+
/* Checkbox column specific styling */
73+
.wp-list-table.webhooks .check-column {
74+
vertical-align: top;
75+
padding-top: 8px;
6876
}
6977

70-
/* Prevent URL wrapping */
71-
.wp-list-table.webhooks-table td code {
78+
/* Style webhook name as primary column */
79+
.wp-list-table.webhooks .column-name strong {
80+
display: block;
81+
margin-bottom: 0.2em;
82+
font-size: 14px;
83+
}
84+
85+
.wp-list-table.webhooks .row-actions {
86+
font-size: 13px;
87+
}
88+
89+
/* Method column styling */
90+
.wp-list-table.webhooks .column-method {
91+
text-align: center;
92+
}
93+
94+
.wp-list-table.webhooks .column-method strong {
7295
display: inline-block;
96+
padding: 3px 8px;
97+
background: #f0f0f1;
98+
border-radius: 3px;
99+
font-size: 11px;
100+
font-weight: 600;
101+
text-transform: uppercase;
102+
}
103+
104+
/* URL column styling */
105+
.wp-list-table.webhooks .column-url code {
106+
display: block;
73107
white-space: nowrap;
74108
overflow: hidden;
75109
text-overflow: ellipsis;
76110
max-width: 100%;
111+
font-size: 12px;
112+
background: transparent;
113+
padding: 0;
77114
}
78115

79-
/* Empty state */
116+
/* Headers column styling */
117+
.wp-list-table.webhooks .column-headers {
118+
color: #50575e;
119+
font-size: 12px;
120+
}
121+
122+
.wp-list-table.webhooks .column-headers code {
123+
background: #f0f0f1;
124+
padding: 2px 4px;
125+
border-radius: 2px;
126+
font-size: 11px;
127+
}
128+
129+
/* Bulk actions bar */
130+
.tablenav .actions {
131+
padding: 8px 0;
132+
}
133+
134+
/* Empty state improvements */
80135
.webhooks-empty-state {
81136
text-align: center;
82-
padding: 50px 20px;
137+
padding: 60px 20px;
138+
background: #fff;
139+
border: 1px solid #c3c4c7;
140+
border-radius: 4px;
141+
margin-top: 20px;
83142
}
84143

85144
.webhooks-empty-state h2 {
86-
font-size: 24px;
145+
font-size: 21px;
87146
font-weight: 400;
88-
margin: 0 0 10px;
147+
margin: 0 0 0.5em;
148+
line-height: 1.3;
89149
}
90150

91151
.webhooks-empty-state p {
92-
font-size: 16px;
93-
color: #646970;
94-
margin: 0 0 20px;
152+
font-size: 14px;
153+
color: #50575e;
154+
margin: 0 0 1.5em;
155+
line-height: 1.5;
156+
}
157+
158+
.webhooks-empty-state .button-primary {
159+
font-size: 14px;
160+
padding: 6px 14px;
161+
height: auto;
162+
}
163+
164+
/* Test webhook link */
165+
.test-webhook {
166+
cursor: pointer;
167+
}
168+
169+
/* Test webhook button states */
170+
.test-webhook.testing {
171+
color: #3858e9;
172+
cursor: not-allowed;
173+
pointer-events: none;
174+
}
175+
176+
.test-webhook.success {
177+
color: #00a32a;
178+
}
179+
180+
.test-webhook.error {
181+
color: #d63638;
95182
}
96183

97184
/* Webhook test response styling */

‎plugins/wp-graphql-headless-webhooks/src/Admin/views/webhooks-list.php‎

Lines changed: 35 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,18 @@
5353
<?php endif; ?>
5454
<?php endif; ?>
5555

56-
<?php if ( ! empty( $webhooks ) ) : ?>
56+
<?php if ( empty( $webhooks ) ) : ?>
57+
<div class="webhooks-empty-state">
58+
<h2><?php esc_html_e( 'No webhooks yet', 'wp-graphql-headless-webhooks' ); ?></h2>
59+
<p><?php esc_html_e( 'Create your first webhook to start receiving notifications when events occur.', 'wp-graphql-headless-webhooks' ); ?></p>
60+
<a href="<?php echo esc_url( $admin->get_admin_url( array( 'action' => 'add' ) ) ); ?>" class="button button-primary">
61+
<?php esc_html_e( 'Add New Webhook', 'wp-graphql-headless-webhooks' ); ?>
62+
</a>
63+
</div>
64+
<?php else : ?>
5765
<form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
66+
<input type="hidden" name="action" value="graphql_webhook_bulk_delete" />
5867
<?php wp_nonce_field( 'bulk_delete_webhooks' ); ?>
59-
<input type="hidden" name="action" value="graphql_webhook_bulk_delete">
6068

6169
<div class="tablenav top">
6270
<div class="alignleft actions bulkactions">
@@ -67,42 +75,29 @@
6775
</select>
6876
<input type="submit" class="button action" value="<?php esc_attr_e( 'Apply', 'wp-graphql-headless-webhooks' ); ?>">
6977
</div>
78+
<br class="clear">
7079
</div>
7180

72-
<table class="wp-list-table widefat fixed striped table-view-list">
81+
<table class="wp-list-table widefat fixed striped webhooks">
7382
<thead>
7483
<tr>
7584
<td class="manage-column column-cb check-column">
76-
<label class="screen-reader-text" for="cb-select-all-1"><?php esc_html_e( 'Select All', 'wp-graphql-headless-webhooks' ); ?></label>
77-
<input id="cb-select-all-1" type="checkbox">
85+
<input type="checkbox" id="cb-select-all-1" />
7886
</td>
79-
<th scope="col" class="manage-column column-name column-primary">
80-
<?php esc_html_e( 'Name', 'wp-graphql-headless-webhooks' ); ?>
81-
</th>
82-
<th scope="col" class="manage-column column-event">
83-
<?php esc_html_e( 'Event', 'wp-graphql-headless-webhooks' ); ?>
84-
</th>
85-
<th scope="col" class="manage-column column-method">
86-
<?php esc_html_e( 'Method', 'wp-graphql-headless-webhooks' ); ?>
87-
</th>
88-
<th scope="col" class="manage-column column-url">
89-
<?php esc_html_e( 'URL', 'wp-graphql-headless-webhooks' ); ?>
90-
</th>
91-
<th scope="col" class="manage-column column-headers">
92-
<?php esc_html_e( 'Headers', 'wp-graphql-headless-webhooks' ); ?>
93-
</th>
87+
<th scope="col" class="manage-column column-name"><?php esc_html_e( 'Name', 'wp-graphql-headless-webhooks' ); ?></th>
88+
<th scope="col" class="manage-column column-event"><?php esc_html_e( 'Event', 'wp-graphql-headless-webhooks' ); ?></th>
89+
<th scope="col" class="manage-column column-method"><?php esc_html_e( 'Method', 'wp-graphql-headless-webhooks' ); ?></th>
90+
<th scope="col" class="manage-column column-url"><?php esc_html_e( 'URL', 'wp-graphql-headless-webhooks' ); ?></th>
91+
<th scope="col" class="manage-column column-headers"><?php esc_html_e( 'Headers', 'wp-graphql-headless-webhooks' ); ?></th>
9492
</tr>
9593
</thead>
9694
<tbody>
9795
<?php foreach ( $webhooks as $webhook ) : ?>
9896
<tr>
9997
<th scope="row" class="check-column">
100-
<label class="screen-reader-text" for="cb-select-<?php echo esc_attr( $webhook->id ); ?>">
101-
<?php printf( esc_html__( 'Select %s', 'wp-graphql-headless-webhooks' ), esc_html( $webhook->name ) ); ?>
102-
</label>
103-
<input id="cb-select-<?php echo esc_attr( $webhook->id ); ?>" type="checkbox" name="webhook_ids[]" value="<?php echo esc_attr( $webhook->id ); ?>">
98+
<input type="checkbox" name="webhook_ids[]" value="<?php echo esc_attr( $webhook->id ); ?>" />
10499
</th>
105-
<td class="column-name column-primary" data-colname="<?php esc_attr_e( 'Name', 'wp-graphql-headless-webhooks' ); ?>">
100+
<td class="name column-name">
106101
<strong>
107102
<a href="<?php echo esc_url( $admin->get_admin_url( array( 'action' => 'edit', 'webhook_id' => $webhook->id ) ) ); ?>" class="row-title">
108103
<?php echo esc_html( $webhook->name ); ?>
@@ -129,22 +124,20 @@
129124
<span class="screen-reader-text"><?php esc_html_e( 'Show more details', 'wp-graphql-headless-webhooks' ); ?></span>
130125
</button>
131126
</td>
132-
<td class="column-event" data-colname="<?php esc_attr_e( 'Event', 'wp-graphql-headless-webhooks' ); ?>">
133-
<code><?php echo esc_html( $webhook->event ); ?></code>
134-
</td>
135-
<td class="column-method" data-colname="<?php esc_attr_e( 'Method', 'wp-graphql-headless-webhooks' ); ?>">
127+
<td class="event column-event"><?php echo esc_html( $webhook->event ); ?></td>
128+
<td class="method column-method">
136129
<strong><?php echo esc_html( strtoupper( $webhook->method ) ); ?></strong>
137130
</td>
138-
<td class="column-url" data-colname="<?php esc_attr_e( 'URL', 'wp-graphql-headless-webhooks' ); ?>">
139-
<code><?php echo esc_html( $webhook->url ); ?></code>
131+
<td class="url column-url">
132+
<code title="<?php echo esc_attr( $webhook->url ); ?>"><?php echo esc_html( $webhook->url ); ?></code>
140133
</td>
141-
<td class="column-headers" data-colname="<?php esc_attr_e( 'Headers', 'wp-graphql-headless-webhooks' ); ?>">
134+
<td class="headers column-headers">
142135
<?php if ( ! empty( $webhook->headers ) ) : ?>
143-
<?php foreach ( $webhook->headers as $key => $value ) : ?>
144-
<div><code><?php echo esc_html( $key ); ?></code></div>
136+
<?php foreach ( $webhook->headers as $header => $value ) : ?>
137+
<code><?php echo esc_html( $header ); ?></code><br>
145138
<?php endforeach; ?>
146139
<?php else : ?>
147-
<span class="description"><?php esc_html_e( 'None', 'wp-graphql-headless-webhooks' ); ?></span>
140+
<span class="no-headers"><?php esc_html_e( 'None', 'wp-graphql-headless-webhooks' ); ?></span>
148141
<?php endif; ?>
149142
</td>
150143
</tr>
@@ -153,24 +146,13 @@
153146
<tfoot>
154147
<tr>
155148
<td class="manage-column column-cb check-column">
156-
<label class="screen-reader-text" for="cb-select-all-2"><?php esc_html_e( 'Select All', 'wp-graphql-headless-webhooks' ); ?></label>
157-
<input id="cb-select-all-2" type="checkbox">
149+
<input type="checkbox" id="cb-select-all-2" />
158150
</td>
159-
<th scope="col" class="manage-column column-name column-primary">
160-
<?php esc_html_e( 'Name', 'wp-graphql-headless-webhooks' ); ?>
161-
</th>
162-
<th scope="col" class="manage-column column-event">
163-
<?php esc_html_e( 'Event', 'wp-graphql-headless-webhooks' ); ?>
164-
</th>
165-
<th scope="col" class="manage-column column-method">
166-
<?php esc_html_e( 'Method', 'wp-graphql-headless-webhooks' ); ?>
167-
</th>
168-
<th scope="col" class="manage-column column-url">
169-
<?php esc_html_e( 'URL', 'wp-graphql-headless-webhooks' ); ?>
170-
</th>
171-
<th scope="col" class="manage-column column-headers">
172-
<?php esc_html_e( 'Headers', 'wp-graphql-headless-webhooks' ); ?>
173-
</th>
151+
<th scope="col" class="manage-column column-name"><?php esc_html_e( 'Name', 'wp-graphql-headless-webhooks' ); ?></th>
152+
<th scope="col" class="manage-column column-event"><?php esc_html_e( 'Event', 'wp-graphql-headless-webhooks' ); ?></th>
153+
<th scope="col" class="manage-column column-method"><?php esc_html_e( 'Method', 'wp-graphql-headless-webhooks' ); ?></th>
154+
<th scope="col" class="manage-column column-url"><?php esc_html_e( 'URL', 'wp-graphql-headless-webhooks' ); ?></th>
155+
<th scope="col" class="manage-column column-headers"><?php esc_html_e( 'Headers', 'wp-graphql-headless-webhooks' ); ?></th>
174156
</tr>
175157
</tfoot>
176158
</table>
@@ -184,26 +166,8 @@
184166
</select>
185167
<input type="submit" class="button action" value="<?php esc_attr_e( 'Apply', 'wp-graphql-headless-webhooks' ); ?>">
186168
</div>
187-
<div class="alignleft actions">
188-
<p class="description">
189-
<?php
190-
printf(
191-
esc_html__( '%d webhooks configured', 'wp-graphql-headless-webhooks' ),
192-
count( $webhooks )
193-
);
194-
?>
195-
</p>
196-
</div>
169+
<br class="clear">
197170
</div>
198171
</form>
199-
<?php else : ?>
200-
<div class="webhooks-empty-state">
201-
<p><?php esc_html_e( 'No webhooks configured yet.', 'wp-graphql-headless-webhooks' ); ?></p>
202-
<p>
203-
<a href="<?php echo esc_url( $admin->get_admin_url( array( 'action' => 'add' ) ) ); ?>" class="button button-primary">
204-
<?php esc_html_e( 'Add Your First Webhook', 'wp-graphql-headless-webhooks' ); ?>
205-
</a>
206-
</p>
207-
</div>
208172
<?php endif; ?>
209173
</div>

0 commit comments

Comments
 (0)