Oct 03, 2017, 9:29 PM
[FIXED] [#1558] [4.5.0] Desktop - arrange shortcuts
Hello support team,
if desktop modules use shortcuts and the user places them to the right-hand browser's edge, they may end up outside the visible area when the browser is downsized. This situation can be caught and then use the
I have the following problems with this function:
1. Shortcuts are placed always in different positions (after initial positions are changed). Sometimes nicely to the left side, which I consider to be the correct behavior, but mostly they are positioned in different places on the desktop (rather to the right side). What is the assumed behavior?
2. "Sometimes" the shortcuts are arranged to the right-hand browser's edge and the background of the desktop area (in this case blue) is shifted to the left side leaving the white background. This behavior is more common when choosing "Do nothing" in confirmation dialogue, but in my real project, this situation occurs more often when "Place all shortcuts in the default position" is chosen. Such behavior is unpredictable, but 1 attempt out of 10 ends up with this messy screen:
3. After returning back to the original browser size, shortcuts move to their initial positions. Is it a bug or a feature? How to prevent this behavior?
4. When first function parameter
1. Drag&drop shortcuts somewhere to the right-hand browser's edge.
2. Resize the browser so that the shortcuts are outside the visible area.
3. Test both options from the confirmation dialogue.
I am aware of the fact that such issue description is very vague. Unfortunately, I can not see any patterns in this behavior.
Thank you for your help.
Dan
if desktop modules use shortcuts and the user places them to the right-hand browser's edge, they may end up outside the visible area when the browser is downsized. This situation can be caught and then use the
Ext.net.Desktop.desktop.arrangeShortcuts(ignorePosition, ignoreTemp)
function.I have the following problems with this function:
1. Shortcuts are placed always in different positions (after initial positions are changed). Sometimes nicely to the left side, which I consider to be the correct behavior, but mostly they are positioned in different places on the desktop (rather to the right side). What is the assumed behavior?
2. "Sometimes" the shortcuts are arranged to the right-hand browser's edge and the background of the desktop area (in this case blue) is shifted to the left side leaving the white background. This behavior is more common when choosing "Do nothing" in confirmation dialogue, but in my real project, this situation occurs more often when "Place all shortcuts in the default position" is chosen. Such behavior is unpredictable, but 1 attempt out of 10 ends up with this messy screen:
3. After returning back to the original browser size, shortcuts move to their initial positions. Is it a bug or a feature? How to prevent this behavior?
4. When first function parameter
ignorePosition
is false, nothing happens. Is that correct? Actually, what are the parameters to do?@using Ext.Net;
@using Ext.Net.MVC;
@{
ViewBag.Title = "Desktop Drag & Drop Example - Arrange Shortcuts";
Layout = null;
var X = Html.X();
List<MenuItem> startMenu = new List<Ext.Net.MenuItem>();
foreach (var menuEntry in new[]
{
new { id = "EU", text = "European Union", icon = Icon.FlagEuropeanunion },
new { id = "US", text = "United States", icon = Icon.FlagUs }
}) {
startMenu.Add(new MenuItem()
{
ID = menuEntry.id,
Icon = menuEntry.icon,
Text = menuEntry.text
});
}
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET MVC Test Case</title>
<style>
.x-default-shortcut {
background: url("http://www.nlm.cz/img/logoNewlink.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.dropOK {
background-color: #99ff99 !important;
}
.dropNotOK {
border: 1px solid #FF0000 !important;
}
</style>
<script type="text/javascript">
Ext.onReady(function () {
//
});
function desktopReady() {
createModule("EU");
createModule("US");
App._nelisDesktop_Area.addListener("resize", function (item, adjWidth, adjHeight) {
onDesktopResize(item, adjWidth, adjHeight);
});
}
var createModule = function (moduleId) {
var item = Ext.getCmp(moduleId);
var newModuleId = "dynModule_" + moduleId;
App._nelisDesktop.addModule(Ext.create("Ext.ux.desktop.Module", {
id: newModuleId,
shortcut: { name: item.text, module: newModuleId, IconCls: "x-default-shortcut" },
autoRun: true
}));
}
var onDesktopResize = function (item, adjWidth, adjHeight) {
var area = App._nelisDesktop.desktop.getComponent(0),
gridWidth = 66,
gridHeight = 91;
// check if there is any shortcut placed out of visible area
var modules = App._nelisDesktop.modules,
outModules = [],
module;
for (var i = 0; i < modules.length; i++) {
module = modules[i];
if (module.shortcut !== undefined) {
if (module.shortcut.x >= (area.getWidth() - Math.floor(gridWidth / 2)) || module.shortcut.y >= (area.getHeight() - Math.floor(gridHeight / 2))) {
outModules.push(module)
}
}
}
if (outModules.length > 0) {
Ext.MessageBox.show({
title: "Shortcut overflow",
icon: Ext.MessageBox.WARNING,
buttons: Ext.MessageBox.YESNO,
buttonText: {
yes: "Place all shortcuts in the default position", no: "Do nothing"
},
msg: "After resizing the desktop, " + outModules.length + " shortcuts located outside the visible area were found.",
fn: function (btn) {
if (btn == "yes") {
Ext.net.Desktop.desktop.arrangeShortcuts(true, false)
} else {
return;
}
}
});
}
}
</script>
</head>
<body>
@Html.X().ResourceManager()
@(Html.X().Desktop()
.ID("_nelisDesktop")
.Listeners(l => l.Ready.Fn = "desktopReady")
.DesktopConfig(
Html.X().DesktopConfig()
.ID("_nelisDesktop_Area")
.ShortcutDefaults(defaults => defaults.IconCls = "x-default-shortcut")
.SortShortcuts(true)
.ShortcutDragSelector(true)
)
.StartMenu(
Html.X().DesktopStartMenu()
.ID("_nelisDesktop_StartMenu")
.Title("Allegro Desktop")
.Icon(Icon.Application)
.MenuItems(startMenu)
.Width(400)
.Height(150)
)
.Modules(
Html.X().DesktopModule().ModuleID("_nelisDesktop_EmptyModule") // Ext.ux.desktop.App.getModule() does not expect that no modules exist => create at least a fake one
)
)
</body>
</html>
Steps to reproduce this behaviour:1. Drag&drop shortcuts somewhere to the right-hand browser's edge.
2. Resize the browser so that the shortcuts are outside the visible area.
3. Test both options from the confirmation dialogue.
I am aware of the fact that such issue description is very vague. Unfortunately, I can not see any patterns in this behavior.
Thank you for your help.
Dan
Last edited by fabricio.murta; Oct 18, 2017 at 7:28 PM.