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 class="contentDiv">
<div id="installed"> <div id="installed">
<div id="installedList" class="tileList"> <div id="installedList" class="tileList pure-u">
<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="fullBorderBox"> <div class="fullBorderBox">
<a href="#" id="addApp" class="add"><span class="pull-left add-Icon"><i class="fa fa-plus-circle"></i> <a href="#" id="addApp" class="add"><span class="pull-left add-Icon"><i class="fa fa-plus-circle"></i>
</span> Add Service</a> </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"> <script id="collectionsItemView.ejs" type="text/template">
<div class="borderBox"></div> <div class="paddingBox">
<div class="iconSet"> <div class="borderBox"></div>
<span id="editCollection_<%=model.get('name')%>" class="icon_arangodb_settings2" alt="Edit collection properties" title="Edit collection properties"></span> <div class="iconSet">
<% if(model.get('status') === "loaded") { %> <span id="editCollection_<%=model.get('name')%>" class="icon_arangodb_settings2" alt="Edit collection properties" title="Edit collection properties"></span>
<span id="info_<%=model.get('name')%>" class="spanInfo icon_arangodb_info" title="Show collection properties"></span> <% if(model.get('status') === "loaded") { %>
<%} else {%> <span id="info_<%=model.get('name')%>" class="spanInfo icon_arangodb_info" title="Show collection properties"></span>
<span class="icon_arangodb_info disabled" alt="disabled"></span> <%} else {%>
<%}%> <span class="icon_arangodb_info disabled" alt="disabled"></span>
</div> <%}%>
</div>
<i class="collection-type-icon fa <%= model.get('picture') %>"></i> <i class="collection-type-icon fa <%= model.get('picture') %>"></i>
<!--<img src="<%= model.get('picture') %>" height="50" width="50" alt="" class="icon">--> <!--<img src="<%= model.get('picture') %>" height="50" width="50" alt="" class="icon">-->
<div class="tileBadge"> <div class="tileBadge">
<span> <span>
<% if(model.get('desc')) { %> <% 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') { %>
<div class="corneredBadge inProgress"> <div class="corneredBadge inProgress">
<%= model.get('status') %> <%= model.get('desc') %>
</div>
<% } else { %>
<div class="corneredBadge inProgress">
<%= model.get('status') %>
</div> </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>
</span> </div>
</div>
<% if(model.get('lockType') === "index") { %> <% if(model.get('lockType') === "index") { %>
<!-- <progress max="100" value="80"></progress>--> <!-- <progress max="100" value="80"></progress>-->
<h5 class="collectionName"><%= model.get('name') %></h5> <h5 class="collectionName"><%= model.get('name') %></h5>
<% } else { %> <% } else { %>
<h5 class="collectionName"><%= model.get('name') %></h5> <h5 class="collectionName"><%= model.get('name') %></h5>
<% } %> <% } %>
</div>
</script> </script>

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

@ -103,8 +103,8 @@
</div> </div>
<div class="contentDiv" id="arangoCollectionsContainer"> <div class="contentDiv" id="arangoCollectionsContainer">
<div id="collectionsThumbnailsIn" class="tileList"> <div id="collectionsThumbnailsIn" class="tileList pure-g">
<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="fullBorderBox"> <div class="fullBorderBox">
<a href="#" id="createCollection" class="add"><span id="newCollection" class="pull-left add-Icon"><i class="fa fa-plus-circle"></i> <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> </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="contentDiv" id="arangoCollectionsContainer">
<div class="tileList"> <div class="tileList pure-u">
<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="fullBorderBox"> <div class="fullBorderBox">
<a href="#" id="createDatabase" class="add"> <a href="#" id="createDatabase" class="add">
<span id="newDatabase" class="pull-left add-Icon"><i class="fa fa-plus-circle"></i></span> <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>
<div class="footer-right"> <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> </div>
</script> </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 class="contentDiv" id="arangoCollectionsContainer">
<div id="graphManagementThumbnailsIn" class="tileList"> <div id="graphManagementThumbnailsIn" class="tileList pure-u">
<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="fullBorderBox"> <div class="fullBorderBox">
<a href="#" id="createGraph" class="add"> <a href="#" id="createGraph" class="add">
<span id="newGraph" class="pull-left add-Icon"><i class="fa fa-plus-circle"></i></span> <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"); 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="borderBox"></div>
<div class="iconSet"> <div class="iconSet">
<span class="icon_arangodb_settings2 editGraph" id="<%=graphName %>_settings" alt="Edit graph" title="Edit graph"></span> <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> </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> </script>

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

@ -4,7 +4,7 @@
<li class="subMenuEntry pull-left"> <li class="subMenuEntry pull-left">
<div class="breadcrumb"></div> <div class="breadcrumb"></div>
</li> </li>
<li class="subMenuEntry pull-right"> <li id="healthStatus" class="subMenuEntry pull-right">
<a class="health-info">HEALTH: </a> <a class="health-info">HEALTH: </a>
<a class="health-state">GOOD</a> <a class="health-state">GOOD</a>
<a class="health-icon"> <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 class="contentDiv" id="arangoCollectionsContainer">
<div id="userManagementThumbnailsIn" class="tileList"> <div id="userManagementThumbnailsIn" class="tileList pure-u">
<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="fullBorderBox"> <div class="fullBorderBox">
<a href="#" id="createUser" class="add"> <a href="#" id="createUser" class="add">
<span id="newUser" class="pull-left add-Icon"><i class="fa fa-plus-circle"></i></span> <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="borderBox"></div>
<div class="iconSet"> <div class="iconSet">
<span class="icon_arangodb_settings2 editUser" id="<%=_.escape(username) %>_edit-user" alt="Edit user" title="Edit user"></span> <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({ window.CollectionListItemView = Backbone.View.extend({
tagName: "div", 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"), template: templateEngine.createTemplate("collectionsItemView.ejs"),
initialize: function (options) { 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"), template: templateEngine.createTemplate("footerView.ejs"),
showServerStatus: function(isOnline) { showServerStatus: function(isOnline) {
if (isOnline === true) { if (!window.App.isCluster) {
$('.serverStatusIndicator').addClass('isOnline'); if (isOnline === true) {
$('.serverStatusIndicator').addClass('fa-check-circle-o'); $('#healthStatus').removeClass('negative');
$('.serverStatusIndicator').removeClass('fa-times-circle-o'); $('#healthStatus').addClass('positive');
} $('.health-state').html('GOOD');
else { $('.health-icon').html('<i class="fa fa-check-circle"></i>');
$('.serverStatusIndicator').removeClass('isOnline'); }
$('.serverStatusIndicator').removeClass('fa-check-circle-o'); else {
$('.serverStatusIndicator').addClass('fa-times-circle-o'); $('#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({ window.FoxxActiveView = Backbone.View.extend({
tagName: 'div', 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'), template: templateEngine.createTemplate('foxxActiveView.ejs'),
_show: true, _show: true,

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

@ -1210,7 +1210,7 @@
setEditorAutoHeight: function (editor) { setEditorAutoHeight: function (editor) {
editor.setOptions({ editor.setOptions({
maxLines: 100, 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: 1px solid $c-content-border;
border-radius: 3px; border-radius: 3px;
clear: right; clear: right;
float: left; float: right;
height: 182px; height: 182px;
margin-top: 12px; margin-top: 12px;
max-height: 182px; max-height: 182px;
max-width: 182px; max-width: 182px;
overflow-x: hidden; overflow-x: hidden;
position: relative; position: relative;
right: -16px;
width: 182px; width: 182px;
dl { 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-border: rgba(64, 74, 83, .2);
$c-bluegrey-nontransp: rgb(217, 219, 220); $c-bluegrey-nontransp: rgb(217, 219, 220);
$c-bluegrey-bg: rgba(64, 74, 83, .04); $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 { .arangodbLogo {
height: auto; height: auto;
margin-left: -5px; margin-left: 6px;
margin-top: 6px; margin-top: 15px;
width: $navbar-size; width: $navbar-size - 12px;
} }
.arango-collection-select { .arango-collection-select {
@ -89,12 +89,8 @@ $navbar-size: 150px;
.navlogo { .navlogo {
@extend %pull-left; @extend %pull-left;
padding: { height: 60px;
bottom: 5px; width: 100%;
left: 14px;
right: 5px;
top: 5px;
};
} }
.navmenu { .navmenu {
@ -146,10 +142,11 @@ $navbar-size: 150px;
} }
.active { .active {
border-left: 2px solid $c-bluegrey-nontransp; border-left: 2px solid $c-active-green;
.tab { .tab {
color: $c-white; color: $c-white;
margin-left: -2px;
.fa { .fa {
opacity: 1; opacity: 1;

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

@ -433,6 +433,10 @@
margin-bottom: 0; margin-bottom: 0;
margin-left: 0; margin-left: 0;
margin-right: 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) { @media (max-width: 738px) {
#arangoCollectionUl {
display: none;
}
#collectionsDropdown ul { #collectionsDropdown ul {
width: auto !important; width: auto !important;
} }
#arangoCollectionSelect {
display: inline-block;
height: 29px;
margin-top: 1px;
}
.footer-center { .footer-center {
p { p {
display: none; display: none;

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

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