mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-08 00:54:50 +01:00
W.I.P on collabora placeholder insert
- better button styling - make entry select app = selected app
This commit is contained in:
nathan
parent
29bd739955
commit
6884902d93
@ -24,6 +24,7 @@ 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";
|
||||
|
||||
|
||||
/**
|
||||
@ -104,6 +105,7 @@ export class et2_placeholder_select extends et2_inputWidget
|
||||
{
|
||||
text: this.egw().lang("Insert"),
|
||||
id: "submit",
|
||||
image: "export"
|
||||
}
|
||||
];
|
||||
let extra_buttons_action = {};
|
||||
@ -121,8 +123,9 @@ export class et2_placeholder_select extends et2_inputWidget
|
||||
buttons.push({text: this.egw().lang("Cancel"), id: "cancel", image: "cancel"});
|
||||
|
||||
let data = {
|
||||
content: {app: '', group: ''},
|
||||
sel_options: {app: [], group: []}
|
||||
content: {app: '', group: '', entry: {}},
|
||||
sel_options: {app: [], group: []},
|
||||
modifications: {outer_box: {entry: {}}}
|
||||
};
|
||||
|
||||
Object.keys(_data).map((key) =>
|
||||
@ -136,9 +139,11 @@ export class et2_placeholder_select extends et2_inputWidget
|
||||
data.sel_options.group = this._get_group_options(Object.keys(_data)[0]);
|
||||
data.content.app = data.sel_options.app[0].value;
|
||||
data.content.group = data.sel_options.group[0].value;
|
||||
data.content.entry = data.modifications.outer_box.entry.only_app = data.content.app;
|
||||
data.modifications.outer_box.entry.application_list = Object.keys(_data);
|
||||
|
||||
// callback for dialog
|
||||
this.submit_callback = function(submit_button_id, submit_value, savemode)
|
||||
this.submit_callback = function(submit_button_id, submit_value)
|
||||
{
|
||||
if((submit_button_id == 'submit' || (extra_buttons_action && extra_buttons_action[submit_button_id])) && submit_value)
|
||||
{
|
||||
@ -161,8 +166,6 @@ export class et2_placeholder_select extends et2_inputWidget
|
||||
}, et2_dialog._create_parent('api'));
|
||||
this.dialog.template.uniqueId = 'api.insert_merge_placeholder';
|
||||
|
||||
// Keep the dialog always at the top
|
||||
this.dialog.div.parent().css({"z-index": 100000});
|
||||
|
||||
this.dialog.div.on('load', function(e)
|
||||
{
|
||||
@ -184,6 +187,11 @@ export class et2_placeholder_select extends et2_inputWidget
|
||||
placeholder_list.getDOMNode().size = 5;
|
||||
|
||||
// Bind some handlers
|
||||
app.onchange = (node, widget) =>
|
||||
{
|
||||
group.set_select_options(this._get_group_options(widget.get_value()));
|
||||
entry.set_value({app: widget.get_value()});
|
||||
}
|
||||
group.onchange = (select_node, select_widget) =>
|
||||
{
|
||||
console.log(this, arguments);
|
||||
@ -192,6 +200,16 @@ export class et2_placeholder_select extends et2_inputWidget
|
||||
}
|
||||
placeholder_list.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 = () =>
|
||||
{
|
||||
this.options.insert_callback(this.dialog.template.widgetContainer.getDOMWidgetById("preview_placeholder").getDOMNode().textContent);
|
||||
};
|
||||
(<et2_button>this.dialog.template.widgetContainer.getDOMWidgetById("insert_content")).onclick = () =>
|
||||
{
|
||||
this.options.insert_callback(this.dialog.template.widgetContainer.getDOMWidgetById("preview_content").getDOMNode().textContent);
|
||||
};
|
||||
|
||||
this._on_placeholder_select();
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
@ -203,19 +221,22 @@ export class et2_placeholder_select extends et2_inputWidget
|
||||
|
||||
_on_placeholder_select(node, widget : et2_selectbox | et2_link_entry)
|
||||
{
|
||||
let app = <et2_selectbox>this.dialog.template.widgetContainer.getDOMWidgetById("app");
|
||||
let app = <et2_link_entry>this.dialog.template.widgetContainer.getDOMWidgetById("app");
|
||||
let entry = <et2_link_entry>this.dialog.template.widgetContainer.getDOMWidgetById("entry");
|
||||
let placeholder_list = <et2_selectbox>this.dialog.template.widgetContainer.getDOMWidgetById("placeholder_list");
|
||||
let preview = <et2_description>this.dialog.template.widgetContainer.getDOMWidgetById("preview_placeholder");
|
||||
let preview_content = <et2_description>this.dialog.template.widgetContainer.getDOMWidgetById("preview_content");
|
||||
console.log(this, arguments);
|
||||
|
||||
// Show the selected placeholder
|
||||
preview.set_value(placeholder_list.get_value());
|
||||
if(placeholder_list.get_value() && entry.get_value() && entry.get_value().app && entry.get_value().id)
|
||||
preview.getDOMNode().parentNode.style.visibility = placeholder_list.get_value().trim() ? null : 'hidden';
|
||||
|
||||
if(placeholder_list.get_value() && entry.get_value())
|
||||
{
|
||||
// Show the selected placeholder replaced with value from the selected entry
|
||||
this.egw().json(
|
||||
'EGroupware\\Api\\Etemplate\\Widget\\Placeholder::ajax_fill_placeholders',
|
||||
[entry.get_value().app, placeholder_list.get_value(), entry.get_value().id],
|
||||
[app.get_value(), placeholder_list.get_value(), entry.get_value()],
|
||||
function(_content)
|
||||
{
|
||||
preview_content.set_value(_content);
|
||||
@ -225,6 +246,7 @@ export class et2_placeholder_select extends et2_inputWidget
|
||||
}
|
||||
else
|
||||
{
|
||||
// No value, hide the row
|
||||
preview_content.getDOMNode().parentNode.style.visibility = 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,14 +12,15 @@
|
||||
</vbox>
|
||||
<select id="placeholder_list"/>
|
||||
</hbox>
|
||||
<link-entry id="entry" label="Preview with entry"/>
|
||||
<hbox class="preview">
|
||||
<description id="preview_placeholder"/>
|
||||
<button id="insert_placeholder"></button>
|
||||
<button id="insert_placeholder" label="Insert" statustext="Insert placeholder" image="export"></button>
|
||||
</hbox>
|
||||
<hrule/>
|
||||
<link-entry id="entry" label="Preview with entry"/>
|
||||
<hbox class="preview">
|
||||
<description id="preview_content"/>
|
||||
<button id="insert_content"></button>
|
||||
<button id="insert_content" label="Insert" statustext="Insert merged content" image="export"></button>
|
||||
</hbox>
|
||||
</vbox>
|
||||
<styles>
|
||||
@ -59,9 +60,21 @@
|
||||
div.et2_link_entry input.ui-autocomplete-input {
|
||||
width: 75%
|
||||
}
|
||||
.et2_hbox button {
|
||||
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 {
|
||||
flex: 0 1 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
background-color: transparent;
|
||||
}
|
||||
</styles>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user