redesign of setting page - events tab

Xtendify · Oct 9, 2023 · 06e7465 · 06e7465
1 parent 0964f01
commit 06e7465
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 90 deletions.
diff --git a/assets/css/setting-page.css b/assets/css/setting-page.css
@@ -0,0 +1,58 @@
+            #events-settings-panel .simcal-panel-section .simcal-panel-field {
+                display: flex;
+                flex-wrap: wrap;
+                width: 100%;
+            }
+
+            #events-settings-panel .simcal-panel-section .simcal-panel-field td #events-settings-panel .simcal-panel-section .simcal-panel-field th {
+                width: 100%;
+            }
+            /* #events-settings-panel .simcal-panel-section .simcal-panel-field select {
+    width: 80%;
+} */
+
+            #post-body-content #titlediv #title-prompt-text {
+                padding: 0 0 0 15px;
+            }
+
+            .simcal-panel-field>td,
+            .simcal-panel-field>th {
+                padding: 2px 3% 8px 10px;
+            }
+
+            .simcal-panel>table>tbody tr:first-child td,
+            .simcal-panel>table>tbody tr:first-child th {
+                padding-top: 0%;
+            }
+
+            .meta-box-sortables select {
+                max-width: 84%;
+            }
+
+            body .simcal-field-textarea,
+            body .simcal-field-select-enhanced {
+                width: 92%;
+            }
+
+            input[type=checkbox]:checked::before {
+                margin: -0.4rem 0 0 -0.25rem;
+            }
+
+            input[type=checkbox],
+            input[type=radio] {
+                border: 1px solid #D4D4D8;
+            }
+            /* .simcal-panel>table>tbody tr:first-child td,
+            .simcal-panel>table>tbody tr:first-child th {
+                padding-top: 5%;
+            } */
+
+            .wp-core-ui select {
+                color: #71717A;
+                border-color: #D4D4D8;
+            }
+            /* #events-settings-panel .simcal-panel-section .simcal-panel-field {
+                display: flex;
+                flex-wrap: wrap;
+                width: 100%;
+            } */
diff --git a/includes/admin/assets.php b/includes/admin/assets.php
@@ -36,6 +36,7 @@ public function __construct()
 	 */
 	public function load()
 	{
+		$css_ungen = SIMPLE_CALENDAR_ASSETS . 'css/';
 		$css_path = SIMPLE_CALENDAR_ASSETS . 'generated/';
 		$css_path_vendor = $css_path . 'vendor/';
 		$js_path = SIMPLE_CALENDAR_ASSETS . 'generated/';
@@ -129,5 +130,17 @@ public function load()
 			wp_enqueue_style('sc-welcome-style', $css_path . 'sc-welcome-pg-style.min.css', [], SIMPLE_CALENDAR_VERSION);
 			wp_enqueue_style('sc-tail-style', $css_path . 'tailwind.min.css', [], SIMPLE_CALENDAR_VERSION);
 		}
+		wp_enqueue_style(
+			'sc-tail-style',
+			$css_path . 'tailwind-output.css',
+			array(),
+			SIMPLE_CALENDAR_VERSION
+		);
+		wp_enqueue_style(
+			'sc-set-style',
+			$css_ungen . 'setting-page.css',
+			array(),
+			SIMPLE_CALENDAR_VERSION
+		);
 	}
 }
