padding: 3px 10px;
}
+/* Package Toolbar filter-clear button */
+::-ms-clear {
+ display: none;
+}
+.form-control-clear {
+ z-index: 10;
+ pointer-events: auto;
+ cursor: pointer;
+}
+
+
/* TODO: Height of Treeview, Package Information and Summary grid in Package Page */
#tic-package-info-table {
height: 15vh;
opacity: 0.5;
z-index: 2000;
}
-
#tic-repository-list li {
cursor: move;
display: block;
background: #eee;
max-width: 100%;
}
-
#tic-repository-list li.placeholder {
position: relative;
margin: 0;
border: none;
content: "";
}
-
#tic-repository-list li.placeholder:before {
position: absolute;
content: "";
border-left-color: #f00;
border-right: none;
}
-
.tic-repository-url {
overflow: hidden;
white-space: nowrap;
<!-- Package Tree Toolbar -->
<div id="tic-package-left-col-tree-toolbar">
<div class="input-group">
- <input type="text" class="form-control" placeholder="Start typing to filter list of packages" id="tic-package-left-col-tree-toolbar-filter"/>
+ <div class="form-group has-feedback has-clear">
+ <input type="text" class="form-control" placeholder="Start typing to filter list of packages" id="tic-package-toolbar-input"/>
+ <span class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden" id="tic-package-toolbar-input-clear"></span>
+ </div>
<div class="input-group-btn">
+ <!-- TODO: options?
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
- <span class="glyphicon glyphicon-menu-hamburger"></span>
+ <i class="fa fa-navicon"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
-
+ -->
<button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-collapse-all">
- <span class="glyphicon glyphicon-minus" aria-hidden="true"/>
+ <i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-expand-all">
- <span class="glyphicon glyphicon-plus" aria-hidden="true"/>
+ <i class="fa fa-plus"></i>
</button>
</div>
</div>
</div><!-- /.container -->
</section>
+
<!-- Settings Section -->
<section id="tic-settings-section">
<div class="container">
<div class="panel-heading">Repository</div>
<div class="panel-body">
<div class="input-group">
- <input id="tic-repository-input" type="text" class="form-control" placeholder="Enter repository URL">
+ <div class="form-group has-feedback has-clear">
+ <input id="tic-repository-input" type="text" class="form-control" placeholder="Enter repository URL">
+ <span id="tic-repository-input-clear" class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span>
+ </div>
<span class="input-group-btn">
<button type="button" id="tic-repository-add"class="btn btn-default">Add Repository</button>
</span>
packageList.html(_.orderBy(_.map(list, 'text')).join('<br>'));
}
- if (count === 0) {
- $('#tic-package-create').addClass('disabled');
- } else {
- $('#tic-package-create').removeClass('disabled');
- }
+ $('#tic-package-create').toggleClass('disabled', count === 0);
require('js/page/image').updateSummary();
}
if (!_.isEmpty(localNode.dependency) && localNode.dependency.length > 0) {
_.forEach(localNode.dependency, function(name) {
var depNode = _find(name);
- if (depNode.state.checked === false) {
- toggleNode.push(depNode);
+ if (_.isEmpty(depNode)) {
+ Util.showAlertDialog('Can not find dependency package. \'' + name + '\'');
+ } else {
+ if (depNode.state.checked === false) {
+ toggleNode.push(depNode);
+ }
}
- // TODO: Can not find dependency package
});
$tree.treeview('checkNode', [toggleNode, { silent: true }]);
console.log('package: init');
function _filter() {
- var filterText = $('#tic-package-left-col-tree-toolbar-filter').val();
+ var filterText = $('#tic-package-toolbar-input').val();
var matchNodes = $tree.treeview('search', [ filterText, {
ignoreCase: true, // case insensitive
exactMatch: false, // like or equals
revealResults: true, // reveal matching nodes
}]);
- // TODO: matchNodes show and hide
+
+ _.forEach(packages, function (node) {
+ node.$el.hide();
+ });
+ if (!_.isEmpty(matchNodes)) {
+ _.forEach(matchNodes, function (node) {
+ node.$el.show();
+ });
+ } else {
+ if (_.isEmpty(filterText)) {
+ _.forEach(packages, function (node) {
+ node.$el.show();
+ });
+ }
+ }
+ $('#tic-package-toolbar-input-clear').toggleClass('hidden', _.isEmpty(filterText));
+ }
+ $('#tic-package-toolbar-input').on('input change', _filter);
+
+ function _inputClearBtnHandler() {
+ $('#tic-package-toolbar-input').val('').trigger('change').focus();
+ $(this).toggleClass('hidden', true);
}
- $('#tic-package-left-col-tree-toolbar-filter').on('input', _filter);
+ $('#tic-package-toolbar-input-clear').on('click', _inputClearBtnHandler);
function _collapseAll() {
$tree.treeview('collapseAll');
function _filter() {
var input = $(this).val();
var duplicatedUrl = _.filter(repoStore, ['url', input]);
+
if (Util.validateURL(input) && _.isEmpty(duplicatedUrl)) {
$('#tic-repository-add').prop('disabled', false);
} else {
$('#tic-repository-add').prop('disabled', true);
}
+ $('#tic-repository-input-clear').toggleClass('hidden', _.isEmpty(input));
+ }
+ $('#tic-repository-input').on('input change', _filter);
+
+ function _inputClearBtnHandler() {
+ $('#tic-repository-input').val('').trigger('change').focus();
+ $(this).toggleClass('hidden', true);
}
- $('#tic-repository-input').on('input', _filter);
+ $('#tic-repository-input-clear').on('click', _inputClearBtnHandler);
/**
* Add Repository Button
_addRepo(input);
$repoInput.val('');
$('#tic-repository-add').prop('disabled', true);
+ $('#tic-repository-input-clear').addClass('hidden');
}
$('#tic-repository-add').prop('disabled', true).on('click', _addRepoBtnHandler);