The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[CLOSED] InfoPanel animation

  1. #1

    [CLOSED] InfoPanel animation

    Hello support team,
    when using InfoPanel animation, the message first appears for a very short time at the starting position (flashes at the top of the viewport) and only then the animation starts. Please take a look at the test case:

    @using Ext.Net;
    @using Ext.Net.MVC;
    
    @{
        ViewBag.Title = "InfoPanel";
        Layout = null;
        var X = Html.X();
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Ext.NET MVC Test Case</title>
    
        <script type="text/javascript">
    
            var showInfo = function (ui) {
                var ts = getTimestamp();
                var cfgInfoPanel = {
                    title: "UI " + ui.charAt(0).toUpperCase() + ui.slice(1),
                    html: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                    ui: ui,
                    alignmentEl: App._nelisViewport_CENTER.el,
                    alignment: 't-t',
                    maxWidth: 400,
                    animateShow: function () {
                        this.el.animate({
                            duration: 2000,
                            easing: "backIn",
                            from: {
                                opacity: 0,
                                top: this.alignmentEl.getY()
                            },
                            to: {
                                opacity: 1,
                                top: this.alignmentEl.getY() + 25
                            }
                        });
                    },
                    animateHide: function () {
                        this.el.animate({
                            duration: 2000,
                            easing: "backOut",
                            from: {
                                opacity: 1,
                                top: this.alignmentEl.getY() + 25
                            },
                            to: {
                                opacity: 0,
                                top: this.alignmentEl.getY() + 50
                            },
                            listeners: {
                                afteranimate: function (anim) {
                                    var cfg = anim.target.target.el.component.config;
                                    var cfgLog = {
                                        queue: "messagelog",
                                        ui: ui,
                                        tag: ui,
                                        pinned: true,
                                        showPin: true
                                    };
    
                                    cfgLog.html = cfg.html + "<p style='font-size: smaller;'>" + ts + "</p>";
                                    cfgLog.title = cfg.title;
    
                                    Ext.Msg.info(cfgLog);
    
                                    updateLogTotal();
                                }
                            }
                        });
                    }
                }
    
                Ext.Msg.info(cfgInfoPanel);
            }
    
            var getTimestamp = function () {
                var date = new Date();
                return ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2) + ":" + ("0" + date.getSeconds()).slice(-2);
            }
    
            var updateLogTotal = function (num) {
                Ext.getCmp("MessageLogTotal").setValue("Total Messages: " + Ext.net.InfoPanelQueue.queues["messagelog"].getItems().length);
            }
    
        </script>
    </head>
    
    <body>
        @(Html.X().ResourceManager())
    
        @(Html.X().Viewport()
            .ID("_nelisViewport")
            .Layout(LayoutType.Border)
            .Items(
                Html.X().Panel()
                    .ID("_nelisViewport_TOP")
                    .Region(Region.North)
                    .Items(X.Toolbar().Items(X.Button().ID("version").Text("Toolbar Button"))),
                Html.X().Panel()
                    .ID("_nelisViewport_LEFT")
                    .Region(Region.West)
                    .Width(180)
                    .MaxWidth(300)
                    .Layout(LayoutType.Fit)
                    .Title("Allegro Menu"),
                Html.X().Panel()
                    .ID("_nelisViewport_CENTER")
                    .Region(Region.Center)
                    .BodyPadding(12)
                    .Items(
    
                        X.Container().Layout(LayoutType.Column).Items(
                            X.Button().Text("Primary").Icon(Icon.Application).Width(100).Handler("showInfo('primary')"),
                            X.Button().Text("Info").Icon(Icon.Information).Width(100).MarginSpec("0 0 0 10").Handler("showInfo('info')"),
                            X.Button().Text("Success").Icon(Icon.Accept).Width(100).MarginSpec("0 0 0 10").Handler("showInfo('success')"),
                            X.Button().Text("Danger").Icon(Icon.Exclamation).Width(100).MarginSpec("0 0 0 10").Handler("showInfo('danger')"),
                            X.Button().Text("Warning").Icon(Icon.Error).Width(100).MarginSpec("0 0 0 10").Handler("showInfo('warning')")
                        ),
    
                        X.Panel().ID("log").Flex(1).OverflowY(Overflow.Auto).LayoutConfig(new VBoxLayoutConfig() { Align = VBoxAlign.Stretch })
                            .Title("Info Panel")
                            .Width(300)
                            .Height(500)
                            .MarginSpec("20 0 0 0")
                            .AlwaysOnTop(true)
                            .DockedItems(
                                X.Toolbar().Dock(Dock.Top).Items(
                                    X.DisplayField().ID("MessageLogTotal").Text("Total Messages: 0").Flex(1)
                                )
                            )
                            .Bin(
                                X.InfoPanelQueue().ID("messagelog").Name("messagelog").Container("#{log}").Sliding(false).AddToEnd(false)
                                    .Listeners(l => l.Remove.Handler = "updateLogTotal();")
                            )
                    )
            )
        )
    </body>
    </html>
    
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.getCmp("version").setText("Ext JS " + Ext.getVersion().version + "&nbsp;&nbsp;|&nbsp;&nbsp;" + "Ext.NET " + Ext.net.Version);
        });
    </script>
    Am I missing something or do I not use it correctly?

    Thank you for your help.

    Kind regards
    Dan
    Last edited by fabricio.murta; Jul 27, 2018 at 10:04 PM.
  2. #2
    Hello Dan!

    When I was writing you a sample with animation, I was also expecting this to happen, but when I hit 'play' on the example, it just didn't happen. Probably because my browser handled it too fast to see the flashing dialog. That would be just natural and expected, as the animation begins -after- the component has been drawn.

    To properly handle this, just set the initial (pre-rendered) opacity style of the pop up to 0.

    Then you can even remove the opacity: 0 from the from part of the animation of the animateShow function.

    Just add this to the cfgInfoPanel config object:

    style: 'opacity: 0',
    And it shouldn't blink on the page when you display it.

    Interesting that I tried it in at least chrome and edge, and neither did this 'blink' effect if I left the opacity setting just in the animation object. But anyway, using the initial pre-rendering style should be the right way to go with it.

    As for the hide animation, it does not really need the opacity: 1 in its from part as well. The notification window will already be at opacity 1 when we want to dismiss it -and- in case you just want it to vanish before show animation ended (where it could end up with an opacity between 0 and 1, but not 1), it wouldn't "blink opaque" before going out, but just disappear from its current opacity level.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabrício,
    thank you for your assistance. As usual, your entry is highly professional and the proposed solution works like a charm. The thread may be closed.

    Kind regards
    Dan
  4. #4
    Hello Dan!

    Glad it helped, and thank you for the feedback! We really appreciate your kind words.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] InfoPanel alignment
    By NewLink in forum 4.x Premium Help
    Replies: 8
    Last Post: Jul 25, 2018, 3:30 AM
  2. Replies: 1
    Last Post: Dec 15, 2015, 2:18 PM
  3. Replies: 1
    Last Post: Feb 20, 2015, 6:38 PM
  4. [CLOSED] InfoPanel using QueueName not working
    By exe in forum 2.x Premium Help
    Replies: 3
    Last Post: Nov 26, 2014, 3:26 PM
  5. [CLOSED] Align InfoPanel to element on server side?
    By rthiney in forum 2.x Premium Help
    Replies: 3
    Last Post: Jul 03, 2014, 1:12 PM

Posting Permissions