diff --git a/includes/admin/metaboxes/settings.php b/includes/admin/metaboxes/settings.php
@@ -36,17 +36,17 @@ public static function html($post)
 	{
 		// @see Meta_Boxes::save_meta_boxes()
 		wp_nonce_field('simcal_save_data', 'simcal_meta_nonce'); ?>
-		<div class="simcal-panels-wrap">
+		<div class="simcal-panels-wrap !simcal-text-[16px] !simcal-font-poppins" >
 
 			<span class="simcal-box-handle">
 				<?php self::settings_handle($post); ?>
 			</span>
-			<ul class="simcal-tabs">
+			<ul class="simcal-tabs simcal-font-medium simcal-text-sc_grey-200">
 				<?php self::settings_tabs($post); ?>
 				<?php do_action('simcal_settings_meta_tabs'); ?>
 			</ul>
 			<div class="simcal-panels">
-				<div id="events-settings-panel" class="simcal-panel">
+				<div id="events-settings-panel" class="simcal-panel !simcal-ml-[25%]">
 					<?php self::events_settings_panel($post); ?>
 					<?php do_action('simcal_settings_meta_events_panel', $post->ID); ?>
 				</div>
@@ -231,15 +231,15 @@ private static function events_settings_panel($post)
 		<table>
 			<thead>
 				<tr>
-					<th colspan="2"><?php _e('Event Settings', 'google-calendar-events'); ?></th>
+					<th class="!simcal-border-b-0 !simcal-pt-[25px] !simcal-text-lg !simcal-text-sc_black-100 !simcal-font-semibold " colspan="2"><?php _e('Event Settings', 'google-calendar-events'); ?></th>
 				</tr>
 			</thead>
 			<tbody class="simcal-panel-section simcal-panel-section-events-range">
-				<tr class="simcal-panel-field">
-					<th>
-						<label for="_calendar_begins"><?php _e('Calendar Start', 'google-calendar-events'); ?></label>
+				<tr class="simcal-panel-field ">
+					<th class="!simcal-w-[100%]">
+						<label class="simcal-font-normal simcal-text-sc_black-100" for="_calendar_begins"><?php _e('Calendar Start', 'google-calendar-events'); ?></label>
 					</th>
-					<td>
+					<td class="">
 						<?php
       $calendar_begins = esc_attr(get_post_meta($post->ID, '_calendar_begins', true));
       $calendar_begins_nth = max(absint(get_post_meta($post->ID, '_calendar_begins_nth', true)), 1);
@@ -263,13 +263,13 @@ private static function events_settings_panel($post)
       	'attributes' => [
       		'min' => '1',
       	],
-      	'class' => ['simcal-field-inline', 'simcal-field-tiny'],
+      	'class' => ['simcal-field-inline', 'simcal-field-tiny' , '!simcal-text-sc_grey-300 !simcal-border-sc_grey-200 '],
       	'style' => !$calendar_begins_nth_show ? ['display' => 'none'] : '',
       ]);
       ?>
 						<select name="_calendar_begins"
 								id="_calendar_begins"
-								class="simcal-field simcal-field-select simcal-field-inline simcal-field-switch-other">
+								class="simcal-field simcal-field-select simcal-field-inline simcal-field-switch-other !simcal-text-sc_grey-300 !simcal-border-sc_grey-200 !simcal-w-[81%]">
 							<optgroup label="<?php _e('Days', 'google-calendar-events'); ?>">
 								<option value="today"
 										data-hide-fields="_calendar_begins_custom_date,_calendar_begins_nth"
@@ -366,18 +366,18 @@ class="simcal-field simcal-field-select simcal-field-inline simcal-field-switch-
       	'class' => ['simcal-field-inline'],
       	'style' => 'custom_date' != $calendar_begins ? ['display' => 'none'] : '',
       ]); ?>
-						<i class="simcal-icon-help simcal-help-tip"
+						<i class="simcal-icon-help simcal-help-tip simcal-text-sc_green-200"
 						   data-tip="<?php _e(
          	'The calendar default opening date. It will automatically adapt based on the chosen calendar type.',
          	'google-calendar-events'
          ); ?>"></i>
 					</td>
 				</tr>
 				<tr class="simcal-panel-field">
-					<th>
+					<th class="!simcal-w-[100%]">
 						<label for="_feed_earliest_event_date"><?php _e('Earliest Event', 'google-calendar-events'); ?></label>
 					</th>
-					<td>
+					<td >
 						<?php
       $earliest_event_saved = get_post_meta($post->ID, '_feed_earliest_event_date', true);
       $earliest_event = false == $earliest_event_saved ? 'months_before' : esc_attr($earliest_event_saved);
@@ -391,13 +391,13 @@ class="simcal-field simcal-field-select simcal-field-inline simcal-field-switch-
       	'attributes' => [
       		'min' => '1',
       	],
-      	'class' => ['simcal-field-inline', 'simcal-field-tiny'],
+      	'class' => ['simcal-field-inline', 'simcal-field-tiny' , '!simcal-text-sc_grey-300 !simcal-border-sc_grey-200'],
       	'style' => 'now' != $earliest_event && 'today' != $earliest_event ? ['display' => 'none'] : '',
       ]);
       ?>
 						<select name="_feed_earliest_event_date"
 								id="_feed_earliest_event_date"
-								class="simcal-field simcal-field-select simcal-field-inline simcal-field-switch-other">
+								class="simcal-field simcal-field-select simcal-field-inline simcal-field-switch-other !simcal-text-sc_grey-300 !simcal-border-sc_grey-200 !simcal-w-[81%]">
 							<option value="calendar_start"
 									data-hide-field="_feed_earliest_event_date_range" <?php selected(
          	'calendar_start',
@@ -429,15 +429,15 @@ class="simcal-field simcal-field-select simcal-field-inline simcal-field-switch-
          	true
          ); ?>><?php _e('Year(s) before start date', 'google-calendar-events'); ?></option>
 						</select>
-						<i class="simcal-icon-help simcal-help-tip"
+						<i class="simcal-icon-help simcal-help-tip simcal-text-sc_green-200"
 						   data-tip="<?php _e(
          	'Set the date for the earliest possible event to show in calendar. There will not be events before this date.',
          	'google-calendar-events'
          ); ?>"></i>
 					</td>
 				</tr>
 				<tr class="simcal-panel-field">
-					<th>
+					<th class="!simcal-w-[100%]">
 						<label for="_feed_latest_event_date"><?php _e('Latest Event', 'google-calendar-events'); ?></label>
 					</th>
 					<td>
@@ -454,13 +454,13 @@ class="simcal-field simcal-field-select simcal-field-inline simcal-field-switch-
       	'attributes' => [
       		'min' => '1',
       	],
-      	'class' => ['simcal-field-inline', 'simcal-field-tiny'],
+      	'class' => ['simcal-field-inline', 'simcal-field-tiny' , '!simcal-text-sc_grey-300 !simcal-border-sc_grey-200'],
       	'style' => 'indefinite' != $latest_event ? ['display' => 'none'] : '',
       ]);
       ?>
 						<select name="_feed_latest_event_date"
 								id="_feed_latest_event_date"
-								class="simcal-field simcal-field-select simcal-field-inline simcal-field-switch-other">
+								class="simcal-field simcal-field-select simcal-field-inline simcal-field-switch-other !simcal-text-sc_grey-300 !simcal-border-sc_grey-200 !simcal-w-[81%]">
 							<option value="calendar_start"
 									data-hide-field="_feed_latest_event_date_range" <?php selected(
          	'calendar_start',
@@ -492,7 +492,7 @@ class="simcal-field simcal-field-select simcal-field-inline simcal-field-switch-
          	true
          ); ?>><?php _e('Year(s) after start date', 'google-calendar-events'); ?></option>
 						</select>
-						<i class="simcal-icon-help simcal-help-tip"
+						<i class="simcal-icon-help simcal-help-tip simcal-text-sc_green-200"
 						   data-tip="<?php _e(
          	'Set the date for the latest possible event to show on calendar. There will not be events after this date.',
          	'google-calendar-events'
