Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-07-06 23:27:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

navigation acp styling / checkboxes

Browse Source
This commit is contained in:
psychobunny
2015-10-28 13:47:13 -04:00
parent 296249ed9c
commit 4baeda7c09
2 changed files with 105 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/less/admin/general/navigation.less
View File

@@ -15,6 +15,13 @@
.drag-item {
cursor: move;
margin-right: 10px;
padding: 8px 10px;
margin-bottom: 5px;
}
p {
line-height: 20px;
min-height: 40px;
}
}

202
src/views/admin/general/navigation.tpl
View File

@@ -1,107 +1,99 @@
<div id="navigation">
<div class="col-lg-9">
<div class="panel panel-default">
<div class="panel-heading">Active Navigation</div>
<div class="panel-body">
<div class="clearfix">
<ul id="active-navigation" class="nav navbar-nav">
<!-- BEGIN navigation -->
<li data-index="{navigation.index}" class="{navigation.class} <!-- IF navigation.selected --> active <!-- ENDIF navigation.selected -->">
<a href="#" title="{navigation.route}" id="{navigation.id}">
<!-- IF navigation.iconClass -->
<i class="fa fa-fw {navigation.iconClass}"></i>
<!-- ENDIF navigation.iconClass -->
<div class="clearfix">
<ul id="active-navigation" class="nav navbar-nav">
<!-- BEGIN navigation -->
<li data-index="{navigation.index}" class="{navigation.class} <!-- IF navigation.selected --> active <!-- ENDIF navigation.selected -->">
<a href="#" title="{navigation.route}" id="{navigation.id}">
<!-- IF navigation.iconClass -->
<i class="fa fa-fw {navigation.iconClass}"></i>
<!-- ENDIF navigation.iconClass -->
<!-- IF navigation.text -->
<span class="{navigation.textClass}">{navigation.text}</span>
<!-- ENDIF navigation.text -->
</a>
</li>
<!-- END navigation -->
</ul>
</div>
<hr/>
<ul id="enabled">
<!-- BEGIN enabled -->
<li data-index="{enabled.index}" class="well <!-- IF !enabled.selected -->hidden<!-- ENDIF !enabled.selected -->">
<form>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Icon:</label>
<br/>
<span class="iconPicker"><i class="fa fa-2x {enabled.iconClass}"></i>
<input class="form-control" type="hidden" name="iconClass" value="{enabled.iconClass}" />
</span>
</div>
<div class="form-group">
<label>Route:</label>
<input class="form-control" type="text" name="route" value="{enabled.route}" />
</div>
<div class="form-group">
<label>Tooltip:</label>
<input class="form-control" type="text" name="title" value="{enabled.title}" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Text:</label>
<input class="form-control" type="text" name="text" value="{enabled.text}" />
</div>
<div class="form-group">
<label>Text Class: <small>optional</small></label>
<input class="form-control" type="text" name="textClass" value="{enabled.textClass}" />
</div>
<div class="form-group">
<label>ID: <small>optional</small></label>
<input class="form-control" type="text" name="id" value="{enabled.id}" />
</div>
</div>
</div>
<hr />
<strong>Properties:</strong>
<div class="checkbox">
<label>
<input type="checkbox" name="property:adminOnly" <!-- IF enabled.properties.adminOnly -->checked<!-- ENDIF enabled.properties.adminOnly -->/> <strong>Only display to Admins</strong>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="property:loggedIn" <!-- IF enabled.properties.loggedIn -->checked<!-- ENDIF enabled.properties.loggedIn -->/> <strong>Only display to logged in users</strong>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="property:targetBlank" <!-- IF enabled.properties.targetBlank -->checked<!-- ENDIF enabled.properties.targetBlank -->/> <strong>Open in a new window</strong>
</label>
</div>
<hr />
<button class="btn btn-danger delete">Delete</button>
<!-- IF enabled.enabled -->
<button class="btn btn-warning toggle">Disable</button>
<!-- ELSE -->
<button class="btn btn-success toggle">Enable</button>
<!-- ENDIF enabled.enabled -->
<input type="hidden" name="enabled" value="{enabled.enabled}" />
</form>
</li>
<!-- END enabled -->
</ul>
</div>
<!-- IF navigation.text -->
<span class="{navigation.textClass}">{navigation.text}</span>
<!-- ENDIF navigation.text -->
</a>
</li>
<!-- END navigation -->
</ul>
</div>
<hr/>
<ul id="enabled">
<!-- BEGIN enabled -->
<li data-index="{enabled.index}" class="well <!-- IF !enabled.selected -->hidden<!-- ENDIF !enabled.selected -->">
<form>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Icon:</label>
<br/>
<span class="iconPicker"><i class="fa fa-2x {enabled.iconClass}"></i>
<input class="form-control" type="hidden" name="iconClass" value="{enabled.iconClass}" />
</span>
</div>
<div class="form-group">
<label>Route:</label>
<input class="form-control" type="text" name="route" value="{enabled.route}" />
</div>
<div class="form-group">
<label>Tooltip:</label>
<input class="form-control" type="text" name="title" value="{enabled.title}" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Text:</label>
<input class="form-control" type="text" name="text" value="{enabled.text}" />
</div>
<div class="form-group">
<label>Text Class: <small>optional</small></label>
<input class="form-control" type="text" name="textClass" value="{enabled.textClass}" />
</div>
<div class="form-group">
<label>ID: <small>optional</small></label>
<input class="form-control" type="text" name="id" value="{enabled.id}" />
</div>
</div>
</div>
<strong>Properties:</strong>
<div class="checkbox">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input class="mdl-switch__input" type="checkbox" name="property:adminOnly" <!-- IF enabled.properties.adminOnly -->checked<!-- ENDIF enabled.properties.adminOnly -->/>
<span class="mdl-switch__label"><strong>Only display to Admins</strong></span>
</label>
</div>
<div class="checkbox">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input class="mdl-switch__input" type="checkbox" name="property:loggedIn" <!-- IF enabled.properties.loggedIn -->checked<!-- ENDIF enabled.properties.loggedIn -->/> <span class="mdl-switch__label"><strong>Only display to logged in users</strong></span>
</label>
</div>
<div class="checkbox">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input class="mdl-switch__input" type="checkbox" name="property:targetBlank" <!-- IF enabled.properties.targetBlank -->checked<!-- ENDIF enabled.properties.targetBlank -->/>
<span class="mdl-switch__label"><strong>Open in a new window</strong></span>
</label>
</div>
<button class="btn btn-danger delete">Delete</button>
<!-- IF enabled.enabled -->
<button class="btn btn-warning toggle">Disable</button>
<!-- ELSE -->
<button class="btn btn-success toggle">Enable</button>
<!-- ENDIF enabled.enabled -->
<input type="hidden" name="enabled" value="{enabled.enabled}" />
</form>
</li>
<!-- END enabled -->
</ul>
</div>
<div class="col-lg-3">
@@ -110,14 +102,16 @@
<div class="panel-body">
<ul id="available">
<li data-id="custom" class="clearfix">
<div data-id="custom" class="drag-item alert alert-warning pull-left">
<i class="fa fa-fw fa-navicon"></i>
<div data-id="custom" class="drag-item alert alert-success pull-left">
<i class="fa fa-fw fa-plus-circle"></i>
</div>
<strong>Custom Route</strong>
<p>
<strong>Custom Route</strong>
</p>
</li>
<!-- BEGIN available -->
<li data-id="@index" class="clearfix">
<div data-id="@index" class="drag-item alert <!-- IF available.core -->alert-info<!-- ELSE -->alert-success<!-- ENDIF available.core --> pull-left">
<div data-id="@index" class="drag-item alert <!-- IF available.core -->alert-warning<!-- ELSE -->alert-info<!-- ENDIF available.core --> pull-left">
<i class="fa fa-fw <!-- IF available.iconClass -->{available.iconClass}<!-- ELSE -->fa-navicon<!-- ENDIF available.iconClass -->"></i>
</div>
<p>