public inbox for [email protected]
help / color / mirror / Atom feedFrom: Khushboo Vashi <[email protected]>
To: Aditya Toshniwal <[email protected]>
Cc: Akshay Joshi <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Subject: Re: [pgAdmin4][Patch]: RM - 3051 - ables > Properties > Columns tab is slow on tables with a lot of fields
Date: Tue, 29 Jan 2019 09:42:51 +0530
Message-ID: <CAFOhELe+UJqC-4vyBe2yk_Mz27DKfJFFyU1UbURZ9ycrQs9SYA@mail.gmail.com> (raw)
In-Reply-To: <CAM9w-_=RLYvwz4HJ5YrDPSdX80B7kLvt0Ti41F6r0_deAt-wHg@mail.gmail.com>
References: <CAFOhELfosrL2Y_2_gwHyzef5JeSSzNSyicSNj6uv1B1286yKzg@mail.gmail.com>
<CANxoLDc1q3KmpmO=SZw69J9on-TUUBVj-QoN7aYAtgYjP3HBsQ@mail.gmail.com>
<CAM9w-_=RLYvwz4HJ5YrDPSdX80B7kLvt0Ti41F6r0_deAt-wHg@mail.gmail.com>
Hi Aditya,
Thanks for the review.
Please find the attached updated patch.
@ Murtuza,
Regarding your concern, I have not used the API. As per the documentation,
there are 2 ways to initialise the bootstrap toggle, First Initialise with
HTML and second with Code.
In our case, Initialisation with HTML is not possible as we render the
backform controls runtime, So, I have used the other option.
Also, the main issue of slow rendering which has been solved through this
implementation. The browser hanging issue is due to Backbone collection
reset method and I am working on that part with another RM,
https://redmine.postgresql.org/issues/3664.
@ Dave,
Please, review this patch, we need your approval for the toggle design
changes.
Thanks,
Khushboo
On Tue, Jan 22, 2019 at 11:33 AM Aditya Toshniwal <
[email protected]> wrote:
> Hi Khushboo,
>
> I have few suggestions/review:
> 1) Do we need to add "editor" class to switch control in backgrid when
> changing. For eg. in tables->columns if I change not null switch, it adds
> editor class which makes hover background white. Plus, leaving the switch
> does not remove editor class. I think we can skip adding editor, what
> do you think?
>
This issue was old, not due to my patch but I have fixed it.
> 2) In Login roles, Create trigger dialogs switch control colors are
> different. Below is screenshot,
> [image: Screenshot 2019-01-22 at 11.04.36 AM.png]
>
Fixed
> 3) In Create cast dialog switch control is smaller and so clipping text.
> Below is screenshot,
> [image: Screenshot 2019-01-22 at 11.07.14 AM.png]
>
Fixed
> 4) You've removed unnecessary switch control template codes at most
> places. I would suggest doing the same for Backform.CustomSwitchControl in
> trigger.js
>
Done
> 5) Feature tests are still using bootstrap-switch classes and so failing.
>
Fixed
>
> Apart from above, everything looks good to me.
>
>
> On Mon, Jan 21, 2019 at 4:42 PM Akshay Joshi <
> [email protected]> wrote:
>
>> Hi Aditya
>>
>> Can you please review it.
>>
>> On Mon, Jan 14, 2019 at 4:28 PM Khushboo Vashi <
>> [email protected]> wrote:
>>
>>> Hi,
>>>
>>> Please find the attached patch to fix #3051 - Tables > Properties >
>>> Columns tab is slow on tables with a lot of fields
>>>
>>> The root cause of the issue is bootstrap switch, which has been replaced
>>> with bootstrap4-toggle application wide.
>>>
>>> Thanks,
>>> Khushboo
>>>
>>
>>
>> --
>> *Akshay Joshi*
>>
>> *Sr. Software Architect *
>>
>>
>>
>> *Phone: +91 20-3058-9517Mobile: +91 976-788-8246*
>>
>
>
> --
> Thanks and Regards,
> Aditya Toshniwal
> Software Engineer | EnterpriseDB Software Solutions | Pune
> "Don't Complain about Heat, Plant a tree"
>
Attachments:
[image/png] Screenshot 2019-01-22 at 11.04.36 AM.png (107.2K, 3-Screenshot%202019-01-22%20at%2011.04.36%20AM.png)
download | view image
[image/png] Screenshot 2019-01-22 at 11.07.14 AM.png (49.9K, 4-Screenshot%202019-01-22%20at%2011.07.14%20AM.png)
download | view image
[application/octet-stream] RM_3051_v1.patch (28.2K, 5-RM_3051_v1.patch)
download | inline diff:
diff --git a/libraries.txt b/libraries.txt
index b70eb4ac..2826b3c6 100644
--- a/libraries.txt
+++ b/libraries.txt
@@ -21,7 +21,6 @@ font-Awesome 4.5 SIL OFL http://fortawesome.github.io/Fon
font-mfizz 2.4.1 MIT http://fizzed.com/oss/font-mfizz
backgrid.js 0.3.5 MIT http://backgridjs.com/
backbone.undo 0.2 MIT http://backbone.undojs.com/
-bootstrap-switch 3.3.2 MIT http://www.bootstrap-switch.org/
select2 4.0.1 MIT https://select2.github.io/
backgrid-filter 01b2b21 MIT https://github.com/wyuenho/backgrid-filter
backbone.paginator 2.0.3 MIT http://github.com/backbone-paginator/backbone.paginator
diff --git a/web/package.json b/web/package.json
index a554bbb5..4b6a5c76 100644
--- a/web/package.json
+++ b/web/package.json
@@ -59,7 +59,6 @@
"bignumber.js": "^6.0.0",
"bootstrap": "^4.1.3",
"bootstrap-datepicker": "^1.7.0",
- "bootstrap-switch": "3.3.4",
"bowser": "1.6.1",
"browserify": "~14.1.0",
"codemirror": "^5.29.0",
@@ -98,7 +97,8 @@
"underscore.string": "^3.3.4",
"watchify": "~3.9.0",
"webcabin-docker": "git+https://github.com/EnterpriseDB/wcDocker/#25f6fda624c5469340da0c111a18545a4455973a",
- "wkx": "^0.4.5"
+ "wkx": "^0.4.5",
+ "bootstrap4-toggle": "3.4.0"
},
"scripts": {
"linter": "yarn eslint --no-eslintrc -c .eslintrc.js --ext .js --ext .jsx .",
diff --git a/web/pgadmin/browser/server_groups/servers/databases/casts/static/js/cast.js b/web/pgadmin/browser/server_groups/servers/databases/casts/static/js/cast.js
index 3f38adef..c253734b 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/casts/static/js/cast.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/casts/static/js/cast.js
@@ -234,7 +234,7 @@ define('pgadmin.node.cast', [
group: gettext('Definition'), disabled: true, mode:['properties','edit'],
},{
id: 'castcontext', label: gettext('Context'),
- options:{'onText':'IMPLICIT','offText':'EXPLICIT'},
+ options:{'onText':'IMPLICIT','offText':'EXPLICIT', width: '110'},
editable: false, type: 'string', group: gettext('Definition'),
mode:['create'],
control: Backform.SwitchControl.extend({
diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/static/js/schema.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/static/js/schema.js
index f440eb75..1be73b53 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/static/js/schema.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/static/js/schema.js
@@ -463,10 +463,10 @@ define('pgadmin.node.schema', [
is_editable = _.isFunction(editable) ? !!editable.apply(column, [model]) : !!editable;
if (is_editable) {
this.$el.addClass('editable');
- input.bootstrapSwitch('disabled',false);
+ input.bootstrapToggle('disabled',false);
} else {
this.$el.removeClass('editable');
- input.bootstrapSwitch('disabled',true);
+ input.bootstrapToggle('disabled',true);
// Set self value into model to false
setTimeout(function() { model.set(self_name, false); }, 10);
}
diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.js
index 8b29d417..bde683bc 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.js
@@ -18,21 +18,22 @@ define('pgadmin.node.trigger', [
SchemaChildTreeNode
) {
Backform.CustomSwitchControl = Backform.SwitchControl.extend({
- template: _.template([
- '<label class="control-label pg-el-sm-6 pg-el-12"><%=label%></label>',
- '<div class="pgadmin-controls pg-el-sm-6 pg-el-12">',
- ' <div class="checkbox">',
- ' <label>',
- ' <input type="checkbox" class="<%=extraClasses.join(\' \')%>"',
- ' name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%>',
- ' <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
- ' </label>',
- ' </div>',
- '</div>',
- '<% if (helpMessage && helpMessage.length) { %>',
- ' <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
- '<% } %>',
- ].join('\n')),
+ defaults: {
+ label: '',
+ options: {
+ onText: gettext('Yes'),
+ offText: gettext('No'),
+ onColor: 'success',
+ offColor: 'primary',
+ size: 'small',
+ width: null,
+ height: null,
+ },
+ controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+ controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
+ extraClasses: [],
+ helpMessage: null,
+ },
className: 'pgadmin-control-group form-group col-6 row',
});
diff --git a/web/pgadmin/browser/server_groups/servers/roles/static/js/role.js b/web/pgadmin/browser/server_groups/servers/roles/static/js/role.js
index 17ee0c44..5403dc23 100644
--- a/web/pgadmin/browser/server_groups/servers/roles/static/js/role.js
+++ b/web/pgadmin/browser/server_groups/servers/roles/static/js/role.js
@@ -72,23 +72,27 @@ define('pgadmin.node.role', [
var switchOptions = {
'onText': gettext('Yes'), 'offText': gettext('No'),
- 'size': 'mini',
+ 'size': 'small', onColor: 'success',
+ offColor: 'primary',
};
var RoleCustomSwitchControl = Backform.SwitchControl.extend({
- template: _.template([
- '<label class="control-label pg-el-sm-10 pg-el-12"><%=label%></label>',
- '<div class="pgadmin-controls pg-el-sm-2 pg-el-12">',
- ' <div class="checkbox">',
- ' <label>',
- ' <input type="checkbox" class="<%=extraClasses.join(\' \')%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
- ' </label>',
- ' </div>',
- '</div>',
- '<% if (helpMessage && helpMessage.length) { %>',
- ' <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
- '<% } %>',
- ].join('\n')),
+ defaults: {
+ label: '',
+ options: {
+ onText: gettext('Yes'),
+ offText: gettext('No'),
+ onColor: 'success',
+ offColor: 'primary',
+ size: 'small',
+ width: null,
+ height: null,
+ },
+ controlLabelClassName: 'control-label pg-el-sm-4 pg-el-12',
+ controlsClassName: 'pgadmin-controls pg-el-sm-8 pg-el-12',
+ extraClasses: [],
+ helpMessage: null,
+ },
className: 'pgadmin-control-group form-group pg-el-12 row',
});
diff --git a/web/pgadmin/browser/server_groups/servers/static/js/server.js b/web/pgadmin/browser/server_groups/servers/static/js/server.js
index 540bebec..924dadc0 100644
--- a/web/pgadmin/browser/server_groups/servers/static/js/server.js
+++ b/web/pgadmin/browser/server_groups/servers/static/js/server.js
@@ -936,7 +936,7 @@ define('pgadmin.node.server', [
id: 'tunnel_authentication', label: gettext('Authentication'), type: 'switch',
mode: ['properties', 'edit', 'create'], group: gettext('SSH Tunnel'),
'options': {'onText': gettext('Identity file'),
- 'offText': gettext('Password'), 'size': 'small'},
+ 'offText': gettext('Password'), 'size': '', width: '110'},
deps: ['use_ssh_tunnel'],
disabled: function(model) {
return !model.get('use_ssh_tunnel');
diff --git a/web/pgadmin/browser/static/js/collection.js b/web/pgadmin/browser/static/js/collection.js
index aa758afd..3671a9af 100644
--- a/web/pgadmin/browser/static/js/collection.js
+++ b/web/pgadmin/browser/static/js/collection.js
@@ -188,6 +188,7 @@ define([
'remove': function() {
if (this.grid) {
if (this.grid.collection) {
+// _.invoke(this.grid.collection.toArray(), 'destroy');
this.grid.collection.reset(null, {silent: true});
delete (this.grid.collection);
}
diff --git a/web/pgadmin/feature_tests/pg_datatype_validation_test.py b/web/pgadmin/feature_tests/pg_datatype_validation_test.py
index a8e94be0..7d1ed698 100644
--- a/web/pgadmin/feature_tests/pg_datatype_validation_test.py
+++ b/web/pgadmin/feature_tests/pg_datatype_validation_test.py
@@ -102,10 +102,10 @@ class PGDataypeFeatureTest(BaseFeatureTest):
)
switch_btn = insert_bracket_pairs_control.\
- find_element_by_class_name('bootstrap-switch')
+ find_element_by_class_name('toggle')
# check if switch is on then only toggle.
- if 'bootstrap-switch-on' in switch_btn.get_attribute('class'):
+ if 'off' not in switch_btn.get_attribute('class'):
switch_btn.click()
# save and close the preference dialog.
diff --git a/web/pgadmin/misc/statistics/static/js/statistics.js b/web/pgadmin/misc/statistics/static/js/statistics.js
index cfd573e1..95a4cd80 100644
--- a/web/pgadmin/misc/statistics/static/js/statistics.js
+++ b/web/pgadmin/misc/statistics/static/js/statistics.js
@@ -104,7 +104,9 @@ define('misc.statistics', [
offText: gettext('False'),
onColor: 'success',
offColor: 'primary',
- size: 'mini',
+ size: 'small',
+ width: null,
+ height: null,
}
);
diff --git a/web/pgadmin/preferences/static/js/preferences.js b/web/pgadmin/preferences/static/js/preferences.js
index 0c2a626d..f9d54f1a 100644
--- a/web/pgadmin/preferences/static/js/preferences.js
+++ b/web/pgadmin/preferences/static/js/preferences.js
@@ -214,8 +214,8 @@ define('pgadmin.preferences', [
onText: gettext('True'),
offText: gettext('False'),
onColor: 'success',
- offColor: 'default',
- size: 'mini',
+ offColor: 'primary',
+ size: 'small',
};
return 'switch';
case 'node':
@@ -223,8 +223,8 @@ define('pgadmin.preferences', [
onText: gettext('Show'),
offText: gettext('Hide'),
onColor: 'success',
- offColor: 'default',
- size: 'mini',
+ offColor: 'primary',
+ size: 'small',
};
return 'switch';
case 'integer':
diff --git a/web/pgadmin/static/css/style.css b/web/pgadmin/static/css/style.css
index aeb0354a..e7293d47 100644
--- a/web/pgadmin/static/css/style.css
+++ b/web/pgadmin/static/css/style.css
@@ -3,7 +3,7 @@
@import '~font-awesome/css/font-awesome.css';
@import '~bootstrap-datepicker/dist/css/bootstrap-datepicker3.css';
@import '~tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.css';
-@import '~bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css';
+@import '~bootstrap4-toggle/css/bootstrap4-toggle.css';
@import '~backgrid-select-all/backgrid-select-all.css';
@import '~backgrid-filter/backgrid-filter.css';
@import '~backgrid-sizeable-columns/backgrid-sizeable-columns.css';
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index a4ed36be..bb5c78b4 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -10,7 +10,7 @@
define([
'sources/gettext', 'underscore', 'underscore.string', 'jquery',
'backbone', 'backform', 'backgrid', 'codemirror', 'sources/sqleditor_utils',
- 'spectrum', 'pgadmin.backgrid', 'select2',
+ 'spectrum', 'pgadmin.backgrid', 'select2', 'bootstrap.toggle',
], function(gettext, _, S, $, Backbone, Backform, Backgrid, CodeMirror, SqlEditorUtils) {
var pgAdmin = (window.pgAdmin = window.pgAdmin || {}),
@@ -431,6 +431,8 @@ define([
onColor: 'success',
offColor: 'primary',
size: 'small',
+ width: null,
+ height: null,
},
controlLabelClassName: Backform.controlLabelClassName,
controlsClassName: Backform.controlsClassName,
@@ -440,11 +442,11 @@ define([
template: _.template([
'<label class="<%=controlLabelClassName%>"><%=label%></label>',
'<div class="<%=controlsClassName%>">',
- ' <div class="checkbox">',
- ' <label>',
- ' <input type="checkbox" class="<%=extraClasses.join(\' \')%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
- ' </label>',
- ' </div>',
+ ' <input tabindex="0" type="checkbox" data-style="quick" data-toggle="toggle"',
+ ' data-size="<%=options.size%>" data-height="<%=options.height%>" ',
+ ' data-on="<%=options.onText%>" data-off="<%=options.offText%>" ',
+ ' data-onstyle="<%=options.onColor%>" data-offstyle="<%=options.offColor%>" data-width="<%=options.width%>" ',
+ ' name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
' <% if (helpMessage && helpMessage.length) { %>',
' <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
' <% } %>',
@@ -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([
$('<input>', {
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([
- '<label class="<%=controlLabelClassName%> custom_switch_label_class"><%=label%></label>',
- '<div class="<%=controlsClassName%> custom_switch_control_class">',
- ' <div class="checkbox">',
- ' <label>',
- ' <input type="checkbox" class="<%=extraClasses.join(\' \')%>"',
- ' name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%>',
- ' <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
- ' </label>',
- ' </div>',
- '</div>',
- '<% if (helpMessage && helpMessage.length) { %>',
- ' <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
- '<% } %>',
- ].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([
- '<label class="<%=Backform.controlLabelClassName%> custom_switch_label_class"><%=label%></label>',
- '<div class="<%=Backform.controlsClassName%> custom_switch_control_class">',
- ' <div class="checkbox">',
- ' <label>',
- ' <input type="checkbox" class="<%=extraClasses.join(\' \')%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
- ' </label>',
- ' </div>',
- '</div>',
- '<% if (helpMessage && helpMessage.length) { %>',
- ' <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
- '<% } %>',
- ].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([
- '<label class="<%=Backform.controlLabelClassName%> custom_switch_label_class"><%=label%></label>',
- '<div class="<%=Backform.controlsClassName%> custom_switch_control_class">',
- ' <div class="checkbox">',
- ' <label>',
- ' <input type="checkbox" class="<%=extraClasses.join(\' \')%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
- ' </label>',
- ' </div>',
- '</div>',
- '<% if (helpMessage && helpMessage.length) { %>',
- ' <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
- '<% } %>',
- ].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"
[email protected]:
- version "3.3.4"
- resolved "https://registry.yarnpkg.com/bootstrap-switch/-/bootstrap-switch-3.3.4.tgz#70e0aeb2a877c0dc766991de108e2170fc29a2ff"
- integrity sha1-cOCusqh3wNx2aZHeEI4hcPwpov8=
[email protected]:
+ 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"
view thread (19+ messages) latest in thread
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: [email protected]
Cc: [email protected], [email protected], [email protected]
Subject: Re: [pgAdmin4][Patch]: RM - 3051 - ables > Properties > Columns tab is slow on tables with a lot of fields
In-Reply-To: <CAFOhELe+UJqC-4vyBe2yk_Mz27DKfJFFyU1UbURZ9ycrQs9SYA@mail.gmail.com>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox