🎆 NEW: Z-INDEX, SPINNER ICONS, MORE.

- Added: Option, modal z-index. - Added: Option, modal border radius. - Added: Option, spinner icons. - Added: Option, spinner icon font size.
addonify · Jul 21, 2023 · d8d2d86 · d8d2d86
1 parent 6a7e81c
commit d8d2d86
Show file tree

Hide file tree

Showing 15 changed files with 311 additions and 34 deletions.
diff --git a/admin/assets/css/admin.css b/admin/assets/css/admin.css
diff --git a/admin/assets/js/main.js b/admin/assets/js/main.js
diff --git a/admin/assets/js/vendor.js b/admin/assets/js/vendor.js
diff --git a/admin/assets/scss/layouts/_entry.scss b/admin/assets/scss/layouts/_entry.scss
@@ -47,6 +47,95 @@
         line-height: 1;
         @include transation_delay();
     }
+
+    // Draggable
+    .adfy-draggable-elements {
+
+		> div {
+
+			@include flex();
+			flex-direction: column;
+            border-radius: 10px;
+            overflow: hidden;
+            border: 1px solid var(--addonify_border_color);
+
+			.adfy-draggable-element {
+
+				display: block;
+				padding: 20px;
+				cursor: move;
+                background-color: transparent;
+                box-shadow: 0 0 10px rgba(0, 0, 0, 0);
+                border-bottom: 1px solid var(--addonify_border_color);
+                overflow: auto;
+                opacity: 1;
+                visibility: visible;
+
+                &:last-child {
+
+                    border-bottom: none;
+                }
+
+                &.sortable-chosen {
+
+                    border-bottom-color: transparent;
+                }
+
+                &.sortable-ghost {
+
+                    opacity: 0;
+                    visibility: hidden;
+                }
+
+                .adfy-draggable-box {
+
+                    display: grid;
+                    column-gap: 10px;
+                    grid-template-columns: 50px 1fr;
+                    align-items: center;
+
+                     .draggable-switch {
+
+                        .el-switch {
+
+                            margin: 0;
+                            height: auto;
+                        }
+                    }
+
+                    .label-icon-box {
+
+                        @include flex();
+                        flex-direction: row;
+                        justify-content: space-between;
+                        align-items: center;
+
+                        .option-label {
+
+
+                        }
+
+                        .option-icon {
+
+                            display: inline-flex;
+                            align-items: center;
+                            line-height: 1;
+
+                            svg {
+
+                                width: 22px;
+                                height: 22px;
+                                line-height: 1;
+                                fill: #bbbbbb;
+                                color: #bbbbbb;
+                                @include transation_delay();
+                            }
+                        }
+                    }
+                }
+			}
+		}
+	}
 }
 
 .adfy-navigation {

diff --git a/admin/src/components/inputs/Number.vue b/admin/src/components/inputs/Number.vue
@@ -1,10 +1,38 @@
 <script setup>
 	import { computed } from "vue";
-	import { ElInput } from "element-plus";
+	import { ElInput, ElInputNumber } from "element-plus";
+
 	const props = defineProps({
-		modelValue: [String, Number], // loose strict checking.
-		min: Number,
-		max: Number,
+		modelValue: {
+			type: [Number, String],
+			required: true,
+		},
+		min: {
+			type: [String, Number],
+			required: false,
+		},
+		max: {
+			type: [String, Number],
+			required: false,
+		},
+		step: {
+			type: [String, Number],
+			required: false,
+		},
+		precision: {
+			type: [String, Number],
+			required: false,
+		},
+		placeholder: {
+			type: String,
+			required: false,
+			default: "",
+		},
+		style: {
+			type: String,
+			required: false,
+			default: "default",
+		},
 	});
 
 	// Ref: https://vuejs.org/guide/components/events.html#usage-with-v-model
@@ -17,8 +45,49 @@
 			emit("update:modelValue", newValue);
 		},
 	});
-	const { min, max } = props;
+
+	const { style, min, max, precision, step, placeholder } = props;
 </script>
 <template>
-	<el-input type="number" v-model="value" :min="min ? min : 0" :max="max" />
+	<template v-if="style === 'default'">
+		<el-input
+			type="number"
+			v-model="value"
+			:min="min ? min : 0"
+			:max="max"
+			:step="step"
+			:precision="precision"
+			:placeholder="placeholder"
+		/>
+	</template>
+	<template v-if="style === 'buttons-plus-minus'">
+		<el-input-number
+			v-model="value"
+			size="large"
+			:min="min ? min : 0"
+			:max="max ? max : 365"
+			:step="step"
+			:precision="precision"
+			:placeholder="placeholder"
+		/>
+	</template>
+	<template v-if="style === 'buttons-arrows'">
+		<el-input-number
+			v-model="value"
+			size="large"
+			:min="min ? min : 0"
+			:max="max ? max : 365"
+			controls-position="right"
+			:step="step"
+			:precision="precision"
+			:placeholder="placeholder"
+		/>
+	</template>
 </template>
+<style lang="scss">
+	.adfy-options {
+		.el-input-number--large {
+			width: 140px;
+		}
+	}
+</style>
diff --git a/admin/src/components/inputs/NumberToggleButton.vue b/admin/src/components/inputs/NumberToggleButton.vue
@@ -27,10 +27,4 @@
 		:max="max ? max : 365"
 	/>
 </template>
-<style lang="scss">
-	.adfy-options {
-		.el-input-number--large {
-			width: 140px;
-		}
-	}
-</style>
+
diff --git a/admin/src/components/inputs/RadioIcon.vue b/admin/src/components/inputs/RadioIcon.vue
@@ -1,6 +1,7 @@
 <script setup>
 	import { computed } from "vue";
 	import { ElRadio, ElRadioGroup } from "element-plus";
+
 	const props = defineProps({
 		modelValue: String,
 		choices: [Object, Array],
@@ -18,20 +19,46 @@
 	});
 </script>
 <template>
-	<el-radio-group v-model="vModalVal" v-for="(value, key) in props.choices">
-		<el-radio :label="key" size="large" border>
+	<el-radio-group v-model="vModalVal">
+		<el-radio
+			v-for="(value, key) in props.choices"
+			:label="key"
+			size="large"
+			border
+		>
 			<span v-html="value"></span>
 		</el-radio>
 	</el-radio-group>
 </template>
 <style lang="scss">
-	.radio-input-group {
+	.adfy-options {
 		.el-radio-group {
+			display: flex;
+			align-items: center;
+			gap: 20px;
 			.el-radio {
+				display: inline-flex;
+				gap: 10px;
 				align-items: center;
+				margin: 0;
+				padding: 10px 20px;
+				height: auto;
+
+				span {
+					line-height: 1;
+				}
 
-				.adfy-wishlist-icon {
-					font-size: 14px;
+				.el-radio__label {
+					padding: 0;
+					svg {
+						display: inline-flex;
+						align-items: center;
+						justify-content: center;
+						fill: #464646;
+						width: 20px;
+						height: 20px;
+						line-height: 1;
+					}
 				}
 			}
 		}

diff --git a/admin/src/components/partials/InputControl.vue b/admin/src/components/partials/InputControl.vue
@@ -7,6 +7,7 @@
 	import Checkbox from "../inputs/Checkbox.vue";
 	import CheckboxButton from "../inputs/CheckboxButton.vue";
 	import Radio from "../inputs/Radio.vue";
+	import RadioIcon from "../inputs/RadioIcon.vue";
 	import ColorPicker from "../inputs/ColorPicker.vue";
 	import InvalidControl from "../inputs/InvalidControl.vue";
 	const props = defineProps({
@@ -53,12 +54,22 @@
 		v-else-if="props.field.type == 'number'"
 		v-model="props.reactiveState[props.fieldKey]"
 		:placeholder="props.field.placeholder"
+		:style="props.field.style"
+		:min="props.field.min"
+		:max="props.field.max"
+		:step="props.field.step"
+		:precision="props.field.precision"
 	/>
 	<Radio
 		v-else-if="props.field.type == 'radio'"
 		v-model="props.reactiveState[props.fieldKey]"
 		:choices="props.field.choices"
 	/>
+	<RadioIcon
+		v-else-if="props.field.type == 'radio-icons'"
+		v-model="props.reactiveState[props.fieldKey]"
+		:choices="props.field.choices"
+	/>
 	<ColorPicker
 		v-else-if="props.field.type == 'color'"
 		v-model:colorVal="props.reactiveState[props.fieldKey]"

diff --git a/includes/functions/fields/modal-box.php b/includes/functions/fields/modal-box.php
@@ -54,6 +54,7 @@ function addonify_quick_view_modal_box_content_settings_fields() {
             ),
             'modal_opening_animation' => array(
                 'label'         => __( 'Modal opening animation', 'addonify-quick-view' ),
+                'description'   => __( 'Choose animation effect when modal opens.', 'addonify-quick-view' ),
                 'dependent'     => array('enable_quick_view'),
                 'type'          => 'select',
                  'choices'      => array(
@@ -71,6 +72,7 @@ function addonify_quick_view_modal_box_content_settings_fields() {
             ),
             'modal_closing_animation' => array(
                 'label'         => __( 'Modal closing animation', 'addonify-quick-view' ),
+                'description'   => __( 'Choose animation effect when modal close.', 'addonify-quick-view' ),
                 'dependent'     => array('enable_quick_view'),
                 'type'          => 'select',
                  'choices'      => array(
@@ -89,12 +91,62 @@ function addonify_quick_view_modal_box_content_settings_fields() {
                 'dependent'     => array('enable_quick_view'),
                 'type'          => 'switch'
             ),
-             'read_more_button_label' => array(
+            'read_more_button_label' => array(
                 'label'         => __( 'View Detail Button Label', 'addonify-quick-view' ),
                 'placeholder'   => __( 'View Detail', 'addonify-quick-view'), 
                 'type'          => 'text',
                 'dependent'     => array('enable_quick_view', 'display_read_more_button'),
             ),
+            'modal_zindex' => array(
+                'label'         => __( 'Modal z-index', 'addonify-quick-view' ),
+                'description'   => __( 'Do not change the value unless you know what you are doing.', 'addonify-quick-view'),
+                'placeholder'   => __( '10000000000000000', 'addonify-quick-view' ),
+                'type'          => 'number',
+                'style'         => 'buttons-arrows',
+                'min'           => 0,
+                'max'           => 1000000000000000000,
+                'step'          => 10,
+                'dependent'     => array('enable_quick_view', 'display_read_more_button'),
+            ),
+            'modal_border_radius' => array(
+                'label'         => __( 'Modal border radius', 'addonify-quick-view' ),
+                'description'   => __( 'Border radius of addonify quick view modal box in px.', 'addonify-quick-view'),
+                'placeholder'   => __( '10', 'addonify-quick-view' ),
+                'type'          => 'number',
+                'style'         => 'buttons-arrows',
+                'min'           => 0,
+                'max'           => 100,
+                'step'          => 1,
+                'dependent'     => array('enable_quick_view', 'display_read_more_button'),
+            ),
+            'spinner_icons'     => array(
+                'label'         => __( 'Spinner icon', 'addonify-quick-view' ),
+                'description'   => __( 'Choose modal spinner icon', 'addonify-quick-view' ),
+                'dependent'     => array('enable_quick_view'),
+                'type'          => 'radio-icons',
+                'className'     => 'fullwidth', 
+                'choices'       => array(
+                    'icon_one'     => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C12.5523 2 13 2.44772 13 3V6C13 6.55228 12.5523 7 12 7C11.4477 7 11 6.55228 11 6V3C11 2.44772 11.4477 2 12 2ZM12 17C12.5523 17 13 17.4477 13 18V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V18C11 17.4477 11.4477 17 12 17ZM22 12C22 12.5523 21.5523 13 21 13H18C17.4477 13 17 12.5523 17 12C17 11.4477 17.4477 11 18 11H21C21.5523 11 22 11.4477 22 12ZM7 12C7 12.5523 6.55228 13 6 13H3C2.44772 13 2 12.5523 2 12C2 11.4477 2.44772 11 3 11H6C6.55228 11 7 11.4477 7 12ZM19.0711 19.0711C18.6805 19.4616 18.0474 19.4616 17.6569 19.0711L15.5355 16.9497C15.145 16.5592 15.145 15.9261 15.5355 15.5355C15.9261 15.145 16.5592 15.145 16.9497 15.5355L19.0711 17.6569C19.4616 18.0474 19.4616 18.6805 19.0711 19.0711ZM8.46447 8.46447C8.07394 8.85499 7.44078 8.85499 7.05025 8.46447L4.92893 6.34315C4.53841 5.95262 4.53841 5.31946 4.92893 4.92893C5.31946 4.53841 5.95262 4.53841 6.34315 4.92893L8.46447 7.05025C8.85499 7.44078 8.85499 8.07394 8.46447 8.46447ZM4.92893 19.0711C4.53841 18.6805 4.53841 18.0474 4.92893 17.6569L7.05025 15.5355C7.44078 15.145 8.07394 15.145 8.46447 15.5355C8.85499 15.9261 8.85499 16.5592 8.46447 16.9497L6.34315 19.0711C5.95262 19.4616 5.31946 19.4616 4.92893 19.0711ZM15.5355 8.46447C15.145 8.07394 15.145 7.44078 15.5355 7.05025L17.6569 4.92893C18.0474 4.53841 18.6805 4.53841 19.0711 4.92893C19.4616 5.31946 19.4616 5.95262 19.0711 6.34315L16.9497 8.46447C16.5592 8.85499 15.9261 8.85499 15.5355 8.46447Z"></path></svg>',
+                    'icon_two'     => '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/></svg>',
+                    'icon_three'   => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.364 5.63604L16.9497 7.05025C15.683 5.7835 13.933 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12H21C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63604Z"></path></svg>',
+                    'icon_four'    => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4C9.25144 4 6.82508 5.38626 5.38443 7.5H8V9.5H2V3.5H4V5.99936C5.82381 3.57166 8.72764 2 12 2C17.5228 2 22 6.47715 22 12H20C20 7.58172 16.4183 4 12 4ZM4 12C4 16.4183 7.58172 20 12 20C14.7486 20 17.1749 18.6137 18.6156 16.5H16V14.5H22V20.5H20V18.0006C18.1762 20.4283 15.2724 22 12 22C6.47715 22 2 17.5228 2 12H4Z"></path></svg>',
+                    'icon_five'    => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.9999 2.04932L11 5.07082C7.6077 5.55605 5 8.47346 5 11.9999C5 15.8659 8.13401 18.9999 12 18.9999C13.5723 18.9999 15.0236 18.4815 16.1922 17.6063L18.3289 19.7427C16.605 21.1535 14.4014 21.9999 12 21.9999C6.47715 21.9999 2 17.5228 2 11.9999C2 6.81462 5.94662 2.55109 10.9999 2.04932ZM21.9506 13C21.7509 15.011 20.9555 16.8467 19.7433 18.3282L17.6064 16.1921C18.2926 15.2759 18.7595 14.1859 18.9291 12.9999L21.9506 13ZM13.0011 2.04942C17.725 2.51895 21.4815 6.27583 21.9506 10.9998L18.9291 10.9997C18.4905 7.93446 16.0661 5.50985 13.001 5.07096L13.0011 2.04942Z"></path></svg>',
+                    'icon_six'      => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+                    <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484-.08.08-.162.158-.242.234-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"/>
+                    </svg>'
+                )
+            ),
+            'spinner_size' => array(
+                'label'         => __( 'Spinner font size', 'addonify-quick-view' ),
+                'description'   => __( 'Specify the font size of the modal spinner in px.', 'addonify-quick-view'),
+                'placeholder'   => __( '28', 'addonify-quick-view' ),
+                'type'          => 'number',
+                'style'         => 'buttons-plus-minus',
+                'min'           => 14,
+                'max'           => 100,
+                'step'          => 2,
+                'dependent'     => array('enable_quick_view', 'display_read_more_button'),
+            ),
         );
     }
 }

diff --git a/includes/functions/settings.php b/includes/functions/settings.php
@@ -47,6 +47,10 @@ function addonify_quick_view_settings_fields_defaults() {
 				'modal_closing_animation'             => 'bounce-out', // NEW
 				'close_modal_when_esc_pressed'		  => '1', // NEW
 				'close_modal_when_clicked_outside'	  => false, // NEW
+				'modal_zindex'	  					  => '10000000000000000', // NEW
+				'modal_border_radius'				  => '10', // NEW
+				'spinner_icons' 					  => 'icon_one', // NEW
+				'spinner_size' 					  	  => 28, // NEW
 
 				'read_more_button_label'              => __( 'View Detail', 'addonify-quick-view' ),
 				// Styles.