Merge pull request #39 from marxjmoura/v0.8.0

v0.8.0
marxjmoura · Apr 21, 2018 · 7974cec · 7974cec
2 parents 61c6879 + ee677bf
commit 7974cec
Show file tree

Hide file tree

Showing 161 changed files with 6,769 additions and 1,015 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,16 @@
+## [v0.8.0](https://github.com/marxjmoura/admin4b/releases/tag/v0.8.0) (2018-04-21)
+### Bug fixes
+- Fix `page-sign` on IE11: forms were not centralized
+- Fix check mark of `.radio` when set text-align to parent
+### Features
+- Support for print media (hide sidebar and scrollbar of the content)
+- Camera (take picture)
+- Chat (technical support)
+- Component for date input (displays calendar)
+- Notification pages
+- File manager
+- Themes for code highlight: light and dark
+
 ## [v0.7.1](https://github.com/marxjmoura/admin4b/releases/tag/v0.7.1) (2018-03-17)
 ### Bug fixes
 - Fix check mark for small and large radio buttons
@@ -33,13 +46,13 @@
 - Documentation for how to customize sidebar width
 
 ## [v0.5.0](https://github.com/marxjmoura/admin4b/releases/tag/v0.5.0) (2018-02-25)
+### Bug fixes
+- Borders of `.input-group` input showing on small screens
 ### Features
 - `.has-error` class for validation
 - Code highlight CSS extension `admin4b-highlight.min.css`
 - `label-floating` and `label-infield` components
 - New sidebar-light color
-### Bug fixes
-- Borders of `.input-group` input showing on small screens
 
 ## [v0.4.0](https://github.com/marxjmoura/admin4b/releases/tag/v0.4.0) (2018-02-19)
 ### Features

