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
No related branches found
No related tags found
No related merge requests found
......@@ -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
<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">&#945;</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="'varRelevance'" title="Sort by variance in relevance">&#963;</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="'risingRelevance'" title="Sort by rising relevance">&#8599;</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-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">&#945;</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="'varRelevance'" title="Sort by variance in relevance">&#963;</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="'risingRelevance'" title="Sort by rising relevance">&#8599;</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-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>
&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 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>
&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 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
......@@ -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);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment