Skip to content

Commit

Permalink
Merge pull request #10 from endlessm/T23605
Browse files Browse the repository at this point in the history 
T23605
  • Loading branch information
@dnohales
dnohales committed Aug 16, 2018
2 parents 4acbfb6 + bbad9fa commit 2a35a14
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 90 deletions.
36 changes: 12 additions & 24 deletions css/styles.css
View file
Expand Up @@ -7,7 +7,7 @@ html,body {
display: block;
}

.preview-frame {
#source_code_content, .preview-frame {
height: 100%;
width: 100%;
margin: 0px;
Expand All @@ -17,10 +17,6 @@ html,body {
margin-bottom: -2em;
}

.code-block {
display: inline-table;
}

.syntaxhighlighter {
display: inline;
font-size: 0.75em !important;
Expand All @@ -35,18 +31,14 @@ div.syntaxhighlighter > table {
border-right: 2px solid #0275d8 !important;
}

.preview-frame-holder {
.code-block, .preview-frame-holder {
height: calc(100% - 3.5em);
padding: 0;
margin: 0;
margin: 0 !important;
}

.main-page {
height: 100%;
overflow: auto;
display: block;
margin-bottom: -2em;
padding-bottom: 2em;
}

.panes-holder {
Expand All @@ -73,6 +65,11 @@ div.syntaxhighlighter > table {
transform-origin: top left;
}

.asset-pane {
padding: 0;
overflow-y: scroll;
}

.asset-list {
width: 100%;
overflow: auto;
Expand All @@ -84,19 +81,6 @@ div.syntaxhighlighter > table {
max-height: 1.7em;
}

.asset-pane {
border-right-style: ridge;
}

.metadata-pane {
border-left-style: ridge;
}

.footer {
width: 100%;
background-color: #f5f5f5;
}

.tagList {
padding: 0.3em;
}
Expand All @@ -113,3 +97,7 @@ div.syntaxhighlighter > table {
vertical-align: text-top;
margin-left: 0.1em;
}

.card-header {
padding: 0!important;
}
84 changes: 28 additions & 56 deletions main.html
View file
Expand Up @@ -2,37 +2,22 @@
<html>
<head>
<meta charset="UTF-8">

<!-- We need to try loading the css from whatever hierarchy we are in -->
<!-- This can be local folder, sibling folder, or parent folder -->
<!-- TODO: Try to make this a little less cludgy -->
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../../bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- We need to try loading the css from whatever hierarchy we are in -->
<!-- This can be local folder, sibling folder, or parent folder -->
<!-- TODO: Try to make this a little less cludgy -->
<link href="node_modules/node-syntaxhighlighter/lib/styles/shCoreDefault.css" rel="stylesheet">
<link href="../node-syntaxhighlighter/lib/styles/shCoreDefault.css" rel="stylesheet">
<link href="../../node-syntaxhighlighter/lib/styles/shCoreDefault.css" rel="stylesheet">

<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="./node_modules/node-syntaxhighlighter/lib/styles/shCoreDefault.css" rel="stylesheet">
<link href="./css/styles.css" rel="stylesheet" >
</head>

<body>
<div class='container-fluid main-page'>
<div class='row panes-holder'>
<!-- Left panel -->
<div class='col-2 pt-3 pb-3 pane asset-pane'>
<div class='col-2 pt-3 pb-3 pane asset-pane text-light bg-secondary'>
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card text-light bg-secondary">
<div class="card-header pt-1 pb-1" role="tab" id="heading_documents">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse_documents" aria-expanded="true" aria-controls="collapseOne">
Documents
</a>
</h5>
<a class="btn btn-primary btn-block" data-toggle="collapse" data-parent="#accordion" href="#collapse_documents" aria-expanded="true" aria-controls="collapseOne">
Documents
</a>
</div>

<div id="collapse_documents" class="collapse show" role="tabpanel" aria-labelledby="heading_documents">
Expand All @@ -44,13 +29,11 @@ <h5 class="mb-0">
</div>
</div>

<div class="card">
<div class="card text-light bg-secondary">
<div class="card-header pt-1 pb-1" role="tab" id="heading_images">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse_images" aria-expanded="true" aria-controls="collapseOne">
Images
</a>
</h5>
<a class="btn btn-primary btn-block" data-toggle="collapse" data-parent="#accordion" href="#collapse_images" aria-expanded="true" aria-controls="collapseOne">
Images
</a>
</div>
<div id="collapse_images" class="collapse" role="tabpanel" aria-labelledby="heading_images">
<div class="card-block m-0 p-0 asset-list">
Expand All @@ -61,13 +44,11 @@ <h5 class="mb-0">
</div>
</div>

<div class="card">
<div class="card text-light bg-secondary">
<div class="card-header pt-1 pb-1" role="tab" id="heading_tags">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse_tags" aria-expanded="true" aria-controls="collapseOne">
Tags
</a>
</h5>
<a class="btn btn-primary btn-block" data-toggle="collapse" data-parent="#accordion" href="#collapse_tags" aria-expanded="true" aria-controls="collapseOne">
Tags
</a>
</div>
<div id="collapse_tags" class="collapse" role="tabpanel" aria-labelledby="heading_tags">
<div class="card-block m-0 p-0 asset-list">
Expand All @@ -83,39 +64,30 @@ <h5 class="mb-0">
<div class='col-7 pt-3 pb-3 pane'>
<div id='flip_controls'>
<button type='button'
class='btn btn-primary btn-lg btn-block'
onClick='flipPage();'>Flip
id='flip_button'
class='btn btn-primary btn-lg'
onClick='flipPage();'>View Source
</button>
</div>
<span class='border-1 mt-4'>
<div class='code-block container mt-1 pt-2 bg-faded' id='source_code'>
<div id='source_code_content'></div>
</div>

<div class='container center-block mt-1' id='image_preview'></div>
<div class='code-block container mt-1 pt-2 bg-faded' id='source_code'>
<div id='source_code_content'></div>
</div>

<div class='container center-block mt-1' id='image_preview'></div>

<div class='preview-frame-holder container center-block mt-1' id='preview_frame_holder' >
<iframe class='preview-frame' frameborder='0' id='preview_frame'></iframe>
</div>

<div class='preview-frame-holder container center-block mt-1' id='preview_frame_holder' >
<iframe class='preview-frame' frameborder='0' id='preview_frame'></iframe>
</div>
</span>
</div>

<!-- Metadata panel -->
<div class='col-3 pt-3 pb-3 pane metadata-pane'>
<div class='col-3 pt-3 pb-3 pane metadata-pane text-light bg-secondary'>
<div class='container p-0 m-0' id='metadata'></div>
</div>
</div>
</div>
<footer class='footer mt-2'>
<div class='container p-0 m-0'>
<center>
<!-- All of the Node.js APIs are available in this renderer process. -->
Node <script>document.write(process.versions.node);</script>,
Chromium <script>document.write(process.versions.chrome);</script>,
Electron <script>document.write(process.versions.electron);</script>
</center>
</div>
</footer>
</body>

<script>
Expand Down
16 changes: 9 additions & 7 deletions metadata_renderer.js
View file
Expand Up @@ -29,13 +29,12 @@ const visibleProps = [
function _appendProp(asset, prop) {
if (!asset.hasOwnProperty(prop))
return;
$('#metadata_table')
.append($('<thead/>')
.append($('<tr/>')
.append($('<td/>')
.text(prop))
.append($('<td/>')
.text(asset[prop]))));
$('#metadata_table tbody')
.append($('<tr/>')
.append($('<td/>')
.text(prop))
.append($('<td/>')
.text(asset[prop])));
}

exports.setMetadataAssetID = function (ID) {
Expand All @@ -57,6 +56,9 @@ exports.setMetadataAssetID = function (ID) {
.append($('<th/>')
.text(asset.title || 'Unknown')))));

$('#metadata_table')
.append($('<tbody/>'));

visibleProps.forEach(prop => _appendProp(asset, prop));
extraPropsByModelType[asset.objectType].forEach(prop =>
_appendProp($, asset, prop));
Expand Down
9 changes: 6 additions & 3 deletions preview_renderer.js
View file
Expand Up @@ -17,12 +17,14 @@ $(document).ready(() => {
window.flipPage = function () {
showingSource = !showingSource;
if (showingSource) {
$('#preview_frame').hide();
$('#preview_frame_holder').hide();
$('#image_preview').hide();
$('#flip_button').text('View Article');
$('#source_code').show();
} else {
$('#preview_frame').show();
$('#preview_frame_holder').show();
$('#image_preview').show();
$('#flip_button').text('View Source');
$('#source_code').hide();
}
};
Expand All @@ -40,8 +42,9 @@ exports.setPreviewAssetID = function (ID) {
const frameHTML = frameContents.find('html');
const previewFrameHolder = $('#preview_frame_holder');

$('#flip_button').text('View Source');
$('#source_code').hide();
previewFrame.show();
previewFrameHolder.show();
imagePreview.show();

imagePreview.html('');
Expand Down

0 comments on commit 2a35a14

Please sign in to comment.