Skip to content

Commit 5265681

Browse files
AllanJardAllanJard
committed
New: Dark mode support (DataTables and Bootstrap 5 styling)
New: Simplified UI - list of buttons rather than a ul/li list with inner button New: Streamlined UI look and feel Fix: `-init autoFill.alwaysAsk` wasn't working with a fill option
1 parent ba62c7a commit 5265681

File tree

3 files changed

+84
-77
lines changed

3 files changed

+84
-77
lines changed

‎css/autoFill.dataTables.scss

Lines changed: 63 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,11 @@ div.dt-autofill-list {
5656
margin-left: -250px;
5757
// margin-top is set by JS
5858
background-color: white;
59-
border-radius: 6px;
59+
border-radius: 0.75em;
6060
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
61-
border: 1px solid black;
62-
z-index: 11;
61+
z-index: 104;
6362
box-sizing: border-box;
64-
padding: 1.5em 2em;
63+
padding: 2em;
6564
padding-top: 2em;
6665

6766
div.dtaf-popover-close {
@@ -70,75 +69,46 @@ div.dt-autofill-list {
7069
right: 6px;
7170
width: 22px;
7271
height: 22px;
73-
border: 1px solid #eaeaea;
74-
background-color: #f9f9f9;
7572
text-align: center;
7673
border-radius: 3px;
7774
cursor: pointer;
7875
z-index: 12;
7976
}
8077

81-
ul {
82-
display: table;
83-
margin: 0;
84-
85-
padding: 0;
86-
list-style: none;
87-
width: 100%;
88-
89-
li {
90-
display: table-row;
78+
> div.dt-autofill-list-items {
79+
> button {
80+
display: block;
81+
width: 100%;
82+
margin: 1em 0;
83+
padding: 1em;
84+
border-radius: 0.5em;
85+
border: 1px solid rgba(0, 0, 0, 0.175);
86+
background-color: #f6f6f6;
87+
text-align: left;
9188
cursor: pointer;
9289

93-
&:last-child div.dt-autofill-question,
94-
&:last-child div.dt-autofill-button {
95-
border-bottom: none;
96-
}
97-
9890
&:hover {
99-
background-color: #f6f6f6;
100-
button.btn {
101-
background-color: #548bbb;
102-
}
91+
background-color: #ebebeb;
10392
}
104-
}
105-
}
10693

107-
div.dt-autofill-question {
108-
display: table-cell;
109-
padding: 0.5em 0;
110-
padding-left: 5px;
111-
border-bottom: 1px solid #ccc;
94+
&:first-child {
95+
margin-top: 0;
96+
}
11297

113-
input[type=number] {
114-
padding: 6px;
115-
width: 30px;
116-
margin: -2px 0;
117-
}
118-
}
98+
&:last-child {
99+
margin-bottom: 0;
100+
}
101+
102+
input[type=number] {
103+
padding: 6px;
104+
width: 30px;
105+
margin: -2px 0;
106+
}
119107

120-
div.dt-autofill-button {
121-
display: table-cell;
122-
padding: 0.5em 0;
123-
padding-right: 5px;
124-
border-bottom: 1px solid #ccc;
125-
text-align: right;
126-
127-
@if $autofill-define-button {
128-
button {
129-
color: white;
130-
margin: 0;
131-
padding: 6px 12px;
132-
text-align: center;
133-
border: 1px solid #2e6da4;
134-
background-color: #337ab7;
135-
border-radius: 4px;
136-
cursor: pointer;
137-
vertical-align: middle;
108+
span {
109+
float: right;
138110
}
139111
}
140-
141-
142112
}
143113
}
144114

@@ -156,7 +126,41 @@ div.dt-autofill-background {
156126
background: rgba(0, 0, 0, 0.7); // fallback
157127
background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
158128

159-
z-index: 10;
129+
z-index: 103;
130+
}
131+
132+
html.dark {
133+
div.dt-autofill-handle {
134+
background: rgb(110, 168, 254);
135+
}
136+
137+
div.dt-autofill-select {
138+
position: absolute;
139+
z-index: 1001;
140+
141+
background-color: rgb(110, 168, 254);
142+
background-image: repeating-linear-gradient(45deg,
143+
transparent,
144+
transparent 5px,
145+
rgba(0,0,0,.5) 5px,
146+
rgba(0,0,0,.5) 10px
147+
);
148+
}
149+
150+
div.dt-autofill-list {
151+
background-color: rgb(33, 37, 41);
152+
border: 1px solid rgba(255, 255, 255, 0.15);
153+
154+
button {
155+
color: inherit;
156+
border: 1px solid rgba(255, 255, 255, 0.175);
157+
background-color: rgb(47, 52, 56);
158+
159+
&:hover {
160+
background-color: rgb(64, 69, 73);
161+
}
162+
}
163+
}
160164
}
161165

162166
@media screen and (max-width: 767px) {

‎examples/initialisation/simple.xml

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,23 @@
22
<dt-example table-type="html" table-class="display nowrap" order="1">
33

44
<css lib="datatables autofill" />
5+
56
<js lib="jquery datatables autofill">
67
<![CDATA[
7-
$(document).ready(function() {
8-
$('#example').DataTable( {
9-
autoFill: true
10-
} );
8+
$('#example').DataTable( {
9+
autoFill: true
1110
} );
1211
]]>
1312
</js>
1413

14+
<js-vanilla>
15+
<![CDATA[
16+
new DataTable('#example', {
17+
autoFill: true
18+
} );
19+
]]>
20+
</js-vanilla>
21+
1522
<title lib="AutoFill">Basic initialisation</title>
1623

1724
<info><![CDATA[

‎js/dataTables.autoFill.js

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
/*! AutoFill 2.5.3
1+
/*! AutoFill 2.6.0
22
* ©2008-2023 SpryMedia Ltd - datatables.net/license
33
*/
44

55
/**
66
* @summary AutoFill
77
* @description Add Excel like click and drag auto-fill options to DataTables
8-
* @version 2.5.3
8+
* @version 2.6.0
99
* @author SpryMedia Ltd (www.sprymedia.co.uk)
1010
* @copyright SpryMedia Ltd.
1111
*
@@ -75,7 +75,7 @@ var AutoFill = function( dt, opts )
7575
* @namespace Common and useful DOM elements for the class instance
7676
*/
7777
this.dom = {
78-
closeButton: $('<div class="dtaf-popover-close">x</div>'),
78+
closeButton: $('<div class="dtaf-popover-close">&times;</div>'),
7979

8080
/** @type {jQuery} AutoFill handle */
8181
handle: $('<div class="dt-autofill-handle"/>'),
@@ -96,7 +96,7 @@ var AutoFill = function( dt, opts )
9696
background: $('<div class="dt-autofill-background"/>'),
9797

9898
/** @type {jQuery} Fill type chooser */
99-
list: $('<div class="dt-autofill-list">'+this.s.dt.i18n('autoFill.info', '')+'<ul/></div>'),
99+
list: $('<div class="dt-autofill-list">'+this.s.dt.i18n('autoFill.info', '')+'<div class="dt-autofill-list-items" /></div>'),
100100

101101
/** @type {jQuery} DataTables scrolling container */
102102
dtScroll: null,
@@ -294,21 +294,17 @@ $.extend( AutoFill.prototype, {
294294
var result = actions[ available[0] ].execute( dt, cells );
295295
this._update( result, cells );
296296
}
297-
else if ( available.length > 1 ) {
297+
else if ( available.length > 1 || this.c.alwaysAsk ) {
298298
// Multiple actions available - ask the end user what they want to do
299-
var list = this.dom.list.children('ul').empty();
299+
var list = this.dom.list.children('div.dt-autofill-list-items').empty();
300300

301301
// Add a cancel option
302302
available.push( 'cancel' );
303303

304304
$.each( available, function ( i, name ) {
305-
list.append( $('<li/>')
306-
.append(
307-
'<div class="dt-autofill-question">'+
308-
actions[ name ].option( dt, cells )+
309-
'<div>'
310-
)
311-
.append( $('<div class="dt-autofill-button">' ).append( $('<button class="'+AutoFill.classes.btn+'">'+dt.i18n('autoFill.button', '&gt;')+'</button>')))
305+
list.append( $('<button/>')
306+
.html(actions[ name ].option( dt, cells ))
307+
.append( $('<span class="dt-autofill-button"/>').html(dt.i18n('autoFill.button', '&gt;')))
312308
.on( 'click', function () {
313309
var result = actions[ name ].execute(
314310
dt, cells, $(this).closest('li')
@@ -1119,7 +1115,7 @@ AutoFill.actions = {
11191115
* @static
11201116
* @type String
11211117
*/
1122-
AutoFill.version = '2.5.3';
1118+
AutoFill.version = '2.6.0';
11231119

11241120

11251121
/**

0 commit comments

Comments
 (0)