Skip to content

Commit

Permalink
Admin notice styling cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@coder-karen
coder-karen committed Oct 16, 2024
1 parent 08711e6 commit 8c643f3
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 37 deletions.
79 changes: 54 additions & 25 deletions projects/plugins/jetpack/_inc/deprecate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,37 +16,66 @@ addEventListener( 'DOMContentLoaded', () => {
}

var styleSheet = document.createElement( 'style' );
//styleSheet.type = 'text/css';

// Define the CSS rules for placing the SVG icon in the top-right corner of the notice
// Define the CSS rules for placing the admin notice.
styleSheet.innerHTML = `
/* Clear the default Dashicon content */
.jetpack-deprecate-dismissible .notice-dismiss::before {
content: '';
}
/* Customize the .notice-dismiss button */
.jetpack-deprecate-dismissible .notice-dismiss {
position: absolute;
width: 24px;
height: 24px;
/* Clear the default Dashicon content */
.jetpack-deprecate-dismissible .notice-dismiss::before {
content: '';
}
/* Customize the .notice-dismiss button */
.jetpack-deprecate-dismissible .notice-dismiss {
position: absolute;
width: 24px;
height: 24px;
top: 24px;
right:12px;
}
.jetpack-deprecate-dismissible .notice-dismiss::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
transform: translate(-50%, -50%);
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="%23555" d="M12 10.586L6.343 4.93 4.93 6.343 10.586 12l-5.657 5.657 1.414 1.414L12 13.414l5.657 5.657 1.414-1.414L13.414 12l5.657-5.657-1.414-1.414L12 10.586z"/></svg>'); /* Inline SVG as background image */
background-size: contain;
background-repeat: no-repeat;
}
.jetpack-deprecate-dismissible .notice-dismiss::after {
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="%23555" d="M12 10.586L6.343 4.93 4.93 6.343 10.586 12l-5.657 5.657 1.414 1.414L12 13.414l5.657 5.657 1.414-1.414L13.414 12l5.657-5.657-1.414-1.414L12 10.586z"/></svg>'); /* Inline SVG as background image */
background-repeat: no-repeat;
background-size: contain;
content: '';
display: block;
position: absolute;
top: 6px;
left: 6px;
width: 20px;
height: 20px;
transform: translate(-50%, -50%);
}
.jetpack-deprecation-notice-container {
align-items: flex-start;
display: flex;
padding-bottom: 24px;
padding-left: 12px;
padding-top: 14px;
}
.jetpack-deprecation-notice-svg {
margin-right: 10px;
padding-top:10px;
}
.jetpack-deprecation-notice-icon {
margin-right: 10px;
}
.jetpack-deprecation-notice-text {
display: block;
}
.jetpack-deprecation-notice-title {
font-weight: 600;
}
.jetpack-deprecation-notice-link {
font-weight: 600;
color: #000000;
}
`;

Expand Down
26 changes: 14 additions & 12 deletions projects/plugins/jetpack/src/class-deprecate.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,18 +104,20 @@ public function render_admin_notices() {

$this->render_notice(
$id,
'<div style="padding-left: 12px; padding-bottom: 22px; padding-top: 17px; display: flex; align-items: flex-start;">' .
'<div style="margin-right: 10px; padding-top:10px">' .
'<svg class="gridicon gridicons-info-outline needs-offset" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" color="#000000" style="margin-right: 8px;">' .
'<g><path d="M13 9h-2V7h2v2zm0 2h-2v6h2v-6zm-1-7c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8m0-2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"></path></g>' .
'</svg>' .
'</div>' .
'<div style="display: block;">' .
'<p style="font-weight: bold;">' . esc_html( $notice['title'] ) . '</p>' .
'<p>' . esc_html( $notice['message'] ) . '</p>' .
'<a href="' . $support_url . '" target="_blank" class="jetpack-deprecation-notice-link" style="font-weight: bold; color: #000000;"> ' . esc_html( $notice['link']['label'] ) .
'</a> <svg class="gridicons-external" height="14" width="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20"><g><path d="M19 13v6c0 1.105-.895 2-2 2H5c-1.105 0-2-.895-2-2V7c0-1.105.895-2 2-2h6v2H5v12h12v-6h2zM13 3v2h4.586l-7.793 7.793 1.414 1.414L19 6.414V11h2V3h-8z"></path></g></svg>' .
'</div>' .
'<div class="jetpack-deprecation-notice-container">' .
'<div class="jetpack-deprecation-notice-svg">' .
'<svg class="jetpack-deprecation-notice-icon gridicon gridicons-info-outline needs-offset" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" color="#000000">' .
'<g><path d="M13 9h-2V7h2v2zm0 2h-2v6h2v-6zm-1-7c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8m0-2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"></path></g>' .
'</svg>' .
'</div>' .
'<div class="jetpack-deprecation-notice-text">' .
'<p class="jetpack-deprection-notice-title">' . esc_html( $notice['title'] ) . '</p>' .
'<p>' . esc_html( $notice['message'] ) . '</p>' .
'<a href="' . $support_url . '" target="_blank" class="jetpack-deprecation-notice-link"> ' . esc_html( $notice['link']['label'] ) . '</a>' .
'<svg class="gridicons-external" height="14" width="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">' .

Check failure on line 117 in projects/plugins/jetpack/src/class-deprecate.php

View workflow job for this annotation

GitHub Actions / PHP Code Sniffer (non-excluded files only) 

Whitespace found at end of line (Squiz.WhiteSpace.SuperfluousWhitespace.EndLine)
'<g><path d="M19 13v6c0 1.105-.895 2-2 2H5c-1.105 0-2-.895-2-2V7c0-1.105.895-2 2-2h6v2H5v12h12v-6h2zM13 3v2h4.586l-7.793 7.793 1.414 1.414L19 6.414V11h2V3h-8z"></path></g>' .
'</svg>' .
'</div>' .
'</div>'
);
}
Expand Down

0 comments on commit 8c643f3

Please sign in to comment.