From d8d7560d1289d7c0288c908ef2e674cff5d75a84 Mon Sep 17 00:00:00 2001 From: nathan Date: Tue, 5 Mar 2024 16:34:19 -0700 Subject: [PATCH] Swap in vfsPath webComponent --- api/js/etemplate/Et2Vfs/Et2VfsPath.md | 3 + api/js/etemplate/Et2Vfs/Et2VfsPath.styles.ts | 4 +- api/js/etemplate/et2_widget_vfs.ts | 155 ------------------- filemanager/js/filemanager.ts | 3 + filemanager/templates/default/app.css | 4 + 5 files changed, 13 insertions(+), 156 deletions(-) create mode 100644 api/js/etemplate/Et2Vfs/Et2VfsPath.md diff --git a/api/js/etemplate/Et2Vfs/Et2VfsPath.md b/api/js/etemplate/Et2Vfs/Et2VfsPath.md new file mode 100644 index 0000000000..1082c406b0 --- /dev/null +++ b/api/js/etemplate/Et2Vfs/Et2VfsPath.md @@ -0,0 +1,3 @@ +```html:preview + +``` \ No newline at end of file diff --git a/api/js/etemplate/Et2Vfs/Et2VfsPath.styles.ts b/api/js/etemplate/Et2Vfs/Et2VfsPath.styles.ts index 106a97405a..bbffd4e335 100644 --- a/api/js/etemplate/Et2Vfs/Et2VfsPath.styles.ts +++ b/api/js/etemplate/Et2Vfs/Et2VfsPath.styles.ts @@ -70,7 +70,9 @@ export default css` /* Sizes */ .form-control--medium, .form-control--medium .form-control-input { - min-height: var(--sl-input-height-medium); + min-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2); + padding-top: 0; + padding-bottom: 0; } .form-control--medium .vfs-path__edit { diff --git a/api/js/etemplate/et2_widget_vfs.ts b/api/js/etemplate/et2_widget_vfs.ts index 7431aab0ba..c390f9d707 100644 --- a/api/js/etemplate/et2_widget_vfs.ts +++ b/api/js/etemplate/et2_widget_vfs.ts @@ -26,7 +26,6 @@ import {et2_description} from "./et2_widget_description"; import {et2_file} from "./et2_widget_file"; import {et2_inputWidget} from "./et2_core_inputWidget"; import {et2_IDetachedDOM} from "./et2_core_interfaces"; -import {et2_no_init} from "./et2_core_common"; import {egw} from "../jsapi/egw_global"; import {egw_getAppObjectManager, egwActionObject} from "../egw_action/egw_action"; import {egw_keyHandler} from '../egw_action/egw_keymanager'; @@ -283,160 +282,6 @@ export class et2_vfsName extends et2_textbox } et2_register_widget(et2_vfsName, ["vfs-name"]); -/** -* vfs-name -* filename automatically urlencoded on return (urldecoded on display to user) -* -* @augments et2_textbox -*/ -export class et2_vfsPath extends et2_vfsName -{ - static readonly _attributes : any = { - noicon: { - type: "boolean", - description: "suppress folder icons", - default: true - } - }; - - private div : JQuery ; - private span : JQuery; - - /** - * Constructor - * - * @memberOf et2_vfsName - */ - constructor(_parent, _attrs? : WidgetConfig, _child? : object) - { - // Call the inherited constructor - super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_vfsPath._attributes, _child || {})); - this.div = jQuery(document.createElement("div")) - .addClass('et2_vfsPath'); - this.span = jQuery(document.createElement("ul")) - .appendTo(this.div); - this.div.prepend(this.input); - this.setDOMNode(this.div[0]); - this.span.on('wheel', function(e){ - var delta = e.originalEvent["deltaY"] > 0 ? 30 : -30; - this.scrollLeft = this.scrollLeft - delta; - }); - this.span.on('mouseover', function (e){ - if (this.scrollWidth > this.clientWidth) - { - jQuery(this).addClass('scrollable'); - } - else - { - jQuery(this).removeClass('scrollable'); - } - }); - } - - createInputWidget() - { - super.createInputWidget(); - - this.input.on('focus', function() { - this.input.val(this.options.value); - this.span.hide(); - }.bind(this)) - .on('focusout', function() { - // Can't use show() because it uses the wrong display - this.span.css('display', 'flex'); - this.input.val(''); - }.bind(this)); - } - - change(_node?) - { - if(this.input.val()) - { - this.set_value(this.input.val()); - } - return super.change(_node); - } - - set_value(_value) - { - if(_value.path) - { - _value = _value.path; - } - if(_value === this.options.value && this._oldValue !== et2_no_init) return; - - let path_parts = _value.split('/'); - if(_value === '/') path_parts = ['']; - let path = "/"; - let text = ''; - if (this.span) this.span.empty().css('display', 'flex'); - this.input.val(''); - for(let i = 0; i < path_parts.length; i++) - { - path += (path=='/'?'':'/')+path_parts[i]; - text = egw.decodePath(path_parts[i]); - - let image = path=='/' ? this.egw().image('navbar','api') : this.egw().image(text); - - // Nice human-readable stuff for apps - if(path_parts[1] == 'apps') - { - if(i === 1) - { - text = this.egw().lang('applications'); - } - else if( i === 2) - { - text = this.egw().lang(path_parts[2]); - image = this.egw().image('navbar',path_parts[2].toLowerCase()); - } - else if(i === 3 && !isNaN(text)) - { - // we first need to call link_title without callback, as callback would be called for cache-hits too! - let link_title = this.egw().link_title(path_parts[2], path_parts[3], false); - if(link_title && typeof link_title !== 'undefined') - { - text = link_title; - } - else - { - this.egw().link_title(path_parts[2], path_parts[3], true).then(title => - { - if(!title) return; - jQuery('li',this.span).first().text(title); - }); - } - } - } - let self = this; - let node = jQuery(document.createElement("li")) - .addClass("vfsPath et2_clickable") - .text(text) - //.attr('title', egw.decodePath(path)) - .click({data:path, egw: this.egw()}, function(e) { - return self.set_value(e.data.data); - }) - .prependTo(this.span); - if(image && !this.options.noicon) - { - node.prepend(this.egw().image_element(image)); - } - jQuery(this.getDOMNode()).append(this.span); - } - - if(this.isAttached() && this.options.value !== _value) - { - this._oldValue = this.options.value; - this.options.value = _value; - this.change(); - } - } - getValue() { - return this.options ? this.options.value : null; - } -} -et2_register_widget(et2_vfsPath, ["vfs-path"]); - /** * vfs-name * filename automatically urlencoded on return (urldecoded on display to user) diff --git a/filemanager/js/filemanager.ts b/filemanager/js/filemanager.ts index cdc6e64b67..687498fb6c 100644 --- a/filemanager/js/filemanager.ts +++ b/filemanager/js/filemanager.ts @@ -916,6 +916,9 @@ export class filemanagerAPP extends EgwApp } this.path_widget[etemplate_name].set_value(_dir); + + // Dispatch a change event for the nm + this.path_widget[etemplate_name].dispatchEvent(new Event("change")); } /** diff --git a/filemanager/templates/default/app.css b/filemanager/templates/default/app.css index dbfb987770..0c57c399aa 100644 --- a/filemanager/templates/default/app.css +++ b/filemanager/templates/default/app.css @@ -39,6 +39,10 @@ input#filemanager-index_path { flex: 20 1 auto; } +#filemanager-index_nm_path { + flex-grow: 1 +} + /** * Tile view */