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

fix: some layout issues and add labels to small datatable #260

parent 60aae5e0
No related branches found
No related tags found
No related merge requests found
Showing
with 158 additions and 193 deletions
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
"city": "Berlin", "city": "Berlin",
"zipcode": "10115", "zipcode": "10115",
"country": "Germany", "country": "Germany",
"phone": "+49 30 123456", "phone": "+49 30 1234.56",
"email": "john.doe@example.com" "email": "john.doe@example.com"
}, },
{ {
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
"city": "Munich", "city": "Munich",
"zipcode": "80331", "zipcode": "80331",
"country": "Germany", "country": "Germany",
"phone": "+49 89 654321", "phone": "+49 89 6543.21",
"email": "jane.doe@example.com" "email": "jane.doe@example.com"
}, },
{ {
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
"city": "Hamburg", "city": "Hamburg",
"zipcode": "20095", "zipcode": "20095",
"country": "Germany", "country": "Germany",
"phone": "+49 40 987654", "phone": "+49 40 1111.11",
"email": "max.mustermann@example.com" "email": "max.mustermann@example.com"
} }
] ]
...@@ -54,19 +54,66 @@ ...@@ -54,19 +54,66 @@
</script> </script>
</monster-datasource-dom> </monster-datasource-dom>
<div style="width:400px" class="">
<monster-button-bar>
<monster-button>click 1</monster-button>
<monster-button>click 2</monster-button>
<monster-button>click 3</monster-button>
<monster-button>click 4</monster-button>
<monster-button>click 6</monster-button>
<monster-button>click 7</monster-button>
<monster-button>click 8</monster-button>
<monster-button>click 9</monster-button>
<monster-button>click 10</monster-button>
<monster-button>click 11</monster-button>
</monster-button-bar>
</div>
<monster-datatable data-monster-datasource-selector="#myDataSourceID"> <monster-datatable data-monster-datasource-selector="#myDataSourceID">
<template id="row"> <template id="row">
<div data-monster-grid-template="1.2rem" data-monster-head="id" data-monster-replace="path:row.id"></div> <div data-monster-mode="fixed" data-monster-grid-template="1.2rem" data-monster-head="id"
data-monster-replace="path:row.id"></div>
<div data-monster-grid-template="auto" data-monster-head="name" data-monster-replace="path:row.name"></div> <div data-monster-grid-template="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-grid-template="3fr" data-monster-head="street"
<div data-monster-head="city" data-monster-replace="path:row.city"></div> data-monster-replace="path:row.street"></div>
<div data-monster-head="zipcode" data-monster-replace="path:row.zipcode"></div> <div data-monster-align="end" class="end" data-monster-head="city"
<div data-monster-head="country" data-monster-replace="path:row.country"></div> data-monster-replace="path:row.city"></div>
<div data-monster-head="phone" data-monster-replace="path:row.phone"></div> <div data-monster-mode="hidden" data-monster-head="zipcode" data-monster-replace="path:row.zipcode"></div>
<div data-monster-head="email" data-monster-replace="path:row.email"></div> <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" data-monster-head="email" data-monster-replace="path:row.email"></div>
<div data-monster-mode="fixed" data-monster-head="" style="overflow:visible">
<monster-button-bar>
<monster-button>click 1</monster-button>
<monster-button>click 2</monster-button>
<monster-button>click 3</monster-button>
<monster-button>click 4</monster-button>
<monster-button>click 6</monster-button>
<monster-button>click 7</monster-button>
<monster-button>click 8</monster-button>
<monster-button>click 9</monster-button>
<monster-button>click 10</monster-button>
<monster-button>click 11</monster-button>
</monster-button-bar>
</div>
</template> </template>
</monster-datatable> </monster-datatable>
<div style="margin-top:120px;padding:20px">
<monster-button>button 1</monster-button>
<monster-confirm-button>
<div slot="button">button 1</div>
</monster-confirm-button>
<monster-state-button>
state 1
</monster-state-button>
<monster-popper-button>
<div slot="button">button 1</div>
</monster-popper-button>
</div>
</main> </main>
</body> </body>
......
...@@ -12,49 +12,9 @@ import "../../../source/components/style/theme.pcss"; ...@@ -12,49 +12,9 @@ import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss"; import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss"; import "../../../source/components/style/typography.pcss";
import "../../../source/components/datatable/datatable.mjs"; import "../../../source/components/datatable/datatable.mjs";
import "../../../source/components/form/button.mjs";
import "../../../source/components/form/state-button.mjs";
import "../../../source/components/form/confirm-button.mjs";
import "../../../source/components/form/button-bar.mjs";
import "../../../source/components/form/button-bar.mjs";
import { domReady } from "../../../source/dom/ready.mjs";
//
// domReady.then(() => {
// const datatable = document.querySelector("monster-datatable");
// datatable.setOption('data', [
// {
// "id": "1",
// "name": "John Doe"
// },
// {
// "id": "2",
// "name": "Jane Doe"
// },
// {
// "id": "3",
// "name": "John Smith"
// },
// {
// "id": "4",
// "name": "Jane Smith"
// }
// ]);
//
// setTimeout(() => {
// datatable.setOption('data', [
// {
// "id": "1",
// "name": "John Doe2 "
// },
// {
// "id": "2",
// "name": "Jane Doe 2"
// },
// {
// "id": "3",
// "name": "John Smith3"
// },
// {
// "id": "4",
// "name": "Jane Smit4h"
// }
// ]);
// },2000)
//
// });
\ No newline at end of file
...@@ -56,7 +56,7 @@ const DIRECTION_NONE = ""; ...@@ -56,7 +56,7 @@ const DIRECTION_NONE = "";
* The Header component is a basic class for the datatable component. * The Header component is a basic class for the datatable component.
* *
* @copyright schukai GmbH * @copyright schukai GmbH
* @summary A datatable * @summary The Header component is a basic class for the datatable component.
*/ */
class Header extends Base { class Header extends Base {
constructor() { constructor() {
...@@ -106,6 +106,8 @@ class Header extends Base { ...@@ -106,6 +106,8 @@ class Header extends Base {
}; };
} }
/**
*/
changeDirection() { changeDirection() {
let direction = this.getInternal("direction"); let direction = this.getInternal("direction");
if (direction === DIRECTION_ASC) { if (direction === DIRECTION_ASC) {
...@@ -120,7 +122,7 @@ class Header extends Base { ...@@ -120,7 +122,7 @@ class Header extends Base {
/** /**
* *
* @param direction * @param {string} direction
*/ */
setDirection(direction) { setDirection(direction) {
this.setInternal("direction", direction); this.setInternal("direction", direction);
......
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
@import "../../style/mixin/button.pcss"; @import "../../style/mixin/button.pcss";
@import "../../style/mixin/typography.pcss"; @import "../../style/mixin/typography.pcss";
@import "../../style/typography.pcss";
@import "../../style/mixin/hover.pcss"; @import "../../style/mixin/hover.pcss";
@import "../../style/mixin/media.pcss"; @import "../../style/mixin/media.pcss";
@import "../../style/theme.pcss"; @import "../../style/theme.pcss";
...@@ -107,6 +108,7 @@ ...@@ -107,6 +108,7 @@
@for $i from 0 to 500 { @for $i from 0 to 500 {
&:has([data-monster-insert-reference$=row-$(i)]:hover) [data-monster-insert-reference$=row-$(i) &:has([data-monster-insert-reference$=row-$(i)]:hover) [data-monster-insert-reference$=row-$(i)
] { ] {
color: var(--monster-theme-control-hover-color); color: var(--monster-theme-control-hover-color);
background-color: var(--monster-theme-control-hover-bg-color); background-color: var(--monster-theme-control-hover-bg-color);
...@@ -204,6 +206,11 @@ monster-state[data-monster-role=empty-without-action]::part(action) { ...@@ -204,6 +206,11 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
@mixin viewport-7 { @mixin viewport-7 {
[data-monster-role="datatable-headers"] {
display: none;
}
[data-monster-role="table-container"] { [data-monster-role="table-container"] {
& .bar { & .bar {
...@@ -213,6 +220,12 @@ monster-state[data-monster-role=empty-without-action]::part(action) { ...@@ -213,6 +220,12 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
gap: 0.1rem; gap: 0.1rem;
} }
& [data-monster-head]:before {
font-weight: bold;
margin-right: 10px;
content: attr(data-monster-head);
}
@for $i from 0 to 500 { @for $i from 0 to 500 {
&:has([data-monster-insert-reference=row-$(i)]:hover) [data-monster-insert-reference=row-$(i) &:has([data-monster-insert-reference=row-$(i)]:hover) [data-monster-insert-reference=row-$(i)
...@@ -221,17 +234,13 @@ monster-state[data-monster-role=empty-without-action]::part(action) { ...@@ -221,17 +234,13 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
box-sizing: border-box; box-sizing: border-box;
} }
} }
} }
::slotted(.monster-button-group) { ::slotted(.monster-button-group) {
display: flex; display: flex;
flex-direction: column !important; flex-direction: column !important;
} }
} }
...@@ -241,4 +250,3 @@ monster-state[data-monster-role=empty-without-action]::part(action) { ...@@ -241,4 +250,3 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
This diff is collapsed.
...@@ -124,39 +124,6 @@ const switchElementSymbol = Symbol("switchElement"); ...@@ -124,39 +124,6 @@ const switchElementSymbol = Symbol("switchElement");
*/ */
const ATTRIBUTE_POPPER_POSITION = "data-monster-popper-position"; const ATTRIBUTE_POPPER_POSITION = "data-monster-popper-position";
/**
* This CustomControl creates a button bar.
*
* <img src="./images/button-bar.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-tabs />` directly in the HTML or using
* Javascript via the `document.createElement('monster-tabs');` method.
*
* ```html
* <monster-tabs></monster-tabs>
* ```
*
* Or you can create this CustomControl directly in Javascript:
*
* ```js
* import {ButtonBar} from '@schukai/component-form/source/tab.js';
* document.createElement('monster-tabs');
* ```
*
* @startuml button-bar.png
* skinparam monochrome true
* skinparam shadowing false
* HTMLElement <|-- CustomElement
* CustomElement <|-- ButtonBar
* @enduml
*
* @copyright schukai GmbH
* @summary A configurable tab control
* @fires monster-fetched
*/
/** /**
* A button bar control. * A button bar control.
* *
...@@ -164,9 +131,8 @@ const ATTRIBUTE_POPPER_POSITION = "data-monster-popper-position"; ...@@ -164,9 +131,8 @@ const ATTRIBUTE_POPPER_POSITION = "data-monster-popper-position";
* *
* @example /examples/components/form/button-bar-simple * @example /examples/components/form/button-bar-simple
* *
* @since 3.19.0
* @copyright schukai GmbH * @copyright schukai GmbH
* @summary A button bar control * @summary This is a button bar control that can be used to display a set of buttons.
* @fires monster-fetched * @fires monster-fetched
*/ */
class ButtonBar extends CustomElement { class ButtonBar extends CustomElement {
...@@ -198,7 +164,8 @@ class ButtonBar extends CustomElement { ...@@ -198,7 +164,8 @@ class ButtonBar extends CustomElement {
}, },
labels: {}, labels: {},
popper: { popper: {
placement: "bottom", placement: "left",
middleware: ["autoPlacement", "shift" ,"offset:5"],
}, },
}); });
......
...@@ -47,7 +47,6 @@ export const buttonElementSymbol = Symbol("buttonElement"); ...@@ -47,7 +47,6 @@ export const buttonElementSymbol = Symbol("buttonElement");
* @example /examples/components/form/button-simple * @example /examples/components/form/button-simple
* @example /examples/components/form/button-with-click-event * @example /examples/components/form/button-with-click-event
* *
* @since 1.5.0
* @copyright schukai GmbH * @copyright schukai GmbH
* @summary A beautiful button that can make your life easier and also looks good. * @summary A beautiful button that can make your life easier and also looks good.
* @fires monster-button-clicked this event is triggered when the button is clicked. It contains the field {button} with the button instance. * @fires monster-button-clicked this event is triggered when the button is clicked. It contains the field {button} with the button instance.
......
...@@ -39,11 +39,12 @@ div[data-monster-role="control"] { ...@@ -39,11 +39,12 @@ div[data-monster-role="control"] {
& slot[name=popper] { & slot[name=popper] {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: stretch; align-items: center;
align-content: center; align-content: center;
justify-content: space-between; justify-content: space-between;
gap: 0.4rem;
} }
......
@import "../../style/control.pcss"; @import "../../style/control.pcss";
@import "../../style/button.pcss"; @import "../../style/button.pcss";
@import "../../style/border.pcss"; @import "../../style/border.pcss";
@import "../../style/typography.pcss";
:host(monster-button){display:flex;} :host(monster-button){display:flex;}
...@@ -8,3 +9,7 @@ ...@@ -8,3 +9,7 @@
display: flex; display: flex;
align-items: stretch; align-items: stretch;
} }
button {
width: max-content;
}
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
div[data-monster-role="decision"] { div[data-monster-role="decision"] {
display: flex; display: flex;
width: 100%; width: max-content;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
margin: 1rem 0 0.4rem 0; margin: 1rem 0 0.4rem 0;
...@@ -14,4 +14,9 @@ div[data-monster-role="decision"] { ...@@ -14,4 +14,9 @@ div[data-monster-role="decision"] {
div[data-monster-role="control"] { div[data-monster-role="control"] {
height: 100%; height: 100%;
width: max-content;
}
button {
width: max-content;
} }
@import "../../style/typography.pcss";
...@@ -8,3 +8,7 @@ ...@@ -8,3 +8,7 @@
width: 100%; width: 100%;
} }
} }
button {
width: max-content;
}
@import "../../style/control.pcss"; @import "../../style/control.pcss";
@import "../../style/floating-ui.pcss"; @import "../../style/floating-ui.pcss";
@import "../../style/button.pcss"; @import "../../style/button.pcss";
@import "../../style/typography.pcss";
[data-monster-role=control] { [data-monster-role=control] {
position: relative; position: relative;
...@@ -8,9 +9,14 @@ ...@@ -8,9 +9,14 @@
} }
[data-monster-role=button] { [data-monster-role=button] {
width: fill-available; width: max-content;
} }
div[data-monster-role="control"] { div[data-monster-role="control"] {
height: 100%; height: 100%;
width: max-content;
}
button {
width: max-content;
} }
@import "../../style/control.pcss"; @import "../../style/control.pcss";
@import "../../style/border.pcss"; @import "../../style/border.pcss";
@import "../../style/color.pcss"; @import "../../style/color.pcss";
@import "../../style/typography.pcss";
div[data-monster-role="control"] { div[data-monster-role="control"] {
height: 100%; height: 100%;
} }
button {
width: max-content;
}
[data-monster-role=button] { [data-monster-role=button] {
display: flex; display: flex;
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment