Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix dialog window text input unfocusable #2761

Merged
merged 2 commits into from
Oct 25, 2024
Merged

Fix dialog window text input unfocusable #2761

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2681874
Fix view rename dialog
jevenski Oct 8, 2024
cd98bc2
Close side panel on opening dialog windows
jevenski Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions css/category-panel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,6 @@ div[part=heading] {
margin: 0px;
line-height: 16px;
cursor: pointer;
-moz-user-select: none;
-moz-user-focus: normal;
-moz-user-input: enabled;
user-select: none;
}

:host([hidden]) {
Expand Down
13 changes: 1 addition & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,19 +152,8 @@ <h4 class="offcanvas-title" id="offcanvas-sidepanel-label"></h4>
</div>
<slot name="content"></slot>
</template>
<template id="pview-rename-dialog-template">
<div class="content row">
<div class="col-12">
<input type="text" onfocus="this.select()"/>
</div>
</div>
<div class="buttons-list">
<button class="Button" value="confirm" uilang>ok</button>
<button class="Button Cancel" uilang>Cancel</button>
</div>
</template>
<category-list id="CatList">
<category-panel id="pview" uilangtext="pnlViews" class="d-none d-md-block">
<category-panel id="pview" uilangtext="pnlViews">
<input slot="decorator" class="Button" type="button" value="+" uilangtitle="SaveCurrentView" id="pview_save_view_button" />
<panel-label id="pview_all" icon="all" uilangtext="All" selected></panel-label>
</category-panel>
Expand Down
24 changes: 15 additions & 9 deletions js/objects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,17 +198,23 @@ var theDialogManager = {
$('#modalbg').hide();
this.modalState = false;
},
show: function( id, callback )
{
var obj = $('#'+id);
if(obj.data("modal"))
show: function(id, callback) {
// Close side panel on mobile:
// An offcanvas is a modal under the hood and will intercept focus events
// from other elements, and make other text inputs unfocusable and uneditable.
if ($(window).width() < 768) {
bootstrap.Offcanvas.getInstance($("#offcanvas-sidepanel")[0]).hide();
}

const obj = $('#' + id);
if (obj.data("modal"))
this.setModalState();
if($type(this.items[id]) && ($type(this.items[id].beforeShow)=="function"))
this.items[id].beforeShow(id);
if ($type(this.items[id]) && ($type(this.items[id].beforeShow)=="function"))
this.items[id].beforeShow(id);
this.center(id);
obj.show(obj.data("modal") ? null : this.divider,callback);
if($type(this.items[id]) && ($type(this.items[id].afterShow)=="function"))
this.items[id].afterShow(id);
obj.show(obj.data("modal") ? null : this.divider, callback);
if ($type(this.items[id]) && ($type(this.items[id].afterShow)=="function"))
this.items[id].afterShow(id);
this.bringToTop(id);
},
hide: function(id, callback) {
Expand Down
37 changes: 20 additions & 17 deletions js/webui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2500,17 +2500,24 @@ function createCategoryList(catModule) {
theDialogManager.make(
"dlgRenameView",
theUILang.RenameView,
$$('pview-rename-dialog-template').innerHTML,
true
);
$$('dlgRenameView')
.querySelector('button[value="confirm"]')
.addEventListener("click", function () {
const dialogEl = $$('dlgRenameView');
const inputEl = dialogEl.querySelector('input[type="text"]');
categoryList.renameView(inputEl.dataset.viewId, inputEl.value);
theDialogManager.hide('dlgRenameView');
},
[
$("<div>").addClass("cont").append(
$("<div>").addClass("row").append(
$("<div>").addClass("col-12").append(
$("<input>").attr({type:"text"}).on("focus", (ev) => ev.target.select()),
),
),
),
$("<div>").addClass("buttons-list").append(
$("<button>").val("confirm").on("click", () => {
const inputEl = $("#dlgRenameView input[type=text]");
categoryList.renameView(inputEl.data("view-id"), inputEl.val())
theDialogManager.hide('dlgRenameView');
}).text(theUILang.ok),
$("<button>").addClass("Cancel").text(theUILang.Cancel),
),
],
true,
);
const categoryList = new catModule.CategoryList({
panelAttribs: catList.panelAttribs,
Expand Down Expand Up @@ -2542,12 +2549,8 @@ function createCategoryList(catModule) {
onConfigChangeFn: theWebUI.save.bind(theWebUI),
byteSizeToStringFn: (size) => theConverter.bytes(size, 'catlist'),
renameViewDialogFn: (viewId, viewName) => {
const dialogEl = $$('dlgRenameView');
const inputEl = dialogEl.querySelector('input[type="text"]');
inputEl.value = viewName;
inputEl.dataset.viewId = viewId;
theDialogManager.show(dialogEl.id);
inputEl.focus();
theDialogManager.show("dlgRenameView");
$("#dlgRenameView input[type=text]").val(viewName).data({"view-id":viewId}).trigger("focus");
},
dStatus,
theUILang
Expand Down