← All changes | includes/editor-templates/responsive-bar.php +30 -40 4.2.0-dev2 → 3.3.0 View file →

		@@ -7,63 +7,53 @@
7	7	exit; // Exit if accessed directly.
8	8	}
9	9
10	10	// TODO: Use API data instead of this static array, once it is available.
11		-$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
12		-$active_devices = Plugin::$instance->breakpoints->get_active_devices_list( [ 'reverse' => true ] );
	11	+$breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
13	12
14		-$breakpoint_classes_map = array_intersect_key( Plugin::$instance->breakpoints->get_responsive_icons_classes_map(), array_flip( $active_devices ) );
	13	+$breakpoints['desktop'] = [];
	14	+
	15	+/* translators: %1$s: Device Name */
	16	+$breakpoint_label = __( '%1$s <br> Settings added to %1$s device will apply to %2$spx screens and down', 'elementor' );
15	17	?>
16	18
17	19	<script type="text/template" id="tmpl-elementor-templates-responsive-bar">
18		- <div id="e-responsive-bar__center">
19		- <div id="e-responsive-bar-switcher" class="e-responsive-bar--pipe">
20		- <?php foreach ( $active_devices as $device_key ) {
21		- if ( 'desktop' === $device_key ) {
22		- $tooltip_label = esc_html__( 'Desktop <br> Settings added for the base device will apply to all breakpoints unless edited', 'elementor' );
23		- } elseif ( 'widescreen' === $device_key ) {
24		- $tooltip_label = sprintf(
25		- /* translators: %d: Breakpoint screen size. */
26		- esc_html__( 'Widescreen <br> Settings added for the Widescreen device will apply to screen sizes %dpx and up', 'elementor' ),
27		- $active_breakpoints[ $device_key ]->get_value()
28		- );
	20	+ <div class="e-responsive-bar__col"></div>
	21	+ <div class="e-responsive-bar__col">
	22	+ <div class="e-responsive-bar-switcher">
	23	+ <?php foreach ( $breakpoints as $name => $breakpoint ) {
	24	+ if ( 'desktop' === $name ) {
	25	+ $tooltip_label = __( 'Desktop <br> Settings added to Base device will apply to all breakpoints unless edited', 'elementor' );
29	26	} else {
30		- $tooltip_label = sprintf(
31		- /* translators: %1$s: Device name, %2$s: Breakpoint screen size. */
32		- esc_html__( '%1$s <br> Settings added for the %1$s device will apply to %2$spx screens and down', 'elementor' ),
33		- $active_breakpoints[ $device_key ]->get_label(), $active_breakpoints[ $device_key ]->get_value()
34		- );
	27	+ $tooltip_label = sprintf( $breakpoint_label, $breakpoint->get_label(), $breakpoint->get_value() );
35	28	}
36	29	printf( '<label
37		- id="e-responsive-bar-switcher__option-%1$s"
38		- class="e-responsive-bar-switcher__option"
	30	+ class="e-responsive-bar-switcher__option e-responsive-bar-switcher__option-%1$s"
39	31	for="e-responsive-bar-switch-%1$s"
40	32	data-tooltip="%2$s">
41	33
42	34	<input type="radio" name="breakpoint" id="e-responsive-bar-switch-%1$s" value="%1$s">
43		- <i class="%3$s" aria-hidden="true"></i>
	35	+ <i class="eicon-device-%1$s" aria-hidden="true"></i>
44	36	<span class="screen-reader-text">%2$s</span>
45		- </label>', esc_attr( $device_key ), esc_attr( $tooltip_label ), esc_attr( $breakpoint_classes_map[ $device_key ] ) );
	37	+ </label>', $name, $tooltip_label );
46	38	} ?>
47	39	</div>
48		- <div id="e-responsive-bar-scale">
49		- <div id="e-responsive-bar-scale__minus"></div>
50		- <div id="e-responsive-bar-scale__value-wrapper"><span id="e-responsive-bar-scale__value">100</span>%</div>
51		- <div id="e-responsive-bar-scale__plus"><i class="eicon-plus" aria-hidden="true"></i></div>
52		- <div id="e-responsive-bar-scale__reset"><i class="eicon-undo" aria-hidden="true"></i></div>
53		- </div>
54	40	</div>
55		- <div id="e-responsive-bar__end">
56		- <div id="e-responsive-bar__size-inputs-wrapper" class="e-flex e-align-items-center">
57		- <label for="e-responsive-bar__input-width">W</label>
58		- <input type="number" id="e-responsive-bar__input-width" class="e-responsive-bar__input-size" autocomplete="off">
59		- <label for="e-responsive-bar__input-height">H</label>
60		- <input type="number" id="e-responsive-bar__input-height" class="e-responsive-bar__input-size" autocomplete="off">
61		- </div>
62		- <button id="e-responsive-bar__settings-button" class="e-responsive-bar__button e-responsive-bar--pipe" data-tooltip="<?php echo esc_attr__( 'Manage Breakpoints', 'elementor' ); ?>" aria-label="<?php echo esc_attr__( 'Manage Breakpoints', 'elementor' ); ?>">
	41	+ <div class="e-responsive-bar__col">
	42	+ <button class="e-responsive-bar__close-button e-responsive-bar__button"
	43	+ data-tooltip="<?php echo __( 'Close', 'elementor' ); ?>">
	44	+ <span class="elementor-screen-only"><?php echo __( 'Close', 'elementor' ); ?></span>
	45	+ <i class="eicon-close" aria-hidden="true"></i>
	46	+ </button>
	47	+ <button class="e-responsive-bar__settings-button e-responsive-bar__button"
	48	+ data-tooltip="<?php echo __( 'Manage Breakpoints', 'elementor' ); ?>">
	49	+ <span class="elementor-screen-only"><?php echo __( 'Settings', 'elementor' ); ?></span>
63	50	<i class="eicon-cog" aria-hidden="true"></i>
64	51	</button>
65		- <button id="e-responsive-bar__close-button" class="e-responsive-bar__button" data-tooltip="<?php echo esc_attr__( 'Close', 'elementor' ); ?>" aria-label="<?php echo esc_attr__( 'Close', 'elementor' ); ?>">
66		- <i class="eicon-close" aria-hidden="true"></i>
67		- </button>
	52	+ <div class="e-flex e-align-items-center e-responsive-bar__size-inputs-wrapper">
	53	+ <label for="viewport_width">W</label>
	54	+ <input type="number" id="viewport_width" class="e-responsive-bar__input-size e-responsive-bar__input-width" autocomplete="off">
	55	+ <label for="viewport_height">H</label>
	56	+ <input type="number" id="viewport_height" class="e-responsive-bar__input-size e-responsive-bar__input-height" autocomplete="off">
	57	+ </div>
68	58	</div>
69	59	</script>