From f1cc58599cd00640412d93cdb6def9d452716b9d Mon Sep 17 00:00:00 2001
From: Eike Cochu <eike@cochu.com>
Date: Sat, 12 Mar 2016 13:46:05 +0100
Subject: [PATCH] added popover directive, removed unused css rules
added bsPopover directive
added popover to explorer topics
removed unused css rules
merged ellipsis and ellipsize
removed unused helpers
added scrollbar to topics list in explorer
---
vipra-ui/app/html/articles/index.html | 2 +-
vipra-ui/app/html/articles/show.html | 2 +-
vipra-ui/app/html/explorer.html | 44 ++++++-----
vipra-ui/app/html/index.html | 4 +-
vipra-ui/app/html/topics/articles.html | 90 +++++++++++++--------
vipra-ui/app/html/topics/index.html | 2 +-
vipra-ui/app/html/topics/show.html | 8 --
vipra-ui/app/js/controllers.js | 75 ++++++++++++++----
vipra-ui/app/js/directives.js | 21 ++++-
vipra-ui/app/js/helpers.js | 9 ---
vipra-ui/app/less/app.less | 103 +++----------------------
11 files changed, 173 insertions(+), 187 deletions(-)
diff --git a/vipra-ui/app/html/articles/index.html b/vipra-ui/app/html/articles/index.html
index 49ab0bc9..2aae37d4 100644
--- a/vipra-ui/app/html/articles/index.html
+++ b/vipra-ui/app/html/articles/index.html
@@ -23,7 +23,7 @@
</div>
<div class="row">
<div class="col-md-12">
- <pagination total="articlesTotal" page="page" limit="limit" change="changePage" />
+ <pagination total="articlesTotal" page="page" limit="limit" />
</div>
</div>
<div class="row">
diff --git a/vipra-ui/app/html/articles/show.html b/vipra-ui/app/html/articles/show.html
index 3f335dee..8666ede8 100644
--- a/vipra-ui/app/html/articles/show.html
+++ b/vipra-ui/app/html/articles/show.html
@@ -51,7 +51,7 @@
<div class="col-md-12">
<h3>Similar articles</h3>
<ul class="list-unstyled" ng-attr-start="{{(page-1)*limit+1}}">
- <li ng-repeat="simArticle in article.similarArticles" class="ellipsize">
+ <li ng-repeat="simArticle in article.similarArticles" class="ellipsis">
<small class="text-muted percent-align" ng-bind-template="({{((1-simArticle.divergence)*100).toFixed(0)}}%)"></small>
<a ui-sref="articles.show({id: simArticle.article.id})" ng-attr-title="{{::simArticle.article.title}}" ng-bind="::simArticle.article.title"></a>
</li>
diff --git a/vipra-ui/app/html/explorer.html b/vipra-ui/app/html/explorer.html
index 8734f3db..d41fb526 100644
--- a/vipra-ui/app/html/explorer.html
+++ b/vipra-ui/app/html/explorer.html
@@ -19,7 +19,7 @@
</div>
<ul class="list-unstyled topic-choice">
<li ng-repeat="topic in topics | orderBy:opts.sorttopics | filter:search">
- <div class="checkbox checkbox-condensed" ng-attr-title="{{::topic.name}}" ng-class="{selected:opts.selectedTopics[topic.id]}">
+ <div class="checkbox checkbox-condensed" ng-class="{selected:opts.selectedTopics[topic.id]}" bs-popover popover-title="{{::topic.name}}" popover-html="{{::topicPopover(topic)}}">
<input type="checkbox" ng-model="opts.selectedTopics[topic.id]" ng-attr-id="{{::topic.id}}">
<label class="check" ng-attr-for="{{::topic.id}}">
<span class="ellipsis" ng-bind="::topic.name"></span>
@@ -30,27 +30,29 @@
</ul>
</div>
<div class="center message-container">
- <div class="topbar">
- <small>Values:</small>
- <div class="btn-group">
- <a class="btn btn-sm btn-default" ng-model="opts.seqstyle" bs-radio="'absolute'">Absolute</a>
- <a class="btn btn-sm btn-default" ng-model="opts.seqstyle" bs-radio="'relative'">Relative</a>
- </div>
-
- <small>Chart:</small>
- <div class="btn-group">
- <a class="btn btn-sm btn-default" ng-model="opts.chartstyle" bs-radio="'areaspline'">Area</a>
- <a class="btn btn-sm btn-default" ng-model="opts.chartstyle" bs-radio="'spline'">Line</a>
- </div>
-
- <small>Stacking:</small>
- <div class="btn-group">
- <a class="btn btn-sm btn-default" ng-model="opts.chartstack" bs-radio="'none'">None</a>
- <a class="btn btn-sm btn-default" ng-model="opts.chartstack" bs-radio="'normal'">Value</a>
- <a class="btn btn-sm btn-default" ng-model="opts.chartstack" bs-radio="'percent'">Percent</a>
+ <div class="wrapper">
+ <div class="topbar">
+ <small>Values:</small>
+ <div class="btn-group">
+ <a class="btn btn-sm btn-default" ng-model="opts.seqstyle" bs-radio="'absolute'">Absolute</a>
+ <a class="btn btn-sm btn-default" ng-model="opts.seqstyle" bs-radio="'relative'">Relative</a>
+ </div>
+
+ <small>Chart:</small>
+ <div class="btn-group">
+ <a class="btn btn-sm btn-default" ng-model="opts.chartstyle" bs-radio="'areaspline'">Area</a>
+ <a class="btn btn-sm btn-default" ng-model="opts.chartstyle" bs-radio="'spline'">Line</a>
+ </div>
+
+ <small>Stacking:</small>
+ <div class="btn-group">
+ <a class="btn btn-sm btn-default" ng-model="opts.chartstack" bs-radio="'none'">None</a>
+ <a class="btn btn-sm btn-default" ng-model="opts.chartstack" bs-radio="'normal'">Value</a>
+ <a class="btn btn-sm btn-default" ng-model="opts.chartstack" bs-radio="'percent'">Percent</a>
+ </div>
</div>
+ <div class="chart" id="topic-seq" highcharts="topicSeq"></div>
+ <div class="message text-muted" ng-show="!topicsSelected">No topic selected</div>
</div>
- <div class="chart" id="topic-seq" highcharts="topicSeq"></div>
- <div class="message text-muted" ng-show="!topicsSelected">No topic selected</div>
</div>
</div>
\ No newline at end of file
diff --git a/vipra-ui/app/html/index.html b/vipra-ui/app/html/index.html
index 060ae53d..77850235 100644
--- a/vipra-ui/app/html/index.html
+++ b/vipra-ui/app/html/index.html
@@ -13,7 +13,7 @@
<div class="col-md-8 text-center">
<h4>Latest articles</h4>
<ul class="list-unstyled">
- <li class="ellipsize" ng-repeat="article in latestArticles">
+ <li class="ellipsis" ng-repeat="article in latestArticles">
<a ui-sref="articles.show({id:article.id})" ng-bind="article.title"></a>
</li>
</ul>
@@ -21,7 +21,7 @@
<div class="col-md-4 text-center">
<h4>Latest topics</h4>
<ul class="list-unstyled">
- <li class="ellipsize" ng-repeat="topic in latestTopics">
+ <li class="ellipsis" ng-repeat="topic in latestTopics">
<a ui-sref="topics.show({id:topic.id})" ng-bind="topic.name"></a>
</li>
</ul>
diff --git a/vipra-ui/app/html/topics/articles.html b/vipra-ui/app/html/topics/articles.html
index 8f52eb09..363190a7 100644
--- a/vipra-ui/app/html/topics/articles.html
+++ b/vipra-ui/app/html/topics/articles.html
@@ -1,38 +1,62 @@
<div class="container" ng-cloak ng-hide="$state.current.name !== 'topics.show.articles'">
- <div class="page-header">
- <h1 ng-bind-template="Articles for topic '{{::topic.name}}'"></h1>
- <table class="item-actions">
- <tr>
- <td>
- <a class="btn btn-default" ui-sref="^">Back</a>
- </td>
- </tr>
- </table>
+ <div class="row">
+ <div class="col-md-12">
+ <div class="page-header">
+ <h1 ng-bind-template="Articles for topic '{{::topic.name}}'"></h1>
+ <table class="item-actions">
+ <tr>
+ <td>
+ <a class="btn btn-default" ui-sref="^">Back</a>
+ </td>
+ </tr>
+ </table>
+ </div>
+ </div>
</div>
- <div class="text-muted">
- Found
- <ng-pluralize count="articlesTotal||0" when="{0:'no articles',1:'1 article',other:'{} articles'}"></ng-pluralize> in the database.
- <span ng-show="articlesTotal">
- Sort by
- <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.sort">
- <li value="title" class="nya-bs-option"><a>Title</a></li>
- <li value="date" class="nya-bs-option"><a>Date</a></li>
- <li value="created" class="nya-bs-option"><a>Added</a></li>
- </ol>
- Direction
- <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.order">
- <li value="+" class="nya-bs-option"><a>Ascending</a></li>
- <li value="-" class="nya-bs-option"><a>Descending</a></li>
- </ol>
- </span>
- <br> Page <span ng-bind="page||1"></span> of <span ng-bind="maxPage||1"></span>.
+ <div class="row">
+ <div class="col-md-12">
+ <div class="text-muted">
+ Found
+ <ng-pluralize count="articlesTotal||0" when="{0:'no articles',1:'1 article',other:'{} articles'}"></ng-pluralize> in the database.
+ <span ng-show="articlesTotal">
+ Sort by
+ <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.sort">
+ <li value="title" class="nya-bs-option"><a>Title</a></li>
+ <li value="date" class="nya-bs-option"><a>Date</a></li>
+ <li value="created" class="nya-bs-option"><a>Added</a></li>
+ </ol>
+ Direction
+ <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.order">
+ <li value="+" class="nya-bs-option"><a>Ascending</a></li>
+ <li value="-" class="nya-bs-option"><a>Descending</a></li>
+ </ol>
+ </span>
+ <br> Page <span ng-bind="page||1"></span> of <span ng-bind="maxPage||1"></span>.
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <pagination total="articlesTotal" page="page" limit="limit" change="changePage" />
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <table class="table table-hover table-condensed">
+ <tbody>
+ <tr ng-repeat="article in articles">
+ <td>
+ <a ui-sref="articles.show({id: article.id})" ng-bind="::article.title"></a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <pagination total="articlesTotal" page="page" limit="limit" change="changePage" />
+ </div>
</div>
- <pagination total="articlesTotal" page="page" limit="limit" change="changePage" />
- <ol ng-attr-start="{{(page-1)*limit+1}}">
- <li ng-repeat="article in articles">
- <a ui-sref="articles.show({id: article.id})" ng-bind="::article.title"></a>
- </li>
- </ol>
- <pagination total="articlesTotal" page="page" limit="limit" />
</div>
<div ng-cloak ui-view></div>
diff --git a/vipra-ui/app/html/topics/index.html b/vipra-ui/app/html/topics/index.html
index 9cb3bc81..95ce765a 100644
--- a/vipra-ui/app/html/topics/index.html
+++ b/vipra-ui/app/html/topics/index.html
@@ -22,7 +22,7 @@
</div>
<div class="row">
<div class="col-md-12">
- <pagination total="topicsTotal" page="page" limit="limit" change="changePage" />
+ <pagination total="topicsTotal" page="page" limit="limit" />
</div>
</div>
<div class="row">
diff --git a/vipra-ui/app/html/topics/show.html b/vipra-ui/app/html/topics/show.html
index 0f3b21d5..fbbc8d31 100644
--- a/vipra-ui/app/html/topics/show.html
+++ b/vipra-ui/app/html/topics/show.html
@@ -49,14 +49,6 @@
<th>ID</th>
<td ng-bind="::topic.id"></td>
</tr>
- <tr>
- <th>Created</th>
- <td ng-bind="::topicCreated"></td>
- </tr>
- <tr>
- <th>Last modified</th>
- <td ng-bind="::topicModified"></td>
- </tr>
</tbody>
</table>
</div>
diff --git a/vipra-ui/app/js/controllers.js b/vipra-ui/app/js/controllers.js
index e5067fb8..a7825d39 100644
--- a/vipra-ui/app/js/controllers.js
+++ b/vipra-ui/app/js/controllers.js
@@ -2,7 +2,7 @@
* Vipra Application
* Controllers
******************************************************************************/
-/* globals angular, Vipra, moment, vis, console, $, prompt, randomColor */
+/* globals angular, Vipra, moment, vis, console, $, prompt, randomColor, Highcharts */
(function() {
"use strict";
@@ -353,22 +353,33 @@
series.push({
name: topic.name,
data: relevances,
- color: topic.color
+ color: topic.color,
+ topic: topic
});
}
}
// highcharts configuration
- $scope.topicSeq = areaRelevanceChart(series, $scope.selectSequence, $scope.opts.chartstyle, $scope.opts.chartstack);
+ $scope.topicSeq = areaRelevanceChart(series, $scope.selectNode, $scope.opts.chartstyle,
+ $scope.opts.chartstack);
$scope.topicsSelected = series.length;
};
- $scope.selectSequence = function(node) {
+ $scope.selectNode = function(node) {
$scope.$apply(function() {
-
+
});
};
+ $scope.topicPopover = function(topic) {
+ return "<table class=\"table table-bordered table-condensed table-nomargin\"><tbody><tr><td>μ</td><td>σ</td><td>↘</td><td>↗</td><td>↝</td></tr><tr><td>" +
+ topic.avgRelevance.toFixed(2) + "</td><td>" +
+ topic.varRelevance.toFixed(2) + "</td><td>" +
+ topic.fallingRelevance.toFixed(2) + "</td><td>" +
+ topic.risingRelevance.toFixed(2) + "</td><td>" +
+ topic.risingDecayRelevance.toFixed(2) + "</td></tr></tbody></table>";
+ };
+
$scope.$watchCollection('opts.selectedTopics', $scope.redrawGraph);
$scope.$watchGroup(['opts.seqstyle', 'opts.chartstyle', 'opts.chartstack'], $scope.redrawGraph);
}
@@ -441,7 +452,7 @@
};
topicShareSeries.push(d);
- if(d.y > maximum.y)
+ if (d.y > maximum.y)
maximum = d;
$scope.article.topics[i].color = colors[i];
@@ -583,7 +594,7 @@
function($scope, $stateParams, $location, TopicFactory) {
$scope.opts = {
- sort: 'name',
+ sort: 'title',
order: '+'
};
@@ -667,18 +678,30 @@
spacingLeft: 0,
spacingRight: 0
},
- title: { text: '' },
+ title: {
+ text: ''
+ },
xAxis: {
type: 'datetime',
- title: { text: '' }
+ title: {
+ text: ''
+ }
+ },
+ yAxis: {
+ title: {
+ text: 'Relevance'
+ }
},
- yAxis: { title: { text: 'Relevance' } },
tooltip: {
headerFormat: '',
pointFormat: '{point.x:%Y}: {point.y:.4f}'
},
- legend: { enabled: false },
- credits: { enabled: false },
+ legend: {
+ enabled: false
+ },
+ credits: {
+ enabled: false
+ },
plotOptions: {
areaspline: {
fillOpacity: 0.5,
@@ -694,6 +717,18 @@
clickCallback(e.point);
}
}
+ },
+ states: {
+ hover: {
+ halo: {
+ size: 9,
+ attributes: {
+ fill: Highcharts.getOptions().colors[2],
+ 'stroke-width': 2,
+ stroke: Highcharts.getOptions().colors[1]
+ }
+ }
+ }
}
}
},
@@ -710,16 +745,24 @@
spacingLeft: 20,
spacingRight: 20,
},
- credits: { enabled: false },
+ credits: {
+ enabled: false
+ },
plotOptions: {
pie: {
size: '100%',
- dataLabels: { enabled: false },
+ dataLabels: {
+ enabled: false
+ },
allowPointSelect: true
}
},
- title: { text: '' },
- tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
+ title: {
+ text: ''
+ },
+ tooltip: {
+ pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+ },
series: series
};
}
diff --git a/vipra-ui/app/js/directives.js b/vipra-ui/app/js/directives.js
index bd32cca3..c7663deb 100644
--- a/vipra-ui/app/js/directives.js
+++ b/vipra-ui/app/js/directives.js
@@ -2,7 +2,7 @@
* Vipra Application
* Directives
******************************************************************************/
-/* globals angular, console */
+/* globals angular, console, $ */
(function() {
"use strict";
@@ -120,4 +120,23 @@
};
});
+ app.directive('bsPopover', function () {
+ return {
+ restrict: 'A',
+ link: function ($scope, $elem, $attrs) {
+ $scope.label = $attrs.popoverLabel;
+ $($elem).popover({
+ animation: ($attrs.popoverAnimation === 'true') || true,
+ container: $attrs.popoverContainer || 'body',
+ content: $attrs.popoverHtml,
+ delay: parseInt($attrs.popoverDelay || 1000, 10),
+ html: $attrs.popoverHtml || true,
+ placement: $attrs.popoverPlacement || 'right',
+ title: $attrs.popoverTitle,
+ trigger: $attrs.popoverTrigger || 'hover'
+ });
+ }
+ };
+ });
+
})();
diff --git a/vipra-ui/app/js/helpers.js b/vipra-ui/app/js/helpers.js
index 27d36b43..b0e780f9 100644
--- a/vipra-ui/app/js/helpers.js
+++ b/vipra-ui/app/js/helpers.js
@@ -42,15 +42,6 @@
* Polyfills
*/
- if (typeof String.prototype.ellipsize === 'undefined')
- String.prototype.ellipsize = function(max) {
- max = max || 20;
- if (this.length > max) {
- return this.substring(0, max) + '...';
- }
- return this;
- };
-
if (typeof String.prototype.multiline === 'undefined')
String.prototype.multiline = function(max) {
return this.split(new RegExp("((?:\\w+ ){" + max + "})", "g")).filter(Boolean).join("\n");
diff --git a/vipra-ui/app/less/app.less b/vipra-ui/app/less/app.less
index 59964cbc..a87797aa 100644
--- a/vipra-ui/app/less/app.less
+++ b/vipra-ui/app/less/app.less
@@ -13,16 +13,6 @@ a:hover {
cursor:pointer;
}
-ul.dashed {
- list-style: none;
- padding: 0;
-
- li:before {
- content: "–";
- padding-right: 5px;
- }
-}
-
.heading {
height: 125px;
margin: 25px 0;
@@ -42,12 +32,6 @@ ul.dashed {
}
}
-.ellipsize {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
.navbar-default {
.collapse:not(.in) {
.navbar-nav > .active {
@@ -75,27 +59,6 @@ ul.dashed {
margin-bottom: 15px;
}
-.footer {
- position: absolute;
- bottom: 0;
- width: 100%;
- /* Set the fixed height of the footer here */
- height: 50px;
- border-top-width: 1px;
- border-top-style: solid;
-}
-
-.loading:before {
- .overlay;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0,0,0,0.1);
- content: " ";
-}
-
.graph {
position: absolute;
top: 50px;
@@ -181,16 +144,6 @@ ul.dashed {
}
}
-.caret.caret-up {
- content: "";
- border-top: 0;
- border-bottom: 4px dashed;
-}
-
-.table.table-morecondensed > tbody > tr > td {
- padding: 0;
-}
-
.table-fixed {
table-layout: fixed;
}
@@ -216,24 +169,10 @@ ul.dashed {
}
}
-.btn-condensed {
- padding: 0px 12px;
- margin-top: -2px;
-}
-
.topic-share {
width: 75px;
}
-revolve-select, [revolve-select] {
- .noselect;
- cursor: pointer;
-}
-
-#nprogress .spinner {
- display: none;
-}
-
.logo {
&.hover {
.logo-shape {
@@ -257,14 +196,6 @@ revolve-select, [revolve-select] {
outline: none;
}
-.fullheight {
- height: 100%;
-
- .row > * {
- height: 100%;
- }
-}
-
.checkbox-condensed {
margin-top: 0;
margin-bottom: 0;
@@ -330,6 +261,9 @@ revolve-select, [revolve-select] {
.topic-choice {
position: absolute;
+ top: 110px;
+ bottom: 0;
+ overflow-y: auto;
label {
padding-right: 15px;
@@ -358,22 +292,6 @@ input[type=checkbox],
vertical-align: bottom;
}
-.btn-groups {
- .btn-group:not(:first-child) {
- .btn {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
- }
-
- .btn-group:not(:last-child) {
- .btn {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
- }
-}
-
.message-container {
position: relative;
}
@@ -401,15 +319,6 @@ input[type=checkbox],
width: 100% !important;
}
-.btn-default-none {
- &, &:focus, &:hover, &:active {
- .noselect;
- background: transparent;
- cursor: default;
- box-shadow: none;
- }
-}
-
.table-infos {
th {
white-space: nowrap;
@@ -423,6 +332,12 @@ input[type=checkbox],
vertical-align: text-top;
}
+.wrapper {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
@-moz-keyframes spin { 100% { -moz-transform: rotateY(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotateY(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotateY(360deg); transform:rotateY(360deg); } }
--
GitLab