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

fix: playground missing js and remove flex #144

parent e05f1ce1
Branches
Tags
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
playground/issues/144.html
+ 48
− 20
View file @ 84fef5d5
...@@ -6,6 +6,22 @@ ...@@ -6,6 +6,22 @@
<title>Issues</title> <title>Issues</title>
<script src="./144.js" type="module"></script> <script src="./144.js" type="module"></script>
<style>
monster-button-bar {
}
monster-button-bar button {
padding: 0;
margin-right: -2px;
}
monster-button-bar button:first-child {
}
</style>
</head> </head>
<body> <body>
...@@ -16,17 +32,37 @@ ...@@ -16,17 +32,37 @@
<h2>#144 Buttons in der button-bar nicht gleich hoch</h2> <h2>#144 Buttons in der button-bar nicht gleich hoch</h2>
<div style="width: 150px;"> <div style="width: 550px;margin: 0 auto;">
<monster-button-bar data-monster-option-popper-placement="left"> <monster-button-bar style="width: 550px;" data-monster-option-popper-placement="right">
<!-- <button >Button 1</button>-->
<!-- <button >Button 2</button>-->
<monster-button data-alvine-role="linkButton" <monster-button data-alvine-role="linkButton"
data-monster-option-popper-placement="left" data-monster-option-popper-placement="left"
slot="popper" title="ändern"> title="ändern">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"></path>
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"></path>
</svg>
</monster-button>
<!-- <button >Button 3</button>-->
<!-- <button >Button 4</button>-->
<!-- <button >Button 5</button>-->
<!-- <button >Button 6</button>-->
<!-- <button >Button 7</button>-->
<!-- <button >Button 8</button>-->
<monster-button data-alvine-role="linkButton"
data-monster-option-popper-placement="left"
title="ändern">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"></path> <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"></path>
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"></path> <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"></path>
</svg> </svg>
</monster-button> </monster-button>
<!-- -->
<!-- <button >Button 9</button>-->
<!-- <button >Button 10</button>-->
<!-- <button >Button 11</button>-->
<monster-confirm-button data-monster-option-popper-placement="left" <monster-confirm-button data-monster-option-popper-placement="left"
slot="popper" data-alvine-role="deleteTaskButton" slot="popper" data-alvine-role="deleteTaskButton"
data-monster-attributes="data-alvine-id path:datatable-task-stream-row.id"> data-monster-attributes="data-alvine-id path:datatable-task-stream-row.id">
...@@ -43,14 +79,6 @@ ...@@ -43,14 +79,6 @@
</div> </div>
</monster-confirm-button> </monster-confirm-button>
<monster-button data-alvine-role="linkButton"
data-monster-option-popper-placement="left"
slot="popper" title="ändern">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"></path>
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"></path>
</svg>
</monster-button>
<monster-confirm-button data-monster-option-popper-placement="left" <monster-confirm-button data-monster-option-popper-placement="left"
slot="popper" data-alvine-role="deleteTaskButton" slot="popper" data-alvine-role="deleteTaskButton"
data-monster-attributes="data-alvine-id path:datatable-task-stream-row.id"> data-monster-attributes="data-alvine-id path:datatable-task-stream-row.id">
......
playground/issues/144.js
+ 1
− 0
View file @ 84fef5d5
...@@ -7,5 +7,6 @@ import "../../source/components/style/theme.pcss"; ...@@ -7,5 +7,6 @@ import "../../source/components/style/theme.pcss";
import "../../source/components/style/typography.pcss"; import "../../source/components/style/typography.pcss";
import "./generic.pcss"; import "./generic.pcss";
import "../../source/components/form/confirm-button.mjs"; import "../../source/components/form/confirm-button.mjs";
import "../../source/components/form/button-bar.mjs";
source/components/form/button-bar.mjs
+ 463
− 460
View file @ 84fef5d5
...@@ -10,7 +10,7 @@ import { ...@@ -10,7 +10,7 @@ import {
addAttributeToken, addAttributeToken,
removeAttributeToken, removeAttributeToken,
} from "../../dom/attributes.mjs"; } from "../../dom/attributes.mjs";
import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs"; import {ATTRIBUTE_ERRORMESSAGE, ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
import { import {
assembleMethodSymbol, assembleMethodSymbol,
getSlottedElements, getSlottedElements,
...@@ -194,7 +194,7 @@ class ButtonBar extends CustomElement { ...@@ -194,7 +194,7 @@ class ButtonBar extends CustomElement {
this[dimensionsSymbol] = new Pathfinder({data: {}}); this[dimensionsSymbol] = new Pathfinder({data: {}});
initControlReferences.call(this); initControlReferences.call(this);
initEventhandler.call(this); initEventHandler.call(this);
// setup structure // setup structure
initButtonBar.call(this).then(() => { initButtonBar.call(this).then(() => {
...@@ -314,7 +314,7 @@ function initDefaultsFromAttributes(obj) { ...@@ -314,7 +314,7 @@ function initDefaultsFromAttributes(obj) {
/** /**
* @private * @private
*/ */
function initEventhandler() { function initEventHandler() {
const self = this; const self = this;
/** /**
* @param {Event} event * @param {Event} event
...@@ -393,9 +393,8 @@ function checkAndRearrangeButtons() { ...@@ -393,9 +393,8 @@ function checkAndRearrangeButtons() {
* @return {Object} * @return {Object}
*/ */
function rearrangeButtons() { function rearrangeButtons() {
const switchWidth = this[switchElementSymbol].offsetWidth;
let sum = switchWidth; let sum = this[switchElementSymbol].offsetWidth;
const space = this[dimensionsSymbol].getVia("data.space"); const space = this[dimensionsSymbol].getVia("data.space");
const buttonReferences = this[dimensionsSymbol].getVia( const buttonReferences = this[dimensionsSymbol].getVia(
...@@ -454,7 +453,11 @@ function rearrangeButtons() { ...@@ -454,7 +453,11 @@ function rearrangeButtons() {
* @return {number} * @return {number}
*/ */
function calcBoxWidth(node) { function calcBoxWidth(node) {
const dim = getGlobal("window").getComputedStyle(node); const dim = getGlobal()?.getComputedStyle(node);
if (dim === null) {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "no computed style");
throw new Error("no computed style");
}
const bounding = node.getBoundingClientRect(); const bounding = node.getBoundingClientRect();
return ( return (
......
source/components/form/style/button-bar.pcss
+ 0
− 2
View file @ 84fef5d5
...@@ -5,8 +5,6 @@ ...@@ -5,8 +5,6 @@
@import "../../style/typography.pcss"; @import "../../style/typography.pcss";
@import "../../style/floating-ui.pcss"; @import "../../style/floating-ui.pcss";
:host(monster-button-bar){display:flex;align-items:stretch;}
div[data-monster-role="control"] { div[data-monster-role="control"] {
position: relative; position: relative;
height: 100%; height: 100%;
......
source/components/form/stylesheet/button-bar.mjs
+ 1
− 1
View file @ 84fef5d5
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment