Skip to content

Commit

Permalink
Replace checkbox with new toggle control and create color palette con…
Browse files Browse the repository at this point in the history 
…trol
  • Loading branch information
@MaheswarReddy-Manyam
MaheswarReddy-Manyam committed Jul 18, 2024
1 parent 21e05b1 commit 8aec9c9
Show file tree
Hide file tree
Showing 22 changed files with 349 additions and 106 deletions.
4 changes: 2 additions & 2 deletions ...y/woocommerce/customizer/settings/class-responsive-woocommerce-cart-layout-customizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,11 @@ public function customizer_options( $wp_customize ) {
$is_cart_block_present = has_block( 'woocommerce/cart', $cart_page_id );
if( ! $is_cart_block_present ) {
$enable_crosssells_options_label = esc_html__( 'Enable Cross-sells', 'responsive' );
responsive_checkbox_control( $wp_customize, 'enable_crosssells_options', $enable_crosssells_options_label, 'responsive_woocommerce_cart_layout', 2, 1, null );
responsive_toggle_control( $wp_customize, 'enable_crosssells_options', $enable_crosssells_options_label, 'responsive_woocommerce_cart_layout', 2, 1, null );
}

$disable_cart_fragments_label = esc_html__( 'Disable Cart Fragments', 'responsive' );
responsive_checkbox_control( $wp_customize, 'disable_cart_fragments', $disable_cart_fragments_label, 'responsive_woocommerce_cart_layout', 2, 0, null );
responsive_toggle_control( $wp_customize, 'disable_cart_fragments', $disable_cart_fragments_label, 'responsive_woocommerce_cart_layout', 2, 0, null );

$wp_customize->add_setting(
'responsive_menu_cart_icon',
Expand Down
4 changes: 2 additions & 2 deletions ...y/woocommerce/customizer/settings/class-responsive-woocommerce-shop-layout-customizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,13 +155,13 @@ public function customizer_options( $wp_customize ) {
responsive_separator_control( $wp_customize, 'off_canvas_filter_separator', $off_canvas_filter_label, 'responsive_woocommerce_shop_layout', 110 );

$enable_off_canvas_filter = __( 'Enable Off Canvas Filter', 'responsive' );
responsive_checkbox_control( $wp_customize, 'enable_off_canvas_filter', $enable_off_canvas_filter, 'responsive_woocommerce_shop_layout', 115, 0, null, 'refresh' );
responsive_toggle_control( $wp_customize, 'enable_off_canvas_filter', $enable_off_canvas_filter, 'responsive_woocommerce_shop_layout', 115, 0, null, 'refresh' );

$hamburger_off_canvas_btn_label = __( 'Off Canvas Filter Button Text', 'responsive' );
responsive_text_control( $wp_customize, 'hamburger_off_canvas_btn_label_text', $hamburger_off_canvas_btn_label, 'responsive_woocommerce_shop_layout', 120, 'Filter', 'enable_off_canvas_filter_check', 'sanitize_text_field', 'text', 'postMessage' );

$enable_off_canvas_close_btn = __( 'Enable Off Canvas Close Button', 'responsive' );
responsive_checkbox_control( $wp_customize, 'enable_off_canvas_close_btn', $enable_off_canvas_close_btn, 'responsive_woocommerce_shop_layout', 125, 0, null, 'refresh' );
responsive_toggle_control( $wp_customize, 'enable_off_canvas_close_btn', $enable_off_canvas_close_btn, 'responsive_woocommerce_shop_layout', 125, 0, null, 'refresh' );

$close_button_color = __( 'Close Button Color', 'responsive' );
responsive_color_control( $wp_customize, 'off_canvas_close_button', $close_button_color, 'responsive_woocommerce_shop_layout', 130, '#CCCCCC', 'enable_enable_off_canvas_close_btn' );
Expand Down
9 changes: 9 additions & 0 deletions core/includes/customizer/assets/min/css/horizontal-separator.min.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,13 @@
.responsive-horizontal-separator-control-wrapper {
margin-left: -12px;
margin-right: -12px;
}
#customize-control-responsive_breadcrumb_position_separator hr {
margin-top: 24px;
}
#customize-control-responsive_breadcrumb_separator_separator hr {
margin-top: 24px;
}
#customize-control-responsive_content_header_alignment_separator hr {
margin-top: 24px;
}
125 changes: 125 additions & 0 deletions core/includes/customizer/assets/min/css/toggle.min.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,129 @@
}
.customize-control-responsive-toggle .components-form-toggle.is-checked .components-form-toggle__thumb {
left: 1px;
}
#customize-control-responsive_enable_header_widget .responsive-toggle-control-wrapper {
padding-top: 24px;
padding-bottom: 24px;
}
#customize-control-responsive_disable_menu .responsive-toggle-control-wrapper,
#customize-control-responsive_disable_mobile_menu .responsive-toggle-control-wrapper {
padding-top: 18px;
}
#customize-control-responsive_sub_menu_divider .responsive-toggle-control-wrapper {
padding-top: 18px;
padding-bottom: 0;
}
#customize-control-responsive_transparent_header .responsive-toggle-control-wrapper {
padding-top: 18px;
}
#customize-control-responsive_disable_archive_transparent_header .responsive-toggle-control-wrapper {
padding-top: 18px;
}
#customize-control-responsive_disable_woo_products_transparent_header .responsive-toggle-control-wrapper {
padding-bottom: 0;
}
#customize-control-res_blog_post_title_toggle .responsive-toggle-control-wrapper {
padding-top: 8px;
padding-bottom: 8px;
}
#customize-control-responsive_date_box_toggle .responsive-toggle-control-wrapper {
padding-top: 18px;
padding-bottom: 8px;
}
#customize-control-responsive_disable_author_meta .responsive-toggle-control-wrapper {
padding-top: 18px;
padding-bottom: 8px;
}
#customize-control-responsive_single_blog_enable_related_posts .responsive-toggle-control-wrapper {
padding-top: 24px;
padding-bottom: 12px;
}
#customize-control-responsive_footer_full_width .responsive-toggle-control-wrapper {
padding-top: 8px;
padding-bottom: 8px;
}
#customize-control-responsive_footer_widget_desktop_visibility .responsive-toggle-control-wrapper {
padding-top: 18px;
}
#customize-control-responsive_footer_widget_mobile_visibility .responsive-toggle-control-wrapper {
padding-bottom: 0;
}
#customize-control-responsive_copyright .responsive-toggle-control-wrapper {
padding-top: 24px;
}
#customize-control-responsive_scroll_to_top .responsive-toggle-control-wrapper {
padding-top: 8px;
padding-bottom: 8px;
}
#customize-control-responsive_retina_logo .responsive-toggle-control-wrapper {
padding-top: 24px;
padding-bottom: 10px;
}
#customize-control-responsive_mobile_logo_option .responsive-toggle-control-wrapper {
padding-top: 24px;
padding-bottom: 10px;
}
#customize-control-responsive_hide_title .responsive-toggle-control-wrapper {
padding-top: 24px;
}
#customize-control-res_front_page .responsive-toggle-control-wrapper {
padding-top: 24px;
padding-bottom: 8px;
}
#customize-control-responsive_disable_hero_area .responsive-toggle-control-wrapper {
padding-top: 24px;
padding-bottom: 8px;
}
#customize-control-res_cta_button .responsive-toggle-control-wrapper {
padding-top: 18px;
padding-bottom: 8px;
}
#customize-control-about .responsive-toggle-control-wrapper,
#customize-control-feature_front_page .responsive-toggle-control-wrapper,
#customize-control-testimonial_front_page .responsive-toggle-control-wrapper,
#customize-control-team_front_page .responsive-toggle-control-wrapper,
#customize-control-contact_front_page .responsive-toggle-control-wrapper {
padding-top: 18px;
padding-bottom: 8px;
}
#customize-control-home-widgets .responsive-toggle-control-wrapper {
padding-top: 18px;
padding-bottom: 0;
}
#customize-control-responsive_enable_off_canvas_close_btn .responsive-toggle-control-wrapper {
padding-bottom: 0;
}
#customize-control-responsive_enable_off_canvas_filter .responsive-toggle-control-wrapper {
padding-top: 24px;
}
#customize-control-responsive_enable_crosssells_options .responsive-toggle-control-wrapper {
padding-top: 8px;
}
#customize-control-responsive_disable_cart_fragments .responsive-toggle-control-wrapper {
padding-bottom: 8px;
}
#customize-control-responsive_distraction_free_woocommerce .responsive-toggle-control-wrapper {
padding-top: 8px;
}
#customize-control-responsive_disable_product_tag_header_footer .responsive-toggle-control-wrapper {
padding-bottom: 12px;
}
#customize-control-breadcrumbs_options .responsive-toggle-control-wrapper {
padding-top: 8px;
}
#customize-control-toolbar_options .responsive-toggle-control-wrapper {
padding-bottom: 8px;
}
#customize-control-responsive_enable_native_cart_popup .responsive-toggle-control-wrapper {
padding-top: 24px;
}
#customize-control-responsive_native_cart_popup_display .responsive-toggle-control-wrapper {
padding-bottom: 8px;
}
#customize-control-responsive_cart_title .responsive-toggle-control-wrapper {
padding-top: 8px;
}
#customize-control-responsive_cart_count .responsive-toggle-control-wrapper {
padding-bottom: 12px;
}
77 changes: 55 additions & 22 deletions core/includes/customizer/controls/palette/palette.css
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,37 @@
.palette__wrapper {
margin-top: 14px;
}

.palette__wrapper .palette__choice {
cursor: pointer;
display: block;
margin-bottom: 10px;
position: relative;
display: flex;
justify-content: space-between;
border-radius: 3px;
background: #fff;
border-bottom: 1px solid #D0D0D0;
padding: 12px 20px;
align-items: center;
}
.palette__wrapper .palette__choice.selected {
background: #EFEFEF;
}
.palette__wrapper.color_scheme {
position: absolute;
top: -10px;
left: 0;
transform: translateX(0px) translateY(118px) translateY(0px) scale(1) translateZ(0px);
overflow: auto;
z-index: 9999;
background-color: #FFF;
box-shadow: 0px 0px 16px 0px #00000026;
border: 1px solid #D0D0D0;
border-radius: 4px;
height: 300px;
}

.palette__wrapper .palette__choice .label {
-webkit-backdrop-filter: blur(10px) saturate(150%);
backdrop-filter: blur(10px) saturate(150%);
background: rgba(0, 0, 0, .5);
border-radius: 0 0 3px 3px;
top: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
padding: 2px 9px 2px;
position: absolute;
text-shadow: 0 0 2px rgba(0, 0, 0, .25);
width: 100%;
text-align: center;
font-family: "Roboto", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 16px;
text-align: left;
color: #333;
}

.palette__wrapper .palette__choice img {
Expand Down Expand Up @@ -77,9 +84,8 @@
}

.palette__wrapper.color_scheme .palette__choice {
height: 50px;
height: 30px;
width: 100%;
margin-bottom: 15px;
}

.palette__wrapper.color_scheme .palette__choice .color-scheme {
Expand Down Expand Up @@ -146,3 +152,30 @@
opacity: 1;
visibility: visible;
}
.responsive-color-picker-btn-wrap {
display: flex;
gap: 8px;
align-items: center;
}
.component-color-indicator.responsive-color-palette-indicate {
width: 30px;
height: 30px;
}
.responsive-selected-palette-details {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding-top: 24px;
}
.responsive-selected-palette-details .label {
font-family: "Roboto", sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 16px;
text-align: left;
}
#responsive-color-palette-btn {
cursor: pointer;
margin-left: 6px;
}
18 changes: 18 additions & 0 deletions core/includes/customizer/extend-controls/src/palette/palette-color-picker.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import PropTypes from "prop-types";

const PaletteColorPicker = props => {

return (
<div className="responsive-color-picker-btn-wrap" tabIndex="0">
<span className="component-color-indicator responsive-color-palette-indicate" style={{ background: props.colorsPicks.accent }}></span>
<span className="component-color-indicator responsive-color-palette-indicate" style={{ background: props.colorsPicks.text }}></span>
<span className="component-color-indicator responsive-color-palette-indicate" style={{ background: props.colorsPicks.background }}></span>
</div>
);
};

PaletteColorPicker.propTypes = {
control: PropTypes.object.isRequired
};

export default React.memo(PaletteColorPicker);
Loading

0 comments on commit 8aec9c9

Please sign in to comment.