Opened 5 years ago

Closed 3 years ago

#555 closed Bug (fixed)

UI: Widgets are too wide in dashboard:"goals" and "advanced" table view should be disabled in the dashboard

Reported by: matt Owned by: SteveG
Priority: low Milestone: Piwik 1.2
Component: UI - UX (AngularJS, twig, less) Keywords:
Cc: Sensitive: no

Description (last modified by matt)

In the dashboard, currently the icons to show the "goal table" and the "advanced table" are shown; however when clicked, the table tries to display 5+ columns but there is not enough space, hence dashboard looks bad.

  • disable icon for "advanced" and "goal" view in dashboard
  • make sure all core widgets only have two columns. For example, the Actions widget should only show two columns; it currently shows "label, pageviews, unique pageviews" but could be "label, pageviews"

Optional: a link "view full report" could be displayed at the bottom of the widget, the link would open in ajax the report containing this widget; this requires:

  • widget to know which report they appear on
  • set the anchor the right widget in the report, in case the widget appears below the fold

Change History (20)

comment:1 Changed 5 years ago by matt (mattab)

  • Description modified (diff)
  • Summary changed from "goals" and "advanced" table view should be disabled in the dashboard to Widgets are too wide in dahsboard:"goals" and "advanced" table view should be disabled in the dashboard

comment:2 Changed 5 years ago by matt (mattab)

  • Priority changed from major to critical

comment:3 Changed 5 years ago by vipsoft (robocoder)

  • Summary changed from Widgets are too wide in dahsboard:"goals" and "advanced" table view should be disabled in the dashboard to UI: Widgets are too wide in dashboard:"goals" and "advanced" table view should be disabled in the dashboard

A similar visual problem (from #649) can be created when the user increases the text size in the browser.

comment:4 Changed 5 years ago by domtop

comment:5 Changed 5 years ago by koteiko

comment:6 Changed 4 years ago by matt (mattab)

  • Milestone changed from 4 - Piwik 1.0 - Stable release to Features requests - after Piwik 1.0
  • Sensitive unset

comment:7 Changed 4 years ago by matt (mattab)

  • Priority changed from critical to low

comment:8 Changed 4 years ago by SteveG (sgiehl)

What about showing this "oversized" widgets in a dialog with full size?
This dialog could be opened on doubleclick (or with a new fullsize-icon or so).

Here a small example how this could be done with a litte jquery code:

$('.col div.sortable').bind('dblclick', function(){
	var mydialog = $(this);
	mydialog.before('<div id="placeholder"> </div>');
	mydialog.dialog({
		title: '',
		bgiframe: true,
		modal: true,
		width: 'auto',
		position: ['center', 'center'],
		resizable: true,
		autoOpen: true,
		close: function(event, ui) {
			mydialog.dialog("destroy");
			$('#placeholder').replaceWith(mydialog);
			mydialog.removeAttr('style');
		}
	});
});

(just execute in firebug to test)

comment:9 Changed 4 years ago by matt (mattab)

Your proposal is interesting! Maybe we could add a 'full screen' icon next to the close icon in the widget header bar to open this view? this would be a good compromise. thoughts?

comment:10 Changed 4 years ago by SteveG (sgiehl)

  • Milestone changed from Features requests - after Piwik 1.0 to 5 - Piwik 1.1
  • Owner set to SteveG

Ok... I'm nearly done with this task, but I need the icon to finish it. Matt, could you attach or send me an icon I can use. thx

comment:11 Changed 4 years ago by matt (mattab)

ouch sorry I don't have this in hand, can you make up something very light (like the close button) based on the full screen icon used in country map? if you need help with this, please send me an email :)

comment:12 Changed 4 years ago by SteveG (sgiehl)

(In [3043]) refs #555 added icon to open widgets in a dialog
icon might not be the best one, if anyone got a better one, please replace

comment:13 Changed 4 years ago by SteveG (sgiehl)

(In [3044]) refs #555 added icon title to language

comment:14 Changed 4 years ago by SteveG (sgiehl)

  • Resolution set to fixed
  • Status changed from new to closed

comment:15 Changed 3 years ago by matt (mattab)

  • Resolution fixed deleted
  • Status changed from closed to reopened

This is a really cool new UI improvements!! Very nice. Seeing tables with too many columns was always an issue, there is now a good solution for it.

I reopened because I have found a few (non critical) bugs with it, and some feedback

  • When looking at the Live! plugin, click on Visitor Log. The page loads correctly in the background, but it should close the maximised widget as well.
  • when widget maximised, maybe remove the "drag" cursor on the widget title (and restore when widget back in dashboard)
  • a click outside the maximised widget, on the grey background, should close the widget
  • Bug in Internet explorer 8:
    • In the Live! widget, the link 'View detailed visitor log' doesn't work (ie. it doesn't load in the background like it does with FF)
    • Export as image doesn't work
    • Also exporting data in other formats trigger JS errors
      Unexpected call to method or property access.
      Line: 73
      Char: 24
      Code: 0
      

On a different note, it would be nice to disable the truncation in long labels when in maximised view, but that might be too tricky... we should really review truncation all together, but Anthon investigated and it seemed difficult.

comment:16 Changed 3 years ago by matt (mattab)

(In [3346]) Small modif to the icon Refs #555

comment:17 Changed 3 years ago by SteveG (sgiehl)

Thanks for the review. I will have a look at that within the next view days...

comment:18 Changed 3 years ago by matt (mattab)

SteveG, did you have a chance to look at the bugs?

I think only 2 things are important: close the popover on click outside the box, and close the popover when click on broadcast.propage - thoughts?

comment:19 Changed 3 years ago by SteveG (sgiehl)

I already took at look at tihs. It isn't as easy as I thought. I will try to fix that as soon as possible, but currently I'm busy with another project, which will take some more time.

comment:20 Changed 3 years ago by matt (mattab)

  • Resolution set to fixed
  • Status changed from reopened to closed

I think it's fine like this :) good stuff!

Note: See TracTickets for help on using tickets.