extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 14:41:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

Get collabora placeholder dialog working again in trunk

Browse Source
This commit is contained in:
nathan 2022-08-03 16:05:50 -06:00
parent f7cf372f09
commit bddcf72728
3 changed files with 33 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
api/js/etemplate/et2_widget_placeholder.ts
View File

@ -18,12 +18,11 @@
import {et2_register_widget, WidgetConfig} from "./et2_core_widget"; import {et2_register_widget, WidgetConfig} from "./et2_core_widget";
import {ClassWithAttributes} from "./et2_core_inheritance"; import {ClassWithAttributes} from "./et2_core_inheritance";
import {et2_inputWidget} from "./et2_core_inputWidget"; import {et2_inputWidget} from "./et2_core_inputWidget";
import type {egw} from "../jsapi/egw_global";
import {et2_selectbox} from "./et2_widget_selectbox";
import {et2_description} from "./et2_widget_description";
import {et2_link_entry} from "./et2_widget_link";
import type {et2_button} from "./et2_widget_button";
import {Et2Dialog} from "./Et2Dialog/Et2Dialog"; import {Et2Dialog} from "./Et2Dialog/Et2Dialog";
import {Et2LinkEntry} from "./Et2Link/Et2LinkEntry";
import {Et2Select} from "./Et2Select/Et2Select";
import {Et2Description} from "./Et2Description/Et2Description";
import {Et2Button} from "./Et2Button/Et2Button";
/** /**
@ -201,21 +200,14 @@ export class et2_placeholder_select extends et2_inputWidget
*/ */
_on_template_load() _on_template_load()
{ {
let app = <et2_selectbox>this.dialog.template.widgetContainer.getDOMWidgetById("app"); let app = <Et2Select><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("app");
let group = <et2_selectbox>this.dialog.template.widgetContainer.getDOMWidgetById("group"); let group = <Et2Select><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("group");
let placeholder_list = <et2_selectbox>this.dialog.template.widgetContainer.getDOMWidgetById("placeholder_list"); let placeholder_list = <Et2Select><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("placeholder_list");
let preview = <et2_description>this.dialog.template.widgetContainer.getDOMWidgetById("preview_placeholder"); let preview = <Et2Description><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("preview_placeholder");
let entry = <et2_link_entry>this.dialog.template.widgetContainer.getDOMWidgetById("entry"); let entry = <Et2LinkEntry><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("entry");
placeholder_list.set_select_options(this._get_placeholders(app.get_value(), group.get_value())); placeholder_list.set_select_options(this._get_placeholders(app.get_value(), group.get_value()));
// Further setup / styling that can't be done in etemplate
this.dialog.template.DOMContainer.style.display = "flex";
this.dialog.template.DOMContainer.firstChild.style.display = "flex";
group.getDOMNode().size = 5;
placeholder_list.getDOMNode().size = 5;
// Bind some handlers // Bind some handlers
app.onchange = (node, widget) => app.onchange = (node, widget) =>
{ {
@ -224,7 +216,6 @@ export class et2_placeholder_select extends et2_inputWidget
{ {
// These ones don't let you select an entry for preview (they don't work) // These ones don't let you select an entry for preview (they don't work)
entry.set_disabled(true); entry.set_disabled(true);
entry.app_select.val('user');
entry.set_value({app: 'user', id: '', query: ''}); entry.set_value({app: 'user', id: '', query: ''});
} }
else if(widget.get_value() == 'general') else if(widget.get_value() == 'general')
@ -237,7 +228,6 @@ export class et2_placeholder_select extends et2_inputWidget
// Load app translations // Load app translations
this.egw().langRequireApp(this.egw().window, widget.get_value()); this.egw().langRequireApp(this.egw().window, widget.get_value());
entry.set_disabled(false); entry.set_disabled(false);
entry.app_select.val(widget.get_value());
entry.set_value({app: widget.get_value(), id: '', query: ''}); entry.set_value({app: widget.get_value(), id: '', query: ''});
} }
let groups = this._get_group_options(widget.get_value()); let groups = this._get_group_options(widget.get_value());
@ -254,11 +244,11 @@ export class et2_placeholder_select extends et2_inputWidget
} }
placeholder_list.onchange = this._on_placeholder_select.bind(this); placeholder_list.onchange = this._on_placeholder_select.bind(this);
entry.onchange = this._on_placeholder_select.bind(this); entry.onchange = this._on_placeholder_select.bind(this);
(<et2_button>this.dialog.template.widgetContainer.getDOMWidgetById("insert_placeholder")).onclick = () => (<Et2Button><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("insert_placeholder")).onclick = () =>
{ {
this.options.insert_callback(this.dialog.template.widgetContainer.getDOMWidgetById("preview_placeholder").getDOMNode().textContent); this.options.insert_callback(this.dialog.template.widgetContainer.getDOMWidgetById("preview_placeholder").getDOMNode().textContent);
}; };
(<et2_button>this.dialog.template.widgetContainer.getDOMWidgetById("insert_content")).onclick = () => (<Et2Button><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("insert_content")).onclick = () =>
{ {
this.options.insert_callback(this.dialog.template.widgetContainer.getDOMWidgetById("preview_content").getDOMNode().textContent); this.options.insert_callback(this.dialog.template.widgetContainer.getDOMWidgetById("preview_content").getDOMNode().textContent);
}; };
@ -272,11 +262,11 @@ export class et2_placeholder_select extends et2_inputWidget
*/ */
_on_placeholder_select() _on_placeholder_select()
{ {
let app = <et2_link_entry>this.dialog.template.widgetContainer.getDOMWidgetById("app"); let app = <Et2LinkEntry><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("app");
let entry = <et2_link_entry>this.dialog.template.widgetContainer.getDOMWidgetById("entry"); let entry = <Et2LinkEntry><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("entry");
let placeholder_list = <et2_selectbox>this.dialog.template.widgetContainer.getDOMWidgetById("placeholder_list"); let placeholder_list = <Et2Select><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("placeholder_list");
let preview = <et2_description>this.dialog.template.widgetContainer.getDOMWidgetById("preview_placeholder"); let preview = <Et2Description><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("preview_placeholder");
let preview_content = <et2_description>this.dialog.template.widgetContainer.getDOMWidgetById("preview_content"); let preview_content = <Et2Description><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("preview_content");
// Show the selected placeholder // Show the selected placeholder
this.set_value(placeholder_list.get_value()); this.set_value(placeholder_list.get_value());
@ -443,19 +433,16 @@ export class et2_placeholder_snippet_select extends et2_placeholder_select
*/ */
_on_template_load() _on_template_load()
{ {
let app = <et2_selectbox>this.dialog.template.widgetContainer.getDOMWidgetById("app"); let app = <Et2Select><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("app");
let placeholder_list = <et2_selectbox>this.dialog.template.widgetContainer.getDOMWidgetById("placeholder_list"); let placeholder_list = <Et2Select><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("placeholder_list");
let preview = <et2_description>this.dialog.template.widgetContainer.getDOMWidgetById("preview_content"); let preview = <Et2Description><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("preview_content");
let entry = <et2_link_entry>this.dialog.template.widgetContainer.getDOMWidgetById("entry"); let entry = <Et2LinkEntry><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("entry");
placeholder_list.set_select_options(this._get_placeholders("addressbook", "addresses")); placeholder_list.set_select_options(this._get_placeholders("addressbook", "addresses"));
// Further setup / styling that can't be done in etemplate // Further setup / styling that can't be done in etemplate
app.getInputNode().setAttribute("readonly", true); app.setAttribute("readonly", true);
this.dialog.template.DOMContainer.style.display = "flex";
this.dialog.template.DOMContainer.firstChild.style.display = "flex";
placeholder_list.getDOMNode().size = 5;
// Bind some handlers // Bind some handlers
app.onchange = (node, widget) => app.onchange = (node, widget) =>
@ -476,18 +463,16 @@ export class et2_placeholder_snippet_select extends et2_placeholder_select
*/ */
_on_placeholder_select() _on_placeholder_select()
{ {
let app = <et2_link_entry>this.dialog.template.widgetContainer.getDOMWidgetById("app"); let entry = <Et2LinkEntry><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("entry");
let entry = <et2_link_entry>this.dialog.template.widgetContainer.getDOMWidgetById("entry"); let placeholder_list = <Et2Select><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("placeholder_list");
let placeholder_list = <et2_selectbox>this.dialog.template.widgetContainer.getDOMWidgetById("placeholder_list"); let preview_content = <Et2Description><unknown>this.dialog.template.widgetContainer.getDOMWidgetById("preview_content");
let preview = <et2_description>this.dialog.template.widgetContainer.getDOMWidgetById("preview_placeholder");
let preview_content = <et2_description>this.dialog.template.widgetContainer.getDOMWidgetById("preview_content");
if(placeholder_list.get_value() && entry.get_value()) if(placeholder_list.value && entry.get_value())
{ {
// Show the selected placeholder replaced with value from the selected entry // Show the selected placeholder replaced with value from the selected entry
this.egw().json( this.egw().json(
'EGroupware\\Api\\Etemplate\\Widget\\Placeholder::ajax_fill_placeholders', 'EGroupware\\Api\\Etemplate\\Widget\\Placeholder::ajax_fill_placeholders',
[placeholder_list.get_value(), {app: "addressbook", id: entry.get_value()}], [placeholder_list.value, {app: "addressbook", id: entry.get_value()}],
function(_content) function(_content)
{ {
if(!_content) if(!_content)
@ -507,7 +492,7 @@ export class et2_placeholder_snippet_select extends et2_placeholder_select
} }
if(!entry.get_value()) if(!entry.get_value())
{ {
entry.search.get(0).focus(); entry._searchNode.focus();
} }
} }

9
api/templates/default/insert_merge_placeholder.xet
View File

@ -10,17 +10,20 @@
<select id="group"/> <select id="group"/>
</vbox> </vbox>
<select id="placeholder_list"/> <select id="placeholder_list" rows="10"/>
</hbox> </hbox>
<hbox class="preview"> <hbox class="preview">
<description id="preview_placeholder"/> <description id="preview_placeholder"/>
<button id="insert_placeholder" label="Insert" statustext="Insert placeholder" image="export"></button> <button background_image="true" id="insert_placeholder" label="Insert" statustext="Insert placeholder"
image="export"></button>
</hbox> </hbox>
<hrule/> <hrule/>
<link-entry id="entry" label="Preview with entry"/> <link-entry id="entry" label="Preview with entry"/>
<hbox class="preview"> <hbox class="preview">
<description id="preview_content"/> <description id="preview_content"/>
<button id="insert_content" label="Insert" statustext="Insert merged content" image="export"></button> <buttononly background_image="true" id="insert_content" label="Insert"
statustext="Insert merged content"
image="export"></buttononly>
</hbox> </hbox>
</vbox> </vbox>
<styles> <styles>

31
api/templates/default/placeholder_snippet.xet
View File

@ -32,37 +32,6 @@
select#_app { select#_app {
flex-grow: 0; flex-grow: 0;
} }
.ui-dialog-content, div.et2_box_widget, div.et2_box_widget > div.et2_box_widget {
display: flex;
flex: 1 1 auto;
}
div.et2_hbox {
flex-direction: row;
flex-grow: 1;
}
div.et2_vbox {
flex-direction: column;
gap: 5px;
}
div.et2_box_widget > * {
flex: 1 1 auto;
width: 100%;
}
div.et2_link_entry {
flex-grow: 0;
}
div.et2_link_entry input.ui-autocomplete-input {
width: 70%
}
div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button, button#cancel, .et2_button {
border: none;
border-radius: 0px;
background-color: transparent;
}
div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:hover, button#cancel:hover {
box-shadow: none;
-webkit-box-shadow: none;
}
.preview .et2_button { .preview .et2_button {
flex: 0 1 24px; flex: 0 1 24px;
height: 24px; height: 24px;