diff options
author | Thomas Steur <thomas.steur@googlemail.com> | 2014-04-11 09:50:55 +0400 |
---|---|---|
committer | Thomas Steur <thomas.steur@googlemail.com> | 2014-04-14 08:39:08 +0400 |
commit | b2638d9e9ce07b7d0c594ad4450ae53c75c600e8 (patch) | |
tree | 4daa2dbf98a8d1e11859a521397941a3ed2f13ce /plugins/MultiSites/angularjs | |
parent | ce5abb89334f31d85994e0dda0807e2427e57b78 (diff) |
refs #4985 Improve Dashboard / Datatables UI
refs #4985 Improve Dashboard / Datatables UI
various UI fixes and cleaner datatables
some more ui tweaks
this should make sure to related report text is centered when not displayed within dashboard
darker arrow icon
if there are no footer icons, do nothing
some fixes for the ui improvments, especially annotations related
there should be still a gap when not displayed in dashboard
save the expanded footer state to make sure users who often use the footer do not have to open it each time and also makes sure the footer will be still expanded after reloading the widget etc
move related report closer to the actual report
make sure all annotation pins are in one line and positioned correct
fix issues when dashboard widget is maximised. Annotations were not positioned correct and drawer was displayed
when there is no data or no paging, do not display paging or search
display all websites dashboard similar to other reports
do not display column documentation in dashboard but in other reports
show title on drawer hover
hide related reports if there are no related reports, makes the footer looks better when widgetized
make sure the annotations are positioned correct if opened within a widgetized report transition
a fix for firefox and make sure annotation pins do not jump in dashboard area when loading message is displayed
only on firefox and only within the first two columns the arrow was not displayed fully although the css of the image and parent nodes is the same. this workaround makes sure the arrow of the drawer is always fully visible on firefox
move annotations 6px to the left to be displayed as before
Diffstat (limited to 'plugins/MultiSites/angularjs')
-rw-r--r-- | plugins/MultiSites/angularjs/dashboard/dashboard.html | 16 | ||||
-rw-r--r-- | plugins/MultiSites/angularjs/dashboard/dashboard.less | 9 | ||||
-rw-r--r-- | plugins/MultiSites/angularjs/site/site.html | 6 |
3 files changed, 23 insertions, 8 deletions
diff --git a/plugins/MultiSites/angularjs/dashboard/dashboard.html b/plugins/MultiSites/angularjs/dashboard/dashboard.html index 6c1074b336..dd7149d360 100644 --- a/plugins/MultiSites/angularjs/dashboard/dashboard.html +++ b/plugins/MultiSites/angularjs/dashboard/dashboard.html @@ -12,25 +12,25 @@ <table id="mt" class="dataTable" cellspacing="0"> <thead> <tr> - <th id="names" class="label" ng-click="sortBy('label')"> + <th id="names" class="label" ng-click="sortBy('label')" ng-class="{columnSorted: 'label' == predicate}"> <span class="heading">{{ 'General_Website'|translate }}</span> <span ng-class="{multisites_asc: !reverse && 'label' == predicate, multisites_desc: reverse && 'label' == predicate}" class="arrow"></span> </th> - <th id="visits" class="multisites-column" ng-click="sortBy('nb_visits')"> + <th id="visits" class="multisites-column" ng-click="sortBy('nb_visits')" ng-class="{columnSorted: 'nb_visits' == predicate}"> <span class="heading">{{ 'General_ColumnNbVisits'|translate }}</span> <span ng-class="{multisites_asc: !reverse && 'nb_visits' == predicate, multisites_desc: reverse && 'nb_visits' == predicate}" class="arrow"></span> </th> - <th id="pageviews" class="multisites-column" ng-click="sortBy('nb_pageviews')"> + <th id="pageviews" class="multisites-column" ng-click="sortBy('nb_pageviews')" ng-class="{columnSorted: 'nb_pageviews' == predicate}"> <span class="heading">{{ 'General_ColumnPageviews'|translate }}</span> <span ng-class="{multisites_asc: !reverse && 'nb_pageviews' == predicate, multisites_desc: reverse && 'nb_pageviews' == predicate}" class="arrow"></span> </th> - <th ng-if="displayRevenueColumn" id="revenue" class="multisites-column" ng-click="sortBy('revenue')"> + <th ng-if="displayRevenueColumn" id="revenue" class="multisites-column" ng-click="sortBy('revenue')" ng-class="{columnSorted: 'revenue' == predicate}"> <span class="heading">{{ 'General_ColumnRevenue'|translate }}</span> <span ng-class="{multisites_asc: !reverse && 'revenue' == predicate, multisites_desc: reverse && 'revenue' == predicate}" class="arrow"></span> </th> - <th id="evolution" colspan="{{ showSparklines ? 2 : 1 }}"> + <th id="evolution" colspan="{{ showSparklines ? 2 : 1 }}" ng-class="{columnSorted: evolutionSelector == predicate}"> <span class="arrow" ng-class="{multisites_asc: !reverse && evolutionSelector == predicate, multisites_desc: reverse && evolutionSelector == predicate}"></span> <span class="evolution" ng-click="sortBy(evolutionSelector)"> {{ 'MultiSites_Evolution'|translate }}</span> @@ -69,6 +69,7 @@ date-sparkline="dateSparkline" show-sparklines="showSparklines" metric="predicate" + ng-class-odd="'columnodd'" display-revenue-column="displayRevenueColumn" ng-repeat="website in model.sites | orderBy:predicate:reverse | multiSitesGroupFilter:model.getCurrentPagingOffsetStart():model.pageSize"> </tr> @@ -84,6 +85,11 @@ </td> </tr> + <tr ng-if="!hasSuperUserAccess"> + <td colspan="8"> + <br/> + </td> + </tr> <tr> <td colspan="8" class="site_search"> <input type="text" diff --git a/plugins/MultiSites/angularjs/dashboard/dashboard.less b/plugins/MultiSites/angularjs/dashboard/dashboard.less index 09388bd8e3..0638e1315a 100644 --- a/plugins/MultiSites/angularjs/dashboard/dashboard.less +++ b/plugins/MultiSites/angularjs/dashboard/dashboard.less @@ -80,6 +80,15 @@ cursor: pointer; margin-right: 0px; } + + tr.columnodd:hover td, tr.columnodd td { + background: #F2F2F2 !important; + } + + tr:hover td { + background: #FFF !important; + } + tr.group { font-weight: bold; height: 30px; diff --git a/plugins/MultiSites/angularjs/site/site.html b/plugins/MultiSites/angularjs/site/site.html index a20c6bb34e..2c6ab30c3d 100644 --- a/plugins/MultiSites/angularjs/site/site.html +++ b/plugins/MultiSites/angularjs/site/site.html @@ -22,9 +22,9 @@ <td ng-if="period != 'range'" style="width:170px;"> <div class="visits" ng-if="!website.isGroup"> - <span ng-show="parseInt(website[evolutionMetric]) > 0"><img src="plugins/MultiSites/images/arrow_up.png" alt="" /> <strong style="color: green;">{{ website[evolutionMetric] }} </strong></span> - <span ng-show="parseInt(website[evolutionMetric]) == 0"><img src="plugins/MultiSites/images/stop.png" alt="" /> <strong>{{ website[evolutionMetric] }}</strong></span> - <span ng-show="parseInt(website[evolutionMetric]) < 0"><img src="plugins/MultiSites/images/arrow_down.png" alt="" /> <strong style="color: red;">{{ website[evolutionMetric] }} </strong></span> + <span ng-show="parseInt(website[evolutionMetric]) > 0"><img src="plugins/MultiSites/images/arrow_up.png" alt="" /> <span style="color: green;">{{ website[evolutionMetric] }} </span></span> + <span ng-show="parseInt(website[evolutionMetric]) == 0"><img src="plugins/MultiSites/images/stop.png" alt="" /> <span>{{ website[evolutionMetric] }}</span></span> + <span ng-show="parseInt(website[evolutionMetric]) < 0"><img src="plugins/MultiSites/images/arrow_down.png" alt="" /> <span style="color: red;">{{ website[evolutionMetric] }} </span></span> </div> </td> |