diff --git a/api/etemplate.php b/api/etemplate.php index f664214625..95fa8150e1 100644 --- a/api/etemplate.php +++ b/api/etemplate.php @@ -198,6 +198,19 @@ function send_template() return "' . $matches[2] . ""; }, $str); + // Change groupbox --> summary attribute + $str = preg_replace_callback('#]*?)>(.*?)#su', static function ($matches) + { + $attrs = parseAttrs($matches[1]); + + if (preg_match('#^\n?\s*]*?)/?>(.*?)()?#su', $matches[2], $caption)) + { + $attrs['summary'] = parseAttrs($caption[1])['label']; + $matches[2] = str_replace($caption[0], '', $matches[2]); + } + return "' . $matches[2] . ""; + }, $str); + // Change splitter dockside -> primary + vertical $str = preg_replace_callback('#]*?)>(.*?)#su', static function ($matches) { diff --git a/api/js/etemplate/Layout/Et2Details/Et2Details.ts b/api/js/etemplate/Layout/Et2Details/Et2Details.ts index c49c0926d7..abe48bfe38 100644 --- a/api/js/etemplate/Layout/Et2Details/Et2Details.ts +++ b/api/js/etemplate/Layout/Et2Details/Et2Details.ts @@ -11,7 +11,10 @@ import {Et2Widget} from "../../Et2Widget/Et2Widget"; import {css} from "lit"; import {SlDetails} from "@shoelace-style/shoelace"; import shoelace from "../../Styles/shoelace"; +import {property} from "lit/decorators/property.js"; +import {customElement} from "lit/decorators/custom-element.js"; +@customElement("et2-details") export class Et2Details extends Et2Widget(SlDetails) { static get styles() @@ -38,7 +41,7 @@ export class Et2Details extends Et2Widget(SlDetails) /* Stop images from growing. In general we want them to stay */ flex-grow: 0; } - ::slotted([align="left"]) { + ::slotted([align="left"]) { margin-right: auto; order: -1; } @@ -47,68 +50,57 @@ export class Et2Details extends Et2Widget(SlDetails) order: 1; } - .details.hoist { - position: relative; - } - - .details.hoist .details__body { - position: absolute; - z-index: var(--sl-z-index-drawer); - background: var(--sl-color-neutral-0); - box-shadow: var(--sl-shadow-large); - width: 100%; - min-width: fit-content; - border-radius: var(--sl-border-radius-small); - border: 1px solid var(--sl-color-neutral-200); - max-height: 15em; - overflow-y: auto; - } - .details.hoist .details__body.overlaySummaryLeftAligned { + .details.hoist { + position: relative; + } + + .details.hoist .details__body { + position: absolute; + z-index: var(--sl-z-index-drawer); + background: var(--sl-color-neutral-0); + box-shadow: var(--sl-shadow-large); + width: 100%; + min-width: fit-content; + border-radius: var(--sl-border-radius-small); + border: 1px solid var(--sl-color-neutral-200); + max-height: 15em; + overflow-y: auto; + } + .details.hoist .details__body.overlaySummaryLeftAligned { top: 0; left: 2em; width: calc(100% - 2em); - } - .details.hoist .details__body.overlaySummaryRightAligned { - top: 0; - } + } + .details.hoist .details__body.overlaySummaryRightAligned { + top: 0; + } `, ]; } - static get properties() - { - return { - ...super.properties, + /** + * Toggle when hover over + */ + @property({type: Boolean}) + toggleOnHover = false; - /** - * Toggle when hover over - */ - toggleOnHover: { - type: Boolean - }, + /** + * Makes details content fixed position to break out of the container + */ + @property({type: Boolean}) + hoist = false; - /** - * Makes details content fixed position to break out of the container - */ - hoist: { - type: Boolean - }, + /** + * set toggle alignment either to left or right. Default is right alignment. + */ + @property({type: String}) + toggleAlign : "right" | "left" = "right"; - /** - * set toggle alignment either to left or right. Default is right alignment. - */ - toggleAlign: { - type: String - }, - - /** - * Overlay summary container with the details container when in open state - */ - overlaySummaryOnOpen: { - type: Boolean - } - } - } + /** + * Overlay summary container with the details container when in open state + */ + @property({type: Boolean}) + overlaySummaryOnOpen = false; /** * List of properties that get translated @@ -123,16 +115,6 @@ export class Et2Details extends Et2Widget(SlDetails) } } - - constructor(...args : any[]) - { - super(); - this.toggleOnHover = false; - this.toggleAlign = 'right'; - this.hoist = false; - this.overlaySummaryOnOpen = false; - } - connectedCallback() { super.connectedCallback(); @@ -172,5 +154,4 @@ export class Et2Details extends Et2Widget(SlDetails) { if (!this.getDOMNode().contains(event.relatedTarget)) this.hide(); } -} -customElements.define("et2-details", Et2Details); \ No newline at end of file +} \ No newline at end of file diff --git a/api/js/etemplate/Layout/Et2Groupbox/Et2Groupbox.ts b/api/js/etemplate/Layout/Et2Groupbox/Et2Groupbox.ts new file mode 100644 index 0000000000..0ceefb291f --- /dev/null +++ b/api/js/etemplate/Layout/Et2Groupbox/Et2Groupbox.ts @@ -0,0 +1,60 @@ +/** + * EGroupware eTemplate2 - Details WebComponent + * + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @package api + * @link https://www.egroupware.org + * @author Hadi Nategh + */ + +import {Et2Details} from "../Et2Details/Et2Details"; +import {css} from "lit"; +import shoelace from "../../Styles/shoelace"; +import {property} from "lit/decorators/property.js"; +import {customElement} from "lit/decorators/custom-element.js"; + +/** + * Groupbox shows content in a box with a summary + */ +@customElement("et2-groupbox") +export class Et2Groupbox extends Et2Details +{ + static get styles() + { + return [ + ...super.styles, + shoelace, + css` + slot[name="collapse-icon"], slot[name="expand-icon"] { + display: none; + } + details { + position: relative; + padding-top: .5rem; + margin: 2px; + margin-top: .5rem; + } + summary { + position: absolute; + pointer-events: none; + width: fit-content; + line-height: 0; + top: -.5rem; + left: .5rem; + background: var(--sl-color-neutral-0); + } + .details { + border-color: var(--sl-color-neutral-500); + border-width: 2px; + } + `, + ]; + } + + constructor() + { + super(); + // groupbox is always open + this.open = true; + } +} \ No newline at end of file diff --git a/api/js/etemplate/et2_widget_groupbox.ts b/api/js/etemplate/et2_widget_groupbox.ts deleted file mode 100644 index 1dd2e00d1d..0000000000 --- a/api/js/etemplate/et2_widget_groupbox.ts +++ /dev/null @@ -1,71 +0,0 @@ -/** - * EGroupware eTemplate2 - JS Groupbox object - * - * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License - * @package etemplate - * @subpackage api - * @link https://www.egroupware.org - * @author Nathan Gray - * @copyright Nathan Gray 2012 - */ - -/*egw:uses - et2_core_baseWidget; -*/ - -import {et2_register_widget, WidgetConfig} from "./et2_core_widget"; -import {et2_baseWidget} from "./et2_core_baseWidget"; -import {ClassWithAttributes} from "./et2_core_inheritance"; - -/** - * Class which implements the groupbox tag - * - * @augments et2_baseWidget - */ -export class et2_groupbox extends et2_baseWidget -{ - /** - * Constructor - * - * @memberOf et2_groupbox - */ - constructor(_parent, _attrs? : WidgetConfig, _child? : object) - { - // Call the inherited constructor - super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_groupbox._attributes, _child || {})); - - this.setDOMNode(document.createElement("fieldset")); - } -} -et2_register_widget(et2_groupbox, ["groupbox"]); - -/** - * @augments et2_baseWidget - */ -export class et2_groupbox_legend extends et2_baseWidget -{ - static readonly _attributes : any = { - "label": { - "name": "Label", - "type": "string", - "default": "", - "description": "Label for group box", - "translate" : true - } - }; - - /** - * Constructor - * - * @memberOf et2_groupbox_legend - */ - constructor(_parent, _attrs? : WidgetConfig, _child? : object) - { - // Call the inherited constructor - super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_groupbox_legend._attributes, _child || {})); - let legend = jQuery(document.createElement("legend")).text(this.options.label); - this.setDOMNode(legend[0]); - } -} -et2_register_widget(et2_groupbox_legend, ["caption"]); - diff --git a/api/js/etemplate/etemplate2.ts b/api/js/etemplate/etemplate2.ts index 359133b278..cc52fa3f9c 100644 --- a/api/js/etemplate/etemplate2.ts +++ b/api/js/etemplate/etemplate2.ts @@ -24,6 +24,7 @@ import '../jsapi/egw_json.js'; import {egwIsMobile} from "../egw_action/egw_action_common"; import './Layout/Et2Box/Et2Box'; import './Layout/Et2Details/Et2Details'; +import './Layout/Et2Groupbox/Et2Groupbox'; import './Layout/Et2Tabs/Et2Tab'; import './Layout/Et2Tabs/Et2Tabs'; import './Layout/Et2Tabs/Et2TabPanel'; @@ -120,7 +121,6 @@ import './et2_widget_template'; import './et2_widget_grid'; import './et2_widget_box'; import './et2_widget_hbox'; -import './et2_widget_groupbox'; import './et2_widget_button'; import './et2_widget_entry'; import './et2_widget_textbox'; diff --git a/doc/etemplate2-rng.php b/doc/etemplate2-rng.php index 776536564f..a2b8c961be 100755 --- a/doc/etemplate2-rng.php +++ b/doc/etemplate2-rng.php @@ -94,6 +94,9 @@ $overwrites = [ 'et2-details' => [ '.children' => 'Widgets', ], + 'et2-groupbox' => [ + '.children' => 'Widgets', + ], 'et2-split' => [ '.children' => 'Widgets', ], diff --git a/doc/etemplate2/etemplate2.0.dtd b/doc/etemplate2/etemplate2.0.dtd index b10172a8b4..d6f724663a 100644 --- a/doc/etemplate2/etemplate2.0.dtd +++ b/doc/etemplate2/etemplate2.0.dtd @@ -21,27 +21,27 @@ ========================================================== --> - + |et2-favorites-menu|et2-nextmatch-header-filter|et2-groupbox|et2-hbox|et2-iframe|et2-image + |et2-image-expose|et2-lavatar|et2-label|et2-link|et2-link-add|et2-link-apps|et2-link-entry + |et2-link-list|et2-link-paste-dialog|et2-link-search|et2-link-string|et2-link-to|et2-listbox + |et2-merge-dialog|et2-number|et2-password|et2-portlet|et2-searchbox|et2-select|et2-select-access + |et2-select-account|et2-select-app|et2-select-bitwise|et2-select-bool|et2-select-cat + |et2-select-country|et2-select-day|et2-select-dow|et2-select-hour|et2-select-lang|et2-select-month + |et2-select-number|et2-select-percent|et2-select-priority|et2-select-state|et2-select-tab + |et2-select-thumbnail|et2-select-timezone|et2-select-year|et2-spinner|et2-split|et2-switch + |et2-tabbox|et2-tag|et2-textarea|et2-textbox|et2-thumbnail-tag|et2-tree|et2-tree-dropdown + |et2-tree-cat|et2-url|et2-url-email|et2-url-fax|et2-url-phone|et2-vbox|et2-vfs-gid|et2-vfs-mime + |et2-vfs-name|et2-vfs-path|et2-vfs-select|et2-vfs-select-dialog|et2-vfs-select-row|et2-vfs-uid"> @@ -128,31 +128,6 @@ readonly CDATA #IMPLIED attributes CDATA #IMPLIED> - - - - - - - - + + + + @@ -1855,7 +1819,6 @@ slot CDATA #IMPLIED span (all|2|3|4) #IMPLIED statustext CDATA #IMPLIED - step CDATA #IMPLIED style CDATA #IMPLIED tabindex CDATA #IMPLIED width CDATA #IMPLIED> @@ -2362,6 +2325,33 @@ value CDATA #IMPLIED width CDATA #IMPLIED> + + + + + + + + - @@ -48,7 +47,6 @@ - @@ -69,6 +67,7 @@ + @@ -95,6 +94,7 @@ + @@ -155,6 +155,7 @@ + @@ -445,97 +446,6 @@ - - - - - - - - - - - - - - - - false - true - 1 - - - - - - - - - - - - - false - true - 1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - false - true - 1 - - - - - - - - - - - - - - - - @@ -3259,158 +3169,6 @@ - - - - - - - - - - - false - true - 1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - false - true - 1 - - - - - - - - - - - - - - - - - - - false - true - 1 - - - - - - - - - - - - - - - - false - true - 1 - - - - - - - - - - - - - false - true - 1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - false - true - 1 - - - - - - - - - - - - - @@ -5545,6 +5303,127 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + false + true + 1 + + + + + + + + + + + + + + + + + + + false + true + 1 + + + + + + + false + true + 1 + + + + + + + + + + + + + false + true + 1 + + + + + + + + + + + + + + + + all + 2 + 3 + 4 + + + + + + + + + + + + + + + + top + right + bottom + left + + + + + + + + + + @@ -6321,7 +6200,13 @@ - + + + false + true + 1 + + @@ -6358,7 +6243,13 @@ - + + + false + true + 1 + + @@ -7171,9 +7062,6 @@ - - - @@ -9378,6 +9266,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + false + true + 1 + + + + + + + + + + false + true + 1 + + + + + + + false + true + 1 + + + + + + + + + + + + + false + true + 1 + + + + + + + + + + false + true + 1 + + + + + + + false + true + 1 + + + + + + + + + + + + + all + 2 + 3 + 4 + + + + + + + + + + + + + + + + + + + false + true + 1 + + + + + + + @@ -11660,6 +11676,9 @@ + + + @@ -11732,6 +11751,9 @@ + + + @@ -11813,6 +11835,9 @@ + + + @@ -11871,9 +11896,15 @@ + + + + + + @@ -12028,6 +12059,9 @@ + + + @@ -12441,6 +12475,9 @@ + + + @@ -13194,6 +13231,17 @@ + + + + user + enabled + installed + all + all+setup + + + @@ -15832,6 +15880,17 @@ + + + + user + enabled + installed + all + all+setup + + + @@ -17649,6 +17708,9 @@ + + + @@ -18593,6 +18655,9 @@ + + + @@ -18898,6 +18963,9 @@ + + + @@ -19191,6 +19259,9 @@ + + + @@ -19484,6 +19555,9 @@ + + + @@ -19875,6 +19949,302 @@ + + + + + + + + + + + + + + + + + + + + + + + off + none + on + sentences + words + characters + + + + + + + + + + off + on + + + + + + + false + true + 1 + + + + + + + + + + false + true + 1 + + + + + + + + + + false + true + 1 + + + + + + + enter + done + go + next + previous + search + send + + + + + + + false + true + 1 + + + + + + + + + + + + + + + + + + + false + true + 1 + + + + + + + + + + none + text + decimal + numeric + tel + search + email + url + + + + + + + + + + + + + + + + + + + + + + + + + + + + false + true + 1 + + + + + + + false + true + 1 + + + + + + + + + + + + + + + + + + + false + true + 1 + + + + + + + false + true + 1 + + + + + + + + + + false + true + 1 + + + + + + + + + + false + true + 1 + + + + + + + false + true + 1 + + + + + + + small + medium + large + + + + + + + + + + all + 2 + 3 + 4 + + + + + + + false + true + 1 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +