Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

view, scss, templates

This commit is contained in:
hkernbach 2016-04-13 11:12:55 +02:00
parent 83a385bd74
commit 79a57b9fc8
20 changed files with 156 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/apps/system/_admin/aardvark/APP/frontend/js/templates/applicationsView.ejs
View File

@ -44,8 +44,8 @@
<div class="contentDiv">
<div id="installed">
<div id="installedList" class="tileList">
<div class="tile">
<div id="installedList" class="tileList pure-u">
<div class="tile pure-u-1-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-6">
<div class="fullBorderBox">
<a href="#" id="addApp" class="add"><span class="pull-left add-Icon"><i class="fa fa-plus-circle"></i>
</span> Add Service</a>

76
js/apps/system/_admin/aardvark/APP/frontend/js/templates/collectionsItemView.ejs
View File

@ -1,44 +1,46 @@
<script id="collectionsItemView.ejs" type="text/template">
<div class="borderBox"></div>
<div class="iconSet">
<span id="editCollection_<%=model.get('name')%>" class="icon_arangodb_settings2" alt="Edit collection properties" title="Edit collection properties"></span>
<% if(model.get('status') === "loaded") { %>
<span id="info_<%=model.get('name')%>" class="spanInfo icon_arangodb_info" title="Show collection properties"></span>
<%} else {%>
<span class="icon_arangodb_info disabled" alt="disabled"></span>
<%}%>
</div>
<div class="paddingBox">
<div class="borderBox"></div>
<div class="iconSet">
<span id="editCollection_<%=model.get('name')%>" class="icon_arangodb_settings2" alt="Edit collection properties" title="Edit collection properties"></span>
<% if(model.get('status') === "loaded") { %>
<span id="info_<%=model.get('name')%>" class="spanInfo icon_arangodb_info" title="Show collection properties"></span>
<%} else {%>
<span class="icon_arangodb_info disabled" alt="disabled"></span>
<%}%>
</div>
<i class="collection-type-icon fa <%= model.get('picture') %>"></i>
<!--<img src="<%= model.get('picture') %>" height="50" width="50" alt="" class="icon">-->
<div class="tileBadge">
<span>
<% if(model.get('desc')) { %>
<div class="corneredBadge inProgress">
<%= model.get('desc') %>
</div>
<% } else if (model.get('status') === "loaded" || model.get('status') === 'unloaded' || model.get('status') === 'loading' || model.get('status') === 'unloading') { %>
<% if (!model.get('locked') && model.get("status") !== "loading" && model.get("status") !== "unloading") { %>
<div class="corneredBadge <%= model.get('status') %>">
<%= model.get('status') %>
</div>
<% } else if (model.get('status') === 'loading' || model.get('status') === 'unloading') { %>
<i class="collection-type-icon fa <%= model.get('picture') %>"></i>
<!--<img src="<%= model.get('picture') %>" height="50" width="50" alt="" class="icon">-->
<div class="tileBadge">
<span>
<% if(model.get('desc')) { %>
<div class="corneredBadge inProgress">
<%= model.get('status') %>
</div>
<% } else { %>
<div class="corneredBadge inProgress">
<%= model.get('status') %>
<%= model.get('desc') %>
</div>
<% } else if (model.get('status') === "loaded" || model.get('status') === 'unloaded' || model.get('status') === 'loading' || model.get('status') === 'unloading') { %>
<% if (!model.get('locked') && model.get("status") !== "loading" && model.get("status") !== "unloading") { %>
<div class="corneredBadge <%= model.get('status') %>">
<%= model.get('status') %>
</div>
<% } else if (model.get('status') === 'loading' || model.get('status') === 'unloading') { %>
<div class="corneredBadge inProgress">
<%= model.get('status') %>
</div>
<% } else { %>
<div class="corneredBadge inProgress">
<%= model.get('status') %>
</div>
<% } %>
<% } %>
<% } %>
</span>
</div>
</span>
</div>
<% if(model.get('lockType') === "index") { %>
<!-- <progress max="100" value="80"></progress>-->
<h5 class="collectionName"><%= model.get('name') %></h5>
<% } else { %>
<h5 class="collectionName"><%= model.get('name') %></h5>
<% } %>
<% if(model.get('lockType') === "index") { %>
<!-- <progress max="100" value="80"></progress>-->
<h5 class="collectionName"><%= model.get('name') %></h5>
<% } else { %>
<h5 class="collectionName"><%= model.get('name') %></h5>
<% } %>
</div>
</script>

4
js/apps/system/_admin/aardvark/APP/frontend/js/templates/collectionsView.ejs
View File

@ -103,8 +103,8 @@
</div>
<div class="contentDiv" id="arangoCollectionsContainer">
<div id="collectionsThumbnailsIn" class="tileList">
<div class="tile">
<div id="collectionsThumbnailsIn" class="tileList pure-g">
<div class="tile pure-u-1-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-6">
<div class="fullBorderBox">
<a href="#" id="createCollection" class="add"><span id="newCollection" class="pull-left add-Icon"><i class="fa fa-plus-circle"></i>
</span> Add Collection</a>

4
js/apps/system/_admin/aardvark/APP/frontend/js/templates/databaseView.ejs
View File

@ -40,8 +40,8 @@
<div class="contentDiv" id="arangoCollectionsContainer">
<div class="tileList">
<div class="tile">
<div class="tileList pure-u">
<div class="tile pure-u-1-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-6">
<div class="fullBorderBox">
<a href="#" id="createDatabase" class="add">
<span id="newDatabase" class="pull-left add-Icon"><i class="fa fa-plus-circle"></i></span>

2
js/apps/system/_admin/aardvark/APP/frontend/js/templates/footerView.ejs
View File

@ -20,6 +20,6 @@
</div>
<div class="footer-right">
<p><% if(n) { %><i class="isOnline fa fa-check-circle-o serverStatusIndicator"></i><a><%=n%> <%=v%> <% } %></a></i></p>
<p><% if(n) { %><a><%=n%> <%=v%> <% } %></a></p>
</div>
</script>

6
js/apps/system/_admin/aardvark/APP/frontend/js/templates/graphManagementView.ejs
View File

@ -36,8 +36,8 @@
<div class="contentDiv" id="arangoCollectionsContainer">
<div id="graphManagementThumbnailsIn" class="tileList">
<div class="tile">
<div id="graphManagementThumbnailsIn" class="tileList pure-u">
<div class="tile pure-u-1-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-6">
<div class="fullBorderBox">
<a href="#" id="createGraph" class="add">
<span id="newGraph" class="pull-left add-Icon"><i class="fa fa-plus-circle"></i></span>
@ -51,7 +51,7 @@
var graphName = graph.get("_key");
%>
<div class="tile tile-graph" id="<%=graphName %>_tile">
<div class="tile tile-graph pure-u-1-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-6" id="<%=graphName %>_tile">
<div class="borderBox"></div>
<div class="iconSet">
<span class="icon_arangodb_settings2 editGraph" id="<%=graphName %>_settings" alt="Edit graph" title="Edit graph"></span>

25
js/apps/system/_admin/aardvark/APP/frontend/js/templates/navigationView.ejs
View File

@ -70,29 +70,4 @@
-->
</ul>
<select id="arangoCollectionSelect" class="arango-collection-select">
<option value="" selected="selected">Select</option>
<option value="#">Dashboard</option>
<% if(currentDB.get('isSystem')) { %>
<option value="#databases">Databases</option>
<% } %>
<option value="#collections">Collections</option>
<option value="#applications">Services</option>
<option value="#graph">Graph</option>
<option value="#query">AQL Editor</option>
<option value="#shell">JS Shell</option>
<option value="#userManagement">User Management</option>
<option value="#queryManagement">Query Management</option>
<option value="#workMonitor">Work Monitor</option>
<% if(currentDB.get('isSystem')) { %>
<option value="#logs">Logs</option>
<% } %>
</select>
</script>

2
js/apps/system/_admin/aardvark/APP/frontend/js/templates/subNavigationView.ejs
View File

@ -4,7 +4,7 @@
<li class="subMenuEntry pull-left">
<div class="breadcrumb"></div>
</li>
<li class="subMenuEntry pull-right">
<li id="healthStatus" class="subMenuEntry pull-right">
<a class="health-info">HEALTH: </a>
<a class="health-state">GOOD</a>
<a class="health-icon">

6
js/apps/system/_admin/aardvark/APP/frontend/js/templates/userManagementView.ejs
View File

@ -51,8 +51,8 @@
<div class="contentDiv" id="arangoCollectionsContainer">
<div id="userManagementThumbnailsIn" class="tileList">
<div class="tile">
<div id="userManagementThumbnailsIn" class="tileList pure-u">
<div class="tile pure-u-1-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-6">
<div class="fullBorderBox">
<a href="#" id="createUser" class="add">
<span id="newUser" class="pull-left add-Icon"><i class="fa fa-plus-circle"></i></span>
@ -85,7 +85,7 @@
}
%>
<div class="tile">
<div class="tile pure-u-1-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-6">
<div class="borderBox"></div>
<div class="iconSet">
<span class="icon_arangodb_settings2 editUser" id="<%=_.escape(username) %>_edit-user" alt="Edit user" title="Edit user"></span>

2
js/apps/system/_admin/aardvark/APP/frontend/js/views/collectionsItemView.js
View File

@ -8,7 +8,7 @@
window.CollectionListItemView = Backbone.View.extend({
tagName: "div",
className: "tile",
className: "tile pure-u-1-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-6",
template: templateEngine.createTemplate("collectionsItemView.ejs"),
initialize: function (options) {

22
js/apps/system/_admin/aardvark/APP/frontend/js/views/footerView.js
View File

@ -32,15 +32,19 @@
template: templateEngine.createTemplate("footerView.ejs"),
showServerStatus: function(isOnline) {
if (isOnline === true) {
$('.serverStatusIndicator').addClass('isOnline');
$('.serverStatusIndicator').addClass('fa-check-circle-o');
$('.serverStatusIndicator').removeClass('fa-times-circle-o');
}
else {
$('.serverStatusIndicator').removeClass('isOnline');
$('.serverStatusIndicator').removeClass('fa-check-circle-o');
$('.serverStatusIndicator').addClass('fa-times-circle-o');
if (!window.App.isCluster) {
if (isOnline === true) {
$('#healthStatus').removeClass('negative');
$('#healthStatus').addClass('positive');
$('.health-state').html('GOOD');
$('.health-icon').html('<i class="fa fa-check-circle"></i>');
}
else {
$('#healthStatus').removeClass('positive');
$('#healthStatus').addClass('negative');
$('.health-state').html('OFFLINE');
$('.health-icon').html('<i class="fa fa-exclamation-circle"></i>');
}
}
},

2
js/apps/system/_admin/aardvark/APP/frontend/js/views/foxxActiveView.js
View File

@ -7,7 +7,7 @@
window.FoxxActiveView = Backbone.View.extend({
tagName: 'div',
className: 'tile',
className: 'tile pure-u-1-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-6',
template: templateEngine.createTemplate('foxxActiveView.ejs'),
_show: true,

2
js/apps/system/_admin/aardvark/APP/frontend/js/views/queryView2.js
View File

@ -1210,7 +1210,7 @@
setEditorAutoHeight: function (editor) {
editor.setOptions({
maxLines: 100,
minLines: 3
minLines: 10
});
},

3
js/apps/system/_admin/aardvark/APP/frontend/scss/_applicationDetailView.scss
View File

@ -111,14 +111,13 @@
border: 1px solid $c-content-border;
border-radius: 3px;
clear: right;
float: left;
float: right;
height: 182px;
margin-top: 12px;
max-height: 182px;
max-width: 182px;
overflow-x: hidden;
position: relative;
right: -16px;
width: 182px;
dl {

2
js/apps/system/_admin/aardvark/APP/frontend/scss/_colors.scss
View File

@ -177,3 +177,5 @@ $c-bluegrey-light: rgba(64, 74, 83, .8);
$c-bluegrey-border: rgba(64, 74, 83, .2);
$c-bluegrey-nontransp: rgb(217, 219, 220);
$c-bluegrey-bg: rgba(64, 74, 83, .04);
$c-active-green: rgb(119, 203, 153);

17
js/apps/system/_admin/aardvark/APP/frontend/scss/_navbar.scss
View File

@ -42,9 +42,9 @@ $navbar-size: 150px;
.arangodbLogo {
height: auto;
margin-left: -5px;
margin-top: 6px;
width: $navbar-size;
margin-left: 6px;
margin-top: 15px;
width: $navbar-size - 12px;
}
.arango-collection-select {
@ -89,12 +89,8 @@ $navbar-size: 150px;
.navlogo {
@extend %pull-left;
padding: {
bottom: 5px;
left: 14px;
right: 5px;
top: 5px;
};
height: 60px;
width: 100%;
}
.navmenu {
@ -146,10 +142,11 @@ $navbar-size: 150px;
}
.active {
border-left: 2px solid $c-bluegrey-nontransp;
border-left: 2px solid $c-active-green;
.tab {
color: $c-white;
margin-left: -2px;
.fa {
opacity: 1;

4
js/apps/system/_admin/aardvark/APP/frontend/scss/_newDashboard.scss
View File

@ -433,6 +433,10 @@
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
.fa-arrows-alt {
display: none;
}
}

9
js/apps/system/_admin/aardvark/APP/frontend/scss/_resizing.scss
View File

@ -10,20 +10,11 @@
}
@media (max-width: 738px) {
#arangoCollectionUl {
display: none;
}
#collectionsDropdown ul {
width: auto !important;
}
#arangoCollectionSelect {
display: inline-block;
height: 29px;
margin-top: 1px;
}
.footer-center {
p {
display: none;

29
js/apps/system/_admin/aardvark/APP/frontend/scss/_subNavbar.scss
View File

@ -8,11 +8,14 @@
list-style: none;
margin: 0;
&.top,
&.bottom {
height: 40px;
}
&.top {
height: 60px;
}
&.top {
//background-color: $c-navbar-main-color;
background-color: $c-bluegrey-dark;
@ -78,6 +81,22 @@
}
}
#healthStatus {
&.positive {
.health-state,
.health-icon {
color: $c-positive;
}
}
&.negative {
.health-state,
.health-icon {
color: $c-negative;
}
}
}
.health-info,
.db-info,
.db-state,
@ -91,12 +110,4 @@
color: rgba(255, 255, 255, .95);
}
.health-state {
color: $c-positive;
}
.health-icon {
color: $c-positive;
}
}

67
js/apps/system/_admin/aardvark/APP/frontend/scss/_tiles.scss
View File

@ -1,7 +1,8 @@
.tileList {
@extend %clear-float;
margin-left: -6px;
margin-right: -6px;
//margin-left: -6px;
//margin-right: -6px;
width: 100%;
legend {
padding-left: 5px;
@ -24,15 +25,15 @@ $iconsize: 50px;
@extend %pull-left;
@include box-shadow(none);
background-color: $c-white;
//background-color: $c-white;
//border: 1px solid $c-lightgreen-2-bg;
border-radius: 2px;
font-size: 14px;
list-style: none;
margin: {
bottom: 13px;
left: 6px;
right: 6px;
//left: 6px;
//right: 6px;
}
position: relative;
text-align: center;
@ -117,7 +118,9 @@ $iconsize: 50px;
.collection-type-icon {
color: $c-darker-grey;
font-size: 30pt;
margin-top: 12pt;
margin-left: -18px;
position: absolute;
top: 15px;
}
.collection-type-icon:hover {
@ -129,6 +132,7 @@ $iconsize: 50px;
&.icon {
height: $iconsize;
margin-top: -110px;
width: $iconsize;
}
@ -180,12 +184,21 @@ $iconsize: 50px;
color: $c-icon-grey;
font-size: $iconsize;
line-height: 1.2;
margin-left: -50px;
top: 10px;
}
.icon_arangodb_edge5-2,
.tile-icon {
position: absolute;
top: 15px;
}
.icon_arangodb_edge5-2 {
display: inline-block;
position: relative;
top: 15px;
margin-left: 5px;
position: absolute;
top: 0;
-moz-transform: rotate(80deg);
-o-transform: rotate(80deg);
-webkit-transform: rotate(80deg);
@ -196,6 +209,8 @@ $iconsize: 50px;
color: $c-white;
font-size: 12px;
margin: 0;
margin-left: 5px;
margin-right: 5px;
overflow: hidden !important;
padding: 4px 8px;
text-overflow: ellipsis !important;
@ -221,20 +236,32 @@ $iconsize: 50px;
}
.fullBorderBox {
background-color: $c-white;
border: 1px solid $c-tile-border;
border-radius: 2px;
box-sizing: border-box;
height: 100%;
position: absolute;
width: 100%;
margin-left: 5px;
margin-right: 5px;
position: relative;
width: auto;
}
.paddingBox {
box-sizing: border-box;
padding-left: 5px;
padding-right: 5px;
}
.borderBox {
background-color: $c-white;
border: 1px solid $c-bluegrey-border;
border-bottom: 0;
border-radius: 2px;
box-sizing: border-box;
height: 75px;
position: absolute;
width: 224px;
position: relative;
width: 100%;
}
.iconSet {
@ -315,7 +342,7 @@ $iconsize: 50px;
color: $c-white;
height: 0;
margin-bottom: 4px;
margin-right: 5px;
margin-right: 10px;
padding-left: 1px;
padding-right: 6px;
@ -343,15 +370,27 @@ $iconsize: 50px;
}
}
#installedList,
#userManagementThumbnailsIn {
h5 {
margin: 0;
}
}
div {
.tile {
@extend %tile;
height: 100px;
width: $tile-width - 14px;
//width: $tile-width - 14px;
}
.tile-graph {
h5 {
margin: 0;
}
.tile-icon:hover {
cursor: pointer;
}