q3aql/webui-aria2
q3aql/webui-aria2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refined the UI more for a sub bar

Browse Source
This commit is contained in:
hamza zia 2014-06-02 00:27:19 +08:00
parent 23591212b0
commit 8e4dd9ca37
1 changed files with 325 additions and 319 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
index.html
View File

@ -216,7 +216,7 @@
<!-- }}} --> <!-- }}} -->
<!-- {{{ body --> <!-- {{{ body -->
<div role="main" class="container"> <div role="main" class="container-fluid">
<!-- {{{ alerts --> <!-- {{{ alerts -->
<div ng-controller="AlertCtrl" class="row alerts"> <div ng-controller="AlertCtrl" class="row alerts">
@ -227,6 +227,87 @@
</div> </div>
<!-- }}} --> <!-- }}} -->
<div class="row-fluid">
<div class="span3">
<!-- {{{ nav side bar -->
<div class="well sidebar-nav">
<ul id="filters" class="clearfix nav nav-list">
<li class="nav-header">Download Filters</li>
<li>
<label for="filter-speed">
<input type="checkbox" ng-model="filterSpeed" ng-change="persistFilters()" id="filter-speed">
Running
</label>
</li>
<li class="active">
<label for="filter-active">
<input type="checkbox" ng-model="filterActive" ng-change="persistFilters()" id="filter-active">
Active
</label>
</li>
<li>
<label for="filter-waiting">
<input type="checkbox" ng-model="filterWaiting" ng-change="persistFilters()" id="filter-waiting">
Waiting
</label>
</li>
<li>
<label for="filter-complete">
<input type="checkbox" ng-model="filterComplete" ng-change="persistFilters()" id="filter-complete">
Complete
</label>
</li>
<li>
<label for="filter-error">
<input type="checkbox" ng-model="filterError" ng-change="persistFilters()" id="filter-error">
Error
</label>
</li>
<li>
<label for="filter-paused">
<input type="checkbox" ng-model="filterPaused" ng-change="persistFilters()" id="filter-paused">
Paused
</label>
</li>
<li>
<label for="filter-removed">
<input type="checkbox" ng-model="filterRemoved" ng-change="persistFilters()" id="filter-removed">
Removed
</label>
</li>
<li>
<label><input type="checkbox" ng-model="hideLinkedMetadata" id="hide-linked-metadata"> Hide linked meta-data</label>
<p>
Displaying <strong>{{totalDownloads}}</strong> of <em>{{totalAria2Downloads()}}</em> downloads
</p>
<p>
<button ng-click="toggleStateFilters()" class="btn btn-default btn-mini">Toggle</button>
<button ng-click="resetFilters()" class="btn btn-default btn-mini">Reset filters</button>
</p>
</li>
</ul>
<ul class="clearfix nav nav-list" ng-controller="StarredPropsCtrl" ng-show="properties.length">
<li class="nav-header">Quick Access Settings</li>
<li ng-repeat="prop in properties">
<label title="{{prop.desc}}">
<div>{{prop.name}}</div>
<div class="control-group">
<select style="width: 100%;" ng-show="prop.options.length" ng-options="opt for opt in prop.options" ng-model="prop.val"></select>
<input style="width: 100%;" ng-show="!prop.options.length" type="text" class="input-large" ng-model="prop.val"/>
</div>
</label>
</li>
<li>
<button ng-disabled="!enabled()" ng-click="save()" class="btn btn-small">Save settings</button>
</li>
</ul>
</div>
<!-- }}} -->
</div>
<div class="span9">
<!-- {{{ downloads --> <!-- {{{ downloads -->
<!-- Bug?? <div ng-show="!totalAria2Downloads() && totalAria2Downloads() > getDownloads()" class="hero-unit">--> <!-- Bug?? <div ng-show="!totalAria2Downloads() && totalAria2Downloads() > getDownloads()" class="hero-unit">-->
<div ng-show="!totalAria2Downloads()" class="hero-unit"> <div ng-show="!totalAria2Downloads()" class="hero-unit">
@ -244,63 +325,6 @@
<!-- }}} --> <!-- }}} -->
<!-- {{{ download template --> <!-- {{{ download template -->
<form id="filters" class="clearfix">
<fieldset>
<p>
<label for="filter-speed">
<input type="checkbox" ng-model="filterSpeed" ng-change="persistFilters()" id="filter-speed">
Running
</label>
<label for="filter-active">
<input type="checkbox" ng-model="filterActive" ng-change="persistFilters()" id="filter-active">
Active
</label>
<label for="filter-waiting">
<input type="checkbox" ng-model="filterWaiting" ng-change="persistFilters()" id="filter-waiting">
Waiting
</label>
<label for="filter-complete">
<input type="checkbox" ng-model="filterComplete" ng-change="persistFilters()" id="filter-complete">
Complete
</label>
<label for="filter-error">
<input type="checkbox" ng-model="filterError" ng-change="persistFilters()" id="filter-error">
Error
</label>
<label for="filter-paused">
<input type="checkbox" ng-model="filterPaused" ng-change="persistFilters()" id="filter-paused">
Paused
</label>
<label for="filter-removed">
<input type="checkbox" ng-model="filterRemoved" ng-change="persistFilters()" id="filter-removed">
Removed
</label>
<button ng-click="toggleStateFilters()" class="btn btn-default btn-mini">Toggle</button>
</p>
<p>
<label><input type="checkbox" ng-model="hideLinkedMetadata" id="hide-linked-metadata"> Hide linked meta-data</label>
</p>
<p>
Displaying <strong>{{totalDownloads}}</strong> of <em>{{totalAria2Downloads()}}</em> downloads
&nbsp;<button ng-click="resetFilters()" class="btn btn-default btn-mini">Reset filters</button>
</p>
</fieldset>
</form>
<div class="pagination pagination-right" ng-show="totalDownloads > pageSize">
<pagination
total-items="totalDownloads"
items-per-page="pageSize"
max-size="6"
page="currentPage"
boundary-links="true"
previous-text="&lsaquo;"
next-text="&rsaquo;"
first-text="&laquo;"
last-text="&raquo;"
>
</pagination>
</div>
<table <table
ng-repeat="download in getDownloads()" ng-repeat="download in getDownloads()"
@ -546,6 +570,7 @@
<!-- }}} --> <!-- }}} -->
<!-- }}} --> <!-- }}} -->
</div>
<!-- {{{ download pagination --> <!-- {{{ download pagination -->
<div class="pagination pagination-right" ng-show="totalDownloads > pageSize"> <div class="pagination pagination-right" ng-show="totalDownloads > pageSize">
@ -564,26 +589,7 @@
</div> </div>
<!-- }}} --> <!-- }}} -->
<!-- starred properties {{{ --> </div>
<div ng-controller="StarredPropsCtrl" ng-show="properties.length">
<h3>Quick Access Settings</h3>
<form class="row">
<fieldset>
<div class="span4" ng-repeat="prop in properties">
<label title="{{prop.desc}}">
<div>{{prop.name}}</div>
<div>
<select ng-show="prop.options.length" ng-options="opt for opt in prop.options" ng-model="prop.val"></select>
<input ng-show="!prop.options.length" typ="text" class="input-large" ng-model="prop.val"/>
</div>
</label>
</div>
<div class="span12" style="margin-top: 1ex"><button ng-disabled="!enabled()" ng-click="save()" class="btn btn-small">Save settings</button></div>
</fieldset>
</form>
</div>
<!--}}} -->
</div> </div>
<!-- }}} --> <!-- }}} -->