Skip to content

Commit

Permalink
column field initial
Browse files Browse the repository at this point in the history
  • Loading branch information
@sapayth
sapayth committed Nov 25, 2024
1 parent 3b59cbc commit 4443867
Show file tree
Hide file tree
Showing 7 changed files with 176 additions and 49 deletions.
9 changes: 5 additions & 4 deletions admin/form-builder/assets/js/components/builder-stage/template.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ class="wpuf-py-8">
class="wpuf-group wpuf-rounded-lg hover:wpuf-bg-green-50 wpuf-transition wpuf-duration-150 wpuf-ease-out !wpuf-m-0 !wpuf-p-0">
<div
v-if="field.input_type !== 'column_field'"
class="wpuf-flex wpuf-justify-between wpuf-p-4 wpuf-rounded-t-md wpuf-border-transparent wpuf-border-t wpuf-border-r wpuf-border-l wpuf-border-dashed wpuf-border-green-400 group-hover:wpuf-cursor-pointer">
class="wpuf-flex wpuf-justify-between wpuf-p-4 wpuf-rounded-t-md wpuf-border-transparent wpuf-border-t wpuf-border-r wpuf-border-l wpuf-border-dashed group-hover:wpuf-border-green-400 group-hover:wpuf-cursor-pointer">
<div v-if="!(is_full_width(field.template) || is_pro_feature(field.template))" class="wpuf-w-1/4">
<label
v-if="!is_invisible(field)"
Expand Down Expand Up @@ -48,10 +48,11 @@ class="wpuf-text-gray-700 wpuf-text-base"><strong>{{ get_field_name( field.templ
<component
v-if="is_template_available(field) && field.input_type === 'column_field'"
:is="'form-' + field.template"
:field="field"></component>
:field="field">
</component>
<div
class="control-buttons wpuf-opacity-0 group-hover:wpuf-opacity-100 wpuf-rounded-b-lg wpuf-bg-green-600 wpuf-flex wpuf-justify-around wpuf-items-center wpuf-transition wpuf-duration-150 wpuf-ease-out">
<div class="wpuf-flex wpuf-items-center wpuf-text-green-200">
class="control-buttons wpuf-opacity-0 group-hover:wpuf-opacity-100 wpuf-rounded-b-lg wpuf-bg-green-600 wpuf-flex wpuf-items-center wpuf-transition wpuf-duration-150 wpuf-ease-out">
<div class="wpuf-flex wpuf-justify-around wpuf-text-green-200">
<template v-if="!is_failed_to_validate(field.template)">
<span :class="action_button_classes">
<i
Expand Down
5 changes: 4 additions & 1 deletion admin/form-builder/assets/js/components/form-column_field/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ Vue.component('form-column_field', {
self.resizeColumns(self.field.columns);
});


columnFieldArea.mouseleave(function() {
columnFields.unbind( "mouseup" );
columnFields.unbind( "mousemove" );
Expand Down Expand Up @@ -120,6 +119,10 @@ Vue.component('form-column_field', {
field_settings: function () {
return this.$store.state.field_settings;
},

action_button_classes: function() {
return 'hover:wpuf-cursor-pointer hover:wpuf-text-white';
}
},

methods: {
Expand Down
86 changes: 72 additions & 14 deletions admin/form-builder/assets/js/components/form-column_field/template.php
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,25 @@
<div :class="['wpuf-flex wpuf-flex-col md:wpuf-flex-row wpuf-gap-4 wpuf-p-4 wpuf-w-full', 'has-columns-'+field.columns]">
<div :class="['wpuf-field-columns wpuf-flex wpuf-flex-col md:wpuf-flex-row wpuf-gap-4 wpuf-p-4 wpuf-w-full', 'has-columns-'+field.columns]">
<div
v-for="column in columnClasses"
class="wpuf-flex-1 wpuf-min-w-0 wpuf-min-h-full">
<div class="wpuf-column-inner-fields wpuf-border wpuf-border-dashed wpuf-border-green-400 wpuf-bg-green-50 wpuf-shadow-sm wpuf-rounded-md wpuf-p-3">
<ul class="wpuf-column-fields-sortable-list ui-sortable wpuf-space-y-3">
<div class="wpuf-column-inner-fields wpuf-border wpuf-border-dashed wpuf-border-green-400 wpuf-bg-green-50 wpuf-shadow-sm wpuf-rounded-md wpuf-p-1">
<ul class="wpuf-column-fields-sortable-list">
<li
v-for="(field, index) in column_fields[column]"
v-for="(field, innerIndex) in column_fields[column]"
:key="field.id"
:column-field-index="index"
:column-field-index="innerIndex"
:in-column="column"
data-source="column-field-stage"
class="!wpuf-m-0 !wpuf-p-0 wpuf-group/column-inner hover:wpuf-bg-green-50 wpuf-transition wpuf-duration-150 wpuf-ease-out column-field-items wpuf-el wpuf-rounded-t-md"
:class="[
'wpuf-group',
'wpuf-rounded-lg',
'hover:wpuf-bg-green-50',
'wpuf-transition',
'wpuf-duration-150',
'wpuf-ease-out',
'column-field-items',
'wpuf-el',
field.name,
field.css,
'form-field-' + field.template,
field.width ? 'field-size-' + field.width : '',
('custom_hidden_field' === field.template) ? 'hidden-field' : '',
parseInt(editing_form_id) === parseInt(field.id) ? 'current-editing' : ''
]">
<div class="wpuf-flex wpuf-flex-col md:wpuf-flex-row wpuf-gap-2 wpuf-p-2">
<div class="wpuf-flex wpuf-flex-col md:wpuf-flex-row wpuf-gap-2 wpuf-p-4 wpuf-border-transparent group-hover/column-inner:wpuf-border-green-400 wpuf-rounded-t-md wpuf-border-t wpuf-border-r wpuf-border-l wpuf-border-dashed wpuf-border-green-400">
<div
v-if="!(is_full_width(field.template) || is_pro_feature(field.template))"
class="wpuf-w-full md:wpuf-w-1/4 wpuf-shrink-0">
Expand All @@ -52,9 +45,74 @@ class="required">*</span>
:is="'form-' + field.template"
:field="field">
</component>
<div v-if="is_pro_feature(field.template)" class="stage-pro-alert wpuf-text-center">
<label class="wpuf-pro-text-alert">
<a :href="pro_link" target="_blank"
class="wpuf-text-gray-700 wpuf-text-base"><strong>{{ get_field_name( field.template )
}}</strong> <?php _e( 'is available in Pro Version', 'wp-user-frontend' ); ?></a>
</label>
</div>
</div>
</div>
</div>
<div
class="control-buttons wpuf-opacity-0 group-hover/column-inner:wpuf-opacity-100 wpuf-rounded-b-lg wpuf-bg-green-600 wpuf-items-center wpuf-transition wpuf-duration-150 wpuf-ease-out">
<div class="wpuf-items-center wpuf-text-green-200 wpuf-flex wpuf-justify-evenly wpuf-p-1">
<template v-if="!is_failed_to_validate(field.template)">
<span :class="action_button_classes">
<i
class="fa fa-arrows move wpuf-pr-2 wpuf-rounded-l-md hover:!wpuf-cursor-move wpuf-border-r wpuf-border-green-200"></i>
</span>
<span :class="action_button_classes"
@click="open_column_field_settings(field, innerIndex, column)">
<i
class="fa fa-pencil"></i>
Edit
</span>
<span :class="action_button_classes"
@click="clone_column_field(field, innerIndex, column)">
<i
class="fa fa-clone"></i>
Copy
</span>
</template>
<template v-else>
<span :class="action_button_classes">
<i class="fa fa-arrows control-button-disabled wpuf--ml-1 wpuf-rounded-l-md"></i>
</span>
<span :class="action_button_classes">
<i class="fa fa-pencil control-button-disabled wpuf--ml-1"></i>
Edit
</span>
<span :class="action_button_classes">
<i
class="fa fa-clone control-button-disabled wpuf--ml-1"></i>
Copy
</span>
</template>
<span :class="action_button_classes" @click="delete_column_field(innerIndex, column)">
<i
class="fa fa-trash-o wpuf--ml-1"></i>
Remove
</span>
<span :class="action_button_classes"
v-if="is_pro_feature(field.template)"
class="hover:wpuf-bg-green-700">
<a
:href="pro_link"
target="_blank"
class="wpuf-rounded-r-md hover:wpuf-bg-slate-500 hover:wpuf-cursor-pointer wpuf-transition wpuf-duration-150 wpuf-ease-out hover:wpuf-transition-all">
<svg
width="15" height="15" viewBox="0 0 20 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M19.2131 4.11564C19.2161 4.16916 19.2121 4.22364 19.1983 4.27775L17.9646 10.5323C17.9024 10.7741 17.6796 10.9441 17.4235 10.9455L10.0216 10.9818H10.0188H2.61682C2.35933 10.9818 2.13495 10.8112 2.07275 10.5681L0.839103 4.29542C0.824897 4.23985 0.820785 4.18385 0.824374 4.12895C0.34714 3.98269 0 3.54829 0 3.03636C0 2.40473 0.528224 1.89091 1.17757 1.89091C1.82692 1.89091 2.35514 2.40473 2.35514 3.03636C2.35514 3.39207 2.18759 3.71033 1.92523 3.92058L3.46976 5.43433C3.86011 5.81695 4.40179 6.03629 4.95596 6.03629C5.61122 6.03629 6.23596 5.7336 6.62938 5.22647L9.1677 1.95491C8.95447 1.74764 8.82243 1.46124 8.82243 1.14545C8.82243 0.513818 9.35065 0 10 0C10.6493 0 11.1776 0.513818 11.1776 1.14545C11.1776 1.45178 11.0526 1.72982 10.8505 1.93556L10.8526 1.93811L13.3726 5.21869C13.7658 5.73069 14.3928 6.03636 15.0499 6.03636C15.6092 6.03636 16.1351 5.82451 16.5305 5.43978L18.0848 3.92793C17.8169 3.71775 17.6449 3.39644 17.6449 3.03636C17.6449 2.40473 18.1731 1.89091 18.8224 1.89091C19.4718 1.89091 20 2.40473 20 3.03636C20 3.53462 19.6707 3.9584 19.2131 4.11564ZM17.8443 12.6909C17.8443 12.3897 17.5932 12.1455 17.2835 12.1455H2.77884C2.46916 12.1455 2.21809 12.3897 2.21809 12.6909V14C2.21809 14.3012 2.46916 14.5455 2.77884 14.5455H17.2835C17.5932 14.5455 17.8443 14.3012 17.8443 14V12.6909Z"
fill="#FB9A28"/>
</svg>
</a>
</span>
</div>
</div>
</li>
</ul>
</div>
Expand Down
23 changes: 13 additions & 10 deletions assets/css/admin/form-builder.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2516,6 +2516,10 @@ html {
justify-content: space-around;
}

.wpuf-justify-evenly {
justify-content: space-evenly;
}

.wpuf-gap-2 {
gap: 0.5rem;
}
Expand Down Expand Up @@ -2556,12 +2560,6 @@ html {
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.wpuf-space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.wpuf-space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
Expand Down Expand Up @@ -2906,10 +2904,6 @@ html {
padding: 0.5rem;
}

.wpuf-p-3 {
padding: 0.75rem;
}

.wpuf-p-4 {
padding: 1rem;
}
Expand Down Expand Up @@ -3877,6 +3871,11 @@ html {
border-style: dashed;
}

.wpuf-group\/column-inner:hover .group-hover\/column-inner\:wpuf-border-green-400 {
--tw-border-opacity: 1;
border-color: rgb(74 222 128 / var(--tw-border-opacity));
}

.wpuf-group:hover .group-hover\:wpuf-border-green-400 {
--tw-border-opacity: 1;
border-color: rgb(74 222 128 / var(--tw-border-opacity));
Expand All @@ -3886,6 +3885,10 @@ html {
stroke: #6b7280;
}

.wpuf-group\/column-inner:hover .group-hover\/column-inner\:wpuf-opacity-100 {
opacity: 1;
}

.wpuf-group:hover .group-hover\:wpuf-opacity-100 {
opacity: 1;
}
Expand Down
Loading

0 comments on commit 4443867

Please sign in to comment.