[FIXED] [#1558] [4.5.0] Desktop - arrange shortcuts

  1. #1

    [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 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:

    Click image for larger version. 

Name:	desktop.png 
Views:	59 
Size:	11.9 KB 
ID:	25060

    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.
  2. #2
    Hello Dan!

    Thanks for reporting the issue. As far as the icons moving back to their previous position once you resize the window, we've logged an issue under #1558 to track & fix it.

    But, let's go in the order you enumerated:

    1. I could only see icons being placed in a different, yet fixed, position when I dragged only the EU icon outside view and called arrangeShortcuts(true) to arrange it again. Calling arrangeShortcuts() after that fixes the positioning if you require it.

    2. I couldn't assign this desktop wallpaper behavior with icons rearrangement. In fact, this was triggered only when I moved the "EU" icon outside view area (by resizing it) and clicked "do nothing" to the dialog. The only way I could find to overcome the issue was to call arrangeShortcuts(true), which is most likely not the point of the second option in the dialog ("do nothing").
    The problem is caused by displaying the confirmation dialog during the resize event. If I just bind arrangeShortcuts(true) to the resize event, it always works fine.

    So to avoid this, don't bind dialog displaying to the resize event. I tried even putting a little delay to the dialog display, and it didn't work well, so maybe a checkbox in a "settings window" or the sorts could define whether to arrange or not the icons on resize if one or more are outside the view area... Or just always enabled -- or you can yourself write a code to move only the icons outside the area to an available spot in the desktop, if any.

    3. Well, this is the bug we logged under #1558. Seems some commented/leftover code was missed in order to properly rearrange icons in the desktop. To address this issue right now on your side you can use this override:

    Ext.define("gh1558", {
        override: "Ext.ux.desktop.Desktop",
        setShortcutPosition: function (record, height, col, row, view) {
            var me = this,
                retVal = me.callParent(arguments);
    
            record.data.x = record.data.tempX;
            record.data.y = record.data.tempY;
    
            return retVal;
        }
    });
    I couldn't find the reason the code was commented out, so some more testing should take place before we effectively add back those lines to the actual code. But no matter what, they should be put back; just must ensure nothing else has also to be fixed to properly accommodate the code back in.

    4. Yes, something happens. It snaps the icons to the grid if the setting is enabled. If not, then it has nothing to do at all. This method (arrangeShortcuts()) is called every time the window is resized to ensure the shortcuts are fitting to the grid in the new size.

    But this does not recover from the wallpaper "shift" related to question #2, so that's why it breaks and stays broken until arrangeShortcuts(true) is called, even though you can resize the window some times in the meanwhile.

    Well, I hope this helps. If you want feature/bug requests for the individual issues, would you mind filling individual threads for them? I focused here in creating but one issue and then giving you guidance on the other possible issues involved, but it will become confuse if we handle all them just here in this thread from now on.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi FabrÃ*cio,
    as usual, your suggestions were very helpful. After removing confirmation dialogue and applying the #1558 override everything works well. Icons are nicely arranged from the upper left corner down as expected. For the moment, I don't feel any need for opening individual threads for my questions.

    However, I can imagine that moving shortcuts back to their previous position can be sometimes desired behavior (for example when you need temporarily resize browser when using a projector). So, it is on your consideration if "some" parameter can offer current scenario that icons are shifted back after desktop resize (once this "feature" is already there... :-) ). But this is the only marginal note.

    Thank you for your assistance.

    Dan
  4. #4
    Hello @NewLink!

    About the icons moving back to their original positions, I can say that, that was an "accidental feature" by looking at the code. I mean, if you rearranged the icons for a smaller screen -and- resized it still in that small screen, if there were icons that would pop out of the desktop view, they would still go out of the desktop in the accidental "arrange back".

    I believe a proper implementation for this as an actual feature would instead save the previous positions of every icon (not to a generic tempX variable) and involve a "save state" and "restore state", and possibly some "save slots/profiles". Or, following the Ext JS "stateful" concept from Ext.state.Provider, which can, for example, save icon positions across different connections or accounts (cookie/browser-wide or server/account-wide).

    Well, if you want to discuss more about this specific topic, I'd ask you to do so on a new thread so this thread does not get too misleading and we focus on the reported issue. Hope you understand and that the talk above makes sense to you. :)
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello FabrÃ*cio,
    yes, I understand. I'm a fan of simple, straightforward solutions and suggestion #1558 works for now, so I would keep this approach. In fact, I already implemented scenario which saves and restores desktop state per user, so, as far as I'm concerned, I'm satisfied.

    Thank you very much for your help.

    Dan
  6. #6
    Hello Dan!

    We've just applied the fix for this issue in Ext.NET code! Next release, Ext.NET 4.5.0, will include it.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Hello FabrÃ*cio,
    I will test it once Ext.NET 4.5.0 is installed on our server.

    Thank you for your help.

    Dan
  8. #8
    Hello FabrÃ*cio, tested and works as expected. Thank you for your assistance.

    Dan
  9. #9
    Hello Dan, we appreciate the feedback, and we're happy the fix worked for you!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Dynamic desktop shortcuts
    By stefanos in forum 4.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 29, 2016, 10:48 PM
  2. Arrange Controls in a Panel with Horizontal Sapcing
    By georgegarvasis in forum 2.x Help
    Replies: 1
    Last Post: Nov 06, 2013, 1:55 PM
  3. Desktop Shortcuts
    By fabiomarcoseuzebio in forum 1.x Help
    Replies: 1
    Last Post: Sep 06, 2012, 2:23 PM
  4. [CLOSED] Center desktop shortcuts on desktop
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 15, 2011, 6:49 AM
  5. Adding shortcuts on desktop
    By joao.msdn in forum 1.x Help
    Replies: 1
    Last Post: Apr 13, 2010, 9:06 AM

Tags for this Thread

Posting Permissions