From e24168bd6826214e34625b4b99d38180e7ac6f49 Mon Sep 17 00:00:00 2001 From: tofulm Date: Wed, 19 Aug 2020 10:11:18 +0200 Subject: [PATCH] * image de tri des cols : on n'utilise plus fontawesome mais des icones svg, personnalisables * On passe le fichier de css en scss (transparent) --- README.md | 4 +++ css/gamutable.css | 70 ++++++++++++++++++++++++---------------- css/gamutable.css.map | 1 + css/gamutable.scss | 53 ++++++++++++++++++++++++++++++ css/table_knacss.css | 49 ++++++++++++++++++++++++++++ img/sprite_gamutable.svg | 1 + inclure/gamutable.html | 6 ++-- js/gamutable.es6.js | 25 +++++++++++--- js/gamutable.js | 26 ++++++++++----- svg/sort_asc.svg | 14 ++++++++ svg/sort_desc.svg | 14 ++++++++ 11 files changed, 221 insertions(+), 42 deletions(-) create mode 100644 css/gamutable.css.map create mode 100644 css/gamutable.scss create mode 100644 css/table_knacss.css create mode 100644 img/sprite_gamutable.svg create mode 100644 svg/sort_asc.svg create mode 100644 svg/sort_desc.svg diff --git a/README.md b/README.md index d9394e5..462f3d7 100644 --- a/README.md +++ b/README.md @@ -16,9 +16,13 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev champcsv="search", delimitercsv=";", namecsv="souscripteurs.csv", + url_sort_asc="#CHEMIN{...}" + url_sort_desc="#CHEMIN{...}" env }> ``` +>url_sort_asc et url_sort_desc => surcharge possible des icones de tri de colonnes + 1. Surcharger `json_gamutable.json.html` en suivant son modele * pour le header c'est de la forme : "champ":"label" * **IMPORTANT** pour le content du json, il que le cle de la KEY de la table soit "id" et non pas "id_souscription" diff --git a/css/gamutable.css b/css/gamutable.css index ca6f414..447fe8b 100644 --- a/css/gamutable.css +++ b/css/gamutable.css @@ -1,49 +1,65 @@ .gamutable--sousTable { - display: flex; - justify-content: space-between; -} -.gamutable--pagination { - display: flex; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: justify; + justify-content: space-between; } -.iconeTri { - float: right; - position: relative; +.gamutable--pagination { + display: -ms-flexbox; + display: flex; } -.iconeTri .fa-sort-asc { - position: absolute; - color: #cecece; - cursor: pointer; + +.gamutable table th > div { + display: -ms-flexbox; + display: flex; } -.iconeTri .fa-sort-desc { - color: #cecece; - cursor: pointer; + +.gamutable table .label_tete_colonne { + -ms-flex-positive: 1; + flex-grow: 1; } -.iconeTri > .active { - color: #000; + +.gamutable table .iconeTri { + float: right; + width: 1rem; } + +.gamutable table .tri_col { + cursor: pointer; + fill: #cecece; +} + +.gamutable table .iconeTri > .active { + fill: #000; +} + #app .select { - background-color: rgba(179, 209, 67, 0.47); + background-color: rgba(179, 209, 67, 0.47); } td.id { - cursor: pointer; + cursor: pointer; } th.icone { - width: 30px; - text-align: center; + width: 30px; + text-align: center; } + td.icone { - /*padding: 0;*/ + /*padding: 0;*/ } td.icone > * { - width: 100%; - display: block; - padding: 0.5rem; - text-align: center; + width: 100%; + display: block; + padding: 0.5rem; + text-align: center; } + td.icone i { - font-size: 1.8rem; + font-size: 1.8rem; } + +/*# sourceMappingURL=gamutable.css.map */ diff --git a/css/gamutable.css.map b/css/gamutable.css.map new file mode 100644 index 0000000..8cbf688 --- /dev/null +++ b/css/gamutable.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACC/B;;ADCA;EACC,oBAAa;EAAb,aAAa;ACEd;;ADCA;EAEE,oBAAa;EAAb,aAAa;ACCf;;ADHA;EAKE,oBAAY;MAAZ,YAAY;ACEd;;ADPA;EAQE,YAAY;EACZ,WAAW;ACGb;;ADZA;EAaE,eAAe;EACf,aAAa;ACGf;;ADjBA;EAiBE,UAAU;ACIZ;;ADDA;EACC,0CAA0C;ACI3C;;ADDA;EACC,eAAe;ACIhB;;ADDA;EACC,WAAW;EACX,kBAAkB;ACInB;;ADFA;EACC,cAAA;ACKD;;ADFA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACKnB;;ADHA;EACC,iBAAiB;ACMlB","file":"gamutable.css","sourcesContent":[".gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n\n.gamutable table {\n\tth > div {\n\t\tdisplay: flex;\n\t}\n\t.label_tete_colonne {\n\t\tflex-grow: 1;\n\t}\n\t.iconeTri {\n\t\tfloat: right;\n\t\twidth: 1rem;\n\t\t//position: relative;\n\t}\n\t.tri_col {\n\t\tcursor: pointer;\n\t\tfill: #cecece;\n\t}\n\t.iconeTri > .active {\n\t\tfill: #000;\n\t}\n}\n#app .select {\n\tbackground-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n\tcursor: pointer;\n}\n\nth.icone {\n\twidth: 30px;\n\ttext-align: center;\n}\ntd.icone {\n\t/*padding: 0;*/\n}\n\ntd.icone > * {\n\twidth: 100%;\n\tdisplay: block;\n\tpadding: 0.5rem;\n\ttext-align: center;\n}\ntd.icone i {\n\tfont-size: 1.8rem;\n}\n",".gamutable--sousTable {\n display: flex;\n justify-content: space-between;\n}\n\n.gamutable--pagination {\n display: flex;\n}\n\n.gamutable table th > div {\n display: flex;\n}\n\n.gamutable table .label_tete_colonne {\n flex-grow: 1;\n}\n\n.gamutable table .iconeTri {\n float: right;\n width: 1rem;\n}\n\n.gamutable table .tri_col {\n cursor: pointer;\n fill: #cecece;\n}\n\n.gamutable table .iconeTri > .active {\n fill: #000;\n}\n\n#app .select {\n background-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n cursor: pointer;\n}\n\nth.icone {\n width: 30px;\n text-align: center;\n}\n\ntd.icone {\n /*padding: 0;*/\n}\n\ntd.icone > * {\n width: 100%;\n display: block;\n padding: 0.5rem;\n text-align: center;\n}\n\ntd.icone i {\n font-size: 1.8rem;\n}\n"]} \ No newline at end of file diff --git a/css/gamutable.scss b/css/gamutable.scss new file mode 100644 index 0000000..f4d9417 --- /dev/null +++ b/css/gamutable.scss @@ -0,0 +1,53 @@ +.gamutable--sousTable { + display: flex; + justify-content: space-between; +} +.gamutable--pagination { + display: flex; +} + +.gamutable table { + th > div { + display: flex; + } + .label_tete_colonne { + flex-grow: 1; + } + .iconeTri { + float: right; + width: 1rem; + //position: relative; + } + .tri_col { + cursor: pointer; + fill: #cecece; + } + .iconeTri > .active { + fill: #000; + } +} +#app .select { + background-color: rgba(179, 209, 67, 0.47); +} + +td.id { + cursor: pointer; +} + +th.icone { + width: 30px; + text-align: center; +} +td.icone { + /*padding: 0;*/ +} + +td.icone > * { + width: 100%; + display: block; + padding: 0.5rem; + text-align: center; +} +td.icone i { + font-size: 1.8rem; +} diff --git a/css/table_knacss.css b/css/table_knacss.css new file mode 100644 index 0000000..7ae58a6 --- /dev/null +++ b/css/table_knacss.css @@ -0,0 +1,49 @@ +/* ----------------------------- */ +/* ==Tables */ +/* ----------------------------- */ +table, +.table { + width: 100%; + max-width: 100%; + table-layout: fixed; + border-collapse: collapse; + vertical-align: top; + margin-bottom: 2rem; +} + +.table { + display: table; + border: 1px solid #acb3c2; + background: transparent; +} + +.table--zebra tbody tr:nth-child(odd) { + background: #e7e9ed; +} + +.table caption { + caption-side: bottom; + padding: 1rem; + color: #333; + font-style: italic; + text-align: right; +} + +.table td, +.table th { + padding: 0.3rem 0.6rem; + min-width: 2rem; + vertical-align: top; + border: 1px #acb3c2 dotted; + text-align: left; + cursor: default; +} + +.table thead { + color: #212529; + background: transparent; +} + +.table--auto { + table-layout: auto; +} diff --git a/img/sprite_gamutable.svg b/img/sprite_gamutable.svg new file mode 100644 index 0000000..5fedb54 --- /dev/null +++ b/img/sprite_gamutable.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inclure/gamutable.html b/inclure/gamutable.html index 7deea2f..727c418 100644 --- a/inclure/gamutable.html +++ b/inclure/gamutable.html @@ -1,5 +1,6 @@ - +[(#SET{sort_asc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_asc]})] +[(#SET{sort_desc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_desc]})]
diff --git a/js/gamutable.es6.js b/js/gamutable.es6.js index bd48dba..7e25ce2 100644 --- a/js/gamutable.es6.js +++ b/js/gamutable.es6.js @@ -150,6 +150,12 @@ let monTableau = { namecsv: { type: String, }, + url_sort_asc: { + type: String, + }, + url_sort_desc: { + type: String, + }, }, data: function () { return { @@ -357,11 +363,20 @@ let monTableau = { - - - - - +
+
+
+ + + + + + + + + +
+
diff --git a/js/gamutable.js b/js/gamutable.js index 909d97c..d9436b7 100644 --- a/js/gamutable.js +++ b/js/gamutable.js @@ -1,18 +1,22 @@ "use strict"; -function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } -function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } +function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } -function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); } +function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); } -function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } } +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } -function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); } +function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } -function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } +function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } -function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } + +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } + +function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } @@ -190,6 +194,12 @@ var monTableau = { }, namecsv: { type: String + }, + url_sort_asc: { + type: String + }, + url_sort_desc: { + type: String } }, data: function data() { @@ -395,7 +405,7 @@ var monTableau = { exporterCSV($csv, this.delimitercsv, this.namecsv); } }, - template: "\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\tBase de donn\xE9es synchronis\xE9e\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t
{{tableau.length}} / {{table.length}} \xE9l\xE9ments
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t
" + template: "\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\tBase de donn\xE9es synchronis\xE9e\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t
{{tableau.length}} / {{table.length}} \xE9l\xE9ments
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t
" }; var app = new Vue({ el: '#app', diff --git a/svg/sort_asc.svg b/svg/sort_asc.svg new file mode 100644 index 0000000..b793dc9 --- /dev/null +++ b/svg/sort_asc.svg @@ -0,0 +1,14 @@ + + + + + + image/svg+xml + + sort + + + + sort + + diff --git a/svg/sort_desc.svg b/svg/sort_desc.svg new file mode 100644 index 0000000..5e7e639 --- /dev/null +++ b/svg/sort_desc.svg @@ -0,0 +1,14 @@ + + + + + + image/svg+xml + + sort + + + + sort + +