From 4b9ca5544924a3be4e87f8d95bd1c730d231d955 Mon Sep 17 00:00:00 2001
From: Eike Cochu <eike@cochu.com>
Date: Tue, 19 Apr 2016 22:10:50 +0200
Subject: [PATCH] added explorer split, updated entities show page
---
vipra-ui/app/html/entities/show.html | 48 +++++++++
vipra-ui/app/html/explorer.html | 140 ++++++++++++++-------------
vipra-ui/app/less/app.less | 32 +++---
3 files changed, 142 insertions(+), 78 deletions(-)
diff --git a/vipra-ui/app/html/entities/show.html b/vipra-ui/app/html/entities/show.html
index d3f32700..cfde94fe 100644
--- a/vipra-ui/app/html/entities/show.html
+++ b/vipra-ui/app/html/entities/show.html
@@ -2,5 +2,53 @@
<div class="page-header no-border">
<h1 ng-bind="::entity.id"></h1>
</div>
+ <div>
+ <ul class="nav nav-tabs" role="tablist">
+ <li class="active">
+ <a data-target=".tab-info" data-toggle="tab" bs-tab><i class="fa fa-file-text-o"></i></a>
+ </li>
+ <li>
+ <a ui-sref="entities.show.articles({id:entity.id})">
+ Articles
+ </a>
+ </li>
+ </ul>
+ <div class="tab-content">
+ <div role="tabpanel" class="tab-pane active tab-info">
+ <h3>Info</h3>
+ <table class="table table-bordered table-condensed table-fixed">
+ <tbody>
+ <tr>
+ <th class="infocol">ID</th>
+ <td ng-bind="::entity.id"></td>
+ </tr>
+ <tr ng-if="entity.url">
+ <th>URL</th>
+ <td>
+ <a ng-href="{{::entity.url}}" target="_blank">
+ <i class="fa fa-link"></i>
+ <span ng-bind="::entity.url"></span>
+ </a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <h3>Types</h3>
+ <table class="table table-bordered table-condensed table-fixed" ng-show="entity.types.length" ng-cloak>
+ <thead>
+ <tr>
+ <th>Name</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr ng-repeat="type in entity.types">
+ <td ng-bind="type"></td>
+ </tr>
+ </tbody>
+ </table>
+ <p class="text-muted" ng-hide="entity.types.length">No types</p>
+ </div>
+ </div>
+ </div>
</div>
<div ng-cloak ui-view></div>
\ No newline at end of file
diff --git a/vipra-ui/app/html/explorer.html b/vipra-ui/app/html/explorer.html
index 1ad45367..9cd0b7ee 100644
--- a/vipra-ui/app/html/explorer.html
+++ b/vipra-ui/app/html/explorer.html
@@ -1,70 +1,80 @@
-<div class="fullsize navpadding explorer" ng-cloak ng-hide="!rootModels.topicModel || state.name !== 'explorer'">
- <div class="sidebar">
- <div class="btn-group btn-group-justified" role="group" aria-label="...">
- <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 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>
- <div class="btn-group btn-group-justified" ng-class="{'has-warning':search}">
- <input type="text" class="form-control" ng-model="search.$" placeholder="Filter">
- <span class="glyphicon glyphicon-remove-circle searchclear" ng-click="search=''"></span>
+<div class="fullsize navpadding container-fluid explorer" ng-cloak ng-hide="!rootModels.topicModel || state.name !== 'explorer'">
+ <div class="row row-50">
+ <div class="col-xs-2 sidebar">
+ <div class="btn-group btn-group-justified" role="group" aria-label="...">
+ <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 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>
+ <div class="btn-group btn-group-justified" ng-class="{'has-warning':search}">
+ <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: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 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" class="menu-button" />
+ <span class="ellipsis" ng-attr-title="{{::topic.name}}">
+ <span ng-bind="topic.name"></span>
+ </span>
+ </label>
+ <span class="colorbox" style="background:{{::topic.color}}" bs-popover popover-title="{{topic.name}}" popover-template="partials/topic-popover.html" popover-delay="500"></span>
+ </div>
+ </li>
+ <li ng-hide="topics.length > 0">
+ <p class="text-muted text-center">No topics</p>
+ </li>
+ </ul>
</div>
- <ul class="list-unstyled topic-choice">
- <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 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" class="menu-button" />
- <span class="ellipsis" ng-attr-title="{{::topic.name}}">
- <span ng-bind="topic.name"></span>
- </span>
- </label>
- <span class="colorbox" style="background:{{::topic.color}}" bs-popover popover-title="{{topic.name}}" popover-template="partials/topic-popover.html" popover-delay="500"></span>
- </div>
- </li>
- <li ng-hide="topics.length > 0">
- <p class="text-muted text-center">No topics</p>
- </li>
- </ul>
- </div>
- <div class="center message-container">
- <div class="wrapper">
- <div class="topbar">
- <small>Values:</small>
- <div class="btn-group">
- <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 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 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 tabindex="0" class="btn btn-sm btn-default" ng-click="resetZoom()" ng-show="topicsSelected" ng-cloak>Reset zoom</a>
+ <div class="col-xs-10 center">
+ <div class="wrapper">
+ <div class="topbar">
+ <small>Values:</small>
+ <div class="btn-group">
+ <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 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 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 tabindex="0" class="btn btn-sm btn-default" ng-click="resetZoom()" ng-show="topicsSelected" ng-cloak>Reset zoom</a>
+ </div>
</div>
+ <div id="topicRelChart" class="chart" highcharts="topicSeq" style="height:500px"></div>
</div>
- <div id="topicRelChart" class="chart" highcharts="topicSeq" style="height:500px"></div>
</div>
</div>
-</div>
+ <div class="row row-50">
+ <div class="col-xs-2 sidebar">
+
+ </div>
+ <div class="col-xs-10 center">
+
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/vipra-ui/app/less/app.less b/vipra-ui/app/less/app.less
index 48c80f79..10c849f8 100644
--- a/vipra-ui/app/less/app.less
+++ b/vipra-ui/app/less/app.less
@@ -242,30 +242,27 @@ a:hover {
}
.explorer {
- @sidebar-width: 300px;
@sidebar-padding: 5px;
.sidebar {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- width: @sidebar-width;
background: #f9f9f9;
- height: 100%;
padding: @sidebar-padding;
+ height: 100%;
> * + * {
margin-top: 5px;
}
}
.center {
- position: absolute;
- top: 0;
- left: @sidebar-width;
- right: 0;
- bottom: 0;
+ padding: 0;
+ height: 100%;
}
.chart {
padding: 15px;
+ position: absolute;
+ top: 35px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: auto !important;
}
.sequence {
flex: 1 0 0;
@@ -274,8 +271,9 @@ a:hover {
position: absolute;
top: 110px;
bottom: 0;
+ left: @sidebar-padding;
+ right: @sidebar-padding;
overflow-y: auto;
- width: @sidebar-width - (2 * @sidebar-padding);
margin-bottom: 0;
label {
padding-right: 15px;
@@ -524,6 +522,14 @@ entity-menu {
}
}
+.row-50 {
+ height: 50%;
+
+ & + & {
+ border-top: 1px solid #ddd;
+ }
+}
+
@-moz-keyframes spin {
100% {
-moz-transform: rotateY(360deg);
--
GitLab