customer-dashboard
2 years ago
admin-header.php
1 month ago
admin-index-header.php
2 years ago
admin-index-styles.php
1 year ago
admin-product-list-styles.php
1 month ago
admin-settings-header.php
11 months ago
admin-settings-notices.php
4 years ago
admin-settings-styles.php
3 months ago
enhanced-views-promo.php
1 month ago
store-logo.php
2 years ago
enhanced-views-promo.php
94 lines
| 1 | <?php |
| 2 | if ( ! current_user_can( 'manage_options' ) ) { |
| 3 | return; |
| 4 | } |
| 5 | |
| 6 | $is_enhanced = (bool) get_option( 'surecart_enhanced_admin_views', true ); |
| 7 | $target_value = $is_enhanced ? '0' : '1'; |
| 8 | $toggle_id = 'sc-enhanced-views-toggle'; |
| 9 | $aria_label = $is_enhanced |
| 10 | ? __( 'Switch to classic view', 'surecart' ) |
| 11 | : __( 'Switch to modern view', 'surecart' ); |
| 12 | ?> |
| 13 | |
| 14 | <form |
| 15 | method="post" |
| 16 | action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" |
| 17 | class="sc-enhanced-views-promo<?php echo $is_enhanced ? ' is-enhanced' : ''; ?>" |
| 18 | > |
| 19 | <?php wp_nonce_field( 'sc_set_enhanced_admin_views' ); ?> |
| 20 | <input type="hidden" name="action" value="sc_set_enhanced_admin_views" /> |
| 21 | <input type="hidden" name="value" value="<?php echo esc_attr( $target_value ); ?>" /> |
| 22 | <input |
| 23 | type="hidden" |
| 24 | name="redirect_to" |
| 25 | value="<?php echo esc_url( $return_url ?? admin_url() ); ?>" |
| 26 | /> |
| 27 | |
| 28 | <sc-tooltip |
| 29 | class="sc-enhanced-views-promo__tooltip" |
| 30 | text="<?php echo esc_attr( $aria_label ); ?>" |
| 31 | placement="bottom" |
| 32 | type="dark" |
| 33 | > |
| 34 | <button |
| 35 | id="<?php echo esc_attr( $toggle_id ); ?>" |
| 36 | class="sc-enhanced-views-promo__toggle" |
| 37 | type="submit" |
| 38 | aria-label="<?php echo esc_attr( $aria_label ); ?>" |
| 39 | aria-pressed="<?php echo $is_enhanced ? 'true' : 'false'; ?>" |
| 40 | > |
| 41 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> |
| 42 | <path d="M15.5 9.2L14.8 8.5L16.8 6.5H14V5.5H16.8L14.8 3.5L15.5 2.8L17.5 4.8V2H18.5V4.8L20.5 2.8L21.2 3.5L19.2 5.5H22V6.5H19.2L21.2 8.5L20.5 9.2L18.5 7.2V10H17.5V7.2L15.5 9.2Z" fill="currentColor" /> |
| 43 | <path d="M13 3V4.5H5C4.7 4.5 4.5 4.7 4.5 5V8.5H13V13.5H19.5V11H21V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H13ZM4.5 15V19C4.5 19.3 4.7 19.5 5 19.5H11.5V15H4.5ZM13 15V19.5H19C19.3 19.5 19.5 19.3 19.5 19V15H13ZM4.5 10V13.5H11.5V10H4.5Z" fill="currentColor" /> |
| 44 | </svg> |
| 45 | </button> |
| 46 | </sc-tooltip> |
| 47 | </form> |
| 48 | |
| 49 | <style> |
| 50 | .sc-enhanced-views-promo { margin: 0; } |
| 51 | .sc-enhanced-views-promo.is-busy { opacity: 0.6; pointer-events: none; } |
| 52 | .sc-enhanced-views-promo__tooltip { |
| 53 | display: inline-flex; |
| 54 | } |
| 55 | /* Default icon color stays neutral (#111827) regardless of which view |
| 56 | mode is active — the toggle is a switch, not a status indicator. |
| 57 | Only hover / focus / active interactions promote it to the primary |
| 58 | blue so users can tell it's interactive. */ |
| 59 | .sc-enhanced-views-promo__toggle { |
| 60 | display: inline-flex; |
| 61 | align-items: center; |
| 62 | justify-content: center; |
| 63 | width: 32px; |
| 64 | height: 32px; |
| 65 | padding: 0; |
| 66 | background: transparent; |
| 67 | border: none; |
| 68 | border-radius: 6px; |
| 69 | color: #111827; |
| 70 | cursor: pointer; |
| 71 | transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; |
| 72 | } |
| 73 | .sc-enhanced-views-promo__toggle:hover, |
| 74 | .sc-enhanced-views-promo__toggle:focus-visible, |
| 75 | .sc-enhanced-views-promo__toggle:active { |
| 76 | color: #3858e9; |
| 77 | background: rgba(56, 88, 233, 0.08); |
| 78 | outline: none; |
| 79 | } |
| 80 | .sc-enhanced-views-promo__toggle:focus-visible { |
| 81 | box-shadow: 0 0 0 2px rgba(56, 88, 233, 0.4); |
| 82 | } |
| 83 | /* Attention pulse — added by React when the modal closes so the user's |
| 84 | eye is drawn to the toggle. The class is removed on animationend. */ |
| 85 | @keyframes sc-toggle-attract { |
| 86 | 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(56, 88, 233, 0.45); } |
| 87 | 40% { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(56, 88, 233, 0.18); } |
| 88 | 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(56, 88, 233, 0); } |
| 89 | } |
| 90 | .sc-enhanced-views-promo__toggle.is-attract { |
| 91 | animation: sc-toggle-attract 0.7s ease-out; |
| 92 | } |
| 93 | </style> |
| 94 |