@@ -515,15 +515,15 @@ class="simcal-field simcal-field-select simcal-field-inline simcal-field-switch-
 	private static function calendar_settings_panel($post)
 	{
 		?>
-		<table>
+		<table class="simcal-ml-[6%] " >
 			<thead>
 				<tr>
-					<th colspan="2"><?php _e('Miscellaneous', 'google-calendar-events'); ?></th>
+					<th class="!simcal-border-b-[0]" colspan="2"><?php _e('Miscellaneous', 'google-calendar-events'); ?></th>
 				</tr>
 			</thead>
 			<tbody class="simcal-panel-section">
 				<tr class="simcal-panel-field">
-					<th>
+					<th class="!simcal-w-[100%]">
 						<label for="_calendar_is_static"><?php _e('Static Calendar', 'google-calendar-events'); ?></label>
 					</th>
 					<td>
@@ -558,7 +558,7 @@ private static function calendar_settings_panel($post)
       		'google-calendar-events'
       	),
       	'value' => get_post_meta($post->ID, '_no_events_message', true),
-      	'placeholder' => __('There are no upcoming events.', 'google-calendar-events'),
+      	'placeholder' => __('  There are no upcoming events.', 'google-calendar-events'),
       ]); ?>
 					</td>
 				</tr>
@@ -603,7 +603,7 @@ private static function calendar_settings_panel($post)
       	'id' => '_poweredby',
       	'value' => 'yes' == $poweredby ? 'yes' : 'no',
       	'text' => __(
-      		'Yes, Simple Calendar rocks! Show some love with a little link below this calendar.',
+      		'Yes, Simple Calendar rocks! Show <br> some love with a little link below this calendar.',
       		'google-calendar-events'
       	),
       ]);?>
@@ -681,7 +681,7 @@ class="simcal-field simcal-field-select simcal-field-inline"
 							<?php echo 'use_custom' != $timezone_setting ? 'style="display: none;"' : ''; ?>>
 							<?php echo wp_timezone_choice($timezone); ?>
 						</select>
-						<i class="simcal-icon-help simcal-help-tip"
+						<i class="simcal-icon-help simcal-help-tip simcal-text-sc_green-200"
 						   data-tip="<?php _e(
          	'Using a different timezone may alter the date and time display of your calendar events. We recommended using the site default timezone.',
          	'google-calendar-events'
@@ -731,7 +731,7 @@ class="simcal-field simcal-field-select simcal-field-show-other">
          	true
          ); ?>><?php _e('Custom (PHP format)', 'google-calendar-events'); ?></option>
 						</select>
-						<i class="simcal-icon-help simcal-help-tip"
+						<i class="simcal-icon-help simcal-help-tip simcal-text-sc_green-200"
 						   data-tip="<?php _e(
          	'This option sets how calendars display event dates. It is recommended to keep your site default setting.',
          	'google-calendar-events'
@@ -850,7 +850,7 @@ class="simcal-field simcal-field-select simcal-field-show-other">
          	true
          ); ?>><?php _e('Custom (PHP format)', 'google-calendar-events'); ?></option>
 						</select>
-						<i class="simcal-icon-help simcal-help-tip"
+						<i class="simcal-icon-help simcal-help-tip simcal-text-sc_green-200"
 						   data-tip="<?php _e(
          	'This option sets how calendars display event times. It is recommended to keep your site default setting.',
          	'google-calendar-events'
@@ -926,7 +926,7 @@ class="simcal-field simcal-field-select simcal-field-inline"
 								<option value="<?php echo $i; ?>" <?php selected($i, $week_starts, true); ?>><?php echo $day_names[$i]; ?></option>
 							<?php endfor; ?>
 						</select>
-						<i class="simcal-icon-help simcal-help-tip"
+						<i class="simcal-icon-help simcal-help-tip simcal-text-sc_green-200"
 						   data-tip="<?php _e(
          	'Some calendars may use this setting to display the start of the week. It is recommended to keep the site default setting.',
          	'google-calendar-events'
@@ -988,7 +988,7 @@ class="simcal-field simcalfield-select simcal-field-inline">
        	true
        ); ?>><?php _e('Week(s)', 'google-calendar-events'); ?></option>
 						</select>
-						<i class="simcal-icon-help simcal-help-tip"
+						<i class="simcal-icon-help simcal-help-tip simcal-text-sc_green-200"
 						   data-tip="<?php _e(
          	'If you add, edit or remove events in your calendar very often, you can set a lower interval to refresh the events displayed. Set a higher interval for best performance.',
          	'google-calendar-events'

