Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace Glyphicons with Bootstrap Icons #990

Closed
wants to merge 4 commits into from
Closed

Replace Glyphicons with Bootstrap Icons #990

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
15716ff
Replace Glyphicons with Bootstrap Icons
liamkeily Jan 16, 2024
2a1404c
Merge remote-tracking branch 'upstream/dev' into refactor/bootstrap-i…
liamkeily Jan 16, 2024
9aaf832
checkbox changes
liamkeily Jan 16, 2024
e48f6a8
Remove unnecessary bi
liamkeily Jan 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion build/jsdoc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# <i class="glyphicon glyphicon-home"></i> [Main documentation](..)
# <i class="bi-house-fill"></i> [Main documentation](..)

# Entry point: [$.fn.QueryBuilder](external-_jQuery.fn_.html)

Expand Down
24 changes: 12 additions & 12 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<link rel="stylesheet" href="/node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css">
<link rel="stylesheet" href="/node_modules/bootstrap-slider/dist/css/bootstrap-slider.css">
<link rel="stylesheet" href="/node_modules/selectize/dist/css/selectize.bootstrap3.css">

<link rel="stylesheet" href="/node_modules/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="/dist/css/query-builder.default.css" id="qb-theme">
<link rel="stylesheet" href="http://mistic100.github.io/jQuery-QueryBuilder/assets/flags/flags.css">

Expand Down Expand Up @@ -185,7 +185,7 @@ <h3>Output</h3>
en: 'Name',
fr: 'Nom'
},
icon: 'glyphicon glyphicon-user',
icon: 'bi-person-fill',
value_separator: ',',
type: 'string',
optgroup: 'core',
Expand All @@ -202,7 +202,7 @@ <h3>Output</h3>
{
id: 'age',
label: 'Age',
icon: 'glyphicon glyphicon-calendar',
icon: 'bi-calendar3',
type: 'integer',
input: 'text',
value_separator: '|',
Expand All @@ -219,7 +219,7 @@ <h3>Output</h3>
{
id: 'bson',
label: 'BSON',
icon: 'glyphicon glyphicon-qrcode',
icon: 'bi-qr-code',
type: 'string',
input: 'textarea',
operators: ['equal'],
Expand All @@ -232,7 +232,7 @@ <h3>Output</h3>
{
id: 'category',
label: 'Category',
icon: 'glyphicon glyphicon-th-list',
icon: 'bi-list-task',
type: 'integer',
input: 'checkbox',
optgroup: 'core',
Expand All @@ -258,7 +258,7 @@ <h3>Output</h3>
{
id: 'continent',
label: 'Continent',
icon: 'glyphicon glyphicon-globe',
icon: 'bi-globe-americas',
type: 'string',
input: 'select',
optgroup: 'core',
Expand Down Expand Up @@ -307,7 +307,7 @@ <h3>Output</h3>
{
id: 'state',
label: 'State',
icon: 'glyphicon glyphicon-globe',
icon: 'bi-globe-americas',
type: 'string',
input: 'select',
multiple: true,
Expand Down Expand Up @@ -343,7 +343,7 @@ <h3>Output</h3>
{
id: 'in_stock',
label: 'In stock',
icon: 'glyphicon glyphicon-log-in',
icon: 'bi-box-arrow-in-right',
type: 'integer',
input: 'radio',
optgroup: 'plugin',
Expand All @@ -359,7 +359,7 @@ <h3>Output</h3>
{
id: 'price',
label: 'Price',
icon: 'glyphicon glyphicon-usd',
icon: 'bi-currency-dollar',
type: 'double',
size: 5,
validation: {
Expand All @@ -376,7 +376,7 @@ <h3>Output</h3>
{
id: 'rate',
label: 'Rate',
icon: 'glyphicon glyphicon-flash',
icon: 'bi-box-arrow-lightning-charge-fill',
type: 'integer',
validation: {
min: 0,
Expand All @@ -400,7 +400,7 @@ <h3>Output</h3>
{
id: 'id',
label: 'Identifier',
icon: 'glyphicon glyphicon-sunglasses',
icon: 'bi-sunglasses',
type: 'string',
optgroup: 'plugin',
placeholder: '____-____-____',
Expand All @@ -419,7 +419,7 @@ <h3>Output</h3>
{
id: 'coord',
label: 'Coordinates',
icon: 'glyphicon glyphicon-star-empty',
icon: 'bi-star',
type: 'string',
default_value: 'C.5',
description: 'The letter is the cadran identifier:\
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
],
"dependencies": {
"bootstrap": "^3.4.1",
"bootstrap-icons": "^1.11.3",
"jquery": "^3.5.1",
"jquery-extendext": "^1.0.0",
"moment": "^2.29.1",
Expand Down
10 changes: 5 additions & 5 deletions src/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,10 +187,10 @@ QueryBuilder.DEFAULTS = {
],

icons: {
add_group: 'glyphicon glyphicon-plus-sign',
add_rule: 'glyphicon glyphicon-plus',
remove_group: 'glyphicon glyphicon-remove',
remove_rule: 'glyphicon glyphicon-remove',
error: 'glyphicon glyphicon-warning-sign'
add_group: 'bi-plus-circle-fill',
add_rule: 'bi-plus-lg',
remove_group: 'bi-x-lg',
remove_rule: 'bi-x-lg',
error: 'bi-exclamation-triangle'
}
};
8 changes: 4 additions & 4 deletions src/plugins/bt-checkbox/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
* @memberof module:plugins
* @description Applies Awesome Bootstrap Checkbox for checkbox and radio inputs.
* @param {object} [options]
* @param {string} [options.font='glyphicons']
* @param {string} [options.font='bootstrap-icons']
* @param {string} [options.color='default']
*/
QueryBuilder.define('bt-checkbox', function(options) {
if (options.font == 'glyphicons') {
this.$el.addClass('bt-checkbox-glyphicons');
if (options.font === 'bootstrap-icons') {
this.$el.addClass('bt-checkbox-bootstrap-icons');
}

this.on('getRuleInput.filter', function(h, rule, name) {
Expand Down Expand Up @@ -40,6 +40,6 @@ QueryBuilder.define('bt-checkbox', function(options) {
}
});
}, {
font: 'glyphicons',
font: 'bootstrap-icons',
color: 'default'
});
12 changes: 3 additions & 9 deletions src/plugins/bt-checkbox/plugin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
.query-builder.bt-checkbox-glyphicons {
.query-builder.bt-checkbox-bootstrap-icons {
.checkbox input[type='checkbox']:checked + label::after {
font-family: 'Glyphicons Halflings';
content: '\e013';
}

.checkbox label::after {
padding-left: 4px;
padding-top: 2px;
font-size: 9px;
font-family: 'bootstrap-icons';
content: '\F633'; // https://icons.getbootstrap.com/icons/check-lg/
}
}
4 changes: 2 additions & 2 deletions src/plugins/filter-description/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* @memberof module:plugins
* @description Provides three ways to display a description about a filter: inline, Bootsrap Popover or Bootbox.
* @param {object} [options]
* @param {string} [options.icon='glyphicon glyphicon-info-sign']
* @param {string} [options.icon='bi-info-circle-fill']
* @param {string} [options.mode='popover'] - inline, popover or bootbox
* @throws ConfigError
*/
Expand Down Expand Up @@ -105,7 +105,7 @@ QueryBuilder.define('filter-description', function(options) {
});
}
}, {
icon: 'glyphicon glyphicon-info-sign',
icon: 'bi-info-circle-fill',
mode: 'popover'
});

Expand Down
4 changes: 2 additions & 2 deletions src/plugins/invert/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* @memberof module:plugins
* @description Allows to invert a rule operator, a group condition or the entire builder.
* @param {object} [options]
* @param {string} [options.icon='glyphicon glyphicon-random']
* @param {string} [options.icon='bi-shuffle']
* @param {boolean} [options.recursive=true]
* @param {boolean} [options.invert_rules=true]
* @param {boolean} [options.display_rules_button=false]
Expand Down Expand Up @@ -53,7 +53,7 @@ QueryBuilder.define('invert', function(options) {
}
}
}, {
icon: 'glyphicon glyphicon-random',
icon: 'bi-shuffle',
recursive: true,
invert_rules: true,
display_rules_button: false,
Expand Down
8 changes: 4 additions & 4 deletions src/plugins/not-group/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
* @memberof module:plugins
* @description Adds a "Not" checkbox in front of group conditions.
* @param {object} [options]
* @param {string} [options.icon_checked='glyphicon glyphicon-checked']
* @param {string} [options.icon_unchecked='glyphicon glyphicon-unchecked']
* @param {string} [options.icon_checked='bi-check2-square']
* @param {string} [options.icon_unchecked='bi-square']
*/
QueryBuilder.define('not-group', function(options) {
var self = this;
Expand Down Expand Up @@ -112,8 +112,8 @@ QueryBuilder.define('not-group', function(options) {
e.value.not = !!data.not;
});
}, {
icon_unchecked: 'glyphicon glyphicon-unchecked',
icon_checked: 'glyphicon glyphicon-check',
icon_unchecked: 'bi-square',
icon_checked: 'bi-check2-square',
disable_template: false
});

Expand Down
4 changes: 2 additions & 2 deletions src/plugins/sortable/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* @param {object} [options]
* @param {boolean} [options.inherit_no_drop=true]
* @param {boolean} [options.inherit_no_sortable=true]
* @param {string} [options.icon='glyphicon glyphicon-sort']
* @param {string} [options.icon='bi-sort-down']
* @throws MissingLibraryError, ConfigError
*/
QueryBuilder.define('sortable', function(options) {
Expand Down Expand Up @@ -177,7 +177,7 @@ QueryBuilder.define('sortable', function(options) {
}, {
inherit_no_sortable: true,
inherit_no_drop: true,
icon: 'glyphicon glyphicon-sort',
icon: 'bi-sort-down',
disable_template: false
});

Expand Down
Loading
Loading