Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add documentation for zero clipboard and autodropdown and fix a sizin…
…g bug in autodropdown
  • Loading branch information
gashcrumb committed Oct 18, 2013
1 parent e63319f commit ca53c62
Show file tree
Hide file tree
Showing 7 changed files with 83 additions and 6 deletions.
Expand Up @@ -5,7 +5,7 @@ The **UI** plugin provides a number of [AngularJS](http://angularjs.org/) direct
For details on form widgets take a look at the [Form documentation](index.html#/help/forms/developer)

## General UI widgets
<div ng-include="'app/ui/html/test.html'"></div>
<div ng-include="'app/ui/html/test1.html'"></div>



11 changes: 11 additions & 0 deletions hawtio-web/src/main/webapp/app/ui/doc/developerPage2.md
@@ -0,0 +1,11 @@
### UI

The **UI** plugin provides a number of [AngularJS](http://angularjs.org/) directives for creating a number of UI widgets. The following examples can be edited and are re-compiled on the fly.

For details on form widgets take a look at the [Form documentation](index.html#/help/forms/developer)

## General UI widgets (Page 2)
<div ng-include="'app/ui/html/test2.html'"></div>



@@ -1,4 +1,4 @@
<div ng-controller="UI.UITestController">
<div ng-controller="UI.UITestController1">

<div>

Expand Down
46 changes: 46 additions & 0 deletions hawtio-web/src/main/webapp/app/ui/html/test2.html
@@ -0,0 +1,46 @@
<div ng-controller="UI.UITestController2">

<div>
<div class="row-fluid">
<h3>Auto Drop Down</h3>
<p>Handy for horizontal lists of things like menus, if the width of the element is smaller than the items inside any overflowing elements will be collected into a special dropdown element that's required at the end of the list</p>
<script type="text/ng-template" id="autoDropDownTemplate">
<ul class="nav nav-tabs" hawtio-auto-dropdown>
<!-- All of our menu items -->
<li ng-repeat="item in menuItems">
<a href="">{{item}}</a>
</li>
<!-- The dropdown that will collect overflow elements -->
<li class="dropdown overflow" style="float: right !important; visibility: hidden;">
<a href="" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-chevron-down"></i>
</a>
<ul class="dropdown-menu right"></ul>
</li>
</ul>
</script>
<div hawtio-editor="autoDropDown" mode="fileUploadExMode"></div>
<div class="directive-example">
<div compile="autoDropDown"></div>
</div>
</div>

<div class="row-fluid">
<h3>Zero Clipboard</h3>
<p>Directive that attaches a zero clipboard instance to an element so a user can click on a button to copy some text to the clipboard</p>
<p>Best way to use this is next to a readonly input that displays the same data to be copied, that way folks that have Flash disabled can still copy the text.</p>
<script type="text/ng-template" id="zeroClipboardTemplate">
<input type="text" class="no-bottom-margin" readonly value="Some Text!">
<button class="btn" zero-clipboard data-clipboard-text="Some Text!" title="Click to copy!">
<i class="icon-copy"></i>
</button>
</script>
<div hawtio-editor="zeroClipboard" mode="fileUploadExMode"></div>
<div class="directive-example">
<div compile="zeroClipboard"></div>
</div>
</div>


</div>
</div>
4 changes: 2 additions & 2 deletions hawtio-web/src/main/webapp/app/ui/js/autoDropDown.ts
Expand Up @@ -16,7 +16,7 @@ module UI {

var overflowEl = $($element.find('.overflow'));
var overflowMenu = $(overflowEl.find('ul.dropdown-menu'));
var availableWidth = $element.innerWidth() - ($element.innerWidth() - overflowEl.offset().left);
var availableWidth = $element.innerWidth() - overflowEl.outerWidth(true);

$element.children('li').each(function(index) {
var self = $(this);
Expand All @@ -25,7 +25,7 @@ module UI {
return;
}

availableWidth = availableWidth - self.outerWidth();
availableWidth = availableWidth - self.outerWidth(true);
if (availableWidth < 0) {
self.detach();
overflowMenu.append(self);
Expand Down
20 changes: 19 additions & 1 deletion hawtio-web/src/main/webapp/app/ui/js/testController.ts
@@ -1,6 +1,24 @@
module UI {

export function UITestController($scope, workspace, $templateCache) {
export function UITestController2($scope, workspace, $templateCache) {

$scope.menuItems = [];

for (var i = 0; i < 20; i++) {
$scope.menuItems.push("Some Item " + i);
}


$scope.autoDropDown = $templateCache.get("autoDropDownTemplate");

$scope.zeroClipboard = $templateCache.get("zeroClipboardTemplate");


}


export function UITestController1($scope, workspace, $templateCache) {


$scope.jsplumbEx = $templateCache.get("jsplumbTemplate");

Expand Down
4 changes: 3 additions & 1 deletion hawtio-web/src/main/webapp/app/ui/js/uiPlugin.ts
Expand Up @@ -45,7 +45,9 @@ module UI {
}).directive('hawtioAutoDropdown', () => {
return UI.AutoDropDown;
}).run(function (helpRegistry) {
helpRegistry.addDevDoc("ui", 'app/ui/doc/developer.md');

helpRegistry.addDevDoc("ui1", 'app/ui/doc/developerPage1.md');
helpRegistry.addDevDoc("ui2", 'app/ui/doc/developerPage2.md');
});

hawtioPluginLoader.addModule(pluginName);
Expand Down

0 comments on commit ca53c62

Please sign in to comment.