Skip to content

Commit

Permalink
Merge pull request #71 from aaronjrich/master
Browse files Browse the repository at this point in the history 
Left nav tweaks for DTHML output format
  • Loading branch information
@dirkrombauts
dirkrombauts committed Oct 25, 2013
2 parents 2ed1600 + b51392d commit 5f3b825
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 59 deletions.
126 changes: 71 additions & 55 deletions src/Pickles/Pickles.BaseDhtmlFiles/Index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<body>

<script type="text/html" id="features-template">
<div style="padding: 5px" class="feature" data-bind="click: $root.showFeature.bind(Path)"><a data-bind=" text: Name, click: $root.showFeature.bind(Path)" href="#"></a></div>
<div class="feature" data-bind="click: $root.showFeature.bind(Path)"><a data-bind="text: Name, click: $root.showFeature.bind(Path), css: { selected: $root.isSelected(Path) }" href="#"></a></div>
</script>

<script type="text/html" id="featuresByFolder-template">
Expand Down Expand Up @@ -88,76 +88,81 @@

<div class="container-fluid" id="MainContainer">
<div class="row-fluid">
<div class="span3" id="FolderNav">
<div>
<div data-bind="template: { name: 'features-template', foreach: featuresByFolder().features }"></div>
<div data-bind="template: { name: 'featuresByFolder-template', foreach: featuresByFolder().SubDirectories }"></div>
</div>
</div>

<div class="span9" data-bind="with: currentFeature">
<div data-bind="with: Feature" id="featureDetails">
<div data-bind="template: { name: 'testResults-template', data: Result }"></div>
<div data-bind="if: Tags.length > 0" class="canHighlight inline">
<i class=" icon-tags"></i>
<!-- ko foreach: Tags.sort() -->
<span data-bind="text: $data" class="inline"></span>
<!-- /ko -->
<div class="span12">
<div class="span3" id="FolderNav" data-bind="visible: navIsShown">
<div id="HideIt" data-bind="click: hideNav"><i class="icon-chevron-left"></i></div>
<div id="InnerNav">
<div data-bind="template: { name: 'features-template', foreach: featuresByFolder().features }"></div>
<div data-bind="template: { name: 'featuresByFolder-template', foreach: featuresByFolder().SubDirectories }"></div>
</div>
<h1 data-bind="text: Name" class="canHighlight"></h1>
<div class="description" data-bind="html: renderMarkdownBlock(Description)"></div>
</div>

<div class="row-fluid" data-bind="with: Feature">
<div class="row-fluid" data-bind="if: Background.Steps">
<div class="scenario">
<h4>Background:</h4>
<div class="description" data-bind="html: renderMarkdownBlock(Description)"></div>
<ul data-bind="template: { name: 'steps-template', foreach: Background.Steps }"></ul>
<div id="Content" class="span9" data-bind="with: currentFeature">
<div id="ShowIt" data-bind="visible: $root.navIsHidden, click: $root.showNav"><i class="icon-chevron-right"></i></div>
<div data-bind="with: Feature" id="featureDetails">
<div data-bind="template: { name: 'testResults-template', data: Result }"></div>
<div data-bind="if: Tags.length > 0" class="canHighlight inline">
<i class=" icon-tags"></i>
<!-- ko foreach: Tags.sort() -->
<span data-bind="text: $data" class="inline"></span>
<!-- /ko -->
</div>
<h1 data-bind="text: Name" class="canHighlight"></h1>
<div class="description" data-bind="html: renderMarkdownBlock(Description)"></div>
</div>

<div id="scenarios" data-bind="foreach: FeatureElements">
<div data-bind="if: Tags.length > 0" class="canHighlight inline">
<i class=" icon-tags"></i><em>
<!-- ko foreach: Tags.sort() -->
<span data-bind="text: $data" class="inline"></span>
<!-- /ko -->
</em>
<div class="row-fluid" data-bind="with: Feature">
<div class="row-fluid" data-bind="if: Background.Steps">
<div class="scenario">
<h4>Background:</h4>
<div class="description" data-bind="html: renderMarkdownBlock(Description)"></div>
<ul data-bind="template: { name: 'steps-template', foreach: Background.Steps }"></ul>
</div>
</div>

<div class="scenario">
<div data-bind="template: { name: 'testResults-template', data: Result }"></div>

<div>
<h4 data-bind="text: Name" class="canHighlight"></h4>
<div class="description" data-bind="html: renderMarkdownBlock(Description)"></div>
<div id="scenarios" data-bind="foreach: FeatureElements">
<div data-bind="if: Tags.length > 0" class="canHighlight inline">
<i class=" icon-tags"></i><em>
<!-- ko foreach: Tags.sort() -->
<span data-bind="text: $data" class="inline"></span>
<!-- /ko -->
</em>
</div>

<div class="steps">

<ul data-bind="template: { name: 'steps-template', foreach: Steps }"></ul>
<div class="scenario">
<div data-bind="template: { name: 'testResults-template', data: Result }"></div>

<ul data-bind="foreach: Examples">
<li class="step">
<div><strong>Examples:</strong> <span data-bind="text: Name"></span></div>
<div class="description" data-bind="html: renderMarkdownBlock(Description)"></div>
<div data-bind="template: { name: 'table-template', data: $data }"></div>
</li>
</ul>
<div>
<h4 data-bind="text: Name" class="canHighlight"></h4>
<div class="description" data-bind="html: renderMarkdownBlock(Description)"></div>
</div>

</div>
<div class="steps">

<ul data-bind="template: { name: 'steps-template', foreach: Steps }"></ul>

<ul data-bind="foreach: Examples">
<li class="step">
<div><strong>Examples:</strong> <span data-bind="text: Name"></span></div>
<div class="description" data-bind="html: renderMarkdownBlock(Description)"></div>
<div data-bind="template: { name: 'table-template', data: $data }"></div>
</li>
</ul>

</div>

</div>
</div>
</div>
</div>
<!-- Enable to dump JSON to the screen -->
<!--<div class="row-fluid">
<!-- Enable to dump JSON to the screen -->
<!--<div class="row-fluid">
Current Features List JSON:
<pre data-bind="text: ko.toJSON($parent.featuresList())"></pre>
</div>-->
</div>
<!--/span-->

</div>
<!--/span-->
</div>
<!--/row-->

Expand All @@ -180,7 +185,7 @@ <h4 data-bind="text: Name" class="canHighlight"></h4>
<script src="js/underscore-min.js" type="text/javascript"></script>
<script src="js/jquery.highlight-4.closure.js"></script>
<script src="js/Markdown.Converter.js" type="text/javascript"></script>
<script src="js/Markdown.Extra.js" type="text/javascript"></script>
<script src="js/Markdown.Extra.js" type="text/javascript"></script>
<script src="js/featuresModel.js" type="text/javascript"></script>
<script src="js/logger.js" type="text/javascript"></script>
<script src="js/stringFormatting.js" type="text/javascript"></script>
Expand All @@ -203,7 +208,7 @@ <h4 data-bind="text: Name" class="canHighlight"></h4>
self.updateCurrentFeature(self.originalFeaturesList()[0]);
}
};

self.whatToSearchFor = ko.observable("");

self.clearSearch = function () {
Expand Down Expand Up @@ -243,6 +248,15 @@ <h4 data-bind="text: Name" class="canHighlight"></h4>
window.scroll(0, 0);
highlightSearchString(self.whatToSearchFor());
};

// Navigation functionality
self.navIsShown = ko.observable(true);
self.navIsHidden = ko.observable(false);
self.hideNav = function () { self.navIsShown(false); self.navIsHidden(true); };
self.showNav = function () { self.navIsShown(true); self.navIsHidden(false); };
self.isSelected = function (path) {
return self.currentFeature().RelativeFolder == path;
};
};

function highlightSearchString(searchString) {
Expand All @@ -265,6 +279,8 @@ <h4 data-bind="text: Name" class="canHighlight"></h4>
});
}

var navShown = true;

$(document).ready(function () {
function chromeSOPHack_LoadJsonPFileAndCreateDynamicScriptTag() {
var url = "pickledFeatures.js"; // URL of the external script
Expand All @@ -287,7 +303,7 @@ <h4 data-bind="text: Name" class="canHighlight"></h4>
});
}

setupSubmitSearchWhenEnterKeyPressed();
setupSubmitSearchWhenEnterKeyPressed();
});
</script>
</body>
Expand Down
37 changes: 33 additions & 4 deletions src/Pickles/Pickles.BaseDhtmlFiles/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ li.step {
}

#FolderNav {
border: 1px lightgrey solid;
border-right: 1px lightgrey solid;
}

#FolderNav a:hover {
Expand All @@ -66,20 +66,25 @@ li.step {
text-decoration: none;
}

.feature {
padding: 5px;
}

.feature:hover {
background-color: #EEEEEE;
cursor: pointer;
color: #1A668C;
}

.canHighlight {

}

.highlight { background-color: yellow; }
.highlight {
background-color: yellow;
}

.inconclusive, .failed, .passed {
font-size: 300%;
font-size: 300%;
}

.pre {
Expand All @@ -90,3 +95,27 @@ li.step {
white-space: pre-wrap;
font-style: italic;
}

.selected {
text-decoration: underline;
}

#Content {
margin: 0px 0px 0px 10px;
}

#HideIt {
float: right;
position: relative;
left: 0px;
top: 0px;
cursor: pointer;
}

#ShowIt {
float: left;
position: absolute;
left: 0px;
top: 60px;
cursor: pointer;
}
3 changes: 3 additions & 0 deletions src/Pickles/Pickles.Test/Pickles.Test.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -353,6 +353,9 @@
<ItemGroup>
<Folder Include="FakeFolderStructures\EmptyFolderTests\" />
</ItemGroup>
<ItemGroup>
<Service Include="{82A7F48D-3B50-4B1E-B82E-3ADA8210C358}" />
</ItemGroup>
<Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
<Import Project="$(SolutionDir)\.nuget\NuGet.targets" />
<!-- To modify your build process, add your task inside one of the targets below and uncomment it.
Expand Down
Binary file modified src/Pickles/Pickles/Resources/Pickles.BaseDhtmlFiles.zip
View file
Binary file not shown.

0 comments on commit 5f3b825

Please sign in to comment.