Skip to content
Snippets Groups Projects
Commit 4b9ca554 authored by Eike Cochu's avatar Eike Cochu
Browse files

added explorer split, updated entities show page

parent 857eab3a
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
vipra-ui/app/html/entities/show.html
+ 48
− 0
View file @ 4b9ca554
...@@ -2,5 +2,53 @@ ...@@ -2,5 +2,53 @@
<div class="page-header no-border"> <div class="page-header no-border">
<h1 ng-bind="::entity.id"></h1> <h1 ng-bind="::entity.id"></h1>
</div> </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>
<div ng-cloak ui-view></div> <div ng-cloak ui-view></div>
\ No newline at end of file
vipra-ui/app/html/explorer.html
+ 75
− 65
View file @ 4b9ca554
<div class="fullsize navpadding explorer" ng-cloak ng-hide="!rootModels.topicModel || state.name !== 'explorer'"> <div class="fullsize navpadding container-fluid explorer" ng-cloak ng-hide="!rootModels.topicModel || state.name !== 'explorer'">
<div class="sidebar"> <div class="row row-50">
<div class="btn-group btn-group-justified" role="group" aria-label="..."> <div class="col-xs-2 sidebar">
<a tabindex="0" class="btn btn-sm btn-default" ng-click="checkTopics(true)" title="Select all topics">All</a> <div class="btn-group btn-group-justified" role="group" aria-label="...">
<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(true)" title="Select all topics">All</a>
<a tabindex="0" 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(false)" title="Deselect all topics">None</a>
</div> <a tabindex="0" class="btn btn-sm btn-default" ng-click="checkTopics()" title="Toggle all topics">Toggle</a>
<div class="btn-group btn-group-justified"> </div>
<a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'name'" title="Sort by name">&#945;</a> <div class="btn-group btn-group-justified">
<a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'avgRelevance'" title="Sort by average relevance">&#956;</a> <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'name'" title="Sort by name">&#945;</a>
<a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'varRelevance'" title="Sort by variance in relevance">&#963;</a> <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'avgRelevance'" title="Sort by average relevance">&#956;</a>
<a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'fallingRelevance'" title="Sort by falling relevance">&#8600;</a> <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'varRelevance'" title="Sort by variance in relevance">&#963;</a>
<a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'risingRelevance'" title="Sort by rising relevance">&#8599;</a> <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'fallingRelevance'" title="Sort by falling relevance">&#8600;</a>
<a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'risingDecayRelevance'" title="Sort by rising relevance with decay">&#8605;</a> <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.sorttopics" bs-radio="'risingRelevance'" title="Sort by rising relevance">&#8599;</a>
<a tabindex="0" 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="'risingDecayRelevance'" title="Sort by rising relevance with decay">&#8605;</a>
<sort-dir ng-model="explorerModels.sortdir" /> <a tabindex="0" class="btn btn-sm btn-link btn-plain" ng-click="explorerModels.sortdir=!explorerModels.sortdir">
</a> <sort-dir ng-model="explorerModels.sortdir" />
</div> </a>
<div class="btn-group btn-group-justified" ng-class="{'has-warning':search}"> </div>
<input type="text" class="form-control" ng-model="search.$" placeholder="Filter"> <div class="btn-group btn-group-justified" ng-class="{'has-warning':search}">
<span class="glyphicon glyphicon-remove-circle searchclear" ng-click="search=''"></span> <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> </div>
<ul class="list-unstyled topic-choice"> <div class="col-xs-10 center">
<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="wrapper">
<div class="checkbox checkbox-condensed" ng-class="{selected:topic.selected}"> <div class="topbar">
<span class="valuebar" ng-style="{width:topic.topicCurrValue}"></span> <small>Values:</small>
<input tabindex="0" type="checkbox" ng-model="topic.selected" ng-attr-id="{{::topic.id}}" ng-change="redrawGraph()"> <div class="btn-group">
<label class="check" ng-attr-for="{{::topic.id}}"> <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.seqstyle" bs-radio="'absolute'">Absolute</a>
<topic-menu topic="topic" class="menu-button" /> <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.seqstyle" bs-radio="'relative'">Relative</a>
<span class="ellipsis" ng-attr-title="{{::topic.name}}"> </div>
<span ng-bind="topic.name"></span> &nbsp;
</span> <small>Chart:</small>
</label> <div class="btn-group">
<span class="colorbox" style="background:{{::topic.color}}" bs-popover popover-title="{{topic.name}}" popover-template="partials/topic-popover.html" popover-delay="500"></span> <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.chartstyle" bs-radio="'areaspline'">Area</a>
</div> <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.chartstyle" bs-radio="'spline'">Line</a>
</li> </div>
<li ng-hide="topics.length > 0"> &nbsp;
<p class="text-muted text-center">No topics</p> <small>Stacking:</small>
</li> <div class="btn-group">
</ul> <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.chartstack" bs-radio="'none'">None</a>
</div> <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.chartstack" bs-radio="'normal'">Value</a>
<div class="center message-container"> <a tabindex="0" class="btn btn-sm btn-default" ng-model="explorerModels.chartstack" bs-radio="'percent'">Percent</a>
<div class="wrapper"> </div>
<div class="topbar"> <div class="pull-right">
<small>Values:</small> <a tabindex="0" class="btn btn-sm btn-default" ng-click="resetZoom()" ng-show="topicsSelected" ng-cloak>Reset zoom</a>
<div class="btn-group"> </div>
<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>
&nbsp;
<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>
&nbsp;
<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>
<div id="topicRelChart" class="chart" highcharts="topicSeq" style="height:500px"></div>
</div> </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
vipra-ui/app/less/app.less
+ 19
− 13
View file @ 4b9ca554
...@@ -242,30 +242,27 @@ a:hover { ...@@ -242,30 +242,27 @@ a:hover {
} }
.explorer { .explorer {
@sidebar-width: 300px;
@sidebar-padding: 5px; @sidebar-padding: 5px;
.sidebar { .sidebar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: @sidebar-width;
background: #f9f9f9; background: #f9f9f9;
height: 100%;
padding: @sidebar-padding; padding: @sidebar-padding;
height: 100%;
> * + * { > * + * {
margin-top: 5px; margin-top: 5px;
} }
} }
.center { .center {
position: absolute; padding: 0;
top: 0; height: 100%;
left: @sidebar-width;
right: 0;
bottom: 0;
} }
.chart { .chart {
padding: 15px; padding: 15px;
position: absolute;
top: 35px;
left: 0;
right: 0;
bottom: 0;
height: auto !important;
} }
.sequence { .sequence {
flex: 1 0 0; flex: 1 0 0;
...@@ -274,8 +271,9 @@ a:hover { ...@@ -274,8 +271,9 @@ a:hover {
position: absolute; position: absolute;
top: 110px; top: 110px;
bottom: 0; bottom: 0;
left: @sidebar-padding;
right: @sidebar-padding;
overflow-y: auto; overflow-y: auto;
width: @sidebar-width - (2 * @sidebar-padding);
margin-bottom: 0; margin-bottom: 0;
label { label {
padding-right: 15px; padding-right: 15px;
...@@ -524,6 +522,14 @@ entity-menu { ...@@ -524,6 +522,14 @@ entity-menu {
} }
} }
.row-50 {
height: 50%;
& + & {
border-top: 1px solid #ddd;
}
}
@-moz-keyframes spin { @-moz-keyframes spin {
100% { 100% {
-moz-transform: rotateY(360deg); -moz-transform: rotateY(360deg);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment