merge oracle ui from kepler
This commit is contained in:
Alonefromhell
@@ -0,0 +1,27 @@
|
||||
<div class='display'>
|
||||
<section>
|
||||
<span class='label'>State:</span>
|
||||
<div class='content' id="full_pressure">@{full_pressure}</div>
|
||||
</section>
|
||||
<section>
|
||||
<span class='label'>Pressure:</span>
|
||||
<div class='content'>
|
||||
<div class='progressBar' id='per'>
|
||||
<div class='progressFill' style="width: @{per}"></div>
|
||||
<div class='progressLabel'>@{per}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<span class='label'>Handle:</span>
|
||||
<div class='content' id="flush">@{flush}</div>
|
||||
</section>
|
||||
<section>
|
||||
<span class='label'>Eject:</span>
|
||||
<div class='content' id="contents">@{contents}</div>
|
||||
</section>
|
||||
<section>
|
||||
<span class='label'>Compressor:</span>
|
||||
<div class='content' id="pressure_charging">@{pressure_charging}</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -0,0 +1,103 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>OracleUI IDE</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
h1 {
|
||||
margin: 5px;
|
||||
}
|
||||
#template_src_container {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 0px;
|
||||
width: 50%;
|
||||
height: 75%;
|
||||
}
|
||||
#template_src {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
#data_src_container {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 75%;
|
||||
width: 50%;
|
||||
height: calc(25% - 20px);
|
||||
}
|
||||
#data_src {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
#output_container {
|
||||
position: absolute;
|
||||
left: calc(50% + 20px);
|
||||
top: 0%;
|
||||
width: calc(50% - 50px);
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
#output_frame {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 10px;
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="template_src_container">
|
||||
<h1>Content Template:</h1>
|
||||
<textarea id="template_src" onchange="updateBody();" onkeyup="updateBody();" onpaste="updateBody();">
|
||||
<div class='display'>
|
||||
<section>
|
||||
<span class='label'>Key:</span>
|
||||
<div class='content' id="key">@{key}</div>
|
||||
</section>
|
||||
</div>
|
||||
</textarea>
|
||||
</div>
|
||||
<div id="data_src_container">
|
||||
<h1>Data:</h1>
|
||||
<textarea id="data_src" onchange="updateData();" onkeyup="updateData();" onpaste="updateData();">{"key":"value"}</textarea>
|
||||
</div>
|
||||
<div id="output_container">
|
||||
<h1>Output:</h1>
|
||||
<iframe name="output_frame" id="output_frame" onload="updateBody();"></iframe>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
function updateBody() {
|
||||
var body = document.getElementById('template_src').value
|
||||
var fields = JSON.parse(document.getElementById('data_src').value);
|
||||
for (var key in fields) {
|
||||
let value = fields[key];
|
||||
body = body.replace("@{" + key + "}", value)
|
||||
}
|
||||
var targetFrame = document.getElementById('output_frame')
|
||||
targetFrame.contentWindow.replaceContent(body);
|
||||
updateData();
|
||||
}
|
||||
function updateData() {
|
||||
var targetFrame = document.getElementById('output_frame');
|
||||
var json = document.getElementById('data_src').value;
|
||||
if(JSON.parse(json)) {
|
||||
targetFrame.contentWindow.updateFields(json);
|
||||
}
|
||||
}
|
||||
var url = document.URL,
|
||||
shortUrl=url.substring(0,url.lastIndexOf("/"));
|
||||
window.open(shortUrl + "/themes/nano/index.html", "output_frame");
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<head>
|
||||
<title>@{title}</title>
|
||||
<script src="sui-nano-jquery.min.js"></script>
|
||||
<script src="sui-nano-common.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="sui-nano-common.css">
|
||||
</head>
|
||||
<body scroll=auto>
|
||||
<div class='uiWrapper'>
|
||||
<div class='uiTitleWrapper'><div class='uiTitle'><tt>@{title}</tt></div></div>
|
||||
<div class='uiContent' id='maincontent'>
|
||||
@{body}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,353 @@
|
||||
body
|
||||
{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #272727;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
line-height: 170%;
|
||||
cursor: default;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
hr
|
||||
{
|
||||
background-color: #40628a;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
a, a:link, a:visited, a:active, .linkOn, .linkOff
|
||||
{
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
background: #40628a;
|
||||
border: 1px solid #161616;
|
||||
padding: 1px 4px 1px 4px;
|
||||
margin: 0 2px 0 0;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
a:hover
|
||||
{
|
||||
color: #40628a;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
a.white, a.white:link, a.white:visited, a.white:active
|
||||
{
|
||||
color: #40628a;
|
||||
text-decoration: none;
|
||||
background: #ffffff;
|
||||
border: 1px solid #161616;
|
||||
padding: 1px 4px 1px 4px;
|
||||
margin: 0 2px 0 0;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
a.white:hover
|
||||
{
|
||||
color: #ffffff;
|
||||
background: #40628a;
|
||||
}
|
||||
|
||||
.active, a.active:link, a.active:visited, a.active:active, a.active:hover
|
||||
{
|
||||
color: #ffffff;
|
||||
background: #2f943c;
|
||||
border-color: #24722e;
|
||||
}
|
||||
|
||||
.disabled, a.disabled:link, a.disabled:visited, a.disabled:active, a.disabled:hover
|
||||
{
|
||||
color: #ffffff;
|
||||
background: #999999;
|
||||
border-color: #666666;
|
||||
}
|
||||
|
||||
a.icon, .linkOn.icon, .linkOff.icon
|
||||
{
|
||||
position: relative;
|
||||
padding: 1px 4px 2px 20px;
|
||||
}
|
||||
|
||||
a.icon img, .linkOn.icon img
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
ul
|
||||
{
|
||||
padding: 4px 0 0 10px;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li
|
||||
{
|
||||
padding: 0 0 2px 0;
|
||||
}
|
||||
|
||||
img, a img
|
||||
{
|
||||
border-style:none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
{
|
||||
margin: 0;
|
||||
padding: 16px 0 8px 0;
|
||||
color: #517087;
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
h2
|
||||
{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h3
|
||||
{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
h4
|
||||
{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.uiWrapper
|
||||
{
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.uiTitle
|
||||
{
|
||||
clear: both;
|
||||
padding: 6px 8px 6px 8px;
|
||||
border-bottom: 2px solid #161616;
|
||||
background: #383838;
|
||||
color: #98B0C3;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.uiTitle.icon
|
||||
{
|
||||
padding: 6px 8px 6px 42px;
|
||||
background-position: 2px 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.uiContent
|
||||
{
|
||||
clear: both;
|
||||
padding: 8px;
|
||||
font-family: Verdana, Geneva, sans-serif;
|
||||
}
|
||||
|
||||
.good
|
||||
{
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
.average
|
||||
{
|
||||
color: #d09000;
|
||||
}
|
||||
|
||||
.bad
|
||||
{
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.highlight
|
||||
{
|
||||
color: #8BA5C4;
|
||||
}
|
||||
|
||||
.dark
|
||||
{
|
||||
color: #272727;
|
||||
}
|
||||
|
||||
.notice
|
||||
{
|
||||
position: relative;
|
||||
background: #E9C183;
|
||||
color: #15345A;
|
||||
font-size: 10px;
|
||||
font-style: italic;
|
||||
padding: 2px 4px 0 4px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.notice.icon
|
||||
{
|
||||
padding: 2px 4px 0 20px;
|
||||
}
|
||||
|
||||
.notice img
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
div.notice
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.statusDisplay
|
||||
{
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
border: 1px solid #40628a;
|
||||
padding: 4px;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.statusLabel
|
||||
{
|
||||
width: 138px;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
color: #98B0C3;
|
||||
}
|
||||
|
||||
.statusValue
|
||||
{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.block
|
||||
{
|
||||
padding: 8px;
|
||||
margin: 10px 4px 4px 4px;
|
||||
border: 1px solid #40628a;
|
||||
background-color: #202020;
|
||||
}
|
||||
|
||||
.block h3
|
||||
{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.progressBar
|
||||
{
|
||||
position: relative;
|
||||
width: 185px;
|
||||
height: 14px;
|
||||
border: 1px solid #666666;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.progressLabel
|
||||
{
|
||||
top: -2px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.progressFill
|
||||
{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #40628a;
|
||||
overflow: hidden;
|
||||
transition: width 2.2s linear;
|
||||
}
|
||||
|
||||
.progressFill.good
|
||||
{
|
||||
color: #ffffff;
|
||||
background: #00ff00;
|
||||
}
|
||||
|
||||
.progressFill.average
|
||||
{
|
||||
color: #ffffff;
|
||||
background: #d09000;
|
||||
}
|
||||
|
||||
.progressFill.bad
|
||||
{
|
||||
color: #ffffff;
|
||||
background: #ff0000;
|
||||
}
|
||||
|
||||
.progressFill.highlight
|
||||
{
|
||||
color: #ffffff;
|
||||
background: #8BA5C4;
|
||||
}
|
||||
|
||||
.clearBoth
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.clearLeft
|
||||
{
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.clearRight
|
||||
{
|
||||
clear: right;
|
||||
}
|
||||
|
||||
.line
|
||||
{
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
section .label, section .content
|
||||
{
|
||||
display: table-cell;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
padding: 3px 2px
|
||||
}
|
||||
|
||||
section .label
|
||||
{
|
||||
width: 1%;
|
||||
padding-right: 32px;
|
||||
white-space: nowrap;
|
||||
color: #8ba5c4;
|
||||
}
|
||||
|
||||
section
|
||||
{
|
||||
display: table-row;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.display {
|
||||
width: calc(100% - 8px);
|
||||
padding: 4px;
|
||||
background-color: #000;
|
||||
background-color: rgba(0, 0, 0, .33);
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#54000000,endColorStr=#54000000)";
|
||||
filter: progid: DXImageTransform.Microsoft.gradient(startColorStr=#54000000, endColorStr=#54000000);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
function replaceContent(body) {
|
||||
var maincontent = document.getElementById('maincontent');
|
||||
if(maincontent) {
|
||||
maincontent.innerHTML = body;
|
||||
}
|
||||
}
|
||||
|
||||
function updateProgressLabels() {
|
||||
var progressBars = document.getElementsByClassName("progressBar");
|
||||
for(var i = 0; i < progressBars.length; i++) {
|
||||
var progressBar = progressBars[i];
|
||||
if(!progressBar)
|
||||
continue;
|
||||
var progressFill = progressBar.getElementsByClassName("progressFill")[0];
|
||||
if(!progressFill)
|
||||
continue;
|
||||
var width = parseInt(getComputedStyle(progressFill).width);
|
||||
var maxWidth = parseInt(getComputedStyle(progressBar).width);
|
||||
var progressLabel = progressBar.getElementsByClassName("progressLabel")[0];
|
||||
if(progressLabel)
|
||||
progressLabel.innerHTML = Math.round((width / maxWidth) * 100) + '%';
|
||||
}
|
||||
}
|
||||
|
||||
if(getComputedStyle) { setInterval(updateProgressLabels, 50); } //Fallback
|
||||
|
||||
function updateFields(json) {
|
||||
var fields = JSON.parse(json);
|
||||
for (var key in fields) {
|
||||
let value = fields[key];
|
||||
var element = document.getElementById(key);
|
||||
if(element == null) {
|
||||
continue;
|
||||
} else if(element.classList.contains('progressBar')) {
|
||||
var progressFill = element.getElementsByClassName("progressFill")[0];
|
||||
if(progressFill)
|
||||
progressFill.style["width"] = value;
|
||||
if(!getComputedStyle) { //Fallback
|
||||
var progressLabel = element.getElementsByClassName("progressLabel")[0];
|
||||
if(progressLabel)
|
||||
progressLabel.innerHTML = value;
|
||||
}
|
||||
} else {
|
||||
element.innerHTML = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user