diff --git a/vipra-ui/app/html/articles/index.html b/vipra-ui/app/html/articles/index.html index 32d5a302335f71278510da252b7414744139d990..f07ba3a876b52262df0aec5c79d66b1fd8f5f47e 100644 --- a/vipra-ui/app/html/articles/index.html +++ b/vipra-ui/app/html/articles/index.html @@ -4,13 +4,13 @@ <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="sort" ng-model-store="sort" ng-model-default="'date'"> + <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="order" ng-model-store="order" ng-model-default="'+'"> + <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> diff --git a/vipra-ui/app/html/articles/show.html b/vipra-ui/app/html/articles/show.html index 8f36ebc0ffbb625f7ab2c8bf6147da34546b863b..748b9853cd65547d04a76c7d487ea7d4c78ccfa5 100644 --- a/vipra-ui/app/html/articles/show.html +++ b/vipra-ui/app/html/articles/show.html @@ -59,10 +59,10 @@ <div class="col-md-5"> <table class="table table-morecondensed" ng-show="article.topics.length > 0"> <tr> - <th sort-by="topic.name" sort-type="topicSort" sort-reverse="topicSortRev"> + <th> Name </th> - <th sort-by="share" sort-type="topicSort" sort-reverse="topicSortRev" class="topic-share"> + <th class="topic-share"> Share </th> </tr> diff --git a/vipra-ui/app/html/explorer.html b/vipra-ui/app/html/explorer.html index ad539a64615ae34b6a4815a5710b97789e7624a0..8d9c2636399ad4bee3640f4251b86d891ad61fb2 100644 --- a/vipra-ui/app/html/explorer.html +++ b/vipra-ui/app/html/explorer.html @@ -6,21 +6,21 @@ <a 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="opts.sorttopics" ng-model-store bs-radio="'name'" title="Sort by name">α</a> - <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" ng-model-store bs-radio="'avgRelevance'" title="Sort by relevance average">μ</a> - <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" ng-model-store bs-radio="'varRelevance'" title="Sort by relevance variance">σ</a> - <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" ng-model-store bs-radio="'frel'" title="Sort by falling relevance">↘</a> - <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" ng-model-store bs-radio="'rrel'" title="Sort by rising relevance">↗</a> - <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" ng-model-store bs-radio="'rreld'" title="Sort by rising relevance with decay">↝</a> + <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="'frel'" title="Sort by falling relevance">↘</a> + <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'rrel'" title="Sort by rising relevance">↗</a> + <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'rreld'" title="Sort by rising relevance with decay">↝</a> </div> <div class="btn-group btn-group-justified"> - <input type="text" class="form-control" ng-model="search.$" ng-model-store placeholder="Filter"> + <input type="text" class="form-control" ng-model="search.$" placeholder="Filter"> <span class="glyphicon glyphicon-remove-circle searchclear" ng-click="search=''"></span> </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]}"> - <input type="checkbox" ng-model="opts.selectedTopics[topic.id]" ng-attr-id="{{::topic.id}}" ng-model-store="selectedTopics-{{::topic.id}}"> + <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> </label> @@ -31,14 +31,15 @@ </div> <div class="chart message-container"> <div class="topbar"> - Display relevances: - <div class="radio radio-inline"> - <input type="radio" id="seqAbsolute" ng-model="opts.seqstyle" value="absolute" ng-model-store ng-model-default="'absolute'"> - <label for="seqAbsolute">Absolute</label> + <div class="btn-group"> + <span class="btn btn-sm btn-default-none">Values:</span> + <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> - <div class="radio radio-inline"> - <input type="radio" id="seqRelative" ng-model="opts.seqstyle" value="relative" ng-model-store> - <label for="seqRelative">Relative</label> + <div class="btn-group"> + <span class="btn btn-sm btn-default-none">Chart:</span> + <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> </div> <div class="area-chart" id="topic-seq" highcharts="topicSeq"></div> diff --git a/vipra-ui/app/html/network.html b/vipra-ui/app/html/network.html index 1fbf495530f2289088d6bb1fced3aec6698f3b0c..98fe5c76870cbd90dd58ba3fae7fdf1649c80a82 100644 --- a/vipra-ui/app/html/network.html +++ b/vipra-ui/app/html/network.html @@ -2,19 +2,19 @@ <div class="fullsize navpadding"> <div class="graph-legend overlay"> <div class="checkbox"> - <input type="checkbox" id="showArticles" ng-model="shown.articles" ng-model-store="showArticles" ng-model-default="type == 'articles'" ng-disabled="type == 'articles'"> + <input type="checkbox" id="showArticles" ng-model="shown.articles" ng-disabled="type == 'articles'"> <label for="showArticles" style="color:{{colors.articles}}">Articles</label> </div> <div class="checkbox"> - <input type="checkbox" id="showTopics" ng-model="shown.topics" ng-model-store="showTopics" ng-model-default="true" ng-disabled="type == 'topics'"> + <input type="checkbox" id="showTopics" ng-model="shown.topics" ng-disabled="type == 'topics'"> <label for="showTopics" style="color:{{colors.topics}}">Topics</label> </div> <div class="checkbox"> - <input type="checkbox" id="showWords" ng-model="shown.words" ng-model-store="showWords" ng-model-default="true" ng-disabled="type == 'words'"> + <input type="checkbox" id="showWords" ng-model="shown.words" ng-disabled="type == 'words'"> <label for="showWords" style="color:{{colors.words}}">Words</label> </div> </div> - <div class="fullsize navpadding" id="visgraph"></div> + <div class="fullsize" id="visgraph"></div> </div> </div> <div ng-cloak ui-view></div> diff --git a/vipra-ui/app/html/topics/articles.html b/vipra-ui/app/html/topics/articles.html index a49f2a6e0780007561b08a8fa5d9b226dfb1a327..8f52eb096c2567ffaee99773e98b7dc4d7db0dfb 100644 --- a/vipra-ui/app/html/topics/articles.html +++ b/vipra-ui/app/html/topics/articles.html @@ -14,13 +14,13 @@ <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="sort" ng-model-store="sort" ng-model-default="'date'"> + <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="order" ng-model-store="order" ng-model-default="'+'"> + <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> diff --git a/vipra-ui/app/html/topics/index.html b/vipra-ui/app/html/topics/index.html index ea87c18abf792c9436fc20672e49798d4f486346..9e831c834ea646f4754cb3c249235bf6dbc70923 100644 --- a/vipra-ui/app/html/topics/index.html +++ b/vipra-ui/app/html/topics/index.html @@ -4,12 +4,12 @@ <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="sort"> + <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.sort"> <li value="name" class="nya-bs-option"><a>Name</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="order"> + <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> diff --git a/vipra-ui/app/html/topics/show.html b/vipra-ui/app/html/topics/show.html index 599aa2085117dc5536e04a8faf8d42a1cf6df177..9a1e5f06ac8cc3dc01f4f574f95e31bd7c3f56a2 100644 --- a/vipra-ui/app/html/topics/show.html +++ b/vipra-ui/app/html/topics/show.html @@ -62,11 +62,11 @@ <div class="col-md-12"> <div class="well well-sm"> <div class="radio radio-inline"> - <input type="radio" id="seqAbsolute" ng-model="opts.seqstyle" value="absolute" ng-model-store="seqStyle" ng-model-default="'absolute'"> + <input type="radio" id="seqAbsolute" ng-model="opts.seqstyle" value="absolute"> <label for="seqAbsolute">Absolute</label> </div> <div class="radio radio-inline"> - <input type="radio" id="seqRelative" ng-model="opts.seqstyle" value="relative" ng-model-store="seqStyle"> + <input type="radio" id="seqRelative" ng-model="opts.seqstyle" value="relative"> <label for="seqRelative">Relative</label> </div> </div> diff --git a/vipra-ui/app/js/controllers.js b/vipra-ui/app/js/controllers.js index 6bfbe8838dc0f79391847a9ded297a5cd7186435..e1f8a69a655b694e3b9349616a9c3cfd34a1df86 100644 --- a/vipra-ui/app/js/controllers.js +++ b/vipra-ui/app/js/controllers.js @@ -85,8 +85,8 @@ /** * Network controller */ - app.controller('NetworkController', ['$scope', '$state', '$stateParams', '$timeout', 'Store', 'ArticleFactory', 'TopicFactory', 'WordFactory', - function($scope, $state, $stateParams, $timeout, Store, ArticleFactory, TopicFactory, WordFactory) { + app.controller('NetworkController', ['$scope', '$state', '$stateParams', '$timeout', 'ArticleFactory', 'TopicFactory', 'WordFactory', + function($scope, $state, $stateParams, $timeout, ArticleFactory, TopicFactory, WordFactory) { var id = 0, ids = {}, @@ -123,6 +123,11 @@ } } }; + $scope.shown = { + articles: $scope.type === 'articles', + topics: true, + words: true + }; var factory; if ($stateParams.type === 'articles') @@ -294,7 +299,9 @@ function($scope, TopicFactory) { $scope.opts = { - sorttopics: 'name' + sorttopics: 'name', + seqstyle: 'absolute', + chartstyle: 'areaspline' }; TopicFactory.query({ @@ -362,7 +369,7 @@ } // highcharts configuration - $scope.topicSeq = areaRelevanceChart(series, $scope.selectSequence); + $scope.topicSeq = areaRelevanceChart(series, $scope.selectSequence, $scope.opts.chartstyle); $scope.topicsSelected = series.length; }; @@ -373,7 +380,7 @@ }; $scope.$watchCollection('opts.selectedTopics', $scope.redrawGraph); - $scope.$watch('opts.seqstyle', $scope.redrawGraph); + $scope.$watchGroup(['opts.seqstyle', 'opts.chartstyle'], $scope.redrawGraph); } ]); @@ -387,14 +394,19 @@ app.controller('ArticlesIndexController', ['$scope', '$state', '$location', 'ArticleFactory', function($scope, $state, $location, ArticleFactory) { + $scope.opts = { + sort: 'date', + order: '+' + }; + $scope.page = Math.max($location.search().page || 1, 1); $scope.limit = Vipra.config.pageSize; - $scope.$watchGroup(['page', 'sort', 'order'], function() { + $scope.$watchGroup(['page', 'opts.sort', 'opts.order'], function() { ArticleFactory.query({ skip: ($scope.page - 1) * $scope.limit, limit: $scope.limit, - sort: $scope.order + $scope.sort + sort: $scope.opts.order + $scope.opts.sort }, function(data, headers) { $scope.articles = data; $scope.articlesTotal = headers("V-Total"); @@ -471,19 +483,22 @@ /** * Topic Index route */ - app.controller('TopicsIndexController', ['$scope', '$location', 'Store', 'TopicFactory', - function($scope, $location, Store, TopicFactory) { + app.controller('TopicsIndexController', ['$scope', '$location', 'TopicFactory', + function($scope, $location, TopicFactory) { + + $scope.opts = { + sort: 'name', + order: '+' + }; $scope.page = Math.max($location.search().page || 1, 1); $scope.limit = Vipra.config.pageSize; - $scope.sort = Store('sorttopics') || 'name'; - $scope.order = Store('ordertopics') || '+'; - $scope.$watchGroup(['page', 'sort', 'order'], function() { + $scope.$watchGroup(['page', 'opts.sort', 'opts.order'], function() { TopicFactory.query({ skip: ($scope.page - 1) * $scope.limit, limit: $scope.limit, - sort: $scope.order + $scope.sort + sort: $scope.opts.order + $scope.opts.sort }, function(data, headers) { $scope.topics = data; $scope.topicsTotal = headers("V-Total"); @@ -503,8 +518,7 @@ function($scope, $stateParams, $timeout, TopicFactory) { $scope.opts = { - wordSort: $scope.wordSort || 'likeliness', - wordSortRev: typeof $scope.wordSortRev === 'undefined' ? true : $scope.wordSortRev + seqstyle: 'absolute' }; TopicFactory.get({ @@ -586,20 +600,23 @@ /** * Topic Show Articles route */ - app.controller('TopicsArticlesController', ['$scope', '$stateParams', '$location', 'Store', 'TopicFactory', - function($scope, $stateParams, $location, Store, TopicFactory) { + app.controller('TopicsArticlesController', ['$scope', '$stateParams', '$location', 'TopicFactory', + function($scope, $stateParams, $location, TopicFactory) { + + $scope.opts = { + sort: 'name', + order: '+' + }; $scope.page = Math.max($location.search().page || 1, 1); $scope.limit = Vipra.config.pageSize; - $scope.sort = Store('sortarticles') || 'title'; - $scope.order = Store('orderarticles') || '+'; - $scope.$watchGroup(['page', 'sort', 'order'], function() { + $scope.$watchGroup(['page', 'opts.sort', 'opts.order'], function() { TopicFactory.articles({ id: $stateParams.id, skip: ($scope.page - 1) * $scope.limit, limit: $scope.limit, - sort: $scope.order + $scope.sort + sort: $scope.opts.order + $scope.opts.sort }, function(data, headers) { $scope.articles = data; $scope.articlesTotal = headers("V-Total"); @@ -663,10 +680,10 @@ * Shared Highcharts configurations ****************************************************************************/ - function areaRelevanceChart(series, clickCallback) { + function areaRelevanceChart(series, clickCallback, chartType) { return { chart: { - type: 'areaspline', + type: (chartType || 'areaspline'), zoomType: 'x', spacingLeft: 0, spacingRight: 0 diff --git a/vipra-ui/app/js/directives.js b/vipra-ui/app/js/directives.js index 754ef28f055d8ba21d4e7289a2b111cebced0eb8..bd32cca328ae412a565d5dfef31aca6dcb8af53d 100644 --- a/vipra-ui/app/js/directives.js +++ b/vipra-ui/app/js/directives.js @@ -88,44 +88,12 @@ $ctrl.$render(); } $scope.$watch($attrs.ngModel, function() { - Store(key, $ctrl.$viewValue); + Store(key, typeof $ctrl.$viewValue === 'undefined' ? null : $ctrl.$viewValue); }); } }; }]); - app.directive('sortBy', ['Store', function(Store) { - return { - scope: { - sortBy: '@', - ngModel: '=', - sortReverse: '=', - storeKey: '@ngModel' - }, - restrict: 'A', - transclude: true, - template: '<span ng-click="click()"><ng-transclude/><span ng-show="ngModel == sortBy" class="caret" ng-class="{\'caret-up\':sortReverse}"></span></span>', - link: function($scope, $elem, $attrs) { - if (!$attrs.sortBy) { - console.log('no sort by key given'); - return; - } - var value = Store($scope.storeKey); - if (value) { - value = value.split(','); - $scope.ngModel = value[0]; - $scope.sortReverse = value[1] === 'true'; - } - $scope.sortBy = $attrs.sortBy; - $scope.click = function() { - $scope.ngModel = $scope.sortBy; - $scope.sortReverse = !$scope.sortReverse; - Store($scope.storeKey, $scope.ngModel + ',' + $scope.sortReverse); - }; - } - }; - }]); - app.directive('bsRadio', function() { return { scope: { diff --git a/vipra-ui/app/less/app.less b/vipra-ui/app/less/app.less index b2789ca044a4f67eccf1045b538d7ee4fcd0216d..85fbef43bfb48513d19076569853be3e52263922 100644 --- a/vipra-ui/app/less/app.less +++ b/vipra-ui/app/less/app.less @@ -106,11 +106,12 @@ ul.dashed { .graph-legend { position: absolute; - top: 50px; + top: 10px; left: 10px; font-weight: bold; padding: 10px; - background: #fff; + background: rgba(255,255,255,0.75); + border-radius: 5px; label { margin: 0; @@ -119,6 +120,14 @@ ul.dashed { label + label { padding-left: 5px; } + + .checkbox:first-child { + margin-top: 0; + } + + .checkbox:last-child { + margin-bottom: 0; + } } .initial { @@ -147,10 +156,10 @@ ul.dashed { left: 0; right: 0; bottom: 0; -} -.navpadding { - padding-top: 51px; + &.navpadding { + top: 51px; + } } .form-control-inline { @@ -230,11 +239,6 @@ revolve-select, [revolve-select] { cursor: pointer; } -[sort-by] { - .noselect; - cursor: pointer; -} - #nprogress .spinner { display: none; } @@ -285,13 +289,14 @@ revolve-select, [revolve-select] { } .explorer { - display: flex; - flex-direction: row; - flex-wrap: wrap; + @sidebar-width: 250px; .sidebar { - flex: 0 0 250px; - width: 250px; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: @sidebar-width; background: #f9f9f9; height: 100%; padding: 5px; @@ -301,6 +306,14 @@ revolve-select, [revolve-select] { } } + .chart { + position: absolute; + top: 0; + left: @sidebar-width; + right: 0; + bottom: 0; + } + .topbar { background: #f9f9f9; width: 100%; @@ -308,11 +321,6 @@ revolve-select, [revolve-select] { vertical-align: middle; } - .chart { - flex: 1 0 0; - padding: 5px; - } - .sequence { flex: 1 0 0; } @@ -390,6 +398,19 @@ input[type=checkbox], color: #ccc; } +.highcharts-container { + width: 100% !important; +} + +.btn-default-none { + &, &:focus, &:hover, &:active { + .noselect; + background: transparent; + cursor: default; + box-shadow: none; + } +} + @-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); } }