Skip to content
Snippets Groups Projects
Verified Commit 785a3ce7 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix: css svg issues with darkmode, pagestepper dom datasource issue

parent a00ad619
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 363 additions and 277 deletions
development/issues/closed/260.html
+ 269
− 16
View file @ 785a3ce7
......@@ -41,28 +41,276 @@
},
{
"id": 3,
"name": "Max Mustermannasdfjasdklöfjasdklöfjöasdklfjöasdkljfköasldjfklöasdjfklöasdjfklöasdjfkölasdjfklöasdköflasdjlöfkjasdklöfjasdlöfkjasdklöfjasdklöfjklasdjfklö",
"name": "Max Mustermann",
"street": "Example Road 3",
"city": "Hamburg",
"zipcode": "20095",
"country": "Germany",
"phone": "+49 40 1111.11",
"email": "max.mustermann@example.com"
},
{
"id": 4,
"name": "Lena Schmidt",
"street": "Hauptstrasse 4",
"city": "Cologne",
"zipcode": "50667",
"country": "Germany",
"phone": "+49 221 9876.54",
"email": "lena.schmidt@example.com"
},
{
"id": 5,
"name": "Markus Meier",
"street": "Ringstrasse 5",
"city": "Frankfurt",
"zipcode": "60311",
"country": "Germany",
"phone": "+49 69 4321.98",
"email": "markus.meier@example.com"
},
{
"id": 6,
"name": "Sophie Fischer",
"street": "Bachstrasse 6",
"city": "Stuttgart",
"zipcode": "70173",
"country": "Germany",
"phone": "+49 711 5678.90",
"email": "sophie.fischer@example.com"
},
{
"id": 7,
"name": "Michael Weber",
"street": "Schillerstrasse 7",
"city": "Dusseldorf",
"zipcode": "40213",
"country": "Germany",
"phone": "+49 211 1234.78",
"email": "michael.weber@example.com"
},
{
"id": 8,
"name": "Laura Hoffmann",
"street": "Goethestrasse 8",
"city": "Leipzig",
"zipcode": "04109",
"country": "Germany",
"phone": "+49 341 2345.67",
"email": "laura.hoffmann@example.com"
},
{
"id": 9,
"name": "Daniel Zimmermann",
"street": "Blumenstrasse 9",
"city": "Dresden",
"zipcode": "01067",
"country": "Germany",
"phone": "+49 351 8765.43",
"email": "daniel.zimmermann@example.com"
},
{
"id": 10,
"name": "Anna Lehmann",
"street": "Marktplatz 10",
"city": "Nuremberg",
"zipcode": "90403",
"country": "Germany",
"phone": "+49 911 3456.21",
"email": "anna.lehmann@example.com"
},
{
"id": 11,
"name": "Tim Köhler",
"street": "Wiesenstrasse 11",
"city": "Hannover",
"zipcode": "30159",
"country": "Germany",
"phone": "+49 511 5678.90",
"email": "tim.koehler@example.com"
},
{
"id": 12,
"name": "Sara Wagner",
"street": "Schlossallee 12",
"city": "Bremen",
"zipcode": "28195",
"country": "Germany",
"phone": "+49 421 7890.12",
"email": "sara.wagner@example.com"
},
{
"id": 13,
"name": "Patrick Müller",
"street": "Waldstrasse 13",
"city": "Dortmund",
"zipcode": "44135",
"country": "Germany",
"phone": "+49 231 6789.45",
"email": "patrick.mueller@example.com"
},
{
"id": 14,
"name": "Julia Braun",
"street": "Lindenallee 14",
"city": "Essen",
"zipcode": "45127",
"country": "Germany",
"phone": "+49 201 7890.65",
"email": "julia.braun@example.com"
},
{
"id": 15,
"name": "Stefan Klein",
"street": "Weinbergstrasse 15",
"city": "Duisburg",
"zipcode": "47051",
"country": "Germany",
"phone": "+49 203 1234.89",
"email": "stefan.klein@example.com"
},
{
"id": 16,
"name": "Nina Wolf",
"street": "Gartenstrasse 16",
"city": "Bochum",
"zipcode": "44787",
"country": "Germany",
"phone": "+49 234 6789.12",
"email": "nina.wolf@example.com"
},
{
"id": 17,
"name": "Jan Hartmann",
"street": "Dorfstrasse 17",
"city": "Wuppertal",
"zipcode": "42103",
"country": "Germany",
"phone": "+49 202 3456.78",
"email": "jan.hartmann@example.com"
},
{
"id": 18,
"name": "Katharina Krämer",
"street": "Kaiserstrasse 18",
"city": "Bonn",
"zipcode": "53111",
"country": "Germany",
"phone": "+49 228 1234.90",
"email": "katharina.kraemer@example.com"
},
{
"id": 19,
"name": "Tom Schröder",
"street": "Brunnenstrasse 19",
"city": "Mannheim",
"zipcode": "68159",
"country": "Germany",
"phone": "+49 621 5678.54",
"email": "tom.schroeder@example.com"
},
{
"id": 20,
"name": "Lisa Schmitt",
"street": "Ringweg 20",
"city": "Karlsruhe",
"zipcode": "76133",
"country": "Germany",
"phone": "+49 721 4321.90",
"email": "lisa.schmitt@example.com"
},
{
"id": 21,
"name": "Erik Berger",
"street": "Hügelstrasse 21",
"city": "Augsburg",
"zipcode": "86150",
"country": "Germany",
"phone": "+49 821 1234.45",
"email": "erik.berger@example.com"
},
{
"id": 22,
"name": "Eva Schwarz",
"street": "Altstadtgasse 22",
"city": "Kiel",
"zipcode": "24103",
"country": "Germany",
"phone": "+49 431 6789.32",
"email": "eva.schwarz@example.com"
},
{
"id": 23,
"name": "Lars Becker",
"street": "Holzweg 23",
"city": "Magdeburg",
"zipcode": "39104",
"country": "Germany",
"phone": "+49 391 2345.76",
"email": "lars.becker@example.com"
}
],
"sys": {
"pagination": {
"pages": 10,
"objectsPerPage": 3,
"currentPage": 2
}
}
]
}
</script>
</monster-datasource-dom>
</monster-datasource-dom>
<monster-button style="width:100%">rtest</monster-button>
<monster-host>
<monster-config-manager></monster-config-manager>
</monster-host>
<monster-datatable data-monster-datasource-selector="#myDataSourceID">
<monster-collapse id="filter-collapse" data-monster-role="filter-collapse">
<div class="flex">
<monster-tabs style="width: 100%"
data-monster-option-features-opendelay="500"
data-monster-option-classes-navigation="monster-theme-background-inherit"
data-monster-option-classes-button="monster-theme-background-inherit" id="filtertabs">
<div data-monster-button-label="Filter" data-monster-state="active" class="active">
<monster-datatable-filter id="listfilter1" slot="filter"
data-monster-option-storedconfig-selector="#filtertabs">
<label data-monster-label="ID" id="id"
data-monster-template="${value | call:range:oid}">
ID
<monster-filter-range></monster-filter-range>
</label>
</monster-datatable-filter>
</div>
</monster-tabs>
</div>
</monster-collapse>
<div slot="bar" class="monster-button-group">
<monster-embedded-pagination id="pagination"
data-monster-datasource-selector="#myDataSourceID"></monster-embedded-pagination>
<monster-datasource-status
data-monster-option-datasource-selector="#myDataSourceID"></monster-datasource-status>
<monster-datatable-filter-button data-monster-reference="#filter-collapse"
data-monster-role="filter-button">Filter
</monster-datatable-filter-button>
</div>
<template id="row">
<div data-monster-mode="fixed" data-monster-grid-template="1.2rem" data-monster-head="id"
<div data-monster-sortable="DESC 2" data-monster-mode="fixed" data-monster-grid-template="3.2rem"
data-monster-head="id"
data-monster-replace="path:row.id"></div>
<div data-monster-grid-template="auto" class="auto" data-monster-head="name" data-monster-replace="path:row.name"></div>
<div data-monster-grid-template="auto" class="auto" data-monster-head="name"
data-monster-replace="path:row.name"></div>
<div data-monster-grid-template="3fr" data-monster-head="street"
data-monster-replace="path:row.street"></div>
<div data-monster-align="end" class="end" data-monster-head="city"
......@@ -71,17 +319,22 @@
<div data-monster-mode="hidden" data-monster-head="country" data-monster-replace="path:row.country"></div>
<div data-monster-mode="hidden" data-monster-head="phone" data-monster-replace="path:row.phone"
class="monospace"></div>
<div data-monster-mode="hidden" class="" data-monster-head="email" data-monster-replace="path:row.email"></div>
<div data-monster-mode="hidden" class="" data-monster-head="email"
data-monster-replace="path:row.email"></div>
<div data-monster-mode="fixed" class="visible" data-monster-head="">
<monster-button-bar>
<monster-button style="height:100%;display:flex;margin-right:0.1rem;" data-monster-role="details-button" data-monster-attributes="data-alvine-id path:listDatatable-row.aid">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<monster-button data-monster-role="details-button"
data-monster-attributes="data-alvine-id path:listDatatable-row.aid">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
viewBox="0 0 16 16">
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"></path>
</svg>
</monster-button>
<monster-confirm-button data-monster-option-popper-placement="left" slot="popper" data-monster-role="delete-button" data-monster-attributes="data-alvine-primary-id path:listDatatable-row.aid">
<monster-confirm-button data-monster-option-popper-placement="left"
data-monster-role="delete-button"
data-monster-attributes="data-alvine-primary-id path:listDatatable-row.aid">
<div>
<p>Are you sure you want to delete this File?</p>
</div>
......@@ -89,7 +342,8 @@
<div slot="cancel">No</div>
<div slot="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
viewBox="0 0 16 16">
<path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5Zm-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5ZM4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5Z"></path>
</svg>
</div>
......@@ -101,7 +355,6 @@
</monster-datatable>
</main>
</body>
</html>
development/issues/closed/260.mjs
+ 5
− 0
View file @ 785a3ce7
......@@ -12,7 +12,12 @@ import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/datatable/datatable.mjs";
import "../../../source/components/datatable/embedded-pagination.mjs";
import "../../../source/components/datatable/filter/range.mjs";
import "../../../source/components/datatable/filter/select.mjs";
import "../../../source/components/datatable/filter.mjs";
import "../../../source/components/form/button.mjs";
import "../../../source/components/layout/tabs.mjs";
import "../../../source/components/form/state-button.mjs";
import "../../../source/components/form/confirm-button.mjs";
import "../../../source/components/form/button-bar.mjs";
......
source/components/datatable/datatable.mjs
+ 4
− 1
View file @ 785a3ce7
......@@ -119,6 +119,9 @@ const columnBarElementSymbol = Symbol("columnBarElement");
* @example /examples/components/datatable/row-mode
* @example /examples/components/datatable/grid-template
* @example /examples/components/datatable/overview-class
* @example /examples/components/datatable/datasource
* @example /examples/components/datatable/pagination
* @example /examples/components/datatable/filter
*
* @copyright schukai GmbH
* @summary A beautiful and highly customizable data table. It can be used to display data from a data source.
......@@ -185,7 +188,7 @@ class DataTable extends CustomElement {
headers: [],
responsive: {
breakpoint: 800,
breakpoint: 900,
},
labels: {
......
source/components/datatable/embedded-pagination.mjs
+ 1
− 26
View file @ 785a3ce7
......@@ -30,33 +30,8 @@ export { EmbeddedPagination };
/**
* The EmbeddedPagination component is used to show the current page and the total number of pages.
*
* <img src="./images/embedded-pagination.png">
*
* Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
*
* You can create this control either by specifying the HTML tag <monster-datatable />` directly in the HTML or using
* Javascript via the `document.createElement('monster-datatable');` method.
*
* ```html
* <monster-pagination></monster-pagination>
* ```
*
* Or you can create this CustomControl directly in Javascript:
*
* ```js
* import '@schukai/component-datatable/source/pagination.mjs';
* document.createElement('monster-pagination');
* ```
*
* @startuml embedded-pagination.png
* skinparam monochrome true
* skinparam shadowing false
* HTMLElement <|-- CustomElement
* CustomElement <|-- Pagination
* @enduml
*
* @copyright schukai GmbH
* @summary A datatable
* @summary The EmbeddedPagination extends the Pagination component and adopts the styles of the DataTable component.
*/
class EmbeddedPagination extends Pagination {
/**
......
source/components/datatable/filter.mjs
+ 5
− 37
View file @ 785a3ce7
......@@ -114,41 +114,8 @@ const settingsSymbol = Symbol("settings");
/**
* The Filter component is used to show and handle the filter values.
*
* <img src="./images/filter.png">
*
* Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
*
* You can create this control either by specifying the HTML tag <monster-filter />` directly in the HTML or using
* Javascript via the `document.createElement('monster-filter');` method.
*
* ```html
* <monster-datatable-filter></monster-datatable-filter>
* ```
*
* Or you can create this CustomControl directly in Javascript:
*
* ```js
* import '@schukai/component-datatable/source/filter.mjs';
* document.createElement('monster-datatable-filter');
* ```
*
* The Body should have a class "hidden" to ensure that the styles are applied correctly.
*
* ```css
* body.hidden {
* visibility: hidden;
* }
* ```
*
* @startuml filter.png
* skinparam monochrome true
* skinparam shadowing false
* HTMLElement <|-- CustomElement
* CustomElement <|-- Filter
* @enduml
*
* @copyright schukai GmbH
* @summary A data set
* @summary The Filter component is used to show and handle the filter values.
*/
class Filter extends CustomElement {
/**
......@@ -170,7 +137,7 @@ class Filter extends CustomElement {
/**
*
* @param {string} message
* @return {Monster.Components.Datatable.Filter}
* @return {Filter}
*/
showFailureMessage(message) {
this[searchButtonElementSymbol].setState(
......@@ -185,7 +152,7 @@ class Filter extends CustomElement {
/**
*
* @return {Monster.Components.Datatable.Filter}
* @return {{Filter}}
*/
resetFailureMessage() {
this[searchButtonElementSymbol].hideMessage();
......@@ -195,7 +162,7 @@ class Filter extends CustomElement {
/**
*
* @return {Monster.Components.Datatable.Filter}
* @return {{Filter}}
*/
showSuccess() {
this[searchButtonElementSymbol].setState(
......@@ -771,6 +738,7 @@ function initTabEvents() {
* @private
*/
function updateFilterTabs() {
const element = this[filterTabElementSymbol];
if (!element) {
return;
......
source/components/datatable/filter/input.mjs
+ 1
− 35
View file @ 785a3ce7
......@@ -34,42 +34,8 @@ const inputElementSymbol = Symbol("inputElement");
/**
* The Filter component is used to show and handle the filter values.
*
* <img src="./images/filter-inpu-input.png">
*
* Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
*
* You can create this control either by specifying the HTML tag <monster-filter />` directly in the HTML or using
* Javascript via the `document.createElement('monster-filter');` method.
*
* ```html
* <monster-datatable-filter></monster-datatable-filter>
* ```
*
* Or you can create this CustomControl directly in Javascript:
*
* ```js
* import '@schukai/component-datatable/source/filter.mjs';
* document.createElement('monster-datatable-filter');
* ```
*
* The Body should have a class "hidden" to ensure that the styles are applied correctly.
*
* ```css
* body.hidden {
* visibility: hidden;
* }
* ```
*
* @startuml filter-input.png
* skinparam monochrome true
* skinparam shadowing false
* HTMLElement <|-- CustomElement
* CustomElement <|-- AbstractBase
* AbstractBase <|-- Input
* @enduml
*
* @copyright schukai GmbH
* @summary A data set
* @summary The FilterInput component is used to show and handle the filter values.
*/
class Input extends AbstractBase {
/**
......
source/components/datatable/filter/range.mjs
+ 3
− 3
View file @ 785a3ce7
......@@ -240,7 +240,7 @@ class Range extends AbstractBase {
/**
*
* @return {Monster.Datatable.Filter.Range}
* @return {Range}
*/
showDialog() {
show.call(this);
......@@ -249,7 +249,7 @@ class Range extends AbstractBase {
/**
*
* @return {Monster.Datatable.Filter.Range}
* @return {Range}
*/
hideDialog() {
hide.call(this);
......@@ -258,7 +258,7 @@ class Range extends AbstractBase {
/**
*
* @return {Monster.Datatable.Filter.Range}
* @return {Range}
*/
toggleDialog() {
if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
......
source/components/datatable/pagination.mjs
+ 22
− 50
View file @ 785a3ce7
......@@ -24,9 +24,7 @@ import { Datasource } from "./datasource.mjs";
import { Observer } from "../../types/observer.mjs";
import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
import { findTargetElementFromEvent } from "../../dom/events.mjs";
import { EmbeddedPaginationStyleSheet } from "./stylesheet/embedded-pagination.mjs";
import { PaginationStyleSheet } from "./stylesheet/pagination.mjs";
//import {SpinnerStyleSheet} from "../stylesheet/spinner.mjs";
import { DisplayStyleSheet } from "../stylesheet/display.mjs";
import { isString } from "../../types/is.mjs";
import { Pathfinder } from "../../data/pathfinder.mjs";
......@@ -54,33 +52,10 @@ const paginationElementSymbol = Symbol.for("paginationElement");
const datasourceLinkedElementSymbol = Symbol("datasourceLinkedElement");
/**
* The Pagination component is used to show the current page and the total number of pages.
*
* <img src="./images/pagination.png">
*
* You can create this control either by specifying the HTML tag <monster-pagination />` directly in the HTML or using
* Javascript via the `document.createElement('monster-pagination');` method.
*
* ```html
* <monster-pagination></monster-pagination>
* ```
*
* Or you can create this CustomControl directly in Javascript:
*
* ```js
* import '@schukai/component-datatable/source/pagination.mjs';
* document.createElement('monster-pagination');
* ```
*
* @startuml pagination.png
* skinparam monochrome true
* skinparam shadowing false
* HTMLElement <|-- CustomElement
* CustomElement <|-- Pagination
* @enduml
* The Pagination component
*
* @copyright schukai GmbH
* @summary A datatable
* @summary The Pagination component is used to show the current page and the total number of pages.
*/
class Pagination extends CustomElement {
/**
......@@ -106,13 +81,23 @@ class Pagination extends CustomElement {
*
* @property {Object} templates Template definitions
* @property {string} templates.main Main template
* @property {int} offset Current offset
* @property {int} nextOffset Next offset
* @property {int} prevOffset Previous offset
* @property {int} objectsPerPage Number of objects per page
* @property {int} currentPage Current page
* @property {int} pages Total number of pages
* @property {int} total Total number of objects
* @property {Object} datasource Datasource configuration
* @property {string} datasource.selector Datasource selector
* @property {Object} labels Label definitions
* @property {string} labels.page Page label
* @property {string} labels.description Description label
* @property {string} labels.previous Previous label
* @property {string} labels.next Next label
* @property {string} labels.of Of label
* @property {string} href Href
* @property {number} currentPage Current page
* @property {number} pages Pages
* @property {number} objectsPerPage Objects per page
* @property {Object} mapping Mapping
* @property {string} mapping.pages Pages mapping
* @property {string} mapping.objectsPerPage Objects per page mapping
* @property {string} mapping.currentPage Current page mapping
* @property {Object} pagination Pagination
*/
get defaults() {
return Object.assign(
......@@ -147,18 +132,6 @@ class Pagination extends CustomElement {
currentPage: "sys.pagination.currentPage",
},
// classes: {
// // spinner: "monster-spinner monster-theme-primary-3",
// // spinnerContainer: "monster-theme-primary-1 ",
// // error: "monster-theme-error-2 monster-bg-color-primary-2",
// // errorContainer: "monster-theme-primary-1",
// },
// state: {
// // spinner: false,
// // error: false,
// },
pagination: {
items: [],
},
......@@ -176,8 +149,7 @@ class Pagination extends CustomElement {
}
/**
*
* @return {Monster.Components.Form.Form}
* @return {void}
*/
[assembleMethodSymbol]() {
super[assembleMethodSymbol]();
......@@ -201,6 +173,7 @@ class Pagination extends CustomElement {
element.datasource.attachObserver(
new Observer(handleDataSourceChanges.bind(this)),
);
handleDataSourceChanges.call(this);
}
}
......@@ -213,8 +186,7 @@ class Pagination extends CustomElement {
}
/**
*
* @return [CSSStyleSheet]
* @return {CSSStyleSheet[]}
*/
static getCSSStyleSheet() {
return [this.getControlCSSStyleSheet(), DisplayStyleSheet, ThemeStyleSheet];
......
source/components/datatable/style/column-bar.pcss
+ 7
− 3
View file @ 785a3ce7
......@@ -97,16 +97,20 @@
& a[data-monster-role=settings-button] {
display: flex;
align-items: center;
color: var(--monster-color-primary-1);
background: none;
white-space: nowrap;
&:after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13zM1.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5H5V1H1.5zM10 15V1H6v14h4zm1 0h3.5a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-.5-.5H11v14z'/%3E%3C/svg%3E");
content: "";
display: block;
width: 20px;
height: 16px;
margin: 2px 3px 0 5px;
padding-top: 4px;
background-color: var(--monster-color-primary-1);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13zM1.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5H5V1H1.5zM10 15V1H6v14h4zm1 0h3.5a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-.5-.5H11v14z' fill='%23000'/%3E%3C/svg%3E");
mask-size: cover;
}
}
......
source/components/datatable/style/datatable.pcss
+ 25
− 5
View file @ 785a3ce7
......@@ -188,20 +188,40 @@
max-width: 100%;
& a[data-monster-sortable]:after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
margin: 0 3px 0 5px
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin: 0 3px 0 5px;
background-color: var(--monster-color-primary-1);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
mask-size: cover;
}
& a[data-monster-sortable~=DESC i]:after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z'/%3E%3C/svg%3E");
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin: 0 3px 0 5px;
background-color: var(--monster-color-primary-1);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z'/%3E%3C/svg%3E");
mask-size: cover;
}
& a[data-monster-sortable~=ASC i]:after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z'/%3E%3C/svg%3E");
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin: 0 3px 0 5px;
background-color: var(--monster-color-primary-1);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z'/%3E%3C/svg%3E");
mask-size: cover;
}
}
& .flex-start {
justify-content: flex-start;
}
......
source/components/datatable/style/pagination.pcss
+ 0
− 26
View file @ 785a3ce7
......@@ -51,33 +51,7 @@
cursor: not-allowed;
}
}
/*
& .pagination-loading-state {
align-items: center;
display: flex;
&.hidden {
display: none;
}
}
& .pagination-error-state {
align-items: center;
display: flex;
&.hidden {
display: none;
}
}
& .state-icon-container {
width:2em;
height:2em;
margin:0 5px 0 2px;
}*/
}
source/components/datatable/stylesheet/column-bar.mjs
+ 7
− 14
View file @ 785a3ce7
This diff is collapsed.
source/components/datatable/stylesheet/datatable.mjs
+ 7
− 14
View file @ 785a3ce7
This diff is collapsed.
source/components/datatable/stylesheet/pagination.mjs
+ 7
− 14
View file @ 785a3ce7
This diff is collapsed.
source/components/host/config-manager.mjs
+ 0
− 33
View file @ 785a3ce7
......@@ -50,39 +50,6 @@ const MODE_READ_WRITE = "readwrite";
/**
* The Config Manager component is used to encapsulate the configuration of the application.
*
* <img src="./images/config-manager.png">
*
* Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
*
* You can create this control either by specifying the HTML tag <monster-host />` directly in the HTML or using
* Javascript via the `document.createElement('monster-host');` method.
*
* ```html
* <monster-config-manager></monster-config-manager>
* ```
*
* Or you can create this CustomControl directly in Javascript:
*
* ```js
* import '@schukai/component-state/source/config-manager.mjs';
* document.createElement('monster-config-manager');
* ```
*
* The Body should have a class "hidden" to ensure that the styles are applied correctly.
*
* ```css
* body.hidden {
* visibility: hidden;
* }
* ```
*
* @startuml config-manager.png
* skinparam monochrome true
* skinparam shadowing false
* HTMLElement <|-- CustomElement
* CustomElement <|-- ConfigManager
* @enduml
*
* @copyright schukai GmbH
* @summary A config manager component
*/
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment