',
- '
',
- ' ',
- '
',
+ '
<%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
' <% if (helpMessage && helpMessage.length) { %>',
'
<%=helpMessage%>',
' <% } %>',
@@ -457,7 +459,14 @@ define([
);
},
events: {
- 'switchChange.bootstrapSwitch': 'onChange',
+ 'change input': 'onChange',
+ 'keyup': 'toggleSwitch',
+ },
+ toggleSwitch: function(e) {
+ if (e.keyCode == 32) {
+ this.$el.find('input[type=checkbox]').bootstrapToggle('toggle');
+ e.preventDefault();
+ }
},
render: function() {
var field = _.defaults(this.field.toJSON(), this.defaults),
@@ -466,23 +475,46 @@ define([
name = attrArr.shift(),
path = attrArr.join('.'),
rawValue = this.keyPathAccessor(attributes[name], path),
+ data = _.extend(field, {
+ rawValue: rawValue,
+ value: this.formatter.fromRaw(rawValue, this.model),
+ attributes: attributes,
+ formatter: this.formatter,
+ }),
evalF = function(f, d, m) {
return (_.isFunction(f) ? !!f.apply(d, [m]) : !!f);
- },
- options = _.defaults({
- disabled: evalF(field.disabled, field, this.model),
- }, this.field.get('options'), this.defaults.options,
- $.fn.bootstrapSwitch.defaults);
+ };
- Backform.InputControl.prototype.render.apply(this, arguments);
- this.$input = this.$el.find('input[type=checkbox]').first();
+ // Evaluate the disabled, visible, and required option
+ _.extend(data, {
+ disabled: evalF(field.disabled, field, this.model),
+ visible: evalF(data.visible, field, this.model),
+ required: evalF(data.required, field, this.model),
+ });
- //Check & set additional properties
- this.$input.bootstrapSwitch(
- _.extend(options, {
- 'state': rawValue,
- })
- );
+ // Clean up first
+ this.$el.removeClass(Backform.hiddenClassName);
+
+ if (!data.visible)
+ this.$el.addClass(Backform.hiddenClassName);
+
+ if(Backform.requiredInputClassName) {
+ this.$el.removeClass(Backform.requiredInputClassName);
+ }
+
+ if (data.required) {
+ this.$el.addClass(Backform.requiredInputClassName);
+ }
+
+ data.options = _.defaults({
+ disabled: evalF(field.disabled, field, this.model),
+ }, this.field.get('options'), this.defaults.options,
+ $.fn.bootstrapToggle.defaults);
+
+ this.$el.html(this.template(data)).addClass(field.name);
+ this.$input = this.$el.find('input[type=checkbox]').first();
+ this.$input.bootstrapToggle();
+ this.updateInvalid();
return this;
},
diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js
index 9ea4ad43..4b608c0e 100644
--- a/web/pgadmin/static/js/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid.pgadmin.js
@@ -9,7 +9,8 @@
define([
'sources/gettext', 'underscore', 'jquery', 'backbone', 'backform', 'backgrid', 'alertify',
- 'moment', 'bignumber', 'bootstrap.datetimepicker', 'bootstrap.switch', 'backgrid.filter',
+ 'moment', 'bignumber', 'bootstrap.datetimepicker', 'backgrid.filter',
+ 'bootstrap.toggle',
], function(
gettext, _, $, Backbone, Backform, Backgrid, Alertify, moment, BigNumber
) {
@@ -451,18 +452,20 @@ define([
/**
SwitchCell renders a Bootstrap Switch in backgrid cell
*/
- if (window.jQuery && window.jQuery.fn.bootstrapSwitch)
- $.fn.bootstrapSwitch = window.jQuery.fn.bootstrapSwitch;
+ if (window.jQuery && window.jQuery.fn.bootstrapToggle)
+ $.fn.bootstrapToggle = window.jQuery.fn.bootstrapToggle;
Backgrid.Extension.SwitchCell = Backgrid.BooleanCell.extend({
defaults: {
options: _.defaults({
- onText: gettext('True'),
- offText: gettext('False'),
+ onText: gettext('Yes'),
+ offText: gettext('No'),
onColor: 'success',
- offColor: 'default',
- size: 'mini',
- }, $.fn.bootstrapSwitch.defaults),
+ offColor: 'primary',
+ size: 'small',
+ width: null,
+ height: null,
+ }, $.fn.bootstrapToggle.defaults),
},
className: 'switch-cell',
@@ -474,7 +477,7 @@ define([
enterEditMode: function() {
this.$el.addClass('editor');
- $(this.$el.find('input')).trigger('focus');
+ $(this.$el.find('input[type=checkbox]')).trigger('focus');
},
exitEditMode: function() {
@@ -482,7 +485,16 @@ define([
},
events: {
- 'switchChange.bootstrapSwitch': 'onChange',
+ 'change input': 'onChange',
+ 'keyup': 'toggleSwitch',
+ 'blur input': 'exitEditMode'
+ },
+
+ toggleSwitch: function(e) {
+ if (e.keyCode == 32) {
+ this.$el.find('input[type=checkbox]').bootstrapToggle('toggle');
+ e.preventDefault();
+ }
},
onChange: function() {
@@ -503,7 +515,8 @@ define([
rawValue = this.formatter.fromRaw(
model.get(column.get('name')), model
),
- editable = Backgrid.callByNeed(col.editable, column, model);
+ editable = Backgrid.callByNeed(col.editable, column, model),
+ options = _.defaults({}, col.options, this.defaults.options);
this.undelegateEvents();
@@ -513,17 +526,14 @@ define([
$('
', {
tabIndex: -1,
type: 'checkbox',
- }).prop('checked', rawValue).prop('disabled', !editable));
+ }).prop('checked', rawValue).prop('disabled', !editable).attr('data-toggle', 'toggle')
+ .attr('data-size', options.size).attr('data-on', options.onText).attr('data-off', options.offText)
+ .attr('data-onstyle', options.onColor).attr('data-offstyle', options.offColor));
+
this.$input = this.$el.find('input[type=checkbox]').first();
- // Override BooleanCell checkbox with Bootstrapswitch
- this.$input.bootstrapSwitch(
- _.defaults({
- 'state': rawValue,
- 'disabled': !editable,
- }, col.options,
- this.defaults.options
- ));
+ // Override BooleanCell checkbox with Bootstraptoggle
+ this.$input.bootstrapToggle();
// Listen for Tab key
this.$el.on('keydown', function(e) {
@@ -546,6 +556,7 @@ define([
});
self.model.trigger('backgrid:edited', self.model,
self.column, command);
+ this.exitEditMode();
gotoCell.trigger('focus');
}
}, 20);
diff --git a/web/pgadmin/static/scss/_bootstrap.overrides.scss b/web/pgadmin/static/scss/_bootstrap.overrides.scss
index 2bd8b760..e0ec5560 100644
--- a/web/pgadmin/static/scss/_bootstrap.overrides.scss
+++ b/web/pgadmin/static/scss/_bootstrap.overrides.scss
@@ -228,30 +228,13 @@ legend {
font-size: 13px;
}
-
-/* Remove default left padding from checkbox for bootstrap-switch */
-.checkbox {
- margin-bottom: 0px !important;
- margin-top: 0px !important;
-}
-.checkbox label {
- padding-left: 0px !important;
- margin-bottom: 0px !important;
-}
-.bootstrap-switch > .bootstrap-switch-container > input {
- border: 0px solid $color-fg;
- height: 0px;
- margin: 0px;
- padding: 0px;
- width: 0px;
-}
.switch-cell {
height: 0px;
width: 0px;
}
/* Center align the switch in backgrid */
-td.switch-cell > div.bootstrap-switch {
+td.switch-cell > div.toggle {
display: block;
margin: auto;
}
@@ -309,13 +292,6 @@ td.switch-cell > div.bootstrap-switch {
line-height: 0.7rem;
}
-
-.bootstrap-switch.bootstrap-switch-disabled, .bootstrap-switch.bootstrap-switch-readonly {
- background-color: $input-disabled-bg !important;
- opacity: 1;
-}
-
-
.btn-toolbar {
min-width: 100%;
}
@@ -330,10 +306,6 @@ td.switch-cell > div.bootstrap-switch {
}
}
-/* bootstrap-switch */
-.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
- background: $color-primary;
-}
-.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
- background: $color-success;
+.btn.disabled, .btn:disabled, .btn[disabled] {
+ opacity: $btn-disabled-opacity;
}
diff --git a/web/pgadmin/tools/backup/static/js/backup.js b/web/pgadmin/tools/backup/static/js/backup.js
index 70e8a68b..535a765c 100644
--- a/web/pgadmin/tools/backup/static/js/backup.js
+++ b/web/pgadmin/tools/backup/static/js/backup.js
@@ -44,21 +44,6 @@ define([
*/
Backform.CustomSwitchControl = Backform.SwitchControl.extend({
- template: _.template([
- '
',
- '
',
- '
',
- ' ',
- '
',
- '
',
- '<% if (helpMessage && helpMessage.length) { %>',
- '
<%=helpMessage%>',
- '<% } %>',
- ].join('\n')),
className: 'pgadmin-control-group form-group pg-el-md-6 pg-el-12 row',
});
diff --git a/web/pgadmin/tools/maintenance/static/js/maintenance.js b/web/pgadmin/tools/maintenance/static/js/maintenance.js
index f8d88908..591bf880 100644
--- a/web/pgadmin/tools/maintenance/static/js/maintenance.js
+++ b/web/pgadmin/tools/maintenance/static/js/maintenance.js
@@ -30,19 +30,6 @@ define([
return pgAdmin.Tools.maintenance;
Backform.CustomSwitchControl = Backform.SwitchControl.extend({
- template: _.template([
- '
',
- '
',
- '<% if (helpMessage && helpMessage.length) { %>',
- '
<%=helpMessage%>',
- '<% } %>',
- ].join('\n')),
className: 'pgadmin-control-group form-group pg-el-md-6 pg-el-12 row',
});
diff --git a/web/pgadmin/tools/restore/static/js/restore.js b/web/pgadmin/tools/restore/static/js/restore.js
index 1f249abf..6c79476d 100644
--- a/web/pgadmin/tools/restore/static/js/restore.js
+++ b/web/pgadmin/tools/restore/static/js/restore.js
@@ -25,19 +25,6 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
}
Backform.CustomSwitchControl = Backform.SwitchControl.extend({
- template: _.template([
- '
',
- '
',
- '<% if (helpMessage && helpMessage.length) { %>',
- '
<%=helpMessage%>',
- '<% } %>',
- ].join('\n')),
className: 'pgadmin-control-group form-group pg-el-md-6 row',
});
diff --git a/web/webpack.shim.js b/web/webpack.shim.js
index db45166f..be244949 100644
--- a/web/webpack.shim.js
+++ b/web/webpack.shim.js
@@ -37,9 +37,9 @@ var webpackShimConfig = {
'deps': ['moment'],
'exports': 'jQuery.fn.datetimepicker',
},
- 'bootstrap.switch': {
+ 'bootstrap.toggle': {
deps: ['jquery', 'bootstrap'],
- 'exports': '$.fn.bootstrapSwitch',
+ 'exports': '$.fn.bootstrapToggle',
},
'backbone': {
exports: 'Backbone', // Once loaded, use the global 'Backbone' as the module value.
@@ -53,10 +53,10 @@ var webpackShimConfig = {
'exports': 'Backgrid',
},
'pgadmin.backform': {
- 'deps': ['backform', 'pgadmin.backgrid', 'select2'],
+ 'deps': ['backform', 'pgadmin.backgrid', 'select2', 'bootstrap.toggle'],
},
'pgadmin.backgrid': {
- 'deps': ['backgrid', 'bootstrap.datetimepicker', 'bootstrap.switch'],
+ 'deps': ['backgrid', 'bootstrap.datetimepicker', 'bootstrap.toggle'],
},
'backgrid.select.all': {
@@ -172,7 +172,7 @@ var webpackShimConfig = {
'backform': path.join(__dirname, './pgadmin/static/vendor/backform/backform'),
'backgrid': path.join(__dirname, './node_modules/backgrid/lib/backgrid'),
'bootstrap.datetimepicker': path.join(__dirname, './node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min'),
- 'bootstrap.switch': path.join(__dirname, './node_modules/bootstrap-switch/dist/js/bootstrap-switch'),
+ 'bootstrap.toggle': path.join(__dirname, './node_modules/bootstrap4-toggle/js/bootstrap4-toggle'),
'select2': path.join(__dirname, './node_modules/select2/dist/js/select2.full'),
'backgrid.filter': path.join(__dirname, './node_modules/backgrid-filter/backgrid-filter'),
'backgrid.sizeable.columns': path.join(__dirname, './node_modules/backgrid-sizeable-columns/backgrid-sizeable-columns'),
diff --git a/web/webpack.test.config.js b/web/webpack.test.config.js
index 6cce766c..b65e924a 100644
--- a/web/webpack.test.config.js
+++ b/web/webpack.test.config.js
@@ -77,7 +77,7 @@ module.exports = {
'spectrum': path.join(__dirname, './node_modules/spectrum-colorpicker/spectrum'),
'bignumber': path.join(__dirname, './node_modules/bignumber.js/bignumber'),
'bootstrap.datetimepicker': path.join(__dirname, './node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min'),
- 'bootstrap.switch': path.join(__dirname, './node_modules/bootstrap-switch/dist/js/bootstrap-switch'),
+ 'bootstrap.toggle': path.join(__dirname, './node_modules/bootstrap4-toggle/js/bootstrap4-toggle'),
'backbone': path.join(__dirname, './node_modules/backbone/backbone'),
'backform': path.join(__dirname, './node_modules/backform/src/backform'),
'backgrid': path.join(__dirname, './node_modules/backgrid/lib/backgrid'),
diff --git a/web/yarn.lock b/web/yarn.lock
index 8a71a39f..48ee35ec 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1617,10 +1617,10 @@ bootstrap-datepicker@^1.7.0:
dependencies:
jquery ">=1.7.1 <4.0.0"
-bootstrap-switch@3.3.4:
- version "3.3.4"
- resolved "https://registry.yarnpkg.com/bootstrap-switch/-/bootstrap-switch-3.3.4.tgz#70e0aeb2a877c0dc766991de108e2170fc29a2ff"
- integrity sha1-cOCusqh3wNx2aZHeEI4hcPwpov8=
+bootstrap4-toggle@3.4.0:
+ version "3.4.0"
+ resolved "https://registry.yarnpkg.com/bootstrap4-toggle/-/bootstrap4-toggle-3.4.0.tgz#58264d4c7fd24eb2e09cca5156a338b2b22a4792"
+ integrity sha512-vKfBgsjICW6mOqb264qwwbbGtpcOx+p9jOlQmLfRZ07iGE+b5YbQlY4ft9aAhPulh7V3oKOtEuuq0FcSKAI4bQ==
bootstrap@>=4.1.2, bootstrap@^4.1.3:
version "4.1.3"