coping with new et2-tab-box widget:

- change preprocessor to always us it
- giving tab-panels again some padding-top
- change et2_grid to NOT set a width, if cell has a colspan
- switching table-layout: fixed off again, as it does not work well with infolog.edit
- remove dropped Chosen, jQuery-UI, MagicSuggest and old blueimp gallery from Gruntfile
- simplified infolog.edit a bit, which gives better results

Gruntfile.js

@@ -41,10 +41,6 @@ module.exports = function (grunt) {
 				files: {
 					"pixelegg/css/pixelegg.min.css": [
 						"node_modules/flatpickr/dist/themes/light.css",
-						"api/js/jquery/chosen/chosen.css",
-						"api/js/jquery/jquery-ui/themes/themes/redmond/jquery-ui.css",
-						"vendor/egroupware/magicsuggest/magicsuggest.css",
-						"api/js/jquery/blueimp/css/blueimp-gallery.min.css",
 						"api/js/dhtmlxtree/codebase/dhtmlxtree.css",
 						"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
 						"vendor/bower-asset/diff2html/dist/diff2html.css",
@@ -59,10 +55,6 @@ module.exports = function (grunt) {
 					],
 					"pixelegg/css/mobile.min.css": [
 						"node_modules/flatpickr/dist/themes/light.css",
-						"api/js/jquery/chosen/chosen.css",
-						"api/js/jquery/jquery-ui/themes/themes/redmond/jquery-ui.css",
-						"vendor/egroupware/magicsuggest/magicsuggest.css",
-						"api/js/jquery/blueimp/css/blueimp-gallery.min.css",
 						"api/js/dhtmlxtree/codebase/dhtmlxtree.css",
 						"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
 						"vendor/bower-asset/diff2html/dist/diff2html.css",
@@ -77,10 +69,6 @@ module.exports = function (grunt) {
 					],
 					"pixelegg/mobile/fw_mobile.min.css": [
 						"node_modules/flatpickr/dist/themes/light.css",
-						"api/js/jquery/chosen/chosen.css",
-						"api/js/jquery/jquery-ui/themes/themes/redmond/jquery-ui.css",
-						"vendor/egroupware/magicsuggest/magicsuggest.css",
-						"api/js/jquery/blueimp/css/blueimp-gallery.min.css",
 						"api/js/dhtmlxtree/codebase/dhtmlxtree.css",
 						"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
 						"api/js/etemplate/lib/jsdifflib/diffview.css",
@@ -94,10 +82,6 @@ module.exports = function (grunt) {
 					],
 					"pixelegg/css/monochrome.min.css": [
 						"node_modules/flatpickr/dist/themes/light.css",
-						"api/js/jquery/chosen/chosen.css",
-						"api/js/jquery/jquery-ui/themes/themes/redmond/jquery-ui.css",
-						"vendor/egroupware/magicsuggest/magicsuggest.css",
-						"api/js/jquery/blueimp/css/blueimp-gallery.min.css",
 						"api/js/dhtmlxtree/codebase/dhtmlxtree.css",
 						"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
 						"vendor/bower-asset/diff2html/dist/diff2html.css",
@@ -112,10 +96,6 @@ module.exports = function (grunt) {
 					],
 					"pixelegg/css/modern.min.css": [
 						"node_modules/flatpickr/dist/themes/light.css",
-						"api/js/jquery/chosen/chosen.css",
-						"api/js/jquery/jquery-ui/themes/themes/redmond/jquery-ui.css",
-						"vendor/egroupware/magicsuggest/magicsuggest.css",
-						"api/js/jquery/blueimp/css/blueimp-gallery.min.css",
 						"api/js/dhtmlxtree/codebase/dhtmlxtree.css",
 						"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
 						"vendor/bower-asset/diff2html/dist/diff2html.css",
@@ -134,10 +114,6 @@ module.exports = function (grunt) {
 				files: {
 					"jdots/css/high-contrast.min.css": [
 						"node_modules/flatpickr/dist/themes/light.css",
-						"api/js/jquery/chosen/chosen.css",
-						"api/js/jquery/jquery-ui/themes/themes/redmond/jquery-ui.css",
-						"vendor/egroupware/magicsuggest/magicsuggest.css",
-						"api/js/jquery/blueimp/css/blueimp-gallery.min.css",
 						"api/js/dhtmlxtree/codebase/dhtmlxtree.css",
 						"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
 						"vendor/bower-asset/diff2html/dist/diff2html.css",
@@ -155,10 +131,6 @@ module.exports = function (grunt) {
 					],
 					"jdots/css/jdots.min.css": [
 						"node_modules/flatpickr/dist/themes/light.css",
-						"api/js/jquery/chosen/chosen.css",
-						"api/js/jquery/jquery-ui/themes/themes/redmond/jquery-ui.css",
-						"vendor/egroupware/magicsuggest/magicsuggest.css",
-						"api/js/jquery/blueimp/css/blueimp-gallery.min.css",
 						"api/js/dhtmlxtree/codebase/dhtmlxtree.css",
 						"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
 						"vendor/bower-asset/diff2html/dist/diff2html.css",
@@ -175,10 +147,6 @@ module.exports = function (grunt) {
 					],
 					"jdots/css/orange-green.min.css": [
 						"node_modules/flatpickr/dist/themes/light.css",
-						"api/js/jquery/chosen/chosen.css",
-						"api/js/jquery/jquery-ui/themes/themes/redmond/jquery-ui.css",
-						"vendor/egroupware/magicsuggest/magicsuggest.css",
-						"api/js/jquery/blueimp/css/blueimp-gallery.min.css",
 						"api/js/dhtmlxtree/codebase/dhtmlxtree.css",
 						"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
 						"vendor/bower-asset/diff2html/dist/diff2html.css",

api/etemplate.php

@@ -13,12 +13,12 @@
 use EGroupware\Api;
 
 // add et2- prefix to following widgets/tags, if NO <overlay legacy="true"
-const ADD_ET2_PREFIX_REGEXP = '#<((/?)([vh]?box|tabbox))(/?|\s[^>]*)>#m';
+const ADD_ET2_PREFIX_REGEXP = '#<((/?)([vh]?box))(/?|\s[^>]*)>#m';
 const ADD_ET2_PREFIX_LAST_GROUP = 4;
 
 // unconditional of legacy add et2- prefix to this widgets
-const ADD_ET2_PREFIX_LEGACY_REGEXP = '#<(description|details|searchbox|textbox|label|avatar|lavatar|image|colorpicker|checkbox|url(-email|-phone|-fax)?|vfs-mime|vfs-uid|vfs-gid|link|link-[a-z]+|favorites)\s([^>]+)/>#m';
+const ADD_ET2_PREFIX_LEGACY_REGEXP = '#<((/?)(tabbox|description|details|searchbox|textbox|label|avatar|lavatar|image|colorpicker|checkbox|url(-email|-phone|-fax)?|vfs-mime|vfs-uid|vfs-gid|link|link-[a-z]+|favorites))(/?|\s[^>]*)>#m';
-const ADD_ET2_PREFIX_LEGACY_LAST_GROUP = 3;
+const ADD_ET2_PREFIX_LEGACY_LAST_GROUP = 5;
 
 // switch evtl. set output-compression off, as we can't calculate a Content-Length header with transparent compression
 ini_set('zlib.output_compression', 0);
@@ -176,8 +176,12 @@ function send_template()
 			}, $str);
 
 		// modify <(vfs-mime|link-string|link-list) --> <et2-*
-		$str = preg_replace(ADD_ET2_PREFIX_LEGACY_REGEXP, '<et2-$1 $'.ADD_ET2_PREFIX_LEGACY_LAST_GROUP.'></et2-$1>',
+		$str = preg_replace_callback(ADD_ET2_PREFIX_LEGACY_REGEXP, static function (array $matches) {
-			str_replace('<description/>', '<et2-description></et2-description>', $str));
+			return '<' . $matches[2] . 'et2-' . $matches[3] .
+				// web-components must not be self-closing (no "<et2-button .../>", but "<et2-button ...></et2-button>")
+				(substr($matches[ADD_ET2_PREFIX_LEGACY_LAST_GROUP], -1) === '/' ? substr($matches[ADD_ET2_PREFIX_LEGACY_LAST_GROUP], 0, -1) .
+					'></et2-' . $matches[3] : $matches[ADD_ET2_PREFIX_LEGACY_LAST_GROUP]) . '>';
+		}, $str);
 
 		// change link attribute only_app to et2-link attribute app and map r/o link-entry to link
 		$str = preg_replace_callback('#<et2-link(-[a-z]+)?([^>]*?)></et2-link(-[a-z]+)?>#su', static function ($matches)

api/js/etemplate/et2_widget_grid.ts

@@ -797,7 +797,8 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 						}
 					}
 
-					if(cell.width != "auto")
+					// do NOT set cell width, if we have a colspan
+					if(cell.width !== "auto" && cell.colSpan <= 1)
 					{
 						td.width(cell.width);
 					}

api/src/Framework.php

@@ -993,9 +993,6 @@ abstract class Framework extends Framework\Extra
 				// Load these first
 				// Cascade should go:
 				//  Libs < etemplate2 < framework/theme < app < print
-				// Enhanced selectboxes (et1)
-				self::includeCSS('/api/js/jquery/chosen/chosen.css');
-
 				// Et2Date uses flatpickr
 				self::includeCSS('/node_modules/flatpickr/dist/themes/light.css');
 

api/templates/default/etemplate2.css

@@ -804,7 +804,7 @@ action buttons, left aligned for "extra" controls
 }
 
 .et2_customfield_list tr td:first-child {
-    width: 30%;
+    width: 12%; /* this is somehow equivalent to 100px we usually have in the first column */
 }
 
 .et2_customfield_list tr td:nth-child(2) > *:not(.et2_checkbox):not(.et2_file):not(.et2_vfs_btn):not(.et2_button):not(.et2_radiobox),
@@ -1453,6 +1453,13 @@ div.et2_vfsPath li img {
     white-space: pre-wrap;
 }
 
+/**
+ * New et2-tabbox widget
+ */
+et2-tab-panel {
+    padding-top: 1em;
+}
+
 /**
  * Tabs widget
  */
@@ -2031,7 +2038,7 @@ hr {
  */
 table.et2_grid {
     border-collapse: collapse;
-    table-layout: fixed;
+    /* table-layout: fixed; check with infolog.edit before switching that on again! */
 }
 
 .et2_grid td {

infolog/templates/default/app.css

@@ -26,9 +26,6 @@ table.infolog_fullWidth { width: 100%; }
 .inputFullWidth input { width: 100%; }
 .infolog_image16 img { height: 16px; }
 .infolog_responsible select {width: 120px;}
-#info_contact select { width: 117px; }
-#info_contact input {width: 134px;}
-#info_subject {width: 100%;}
 
 
 .infolog_date_duration select.et2_date_duration {

infolog/templates/default/edit.xet

@@ -36,7 +36,7 @@
 			<rows>
 				<row class="row">
 					<description value="Project"/>
-					<link-entry span="2" id="pm_id" only_app="projectmanager" onchange="app.infolog.submit_if_not_empty" blur="None" class="infolog_projectName" width="99%"/>
+					<link-entry span="2" id="pm_id" only_app="projectmanager" onchange="app.infolog.submit_if_not_empty" blur="None" class="infolog_projectName"/>
 					<description/>
 				</row>
 				<row class="row">
@@ -72,9 +72,9 @@
 	<template id="infolog.edit.details" template="" lang="" group="0" version="1.9.001">
 		<grid width="100%">
             <columns>
-                <column width="46%"/>
+                <column width="370"/>
-                <column width="60"/>
+                <column width="40"/>
-                <column width="49%"/>
+                <column width="390"/>
             </columns>
             <rows>
                 <row height="20" class="th">
@@ -146,39 +146,40 @@
 		<grid width="100%">
 			<columns>
 				<column width="100"/>
-				<column width="215"/>
+				<column width="270"/>
-				<column width="30"/>
+				<column width="40"/>
 				<column width="100"/>
-				<column width="135"/>
+				<column width="250"/>
-				<column width="30"/>
+				<column width="40"/>
-				<column width="50"/>
 			</columns>
 			<rows>
 				<row class="dialogHeader">
 					<description value="Title" for="info_subject"/>
-					<textbox statustext="a short subject for the entry" id="info_subject" class="et2_fullWidth et2_required" maxlength="255" span="4" tabindex="1"></textbox>
+					<hbox span="4">
-					<textbox type="integer" id="info_number" readonly="true"/>
+						<textbox statustext="a short subject for the entry" id="info_subject" class="et2_fullWidth et2_required" maxlength="255" tabindex="1"></textbox>
-                    <appicon src="infolog" for="info_number"/>
+						<description id="info_id" readonly="true" width="5em"/>
+					</hbox>
+                    <appicon src="infolog" for="info_id"/>
 				</row>
 				<row class="dialogHeader2">
 					<description value="Type" for="info_type"/>
-					<menulist class="et2_fullWidth">
+					<select statustext="Type of the log-entry: Note, Phonecall or ToDo" id="info_type" no_lang="1" onchange="widget.getInstanceManager().submit(null,false,true); return false;" />
-						<menupopup statustext="Type of the log-entry: Note, Phonecall or ToDo" id="info_type" no_lang="1" onchange="widget.getInstanceManager().submit(null,false,true); return false;" />
-					</menulist>
 					<description/>
 					<description value="Startdate" for="info_startdate"/>
 					<date-time id="info_startdate" class="et2_fullWidth"
 						statustext="when should the ToDo or Phonecall be started, it shows up from that date in the filter open or own open (startpage)"/>
+					<description/>
 				</row>
 				<row class="dialogHeader3">
 					<description value="Contact"/>
 					<link-entry id="info_contact" app_icons="true"/>
 					<description/>
 					<description value="Enddate" for="info_enddate"/>
-					<date-time statustext="til when should the ToDo or Phonecall be finished" id="info_enddate" class="et2_fullWidth" span="4"/>
+					<date-time statustext="til when should the ToDo or Phonecall be finished" id="info_enddate" class="et2_fullWidth"/>
+					<description/>
 				</row>
 				<row class="et2_toolbar">
-					<description id="spacer" span="6"/>
+					<description id="spacer" span="5"/>
 					<hbox class="tab_toolbar">
 						<timestamper statustext="Insert timestamp into description field" id="timestamp" class="infologExtraButton infologTimestamp" target="info_des"/>
 						<buttononly statustext="Encrypt description" id="encrypt" class="infologExtraButton infologEncrypt" background_image="1" image="lock" onclick="app.infolog.toggleEncrypt"/>
@@ -204,15 +205,13 @@
 						</tabpanels>
 					</tabbox>
 				</row>
-				<row class="th" disabled="1">
-					<description value="Dates, Status, Access" span="all"/>
-				</row>
 				<row class="dialogOperators">
 					<description value="Status" for="info_status"/>
 					<select class="et2_fullWidth" statustext="@status_help" id="info_status" onchange="app.infolog.statusChanged"/>
 					<description/>
 					<description value="Completed" for="info_percent"/>
 					<select-percent class="et2_fullWidth" statustext="Percent completed" id="info_percent" onchange="app.infolog.statusChanged"/>
+					<description/>
 				</row>
 				<row disabled="!@info_owner" class="dialogOperators">
 					<description value="Owner"/>
@@ -226,6 +225,7 @@
 						<select-account id="info_modifier" readonly="true"/>
 						<date-time id="info_datemodified" readonly="true" align="right"/>
 					</hbox>
+					<description/>
 				</row>
 				<row class="dialogFooterToolbar">
                     <hbox span="all">
@@ -241,7 +241,7 @@
                                   statustext="Do not notify of these changes"/>
                         <button align="right" statustext="delete this entry" label="Delete" id="button[delete]"
                                 onclick="if($cont[info_anz_subs]) return $cont[info_anz_subs]; et2_dialog.confirm(widget,'Delete this entry','Delete');"
-                                image="delete" background_image="1" span="all"/>
+                                image="delete" background_image="1"/>
                     </hbox>
                 </row>
 			</rows>

infolog/templates/pixelegg/app.css

@@ -68,9 +68,6 @@ table.infolog_fullWidth {
 #infolog-edit_info_number:before {
   content: "#";
 }
-#infolog-edit_info_contact {
-  width: 98%;
-}
 .infolog_fixedHeight {
   height: 12px;
   overflow: hidden;
@@ -92,15 +89,6 @@ table.infolog_fullWidth {
 .infolog_responsible select {
   width: 120px;
 }
-#info_contact select {
-  width: 117px;
-}
-#info_contact input {
-  width: 134px;
-}
-#info_subject {
-  width: 100%;
-}
 .infolog_date_duration select.et2_date_duration {
   width: 69%;
   margin-left: 2px;
@@ -200,9 +188,6 @@ span#infolog-index_\$\{row\}\[info_des\] {
 #infolog-edit {
   margin: 0;
 }
-#infolog-edit .et2_tabheader {
-  background: transparent;
-}
 #infolog-edit table.egwGridView_outer {
   max-width: 100%;
 }
@@ -212,18 +197,6 @@ span#infolog-index_\$\{row\}\[info_des\] {
 .infolog_fixedHeight {
   height: auto;
 }
-div#infolog-edit_info_contact input.ui-autocomplete-input span.ui-icon-close {
-  background-color: #FFFFFF;
-  background-size: contain;
-  background-position: 5px 5px;
-  top: 9px !important;
-}
-.searchParent input.ui-autocomplete-input {
-  width: 95% !important;
-}
-input#infolog-edit_info_subject {
-  width: 98% !important;
-}
 /*#############################################*/
 /*Tabs    */
 /*Beschreibung************************************/
@@ -242,9 +215,6 @@ input#infolog-edit_info_subject {
 #infolog-edit_infolog-edit-delegation .inputFullWidth input {
   width: 96%;
 }
-#infolog-edit_infolog-edit-responsible .chzn-container .chzn-results {
-  max-height: 150px;
-}
 /*Historie*/
 #infolog-index table.egwGridView_grid img {
   height: 16px;

infolog/templates/pixelegg/app.less

@@ -44,11 +44,6 @@
 #infolog-edit{
     margin: 0;
 
-//    input{ max-width: 95%; }
-
-    .et2_tabheader{
-        background: transparent;
-    }
     table.egwGridView_outer{
         max-width: 100%;
     }
@@ -61,49 +56,6 @@
 	height: auto;
 }
 
-//TYP
-select#infolog-edit_info_type {}
-
-// Nummer hinter Typ
-span#infolog-edit_info_number{}
-
-//Kontakt
-div#infolog-edit_info_contact{
-
-    input.ui-autocomplete-input {
-
-        span.ui-icon-close {
-            background-color: @gray_0;
-            background-size: contain;
-            background-position: 5px 5px;
-            top: 9px !important;
-        }
-
-}
-
-
-}
-label.et2_label {}
-
-// Eingabe via Select + Input
-div.et2_box_widget {}
-
-//
-input.infolog-edit_info_custom_from {}
-
-// Kategorie
-
-
-// Eltereintrag
-.searchParent {
-
-    input.ui-autocomplete-input {width: 95% !important;}
-
-}
-
-
-// Titel
-input#infolog-edit_info_subject {width: 98% !important;}
 
 
 
@@ -146,10 +98,6 @@ input#infolog-edit_info_subject {width: 98% !important;}
 
 }
 
-#infolog-edit_infolog-edit-responsible .chzn-container .chzn-results {
-	max-height: 150px;
-}
-
 /*Historie*/
 #infolog-index table.egwGridView_grid {
    img{height: 16px;}