Infolog: Move timestamper & encrypt buttons into tabs using slot and parentID

Also, fix parentId was inconsistently applied

api/js/etemplate/Et2Widget/Et2Widget.ts

@@ -144,7 +144,7 @@ const Et2WidgetMixin = <T extends Constructor>(superClass : T) =>
 				 * Widget ID of another node to insert this node into instead of the normal location
 				 * This isn't a normal property...
 				 */
-				parentId: {type: String},
+				parentId: {type: String, noAccessor: true},
 
 				/**
 				 * Tooltip which is shown for this element on hover
@@ -911,15 +911,27 @@ const Et2WidgetMixin = <T extends Constructor>(superClass : T) =>
 		 */
 		set parentId(parent : string | Element)
 		{
-			if(typeof parent === "string")
+			this.__parentId = parent;
+
+			this.updateComplete.then(() =>
 			{
-				parent = document.querySelector("#" + parent);
+				if(!this.__parentId)
+				{
+					return;
 				}
-			if(parent)
+
+				let parent = document.querySelector("#" + this.__parentId) || this.__parentId;
+				if(parent && parent instanceof Element)
 				{
 					parent.append(<Node><unknown>this);
 					this._parent_node = parent;
 				}
+			});
+		}
+
+		get parentId()
+		{
+			return this.__parentId;
 		}
 
 		setParent(new_parent : Et2WidgetClass | et2_widget)

infolog/templates/default/app.css

@@ -43,49 +43,34 @@ tr.infolog_rowHasParent > td:first-child {
 .et2_nextmatch .egwGridView_grid tr td div.et2_vbox .infoDes a{
 	display: inline-table;
 }
+
 /* break in words if necessary for description */
-#infolog-index_nm div.infoDes > span{
+#infolog-index_nm div.infoDes > span {
     overflow-wrap: break-word;
 }
+
 /* Put line break for the first column*/
 #infolog-index .egwGridView_grid .et2_hbox.et2_box_widget.infolog_CompletedClmn {
     white-space: normal;
 }
 
-button.infologExtraButton {
+/* Right-align extra buttons in tab */
-	background-position: center;
+.infologExtraButton {
-	background-size: 16px;
+    margin-left: auto;
-	padding: 0px;
-	width: 24px;
-	height: 24px;
-}
-button.infologExtraButton:hover {
-    background-size: 16px;
 }
 
-#infolog-edit .et2_toolbar {
+.infologExtraButton ~ .infologExtraButton {
-    position: relative;
+    margin: 0;
-}
-
-.tab_toolbar {
-    position: absolute;
-    top: 6px;
-	right: 0;
-	z-index: 10000;	/* otherwise et2-tabs gets our clicks! */
-}
-
-.tab_toolbar > button, .tab_toolbar > et2-button {
-    margin: 0px;
-}
-
-td.infologTimestamp {
-    position: relative;
 }
 
 div#infolog-edit_infolog-edit-description {
     height: 100%;
 }
-div#infolog-edit_infolog-edit-description iframe {height: calc(100% - 1em) !important;}
+
+div#infolog-edit_infolog-edit-description iframe {
+    height: calc(100% - 1em) !important;
+}
+
 #infolog-edit_info_responsible + .chzn-container .chzn-results {
     max-height: 150px;
 }

infolog/templates/default/edit.xet

@@ -183,8 +183,14 @@
 				<row class="et2_toolbar">
 					<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"/>
+                        <timestamper parentId="infolog-edit_tabs" slot="nav"
+                                     statustext="Insert timestamp into description field" id="timestamp"
+                                     class="infologExtraButton infologTimestamp" target="info_des"/>
+                        <buttononly parentId="infolog-edit_tabs" slot="nav" statustext="Encrypt description"
+                                    id="encrypt"
+                                    class="infologExtraButton infologEncrypt" background_image="1" image="lock"
+                                    onclick="app.infolog.toggleEncrypt"/>
                     </hbox>
 				</row>
 				<row>