From 68e284ff86f81564bc4dd0f75c80caad379239a1 Mon Sep 17 00:00:00 2001
From: Eike Cochu <eike@cochu.com>
Date: Tue, 15 Mar 2016 19:53:37 +0100
Subject: [PATCH] updated ui
showing panels per selected topic in explorer
tracking selected topics by model in explorer
moved result lists of articles, topics and articles of topics into panels with header and footer
removed angular-animate, unused
added network icon to network buttons
---
vipra-ui/app/html/articles/index.html | 50 +++++++++++++-------------
vipra-ui/app/html/articles/show.html | 4 +--
vipra-ui/app/html/explorer.html | 30 +++++++++++++---
vipra-ui/app/html/topics/articles.html | 46 ++++++++++++------------
vipra-ui/app/html/topics/index.html | 46 ++++++++++++------------
vipra-ui/app/html/topics/show.html | 38 ++++++++++----------
vipra-ui/app/js/app.js | 1 -
vipra-ui/app/js/controllers.js | 17 ++++-----
vipra-ui/app/less/app.less | 20 +++++++++--
vipra-ui/bower.json | 1 -
vipra-ui/gulpfile.js | 1 -
11 files changed, 140 insertions(+), 114 deletions(-)
diff --git a/vipra-ui/app/html/articles/index.html b/vipra-ui/app/html/articles/index.html
index 2aae37d4..b37d4ad6 100644
--- a/vipra-ui/app/html/articles/index.html
+++ b/vipra-ui/app/html/articles/index.html
@@ -1,10 +1,16 @@
<div class="container" ng-cloak ng-hide="$state.current.name !== 'articles'">
<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">
+ <pagination total="articlesTotal" page="page" limit="limit" />
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ 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>
@@ -17,7 +23,21 @@
<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>
+ <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>
+
+ <small class="text-muted" ng-bind-template="[{{::Vipra.formatDate(article.date)}}]"></small>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <div class="panel-footer">
+ Page <span ng-bind="page||1"></span> of <span ng-bind="maxPage||1"></span>
+ </div>
</div>
</div>
</div>
@@ -26,25 +46,5 @@
<pagination total="articlesTotal" page="page" limit="limit" />
</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>
-
- <small class="text-muted" ng-bind-template="[{{::Vipra.formatDate(article.date)}}]"></small>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12">
- <pagination total="articlesTotal" page="page" limit="limit" />
- </div>
- </div>
</div>
<div ng-cloak ui-view></div>
diff --git a/vipra-ui/app/html/articles/show.html b/vipra-ui/app/html/articles/show.html
index 8666ede8..398eb464 100644
--- a/vipra-ui/app/html/articles/show.html
+++ b/vipra-ui/app/html/articles/show.html
@@ -7,7 +7,7 @@
<tr>
<td>
<a class="btn btn-default" ui-sref="network({type:'articles', id:article.id})">
- Network graph
+ <i class="fa fa-sitemap"></i> Network
</a>
</td>
</tr>
@@ -34,7 +34,7 @@
<th>URL</th>
<td>
<a ng-href="{{::article.url}}" target="_blank">
- <span class="glyphicon glyphicon-link"></span>
+ <i class="fa fa-link"></i>
<span ng-bind="::article.url"></span>
</a>
</td>
diff --git a/vipra-ui/app/html/explorer.html b/vipra-ui/app/html/explorer.html
index 0ddaf29a..a75e5115 100644
--- a/vipra-ui/app/html/explorer.html
+++ b/vipra-ui/app/html/explorer.html
@@ -7,8 +7,8 @@
</div>
<div class="btn-group btn-group-justified">
<a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'name'" title="Sort by name">α</a>
- <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'avgRelevance'" title="Sort by relevance average">μ</a>
- <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'varRelevance'" title="Sort by relevance variance">σ</a>
+ <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'avgRelevance'" title="Sort by average relevance">μ</a>
+ <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'varRelevance'" title="Sort by variance in relevance">σ</a>
<a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'fallingRelevance'" title="Sort by falling relevance">↘</a>
<a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'risingRelevance'" title="Sort by rising relevance">↗</a>
<a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'risingDecayRelevance'" title="Sort by rising relevance with decay">↝</a>
@@ -22,9 +22,9 @@
</div>
<ul class="list-unstyled topic-choice">
<li ng-repeat="topic in topics | orderBy:opts.sorttopics:opts.sortdir | filter:search">
- <div class="checkbox checkbox-condensed" ng-class="{selected:opts.selectedTopics[topic.id]}" bs-popover popover-title="{{::topic.name}}" popover-template="partials/topic-popover.html">
+ <div class="checkbox checkbox-condensed" ng-class="{selected:topic.selected}" bs-popover popover-title="{{::topic.name}}" popover-template="partials/topic-popover.html">
<span class="valuebar" ng-style="{width:topicCurrValue(topic)}"></span>
- <input type="checkbox" ng-model="opts.selectedTopics[topic.id]" ng-attr-id="{{::topic.id}}">
+ <input type="checkbox" ng-model="topic.selected" ng-attr-id="{{::topic.id}}" ng-change="redrawGraph()">
<label class="check" ng-attr-for="{{::topic.id}}">
<span class="ellipsis" ng-bind="::topic.name"></span>
</label>
@@ -55,8 +55,28 @@
<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="chart" highcharts="topicSeq"></div>
<div class="message text-muted" ng-show="!topicsSelected">No topic selected</div>
+ <div class="topics">
+ <div class="row">
+ <div class="col-md-6 col-sm-12" ng-repeat="topic in topics | filter:{selected:true}">
+ <div class="panel panel-default panel-condensed">
+ <div class="panel-heading">
+ <span ng-bind="topic.name"></span>
+ <a ui-sref="topics.show({id:topic.id})">
+ <i class="fa fa-link"></i>
+ </a>
+ <a ui-sref="network({type:'topics', id:topic.id})">
+ <i class="fa fa-sitemap"></i>
+ </a>
+ <span class="colorbox shown" style="background:{{::topic.color}}"></span>
+ </div>
+ <div class="panel-body">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
diff --git a/vipra-ui/app/html/topics/articles.html b/vipra-ui/app/html/topics/articles.html
index 363190a7..c27bec67 100644
--- a/vipra-ui/app/html/topics/articles.html
+++ b/vipra-ui/app/html/topics/articles.html
@@ -15,10 +15,16 @@
</div>
<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">
+ <pagination total="articlesTotal" page="page" limit="limit" change="changePage" />
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ 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>
@@ -31,7 +37,19 @@
<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>
+ <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 class="panel-footer">
+ Page <span ng-bind="page||1"></span> of <span ng-bind="maxPage||1"></span>
+ </div>
</div>
</div>
</div>
@@ -40,23 +58,5 @@
<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>
</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 95ce765a..50d6d7a4 100644
--- a/vipra-ui/app/html/topics/index.html
+++ b/vipra-ui/app/html/topics/index.html
@@ -1,10 +1,16 @@
<div class="container" ng-cloak ng-hide="$state.current.name !== 'topics'">
<div class="row">
<div class="col-md-12">
- <div class="text-muted">
- Found
- <ng-pluralize count="topicsTotal||0" when="{0:'no topics',1:'1 topic',other:'{} topics'}"></ng-pluralize> in the database.
- <span ng-show="topicsTotal">
+ <pagination total="topicsTotal" page="page" limit="limit" />
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ Found
+ <ng-pluralize count="topicsTotal||0" when="{0:'no topics',1:'1 topic',other:'{} topics'}"></ng-pluralize> in the database.
+ <span ng-show="topicsTotal">
Sort by
<ol class="nya-bs-select nya-bs-condensed" ng-model="opts.sort">
<li value="name" class="nya-bs-option"><a>Name</a></li>
@@ -16,7 +22,19 @@
<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>
+ <table class="table table-hover table-condensed">
+ <tbody>
+ <tr ng-repeat="topic in topics">
+ <td>
+ <a ui-sref="topics.show({id: topic.id})" ng-bind="::topic.name"></a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <div class="panel-footer">
+ Page <span ng-bind="page||1"></span> of <span ng-bind="maxPage||1"></span>
+ </div>
</div>
</div>
</div>
@@ -25,23 +43,5 @@
<pagination total="topicsTotal" page="page" limit="limit" />
</div>
</div>
- <div class="row">
- <div class="col-md-12">
- <table class="table table-hover table-condensed">
- <tbody>
- <tr ng-repeat="topic in topics">
- <td>
- <a ui-sref="topics.show({id: topic.id})" ng-bind="::topic.name"></a>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12">
- <pagination total="topicsTotal" page="page" limit="limit" />
- </div>
- </div>
</div>
<div ng-cloak ui-view></div>
diff --git a/vipra-ui/app/html/topics/show.html b/vipra-ui/app/html/topics/show.html
index 75e9aecf..cf69e48b 100644
--- a/vipra-ui/app/html/topics/show.html
+++ b/vipra-ui/app/html/topics/show.html
@@ -30,7 +30,7 @@
</div>
</td>
<td>
- <a class="btn btn-default" ui-sref="network({type:'topics', id:topic.id})">Network graph</a>
+ <a class="btn btn-default" ui-sref="network({type:'topics', id:topic.id})"><i class="fa fa-sitemap"></i> Network</a>
</td>
<td>
<a class="btn btn-default" ui-sref="topics.show.articles({id:topic.id})">Articles</a>
@@ -77,26 +77,24 @@
<div class="row">
<div class="col-md-12">
<h3>Words</h3>
- <div class="wrapper">
- <div class="topbar">
- <small>Sequence:</small>
- <sequence-dropdown ng-model="sequenceId" sequences="topic.sequences"></sequence-dropdown>
- </div>
- <table class="table table-condensed table-bordered table-hover" ng-show="sequence">
- <thead>
- <tr>
- <th ng-model="opts.sortwords" sort-by="id">Word</th>
- <th ng-model="opts.sortwords" sort-by="likeliness">Likeliness</th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="word in sequence.words | orderBy:opts.sortwords">
- <td ng-bind="word.id"></td>
- <td ng-bind="word.likeliness.toFixed(4)"></td>
- </tr>
- </tbody>
- </table>
+ <div class="topbar">
+ <small>Sequence:</small>
+ <sequence-dropdown ng-model="sequenceId" sequences="topic.sequences"></sequence-dropdown>
</div>
+ <table class="table table-condensed table-bordered table-hover" ng-show="sequence">
+ <thead>
+ <tr>
+ <th ng-model="opts.sortwords" sort-by="id">Word</th>
+ <th ng-model="opts.sortwords" sort-by="likeliness">Likeliness</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr ng-repeat="word in sequence.words | orderBy:opts.sortwords">
+ <td ng-bind="word.id"></td>
+ <td ng-bind="word.likeliness.toFixed(4)"></td>
+ </tr>
+ </tbody>
+ </table>
</div>
</div>
</div>
diff --git a/vipra-ui/app/js/app.js b/vipra-ui/app/js/app.js
index 35b6b0e1..9b0ad989 100644
--- a/vipra-ui/app/js/app.js
+++ b/vipra-ui/app/js/app.js
@@ -10,7 +10,6 @@
var app = angular.module('vipra.app', [
'ngResource',
'ngSanitize',
- 'ngAnimate',
'ui.router',
'nya.bootstrap.select',
'vipra.controllers',
diff --git a/vipra-ui/app/js/controllers.js b/vipra-ui/app/js/controllers.js
index 4b1af8b2..8012e8e9 100644
--- a/vipra-ui/app/js/controllers.js
+++ b/vipra-ui/app/js/controllers.js
@@ -124,7 +124,7 @@
}
};
$scope.shown = {
- articles: $scope.type === 'articles',
+ articles: true,
topics: true,
words: true
};
@@ -335,24 +335,20 @@
$scope.checkTopics = function(to) {
var toggle = typeof to === 'undefined';
- if (!$scope.opts.selectedTopics)
- $scope.opts.selectedTopics = {};
for (var i = 0, t; i < $scope.topics.length; i++) {
t = $scope.topics[i];
- if (toggle)
- $scope.opts.selectedTopics[t.id] = !$scope.opts.selectedTopics[t.id];
- else
- $scope.opts.selectedTopics[t.id] = to;
+ t.selected = toggle ? !t.selected : to;
}
+ $scope.redrawGraph();
};
$scope.redrawGraph = function() {
- if (!$scope.topics || !$scope.opts.selectedTopics) return;
+ if (!$scope.topics) return;
var series = [];
// create series of selected topics
for (var i = 0; i < $scope.topics.length; i++) {
- if ($scope.opts.selectedTopics[$scope.topics[i].id]) {
+ if ($scope.topics[i].selected) {
var topic = $scope.topics[i],
relevances = [];
@@ -410,7 +406,6 @@
return (percent * 100) + '%';
};
- $scope.$watchCollection('opts.selectedTopics', $scope.redrawGraph);
$scope.$watchGroup(['opts.seqstyle', 'opts.chartstyle', 'opts.chartstack'], $scope.redrawGraph);
}
]);
@@ -592,7 +587,7 @@
$scope.origName = $scope.topic.name;
$scope.isRename = true;
$timeout(function() {
- $('#topicName').select();
+ document.getElementById('topicName').select();
}, 0);
};
diff --git a/vipra-ui/app/less/app.less b/vipra-ui/app/less/app.less
index ca7415fe..b819dc5a 100644
--- a/vipra-ui/app/less/app.less
+++ b/vipra-ui/app/less/app.less
@@ -250,8 +250,12 @@ a:hover {
right: 0;
bottom: 0;
}
+ .topics,
.chart {
- padding: 5px;
+ padding: 15px;
+ }
+ .topics .panel-heading {
+ position: relative;
}
.sequence {
flex: 1 0 0;
@@ -279,7 +283,8 @@ a:hover {
visibility: hidden;
}
.checkbox:hover .colorbox,
- .selected .colorbox {
+ .selected .colorbox,
+ .colorbox.shown {
visibility: visible;
}
}
@@ -337,6 +342,8 @@ input[type=checkbox],
position: relative;
width: 100%;
height: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
}
[sort-by] {
@@ -348,6 +355,15 @@ input[type=checkbox],
border-bottom: 4px solid #000000;
}
+.panel.panel-condensed {
+ .panel-heading {
+ padding: 5px 10px;
+ }
+ .panel-body {
+ padding: 5px;
+ }
+}
+
@-moz-keyframes spin {
100% {
-moz-transform: rotateY(360deg);
diff --git a/vipra-ui/bower.json b/vipra-ui/bower.json
index e227cf74..7e8613c2 100644
--- a/vipra-ui/bower.json
+++ b/vipra-ui/bower.json
@@ -29,7 +29,6 @@
"nya-bootstrap-select": "^2.x",
"font-awesome": "^4.x",
"awesome-bootstrap-checkbox": "^0.x",
- "angular-animate": "^1.x",
"randomcolor": "randomColor#^0.x"
}
}
diff --git a/vipra-ui/gulpfile.js b/vipra-ui/gulpfile.js
index 07c59711..bc5fed52 100644
--- a/vipra-ui/gulpfile.js
+++ b/vipra-ui/gulpfile.js
@@ -15,7 +15,6 @@ var assets = {
'bower_components/jquery/dist/jquery.min.js',
'bower_components/angular/angular.min.js',
'bower_components/angular-resource/angular-resource.min.js',
- 'bower_components/angular-animate/angular-animate.min.js',
'bower_components/angular-sanitize/angular-sanitize.min.js',
'bower_components/angular-ui-router/release/angular-ui-router.min.js',
'bower_components/bootstrap/dist/js/bootstrap.min.js',
--
GitLab