Commit a8b75e83 authored by Kevin Stover's avatar Kevin Stover

Merge branch '3.0' into 3.0-alpha

parents a38d66c4 333a5e53
......@@ -41,6 +41,9 @@ Header and Nav for Ninja Forms App
#nf-app-sub-header h2 { display: inline-block; margin: 0; padding: 10px 0; -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; }
#nf-app-sub-header:after { clear: both; content: ""; display: block; }
.nf-app-buttons { float: right; }
.nf-app-buttons .publish { float: right; }
#nf-main { background: #fff; border: 4px solid #fff; width: 100%; position: absolute; top: 125px; bottom: 0; left: 0; overflow: scroll; -webkit-overflow-scrolling: touch; -webkit-transition: left 0.5s ease; transition: left 0.5s ease; }
#nf-main-content, #nf-main-header { margin: 0 auto; max-width: 700px; -webkit-transition: all 1.0s ease; transition: all 1.0s ease; }
......@@ -169,9 +172,9 @@ All styles used within the drawer
.nf-menu-expand #nf-main { left: -250px; -webkit-transition: left 0.75s ease; transition: left 0.75s ease; }
.nf-button { border: 0; border-radius: 4px; cursor: pointer; display: inline-block; font-size: 17px; padding: 10px 30px; text-decoration: none; text-transform: uppercase; -webkit-appearance: none; -moz-appearance: none; }
.nf-button.primary { background: #1EA9EA; color: #fff; }
.nf-button.primary { background: #1EA9EA; border: 1px solid #1EA9EA; color: #fff; }
.nf-button.secondary { background: #fff; border: 1px solid #1EA9EA; color: #1EA9EA; }
.nf-button.disabled { background: #ccc; }
.nf-button.disabled { background: #ccc; border: 1px solid #ccc; cursor: default; }
.nf-cancel { color: #999; font-size: 15px; }
......@@ -227,6 +230,10 @@ All styles used within the drawer
table.nf-changes tr td { border-bottom: 1px solid #ccc; }
table.nf-changes tr.disabled-row td { color: #bbb; }
table.nf-changes tr:nth-child(even) td { background: #e5e7e8 !important; }
table.nf-changes tr:hover td { background: #fff !important; }
.nf-button.undoChanges .dashicons { font-size: 18px; height: 18px; width: 18px; margin-right: 5px; }
/*
Various custom field styles
......@@ -241,7 +248,7 @@ input[type=checkbox].nf-toggle { background: transparent; border: 0; box-shadow:
input[type=checkbox].nf-toggle::after { background: #BCBDBF; border: 2px solid #BCBDBF; border-radius: 20px; content: ""; position: absolute; top: -4px; left: -4px; width: 40px; height: 20px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
input[type=checkbox].nf-toggle::before { background: #fff; border-radius: 20px; content: ""; position: absolute; top: -1px; left: 0; width: 18px; height: 18px; z-index: 99; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
input[type=checkbox].nf-toggle:checked::after { background: #84CC1E; border: 2px solid #84CC1E; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
input[type=checkbox].nf-toggle:checked::before { top: 2px; left: 22px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
input[type=checkbox].nf-toggle:checked::before { content: ""; top: 2px; left: 22px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.ninja-forms-app .nf-select { position: relative; }
.ninja-forms-app .nf-select select { background: #f9f9f9; border: 0; margin-top: 5px; height: 43px !important; padding: 0 30px 0 15px; width: 100%; -webkit-appearance: none; }
......@@ -337,6 +344,20 @@ All styles used for displaying table content
.nf-settings .toggle { cursor: pointer; }
.nf-loading { background: #1EA9EA; border-radius: 4px; width: 40px; margin: 0 auto; position: relative; }
.nf-loading ul { list-style: none; margin: 0; padding: 0; position: relative; top: -10px; left: 0; font-size: 0; }
.nf-loading ul li { height: 0; position: absolute; top: 50%; left: 0; width: 0; margin: 0; height: 10px; width: 10px; border: 3px solid #fff; border-radius: 100%; -webkit-transform: transformZ(0); -ms-transform: transformZ(0); transform: transformZ(0); -webkit-animation: LOADING 2s infinite; animation: LOADING 2s infinite; }
.nf-loading ul li:nth-child(1n) { left: 0; -webkit-animation-delay: 0s; animation-delay: 0s; }
.nf-loading ul li:nth-child(2n) { left: 15px; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.nf-loading ul li:nth-child(3n) { left: 30px; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
@-webkit-keyframes LOADING { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); background: #fff; }
50% { -webkit-transform: scale(1); transform: scale(1); background: #fff; }
100% { -webkit-transform: scale(0.5); transform: scale(0.5); background: #fff; } }
@keyframes LOADING { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); background: #fff; }
50% { -webkit-transform: scale(1); transform: scale(1); background: #fff; }
100% { -webkit-transform: scale(0.5); transform: scale(0.5); background: #fff; } }
@media only screen and (max-width: 1255px) { .nf-cancel { display: none; }
#nf-app-sub-header h2 { padding-left: 80px; -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; } }
@media only screen and (max-width: 1132px) { #nf-header .preview { content: "Preview"; }
......
This diff is collapsed.
......@@ -33,6 +33,9 @@ define( [], function() {
}
}
nfRadio.channel( 'app' ).request( 'update:setting', 'loading', false );
nfRadio.channel( 'app' ).trigger( 'change:loading' );
// Mark our app as clean. This will disable the publish button and fire anything else that cares about the state.
nfRadio.channel( 'app' ).request( 'update:setting', 'clean', true );
}
......
......@@ -28,6 +28,7 @@ define( [], function() {
if ( nfRadio.channel( 'app' ).request( 'get:setting', 'clean' ) ) {
return false;
}
// Default action to preview.
action = action || 'preview';
......@@ -83,6 +84,11 @@ define( [], function() {
data = JSON.stringify( data );
// Run anything that needs to happen before we update.
nfRadio.channel( 'app' ).trigger( 'before:updateDB', data );
if ( 'publish' == action ) {
nfRadio.channel( 'app' ).request( 'update:setting', 'loading', true );
nfRadio.channel( 'app' ).trigger( 'change:loading' );
}
// Update
jQuery.post( ajaxurl, { action: jsAction, form: data, security: nfAdmin.ajaxNonce }, function( response ) {
response = JSON.parse( response );
......
......@@ -40,7 +40,7 @@ define( ['builder/models/fields/listOptionModel', 'builder/models/fields/listOpt
createOptionCollection: function( model ) {
var options = model.get( 'options' );
if ( ! options ) {
model.set( 'options', [ { calc: 1, label: 'One', value: 'one', order: 0 }, { calc: 2, label: 'Two', value: 'two', order: 1 }, { calc: 3, label: 'Three', value: 'three', order: 2 } ], { silent: true } );
model.set( 'options', [ { calc: 1, label: 'One', value: 'one', order: 0, selected: 0 }, { calc: 2, label: 'Two', value: 'two', order: 1, selected: 0 }, { calc: 3, label: 'Three', value: 'three', order: 2, selected: 0 } ], { silent: true } );
}
if ( false == options instanceof Backbone.Collection ) {
......@@ -61,8 +61,18 @@ define( ['builder/models/fields/listOptionModel', 'builder/models/fields/listOpt
*/
changeOption: function( e, model, fieldModel ) {
var name = jQuery( e.target ).data( 'id' );
var value = jQuery( e.target ).val();
if ( 'selected' == name ) {
if ( jQuery( e.target ).attr( 'checked' ) ) {
var value = 1;
} else {
var value = 0;
}
} else {
var value = jQuery( e.target ).val();
}
var before = model.get( name );
model.set( name, value );
// Triger an update on our fieldModel
this.triggerFieldModel( model, fieldModel );
......@@ -78,7 +88,7 @@ define( ['builder/models/fields/listOptionModel', 'builder/models/fields/listOpt
var label = {
object: 'Field',
label: fieldModel.get( 'label' ),
change: 'Option ' + name + ' changed from ' + before + ' to ' + after
change: 'Option ' + model.get( 'label' ) + ' ' + name + ' changed from ' + before + ' to ' + after
};
nfRadio.channel( 'changes' ).request( 'register:change', 'changeSetting', model, changes, label );
......@@ -93,7 +103,7 @@ define( ['builder/models/fields/listOptionModel', 'builder/models/fields/listOpt
* @return void
*/
addOption: function( collection, fieldModel ) {
var model = new listOptionModel( { label: '', value: '', calc: '', order: collection.length } );
var model = new listOptionModel( { label: '', value: '', calc: '', selected: 0, order: collection.length } );
collection.add( model );
// Add our field addition to our change log.
......
......@@ -9,6 +9,10 @@
*/
define( [], function() {
var model = Backbone.Model.extend( {
defaults: {
loading: false
},
initialize: function() {
// Listen to changes to our 'clean' attribute.
this.on( 'change:clean', this.changeStatus, this );
......
......@@ -14,7 +14,7 @@ define( [], function() {
active: false,
url: '',
hotkeys: false,
disabled: false
disabled: false
}
} );
......
......@@ -19,6 +19,7 @@ define( [], function() {
onShow: function() {
jQuery( this.el ).parent().perfectScrollbar();
nfRadio.channel( 'main' ).trigger( 'show:main' );
jQuery( this.el ).parent().disableSelection();
},
onRender: function() {
......
......@@ -14,6 +14,7 @@ define( [], function() {
initialize: function() {
// Listen to changes on the app 'clean' state. When it changes, re-render.
this.listenTo( nfRadio.channel( 'app' ), 'change:clean', this.render, this );
this.listenTo( nfRadio.channel( 'app' ), 'change:loading', this.render, this );
},
/**
......@@ -23,7 +24,28 @@ define( [], function() {
* @return Object
*/
templateHelpers: function () {
var that = this;
return {
/**
* Render our Publish button. If we're loading, render the loading version.
*
* @since 3.0
* @return string
*/
renderPublish: function() {
if ( that.publishWidth ) {
this.publishWidth = 'style="width:' + that.publishWidth + 'px !important"';
} else {
this.publishWidth = '';
}
if ( nfRadio.channel( 'app' ).request( 'get:setting', 'loading' ) ) {
return _.template( jQuery( '#nf-tmpl-add-header-publish-loading' ).html(), this );
} else {
return _.template( jQuery( '#nf-tmpl-app-header-publish-button' ).html(), this );
}
},
/**
* If our app state is clean, disable publish.
*
......@@ -53,6 +75,11 @@ define( [], function() {
};
},
onShow: function() {
var publishEL = jQuery( this.el ).find( '.publish' );
this.publishWidth = jQuery( publishEL ).outerWidth( true );
},
/**
* Listen for clicks on the Publish or view changes button.
* @type {Object}
......
......@@ -47,6 +47,7 @@ All styles used for displaying table content
@import "scrollbar";
@import "drag-drop";
@import "loading";
@import "media-queries";
......
......@@ -8,5 +8,25 @@ table.nf-changes {
color: #bbb;
}
}
&:nth-child(even) {
td {
background: #e5e7e8 !important;
}
}
&:hover {
td {
background: #fff !important;
}
}
}
}
.nf-button {
&.undoChanges {
.dashicons {
font-size: 18px;
height: 18px;
width: 18px;
margin-right: 5px;
}
}
}
......@@ -11,6 +11,7 @@
-moz-appearance: none;
&.primary {
background: $cta_color;
border: 1px solid #1EA9EA;
color: #fff;
}
&.secondary {
......@@ -20,6 +21,8 @@
}
&.disabled {
background: #ccc;
border: 1px solid #ccc;
cursor: default;
}
}
.nf-cancel {
......
......@@ -88,3 +88,9 @@
display: block;
}
}
.nf-app-buttons {
float: right;
.publish {
float: right;
}
}
.nf-loading {
background: #1EA9EA;
border-radius: 4px;
width: 40px;
margin: 0 auto;
position: relative;
ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
top: -10px;
left: 0;
font-size: 0;
li {
height: 0;
position: absolute;
top: 50%;
left: 0;
width: 0;
margin: 0;
height: 10px;
width: 10px;
border: 3px solid #fff;
border-radius: 100%;
transform: transformZ(0);
animation: LOADING 2s infinite;
&:nth-child(1n) {
left: 0;
animation-delay: 0s;
}
&:nth-child(2n) {
left: 15px;
animation-delay: 0.2s;
}
&:nth-child(3n) {
left: 30px;
animation-delay: 0.4s;
}
}
}
}
@keyframes LOADING {
0% {
transform: scale(0.5);
background: #fff;
}
50% {
transform: scale(1);
background: #fff;
}
100% {
transform: scale(0.5);
background: #fff;
}
}
......@@ -40,6 +40,7 @@ input[type=checkbox].nf-toggle {
transition: all 0.3s ease;
}
&::before {
content: "";
top: 2px;
left: 22px;
transition: all 0.3s ease;
......
......@@ -178,6 +178,22 @@
"shouldRunBless": 0,
"useLibsass": 0
},
"\/admin\/loading.scss": {
"createSourceMap": 0,
"debugStyle": 0,
"decimalPrecision": 10,
"fileType": 4,
"ignore": 1,
"ignoreWasSetByUser": 0,
"inputAbbreviatedPath": "\/admin\/loading.scss",
"outputAbbreviatedPath": "\/css\/loading.css",
"outputPathIsOutsideProject": 0,
"outputPathIsSetByUser": 0,
"outputStyle": 0,
"shouldRunAutoprefixer": 0,
"shouldRunBless": 0,
"useLibsass": 0
},
"\/admin\/main-fields.scss": {
"createSourceMap": 0,
"debugStyle": 0,
......
......@@ -18,7 +18,14 @@ abstract class NF_Abstracts_UserInfo extends NF_Fields_Textbox
parent::__construct();
$this->_settings = $this->load_settings(
array( 'label', 'label_pos', 'required', 'user_info_default_value', 'placeholder', 'classes' )
array( 'label', 'label_pos', 'required', 'default', 'placeholder', 'classes' )
);
$this->_settings[ 'default' ][ 'settings' ][ 'default_type' ][ 'options' ][] = array(
'label' => __( 'User Meta (if logged in)', 'ninja-forms' ),
'value' => 'user-meta'
);
$this->_settings[ 'default' ][ 'settings' ][ 'default_type' ][ 'value' ] = 'user-meta';
}
}
......@@ -129,7 +129,13 @@ final class NF_Admin_Menus_Forms extends NF_Abstracts_Menu
foreach( $settings as $setting ){
$group = $setting[ 'group' ];
$settings_groups[ $group ][ 'settings' ][] = $setting;
if( 'fieldset' == $setting[ 'type' ] ){
// Remove array keys for localization
$setting[ 'settings' ] = array_values( $setting[ 'settings' ] );
}
$settings_groups[$group]['settings'][] = $setting;
if( isset( $setting[ 'name' ] ) ){
......
......@@ -123,54 +123,54 @@ return apply_filters( 'ninja-forms-field-settings', array(
*/
// 'default' => array(
// 'name' => 'default',
// 'type' => 'fieldset',
// 'label' => __( 'Default Value', 'ninja-forms' ),
// 'width' => 'full',
// 'group' => 'advanced',
// 'value' => 'none',
// 'settings' => array(
// array(
// 'name' => 'default_type',
// 'label' => 'Type',
// 'type' => 'select',
// 'options' => array(
// array(
// 'value' => 'none',
// 'label' => __( 'None', 'ninja-forms' )
// ),
// array(
// 'value' => 'post_id',
// 'label' => __( 'Post / Page ID', 'ninja-forms' )
// ),
// array(
// 'value' => 'post_title',
// 'label' => __( 'Post / Page Title', 'ninja-forms' )
// ),
// array(
// 'value' => 'post_url',
// 'label' => __( 'Post / Page URL', 'ninja-forms' )
// ),
// array(
// 'value' => 'query_string',
// 'label' => __( 'Query String Variable', 'ninja-forms' )
// ),
// array(
// 'value' => 'custom',
// 'label' => __( 'Custom Default Value', 'ninja-forms' )
// )
// ),
// ),
// array(
// 'name' => 'default_value',
// 'label' => 'Value',
// 'type' => 'textbox',
// 'width' => 'one-half',
// 'value' => ''
// )
// )
// ),
'default' => array(
'name' => 'default',
'type' => 'fieldset',
'label' => __( 'Default Value', 'ninja-forms' ),
'width' => 'full',
'group' => 'advanced',
'value' => 'none',
'settings' => array(
'default_type' => array(
'name' => 'default_type',
'label' => 'Type',
'type' => 'select',
'options' => array(
array(
'value' => 'none',
'label' => __( 'None', 'ninja-forms' )
),
array(
'value' => 'post_id',
'label' => __( 'Post / Page ID', 'ninja-forms' )
),
array(
'value' => 'post_title',
'label' => __( 'Post / Page Title', 'ninja-forms' )
),
array(
'value' => 'post_url',
'label' => __( 'Post / Page URL', 'ninja-forms' )
),
array(
'value' => 'query_string',
'label' => __( 'Query String Variable', 'ninja-forms' )
),
array(
'value' => 'custom',
'label' => __( 'Custom Default Value', 'ninja-forms' )
)
),
),
array(
'name' => 'default_value',
'label' => 'Value',
'type' => 'textbox',
'width' => 'one-half',
'value' => ''
)
)
),
/*
* CLASSES
......@@ -207,24 +207,24 @@ return apply_filters( 'ninja-forms-field-settings', array(
* Checkbox Default Value
*/
// 'checkbox_default_value' => array(
// 'name' => 'default_value',
// 'type' => 'select',
// 'label' => __( 'Default Value', 'ninja-forms' ),
// 'options' => array(
// array(
// 'label' => __( 'Unchecked', 'ninja-forms' ),
// 'value' => 'unchecked'
// ),
// array(
// 'label' => __( 'Checked', 'ninja-forms'),
// 'value' => 'checked',
// ),
// ),
// 'width' => 'one-half',
// 'group' => 'primary',
// 'value' => 'unchecked'
// ),
'checkbox_default_value' => array(
'name' => 'default_value',
'type' => 'select',
'label' => __( 'Default Value', 'ninja-forms' ),
'options' => array(
array(
'label' => __( 'Unchecked', 'ninja-forms' ),
'value' => 'unchecked'
),
array(
'label' => __( 'Checked', 'ninja-forms'),
'value' => 'checked',
),
),
'width' => 'one-half',
'group' => 'primary',
'value' => 'unchecked'
),
/*
* Spam Question
......@@ -547,19 +547,6 @@ return apply_filters( 'ninja-forms-field-settings', array(
// )
// ),
/*
* USER INFO DEFAULT VALUE
*/
// 'user_info_default_value' => array(
// 'name' => 'default_value',
// 'type' => 'toggle',
// 'label' => __( 'Default to User Info', 'ninja-forms' ),
// 'width' => 'one-half',
// 'group' => 'primary'
// 'value' => FALSE
// ),
));
......
......@@ -3,7 +3,7 @@
/**
* Class NF_Fields_Address
*/
class NF_Fields_Address extends NF_Abstracts_UserInfo
class NF_Fields_Address extends NF_Fields_Textbox
{
protected $_name = 'address';
......
......@@ -3,7 +3,7 @@
/**
* Class NF_Fields_Address2
*/
class NF_Fields_Address2 extends NF_Abstracts_UserInfo
class NF_Fields_Address2 extends NF_Fields_Textbox
{
protected $_name = 'address2';
......
......@@ -3,7 +3,7 @@
/**
* Class NF_Fields_City
*/
class NF_Fields_City extends NF_Abstracts_UserInfo
class NF_Fields_City extends NF_Fields_Textbox
{
protected $_name = 'city';
......
......@@ -3,7 +3,7 @@
/**
* Class NF_Fields_Phone
*/
class NF_Fields_Phone extends NF_Abstracts_UserInfo
class NF_Fields_Phone extends NF_Fields_Textbox
{
protected $_name = 'phone';
......
......@@ -3,7 +3,7 @@
/**
* Class NF_Fields_Zip
*/
class NF_Fields_Zip extends NF_Abstracts_UserInfo
class NF_Fields_Zip extends NF_Fields_Textbox
{
protected $_name = 'zip';
......
......@@ -34,10 +34,26 @@
</script>
<script id="nf-tmpl-app-header-action-button" type="text/template">
<input class="nf-button primary <%= maybeDisabled() %> publish" type="submit" value="Publish" />
<%= renderPublish() %>
<%= maybeRenderCancel() %>
</script>
<script id="nf-tmpl-app-header-publish-button" type="text/template">
<a href="#" <%= publishWidth %> class="nf-button primary <%= maybeDisabled() %> publish">PUBLISH</a>
</script>
<script id="nf-tmpl-add-header-publish-loading" type="text/template">
<a href="#" <%= publishWidth %> class="nf-button primary <%= maybeDisabled() %> publish">
<div class="nf-loading">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</a>
</script>
<script id="nf-tmpl-app-header-view-changes" type="text/template">
<a class="nf-cancel viewChanges" style="text-decoration: none;" href="#"><span class="dashicons dashicons-backup"></span></a>
</script>
......@@ -68,7 +84,7 @@
<script id="nf-tmpl-main-content-field" type="text/template">
<div id="<%= getFieldID() %>" class="<%= renderClasses() %>"> <%= label %> <%= renderRequired() %>
<ul class="nf-item-controls">
<li class="nf-item-delete"><a href="#"><span class="nf-delete dashicons dashicons-dismiss"></span><span class="nf-tooltip">Delete</span></a></li>
<li class="nf-item-duplicate"><a href="#"><span class="nf-duplicate dashicons dashicons-admin-page"></span><span class="nf-tooltip">Duplicate</span></a></li>
......
......@@ -6,7 +6,7 @@
<script id='nf-tmpl-field-listradio-option' type='text/template'>
<li>
<label><input type="radio" name="nf-field-<%= fieldID %>" class="<%= classes %>" value="<%= value %>" <%= ( value == currentValue ) ? 'checked="checked"' : '' %>> <%= label %></label>
<label><input type="radio" name="nf-field-<%= fieldID %>" class="<%= classes %>" value="<%= value %>" <%= ( value == currentValue || 1 == selected ) ? 'checked="checked"' : '' %>> <%= label %></label>
</li>
</script>
......
......@@ -7,5 +7,5 @@
</script>
<script id="nf-tmpl-field-listselect-option" type="text/template">
<option value="<%= value %>" <%= ( selected ) ? 'checked="checked"' : '' %>><%= label %></option>
<option value="<%= value %>" <%= ( 1 == selected ) ? 'selected="selected"' : '' %>><%= label %></option>
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment