diff --git a/vipra-ui/app/html/articles/show.html b/vipra-ui/app/html/articles/show.html index 748f38b489196a285adc871efbfa61049c06499a..d5c2dc0b1e4642213526d0239ffd84969b98a4ec 100644 --- a/vipra-ui/app/html/articles/show.html +++ b/vipra-ui/app/html/articles/show.html @@ -50,35 +50,26 @@ <div class="row"> <div class="col-md-12"> <h3><anchor-link fragment="similar" />Similar articles</h3> - <ul class="list-unstyled" ng-attr-start="{{(page-1)*limit+1}}"> - <li ng-repeat="simArticle in article.similarArticles" class="ellipsis"> + <ul class="list-unstyled"> + <li ng-repeat="simArticle in article.similarArticles | orderBy:'divergence'" 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> + <li class="text-muted" ng-show="!article.similarArticles"> + None + </li> </ul> </div> </div> </div> <div class="col-md-4"> <h3><anchor-link fragment="topics" />Topics</h3> - <table class="table table-bordered table-condensed table-nomargin" ng-show="article.topics.length > 0"> - <tbody> - <tr> - <th> - Name - </th> - <th class="topic-share text-right"> - Share - </th> - </tr> - <tr ng-repeat="topic in article.topics | orderBy:topicSort:topicSortRev"> - <td> - <topic-link topic="topic.topic" /> - </td> - <td class="text-right" ng-bind-template="{{(topic.share*100).toFixed(1)}}%"></td> - </tr> - </tbody> - </table> + <ul class="list-unstyled"> + <li ng-repeat="topic in article.topics | orderBy:'share'"> + <small class="text-muted percent-align" ng-bind-template="({{(topic.share*100).toFixed(0)}}%)"></small> + <topic-link topic="topic.topic" /> + </li> + </ul> <span class="text-muted" ng-hide="article.topics.length > 0">No topics</span> <div class="pie-chart" id="topic-share" highcharts="topicShare"></div> </div> diff --git a/vipra-ui/app/html/directives/sort-dir.html b/vipra-ui/app/html/directives/sort-dir.html index 155e996f9778a191c0a684d65903204d7ec4f0c6..7132743bbf28248058670ea73934a43cd52379d3 100644 --- a/vipra-ui/app/html/directives/sort-dir.html +++ b/vipra-ui/app/html/directives/sort-dir.html @@ -1 +1,3 @@ -<i class="pointer fa" ng-class="{'fa-sort-amount-desc':ngModel,'fa-sort-amount-asc':!ngModel}" ng-click="ngModel=!ngModel; $event.stopPropagation()"></i> \ No newline at end of file +<a tabindex="0"> + <i class="pointer fa" ng-class="{'fa-sort-amount-desc':ngModel,'fa-sort-amount-asc':!ngModel}" ng-click="ngModel=!ngModel; $event.stopPropagation()"></i> +</a> \ No newline at end of file diff --git a/vipra-ui/app/html/explorer.html b/vipra-ui/app/html/explorer.html index ec9dd98c99d50b2a7973f1e62c27b2431a75f1fa..11344053d783dc548787967149c0f8f60c3b9747 100644 --- a/vipra-ui/app/html/explorer.html +++ b/vipra-ui/app/html/explorer.html @@ -1,18 +1,18 @@ <div class="fullsize navpadding explorer" ng-cloak ng-hide="!rootModels.topicModel || $state.current.name !== 'explorer'"> <div class="sidebar"> <div class="btn-group btn-group-justified" role="group" aria-label="..."> - <a class="btn btn-sm btn-default" ng-click="checkTopics(true)" title="Select all topics">All</a> - <a class="btn btn-sm btn-default" ng-click="checkTopics(false)" title="Deselect all topics">None</a> - <a class="btn btn-sm btn-default" ng-click="checkTopics()" title="Toggle all topics">Toggle</a> + <a tabindex="0" class="btn btn-sm btn-default" ng-click="checkTopics(true)" title="Select all topics">All</a> + <a tabindex="0" class="btn btn-sm btn-default" ng-click="checkTopics(false)" title="Deselect all topics">None</a> + <a tabindex="0" class="btn btn-sm btn-default" ng-click="checkTopics()" title="Toggle all topics">Toggle</a> </div> <div class="btn-group btn-group-justified"> - <a class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'name'" title="Sort by name">α</a> - <a class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'avgRelevance'" title="Sort by average relevance">μ</a> - <a class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'varRelevance'" title="Sort by variance in relevance">σ</a> - <a class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'fallingRelevance'" title="Sort by falling relevance">↘</a> - <a class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'risingRelevance'" title="Sort by rising relevance">↗</a> - <a class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'risingDecayRelevance'" title="Sort by rising relevance with decay">↝</a> - <a class="btn btn-sm btn-link btn-plain" ng-click="explorerModels.sortdir=!explorerModels.sortdir"> + <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'name'" title="Sort by name">α</a> + <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'avgRelevance'" title="Sort by average relevance">μ</a> + <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'varRelevance'" title="Sort by variance in relevance">σ</a> + <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'fallingRelevance'" title="Sort by falling relevance">↘</a> + <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'risingRelevance'" title="Sort by rising relevance">↗</a> + <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'risingDecayRelevance'" title="Sort by rising relevance with decay">↝</a> + <a tabindex="0" class="btn btn-sm btn-link btn-plain" ng-click="explorerModels.sortdir=!explorerModels.sortdir"> <sort-dir ng-model="explorerModels.sortdir" /> </a> </div> @@ -24,7 +24,7 @@ <li ng-repeat="topic in topics | orderBy:explorerModels.sorttopics:explorerModels.sortdir | filter:search" ng-mouseenter="highlightSeries(topic.id, true)" ng-mouseleave="highlightSeries(topic.id, false)"> <div class="checkbox checkbox-condensed" ng-class="{selected:topic.selected}"> <span class="valuebar" ng-style="{width:topic.topicCurrValue}"></span> - <input type="checkbox" ng-model="topic.selected" ng-attr-id="{{::topic.id}}" ng-change="redrawGraph()"> + <input tabindex="0" type="checkbox" ng-model="topic.selected" ng-attr-id="{{::topic.id}}" ng-change="redrawGraph()"> <label class="check" ng-attr-for="{{::topic.id}}"> <topic-menu topic="topic" /> <span class="ellipsis topic"> @@ -41,24 +41,24 @@ <div class="topbar"> <small>Values:</small> <div class="btn-group"> - <a class="btn btn-sm btn-default" ng-model="explorerModels.seqstyle" bs-radio="'absolute'">Absolute</a> - <a class="btn btn-sm btn-default" ng-model="explorerModels.seqstyle" bs-radio="'relative'">Relative</a> + <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.seqstyle" bs-radio="'absolute'">Absolute</a> + <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.seqstyle" bs-radio="'relative'">Relative</a> </div> <small>Chart:</small> <div class="btn-group"> - <a class="btn btn-sm btn-default" ng-model="explorerModels.chartstyle" bs-radio="'areaspline'">Area</a> - <a class="btn btn-sm btn-default" ng-model="explorerModels.chartstyle" bs-radio="'spline'">Line</a> + <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.chartstyle" bs-radio="'areaspline'">Area</a> + <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.chartstyle" bs-radio="'spline'">Line</a> </div> <small>Stacking:</small> <div class="btn-group"> - <a class="btn btn-sm btn-default" ng-model="explorerModels.chartstack" bs-radio="'none'">None</a> - <a class="btn btn-sm btn-default" ng-model="explorerModels.chartstack" bs-radio="'normal'">Value</a> - <a class="btn btn-sm btn-default" ng-model="explorerModels.chartstack" bs-radio="'percent'">Percent</a> + <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.chartstack" bs-radio="'none'">None</a> + <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.chartstack" bs-radio="'normal'">Value</a> + <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.chartstack" bs-radio="'percent'">Percent</a> </div> <div class="pull-right"> - <a class="btn btn-sm btn-default" ng-click="resetZoom()" ng-show="topicsSelected">Reset zoom</a> + <a tabindex="0" class="btn btn-sm btn-default" ng-click="resetZoom()" ng-show="topicsSelected">Reset zoom</a> </div> </div> <div id="topicRelChart" class="chart" highcharts="topicSeq" style="height:500px"></div> diff --git a/vipra-ui/app/index.html b/vipra-ui/app/index.html index e3dbfd1002647b514eec3a3d363e344e2c54b348..03eab34ccb1a05e106cc80b5ad4834d1603cf79f 100644 --- a/vipra-ui/app/index.html +++ b/vipra-ui/app/index.html @@ -43,7 +43,7 @@ <span class="icon-bar"></span> <span class="icon-bar"></span> </button> - <a ui-sref="index" class="navbar-brand"> + <a tabindex="0" ui-sref="index" class="navbar-brand"> <svg class="logo hover" viewBox="0 0 200 120" ng-class="{animate:loading.any}"> <polyline style="animation-delay:0s" class="logo-shape" points="0,0 100,45 100,75 0,0" fill="#006591" /> <polyline style="animation-delay:.5s" class="logo-shape" points="100,45 200,0 100,75 100,45" fill="#0079a2" /> @@ -56,30 +56,37 @@ <div class="collapse navbar-collapse" id="vipra-navbar-collapse-1"> <ul class="nav navbar-nav"> <li ui-sref-active="active"> - <a ui-sref="explorer"><span class="mnemonic">E</span>xplorer</a> + <a tabindex="0" ui-sref="explorer"><span class="mnemonic">E</span>xplorer</a> </li> <li ui-sref-active="active"> - <a ui-sref="articles"><span class="mnemonic">A</span>rticles</a> + <a tabindex="0" ui-sref="articles"><span class="mnemonic">A</span>rticles</a> </li> <li ui-sref-active="active"> - <a ui-sref="topics"><span class="mnemonic">T</span>opics</a> + <a tabindex="0" ui-sref="topics"><span class="mnemonic">T</span>opics</a> </li> </ul> <form class="navbar-form navbar-left" role="search" ng-hide="$state.current.name === 'index'"> <div class="form-group has-feedback"> - <input type="text" class="form-control" placeholder="Search..." ng-model="rootModels.search" ng-enter="menubarSearch(rootModels.search)" id="menuSearchBox"> + <input tabindex="0" type="text" class="form-control" placeholder="Search..." ng-model="rootModels.search" ng-enter="menubarSearch(rootModels.search)" id="menuSearchBox"> <i class="form-control-feedback glyphicon glyphicon-search text-muted"></i> </div> </form> - <ul class="nav navbar-nav navbar-right"> - <li ng-class="{'text-italic':rootModels.topicModel}"> - <a ng-click="chooseTopicModel()" ng-bind-template="{{rootModels.topicModel ? rootModels.topicModel.id : 'Models'}}" ng-attr-title="{{rootModels.topicModel.modelConfig.description}}"></a> + <ul class="nav navbar-nav"> + <li ng-class="{'text-italic active':rootModels.topicModel}"> + <a tabindex="0" ng-click="chooseTopicModel()" ng-bind-template="{{rootModels.topicModel ? rootModels.topicModel.id : 'Models'}}" ng-attr-title="{{rootModels.topicModel.modelConfig.description}}"></a> </li> + </ul> + <ul class="nav navbar-nav navbar-right"> <li ui-sref-active="active"> - <a ui-sref="about"> + <a tabindex="0" ui-sref="about"> About </a> </li> + <li title="Keyboard cheatsheet"> + <a tabindex="0" ng-click="showCheatSheet()"> + <i class="fa fa-keyboard-o"></i> + </a> + </li> </ul> </div> </div> diff --git a/vipra-ui/app/js/controllers.js b/vipra-ui/app/js/controllers.js index 980e7a074bdfbbab7ae5b9c7a364168957967560..db5ca8c4726aa9ed4a36b6d33b968902790abd4d 100644 --- a/vipra-ui/app/js/controllers.js +++ b/vipra-ui/app/js/controllers.js @@ -100,6 +100,8 @@ $scope.chooseTopicModel(); } }); + + $scope.showCheatSheet = hotkeys.toggleCheatSheet; } ]); @@ -612,9 +614,6 @@ app.controller('ArticlesShowController', ['$scope', '$state', '$stateParams', '$timeout', 'ArticleFactory', function($scope, $state, $stateParams, $timeout, ArticleFactory) { - $scope.topicSort = $scope.topicSort || 'share'; - $scope.topicSortRev = typeof $scope.topicSortRev === 'undefined' ? true : $scope.topicSortRev; - ArticleFactory.get({ id: $stateParams.id }, function(data) {