Commit 076a3ecb authored by Mikolaï Krol's avatar Mikolaï Krol Committed by Mikolaï Krol

erp5_jexcel_editor: add multiple tabs, no formula bar

parent bd86cdd7
...@@ -13,4 +13,4 @@ input.jexcel_formula { ...@@ -13,4 +13,4 @@ input.jexcel_formula {
top:0px; top:0px;
z-index:21; z-index:21;
display: inline-block; display: inline-block;
} }
\ No newline at end of file
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<script src="rsvp.js"></script> <script src="rsvp.js"></script>
<script src="renderjs.js"></script> <script src="renderjs.js"></script>
<script src="gadget.utils.toolbar.js"></script> <script src="gadget.utils.template.js"></script>
</head> </head>
<body> <body>
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<dictionary> <dictionary>
<item> <item>
<key> <string>__name__</string> </key> <key> <string>__name__</string> </key>
<value> <string>gadget.utils.toolbar.html</string> </value> <value> <string>gadget.utils.template.html</string> </value>
</item> </item>
<item> <item>
<key> <string>content_type</string> </key> <key> <string>content_type</string> </key>
......
...@@ -3,6 +3,95 @@ ...@@ -3,6 +3,95 @@
(function (window, rJS, jexcel) { (function (window, rJS, jexcel) {
"use strict"; "use strict";
var template = {
minDimensions: [26, 100],
defaultColWidth: 100,
allowExport: true,
columnSorting: true,
columnDrag: true,
columnResize: true,
rowResize: true,
rowDrag: true,
editable: true,
allowInsertRow: true,
allowManualInsertRow: true,
allowInsertColumn: true,
allowManualInsertColumn: true,
allowDeleteRow: true,
allowRenameColumn: true,
allowComments: true,
selectionCopy: true,
search: true,
fullscreen: true,
autoIncrement: true,
parseFormulas: true
};
var undo = {
type: 'i',
content: 'undo',
onclick: function (a, b, c) {
b.undo();
}
};
var redo = {
type: 'i',
content: 'redo',
onclick: function (a, b, c) {
b.redo();
}
};
var merge = {
type: 'i',
content: 'table_chart',
onclick: function (a, b, c) {
var cell = document.querySelector("td.highlight");
var x = Number(cell.dataset.x);
var selected = b.getJson(true);
var colspan = Object.keys(selected[0]).length;
var rowspan = selected.length;
var letter = "";
if (x <= 25) {
letter += String.fromCharCode(97 + x).toUpperCase();
}
else {
letter += String.fromCharCode(97 + Math.trunc(x / 25) - 1).toUpperCase();
letter += String.fromCharCode(97 + (x % 26)).toUpperCase();
}
var coor = letter + (Number(cell.dataset.y) + 1).toString();
b.setMerge(coor, colspan, rowspan);
}
};
var unmerge = {
type: 'i',
content: 'close',
onclick: function (a, b, c) {
var cell = document.querySelector("td.highlight-selected");
var x = Number(cell.dataset.x);
var letter = "";
if (x <= 25) {
letter += String.fromCharCode(97 + x).toUpperCase();
}
else {
letter += String.fromCharCode(97 + Math.trunc(x / 25) - 1).toUpperCase();
letter += String.fromCharCode(97 + (x % 26)).toUpperCase();
}
var coor = letter + (Number(cell.dataset.y) + 1).toString();
b.removeMerge(coor);
}
};
var destroy_merge = {
type: 'i',
content: 'cancel',
onclick: function (a, b, c) {
b.destroyMerged();
}
};
var font_style = { var font_style = {
type: 'select', type: 'select',
k: 'font-family', k: 'font-family',
...@@ -96,8 +185,22 @@ ...@@ -96,8 +185,22 @@
rJS(window) rJS(window)
.declareMethod("getToolbarList", function (dict) { .declareMethod("getToolbarList", function (add_function, dict) {
var list = []; var list = [];
if (dict.hasOwnProperty("undo_redo") && dict.undo_redo) {
list.push(undo, redo);
}
if (dict.hasOwnProperty("add") && dict.add) {
var add = {
type: 'i',
content: 'add',
onclick : add_function
};
list.push(add);
}
if (dict.hasOwnProperty("merge") && dict.merge) {
list.push(merge, unmerge, destroy_merge);
}
if (dict.hasOwnProperty("text_font") && dict.text_font) { if (dict.hasOwnProperty("text_font") && dict.text_font) {
list.push(font_style, font_size, style_bold, style_italic, style_underlined); list.push(font_style, font_size, style_bold, style_italic, style_underlined);
} }
...@@ -107,7 +210,9 @@ ...@@ -107,7 +210,9 @@
if (dict.hasOwnProperty("color_picker") && dict.color_picker) { if (dict.hasOwnProperty("color_picker") && dict.color_picker) {
list.push(text_color, background_color); list.push(text_color, background_color);
} }
return list; var res = Object.assign({}, template);
res.toolbar = list;
return res;
}); });
}(window, rJS, jexcel)); }(window, rJS, jexcel));
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<dictionary> <dictionary>
<item> <item>
<key> <string>__name__</string> </key> <key> <string>__name__</string> </key>
<value> <string>jexcel.webcomponent.js</string> </value> <value> <string>gadget.utils.template.js</string> </value>
</item> </item>
<item> <item>
<key> <string>content_type</string> </key> <key> <string>content_type</string> </key>
......
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="File" module="OFS.Image"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>__name__</string> </key>
<value> <string>gadget.utils.toolbar.js</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>application/javascript</string> </value>
</item>
<item>
<key> <string>precondition</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
...@@ -11,9 +11,9 @@ ...@@ -11,9 +11,9 @@
<script src="jexcel/jexcel.js"></script> <script src="jexcel/jexcel.js"></script>
<script src="jsuites/jsuites.js"></script> <script src="jsuites/jsuites.js"></script>
<link rel="stylesheet" href="jexcel/jexcel.css" type="text/css" /> <link rel="stylesheet" href="jexcel/jexcel_perso.css" type="text/css" />
<link rel="stylesheet" href="jsuites/jsuites.css" type="text/css" /> <link rel="stylesheet" href="jsuites/jsuites.css" type="text/css" />
<link rel="stylesheet" href="complements.css" type="text/css" /> <!--<link rel="stylesheet" href="complements.css" type="text/css" />-->
<link rel="stylesheet" href="icons.css" type="text/css" /> <link rel="stylesheet" href="icons.css" type="text/css" />
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
</head> </head>
<body> <body>
<div data-gadget-url="gadget.utils.toolbar.html" <div data-gadget-url="gadget.utils.template.html"
data-gadget-scope="toolbar_gadget" data-gadget-scope="template_gadget"
data-gadget-sandbox="public"> data-gadget-sandbox="public">
</div> </div>
<div class="spreadsheet"></div> <div class="spreadsheet"></div>
......
...@@ -5,76 +5,88 @@ ...@@ -5,76 +5,88 @@
rJS(window) rJS(window)
.setState({saveConfig: false}) .setState({
saveConfig: false,
newSheet: false
})
.declareAcquiredMethod("notifyChange", "notifyChange") .declareAcquiredMethod("notifyChange", "notifyChange")
.declareJob("deferNotifyChange", function () { .declareJob("deferNotifyChange", function () {
// Ensure error will be correctly handled
return this.notifyChange(); return this.notifyChange();
}) })
.declareMethod("render", function (options) { .declareMethod("render", function (options) {
var gadget = this; var gadget = this;
return gadget.getDeclaredGadget("toolbar_gadget") return gadget.getDeclaredGadget("template_gadget")
.push(function (toolbar_gadget) { .push(function (template_gadget) {
gadget.toolbar_gadget = toolbar_gadget; gadget.template_gadget = template_gadget;
}) })
.push(function () { .push(function () {
options.newSheet = true;
return gadget.changeState(options); return gadget.changeState(options);
}); });
}) })
.declareMethod('getContent', function () { .declareMethod('getContent', function () {
var gadget = this, form_data = {}; var gadget = this, form_data = {};
if (this.state.editable || true) { if (this.state.editable) {
form_data[this.state.key] = JSON.stringify(gadget.table.getConfig()); var sheets = [];
gadget.element.querySelector('.spreadsheet').jexcel.forEach(function (sheet) {
sheets.push(sheet.getConfig());
});
form_data[this.state.key] = JSON.stringify(sheets);
this.state.value = form_data[this.state.key]; this.state.value = form_data[this.state.key];
} }
return form_data; return form_data;
}) })
.declareMethod("addSheet", function () {
var gadget = this;
return gadget.template_gadget.getToolbarList(() => gadget.addSheet(), {
undo_redo: true,
add: true,
merge: true,
text_font: true,
text_position: true,
color_picker: true
})
.push(function (dict) {
dict.sheetName = "Sheet " + (gadget.element.querySelector('.spreadsheet').jexcel.length + 1);
jexcel.tabs(gadget.element.querySelector(".spreadsheet"), [dict]);
return gadget.changeState({newSheet: true});
});
})
.onStateChange(function (modification_dict) { .onStateChange(function (modification_dict) {
var template = { console.log(modification_dict.hasOwnProperty("newSheet"));
minDimensions: [52, 300], var gadget = this, tmp;
defaultColWidth: 100,
allowExport: true,
columnSorting: true,
columnDrag: true,
columnResize: true,
rowResize: true,
rowDrag: true,
editable: true,
allowInsertRow: true,
allowManualInsertRow: true,
allowInsertColumn: true,
allowManualInsertColumn: true,
allowDeleteRow: true,
allowRenameColumn: true,
allowComments: true,
selectionCopy: true,
search: true,
fullscreen: true,
autoIncrement: true,
parseFormulas: true
},
gadget = this, tmp = Object.assign({}, template), table, toolbar_list;
gadget.deferNotifyChangeBinded = gadget.deferNotifyChange.bind(gadget); gadget.deferNotifyChangeBinded = gadget.deferNotifyChange.bind(gadget);
if (modification_dict.hasOwnProperty('value')) { if (modification_dict.hasOwnProperty('value')) {
gadget.state.value = gadget.state.value === "" ? gadget.state.value : JSON.parse(gadget.state.value); return gadget.template_gadget.getToolbarList(() => gadget.addSheet(), {
Object.assign(tmp, template); undo_redo: true,
Object.assign(tmp, gadget.state.value); add: true,
return gadget.toolbar_gadget.getToolbarList({ merge: true,
text_font: true, text_font: true,
text_position: true, text_position: true,
color_picker: true color_picker: true
}) })
.push(function (list) { .push(function (config) {
toolbar_list = list; tmp = Object.assign({}, config);
}) if (gadget.state.value === "") {
.push(function () { gadget.state.value = [tmp];
table = jexcel(gadget.element.querySelector(".spreadsheet"), Object.assign(tmp, { }
onevent: function (ev) { else {
gadget.state.value = JSON.parse(gadget.state.value);
gadget.state.value.map(sheet => {
var res = Object.assign(sheet, tmp);
return res;
});
}
gadget.state.value.map((sheet, i) => {
sheet.sheetName = "Sheet " + (i + 1);
sheet.onEvent = function (ev) {
console.log("event");
var exluded_events = ["onload", "onfocus", "onblur", "onselection"]; var exluded_events = ["onload", "onfocus", "onblur", "onselection"];
if (!exluded_events.includes(ev)) { if (!exluded_events.includes(ev)) {
if ((ev === "onchangestyle" && gadget.state.saveConfig) || ev !== "onchangestyle") { if ((ev === "onchangestyle" && gadget.state.saveConfig) || ev !== "onchangestyle") {
...@@ -83,116 +95,57 @@ ...@@ -83,116 +95,57 @@
gadget.state.saveConfig = true; gadget.state.saveConfig = true;
} }
} }
}, return sheet;
onselection: function (ev) { };
var cell = gadget.element.querySelector("td.highlight-selected"); //sheet.onselection = function (ev) {
var formula = gadget.element.querySelector("input.jexcel_formula"); //var cell = gadget.element.querySelector("td.highlight-selected");
formula.value = cell.textContent; //var formula = gadget.element.querySelector("input.jexcel_formula");
}, //formula.value = cell.textContent;
toolbar: [ //};
//undo
{
type: 'i',
content: 'undo',
onclick: function () {
table.undo();
}
},
//redo
{
type: 'i',
content: 'redo',
onclick: function () {
table.redo();
}
},
//merge cells
{
type: 'i',
content: 'table_chart',
onclick: function () {
var cell = gadget.element.querySelector("td.highlight-selected");
var x = Number(cell.dataset.x);
var selected = table.getJson(true);
var colspan = Object.keys(selected[0]).length;
var rowspan = selected.length;
var letter = "";
if (x <= 25) {
letter += String.fromCharCode(97 + x).toUpperCase();
}
else {
letter += String.fromCharCode(97 + Math.trunc(x / 25) - 1).toUpperCase();
letter += String.fromCharCode(97 + (x % 26)).toUpperCase();
}
var coor = letter + (Number(cell.dataset.y) + 1).toString();
table.setMerge(coor, colspan, rowspan);
}
},
//unmerge cell
{
type: 'i',
content: 'close',
onclick: function () {
var cell = gadget.element.querySelector("td.highlight-selected");
var x = Number(cell.dataset.x);
var letter = "";
if (x <= 25) {
letter += String.fromCharCode(97 + x).toUpperCase();
}
else {
letter += String.fromCharCode(97 + Math.trunc(x / 25) - 1).toUpperCase();
letter += String.fromCharCode(97 + (x % 26)).toUpperCase();
}
var coor = letter + (Number(cell.dataset.y) + 1).toString();
table.removeMerge(coor);
}
},
//destroy all merged cells
{
type: 'i',
content: 'cancel',
onclick: function () {
table.destroyMerged();
}
}
].concat(toolbar_list)
}));
gadget.table = table;
var filter = gadget.element.querySelector(".jexcel_filter");
gadget.element.querySelector(".jexcel_toolbar").appendChild(filter);
var formula_div = document.createElement("div");
formula_div.classList.add("jexcel_formula");
var img = document.createElement("img");
img.src = "fx.png";
var formula_input = document.createElement("input");
formula_input.classList.add("jexcel_formula");
formula_div.appendChild(img);
formula_div.appendChild(formula_input);
gadget.element.querySelector("div.jexcel_toolbar").parentNode.insertBefore(formula_div, gadget.element.querySelector("div.jexcel_toolbar").nextSibling);
console.log(gadget.element.querySelectorAll("i"));
var icon_title = {
"undo": "Undo",
"redo": "Redo",
"table_chart": "Merge cells",
"close": "Destroy merge",
"cancel": "Destroy all merges",
"format_bold": "Bold",
"format_italic": "Italic",
"format_underlined": "Underline",
"format_align_left": "Align left",
"format_align_center": "Align center",
"format_align_right": "Align right",
"format_align_justify": "Align justify",
"vertical_align_top": "Align top",
"vertical_align_center": "Align middle",
"vertical_align_bottom": "Align bottom",
}
gadget.element.querySelectorAll("i").forEach(i => {
if (i.dataset.k === "color") {i.title = "Color"}
else if (i.dataset.k === "background-color") {i.title = "Background color"}
else {i.title = icon_title[i.textContent]}
});
}); });
return gadget.state.value;
})
.push(function (sheets) {
jexcel.tabs(gadget.element.querySelector(".spreadsheet"), sheets)
});
}
console.log("aaaaaa");
if (modification_dict.hasOwnProperty("newSheet") || true) {
var filter = gadget.element.querySelector(".jexcel_filter");
gadget.element.querySelector(".jexcel_toolbar").appendChild(filter);
var formula_div = document.createElement("div");
formula_div.classList.add("jexcel_formula");
var img = document.createElement("img");
img.src = "fx.png";
var formula_input = document.createElement("input");
formula_input.classList.add("jexcel_formula");
formula_div.appendChild(img);
formula_div.appendChild(formula_input);
gadget.element.querySelector("div.jexcel_toolbar").parentNode.insertBefore(formula_div, gadget.element.querySelector("div.jexcel_toolbar").nextSibling);
var icon_title = {
"undo": "Undo",
"redo": "Redo",
"add": "Add",
"table_chart": "Merge cells",
"close": "Destroy merge",
"cancel": "Destroy all merges",
"format_bold": "Bold",
"format_italic": "Italic",
"format_underlined": "Underline",
"format_align_left": "Align left",
"format_align_center": "Align center",
"format_align_right": "Align right",
"format_align_justify": "Align justify",
"vertical_align_top": "Align top",
"vertical_align_center": "Align middle",
"vertical_align_bottom": "Align bottom",
}
gadget.element.querySelectorAll("i").forEach(i => {
if (i.dataset.k === "color") {i.title = "Color"}
else if (i.dataset.k === "background-color") {i.title = "Background color"}
else {i.title = icon_title[i.textContent]}
});
gadget.state.newSheet = false;
} }
}) })
...@@ -200,7 +153,7 @@ ...@@ -200,7 +153,7 @@
var gadget = this; var gadget = this;
var formula = gadget.element.querySelector("input.jexcel_formula"); var formula = gadget.element.querySelector("input.jexcel_formula");
if (ev.target == gadget.element.querySelector("td.highlight-selected input")) { if (ev.target == gadget.element.querySelector("td.highlight-selected input")) {
formula.value = ev.target.value; //formula.value = ev.target.value;
} }
}, false, false) }, false, false)
......
...@@ -21,10 +21,14 @@ ...@@ -21,10 +21,14 @@
.jexcel_container.fullscreen .jexcel_content { .jexcel_container.fullscreen .jexcel_content {
overflow:auto; overflow:auto;
width:100%; width:100%;
height:96.5%; height:100%;
background-color:#ffffff; background-color:#ffffff;
} }
.jexcel_container.with-toolbar .jexcel > thead > tr > td {
top: 0;
}
.jexcel_container.fullscreen.with-toolbar { .jexcel_container.fullscreen.with-toolbar {
height: calc(100% - 46px); height: calc(100% - 46px);
} }
...@@ -90,7 +94,7 @@ ...@@ -90,7 +94,7 @@
.with-toolbar .jexcel > thead > tr > td .with-toolbar .jexcel > thead > tr > td
{ {
/**top:42px;**/ top:42px;
} }
.jexcel > thead > tr > td.dragging .jexcel > thead > tr > td.dragging
...@@ -552,12 +556,12 @@ ...@@ -552,12 +556,12 @@
{ {
display:flex; display:flex;
justify-content:space-between; justify-content:space-between;
/**margin-bottom:4px;**/ margin-bottom:4px;
} }
.jexcel_filter > div .jexcel_filter > div
{ {
padding:4px; padding:8px;
align-items:center; align-items:center;
} }
...@@ -609,7 +613,7 @@ ...@@ -609,7 +613,7 @@
background-color:#f3f3f3; background-color:#f3f3f3;
border:1px solid #ccc; border:1px solid #ccc;
padding:4px; padding:4px;
margin:0px 2px 1px 1px; margin:0px 2px 4px 1px;
position:sticky; position:sticky;
top:0px; top:0px;
z-index:21; z-index:21;
......
...@@ -1339,7 +1339,12 @@ console.log(ret); ...@@ -1339,7 +1339,12 @@ console.log(ret);
} }
// Handle click // Handle click
if (toolbar[i].onclick && typeof(toolbar[i].onclick)) { if (toolbar[i].onclick && typeof(toolbar[i].onclick)) {
toolbarItem.onclick = toolbar[i].onclick; toolbarItem.onclick = (function (a) {
var b = a;
return function () {
toolbar[b].onclick(el, obj, this);
};
})(i);
} else { } else {
toolbarItem.onclick = function() { toolbarItem.onclick = function() {
var k = this.getAttribute('data-k'); var k = this.getAttribute('data-k');
......
:root {
--jexcel_header_color: #888;
--jexcel_header_color_highlighted: #444;
--jexcel_header_background: #313131;
--jexcel_header_background_highlighted: #777;
--jexcel_content_color: #777;
--jexcel_content_color_highlighted: #333;
--jexcel_content_background: #3e3e3e;
--jexcel_content_background_highlighted: #777;
--jexcel_menu_background: #7e7e7e;
--jexcel_menu_background_highlighted: #ebebeb;
--jexcel_menu_color: #ddd;
--jexcel_menu_color_highlighted: #222;
--jexcel_border_color: #5f5f5f;
--jexcel_border_color_highlighted: #999;
--active_color: #eee;
--active-color: var(--active_color);
}
.jexcel {
border-bottom: 1px solid var(--jexcel_border_color);
border-right: 1px solid var(--jexcel_border_color);
}
.jexcel > tbody > tr > td,
.jexcel > thead > tr > td {
border-top: 1px solid var(--jexcel_border_color);
border-left: 1px solid var(--jexcel_border_color);
background-color: var(--jexcel_content_background);
color: var(--jexcel_content_color);
}
.jexcel > tbody > tr > td:first-child,
.jexcel > thead > tr > td {
background-color: var(--jexcel_header_background);
color: var(--jexcel_header_color);
}
.jexcel > thead > tr > td.selected,
.jexcel > tbody > tr.selected > td:first-child {
background-color: var(--jexcel_header_background_highlighted);
color: var(--jexcel_header_color_highlighted);
}
.jexcel > tbody > tr > td.jexcel_cursor a {
color: var(--active-color);
}
.jexcel_pagination > div > div {
color: var(--jexcel_header_color);
background: var(--jexcel_header_background);
border: 1px solid var(--jexcel_border_color);
}
.jexcel_page,
.jexcel_container input,
.jexcel_container select {
color: var(--jexcel_header_color);
background: var(--jexcel_header_background);
border: 1px solid var(--jexcel_border_color);
}
.jexcel_contextmenu {
border: 1px solid var(--jexcel_border_color);
background: var(--jexcel_menu_background);
color: var(--jexcel_menu_color);
box-shadow: var(--jexcel_menu_box_shadow);
-webkit-box-shadow: var(--jexcel_menu_box_shadow);
-moz-box-shadow: var(--jexcel_menu_box_shadow);
}
.jexcel_contextmenu > div a {
color: var(--jexcel_menu_color);
}
.jexcel_contextmenu > div:not(.contextmenu-line):hover a {
color: var(--jexcel_menu_color_highlighted);
}
.jexcel_contextmenu > div:not(.contextmenu-line):hover {
background: var(--jexcel_menu_background_highlighted);
}
.jexcel_dropdown .jdropdown-container,
.jexcel_dropdown .jdropdown-content {
background-color: var(--jexcel_content_background);
color: var(--jexcel_content_color);
}
.jexcel_dropdown .jdropdown-item {
color: var(--jexcel_content_color);
}
.jexcel_dropdown .jdropdown-item:hover,
.jexcel_dropdown .jdropdown-selected,
.jexcel_dropdown .jdropdown-cursor {
background-color: var(--jexcel_content_background_highlighted);
color: var(--jexcel_content_color_highlighted);
}
.jexcel .jcalendar-content {
background-color: var(--jexcel_header_background);
color: var(--jexcel_header_color);
}
.jexcel .jcalendar-content > table {
background-color: var(--jexcel_content_background);
color: var(--jexcel_content_color);
}
.jexcel .jcalendar-weekday {
background-color: var(--jexcel_content_background_highlighted);
color: var(--jexcel_content_color_highlighted);
}
.jexcel .jcalendar-sunday {
color: var(--jexcel_header_color);
}
.jexcel .jcalendar-selected {
background-color: var(--jexcel_content_background_highlighted);
color: var(--jexcel_content_color_highlighted);
}
.jexcel_toolbar i.jexcel_toolbar_item {
color: var(--jexcel_content_color);
}
.jexcel_toolbar i.jexcel_toolbar_item:hover {
background: var(--jexcel_content_background_highlighted);
color: var(--jexcel_content_color_highlighted);
}
.jexcel_toolbar {
background: var(--jexcel_header_background);
}
.jexcel_content::-webkit-scrollbar-track {
background: var(--jexcel_background_head);
}
.jexcel_content::-webkit-scrollbar-thumb {
background: var(--jexcel_background_head_highlighted);
}
.jexcel_border_main {
border: 1px solid #000;
border-color: var(--jexcel_border_color_highlighted);
}
.jexcel .highlight {
background-color: var(--jexcel_content_background_highlighted);
}
.jexcel .highlight-bottom {
border-bottom: 1px solid var(--jexcel_border_color_highlighted);
}
.jexcel .highlight-right {
border-right: 1px solid var(--jexcel_border_color_highlighted);
}
.jexcel .highlight-left {
border-left: 1px solid var(--jexcel_border_color_highlighted);
}
.jexcel .highlight-top {
border-top: 1px solid var(--jexcel_border_color_highlighted);
}
.jexcel .copying-top {
border-top-color: var(--jexcel_border_color_highlighted);
}
.jexcel .copying-right {
border-right-color: var(--jexcel_border_color_highlighted);
}
.jexcel .copying-left {
border-left-color: var(--jexcel_border_color_highlighted);
}
.jexcel .copying-bottom {
border-bottom-color: var(--jexcel_border_color_highlighted);
}
.jexcel_border_main, .jexcel .highlight-top.highlight-left, .jexcel .highlight-top, .jexcel .highlight-left {
-webkit-box-shadow: unset;
box-shadow: unset;
}
\ No newline at end of file
class Jexcel extends HTMLElement {
constructor() {
super();
}
init(o) {
// Shadow root
const shadowRoot = this.attachShadow({mode: 'open'});
// Style
const cssJexcel = document.createElement('link');
cssJexcel.rel = 'stylesheet';
cssJexcel.type = 'text/css'
cssJexcel.href = 'jexcel.css';
shadowRoot.appendChild(cssJexcel);
const cssJsuites = document.createElement('link');
cssJsuites.rel = 'stylesheet';
cssJsuites.type = 'text/css'
cssJsuites.href = 'jsuites.css';
shadowRoot.appendChild(cssJsuites);
// Jexcel container
var container = document.createElement('div');
shadowRoot.appendChild(container);
// Garantee all elements are rendered
setTimeout(function() {
// Parse JSON
var config = JSON.parse(o.innerHTML);
// Root
config.root = shadowRoot;
// Reset container
o.innerHTML = '';
// Create jexcel element
jexcel(container, config);
}, 0);
}
connectedCallback() {
this.init(this);
}
disconnectedCallback() {
}
attributeChangedCallback() {
}
}
window.customElements.define('jexcel-spreadsheet', Jexcel);
\ No newline at end of file
:root {
--jexcel-border-color:#000;
}
.jexcel_container {
display:inline-block;
padding-right:2px;
box-sizing: border-box;
overscroll-behavior: contain;
}
.jexcel_container.fullscreen {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:21;
}
.jexcel_container.fullscreen .jexcel_content {
overflow:auto;
width:100%;
height:96.5%;
background-color:#ffffff;
}
.jexcel_container.fullscreen.with-toolbar {
height: calc(100% - 46px);
}
.jexcel_content {
display:inline-block;
box-sizing: border-box;
padding-right:3px;
padding-bottom:3px;
position:relative;
scrollbar-width: thin;
scrollbar-color: #666 transparent;
}
@supports (-moz-appearance:none) {
.jexcel_content { padding-right:10px; }
}
.jexcel_content::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.jexcel_content::-webkit-scrollbar-track {
background: #eee;
}
.jexcel_content::-webkit-scrollbar-thumb {
background: #666;
}
.jexcel {
border-collapse: separate;
table-layout: fixed;
white-space: nowrap;
empty-cells: show;
border: 0px;
background-color: #fff;
width: 0;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.jexcel > thead > tr > td
{
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
background-color: #f3f3f3;
padding: 2px;
cursor: pointer;
box-sizing: border-box;
overflow: hidden;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index:2;
}
.with-toolbar .jexcel > thead > tr > td
{
/**top:42px;**/
}
.jexcel > thead > tr > td.dragging
{
background-color:#fff;
opacity:0.5;
}
.jexcel > thead > tr > td.selected
{
background-color:#dcdcdc;
}
.jexcel > thead > tr > td.arrow-up
{
background-repeat:no-repeat;
background-position:center right 5px;
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 14l5-5 5 5H7z' fill='gray'/%3E%3C/svg%3E");
text-decoration:underline;
}
.jexcel > thead > tr > td.arrow-down
{
background-repeat:no-repeat;
background-position:center right 5px;
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='gray'/%3E%3C/svg%3E");
text-decoration:underline;
}
.jexcel > tbody > tr > td:first-child
{
position:relative;
background-color:#f3f3f3;
text-align:center;
}
.jexcel > tbody.resizable > tr > td:first-child::before
{
content:'\00a0';
width:100%;
height:3px;
position:absolute;
bottom:0px;
left:0px;
cursor:row-resize;
}
.jexcel > tbody.draggable > tr > td:first-child::after
{
content:'\00a0';
width:3px;
height:100%;
position:absolute;
top:0px;
right:0px;
cursor:move;
}
.jexcel > tbody > tr.dragging > td
{
background-color:#eee;
opacity:0.5;
}
.jexcel > tbody > tr > td
{
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid transparent;
border-bottom:1px solid transparent;
padding:4px;
white-space: nowrap;
box-sizing: border-box;
line-height:1em;
}
.jexcel > tbody > tr > td:last-child
{
overflow:hidden;
}
.jexcel > tbody > tr > td > img
{
display:inline-block;
max-width:100px;
}
.jexcel > tbody > tr > td.readonly
{
color:rgba(0,0,0,0.3)
}
.jexcel > tbody > tr.selected > td:first-child
{
background-color:#dcdcdc;
}
.jexcel > tbody > tr > td > select,
.jexcel > tbody > tr > td > input,
.jexcel > tbody > tr > td > textarea
{
border:0px;
border-radius:0px;
outline:0px;
width:100%;
margin:0px;
padding:0px;
background-color:transparent;
box-sizing: border-box;
}
.jexcel > tbody > tr > td > textarea
{
resize: none;
padding-top:6px !important;
}
.jexcel > tbody > tr > td > input[type=checkbox]
{
width:12px;
margin-top:2px;
}
.jexcel > tbody > tr > td > input[type=radio]
{
width:12px;
margin-top:2px;
}
.jexcel > tbody > tr > td > select
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 40%;
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
}
.jexcel > tbody > tr > td.jexcel_dropdown
{
background-repeat: no-repeat;
background-position:top 50% right 5px;
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='lightgray'/%3E%3C/svg%3E");
text-overflow: ellipsis;
overflow-x:hidden;
}
.jexcel > tbody > tr > td.jexcel_dropdown.jexcel_comments
{
background:url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='lightgray'/%3E%3C/svg%3E") top 50% right 5px no-repeat, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFuGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphMTlhZDJmOC1kMDI2LTI1NDItODhjOS1iZTRkYjkyMmQ0MmQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpkOGI5NDUyMS00ZjEwLWQ5NDktYjUwNC0wZmU1N2I3Nzk1MDEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIHN0RXZ0OndoZW49IjIwMTktMDEtMzFUMTg6NTU6MDhaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmExOWFkMmY4LWQwMjYtMjU0Mi04OGM5LWJlNGRiOTIyZDQyZCIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4En6MDAAAAX0lEQVQYlX3KOw6AIBBAwS32RpJADXfx0pTET+ERZJ8F8RODFtONsG0QAoh0CSDM82dqodaBdQXnfoLZQM7gPai+wjNNE8R4pTuAYNZSKZASqL7CMy0LxNgJp30fKYUDi3+vIqb/+rUAAAAASUVORK5CYII=') top right no-repeat;
}
.jexcel > tbody > tr > td > .color
{
width:90%;
height:10px;
margin:auto;
}
.jexcel > tbody > tr > td > a {
text-decoration: underline;
}
.jexcel > tbody > tr > td.highlight > a {
color: blue;
cursor: pointer;
}
.jexcel > tfoot > tr > td
{
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
background-color: #f3f3f3;
padding: 2px;
cursor: pointer;
box-sizing: border-box;
overflow: hidden;
}
.jexcel .highlight {
background-color:rgba(0,0,0,0.05);
}
.jexcel .highlight-top {
border-top:1px solid #000; /* var(--jexcel-border-color);*/
box-shadow: 0px -1px #ccc;
}
.jexcel .highlight-left {
border-left:1px solid #000; /* var(--jexcel-border-color);*/
box-shadow: -1px 0px #ccc;
}
.jexcel .highlight-right {
border-right:1px solid #000; /* var(--jexcel-border-color);*/
}
.jexcel .highlight-bottom {
border-bottom:1px solid #000; /* var(--jexcel-border-color);*/
}
.jexcel .highlight-top.highlight-left {
box-shadow: -1px -1px #ccc;
-webkit-box-shadow: -1px -1px #ccc;
-moz-box-shadow: -1px -1px #ccc;
}
.jexcel .highlight-selected
{
background-color:rgba(0,0,0,0.0);
}
.jexcel .selection
{
background-color:rgba(0,0,0,0.05);
}
.jexcel .selection-left
{
border-left:1px dotted #000;
}
.jexcel .selection-right
{
border-right:1px dotted #000;
}
.jexcel .selection-top
{
border-top:1px dotted #000;
}
.jexcel .selection-bottom
{
border-bottom:1px dotted #000;
}
.jexcel_corner
{
position:absolute;
background-color: rgb(0, 0, 0);
height: 1px;
width: 1px;
border: 1px solid rgb(255, 255, 255);
top:-2000px;
left:-2000px;
cursor:crosshair;
box-sizing: initial;
z-index:30;
padding: 2px;
}
.jexcel .editor
{
outline:0px solid transparent;
overflow:visible;
white-space: nowrap;
text-align:left;
padding:0px;
box-sizing: border-box;
overflow:visible !important;
}
.jexcel .editor > input
{
padding-left:4px;
}
.jexcel .editor .jupload
{
position:fixed;
top:100%;
z-index:40;
user-select:none;
-webkit-font-smoothing: antialiased;
font-size: .875rem;
letter-spacing: .2px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
padding:10px;
background-color:#fff;
width:300px;
min-height:225px;
margin-top:2px;
}
.jexcel .editor .jupload img
{
width:100%;
height:auto;
}
.jexcel .editor .jexcel_richtext
{
position:fixed;
top:100%;
z-index:40;
user-select:none;
-webkit-font-smoothing: antialiased;
font-size: .875rem;
letter-spacing: .2px;
-webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
padding:10px;
background-color:#fff;
min-width:280px;
max-width:310px;
margin-top:2px;
text-align:left;
}
.jexcel .editor .jclose:after
{
position:absolute;
top:0;
right:0;
margin:10px;
content:'close';
font-family:'Material icons';
font-size:24px;
width:24px;
height:24px;
line-height:24px;
cursor:pointer;
text-shadow: 0px 0px 5px #fff;
}
.jexcel, .jexcel td, .jexcel_corner
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
.jexcel_textarea
{
position:absolute;
top:-999px;
left:-999px;
width:1px;
height:1px;
}
.jexcel .dragline
{
position:absolute;
}
.jexcel .dragline div
{
position:relative;
top:-6px;
height:5px;
width:22px;
}
.jexcel .dragline div:hover
{
cursor:move;
}
.jexcel .onDrag
{
background-color:rgba(0,0,0,0.6);
}
.jexcel .error
{
border:1px solid red;
}
.jexcel thead td.resizing
{
border-right-style:dotted !important;
border-right-color:red !important;
}
.jexcel tbody tr.resizing > td
{
border-bottom-style:dotted !important;
border-bottom-color:red !important;
}
.jexcel tbody td.resizing
{
border-right-style:dotted !important;
border-right-color:red !important;
}
.jexcel .jdropdown-header
{
border:0px !important;
outline:none !important;
width:100% !important;
height:100% !important;
padding:0px !important;
padding-left:8px !important;
}
.jexcel .jdropdown-container
{
margin-top:1px;
}
.jexcel .jdropdown-container-header {
padding: 0px;
margin: 0px;
height: inherit;
}
.jexcel .jdropdown-picker
{
border:0px !important;
padding:0px !important;
width:inherit;
height:inherit;
}
.jexcel .jexcel_comments
{
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFuGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphMTlhZDJmOC1kMDI2LTI1NDItODhjOS1iZTRkYjkyMmQ0MmQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpkOGI5NDUyMS00ZjEwLWQ5NDktYjUwNC0wZmU1N2I3Nzk1MDEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIHN0RXZ0OndoZW49IjIwMTktMDEtMzFUMTg6NTU6MDhaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmExOWFkMmY4LWQwMjYtMjU0Mi04OGM5LWJlNGRiOTIyZDQyZCIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4En6MDAAAAX0lEQVQYlX3KOw6AIBBAwS32RpJADXfx0pTET+ERZJ8F8RODFtONsG0QAoh0CSDM82dqodaBdQXnfoLZQM7gPai+wjNNE8R4pTuAYNZSKZASqL7CMy0LxNgJp30fKYUDi3+vIqb/+rUAAAAASUVORK5CYII=');
background-repeat: no-repeat;
background-position: top right;
}
.jexcel .sp-replacer
{
margin: 2px;
border:0px;
}
.jexcel > thead > tr.jexcel_filter > td > input
{
border:0px;
width:100%;
outline:none;
}
.jexcel_about {
float: right;
font-size: 0.7em;
padding: 2px;
text-transform: uppercase;
letter-spacing: 1px;
display: none;
}
.jexcel_about a {
color: #ccc;
text-decoration: none;
}
.jexcel_about img {
display: none;
}
.jexcel_filter
{
display:flex;
justify-content:space-between;
/**margin-bottom:4px;**/
}
.jexcel_filter > div
{
padding:4px;
align-items:center;
}
.jexcel_pagination
{
display:flex;
justify-content:space-between;
align-items:center;
}
.jexcel_pagination > div
{
display:flex;
padding:10px;
}
.jexcel_pagination > div:last-child
{
padding-right:10px;
padding-top:10px;
}
.jexcel_pagination > div > div
{
text-align:center;
width:36px;
height:36px;
line-height:34px;
border:1px solid #ccc;
box-sizing: border-box;
margin-left:2px;
cursor:pointer;
}
.jexcel_page
{
font-size:0.8em;
}
.jexcel_page_selected
{
font-weight:bold;
background-color:#f3f3f3;
}
.jexcel_toolbar
{
display:flex;
background-color:#f3f3f3;
border:1px solid #ccc;
padding:4px;
margin:0px 2px 1px 1px;
position:sticky;
top:0px;
z-index:21;
}
.jexcel_toolbar:empty
{
display:none;
}
.jexcel_toolbar i.jexcel_toolbar_item
{
width:24px;
height:24px;
padding:4px;
cursor:pointer;
display:inline-block;
}
.jexcel_toolbar i.jexcel_toolbar_item:hover
{
background-color:#ddd;
}
.jexcel_toolbar select.jexcel_toolbar_item
{
margin-left:2px;
margin-right:2px;
display:inline-block;
border:0px;
background-color:transparent;
padding-right:10px;
}
.jexcel .dragging-left
{
background-repeat: no-repeat;
background-position:top 50% left 0px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M14 7l-5 5 5 5V7z'/%3E%3Cpath fill='none' d='M24 0v24H0V0h24z'/%3E%3C/svg%3E");
}
.jexcel .dragging-right
{
background-repeat: no-repeat;
background-position:top 50% right 0px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3Cpath fill='none' d='M0 24V0h24v24H0z'/%3E%3C/svg%3E");
}
.jexcel_tabs .jexcel_tab
{
display:none;
}
.jexcel_tabs .jexcel_tab_link
{
display:inline-block;
padding:10px;
padding-left:20px;
padding-right:20px;
margin-right:5px;
margin-bottom:5px;
background-color:#f3f3f3;
cursor:pointer;
}
.jexcel_tabs .jexcel_tab_link.selected
{
background-color:#ddd;
}
.jexcel_hidden_index > tbody > tr > td:first-child,
.jexcel_hidden_index > thead > tr > td:first-child,
.jexcel_hidden_index > colgroup > col:first-child
{
display:none;
}
.jexcel .jrating {
display: inline-flex;
}
.jexcel .jrating > div {
zoom: 0.55;
}
.jexcel .copying-top {
border-top:1px dashed #000;
}
.jexcel .copying-left {
border-left:1px dashed #000;
}
.jexcel .copying-right {
border-right:1px dashed #000;
}
.jexcel .copying-bottom {
border-bottom:1px dashed #000;
}
.jexcel .jexcel_column_filter {
background-repeat: no-repeat;
background-position: top 50% right 5px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='gray' width='18px' height='18px'%3E%3Cpath d='M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
text-overflow: ellipsis;
overflow: hidden;
padding: 0px;
padding-left: 6px;
padding-right: 20px;
}
.jexcel thead .jexcel_freezed {
left: 0px;
z-index: 3 !important;
box-shadow: 2px 0px 2px 0.2px #ccc !important;
-webkit-box-shadow: 2px 0px 2px 0.2px #ccc !important;
-moz-box-shadow: 2px 0px 2px 0.2px #ccc !important;
}
.jexcel tbody .jexcel_freezed {
position: relative;
background-color: #fff;
box-shadow: 1px 1px 1px 1px #ccc !important;
-webkit-box-shadow: 2px 4px 4px 0.1px #ccc !important;
-moz-box-shadow: 2px 4px 4px 0.1px #ccc !important;
}
\ No newline at end of file
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<dictionary> <dictionary>
<item> <item>
<key> <string>__name__</string> </key> <key> <string>__name__</string> </key>
<value> <string>jexcel.theme.css</string> </value> <value> <string>jexcel_perso.css</string> </value>
</item> </item>
<item> <item>
<key> <string>content_type</string> </key> <key> <string>content_type</string> </key>
......
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