Widgets to Support Fullscreen Mode

[awashbrook]

Widgets to support full screen mode.

Want something similar to full screen edit mode "Zen Mode" in github. Although obviously Zen mode takes away distractions, whereas we imagine people wanting to quickly zoom into widget chart, maxing out available space in browser window...in fact gmail fullscreen for composing introduced over last year may be the best user experience to kep in mind!

We may be able to leverage jquery fullscreen, here is one tutorial: http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/

Full screen icon would naturally be offered next to existing gear icon for editing.

[andyperlitch]

+1, perhaps put together a PR when you get a chance? I'd still like to tackle #11 first.

[awashbrook]

Thanks Andy, yes we expect to take up this work when it becomes priority over the next month. Wanted to get it in the backlog as it was part of our discussion in our call.

[cm325]

:+1: this would be really nice to be able to see details for complex charts-

[awashbrook]

Exactly my use case @cm325

@andyperlitch been quiet the last few weeks preparing our dashboard for production release: we have established a private dashboard "webapp" repo, https://github.com/thomsonreuters/, and I have been working on deployment automation and configuration with puppet, etc...this stuff is all quite proprietary to our environments obviously!

Expect to be back on dashboard product functionality early July...first pull request will be for the "clone widget" functionality, which I need to add to your backlog.

On Fri, Jun 13, 2014 at 8:22 PM, chris marx notifications@github.com wrote:

[image: :+1:] this would be really nice to be able to see details for complex charts-

— Reply to this email directly or view it on GitHub https://github.com/DataTorrent/malhar-angular-dashboard/issues/48#issuecomment-46050273 .

[andyperlitch]

removing this from 1.0.0. PRs welcome.

[awashbrook]

Sorry this missed the boat, will try and progress if I can before too much longer :)

On Friday, 13 March 2015, Andy Perlitch notifications@github.com wrote:

removing this from 1.0.0. PRs welcome.

— Reply to this email directly or view it on GitHub https://github.com/DataTorrent/malhar-angular-dashboard/issues/48#issuecomment-79204327 .

[robertmazzo]

I have a beta on the Widget Maximize/Restore dashboard feature. It's not "Zen" mode, but it's a start for maximizing/restoring a widget container. Do I post my changes as a Pull Request ? I'm not well-versed in GitHub matters, that's why I ask.

If anyone's interested, I'll email you the code details. Just comment here, if that's appropriate.

[awashbrook]

That's great @robertmazzo, just fork this repo using button on the top right and push your change up for us to check it out, later we can convert to a PR.

[awashbrook]

Hi @robertmazzo still interested in this feature, any chance you still have your code. Happy to exchange via email?

[robertmazzo]

I'll dig that up and post it. thx.Bob

  From: Andy Washbrook <notifications@github.com>

To: DataTorrent/malhar-angular-dashboard malhar-angular-dashboard@noreply.github.com Cc: Bob Mazzo robertmazzo@yahoo.com Sent: Friday, April 15, 2016 5:00 AM Subject: Re: [DataTorrent/malhar-angular-dashboard] Widgets to Support Fullscreen Mode (#48)

Hi @robertmazzo still interested in this feature, any chance you still have your code. Happy to exchange via email? — You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub

[awashbrook]

Very good of you @robertmazzo, much appreciated!

On Fri, Apr 15, 2016 at 6:08 PM, Bob Mazzo notifications@github.com wrote:

I'll dig that up and post it. thx.Bob

From: Andy Washbrook notifications@github.com To: DataTorrent/malhar-angular-dashboard < malhar-angular-dashboard@noreply.github.com> Cc: Bob Mazzo robertmazzo@yahoo.com Sent: Friday, April 15, 2016 5:00 AM Subject: Re: [DataTorrent/malhar-angular-dashboard] Widgets to Support Fullscreen Mode (#48)

Hi @robertmazzo still interested in this feature, any chance you still have your code. Happy to exchange via email? — You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/DataTorrent/malhar-angular-dashboard/issues/48#issuecomment-210549442

[robertmazzo]

Hi Andy, I don't know how much this will help, really, as it's very focused on the Kendo UI lib as well. In other words, I attempt to first MAXIMIZE the Malhar widget, then then Kendo component within it (i.e. treelist, grid, chart, etc.). So you will find the $scope.maxResizer anon function, which takes care of both the MAX and RESTORE options.

In the dashboard widget-header class I just added a span with an icon :

         <div class="widget-header panel-heading">                   
                    <h3 class="panel-title">
                      <span class="widget-title" ng-dblclick="editTitle(widget)" ng-hide="widget.editingTitle">{{widget.title}}</span>
                     <form action="" class="widget-title" ng-show="widget.editingTitle" ng-submit="saveTitleEdit(widget)">
                         <input type="text" ng-model="widget.title" class="form-control">
                     </form>                        
                     <span title="remove" ng-click="removeWidget(widget);" class="glyphicon glyphicon-remove" ng-if="!options.hideWidgetClose"></span>
                     <span title="config" ng-click="openWidgetSettings(widget);" class="glyphicon glyphicon-cog" ng-if="!options.hideWidgetSettings"></span>

                    <!-- MAXIMIZE/RESTORE OPTION - if gadgetConfigured is true-->
                    <span title="{{widget.maximized ? 'restore' : 'maximize'}}" ng-show="widget.gadgetConfigured" ng-click="maxResizer($event)" class="glyphicon" ng-class="{'glyphicon-fullscreen': !widget.maximized, 'glyphicon-collapse-down': widget.maximized}" ></span>

                    <!-- COLLAPSE/RESTORE OPTION -->
                    <span title="collapse" ng-show="widget.gadgetConfigured" ng-click="widget.contentStyle.display = (widget.contentStyle.display === 'none' ? 'block' : 'none')" class="glyphicon" ng-class="{'glyphicon-plus': widget.contentStyle.display === 'none', 'glyphicon-minus': widget.contentStyle.display !== 'none' }"></span>

                </h3>
            </div>

Mal1.txt

[awashbrook]

That gave me a fantastic head start, thanks again @robertmazzo

Was able to fork and branch from malhar 1.0.1, the version I currently consume: https://github.com/awashbrook/malhar-angular-dashboard/tree/bobs-maximize

Incorporated your code stripping out the kendo specific code and can see maximize working for both width and height, in the malhar demos :)

It would be great to fix the restore function, which errors with undefined widget.fixedSize at https://github.com/awashbrook/malhar-angular-dashboard/blob/bobs-maximize/src/components/directives/widget/DashboardWidgetCtrl.js#L117

How far were you able to investigate saving the ht/width to scope, as per your own comments?

[robertmazzo]

Oh darn. The"fixedSize" property has to be on the Widget definitions. So sorry.

Bob

From:"Andy Washbrook" notifications@github.com Date:Sat, Apr 16, 2016 at 14:30 Subject:Re: [DataTorrent/malhar-angular-dashboard] Widgets to Support Fullscreen Mode (#48)

That gave me a fantastic head start, thanks again @robertmazzo

Was able to fork and branch from malhar 1.0.1, the version I currently consume: https://github.com/awashbrook/malhar-angular-dashboard/tree/bobs-maximize

Incorporated your code stripping out the kendo specific code and can see maximize working for both width and height, in the malhar demos :)

It would be great to fix the restore function, which errors with undefined widget.fixedSize at https://github.com/awashbrook/malhar-angular-dashboard/blob/bobs-maximize/src/components/directives/widget/DashboardWidgetCtrl.js#L117

How far were you able to investigate saving the ht/width to scope, as per your own comments?

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub

[awashbrook]

Thanks Bob :) Your fixedSize approach is now working with malhar ‘resizable’ demo widget:

      {
        name: 'resizable',
        templateUrl: 'app/template/resizable.html',
        attrs: {
          class: 'demo-widget-resizable'
        },
        size: {
          width: '350px',
          height: '400px'
        },
        fixedSize: {
          width: '350',
          height: '400'
        }
      },

This allows us to maximize successfully and then restore to a statically pre-configured size. Since this results in somewhat redundant configuration a dynamic solution would be to save the original width and height in the widget scope while maximizing. Allow me to take a look at this :)

[robertmazzo]

That's Andy. And yes indeed, the optimum approach would be as you said - dynamically save the resized attribute values.

Best,

Bob

From:"Andy Washbrook" notifications@github.com Date:Sun, Apr 17, 2016 at 2:52 PM Subject:Re: [DataTorrent/malhar-angular-dashboard] Widgets to Support Fullscreen Mode (#48)

Thanks Bob :) Your fixedSize approach is now working with malhar ‘resizable’ demo widget:

{ name: 'resizable', templateUrl: 'app/template/resizable.html', attrs: { class: 'demo-widget-resizable' }, size: { width: '350px', height: '400px' }, fixedSize: { width: '350', height: '400' } },

This allows us to maximize successfully and then restore to a statically pre-configured size. Since this results in somewhat redundant configuration a dynamic solution would be to save the original width and height in the widget scope while maximizing. Allow me to take a look at this :)

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub