Merge pull request #1 from keegangeorge/feature-edit-table
FEATURE: Ability to edit markdown tables in posts
This commit is contained in:
Keegan George
GitHub
commit
60d9d65095
|
|
@ -4,8 +4,8 @@
|
|||
|
||||
A theme component that adds a button to the composer tools to easily build tables in markdown.
|
||||
|
||||
## To Do List:
|
||||
## To Do List
|
||||
|
||||
- [X] Add table builder functionality
|
||||
- [ ] Possibly add the ability to edit tables
|
||||
- [X] Add front-end tests
|
||||
- [X] Add front-end tests
|
||||
|
|
|
|||
|
|
@ -8,7 +8,10 @@
|
|||
"theme_version": "0.0.1",
|
||||
"minimum_discourse_version": null,
|
||||
"maximum_discourse_version": null,
|
||||
"assets": {},
|
||||
"assets": {
|
||||
"jsuites": "assets/jsuites.js",
|
||||
"jspreadsheet": "assets/jspreadsheet.js"
|
||||
},
|
||||
"modifiers": {
|
||||
"svg_icons": [
|
||||
"align-left",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,77 +1,7 @@
|
|||
.table-builder-modal-modal {
|
||||
.modal-inner-container {
|
||||
--modal-max-width: 90vw;
|
||||
}
|
||||
}
|
||||
@import "vendor/jspreadsheet";
|
||||
@import "vendor/jspreadsheet-datatables";
|
||||
@import "vendor/jspreadsheet-theme";
|
||||
@import "vendor/jsuites";
|
||||
|
||||
.table-header-fields {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.table-builder-input {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header-column {
|
||||
border: 1px solid var(--primary-low-mid);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.column-action-buttons {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 0.5rem;
|
||||
margin-top: auto;
|
||||
border-top: 1px solid var(--primary-low-mid);
|
||||
padding-top: 1rem;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.column-aligned {
|
||||
&-right .btn-align-right {
|
||||
background: var(--primary-high);
|
||||
.d-icon {
|
||||
color: var(--primary-very-low);
|
||||
}
|
||||
}
|
||||
&-left .btn-align-left {
|
||||
background: var(--primary-high);
|
||||
.d-icon {
|
||||
color: var(--primary-very-low);
|
||||
}
|
||||
}
|
||||
&-center .btn-align-center {
|
||||
background: var(--primary-high);
|
||||
.d-icon {
|
||||
color: var(--primary-very-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body-inputs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.table-builder-input {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.body-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 1rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
input {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "table-builder";
|
||||
@import "table-editor";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,87 @@
|
|||
import { apiInitializer } from "discourse/lib/api";
|
||||
import showModal from "discourse/lib/show-modal";
|
||||
import { schedule } from "@ember/runloop";
|
||||
import I18n from "I18n";
|
||||
import { iconNode } from "discourse-common/lib/icon-library";
|
||||
import { create } from "virtual-dom";
|
||||
import { ajax } from "discourse/lib/ajax";
|
||||
import { popupAjaxError } from "discourse/lib/ajax-error";
|
||||
export default apiInitializer("0.11.1", (api) => {
|
||||
const site = api.container.lookup("site:main");
|
||||
const currentUser = api.getCurrentUser();
|
||||
|
||||
function createButton() {
|
||||
const openPopupBtn = document.createElement("button");
|
||||
openPopupBtn.classList.add(
|
||||
"open-popup-link",
|
||||
"btn-default",
|
||||
"btn",
|
||||
"btn-icon-text"
|
||||
);
|
||||
const expandIcon = create(
|
||||
iconNode("pencil-alt", { class: "edit-table-icon" })
|
||||
);
|
||||
const openPopupText = document.createTextNode(
|
||||
I18n.t(themePrefix("discourse_table_builder.edit.btn_edit"))
|
||||
);
|
||||
openPopupBtn.append(expandIcon, openPopupText);
|
||||
return openPopupBtn;
|
||||
}
|
||||
|
||||
function generateModal(event) {
|
||||
const table = event.target.parentNode.lastElementChild;
|
||||
const tempTable = table.cloneNode(true);
|
||||
const tableId = event.target.getAttribute("data-table-id");
|
||||
|
||||
return ajax(`/posts/${this.id}`, { type: "GET" })
|
||||
.then((post) => {
|
||||
showModal("table-editor-modal", {
|
||||
model: post,
|
||||
}).setProperties({
|
||||
tableHtml: tempTable,
|
||||
tableId,
|
||||
});
|
||||
})
|
||||
.catch(popupAjaxError);
|
||||
}
|
||||
|
||||
function generatePopups(tables, attrs) {
|
||||
tables.forEach((table, index) => {
|
||||
if (site.isMobileDevice) {
|
||||
return;
|
||||
}
|
||||
|
||||
const popupBtn = createButton();
|
||||
popupBtn.setAttribute("data-table-id", index); // sets a table id so each table can be distinctly edited
|
||||
table.parentNode.classList.add("fullscreen-table-wrapper");
|
||||
const expandBtn = document.querySelector(".open-popup-link");
|
||||
|
||||
if (table.parentNode.contains(expandBtn)) {
|
||||
expandBtn.parentNode.insertBefore(popupBtn, expandBtn);
|
||||
} else {
|
||||
table.parentNode.insertBefore(popupBtn, table);
|
||||
}
|
||||
|
||||
popupBtn.addEventListener("click", generateModal.bind(attrs), false);
|
||||
});
|
||||
}
|
||||
|
||||
api.decorateCookedElement(
|
||||
(post, helper) => {
|
||||
const postOwner = helper.widget.attrs.username;
|
||||
|
||||
if (postOwner !== currentUser.username) {
|
||||
return;
|
||||
}
|
||||
|
||||
schedule("afterRender", () => {
|
||||
const tables = post.querySelectorAll("table");
|
||||
generatePopups(tables, helper.widget.attrs);
|
||||
});
|
||||
},
|
||||
{
|
||||
onlyStream: true,
|
||||
id: "edit-table",
|
||||
}
|
||||
);
|
||||
});
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
// import Controller from "@ember/controller";
|
||||
import { action } from "@ember/object";
|
||||
import loadScript from "discourse/lib/load-script";
|
||||
import { arrayToTable, findTableRegex, tableToObj } from "../lib/utilities";
|
||||
import Component from "@ember/component";
|
||||
import { ajax } from "discourse/lib/ajax";
|
||||
import { popupAjaxError } from "discourse/lib/ajax-error";
|
||||
import I18n from "I18n";
|
||||
|
||||
export default Component.extend({
|
||||
tagName: "",
|
||||
showEditReason: false,
|
||||
|
||||
didInsertElement() {
|
||||
this._super(...arguments);
|
||||
|
||||
this.loadLibraries().then(() => {
|
||||
this.buildTable(this.tableHtml);
|
||||
});
|
||||
},
|
||||
|
||||
loadLibraries() {
|
||||
return loadScript(settings.theme_uploads.jsuites).then(() => {
|
||||
return loadScript(settings.theme_uploads.jspreadsheet);
|
||||
});
|
||||
},
|
||||
|
||||
buildTable(table) {
|
||||
const tableObject = tableToObj(table);
|
||||
const headings = [];
|
||||
const tableData = [];
|
||||
|
||||
tableObject.forEach((object) => {
|
||||
// Build Headings
|
||||
if (!headings.includes(...Object.keys(object))) {
|
||||
headings.push(...Object.keys(object));
|
||||
}
|
||||
|
||||
// Build Table Data
|
||||
tableData.push([...Object.values(object)]);
|
||||
});
|
||||
|
||||
const columns = headings.map((heading) => {
|
||||
return {
|
||||
title: heading,
|
||||
width: heading.length * 15,
|
||||
};
|
||||
});
|
||||
|
||||
const spreadsheetContainer = document.querySelector("#spreadsheet");
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
this.spreadsheet = jspreadsheet(spreadsheetContainer, {
|
||||
data: tableData,
|
||||
columns,
|
||||
});
|
||||
},
|
||||
|
||||
@action
|
||||
showEditReasonField() {
|
||||
if (this.showEditReason) {
|
||||
return this.set("showEditReason", false);
|
||||
} else {
|
||||
return this.set("showEditReason", true);
|
||||
}
|
||||
},
|
||||
|
||||
@action
|
||||
cancelTableEdit() {
|
||||
this.triggerModalClose();
|
||||
},
|
||||
|
||||
@action
|
||||
editTable() {
|
||||
const updatedHeaders = this.spreadsheet.getHeaders().split(","); // keys
|
||||
const updatedData = this.spreadsheet.getData(); // values
|
||||
|
||||
const markdownTable = this.buildTableMarkdown(updatedHeaders, updatedData);
|
||||
const tableId = this.get("tableId");
|
||||
const postId = this.model.id;
|
||||
const newRaw = markdownTable;
|
||||
const editReason =
|
||||
this.get("editReason") ||
|
||||
I18n.t(themePrefix("discourse_table_builder.edit.default_edit_reason"));
|
||||
const raw = this.model.raw;
|
||||
const newPostRaw = this.buildUpdatedPost(tableId, raw, newRaw);
|
||||
|
||||
this.updateTable(postId, newPostRaw, editReason);
|
||||
},
|
||||
|
||||
buildUpdatedPost(tableId, raw, newRaw) {
|
||||
const tableToEdit = raw.match(findTableRegex());
|
||||
let editedTable;
|
||||
|
||||
if (tableToEdit.length > 1) {
|
||||
editedTable = raw.replace(tableToEdit[tableId], newRaw);
|
||||
} else {
|
||||
editedTable = raw.replace(findTableRegex(), newRaw);
|
||||
}
|
||||
|
||||
return editedTable;
|
||||
},
|
||||
|
||||
updateTable(postId, raw, edit_reason) {
|
||||
return ajax(`/posts/${postId}.json`, {
|
||||
type: "PUT",
|
||||
data: {
|
||||
post: {
|
||||
raw,
|
||||
edit_reason,
|
||||
},
|
||||
},
|
||||
})
|
||||
.catch(popupAjaxError)
|
||||
.finally(() => {
|
||||
this.triggerModalClose();
|
||||
});
|
||||
},
|
||||
|
||||
buildTableMarkdown(headers, data) {
|
||||
const table = [];
|
||||
data.forEach((row) => {
|
||||
const result = {};
|
||||
|
||||
headers.forEach((key, index) => (result[key] = row[index]));
|
||||
table.push(result);
|
||||
});
|
||||
|
||||
return arrayToTable(table);
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import Controller from "@ember/controller";
|
||||
import { action } from "@ember/object";
|
||||
|
||||
export default class extends Controller {
|
||||
@action
|
||||
closeEditModal() {
|
||||
this.send("closeModal");
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* Generate an object from an HTML table
|
||||
*
|
||||
* @see {@link https://gist.github.com/mattheo-gist/4151867|GitHub}
|
||||
*
|
||||
* @param {Table} table HTML Table element
|
||||
*
|
||||
* @return {Object} A JavaScript object
|
||||
*/
|
||||
export function tableToObj(table) {
|
||||
var rows = table.rows;
|
||||
var propCells = rows[0].cells;
|
||||
var propNames = [];
|
||||
var results = [];
|
||||
var obj, row, cells;
|
||||
|
||||
// Use the first row for the property names
|
||||
// Could use a header section but result is the same if
|
||||
// there is only one header row
|
||||
for (var i = 0, iLen = propCells.length; i < iLen; i++) {
|
||||
propNames.push(propCells[i].textContent || propCells[i].innerText);
|
||||
}
|
||||
|
||||
// Use the rows for data
|
||||
// Could use tbody rows here to exclude header & footer
|
||||
// but starting from 1 gives required result
|
||||
for (var j = 1, jLen = rows.length; j < jLen; j++) {
|
||||
cells = rows[j].cells;
|
||||
obj = {};
|
||||
|
||||
for (var k = 0; k < iLen; k++) {
|
||||
obj[propNames[k]] = cells[k].textContent || cells[k].innerText;
|
||||
}
|
||||
results.push(obj);
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate markdown table from an array of objects
|
||||
*
|
||||
* @see {@link https://github.com/Nijikokun/array-to-table|GitHub}:
|
||||
*
|
||||
* @param {Array} array Array of objects
|
||||
* @param {Array} columns Optional, table column names, otherwise taken from the keys of the first object
|
||||
* @param {String} alignment Optional table alignment. Can be 'center' (default), 'left' or 'right'
|
||||
*
|
||||
* @return {String} Markdown table
|
||||
*/
|
||||
export function arrayToTable(array, columns, alignment = "center") {
|
||||
var table = "";
|
||||
var separator = {
|
||||
left: ":---",
|
||||
right: "---:",
|
||||
center: "---",
|
||||
};
|
||||
|
||||
// Generate column list
|
||||
var cols = columns ? columns.split(",") : Object.keys(array[0]);
|
||||
|
||||
// Generate table headers
|
||||
table += cols.join(" | ");
|
||||
table += "\r\n";
|
||||
|
||||
// Generate table header seperator
|
||||
table += cols
|
||||
.map(function () {
|
||||
return separator[alignment] || separator.center;
|
||||
})
|
||||
.join(" | ");
|
||||
table += "\r\n";
|
||||
|
||||
// Generate table body
|
||||
array.forEach(function (item) {
|
||||
table +=
|
||||
cols
|
||||
.map(function (key) {
|
||||
return String(item[key] || "");
|
||||
})
|
||||
.join(" | ") + "\r\n";
|
||||
});
|
||||
|
||||
// Return table
|
||||
return table;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns a regular experssion finding all markdown tables
|
||||
*/
|
||||
export function findTableRegex() {
|
||||
return /((\r?){2}|^)([^\r\n]*\|[^\r\n]*(\r?\n)?)+(?=(\r?\n){2}|$)/gm;
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<DModalBody
|
||||
@title={{theme-prefix "discourse_table_builder.edit.modal.title"}}
|
||||
@class="table-editor-modal"
|
||||
>
|
||||
<div class="edit-reason">
|
||||
<DButton
|
||||
@icon="info-circle"
|
||||
@title={{theme-prefix
|
||||
"discourse_table_builder.edit.modal.trigger_reason"
|
||||
}}
|
||||
@action={{action "showEditReasonField"}}
|
||||
@class="btn btn-icon btn-flat no-text btn-edit-reason"
|
||||
/>
|
||||
{{#if showEditReason}}
|
||||
<TextField
|
||||
@value={{this.editReason}}
|
||||
@placeholderKey={{theme-prefix
|
||||
"discourse_table_builder.edit.modal.reason"
|
||||
}}
|
||||
/>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div id="spreadsheet" tabindex="1" class="jexcel_container"></div>
|
||||
</DModalBody>
|
||||
|
||||
<div class="modal-footer">
|
||||
<DButton
|
||||
@class="btn-edit-table"
|
||||
@label={{theme-prefix "discourse_table_builder.edit.modal.create"}}
|
||||
@icon="pencil-alt"
|
||||
@action={{action "editTable"}}
|
||||
/>
|
||||
<DButton
|
||||
@class="btn-flat"
|
||||
@label={{theme-prefix "discourse_table_builder.edit.modal.cancel"}}
|
||||
@action={{action "cancelTableEdit"}}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<SpreadsheetEditor
|
||||
@model={{this.model}}
|
||||
@tableHtml={{this.tableHtml}}
|
||||
@tableId={{this.tableId}}
|
||||
@triggerModalClose={{action "closeEditModal"}}
|
||||
/>
|
||||
|
|
@ -17,5 +17,14 @@ en:
|
|||
align_left: "Align Left"
|
||||
align_center: "Align Center"
|
||||
align_right: "Align Right"
|
||||
edit:
|
||||
btn_edit: "Edit Table"
|
||||
modal:
|
||||
title: "Edit Table"
|
||||
cancel: "cancel"
|
||||
create: "Update Table"
|
||||
reason: "why are you editing?"
|
||||
trigger_reason: "Add reason for edit"
|
||||
default_edit_reason: "Update Table with Table Editor"
|
||||
theme_metadata:
|
||||
description: "Adds a button to the composer to easily build tables in markdown"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
.table-builder-modal-modal {
|
||||
.modal-inner-container {
|
||||
--modal-max-width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
.table-header-fields {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.table-builder-input {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header-column {
|
||||
border: 1px solid var(--primary-low-mid);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.column-action-buttons {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 0.5rem;
|
||||
margin-top: auto;
|
||||
border-top: 1px solid var(--primary-low-mid);
|
||||
padding-top: 1rem;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.column-aligned {
|
||||
&-right .btn-align-right {
|
||||
background: var(--primary-high);
|
||||
.d-icon {
|
||||
color: var(--primary-very-low);
|
||||
}
|
||||
}
|
||||
&-left .btn-align-left {
|
||||
background: var(--primary-high);
|
||||
.d-icon {
|
||||
color: var(--primary-very-low);
|
||||
}
|
||||
}
|
||||
&-center .btn-align-center {
|
||||
background: var(--primary-high);
|
||||
.d-icon {
|
||||
color: var(--primary-very-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body-inputs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.table-builder-input {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.body-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 1rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
input {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
.open-popup-link {
|
||||
display: inline;
|
||||
margin-inline: 0.25em;
|
||||
}
|
||||
|
||||
.btn-edit-table {
|
||||
background: var(--tertiary);
|
||||
color: var(--secondary);
|
||||
|
||||
.d-icon {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.discourse-no-touch & {
|
||||
&:hover {
|
||||
background-color: var(--tertiary-hover);
|
||||
color: var(--secondary);
|
||||
|
||||
.d-icon {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-editor-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.btn-edit-reason {
|
||||
background: none;
|
||||
.d-icon {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
table.jexcel {
|
||||
border-right: 1px solid transparent;
|
||||
}
|
||||
|
||||
table.jexcel > thead {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
table.jexcel > thead > tr > td {
|
||||
border-top: 1px solid transparent;
|
||||
border-left: 1px solid transparent;
|
||||
border-right: 1px solid transparent;
|
||||
border-bottom: 1px solid #000;
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.jexcel > thead > tr > td.selected {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
table.jexcel > tbody > tr > td {
|
||||
padding: 8px;
|
||||
border-right: 1px solid transparent;
|
||||
border-left: 1px solid transparent;
|
||||
}
|
||||
|
||||
table.jexcel > tbody > tr > td:first-child {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
table.jexcel > tbody > tr.selected > td:first-child {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.jexcel_toolbar {
|
||||
background-color: transparent;
|
||||
border: 0px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 1px solid #ccc;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.jexcel_pagination > div > div {
|
||||
border: 1px solid transparent;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.jexcel_page_selected {
|
||||
background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
|
||||
border: 1px solid #979797 !important;
|
||||
font-weight: normal;
|
||||
color: #333 !important;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/*.jexcel > div > table > tbody > tr,
|
||||
.jexcel > div > table > thead
|
||||
{
|
||||
border-left:1px solid transparent;
|
||||
}
|
||||
.jexcel > div > table > tbody > tr > td
|
||||
{
|
||||
padding:10px;
|
||||
border-right:1px solid transparent;
|
||||
}
|
||||
.jexcel > div > table > tbody > td.edition
|
||||
{
|
||||
padding:0px;
|
||||
padding-left:4px;
|
||||
}
|
||||
.jexcel > div > table > tbody > tr > td:first-child
|
||||
{
|
||||
background-color:#fff;
|
||||
font-weight:bold;
|
||||
}
|
||||
.jexcel > div > table > tbody > tr.selected > td:first-child
|
||||
{
|
||||
background-color:#eee;
|
||||
}
|
||||
.jexcel > div > table > thead > tr > td.selected
|
||||
{
|
||||
background-color:#eee;
|
||||
}*/
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
:root {
|
||||
--jexcel_header_color: var(--primary-high);
|
||||
--jexcel_header_color_highlighted: var(--primary-high);
|
||||
--jexcel_header_background: var(--primary-very-low);
|
||||
--jexcel_header_background_highlighted: var(--primary-low);
|
||||
|
||||
--jexcel_content_color: var(--primary);
|
||||
--jexcel_content_color_highlighted: var(--primary-high);
|
||||
--jexcel_content_background: var(--secondary);
|
||||
--jexcel_content_background_highlighted: var(--tertiary-very-low);
|
||||
|
||||
--jexcel_menu_background: var(--secondary);
|
||||
--jexcel_menu_background_highlighted: var(--secondary-very-high);
|
||||
--jexcel_menu_color: var(--primary-medium);
|
||||
--jexcel_menu_color_highlighted: var(--primary);
|
||||
|
||||
--jexcel_border_color: var(--primary-low-mid);
|
||||
--jexcel_border_color_highlighted: var(--tertiary-high);
|
||||
|
||||
--active_color: var(--primary-very-low);
|
||||
--active-color: var(--active_color);
|
||||
}
|
||||
|
||||
.jexcel {
|
||||
border-bottom: 1px solid var(--jexcel_border_color);
|
||||
border-right: 1px solid var(--jexcel_border_color);
|
||||
}
|
||||
|
||||
.jexcel_corner {
|
||||
background-color: var(--tertiary);
|
||||
}
|
||||
|
||||
.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.jcontextmenu {
|
||||
border: 1px solid var(--jexcel_border_color);
|
||||
background: var(--jexcel_menu_background);
|
||||
color: var(--jexcel_menu_color);
|
||||
box-shadow: 0 12px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.jcontextmenu > div a {
|
||||
color: var(--jexcel_menu_color);
|
||||
}
|
||||
|
||||
.jcontextmenu > div:not(.contextmenu-line):hover a {
|
||||
color: var(--jexcel_menu_color_highlighted);
|
||||
}
|
||||
|
||||
.jcontextmenu > 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: 1.5px solid var(--jexcel_border_color_highlighted);
|
||||
}
|
||||
.jexcel .highlight-right {
|
||||
border-right: 1.5px solid var(--jexcel_border_color_highlighted);
|
||||
}
|
||||
.jexcel .highlight-left {
|
||||
border-left: 1.5px solid var(--jexcel_border_color_highlighted);
|
||||
}
|
||||
.jexcel .highlight-top {
|
||||
border-top: 1.5px 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;
|
||||
}
|
||||
|
||||
table.jexcel > thead > tr > td {
|
||||
border-top: 1px solid var(--jexcel_border_color);
|
||||
border-right: 1px solid var(--jexcel_border_color);
|
||||
border-bottom: none;
|
||||
background-color: var(--jexcel_header_background);
|
||||
|
||||
&:first-child {
|
||||
border-left: 1px solid var(--jexcel_border_color);
|
||||
}
|
||||
}
|
||||
|
||||
table.jexcel > thead > tr > td.selected {
|
||||
background-color: var(--jexcel_header_background_highlighted);
|
||||
color: var(--jexcel_header_color_highlighted);
|
||||
}
|
||||
|
||||
table.jexcel > tbody > tr > td {
|
||||
border-right: 1px solid var(--jexcel_border_color);
|
||||
|
||||
&:first-child {
|
||||
border-left: 1px solid var(--jexcel_border_color);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,692 @@
|
|||
:root {
|
||||
--jexcel-border-color: #000;
|
||||
}
|
||||
|
||||
.jexcel_container {
|
||||
display: inline-block;
|
||||
padding-right: 2px;
|
||||
box-sizing: border-box;
|
||||
overscroll-behavior: contain;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.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: 100%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.jexcel_container.with-toolbar .jexcel > thead > tr > td {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.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: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.jexcel_container.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_overflow > tbody > tr > td {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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;
|
||||
padding-right: 2px;
|
||||
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);
|
||||
}
|
||||
.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: 20;
|
||||
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: 0.875rem;
|
||||
letter-spacing: 0.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: 0.875rem;
|
||||
letter-spacing: 0.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;
|
||||
}
|
||||
|
||||
.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: 8px;
|
||||
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 4px 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 > tfoot > 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,
|
||||
.jexcel tfoot .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;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,3 @@
|
|||
extend_content_security_policy:
|
||||
type: list
|
||||
default: "script_src: http://localhost:4200/"
|
||||
Loading…
Reference in New Issue