diff --git a/dist/admin4b-highlight.min.css b/dist/admin4b-highlight.min.css
diff --git a/dist/admin4b.min.css b/dist/admin4b.min.css
diff --git a/dist/admin4b.min.js b/dist/admin4b.min.js
diff --git a/docs/assets/images/jane-doe.png b/docs/assets/images/jane-doe.png
diff --git a/docs/assets/images/john-doe.png b/docs/assets/images/john-doe.png
diff --git a/docs/assets/images/unknown.png b/docs/assets/images/unknown.png
diff --git a/docs/assets/images/user-photo.png b/docs/assets/images/user-photo.png
diff --git a/docs/assets/js/admin4b.docs.js b/docs/assets/js/admin4b.docs.js
@@ -1,8 +1,14 @@
 $(function () {
+    /*
+     * Code highlight
+     */
     $('pre code').each(function (i, code) {
         hljs.highlightBlock(code);
     });
 
+    /*
+     * Spinner
+     */
     $('#spinner-toggle').on('click', function () {
         $('#spinner').addClass('show');
 
@@ -11,6 +17,9 @@ $(function () {
         }, 3000);
     });
 
+    /*
+     * Input suggestion async
+     */
     var juices = [
         'Apple, carrot, and orange',
         'Beet, carrot, ginger, and turmeric',
@@ -44,4 +53,75 @@ $(function () {
 
         $input.suggestion('refresh');
     });
+
+    /*
+     * File manager
+     */
+    $('[data-toggle="file-manager"]').on('file:change', function (e, file) {
+        $('#file-name').text(file.name);
+        $('#file-size').text((file.size / 1024).toFixed(2) + ' KB');
+        $('#is-invalid').toggleClass('d-none', !file.errors.length);
+        $('#is-valid').toggleClass('d-none', !!file.errors.length);
+
+        if (file.type.startsWith('image')) {
+            $('#file-preview').attr('src', file.dataURL).removeClass('d-none');
+        } else {
+            $('#file-preview').removeAttr('src').addClass('d-none');
+        }
+
+        $('#file-empty').addClass('d-none');
+        $('#file-data').removeClass('d-none');
+    });
+
+    /*
+     * Camera
+     */
+    var $modalCamera = $('#modal-camera');
+    var $camera = $('#camera');
+    var $btnSnapshot = $('#button-snapshot');
+    var $snapshotPreview = $('#snapshot-preview');
+
+    $modalCamera
+        .on('shown.bs.modal', function () {
+            $camera.camera('play');
+        })
+        .on('hidden.bs.modal', function () {
+            $camera.camera('stop');
+        });
+
+    $btnSnapshot.on('click', function () {
+        $camera.camera('snapshot', { width: 320, height: 240 });
+    });
+
+    $camera
+        .on('camera:snapshot', function (e, blob) {
+            $snapshotPreview.attr('src', blob.dataURL);
+            $modalCamera.modal('hide');
+        })
+        .on('camera:notSupported', function () {
+            $modalCamera.find('.modal-body').find('p').removeClass('d-none');
+        });
+
+    /*
+     * Input date (displays calendar)
+     */
+    var $calendar = $('#calendar');
+    var $btnApplyDate = $('#btnApplyDate')
+
+    $calendar.on('show.bs.modal', function (e) {
+        var $formControl = $(e.relatedTarget)
+            .closest('.form-group')
+            .find('.form-control');
+
+        $btnApplyDate.prop('target', $formControl);
+        $calendar.calendar('date', $formControl.prop('date') || new Date());
+    });
+
+    $btnApplyDate.on('click', function () {
+        var $target = $btnApplyDate.prop('target');
+        var date = $calendar.calendar('date');
+        var formattedDate = moment(date).format('dddd, MMMM D, YYYY');
+
+        $target.prop('date', date).text(formattedDate);
+    });
 });
diff --git a/docs/index.html b/docs/index.html
@@ -22,7 +22,7 @@
     </button>
   </div>
   <div class="sidebar-header">
-    <img src="./assets/images/user-photo.png" class="user-photo">
+    <img src="./assets/images/john-doe.png" class="user-photo">
     <p class="username">
       John Doe
       <small>Administrator</small>
@@ -33,33 +33,42 @@
       <i class="icon-rocket"></i> Get started
     </a>
     <div class="sidebar-nav-group">
-      <a href="#components" class="sidebar-nav-link collapsed" data-toggle="collapse" data-parent="#sidebar-nav">
-        <i class="icon-puzzle"></i> Components
+      <a href="#input-controls" class="sidebar-nav-link collapsed" data-toggle="collapse" data-parent="#sidebar-nav">
+        <i class="icon-note"></i> Input controls
       </a>
-      <div id="components" class="sidebar-nav-group collapse">
-        <a href="./pages/components/callout.html" class="sidebar-nav-link">Callout</a>
-        <a href="./pages/components/checkbox.html" class="sidebar-nav-link">Checkbox</a>
-        <a href="./pages/components/code-highlight.html" class="sidebar-nav-link">Code highlight</a>
-        <a href="./pages/components/input-group.html" class="sidebar-nav-link">Input group</a>
-        <a href="./pages/components/input-suggestion.html" class="sidebar-nav-link">Input suggestion</a>
-        <a href="./pages/components/label.html" class="sidebar-nav-link">Label</a>
-        <a href="./pages/components/radio-button.html" class="sidebar-nav-link">Radio button</a>
-        <a href="./pages/components/spinner.html" class="sidebar-nav-link">Spinner</a>
-        <a href="./pages/components/toggle-switch.html" class="sidebar-nav-link">Toggle switch</a>
+      <div id="input-controls" class="sidebar-nav-group collapse">
+        <a href="./pages/input-controls/checkbox.html" class="sidebar-nav-link">Checkbox</a>
+        <a href="./pages/input-controls/input-date.html" class="sidebar-nav-link">Input date</a>
+        <a href="./pages/input-controls/input-group.html" class="sidebar-nav-link">Input group</a>
+        <a href="./pages/input-controls/input-suggestion.html" class="sidebar-nav-link">Input suggestion</a>
+        <a href="./pages/input-controls/label.html" class="sidebar-nav-link">Label</a>
+        <a href="./pages/input-controls/radio-button.html" class="sidebar-nav-link">Radio button</a>
+        <a href="./pages/input-controls/toggle-switch.html" class="sidebar-nav-link">Toggle switch</a>
+      </div>
+    </div>
+    <div class="sidebar-nav-group">
+      <a href="#device-controls" class="sidebar-nav-link collapsed" data-toggle="collapse" data-parent="#sidebar-nav">
+        <i class="icon-screen-tablet"></i> Device controls
+      </a>
+      <div id="device-controls" class="sidebar-nav-group collapse">
+        <a href="./pages/device-controls/camera.html" class="sidebar-nav-link">Camera</a>
+        <a href="./pages/device-controls/file-manager.html" class="sidebar-nav-link">File manager</a>
       </div>
     </div>
     <div class="sidebar-nav-group">
       <a href="#content" class="sidebar-nav-link collapsed" data-toggle="collapse" data-parent="#sidebar-nav">
-        <i class="icon-folder"></i> Content
+        <i class="icon-doc"></i> Content
       </a>
       <div id="content" class="sidebar-nav-group collapse">
+        <a href="./pages/content/blank-page.html" class="sidebar-nav-link">Blank page</a>
+        <a href="./pages/content/error-page.html" class="sidebar-nav-link">Error page</a>
         <a href="./pages/content/dashboard.html" class="sidebar-nav-link">Dashboard</a>
         <a href="./pages/content/timeline.html" class="sidebar-nav-link">Timeline</a>
       </div>
     </div>
     <div class="sidebar-nav-group">
       <a href="#forms" class="sidebar-nav-link collapsed" data-toggle="collapse" data-parent="#sidebar-nav">
-        <i class="icon-note"></i> Forms
+        <i class="icon-pencil"></i> Forms
       </a>
       <div id="forms" class="sidebar-nav-group collapse">
         <a href="./pages/forms/basic-form.html" class="sidebar-nav-link">Basic form</a>
@@ -68,32 +77,33 @@
       </div>
     </div>
     <div class="sidebar-nav-group">
-      <a href="#sidebar" class="sidebar-nav-link collapsed" data-toggle="collapse" data-parent="#sidebar-nav">
+      <a href="#layout" class="sidebar-nav-link collapsed" data-toggle="collapse" data-parent="#sidebar-nav">
         <i class="icon-layers"></i> Layout
       </a>
-      <div id="sidebar" class="sidebar-nav-group collapse">
+      <div id="layout" class="sidebar-nav-group collapse">
         <a href="./pages/layout/sidebar.html" class="sidebar-nav-link">Sidebar</a>
+        <a href="./pages/layout/spinner.html" class="sidebar-nav-link">Spinner</a>
         <a href="./pages/layout/style.html" class="sidebar-nav-link">Style</a>
       </div>
     </div>
     <div class="sidebar-nav-group">
-      <a href="#sample-pages" class="sidebar-nav-link collapsed" data-toggle="collapse" data-parent="#sidebar-nav">
-        <i class="icon-doc"></i> Pages
+      <a href="#reference" class="sidebar-nav-link collapsed" data-toggle="collapse" data-parent="#sidebar-nav">
+        <i class="icon-notebook"></i> Reference
       </a>
-      <div id="sample-pages" class="sidebar-nav-group collapse">
-        <a href="./pages/sample-pages/blank-page.html" class="sidebar-nav-link">Blank page</a>
-        <a href="./pages/sample-pages/error-page.html" class="sidebar-nav-link">Error page</a>
+      <div id="reference" class="sidebar-nav-group collapse">
+        <a href="./pages/reference/callout.html" class="sidebar-nav-link">Callout</a>
+        <a href="./pages/reference/code-highlight.html" class="sidebar-nav-link">Code highlight</a>
       </div>
     </div>
   </div>
   <div class="sidebar-footer">
-    <a href="https://github.com/marxjmoura/admin4b" data-toggle="tooltip" title="GitHub">
-      <i class="fa fa-github"></i>
+    <a href="./pages/content/chat.html" data-toggle="tooltip" title="Support">
+      <i class="fa fa-comment"></i>
     </a>
-    <a href="./pages/sample-pages/settings.html" data-toggle="tooltip" title="Settings">
+    <a href="./pages/content/settings.html" data-toggle="tooltip" title="Settings">
       <i class="fa fa-cog"></i>
     </a>
-    <a href="./pages/sample-pages/signin.html" data-toggle="tooltip" title="Logout">
+    <a href="./pages/content/signin.html" data-toggle="tooltip" title="Logout">
       <i class="fa fa-power-off"></i>
     </a>
   </div>
@@ -105,7 +115,10 @@
     <i class="fa fa-bars"></i>
   </button>
   <div class="navbar-brand">
-    Admin 4B
+    Admin 4B &middot;
+    <a href="https://github.com/marxjmoura/admin4b" class="text-dark" data-toggle="tooltip" data-placement="right" title="Fork me on GitHub">
+      <i class="fa fa-github"></i>
+    </a>
   </div>
   <ul class="navbar-nav ml-auto">
     <li class="nav-item dropdown">
@@ -114,22 +127,22 @@
         <i class="fa fa-bell-o"></i>
       </a>
       <div class="dropdown-menu dropdown-menu-right">
-        <a href="#" class="dropdown-item">
+        <a href="./pages/content/notification.html" class="dropdown-item">
           <small class="text-secondary">Lorem ipsum (today)</small><br>
           <div>Lorem ipsum dolor sit amet...</div>
         </a>
         <div class="dropdown-divider"></div>
-        <a href="#" class="dropdown-item">
+        <a href="./pages/content/notification.html" class="dropdown-item">
           <small class="text-secondary">Lorem ipsum (yesterday)</small><br>
           <div>Lorem ipsum dolor sit amet...</div>
         </a>
         <div class="dropdown-divider"></div>
-        <a href="#" class="dropdown-item">
+        <a href="./pages/content/notification.html" class="dropdown-item">
           <small class="text-secondary">Lorem ipsum (12/25/2017)</small><br>
           <div>Lorem ipsum dolor sit amet...</div>
         </a>
         <div class="dropdown-divider"></div>
-        <a href="#" class="dropdown-item text-primary">
+        <a href="./pages/content/notifications.html" class="dropdown-item text-primary">
           See all notifications
         </a>
       </div>
@@ -217,6 +230,7 @@ <h3>
     &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
     &lt;!-- link to Bootstrap CSS --&gt;
     &lt;!-- link to Font Awesome CSS --&gt;
+    &lt;!-- link to Simple Line Icons CSS --&gt;
     &lt;link rel="stylesheet" href="admin4b.min.css"&gt;
     &lt;title&gt;Admin 4B&lt;/title&gt;
   &lt;/head&gt;
@@ -245,6 +259,7 @@ <h3>
   </div>
 </div>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>