From cf4b2ba96fd8d7cde26045e876fa8b6770dfd1e0 Mon Sep 17 00:00:00 2001 From: Abdullah Almsaeed Date: Mon, 16 Feb 2015 16:20:44 -0500 Subject: [PATCH] Added documentation to box-tools --- documentation/index.html | 640 ++++++++++++++++++++++++++++++++++----- 1 file changed, 565 insertions(+), 75 deletions(-) diff --git a/documentation/index.html b/documentation/index.html index 42db7ab7e..442dc4d8c 100755 --- a/documentation/index.html +++ b/documentation/index.html @@ -103,7 +103,7 @@ /* desert scheme ported from vim to google prettify */ pre.prettyprint {display: block; background-color: #333; max-height: 300px; border: none!important; margin-bottom: 20px;} pre .nocode { background-color: none; color: #000 } - pre .str { color: #ffa0a0 } /* string - pink */ + pre .str { color: #ffa0a0;} /* string - pink */ pre .kwd { color: #f0e68c; font-weight: bold } pre .com { color: #87ceeb } /* comment - skyblue */ pre .typ { color: #98fb98 } /* type - lightgreen */ @@ -150,7 +150,7 @@
- +
@@ -349,15 +349,17 @@ AdminLTE/ <meta charset="UTF-8"> <title>AdminLTE 2 | Dashboard</title> <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> - <!-- Bootstrap 3.3.1 loaded from CDN. You can add you own bootstrap copy --> - <!-- AdminLTE won't work without loading Bootstrap first --> - <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> - <!-- FontAwesome Icons --> + <!-- Bootstrap 3.3.2 --> + <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> + <!-- Font Awesome Icons --> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <!-- Ionicons --> <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" /> - <!-- ADMINLTE MAIN CSS FILE --> - <link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" /> + <!-- Theme style --> + <link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" /> + <!-- AdminLTE Skins. Choose a skin from the css/skins + folder instead of downloading all of them to reduce the load. --> + <link href="dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" /> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> @@ -369,14 +371,140 @@ AdminLTE/ <body class="skin-blue"> <!-- Site wrapper --> <div class="wrapper"> - <!-- header logo: style can be found in header.less --> + <header class="main-header"> - <a href="../../index2.html" class="logo"> - <!-- LOGO --> - </a> + <a href="index2.html" class="logo"><b>Admin</b>LTE</a> <!-- Header Navbar: style can be found in header.less --> <nav class="navbar navbar-static-top" role="navigation"> - + <!-- Sidebar toggle button--> + <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </a> + <div class="navbar-custom-menu"> + <ul class="nav navbar-nav"> + <!-- Messages: style can be found in dropdown.less--> + <li class="dropdown messages-menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown"> + <i class="fa fa-envelope-o"></i> + <span class="label label-success">4</span> + </a> + <ul class="dropdown-menu"> + <li class="header">You have 4 messages</li> + <li> + <!-- inner menu: contains the actual data --> + <ul class="menu"> + <li><!-- start message --> + <a href="#"> + <div class="pull-left"> + <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/> + </div> + <h4> + Support Team + <small><i class="fa fa-clock-o"></i> 5 mins</small> + </h4> + <p>Why not buy a new awesome theme?</p> + </a> + </li><!-- end message --> + </ul> + </li> + <li class="footer"><a href="#">See All Messages</a></li> + </ul> + </li> + <!-- Notifications: style can be found in dropdown.less --> + <li class="dropdown notifications-menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown"> + <i class="fa fa-bell-o"></i> + <span class="label label-warning">10</span> + </a> + <ul class="dropdown-menu"> + <li class="header">You have 10 notifications</li> + <li> + <!-- inner menu: contains the actual data --> + <ul class="menu"> + <li> + <a href="#"> + <i class="fa fa-users text-aqua"></i> 5 new members joined today + </a> + </li> + </ul> + </li> + <li class="footer"><a href="#">View all</a></li> + </ul> + </li> + <!-- Tasks: style can be found in dropdown.less --> + <li class="dropdown tasks-menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown"> + <i class="fa fa-flag-o"></i> + <span class="label label-danger">9</span> + </a> + <ul class="dropdown-menu"> + <li class="header">You have 9 tasks</li> + <li> + <!-- inner menu: contains the actual data --> + <ul class="menu"> + <li><!-- Task item --> + <a href="#"> + <h3> + Design some buttons + <small class="pull-right">20%</small> + </h3> + <div class="progress xs"> + <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> + <span class="sr-only">20% Complete</span> + </div> + </div> + </a> + </li><!-- end task item --> + </ul> + </li> + <li class="footer"> + <a href="#">View all tasks</a> + </li> + </ul> + </li> + <!-- User Account: style can be found in dropdown.less --> + <li class="dropdown user user-menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown"> + <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/> + <span class="hidden-xs">Alexander Pierce</span> + </a> + <ul class="dropdown-menu"> + <!-- User image --> + <li class="user-header"> + <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" /> + <p> + Alexander Pierce - Web Developer + <small>Member since Nov. 2012</small> + </p> + </li> + <!-- Menu Body --> + <li class="user-body"> + <div class="col-xs-4 text-center"> + <a href="#">Followers</a> + </div> + <div class="col-xs-4 text-center"> + <a href="#">Sales</a> + </div> + <div class="col-xs-4 text-center"> + <a href="#">Friends</a> + </div> + </li> + <!-- Menu Footer--> + <li class="user-footer"> + <div class="pull-left"> + <a href="#" class="btn btn-default btn-flat">Profile</a> + </div> + <div class="pull-right"> + <a href="#" class="btn btn-default btn-flat">Sign out</a> + </div> + </li> + </ul> + </li> + </ul> + </div> </nav> </header> @@ -386,8 +514,160 @@ AdminLTE/ <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> + <!-- Sidebar user panel --> + <div class="user-panel"> + <div class="pull-left image"> + <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" /> + </div> + <div class="pull-left info"> + <p>Alexander Pierce</p> + + <a href="#"><i class="fa fa-circle text-success"></i> Online</a> + </div> + </div> + <!-- search form --> + <form action="#" method="get" class="sidebar-form"> + <div class="input-group"> + <input type="text" name="q" class="form-control" placeholder="Search..."/> + <span class="input-group-btn"> + <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button> + </span> + </div> + </form> + <!-- /.search form --> <!-- sidebar menu: : style can be found in sidebar.less --> <ul class="sidebar-menu"> + <li class="header">MAIN NAVIGATION</li> + <li class="treeview"> + <a href="#"> + <i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i> + </a> + <ul class="treeview-menu"> + <li><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li> + <li><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li> + </ul> + </li> + <li class="treeview"> + <a href="#"> + <i class="fa fa-files-o"></i> + <span>Layout Options</span> + <span class="label label-primary pull-right">4</span> + </a> + <ul class="treeview-menu"> + <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li> + <li><a href="../layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li> + <li><a href="../layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li> + <li><a href="../layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li> + </ul> + </li> + <li> + <a href="../widgets.html"> + <i class="fa fa-th"></i> <span>Widgets</span> <small class="label pull-right bg-green">Hot</small> + </a> + </li> + <li class="treeview"> + <a href="#"> + <i class="fa fa-pie-chart"></i> + <span>Charts</span> + <i class="fa fa-angle-left pull-right"></i> + </a> + <ul class="treeview-menu"> + <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li> + <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li> + <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li> + </ul> + </li> + <li class="treeview"> + <a href="#"> + <i class="fa fa-laptop"></i> + <span>UI Elements</span> + <i class="fa fa-angle-left pull-right"></i> + </a> + <ul class="treeview-menu"> + <li><a href="../UI/general.html"><i class="fa fa-circle-o"></i> General</a></li> + <li><a href="../UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li> + <li><a href="../UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li> + <li><a href="../UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li> + <li><a href="../UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li> + <li><a href="../UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li> + </ul> + </li> + <li class="treeview"> + <a href="#"> + <i class="fa fa-edit"></i> <span>Forms</span> + <i class="fa fa-angle-left pull-right"></i> + </a> + <ul class="treeview-menu"> + <li><a href="../forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li> + <li><a href="../forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li> + <li><a href="../forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li> + </ul> + </li> + <li class="treeview"> + <a href="#"> + <i class="fa fa-table"></i> <span>Tables</span> + <i class="fa fa-angle-left pull-right"></i> + </a> + <ul class="treeview-menu"> + <li><a href="../tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li> + <li><a href="../tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li> + </ul> + </li> + <li> + <a href="../calendar.html"> + <i class="fa fa-calendar"></i> <span>Calendar</span> + <small class="label pull-right bg-red">3</small> + </a> + </li> + <li> + <a href="../mailbox/mailbox.html"> + <i class="fa fa-envelope"></i> <span>Mailbox</span> + <small class="label pull-right bg-yellow">12</small> + </a> + </li> + <li class="treeview active"> + <a href="#"> + <i class="fa fa-folder"></i> <span>Examples</span> + <i class="fa fa-angle-left pull-right"></i> + </a> + <ul class="treeview-menu"> + <li><a href="invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li> + <li><a href="login.html"><i class="fa fa-circle-o"></i> Login</a></li> + <li><a href="register.html"><i class="fa fa-circle-o"></i> Register</a></li> + <li><a href="lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li> + <li><a href="404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li> + <li><a href="500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li> + <li class="active"><a href="blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li> + </ul> + </li> + <li class="treeview"> + <a href="#"> + <i class="fa fa-share"></i> <span>Multilevel</span> + <i class="fa fa-angle-left pull-right"></i> + </a> + <ul class="treeview-menu"> + <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li> + <li> + <a href="#"><i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i></a> + <ul class="treeview-menu"> + <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li> + <li> + <a href="#"><i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a> + <ul class="treeview-menu"> + <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li> + <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li> + </ul> + </li> + </ul> + </li> + <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li> + </ul> + </li> + <li><a href="documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li> + <li class="header">LABELS</li> + <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li> + <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li> + <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li> </ul> </section> <!-- /.sidebar --> @@ -395,17 +675,43 @@ AdminLTE/ <!-- =============================================== --> - <!-- Right side column. Contains the content of the page --> + <!-- Right side column. Contains the navbar and content of the page --> <div class="content-wrapper"> + <!-- Content Header (Page header) --> <section class="content-header"> - <!-- Page title and breadcrumbs go here --> - </section><!-- /.content-header --> + <h1> + Blank page + <small>it all starts here</small> + </h1> + <ol class="breadcrumb"> + <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> + <li><a href="#">Examples</a></li> + <li class="active">Blank page</li> + </ol> + </section> <!-- Main content --> <section class="content"> + <!-- Default box --> + <div class="box"> + <div class="box-header with-border"> + <h3 class="box-title">Title</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> + <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> + </div> + </div> + <div class="box-body"> + Start creating your amazing application! + </div><!-- /.box-body --> + <div class="box-footer"> + Footer + </div><!-- /.box-footer--> + </div><!-- /.box --> + </section><!-- /.content --> - </div><!-- /.right-side --> + </div><!-- /.content-wrapper --> <footer class="main-footer"> <div class="pull-right hidden-xs"> @@ -415,12 +721,18 @@ AdminLTE/ </footer> </div><!-- ./wrapper --> - <!-- jQuery 2.1.1: both Bootstrap and AdminLTE dependent on jQuery --> - <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> + <!-- jQuery 2.1.3 --> + <script src="plugins/jQuery/jQuery-2.1.3.min.js"></script> <!-- Bootstrap 3.3.2 JS --> - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript"></script> - <!-- AdminLTE App. Required in all pages --> - <script src="../../js/AdminLTE/app.js" type="text/javascript"></script> + <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> + <!-- SlimScroll --> + <script src="plugins/slimScroll/jquery.slimScroll.min.js" type="text/javascript"></script> + <!-- FastClick --> + <script src='plugins/fastclick/fastclick.min.js'></script> + <!-- AdminLTE App --> + <script src="dist/js/app.min.js" type="text/javascript"></script> + <!-- AdminLTE for demo purposes --> + <script src="dist/js/demo.js" type="text/javascript"></script> </body> </html> @@ -458,7 +770,7 @@ AdminLTE/

AdminLTE uses all of Bootstrap 3 components. It's a good start to review the Bootstrap documentation to get an idea of the various components - that this documentation does not cover. + that this documentation does not cover.

@@ -755,73 +1067,73 @@ AdminLTE/

To use this main header instead of the regular one, you must add the layout-top-nav class to the body tag.

-
+
Top Nav Example -
- - + 
-<!-- header logo: style can be found in header.less -->
-<header class="main-header">
-  <!-- Logo -->
-  <a href="../../index2.html" class="logo">AdminLTE</a>
+<header class="main-header">               
   <nav class="navbar navbar-static-top">
+    <div class="container-fluid">
     <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+      <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
         <i class="fa fa-bars"></i>
       </button>
     </div>
 
     <!-- Collect the nav links, forms, and other content for toggling -->
-    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+    <div class="collapse navbar-collapse" id="navbar-collapse">
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
         <li><a href="#">Link</a></li>
@@ -857,6 +1169,7 @@ AdminLTE/
         </li>
       </ul>
     </div><!-- /.navbar-collapse -->
+    </div><!-- /.container-fluid -->
   </nav>
 </header>
@@ -1098,6 +1411,179 @@ AdminLTE/ <div class="box box-solid box-warning">...</div> <div class="box box-solid box-success">...</div> <div class="box box-solid box-danger">...</div> +

Box Tools

+

Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use + of multiple AdminLTE components within the header of the box.

+

AdminLTE data-widget attribute provides boxes with the ability to collapse or be removed. The buttons + are placed in the box-tools which is placed in the box-header.

+ 
+<-- This will cause the box to be removed when clicked -->
+<button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
+<-- This will cause the box to collapse when clicked -->
+<button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
+
+
+
+
+

Collapsable

+
+ +
+
+
+ The body of the box +
+
+ 
+<div class="box box-default">
+  <div class="box-header with-border">
+    <h3 class="box-title">Collapsable</h3>
+    <div class="box-tools pull-right">
+      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+    </div><!-- /.box-tools -->
+  </div><!-- /.box-header -->
+  <div class="box-body">
+    The body of the box
+  </div><!-- /.box-body -->
+</div><!-- /.box -->
+
+
+
+
+

Removable

+
+ +
+
+
+ The body of the box +
+
+ 
+<div class="box box-default">
+  <div class="box-header with-border">
+    <h3 class="box-title">Removable</h3>
+    <div class="box-tools pull-right">
+      <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+    </div><!-- /.box-tools -->
+  </div><!-- /.box-header -->
+  <div class="box-body">
+    The body of the box
+  </div><!-- /.box-body -->
+</div><!-- /.box -->
+
+
+
+
+

Expandable

+
+ +
+
+
+ The body of the box +
+
+ 
+<div class="box box-default">
+  <div class="box-header with-border">
+    <h3 class="box-title">Expandable</h3>
+    <div class="box-tools pull-right">
+      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
+    </div><!-- /.box-tools -->
+  </div><!-- /.box-header -->
+  <div class="box-body">
+    The body of the box
+  </div><!-- /.box-body -->
+</div><!-- /.box -->
+
+
+

We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:

+
+
+
+
+

Labels

+
+ 8 New Messages +
+
+
+ The body of the box +
+
+ 
+<div class="box box-default">
+  <div class="box-header with-border">
+    <h3 class="box-title">Labels</h3>
+    <div class="box-tools pull-right">
+      <span class="label label-default">8 New Messages</span>
+    </div><!-- /.box-tools -->
+  </div><!-- /.box-header -->
+  <div class="box-body">
+    The body of the box
+  </div><!-- /.box-body -->
+</div><!-- /.box -->
+
+
+
+
+

Input

+
+
+ + +
+
+
+
+ The body of the box +
+
+ 
+<div class="box box-default">
+  <div class="box-header with-border">
+    <h3 class="box-title">Input</h3>
+    <div class="box-tools pull-right">
+      <div class="has-feedback">
+        <input type="text" class="form-control input-sm" placeholder="Search..."/>
+        <span class="glyphicon glyphicon-search form-control-feedback"></span>
+      </div>
+    </div><!-- /.box-tools -->
+  </div><!-- /.box-header -->
+  <div class="box-body">
+    The body of the box
+  </div><!-- /.box-body -->
+</div><!-- /.box -->
+
+
+
+
+

Tootips on buttons

+
+ + +
+
+
+ The body of the box +
+
+ 
+<div class="box box-default">
+  <div class="box-header with-border">
+    <h3 class="box-title">Tooltips on buttons</h3>
+    <div class="box-tools pull-right">      
+      <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
+      <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
+    </div><!-- /.box-tools -->
+  </div><!-- /.box-header -->
+  <div class="box-body">
+    The body of the box
+  </div><!-- /.box-body -->
+</div><!-- /.box -->
+
+
@@ -1185,6 +1671,10 @@ AdminLTE/

Login, Registration and Lockscreen Pages

There are major changes to the HTML markup and style to these pages. The best way is to copy the page's code and customize it.

And you should be set to go!

+

Mailbox

+

Mailbox got an upgrade to include three different views. The views are inbox, read mail, and compose new email. To use these views, + you should use the provided HTML files in the pages/mailbox folder.

+

Note: the old mailbox layout has been deprecated in favor of the new one and will be removed by the next release.