diff --git a/includes/calendars/admin/default-calendar-admin.php b/includes/calendars/admin/default-calendar-admin.php
@@ -80,18 +80,18 @@ public function settings_fields()
 	public function add_settings_meta_calendar_panel($post_id)
 	{
 		?>
-		<table id="default-calendar-settings">
+		<table id="default-calendar-settings" class="simcal-ml-[6%] simcal-font-poppins">
 			<thead>
-			<tr><th colspan="2"><?php _e('Default Calendar', 'google-calendar-events'); ?></th></tr>
+			<tr><th class="!simcal-border-b-0 !simcal-pt-7 simcal-text-base" colspan="2"><?php _e('Default Calendar', 'google-calendar-events'); ?></th></tr>
 			</thead>
 			<tbody class="simcal-panel-section">
 
 			<tr class="simcal-panel-field simcal-default-calendar-grid" style="display: none;">
-				<th><label for="_default_calendar_event_bubbles_action"><?php _e(
+				<th class="!simcal-w-[35%]"><label for="_default_calendar_event_bubbles_action"><?php _e(
     	'Event Bubbles',
     	'google-calendar-events'
     ); ?></label></th>
-				<td>
+				<td class="!simcal-pl-[36%]">
 					<?php
      $bubbles = get_post_meta($post_id, '_default_calendar_event_bubble_trigger', true);
 
@@ -116,7 +116,7 @@ public function add_settings_meta_calendar_panel($post_id)
 			</tr>
 			<tr class="simcal-panel-field simcal-default-calendar-grid" style="display: none;">
 				<th><label for="_default_calendar_trim_titles"><?php _e('Trim Event Titles', 'google-calendar-events'); ?></label></th>
-				<td>
+				<td class="!simcal-pl-[42%]">
 					<?php
      $trim = get_post_meta($post_id, '_default_calendar_trim_titles', true);
 
@@ -229,7 +229,7 @@ public function add_settings_meta_calendar_panel($post_id)
     	'Limit Visible Events',
     	'google-calendar-events'
     ); ?></label></th>
-				<td>
+				<td class="!simcal-pl-[42%]">
 					<?php
      $limit = get_post_meta($post_id, '_default_calendar_limit_visible_events', true);
 
@@ -316,10 +316,10 @@ public function add_settings_meta_calendar_panel($post_id)
    	? $settings['default-calendar']['days_events_color']
    	: '#000000';
    ?>
-			<tbody class="simcal-panel-section">
+			<tbody class="simcal-panel-section !simcal-pt-10">
 			<tr class="simcal-panel-field simcal-default-calendar-grid simcal-default-calendar-list" style="display: none;">
 				<th><label for="_default_calendar_style_theme"><?php _e('Theme', 'google-calendar-events'); ?></label></th>
-				<td>
+				<td class="!simcal-pl-[48%]">
 					<?php
      $saved = get_post_meta($post_id, '_default_calendar_style_theme', true);
      $value = !$saved ? $default_theme : $saved;
@@ -340,7 +340,7 @@ public function add_settings_meta_calendar_panel($post_id)
 			</tr>
 			<tr class="simcal-panel-field simcal-default-calendar-grid simcal-default-calendar-list" style="display: none;">
 				<th><label for="_default_calendar_style_today"><?php _e('Today', 'google-calendar-events'); ?></label></th>
-				<td>
+				<td class="!simcal-pl-[41%]">
 					<?php
      $saved = get_post_meta($post_id, '_default_calendar_style_today', true);
      $value = !$saved ? $default_today_color : $saved;
@@ -364,7 +364,7 @@ public function add_settings_meta_calendar_panel($post_id)
     	'Days with Events',
     	'google-calendar-events'
     ); ?></label></th>
-				<td>
+				<td class="!simcal-pl-[41%]">
 					<?php
      $saved = get_post_meta($post_id, '_default_calendar_style_days_events', true);
      $value = !$saved ? $default_days_events_color : $saved;