- 
+ 
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+ diff --git a/docs/pages/sample-pages/blank-page.html b/docs/pages/content/blank-page.html similarity index 60% rename from docs/pages/sample-pages/blank-page.html rename to docs/pages/content/blank-page.html index 16c93e4d..f6314614 100644 --- a/docs/pages/sample-pages/blank-page.html +++ b/docs/pages/content/blank-page.html @@ -22,7 +22,7 @@
- 
+ 
+
diff --git a/docs/pages/content/chat.html b/docs/pages/content/chat.html
new file mode 100644
index 00000000..78cad021
--- /dev/null
+++ b/docs/pages/content/chat.html
@@ -0,0 +1,343 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/pages/content/dashboard.html b/docs/pages/content/dashboard.html
index 6eb005a6..176df742 100644
--- a/docs/pages/content/dashboard.html
+++ b/docs/pages/content/dashboard.html
@@ -22,7 +22,7 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + John Doe + Administrator +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + March 23, 2018 +
+
+
+
+
+
+ Hello, there... I need some help!
+
8:52 AM
+
+ Jane Doe joined the chat +
+
+ 
+
+
+
+ Hi, John. I'm happy to help. What can I do for you today?
+
8:54 AM
+
+
+
+
+
+ I can't seem to pull up my order. Can you help me?
+
9:02 AM
+
+
+
+
+
+ Absolutely. You can find the status of, and trak, your order here: www.app.com/orders
+
9:03 AM
+
+
+
+
+
+ Works great! Thank you!
+
9:07 AM
+
+
+
+
+
+ I'm glad you made it! :)
+
9:08 AM
+
+
+
+
+
+ Please let me know if you have any more questions.
+
9:08 AM
+
+
+
+
+
+ One more thing. Do you want to see the source code?
+
+ Click here and take a look.
+
+
9:10 AM
+
+
+
+ + Ending conversation since you've been inactive too long. +
+
-
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+ diff --git a/docs/pages/components/code-highlight.html b/docs/pages/content/error-page.html similarity index 59% rename from docs/pages/components/code-highlight.html rename to docs/pages/content/error-page.html index 0957d17a..33391722 100644 --- a/docs/pages/components/code-highlight.html +++ b/docs/pages/content/error-page.html @@ -22,7 +22,7 @@
-
+
+
diff --git a/docs/pages/content/notification.html b/docs/pages/content/notification.html
new file mode 100644
index 00000000..aea3fd74
--- /dev/null
+++ b/docs/pages/content/notification.html
@@ -0,0 +1,255 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/pages/content/notifications.html b/docs/pages/content/notifications.html
new file mode 100644
index 00000000..02522f68
--- /dev/null
+++ b/docs/pages/content/notifications.html
@@ -0,0 +1,330 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + John Doe + Administrator +
+
+
+
+
+
+
+
+
+
+
+
+ + Lorem ipsum dolor sit amet +
+ + Inbox + +
+
+ 18 April, 2018
+
+
+ + Hello Lorem, +
++ Lorem ipsum dolor sit amet, blandit scelerisque sem, elit est fusce metus pretium cursus vel, volutpat justo sapien ac, ornare + in lacinia leo ornare pede in, tempor quis mattis molestie a massa. Natoque quam nullam. Penatibus vestibulum aenean + sodales eleifend, sed arcu in risus urna et nec. Velit porttitor et, lacus non amet, donec est luctus nisl dis suscipit, + nulla mi dolor, urna suspendisse dolor amet cras. Etiam in sed donec tellus lobortis at, nonummy tellus amet sit vel + mauris, augue nec praesent porta, nullam tortor diam lorem. Tortor in sed donec erat. Enim neque eu ut amet, et pellentesque + tortor dapibus eros ac. Sed dapibus, pulvinar ut, non sed dui nibh. Leo fermentum, integer tortor pede laoreet. +
++ Wisi sed nibh et ac, eget dui odio sem nibh urna ullamcorper, nisl egestas pellentesque metus curabitur in, scelerisque quisque + nullam. Porta ante rhoncus harum proin diam aliquam, felis sem iaculis arcu nunc, nulla mi dignissim vestibulum. Ante + et, pede diam mi. Ullamcorper amet lobortis donec a vel, sit scelerisque nulla, vestibulum est pellentesque ultrices + egestas id. Sapien vitae ultricies tristique quae tristique neque, diam scelerisque, vestibulum pede nulla auctor. Mauris + iaculis turpis eleifend vitae sed facilisis. Interdum orci ut nunc dui, praesent vestibulum elit commodo quisque, sit + feugiat ut donec eu accumsan lacinia, sed justo id libero et dolor, condimentum condimentum quisque vestibulum arcu sem. +
+
+ Regards,
+ Lorem ipsum
+
+
+ Source code
+
+
+
+
+ <div class="d-flex">
+ <h3>
+ Lorem ipsum dolor sit amet
+ </h3>
+ <a href="#" class="text-nowrap ml-auto">
+ <i class="fa fa-inbox"></i> Inbox
+ </a>
+</div>
+<div class="mb-3">
+ <small class="text-secondary">
+ 18 April, 2018
+ </small>
+</div>
+<p>
+ Hello Lorem,
+</p>
+<p class="text-justify">
+ Lorem ipsum dolor sit amet, blandit scelerisque sem, elit est fusce metus pretium cursus vel, volutpat justo sapien ac, ornare
+ in lacinia leo ornare pede in, tempor quis mattis molestie a massa. Natoque quam nullam. Penatibus vestibulum aenean sodales
+ eleifend, sed arcu in risus urna et nec. Velit porttitor et, lacus non amet, donec est luctus nisl dis suscipit, nulla
+ mi dolor, urna suspendisse dolor amet cras. Etiam in sed donec tellus lobortis at, nonummy tellus amet sit vel mauris,
+ augue nec praesent porta, nullam tortor diam lorem. Tortor in sed donec erat. Enim neque eu ut amet, et pellentesque tortor
+ dapibus eros ac. Sed dapibus, pulvinar ut, non sed dui nibh. Leo fermentum, integer tortor pede laoreet.
+</p>
+<p class="text-justify">
+ Wisi sed nibh et ac, eget dui odio sem nibh urna ullamcorper, nisl egestas pellentesque metus curabitur in, scelerisque quisque
+ nullam. Porta ante rhoncus harum proin diam aliquam, felis sem iaculis arcu nunc, nulla mi dignissim vestibulum. Ante et,
+ pede diam mi. Ullamcorper amet lobortis donec a vel, sit scelerisque nulla, vestibulum est pellentesque ultrices egestas
+ id. Sapien vitae ultricies tristique quae tristique neque, diam scelerisque, vestibulum pede nulla auctor. Mauris iaculis
+ turpis eleifend vitae sed facilisis. Interdum orci ut nunc dui, praesent vestibulum elit commodo quisque, sit feugiat ut
+ donec eu accumsan lacinia, sed justo id libero et dolor, condimentum condimentum quisque vestibulum arcu sem.
+</p>
+<p>
+ Regards, <br>
+ Lorem ipsum
+</p>
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/pages/sample-pages/settings.html b/docs/pages/content/settings.html
similarity index 61%
rename from docs/pages/sample-pages/settings.html
rename to docs/pages/content/settings.html
index f6fedc9b..ce4659cc 100644
--- a/docs/pages/sample-pages/settings.html
+++ b/docs/pages/content/settings.html
@@ -22,7 +22,7 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + John Doe + Administrator +
+
+
+
+
+
+
+
+
+
+ + 18 April, 2018 +
+
+
+
+
+
+ Lorem ipsum dolor sit amet
+ now ++ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis + nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis... +
+ Unreaded + + +
+
+ Lorem ipsum dolor sit amet
+ 3:30 PM ++ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis + nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis... +
+ + +
+
+ Lorem ipsum dolor sit amet
+ 7:15 AM ++ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis + nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis... +
+ ++ 17 April, 2018 +
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet
+ 4:50 PM ++ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis + nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis... +
+ + +
+
+ Lorem ipsum dolor sit amet
+ 3:30 PM ++ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis + nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis... +
+ + +
+
+ Lorem ipsum dolor sit amet
+ 7:15 AM ++ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis + nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis... +
+ +
+
+ Source code
+
+
+
+
+ <p class="text-secondary">
+ 18 April, 2018
+</p>
+<div class="list-group mb-3">
+ <a href="#" class="list-group-item list-group-item-action">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="text-primary mb-2">Lorem ipsum dolor sit amet</h5>
+ <small class="text-muted">now</small>
+ </div>
+ <p class="mb-1">
+ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis
+ nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis...
+ </p>
+ <small class="text-muted">Unreaded</small>
+ </a>
+ <a href="#" class="list-group-item list-group-item-action">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="text-primary mb-2">Lorem ipsum dolor sit amet</h5>
+ <small class="text-muted">3:30 PM</small>
+ </div>
+ <p class="mb-1">
+ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis
+ nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis...
+ </p>
+ </a>
+ <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="text-primary mb-2">Lorem ipsum dolor sit amet</h5>
+ <small class="text-muted">7:15 AM</small>
+ </div>
+ <p class="mb-1">
+ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis
+ nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis...
+ </p>
+ </a>
+</div>
+<p class="text-secondary">
+ 17 April, 2018
+</p>
+<div class="list-group mb-3">
+ <a href="#" class="list-group-item list-group-item-action">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="text-primary mb-2">Lorem ipsum dolor sit amet</h5>
+ <small class="text-muted">4:50 PM</small>
+ </div>
+ <p class="mb-1">
+ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis
+ nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis...
+ </p>
+ </a>
+ <a href="#" class="list-group-item list-group-item-action">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="text-primary mb-2">Lorem ipsum dolor sit amet</h5>
+ <small class="text-muted">3:30 PM</small>
+ </div>
+ <p class="mb-1">
+ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis
+ nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis...
+ </p>
+ </a>
+ <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="text-primary mb-2">Lorem ipsum dolor sit amet</h5>
+ <small class="text-muted">7:15 AM</small>
+ </div>
+ <p class="mb-1">
+ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis
+ nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis...
+ </p>
+ </a>
+</div>
+<div class="text-center mb-3">
+ <a href="#" class="btn btn-primary">Old notifications</a>
+</div>
+
-
+
+
diff --git a/docs/pages/sample-pages/signup.html b/docs/pages/content/signup.html
similarity index 96%
rename from docs/pages/sample-pages/signup.html
rename to docs/pages/content/signup.html
index 0953d969..844e547c 100644
--- a/docs/pages/sample-pages/signup.html
+++ b/docs/pages/content/signup.html
@@ -93,13 +93,14 @@
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+ diff --git a/docs/pages/sample-pages/signin.html b/docs/pages/content/signin.html similarity index 96% rename from docs/pages/sample-pages/signin.html rename to docs/pages/content/signin.html index 45dda957..816d6df1 100644 --- a/docs/pages/sample-pages/signin.html +++ b/docs/pages/content/signin.html @@ -81,13 +81,14 @@
-
+
Admin 4B
+
+
+
+Admin 4B
+
+
+
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+ diff --git a/docs/pages/device-controls/camera.html b/docs/pages/device-controls/camera.html new file mode 100644 index 00000000..1fa69570 --- /dev/null +++ b/docs/pages/device-controls/camera.html @@ -0,0 +1,414 @@ + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/pages/device-controls/file-manager.html b/docs/pages/device-controls/file-manager.html
new file mode 100644
index 00000000..09769990
--- /dev/null
+++ b/docs/pages/device-controls/file-manager.html
@@ -0,0 +1,379 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + John Doe + Administrator +
+
+
+
+
+
+
+
+
+Camera
++ This session introduces methods and events to control and interact with the camera of the device enabling users to take pictures. + See the example below: +
+
+
+
+
+ 
+
+
+ + In this example, the camera is turned on and off according to the events show and hide of the modal. Refer to + bootstrap documentation for more details about the modal plugin. +
+
+
+ Source code
+
+
+
+
+
+
+
+
+
+ <div class="form-group">
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-camera">
+ <i class="fa fa-camera"></i> Take a picture
+ </button>
+</div>
+
+<img id="snapshot-preview" src="unknown.png" class="img-thumbnail">
+
+<div id="modal-camera" class="modal" tabindex="-1" data-backdrop="static">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title">
+ <i class="fa fa-camera"></i> Camera
+ </h5>
+ </div>
+ <div class="modal-body">
+ <video id="camera" class="camera" data-size="320x240"></video>
+ </div>
+ <div class="modal-footer">
+ <button id="button-snapshot" type="button" class="btn btn-info">Take a picture</button>
+ <button type="button" class="btn btn-outline-danger" data-dismiss="modal">Turn off</button>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+ $('#modal-camera')
+ .on('shown.bs.modal', function () {
+ $('#camera').camera('play');
+ })
+ .on('hidden.bs.modal', function () {
+ $('#camera').camera('stop');
+ });
+
+$('#button-snapshot').on('click', function () {
+ $('#camera').camera('snapshot');
+});
+
+$('#camera').on('camera:snapshot', function (e, blob) {
+ $('#snapshot-preview').attr('src', blob.dataURL);
+ $('#modal-camera').modal('hide');
+});
+
+
+ Browser compatibility
+
+ IE 11 and below currently does not support getUserMedia.
+ However, there is some polyfills available that you can explore.
+
Options
++ Options can be passed via data attributes: +
+
+
+
+
+
+ | Option | +Type | +Default | +Description | +
|---|---|---|---|
data-size |
+ string | +320x240 | +The size of the picture. Invalid size will be converted to default size. | +
+
+ Source code
+
+
+
+ Methods
++ A few methods are available to control the camera: +
+
+
+
+
+
+ | Method | +Description | +
|---|---|
camera('play') |
+ Starts the camera. Triggers the event camera:play or camera:error. |
+
camera('stop') |
+ Stop the camera. Triggers the event camera:stop. |
+
camera('snapshot') |
+ Take a picture from the camera. Triggers the event camera:snapshot. |
+
+
+ Source code
+
+
+
+ Events
++ Events triggered from the camera can be listened to write custom logic: +
+
+
+
+
+
+ | Event | +Description | +
|---|---|
camera:play |
+ Triggered after the camera starts to play. | +
camera:error |
+ Triggered if any error occur during the start of the camera. | +
camera:notSupported |
+ Triggered if the browser does not support camera. | +
camera:stop |
+ Triggered after the camera stop. | +
camera:snapshot |
+ Triggered after a picture is taken. Blob and data URL are ready. | +
+
+ Source code
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/pages/forms/basic-form.html b/docs/pages/forms/basic-form.html
index 756cfd25..7a807c23 100644
--- a/docs/pages/forms/basic-form.html
+++ b/docs/pages/forms/basic-form.html
@@ -22,7 +22,7 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + John Doe + Administrator +
+
+
+
+
+
+
+
+
+
+ File manager
++ The file manager is a component that conect to the device's storage and allow users to select files to submit. + See the example below: +
+
+
+ Only .jpeg and .png and maximum 1MB.
+
+
+
+
+
+ | Filename | +Size | +
|---|---|
|
+ |
+ + + | +
| + No file selected. + | +|
+
+ Source code
+
+
+
+
+
+
+
+
+
+ <div class="form-group">
+ <button type="button" class="btn btn-primary" data-toggle="file-manager" data-maxsize="1MB" data-type="image/jpeg,image/png">
+ <i class="fa fa-folder-open-o"></i> Select a file
+ </button>
+ <small class="text-secondary">Only .jpeg and .png and maximum 1MB.</small>
+</div>
+<div class="table-responsive">
+ <table class="table">
+ <tr>
+ <th>Filename</th>
+ <th>Size</th>
+ </tr>
+ <tr id="file-data" class="d-none">
+ <td class="align-middle">
+ <img id="file-preview" class="rounded d-none" width="64">
+ <span id="file-name"></span>
+ <i id="is-invalid" class="fa fa-times-circle text-danger d-none"></i>
+ <i id="is-valid" class="fa fa-check-circle text-success d-none"></i>
+ </td>
+ <td class="align-middle">
+ <span id="file-size"></span>
+ </td>
+ </tr>
+ <tr id="file-empty">
+ <td colspan="2" class="text-secondary">
+ No file selected.
+ </td>
+ </tr>
+ </table>
+</div>
+
+
+ $('[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')) {
+ $('#preview').attr('src', file.dataURL).removeClass('d-none');
+ } else {
+ $('#preview').removeAttr('src').addClass('d-none');
+ }
+
+ $('#file-empty').addClass('d-none');
+ $('#file-data').removeClass('d-none');
+});
+File validation
++ The file manager has an built-in validation configured by attribute options: +
+
+
+
+
+
+ | Validation | +Description | +
|---|---|
+ data-maxsize
+ |
+ + Validates the size of the file. You can also define the size unit e.g., 1024B, 100KB, 2.4MB, 5GB. + | +
+ data-type
+ |
+
+ Validates the type of the file. You need to use MIME types for validation e.g.,
+ image/png, application/pdf. Use comma for separate multiple MIME types.
+ |
+
+
+ Warranties
+Wrong values for data-maxsize or data-type will result in invalid file after validation.
Events
++ Events can be used by developer to interact with the component and write custom logic. +
+
+
+
+
+
+ | Event | +Who fires | +Description | +
|---|---|---|
file:change |
+ Component | +Triggered when the user selects a file. | +
+ After the file selection a few properties are added to the file by the component: +
+
+
+
+
+
+ | Property | +Description | +
|---|---|
dataURL |
+ Base64 data URL. | +
errors |
+
+ File errors after validation:
+
|
+
+
+ Source code
+
+
+
+
-
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+ diff --git a/docs/pages/forms/multi-step-form.html b/docs/pages/forms/multi-step-form.html index 705a31e9..a841734e 100644 --- a/docs/pages/forms/multi-step-form.html +++ b/docs/pages/forms/multi-step-form.html @@ -22,7 +22,7 @@
-
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+ diff --git a/docs/pages/forms/tabbed-form.html b/docs/pages/forms/tabbed-form.html index 3c87eb6e..215a1b41 100644 --- a/docs/pages/forms/tabbed-form.html +++ b/docs/pages/forms/tabbed-form.html @@ -22,7 +22,7 @@
-
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+ diff --git a/docs/pages/sample-pages/error-page.html b/docs/pages/input-controls/calendar.html similarity index 63% rename from docs/pages/sample-pages/error-page.html rename to docs/pages/input-controls/calendar.html index 29f7a1e4..dda1a454 100644 --- a/docs/pages/sample-pages/error-page.html +++ b/docs/pages/input-controls/calendar.html @@ -22,7 +22,7 @@
-
+
+
diff --git a/docs/pages/components/radio-button.html b/docs/pages/input-controls/radio-button.html
similarity index 75%
rename from docs/pages/components/radio-button.html
rename to docs/pages/input-controls/radio-button.html
index 543c6537..a194f145 100644
--- a/docs/pages/components/radio-button.html
+++ b/docs/pages/input-controls/radio-button.html
@@ -22,7 +22,7 @@
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
-
+
Admin 4B
+
+
+
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+ diff --git a/docs/pages/input-controls/input-date.html b/docs/pages/input-controls/input-date.html new file mode 100644 index 00000000..42b97a8e --- /dev/null +++ b/docs/pages/input-controls/input-date.html @@ -0,0 +1,677 @@ + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/pages/components/input-group.html b/docs/pages/input-controls/input-group.html
similarity index 78%
rename from docs/pages/components/input-group.html
rename to docs/pages/input-controls/input-group.html
index 95dcb3af..8315a717 100644
--- a/docs/pages/components/input-group.html
+++ b/docs/pages/input-controls/input-group.html
@@ -22,7 +22,7 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + John Doe + Administrator +
+
+
+
+
+
+
+
+
+
+ Input date
++ Input date is a set of bootstrap components (mainly input-group + and modal) to build a control that allows users to navigate in the + calendar and select a date. See the example below: +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source code
+
+
+
+
+
+
+
+
+
+ <div class="row">
+ <div class="col-12 col-md-6 col-lg-6">
+ <div class="form-group">
+ <label>From</label>
+ <div class="input-group">
+ <div class="form-control"></div>
+ <div class="input-group-append">
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#calendar">
+ <i class="fa fa-calendar"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-12 col-md-6 col-lg-6">
+ <div class="form-group">
+ <label>Until</label>
+ <div class="input-group">
+ <div class="form-control"></div>
+ <div class="input-group-append">
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#calendar">
+ <i class="fa fa-calendar"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+<div id="calendar" class="modal modal-calendar fade" tabindex="-1" data-backdrop="static">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <div class="input-group mx-auto">
+ <div class="input-group-prepend">
+ <button type="button" class="btn btn-link" data-calendar-month="previous">
+ <i class="fa fa-angle-left"></i>
+ </button>
+ </div>
+ <div class="input-group-prepend">
+ <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"></button>
+ <div class="dropdown-menu">
+ <a href="#" class="dropdown-item" data-calendar-month="0">January</a>
+ <a href="#" class="dropdown-item" data-calendar-month="1">February</a>
+ <a href="#" class="dropdown-item" data-calendar-month="2">March</a>
+ <a href="#" class="dropdown-item" data-calendar-month="3">April</a>
+ <a href="#" class="dropdown-item" data-calendar-month="4">May</a>
+ <a href="#" class="dropdown-item" data-calendar-month="5">June</a>
+ <a href="#" class="dropdown-item" data-calendar-month="6">July</a>
+ <a href="#" class="dropdown-item" data-calendar-month="7">August</a>
+ <a href="#" class="dropdown-item" data-calendar-month="8">September</a>
+ <a href="#" class="dropdown-item" data-calendar-month="9">October</a>
+ <a href="#" class="dropdown-item" data-calendar-month="10">November</a>
+ <a href="#" class="dropdown-item" data-calendar-month="11">December</a>
+ </div>
+ </div>
+ <input type="text" class="form-control" maxlength="4">
+ <div class="input-group-append">
+ <button type="button" class="btn btn-link" data-calendar-month="next">
+ <i class="fa fa-angle-right"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+ <div class="modal-body">
+ <table class="table-calendar">
+ <thead>
+ <tr>
+ <th>Su</th>
+ <th>Mo</th>
+ <th>Tu</th>
+ <th>We</th>
+ <th>Th</th>
+ <th>Fr</th>
+ <th>Sa</th>
+ </tr>
+ </thead>
+ </table>
+ <div class="text-center">
+ <button type="button" class="btn btn-link" data-calendar-link="today">
+ <i class="fa fa-calendar-o"></i> today
+ </button>
+ <button type="button" class="btn btn-link" data-calendar-link="selected">
+ <i class="fa fa-calendar-check-o"></i> selected
+ </button>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button id="btnApplyDate" type="button" class="btn btn-primary" data-dismiss="modal">
+ Apply
+ </button>
+ <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+ Cancel
+ </button>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+ 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);
+});
+
+
+ It is possible have only one calendar for the entire application if you want to.
+Calendar
+
+ The calendar is displayed in a bootstrap modal
+ and defined by the class .modal-calendar.
+
+ The navigation of the calendar is placed in the modal header. The modal body contains the current page (.table-calendar)
+ and the calendar links (today and selected date). The buttons for confirm and cancel are placed in the modal footer.
+ See the basic structure below:
+
+
+ Source code
+
+
+
+
+ <div class="modal modal-calendar fade">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <!-- Calendar navigation -->
+ </div>
+ <div class="modal-body">
+ <!-- Calendar current page (table) -->
+ <!-- Calendar links (today and selected date) -->
+ </div>
+ <div class="modal-footer">
+ <!-- Buttons for confirm and cancel -->
+ </div>
+ </div>
+ </div>
+</div>
+Calendar header
++ The calendar header contains the navigation that allows the user to go to the next pages or to the previous pages of the calendar. + Also, the user can select a month in the dropdown or type the desired year. See the example below: +
+
+
+ Source code
+
+
+
+
+ <div class="input-group mx-auto">
+ <div class="input-group-prepend">
+ <button type="button" class="btn btn-link" data-calendar-month="previous">
+ <i class="fa fa-angle-left"></i>
+ </button>
+ </div>
+ <div class="input-group-prepend">
+ <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"></button>
+ <div class="dropdown-menu">
+ <a href="#" class="dropdown-item" data-calendar-month="0">January</a>
+ <a href="#" class="dropdown-item" data-calendar-month="1">February</a>
+ <a href="#" class="dropdown-item" data-calendar-month="2">March</a>
+ <a href="#" class="dropdown-item" data-calendar-month="3">April</a>
+ <a href="#" class="dropdown-item" data-calendar-month="4">May</a>
+ <a href="#" class="dropdown-item" data-calendar-month="5">June</a>
+ <a href="#" class="dropdown-item" data-calendar-month="6">July</a>
+ <a href="#" class="dropdown-item" data-calendar-month="7">August</a>
+ <a href="#" class="dropdown-item" data-calendar-month="8">September</a>
+ <a href="#" class="dropdown-item" data-calendar-month="9">October</a>
+ <a href="#" class="dropdown-item" data-calendar-month="10">November</a>
+ <a href="#" class="dropdown-item" data-calendar-month="11">December</a>
+ </div>
+ </div>
+ <input type="text" class="form-control" maxlength="4">
+ <div class="input-group-append">
+ <button type="button" class="btn btn-link" data-calendar-month="next">
+ <i class="fa fa-angle-right"></i>
+ </button>
+ </div>
+</div>
+Calendar body
++ The calendar body contains the current page and allows the user to select the desired date. + In addition, the body contains the links to today's date and to the selected date. +
+
+
+ Source code
+
+
+
+
+ <table class="table-calendar">
+ <thead>
+ <tr>
+ <th>Su</th>
+ <th>Mo</th>
+ <th>Tu</th>
+ <th>We</th>
+ <th>Th</th>
+ <th>Fr</th>
+ <th>Sa</th>
+ </tr>
+ </thead>
+</table>
+<div class="text-center">
+ <button type="button" class="btn btn-link" data-calendar-link="today">
+ <i class="fa fa-calendar-o"></i> today
+ </button>
+ <button type="button" class="btn btn-link" data-calendar-link="selected">
+ <i class="fa fa-calendar-check-o"></i> selected
+ </button>
+</div>
+Calendar footer
++ The calendar footer contains the buttons to confirm or cancel the selected date. See the example below: +
+
+
+ Source code
+
+
+
+ Options
++ Options can be passed via data attributes: +
+
+
+
+
+
+ | Option | +Type | +Description | +
|---|---|---|
data-calendar-link |
+ string | +Navigates directly to the calendar page: today or selected (selected date). |
+
data-calendar-month |
+ string|number | +The month for which it will be navigated: 0..11 (January to December), previous or next. |
+
+
+ By design these attribute options only work for children of a .modal-calendar.
Methods
++ A few methods are available to control the calendar: +
+
+
+
+
+
+ | Method | +Description | +
|---|---|
calendar('date') |
+ Gets the selected date. | +
calendar('date', myDate) |
+
+ Sets the selected date (automatically queries the selected date).
+ Triggers the events calendar:change and calendar:query.
+ |
+
calendar('query:date') |
+ Gets the queried date (does not reflect the selected date). | +
calendar('query:date', myDate) |
+
+ Sets the queried date (recalculates the calendar page).
+ Triggers the event calendar:query.
+ |
+
calendar('query:nextMonth') |
+ Go to next month. Triggers the event calendar:query. |
+
calendar('query:nextYear') |
+ Go to next year. Triggers the event calendar:query. |
+
calendar('query:previousMonth') |
+ Go to previous month. Triggers the event calendar:query. |
+
calendar('query:previousYear') |
+ Go to previous year. Triggers the event calendar:query. |
+
Events
++ Events triggered from the calendar can be listened to write custom logic: +
+
+
+
+
+
+ | Event | +Description | +
|---|---|
calendar:change |
+ Triggered after select a date. | +
calendar:each |
+ Triggered for each date while loading the calendar page. | +
calendar:query |
+ Triggered after querying the date. | +
+
+ Source code
+
+
+
+
+ $modalCalendar.on('calendar:change', function (e, date) {
+ console.log('Selected date: ' + date);
+});
+
+$modalCalendar.on('calendar:each', function (e, date) {
+ console.log('Anchor tag: ' + e.relatedTarget); // Only for dates in the queried month and year
+ console.log('Current date: ' + date);
+});
+
+$modalCalendar.on('calendar:query', function (e, date) {
+ console.log('Queried date' + date);
+});
+
-
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+ diff --git a/docs/pages/components/input-suggestion.html b/docs/pages/input-controls/input-suggestion.html similarity index 87% rename from docs/pages/components/input-suggestion.html rename to docs/pages/input-controls/input-suggestion.html index 5394ae0c..b3761823 100644 --- a/docs/pages/components/input-suggestion.html +++ b/docs/pages/input-controls/input-suggestion.html @@ -22,7 +22,7 @@
-
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+ diff --git a/docs/pages/components/label.html b/docs/pages/input-controls/label.html similarity index 68% rename from docs/pages/components/label.html rename to docs/pages/input-controls/label.html index dd0ed6da..c17a16e4 100644 --- a/docs/pages/components/label.html +++ b/docs/pages/input-controls/label.html @@ -22,7 +22,7 @@
-
+
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
-
-
Warranties
--
-
-
- The
.floating-labelcomponent needs space to move into and - the.label-infieldcomponent needs space to stay inside. - To do this, it is need to increase the input height. -
- -
- In order for the
.floating-labeland.label-infieldcomponents to work properly - you have to set the attributeidof theinputand the attributefor- of thelabel. -
- -
- In order for the
.floating-labelcomponent to work properly - you have to set the attribute attributeplaceholderof theinput. -
-
+
+ Warranties
+-
+
-
+ The
.floating-labelcomponent needs space to move into and + the.label-infieldcomponent needs space to stay inside. + To do this, it is need to increase the input height. +
+ -
+ In order for the
.floating-labeland.label-infieldcomponents to work properly + you have to set the attributeidof theinputand the attributefor+ of thelabel. +
+ -
+ In order for the
.floating-labelcomponent to work properly + you have to set the attribute attributeplaceholderof theinput. +
+
+
Browser compatibility
+Floating labels will not work properly on IE11 and older versions.
+
-
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+ diff --git a/docs/pages/components/toggle-switch.html b/docs/pages/input-controls/toggle-switch.html similarity index 75% rename from docs/pages/components/toggle-switch.html rename to docs/pages/input-controls/toggle-switch.html index ab140559..611cd16f 100644 --- a/docs/pages/components/toggle-switch.html +++ b/docs/pages/input-controls/toggle-switch.html @@ -22,7 +22,7 @@
-
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+ diff --git a/docs/pages/layout/sidebar.html b/docs/pages/layout/sidebar.html index c7d97664..163aa761 100644 --- a/docs/pages/layout/sidebar.html +++ b/docs/pages/layout/sidebar.html @@ -22,7 +22,7 @@
-
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+ diff --git a/docs/pages/components/spinner.html b/docs/pages/layout/spinner.html similarity index 72% rename from docs/pages/components/spinner.html rename to docs/pages/layout/spinner.html index e59aad75..af30bcb9 100644 --- a/docs/pages/components/spinner.html +++ b/docs/pages/layout/spinner.html @@ -22,7 +22,7 @@
-
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+ diff --git a/docs/pages/layout/style.html b/docs/pages/layout/style.html index 97e83921..b050acfe 100644 --- a/docs/pages/layout/style.html +++ b/docs/pages/layout/style.html @@ -22,7 +22,7 @@
-
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+ diff --git a/docs/pages/components/callout.html b/docs/pages/reference/callout.html similarity index 66% rename from docs/pages/components/callout.html rename to docs/pages/reference/callout.html index ecbae79f..8902a572 100644 --- a/docs/pages/components/callout.html +++ b/docs/pages/reference/callout.html @@ -22,7 +22,7 @@
-
+
Admin 4B
+
+
+
+
+
John Doe Administrator @@ -33,33 +33,42 @@ Get started
+ diff --git a/docs/pages/reference/code-highlight.html b/docs/pages/reference/code-highlight.html new file mode 100644 index 00000000..d6f538be --- /dev/null +++ b/docs/pages/reference/code-highlight.html @@ -0,0 +1,376 @@ + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
diff --git a/package-lock.json b/package-lock.json
index b7259a82..8bf32d5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "admin4b",
- "version": "0.3.0",
+ "version": "0.8.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -80,7 +80,7 @@
"dev": true,
"requires": {
"delegates": "1.0.0",
- "readable-stream": "2.3.3"
+ "readable-stream": "2.3.6"
},
"dependencies": {
"isarray": {
@@ -89,25 +89,31 @@
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
"dev": true
},
+ "process-nextick-args": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+ "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+ "dev": true
+ },
"readable-stream": {
- "version": "2.3.3",
- "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
- "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
+ "version": "2.3.6",
+ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+ "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
"dev": true,
"requires": {
"core-util-is": "1.0.2",
"inherits": "2.0.3",
"isarray": "1.0.0",
- "process-nextick-args": "1.0.7",
+ "process-nextick-args": "2.0.0",
"safe-buffer": "5.1.1",
- "string_decoder": "1.0.3",
+ "string_decoder": "1.1.1",
"util-deprecate": "1.0.2"
}
},
"string_decoder": {
- "version": "1.0.3",
- "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
- "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+ "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
"safe-buffer": "5.1.1"
@@ -212,9 +218,9 @@
"dev": true
},
"aws4": {
- "version": "1.6.0",
- "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
- "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz",
+ "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==",
"dev": true
},
"balanced-match": {
@@ -503,9 +509,9 @@
"dev": true
},
"combined-stream": {
- "version": "1.0.5",
- "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
- "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz",
+ "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=",
"dev": true,
"requires": {
"delayed-stream": "1.0.0"
@@ -605,14 +611,14 @@
"integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
"dev": true,
"requires": {
- "lru-cache": "4.1.1",
+ "lru-cache": "4.1.2",
"which": "1.3.0"
},
"dependencies": {
"lru-cache": {
- "version": "4.1.1",
- "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz",
- "integrity": "sha512-q4spe4KTfsAS1SUHLO0wz8Qiyf1+vMIAgpRYioFYDMNqKfHQbg+AVDH3i4fvpl71/P1L0dBl+fQi+P37UYf0ew==",
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.2.tgz",
+ "integrity": "sha512-wgeVXhrDwAWnIF/yZARsFnMBtdFXOg1b8RIrhilp+0iDYN4mdQcNZElDZ0e4B64BhaxeQ5zN7PMyvu7we1kPeQ==",
"dev": true,
"requires": {
"pseudomap": "1.0.2",
@@ -1028,8 +1034,8 @@
"dev": true,
"requires": {
"asynckit": "0.4.0",
- "combined-stream": "1.0.5",
- "mime-types": "2.1.17"
+ "combined-stream": "1.0.6",
+ "mime-types": "2.1.18"
}
},
"fragment-cache": {
@@ -1458,14 +1464,14 @@
"dev": true
},
"gulp-sass": {
- "version": "3.1.0",
- "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-3.1.0.tgz",
- "integrity": "sha1-U9xLaKH13f5EJKtMJHZVJpqLdLc=",
+ "version": "3.2.1",
+ "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-3.2.1.tgz",
+ "integrity": "sha512-UATbRpSDsyXCnpYSPBUEvdvtSEzksJs7/oQ0CujIpzKqKrO6vlnYwhX2UTsGrf4rNLwqlSSaM271It0uHYvJ3Q==",
"dev": true,
"requires": {
"gulp-util": "3.0.8",
"lodash.clonedeep": "4.5.0",
- "node-sass": "4.7.2",
+ "node-sass": "4.8.3",
"through2": "2.0.3",
"vinyl-sourcemaps-apply": "0.2.1"
}
@@ -1536,7 +1542,7 @@
"requires": {
"chalk": "1.1.3",
"commander": "2.12.2",
- "is-my-json-valid": "2.17.1",
+ "is-my-json-valid": "2.17.2",
"pinkie-promise": "2.0.1"
}
},
@@ -1624,9 +1630,9 @@
}
},
"hosted-git-info": {
- "version": "2.5.0",
- "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.5.0.tgz",
- "integrity": "sha512-pNgbURSuab90KbTqvRPsseaTxOJCZBD0a7t+haSN33piP9cCM4l0CqdzAif2hUqm716UovKB2ROmiabGAKVXyg==",
+ "version": "2.6.0",
+ "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.6.0.tgz",
+ "integrity": "sha512-lIbgIIQA3lz5XaB6vxakj6sDHADJiZadYEJB+FgA+C4nubM1NwcuvUr9EJPmnH1skZqpqUzWborWo8EIUi0Sdw==",
"dev": true
},
"http-signature": {
@@ -1637,7 +1643,7 @@
"requires": {
"assert-plus": "0.2.0",
"jsprim": "1.4.1",
- "sshpk": "1.13.1"
+ "sshpk": "1.14.1"
}
},
"in-publish": {
@@ -1794,14 +1800,21 @@
"is-extglob": "2.1.1"
}
},
+ "is-my-ip-valid": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz",
+ "integrity": "sha512-gmh/eWXROncUzRnIa1Ubrt5b8ep/MGSnfAUI3aRp+sqTCs1tv1Isl8d8F6JmkN3dXKc3ehZMrtiPN9eL03NuaQ==",
+ "dev": true
+ },
"is-my-json-valid": {
- "version": "2.17.1",
- "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.17.1.tgz",
- "integrity": "sha512-Q2khNw+oBlWuaYvEEHtKSw/pCxD2L5Rc1C+UQme9X6JdRDh7m5D7HkozA0qa3DUkQ6VzCnEm8mVIQPyIRkI5sQ==",
+ "version": "2.17.2",
+ "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.17.2.tgz",
+ "integrity": "sha512-IBhBslgngMQN8DDSppmgDv7RNrlFotuuDsKcrCP3+HbFaVivIBU7u9oiiErw8sH4ynx3+gOGQ3q2otkgiSi6kg==",
"dev": true,
"requires": {
"generate-function": "2.0.0",
"generate-object-property": "1.2.0",
+ "is-my-ip-valid": "1.0.0",
"jsonpointer": "4.0.1",
"xtend": "4.0.1"
}
@@ -1911,9 +1924,9 @@
"dev": true
},
"js-base64": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.0.tgz",
- "integrity": "sha512-Wehd+7Pf9tFvGb+ydPm9TjYjV8X1YHOVyG8QyELZxEMqOhemVwGRmoG8iQ/soqI3n8v4xn59zaLxiCJiaaRzKA==",
+ "version": "2.4.3",
+ "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz",
+ "integrity": "sha512-H7ErYLM34CvDMto3GbD6xD0JLUGYXR3QTcH6B/tr4Hi/QpSThnCsIp+Sy5FRTw3B0d6py4HcNkW7nO/wdtGWEw==",
"dev": true
},
"jsbn": {
@@ -2136,9 +2149,9 @@
}
},
"lodash.mergewith": {
- "version": "4.6.0",
- "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz",
- "integrity": "sha1-FQzwoWeR9ZA7iJHqsVRgknS96lU=",
+ "version": "4.6.1",
+ "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
+ "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
"dev": true
},
"lodash.restparam": {
@@ -2300,18 +2313,18 @@
}
},
"mime-db": {
- "version": "1.30.0",
- "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.30.0.tgz",
- "integrity": "sha1-dMZD2i3Z1qRTmZY0ZbJtXKfXHwE=",
+ "version": "1.33.0",
+ "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
+ "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
"dev": true
},
"mime-types": {
- "version": "2.1.17",
- "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.17.tgz",
- "integrity": "sha1-Cdejk/A+mVp5+K+Fe3Cp4KsWVXo=",
+ "version": "2.1.18",
+ "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
+ "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
"dev": true,
"requires": {
- "mime-db": "1.30.0"
+ "mime-db": "1.33.0"
}
},
"minimatch": {
@@ -2383,9 +2396,9 @@
}
},
"nan": {
- "version": "2.8.0",
- "resolved": "https://registry.npmjs.org/nan/-/nan-2.8.0.tgz",
- "integrity": "sha1-7XFfP+neArV6XmJS2QqWZ14fCFo=",
+ "version": "2.10.0",
+ "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
+ "integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==",
"dev": true
},
"nanomatch": {
@@ -2434,7 +2447,7 @@
"mkdirp": "0.5.1",
"nopt": "3.0.6",
"npmlog": "4.1.2",
- "osenv": "0.1.4",
+ "osenv": "0.1.5",
"request": "2.79.0",
"rimraf": "2.6.2",
"semver": "5.3.0",
@@ -2480,9 +2493,9 @@
}
},
"node-sass": {
- "version": "4.7.2",
- "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.7.2.tgz",
- "integrity": "sha512-CaV+wLqZ7//Jdom5aUFCpGNoECd7BbNhjuwdsX/LkXBrHl8eb1Wjw4HvWqcFvhr5KuNgAk8i/myf/MQ1YYeroA==",
+ "version": "4.8.3",
+ "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.8.3.tgz",
+ "integrity": "sha512-tfFWhUsCk/Y19zarDcPo5xpj+IW3qCfOjVdHtYeG6S1CKbQOh1zqylnQK6cV3z9k80yxAnFX9Y+a9+XysDhhfg==",
"dev": true,
"requires": {
"async-foreach": "0.1.3",
@@ -2494,10 +2507,10 @@
"in-publish": "2.0.0",
"lodash.assign": "4.2.0",
"lodash.clonedeep": "4.5.0",
- "lodash.mergewith": "4.6.0",
+ "lodash.mergewith": "4.6.1",
"meow": "3.7.0",
"mkdirp": "0.5.1",
- "nan": "2.8.0",
+ "nan": "2.10.0",
"node-gyp": "3.6.2",
"npmlog": "4.1.2",
"request": "2.79.0",
@@ -2536,14 +2549,14 @@
"dev": true,
"requires": {
"glob": "7.1.2",
- "lodash": "4.17.4",
+ "lodash": "4.17.5",
"minimatch": "3.0.4"
}
},
"lodash": {
- "version": "4.17.4",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
- "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
+ "version": "4.17.5",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+ "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==",
"dev": true
},
"minimatch": {
@@ -2581,10 +2594,10 @@
"integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==",
"dev": true,
"requires": {
- "hosted-git-info": "2.5.0",
+ "hosted-git-info": "2.6.0",
"is-builtin-module": "1.0.0",
"semver": "4.3.6",
- "validate-npm-package-license": "3.0.1"
+ "validate-npm-package-license": "3.0.3"
}
},
"npmlog": {
@@ -2773,9 +2786,9 @@
"dev": true
},
"osenv": {
- "version": "0.1.4",
- "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.4.tgz",
- "integrity": "sha1-Qv5tWVPfBsgGS+bxdsPQWqqjRkQ=",
+ "version": "0.1.5",
+ "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+ "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
"dev": true,
"requires": {
"os-homedir": "1.0.2",
@@ -3088,9 +3101,9 @@
"dev": true,
"requires": {
"aws-sign2": "0.6.0",
- "aws4": "1.6.0",
+ "aws4": "1.7.0",
"caseless": "0.11.0",
- "combined-stream": "1.0.5",
+ "combined-stream": "1.0.6",
"extend": "3.0.1",
"forever-agent": "0.6.1",
"form-data": "2.1.4",
@@ -3100,13 +3113,13 @@
"is-typedarray": "1.0.0",
"isstream": "0.1.2",
"json-stringify-safe": "5.0.1",
- "mime-types": "2.1.17",
+ "mime-types": "2.1.18",
"oauth-sign": "0.8.2",
"qs": "6.3.2",
"stringstream": "0.0.5",
- "tough-cookie": "2.3.3",
+ "tough-cookie": "2.3.4",
"tunnel-agent": "0.4.3",
- "uuid": "3.1.0"
+ "uuid": "3.2.1"
}
},
"require-directory": {
@@ -3193,7 +3206,7 @@
"dev": true,
"requires": {
"glob": "7.1.2",
- "lodash": "4.17.4",
+ "lodash": "4.17.5",
"scss-tokenizer": "0.2.3",
"yargs": "7.1.0"
},
@@ -3213,9 +3226,9 @@
}
},
"lodash": {
- "version": "4.17.4",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
- "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
+ "version": "4.17.5",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+ "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==",
"dev": true
},
"minimatch": {
@@ -3235,7 +3248,7 @@
"integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
"dev": true,
"requires": {
- "js-base64": "2.4.0",
+ "js-base64": "2.4.3",
"source-map": "0.4.4"
},
"dependencies": {
@@ -3457,24 +3470,35 @@
"dev": true
},
"spdx-correct": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-1.0.2.tgz",
- "integrity": "sha1-SzBz2TP/UfORLwOsVRlJikFQ20A=",
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz",
+ "integrity": "sha512-N19o9z5cEyc8yQQPukRCZ9EUmb4HUpnrmaL/fxS2pBo2jbfcFRVuFZ/oFC+vZz0MNNk0h80iMn5/S6qGZOL5+g==",
"dev": true,
"requires": {
- "spdx-license-ids": "1.2.2"
+ "spdx-expression-parse": "3.0.0",
+ "spdx-license-ids": "3.0.0"
}
},
- "spdx-expression-parse": {
- "version": "1.0.4",
- "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz",
- "integrity": "sha1-m98vIOH0DtRH++JzJmGR/O1RYmw=",
+ "spdx-exceptions": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.1.0.tgz",
+ "integrity": "sha512-4K1NsmrlCU1JJgUrtgEeTVyfx8VaYea9J9LvARxhbHtVtohPs/gFGG5yy49beySjlIMhhXZ4QqujIZEfS4l6Cg==",
"dev": true
},
+ "spdx-expression-parse": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
+ "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
+ "dev": true,
+ "requires": {
+ "spdx-exceptions": "2.1.0",
+ "spdx-license-ids": "3.0.0"
+ }
+ },
"spdx-license-ids": {
- "version": "1.2.2",
- "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz",
- "integrity": "sha1-yd96NCRZSt5r0RkA1ZZpbcBrrFc=",
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.0.tgz",
+ "integrity": "sha512-2+EPwgbnmOIl8HjGBXXMd9NAu02vLjOO1nWw4kmeRDFyHn+M/ETfHxQUK0oXg8ctgVnl9t3rosNVsZ1jG61nDA==",
"dev": true
},
"split": {
@@ -3517,9 +3541,9 @@
}
},
"sshpk": {
- "version": "1.13.1",
- "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.1.tgz",
- "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=",
+ "version": "1.14.1",
+ "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.1.tgz",
+ "integrity": "sha1-Ew9Zde3a2WPx1W+SuaxsUfqfg+s=",
"dev": true,
"requires": {
"asn1": "0.2.3",
@@ -3624,7 +3648,7 @@
"integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=",
"dev": true,
"requires": {
- "readable-stream": "2.3.3"
+ "readable-stream": "2.3.6"
},
"dependencies": {
"isarray": {
@@ -3633,25 +3657,31 @@
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
"dev": true
},
+ "process-nextick-args": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+ "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+ "dev": true
+ },
"readable-stream": {
- "version": "2.3.3",
- "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
- "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
+ "version": "2.3.6",
+ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+ "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
"dev": true,
"requires": {
"core-util-is": "1.0.2",
"inherits": "2.0.3",
"isarray": "1.0.0",
- "process-nextick-args": "1.0.7",
+ "process-nextick-args": "2.0.0",
"safe-buffer": "5.1.1",
- "string_decoder": "1.0.3",
+ "string_decoder": "1.1.1",
"util-deprecate": "1.0.2"
}
},
"string_decoder": {
- "version": "1.0.3",
- "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
- "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+ "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
"safe-buffer": "5.1.1"
@@ -3915,9 +3945,9 @@
}
},
"tough-cookie": {
- "version": "2.3.3",
- "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.3.tgz",
- "integrity": "sha1-C2GKVWW23qkL80JdBNVe3EdadWE=",
+ "version": "2.3.4",
+ "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz",
+ "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==",
"dev": true,
"requires": {
"punycode": "1.4.1"
@@ -4172,9 +4202,9 @@
"dev": true
},
"uuid": {
- "version": "3.1.0",
- "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",
- "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g==",
+ "version": "3.2.1",
+ "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz",
+ "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA==",
"dev": true
},
"v8flags": {
@@ -4187,13 +4217,13 @@
}
},
"validate-npm-package-license": {
- "version": "3.0.1",
- "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz",
- "integrity": "sha1-KAS6vnEq0zeUWaz74kdGqywwP7w=",
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz",
+ "integrity": "sha512-63ZOUnL4SIXj4L0NixR3L1lcjO38crAbgrTpl28t8jjrfuiOBL5Iygm+60qPs/KsZGzPNg6Smnc/oY16QTjF0g==",
"dev": true,
"requires": {
- "spdx-correct": "1.0.2",
- "spdx-expression-parse": "1.0.4"
+ "spdx-correct": "3.0.0",
+ "spdx-expression-parse": "3.0.0"
}
},
"verror": {
diff --git a/package.json b/package.json
index 0a6e5c98..57e6872a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "admin4b",
"title": "Admin 4B",
- "version": "0.7.1",
+ "version": "0.8.0",
"homepage": "https://marxjmoura.github.io/admin4b",
"author": "Marx JMoura",
"license": "MIT",
@@ -26,7 +26,7 @@
"gulp-file-include": "^2.0.1",
"gulp-html-extend": "^1.1.6",
"gulp-rename": "^1.2.2",
- "gulp-sass": "^3.1.0",
+ "gulp-sass": "^3.2.1",
"gulp-uglify": "^3.0.0"
}
}
diff --git a/src/html/includes/code-examples/content/chat.html b/src/html/includes/code-examples/content/chat.html
new file mode 100644
index 00000000..a00a7f28
--- /dev/null
+++ b/src/html/includes/code-examples/content/chat.html
@@ -0,0 +1,78 @@
+<div class="chat">
+ <div class="chat-body">
+ <div class="chat-content">
+ <div class="chat-messages">
+ <div class="container-fluid">
+ <p class="text-center">
+ <small class="text-secondary">March 23, 2018</small>
+ </p>
+ <div class="message-sent">
+ <img src="john-doe.png">
+ <p>
+ Hello, there... I need some help!
+ <br><small>8:52 AM</small>
+ </p>
+ </div>
+ <p class="text-center">
+ <small class="text-secondary">Jane Doe joined the chat</small>
+ </p>
+ <div class="message-reply">
+ <img src="jane-doe.png">
+ <p>
+ Hi, John. I'm happy to help. What can I do for you today?
+ <br><small>8:54 AM</small>
+ </p>
+ </div>
+ <div class="message-sent">
+ <img src="john-doe.png">
+ <p>
+ I can't seem to pull up my order. Can you help me?
+ <br><small>9:02 AM</small>
+ </p>
+ </div>
+ <div class="message-reply">
+ <img src="jane-doe.png">
+ <p>
+ Absolutely. You can find the status of, and trak, your order here: www.app.com/orders
+ <br><small>9:03 AM</small>
+ </p>
+ </div>
+ <div class="message-sent">
+ <img src="john-doe.png">
+ <p>
+ Works great! Thank you!
+ <br><small>9:07 AM</small>
+ </p>
+ </div>
+ <div class="message-reply">
+ <img src="jane-doe.png">
+ <p>
+ I'm glad you made it! :)
+ <br><small>9:08 AM</small>
+ </p>
+ </div>
+ <div class="message-reply">
+ <img src="jane-doe.png">
+ <p>
+ Please let me know if you have any more questions.
+ <br><small>9:08 AM</small>
+ </p>
+ </div>
+ <p class="text-center">
+ <small class="text-danger">Ending conversation since you've been inactive too long.</small>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <form class="chat-footer">
+ <div class="input-group">
+ <input type="text" class="form-control" placeholder="Write your message...">
+ <div class="input-group-append">
+ <button type="submit" class="btn btn-primary">
+ <i class="fa fa-paper-plane"></i>
+ </button>
+ </div>
+ </div>
+ </form>
+</div>
diff --git a/src/html/includes/code-examples/content/notification.html b/src/html/includes/code-examples/content/notification.html
new file mode 100644
index 00000000..43ad62fc
--- /dev/null
+++ b/src/html/includes/code-examples/content/notification.html
@@ -0,0 +1,36 @@
+<div class="d-flex">
+ <h3>
+ Lorem ipsum dolor sit amet
+ </h3>
+ <a href="#" class="text-nowrap ml-auto">
+ <i class="fa fa-inbox"></i> Inbox
+ </a>
+</div>
+<div class="mb-3">
+ <small class="text-secondary">
+ 18 April, 2018
+ </small>
+</div>
+<p>
+ Hello Lorem,
+</p>
+<p class="text-justify">
+ Lorem ipsum dolor sit amet, blandit scelerisque sem, elit est fusce metus pretium cursus vel, volutpat justo sapien ac, ornare
+ in lacinia leo ornare pede in, tempor quis mattis molestie a massa. Natoque quam nullam. Penatibus vestibulum aenean sodales
+ eleifend, sed arcu in risus urna et nec. Velit porttitor et, lacus non amet, donec est luctus nisl dis suscipit, nulla
+ mi dolor, urna suspendisse dolor amet cras. Etiam in sed donec tellus lobortis at, nonummy tellus amet sit vel mauris,
+ augue nec praesent porta, nullam tortor diam lorem. Tortor in sed donec erat. Enim neque eu ut amet, et pellentesque tortor
+ dapibus eros ac. Sed dapibus, pulvinar ut, non sed dui nibh. Leo fermentum, integer tortor pede laoreet.
+</p>
+<p class="text-justify">
+ Wisi sed nibh et ac, eget dui odio sem nibh urna ullamcorper, nisl egestas pellentesque metus curabitur in, scelerisque quisque
+ nullam. Porta ante rhoncus harum proin diam aliquam, felis sem iaculis arcu nunc, nulla mi dignissim vestibulum. Ante et,
+ pede diam mi. Ullamcorper amet lobortis donec a vel, sit scelerisque nulla, vestibulum est pellentesque ultrices egestas
+ id. Sapien vitae ultricies tristique quae tristique neque, diam scelerisque, vestibulum pede nulla auctor. Mauris iaculis
+ turpis eleifend vitae sed facilisis. Interdum orci ut nunc dui, praesent vestibulum elit commodo quisque, sit feugiat ut
+ donec eu accumsan lacinia, sed justo id libero et dolor, condimentum condimentum quisque vestibulum arcu sem.
+</p>
+<p>
+ Regards, <br>
+ Lorem ipsum
+</p>
diff --git a/src/html/includes/code-examples/content/notifications.html b/src/html/includes/code-examples/content/notifications.html
new file mode 100644
index 00000000..1eade332
--- /dev/null
+++ b/src/html/includes/code-examples/content/notifications.html
@@ -0,0 +1,74 @@
+<p class="text-secondary">
+ 18 April, 2018
+</p>
+<div class="list-group mb-3">
+ <a href="#" class="list-group-item list-group-item-action">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="text-primary mb-2">Lorem ipsum dolor sit amet</h5>
+ <small class="text-muted">now</small>
+ </div>
+ <p class="mb-1">
+ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis
+ nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis...
+ </p>
+ <small class="text-muted">Unreaded</small>
+ </a>
+ <a href="#" class="list-group-item list-group-item-action">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="text-primary mb-2">Lorem ipsum dolor sit amet</h5>
+ <small class="text-muted">3:30 PM</small>
+ </div>
+ <p class="mb-1">
+ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis
+ nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis...
+ </p>
+ </a>
+ <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="text-primary mb-2">Lorem ipsum dolor sit amet</h5>
+ <small class="text-muted">7:15 AM</small>
+ </div>
+ <p class="mb-1">
+ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis
+ nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis...
+ </p>
+ </a>
+</div>
+<p class="text-secondary">
+ 17 April, 2018
+</p>
+<div class="list-group mb-3">
+ <a href="#" class="list-group-item list-group-item-action">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="text-primary mb-2">Lorem ipsum dolor sit amet</h5>
+ <small class="text-muted">4:50 PM</small>
+ </div>
+ <p class="mb-1">
+ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis
+ nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis...
+ </p>
+ </a>
+ <a href="#" class="list-group-item list-group-item-action">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="text-primary mb-2">Lorem ipsum dolor sit amet</h5>
+ <small class="text-muted">3:30 PM</small>
+ </div>
+ <p class="mb-1">
+ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis
+ nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis...
+ </p>
+ </a>
+ <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="text-primary mb-2">Lorem ipsum dolor sit amet</h5>
+ <small class="text-muted">7:15 AM</small>
+ </div>
+ <p class="mb-1">
+ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis
+ nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis...
+ </p>
+ </a>
+</div>
+<div class="text-center mb-3">
+ <a href="#" class="btn btn-primary">Old notifications</a>
+</div>
diff --git a/src/html/includes/code-examples/sample-pages/signin.html b/src/html/includes/code-examples/content/signin.html
similarity index 100%
rename from src/html/includes/code-examples/sample-pages/signin.html
rename to src/html/includes/code-examples/content/signin.html
diff --git a/src/html/includes/code-examples/sample-pages/signup.html b/src/html/includes/code-examples/content/signup.html
similarity index 100%
rename from src/html/includes/code-examples/sample-pages/signup.html
rename to src/html/includes/code-examples/content/signup.html
diff --git a/src/html/includes/code-examples/device-controls/camera/camera-events.js b/src/html/includes/code-examples/device-controls/camera/camera-events.js
new file mode 100644
index 00000000..a65d9a68
--- /dev/null
+++ b/src/html/includes/code-examples/device-controls/camera/camera-events.js
@@ -0,0 +1,19 @@
+$('#myCamera').on('camera:play', function (e) {
+ console.log('Camera is playing.');
+});
+
+$('#myCamera').on('camera:error', function (e, error) {
+ console.log('Could not start the camera: ' + error); // Original error from browser
+});
+
+$('#myCamera').on('camera:notSupported', function (e, error) {
+ console.log('Camera not supported.');
+});
+
+$('#myCamera').on('camera:stop', function (e) {
+ console.log('Camera is stopped.');
+});
+
+$('#myCamera').on('camera:snapshot', function (e, blob) {
+ console.log('Base64 picture URL: ' + blob.dataURL);
+});
diff --git a/src/html/includes/code-examples/device-controls/camera/camera-methods.js b/src/html/includes/code-examples/device-controls/camera/camera-methods.js
new file mode 100644
index 00000000..ff8694f7
--- /dev/null
+++ b/src/html/includes/code-examples/device-controls/camera/camera-methods.js
@@ -0,0 +1,3 @@
+$('#myCamera').camera('start');
+$('#myCamera').camera('stop');
+$('#myCamera').camera('snapshot');
diff --git a/src/html/includes/code-examples/device-controls/camera/camera-options.html b/src/html/includes/code-examples/device-controls/camera/camera-options.html
new file mode 100644
index 00000000..342629a9
--- /dev/null
+++ b/src/html/includes/code-examples/device-controls/camera/camera-options.html
@@ -0,0 +1 @@
+<video class="camera" data-size="320x240"></video>
diff --git a/src/html/includes/code-examples/device-controls/camera/camera.html b/src/html/includes/code-examples/device-controls/camera/camera.html
new file mode 100644
index 00000000..6e4fd31d
--- /dev/null
+++ b/src/html/includes/code-examples/device-controls/camera/camera.html
@@ -0,0 +1,26 @@
+<div class="form-group">
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-camera">
+ <i class="fa fa-camera"></i> Take a picture
+ </button>
+</div>
+
+<img id="snapshot-preview" src="unknown.png" class="img-thumbnail">
+
+<div id="modal-camera" class="modal" tabindex="-1" data-backdrop="static">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title">
+ <i class="fa fa-camera"></i> Camera
+ </h5>
+ </div>
+ <div class="modal-body">
+ <video id="camera" class="camera" data-size="320x240"></video>
+ </div>
+ <div class="modal-footer">
+ <button id="button-snapshot" type="button" class="btn btn-info">Take a picture</button>
+ <button type="button" class="btn btn-outline-danger" data-dismiss="modal">Turn off</button>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/src/html/includes/code-examples/device-controls/camera/camera.js b/src/html/includes/code-examples/device-controls/camera/camera.js
new file mode 100644
index 00000000..9104d671
--- /dev/null
+++ b/src/html/includes/code-examples/device-controls/camera/camera.js
@@ -0,0 +1,16 @@
+$('#modal-camera')
+ .on('shown.bs.modal', function () {
+ $('#camera').camera('play');
+ })
+ .on('hidden.bs.modal', function () {
+ $('#camera').camera('stop');
+ });
+
+$('#button-snapshot').on('click', function () {
+ $('#camera').camera('snapshot');
+});
+
+$('#camera').on('camera:snapshot', function (e, blob) {
+ $('#snapshot-preview').attr('src', blob.dataURL);
+ $('#modal-camera').modal('hide');
+});
diff --git a/src/html/includes/code-examples/device-controls/file-manager/file-manager-change.js b/src/html/includes/code-examples/device-controls/file-manager/file-manager-change.js
new file mode 100644
index 00000000..29c495c8
--- /dev/null
+++ b/src/html/includes/code-examples/device-controls/file-manager/file-manager-change.js
@@ -0,0 +1,9 @@
+$('[data-toggle="file-manager"]').on('file:change', function (e, file) {
+ // file.dataURL is loaded by the component
+ console.log('Base64 URL: ', file.dataURL);
+
+ // file.errors is binded by the component after validation
+ if (file.errors.length) {
+ console.log('File errors: ', file.errors);
+ }
+});
diff --git a/src/html/includes/code-examples/device-controls/file-manager/file-manager.html b/src/html/includes/code-examples/device-controls/file-manager/file-manager.html
new file mode 100644
index 00000000..56e6929e
--- /dev/null
+++ b/src/html/includes/code-examples/device-controls/file-manager/file-manager.html
@@ -0,0 +1,30 @@
+<div class="form-group">
+ <button type="button" class="btn btn-primary" data-toggle="file-manager" data-maxsize="1MB" data-type="image/jpeg,image/png">
+ <i class="fa fa-folder-open-o"></i> Select a file
+ </button>
+ <small class="text-secondary">Only .jpeg and .png and maximum 1MB.</small>
+</div>
+<div class="table-responsive">
+ <table class="table">
+ <tr>
+ <th>Filename</th>
+ <th>Size</th>
+ </tr>
+ <tr id="file-data" class="d-none">
+ <td class="align-middle">
+ <img id="file-preview" class="rounded d-none" width="64">
+ <span id="file-name"></span>
+ <i id="is-invalid" class="fa fa-times-circle text-danger d-none"></i>
+ <i id="is-valid" class="fa fa-check-circle text-success d-none"></i>
+ </td>
+ <td class="align-middle">
+ <span id="file-size"></span>
+ </td>
+ </tr>
+ <tr id="file-empty">
+ <td colspan="2" class="text-secondary">
+ No file selected.
+ </td>
+ </tr>
+ </table>
+</div>
diff --git a/src/html/includes/code-examples/device-controls/file-manager/file-manager.js b/src/html/includes/code-examples/device-controls/file-manager/file-manager.js
new file mode 100644
index 00000000..5505613e
--- /dev/null
+++ b/src/html/includes/code-examples/device-controls/file-manager/file-manager.js
@@ -0,0 +1,15 @@
+$('[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')) {
+ $('#preview').attr('src', file.dataURL).removeClass('d-none');
+ } else {
+ $('#preview').removeAttr('src').addClass('d-none');
+ }
+
+ $('#file-empty').addClass('d-none');
+ $('#file-data').removeClass('d-none');
+});
diff --git a/src/html/includes/code-examples/get-started/initial-setup.html b/src/html/includes/code-examples/get-started/initial-setup.html
index d871d28b..520d1e17 100644
--- a/src/html/includes/code-examples/get-started/initial-setup.html
+++ b/src/html/includes/code-examples/get-started/initial-setup.html
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- link to Bootstrap CSS -->
<!-- link to Font Awesome CSS -->
+ <!-- link to Simple Line Icons CSS -->
<link rel="stylesheet" href="admin4b.min.css">
<title>Admin 4B</title>
</head>
diff --git a/src/html/includes/code-examples/components/checkbox/checkbox-basic.html b/src/html/includes/code-examples/input-controls/checkbox/checkbox-basic.html
similarity index 100%
rename from src/html/includes/code-examples/components/checkbox/checkbox-basic.html
rename to src/html/includes/code-examples/input-controls/checkbox/checkbox-basic.html
diff --git a/src/html/includes/code-examples/components/checkbox/checkbox-colors.html b/src/html/includes/code-examples/input-controls/checkbox/checkbox-colors.html
similarity index 100%
rename from src/html/includes/code-examples/components/checkbox/checkbox-colors.html
rename to src/html/includes/code-examples/input-controls/checkbox/checkbox-colors.html
diff --git a/src/html/includes/code-examples/components/checkbox/checkbox-disabled.html b/src/html/includes/code-examples/input-controls/checkbox/checkbox-disabled.html
similarity index 100%
rename from src/html/includes/code-examples/components/checkbox/checkbox-disabled.html
rename to src/html/includes/code-examples/input-controls/checkbox/checkbox-disabled.html
diff --git a/src/html/includes/code-examples/components/checkbox/checkbox-sizes.html b/src/html/includes/code-examples/input-controls/checkbox/checkbox-sizes.html
similarity index 100%
rename from src/html/includes/code-examples/components/checkbox/checkbox-sizes.html
rename to src/html/includes/code-examples/input-controls/checkbox/checkbox-sizes.html
diff --git a/src/html/includes/code-examples/input-controls/input-date/calendar-events.js b/src/html/includes/code-examples/input-controls/input-date/calendar-events.js
new file mode 100644
index 00000000..78a449a2
--- /dev/null
+++ b/src/html/includes/code-examples/input-controls/input-date/calendar-events.js
@@ -0,0 +1,12 @@
+$modalCalendar.on('calendar:change', function (e, date) {
+ console.log('Selected date: ' + date);
+});
+
+$modalCalendar.on('calendar:each', function (e, date) {
+ console.log('Anchor tag: ' + e.relatedTarget); // Only for dates in the queried month and year
+ console.log('Current date: ' + date);
+});
+
+$modalCalendar.on('calendar:query', function (e, date) {
+ console.log('Queried date' + date);
+});
diff --git a/src/html/includes/code-examples/input-controls/input-date/calendar-modal-body.html b/src/html/includes/code-examples/input-controls/input-date/calendar-modal-body.html
new file mode 100644
index 00000000..8400fa04
--- /dev/null
+++ b/src/html/includes/code-examples/input-controls/input-date/calendar-modal-body.html
@@ -0,0 +1,21 @@
+<table class="table-calendar">
+ <thead>
+ <tr>
+ <th>Su</th>
+ <th>Mo</th>
+ <th>Tu</th>
+ <th>We</th>
+ <th>Th</th>
+ <th>Fr</th>
+ <th>Sa</th>
+ </tr>
+ </thead>
+</table>
+<div class="text-center">
+ <button type="button" class="btn btn-link" data-calendar-link="today">
+ <i class="fa fa-calendar-o"></i> today
+ </button>
+ <button type="button" class="btn btn-link" data-calendar-link="selected">
+ <i class="fa fa-calendar-check-o"></i> selected
+ </button>
+</div>
diff --git a/src/html/includes/code-examples/input-controls/input-date/calendar-modal-empty.html b/src/html/includes/code-examples/input-controls/input-date/calendar-modal-empty.html
new file mode 100644
index 00000000..e334718f
--- /dev/null
+++ b/src/html/includes/code-examples/input-controls/input-date/calendar-modal-empty.html
@@ -0,0 +1,16 @@
+<div class="modal modal-calendar fade">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <!-- Calendar navigation -->
+ </div>
+ <div class="modal-body">
+ <!-- Calendar current page (table) -->
+ <!-- Calendar links (today and selected date) -->
+ </div>
+ <div class="modal-footer">
+ <!-- Buttons for confirm and cancel -->
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/src/html/includes/code-examples/input-controls/input-date/calendar-modal-footer.html b/src/html/includes/code-examples/input-controls/input-date/calendar-modal-footer.html
new file mode 100644
index 00000000..63de93ef
--- /dev/null
+++ b/src/html/includes/code-examples/input-controls/input-date/calendar-modal-footer.html
@@ -0,0 +1,6 @@
+<button type="button" class="btn btn-primary" data-dismiss="modal">
+ Apply
+</button>
+<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+ Cancel
+</button>
diff --git a/src/html/includes/code-examples/input-controls/input-date/calendar-modal-header.html b/src/html/includes/code-examples/input-controls/input-date/calendar-modal-header.html
new file mode 100644
index 00000000..9e939223
--- /dev/null
+++ b/src/html/includes/code-examples/input-controls/input-date/calendar-modal-header.html
@@ -0,0 +1,30 @@
+<div class="input-group mx-auto">
+ <div class="input-group-prepend">
+ <button type="button" class="btn btn-link" data-calendar-month="previous">
+ <i class="fa fa-angle-left"></i>
+ </button>
+ </div>
+ <div class="input-group-prepend">
+ <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"></button>
+ <div class="dropdown-menu">
+ <a href="#" class="dropdown-item" data-calendar-month="0">January</a>
+ <a href="#" class="dropdown-item" data-calendar-month="1">February</a>
+ <a href="#" class="dropdown-item" data-calendar-month="2">March</a>
+ <a href="#" class="dropdown-item" data-calendar-month="3">April</a>
+ <a href="#" class="dropdown-item" data-calendar-month="4">May</a>
+ <a href="#" class="dropdown-item" data-calendar-month="5">June</a>
+ <a href="#" class="dropdown-item" data-calendar-month="6">July</a>
+ <a href="#" class="dropdown-item" data-calendar-month="7">August</a>
+ <a href="#" class="dropdown-item" data-calendar-month="8">September</a>
+ <a href="#" class="dropdown-item" data-calendar-month="9">October</a>
+ <a href="#" class="dropdown-item" data-calendar-month="10">November</a>
+ <a href="#" class="dropdown-item" data-calendar-month="11">December</a>
+ </div>
+ </div>
+ <input type="text" class="form-control" maxlength="4">
+ <div class="input-group-append">
+ <button type="button" class="btn btn-link" data-calendar-month="next">
+ <i class="fa fa-angle-right"></i>
+ </button>
+ </div>
+</div>
diff --git a/src/html/includes/code-examples/input-controls/input-date/input-date.html b/src/html/includes/code-examples/input-controls/input-date/input-date.html
new file mode 100644
index 00000000..e2386744
--- /dev/null
+++ b/src/html/includes/code-examples/input-controls/input-date/input-date.html
@@ -0,0 +1,97 @@
+<div class="row">
+ <div class="col-12 col-md-6 col-lg-6">
+ <div class="form-group">
+ <label>From</label>
+ <div class="input-group">
+ <div class="form-control"></div>
+ <div class="input-group-append">
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#calendar">
+ <i class="fa fa-calendar"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-12 col-md-6 col-lg-6">
+ <div class="form-group">
+ <label>Until</label>
+ <div class="input-group">
+ <div class="form-control"></div>
+ <div class="input-group-append">
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#calendar">
+ <i class="fa fa-calendar"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+<div id="calendar" class="modal modal-calendar fade" tabindex="-1" data-backdrop="static">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <div class="input-group mx-auto">
+ <div class="input-group-prepend">
+ <button type="button" class="btn btn-link" data-calendar-month="previous">
+ <i class="fa fa-angle-left"></i>
+ </button>
+ </div>
+ <div class="input-group-prepend">
+ <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"></button>
+ <div class="dropdown-menu">
+ <a href="#" class="dropdown-item" data-calendar-month="0">January</a>
+ <a href="#" class="dropdown-item" data-calendar-month="1">February</a>
+ <a href="#" class="dropdown-item" data-calendar-month="2">March</a>
+ <a href="#" class="dropdown-item" data-calendar-month="3">April</a>
+ <a href="#" class="dropdown-item" data-calendar-month="4">May</a>
+ <a href="#" class="dropdown-item" data-calendar-month="5">June</a>
+ <a href="#" class="dropdown-item" data-calendar-month="6">July</a>
+ <a href="#" class="dropdown-item" data-calendar-month="7">August</a>
+ <a href="#" class="dropdown-item" data-calendar-month="8">September</a>
+ <a href="#" class="dropdown-item" data-calendar-month="9">October</a>
+ <a href="#" class="dropdown-item" data-calendar-month="10">November</a>
+ <a href="#" class="dropdown-item" data-calendar-month="11">December</a>
+ </div>
+ </div>
+ <input type="text" class="form-control" maxlength="4">
+ <div class="input-group-append">
+ <button type="button" class="btn btn-link" data-calendar-month="next">
+ <i class="fa fa-angle-right"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+ <div class="modal-body">
+ <table class="table-calendar">
+ <thead>
+ <tr>
+ <th>Su</th>
+ <th>Mo</th>
+ <th>Tu</th>
+ <th>We</th>
+ <th>Th</th>
+ <th>Fr</th>
+ <th>Sa</th>
+ </tr>
+ </thead>
+ </table>
+ <div class="text-center">
+ <button type="button" class="btn btn-link" data-calendar-link="today">
+ <i class="fa fa-calendar-o"></i> today
+ </button>
+ <button type="button" class="btn btn-link" data-calendar-link="selected">
+ <i class="fa fa-calendar-check-o"></i> selected
+ </button>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button id="btnApplyDate" type="button" class="btn btn-primary" data-dismiss="modal">
+ Apply
+ </button>
+ <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+ Cancel
+ </button>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/src/html/includes/code-examples/input-controls/input-date/input-date.js b/src/html/includes/code-examples/input-controls/input-date/input-date.js
new file mode 100644
index 00000000..601fe754
--- /dev/null
+++ b/src/html/includes/code-examples/input-controls/input-date/input-date.js
@@ -0,0 +1,19 @@
+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/src/html/includes/code-examples/components/input-group/input-group-basic.html b/src/html/includes/code-examples/input-controls/input-group/input-group-basic.html
similarity index 100%
rename from src/html/includes/code-examples/components/input-group/input-group-basic.html
rename to src/html/includes/code-examples/input-controls/input-group/input-group-basic.html
diff --git a/src/html/includes/code-examples/components/input-group/input-group-states.html b/src/html/includes/code-examples/input-controls/input-group/input-group-states.html
similarity index 100%
rename from src/html/includes/code-examples/components/input-group/input-group-states.html
rename to src/html/includes/code-examples/input-controls/input-group/input-group-states.html
diff --git a/src/html/includes/code-examples/components/input-suggestion/input-suggestion-advanced.html b/src/html/includes/code-examples/input-controls/input-suggestion/input-suggestion-advanced.html
similarity index 100%
rename from src/html/includes/code-examples/components/input-suggestion/input-suggestion-advanced.html
rename to src/html/includes/code-examples/input-controls/input-suggestion/input-suggestion-advanced.html
diff --git a/src/html/includes/code-examples/components/input-suggestion/input-suggestion-async.html b/src/html/includes/code-examples/input-controls/input-suggestion/input-suggestion-async.html
similarity index 100%
rename from src/html/includes/code-examples/components/input-suggestion/input-suggestion-async.html
rename to src/html/includes/code-examples/input-controls/input-suggestion/input-suggestion-async.html
diff --git a/src/html/includes/code-examples/components/input-suggestion/input-suggestion-async.js b/src/html/includes/code-examples/input-controls/input-suggestion/input-suggestion-async.js
similarity index 100%
rename from src/html/includes/code-examples/components/input-suggestion/input-suggestion-async.js
rename to src/html/includes/code-examples/input-controls/input-suggestion/input-suggestion-async.js
diff --git a/src/html/includes/code-examples/components/input-suggestion/input-suggestion-basic.html b/src/html/includes/code-examples/input-controls/input-suggestion/input-suggestion-basic.html
similarity index 100%
rename from src/html/includes/code-examples/components/input-suggestion/input-suggestion-basic.html
rename to src/html/includes/code-examples/input-controls/input-suggestion/input-suggestion-basic.html
diff --git a/src/html/includes/code-examples/components/label/label.html b/src/html/includes/code-examples/input-controls/label/label.html
similarity index 100%
rename from src/html/includes/code-examples/components/label/label.html
rename to src/html/includes/code-examples/input-controls/label/label.html
diff --git a/src/html/includes/code-examples/components/radio-button/radio-button-basic.html b/src/html/includes/code-examples/input-controls/radio-button/radio-button-basic.html
similarity index 100%
rename from src/html/includes/code-examples/components/radio-button/radio-button-basic.html
rename to src/html/includes/code-examples/input-controls/radio-button/radio-button-basic.html
diff --git a/src/html/includes/code-examples/components/radio-button/radio-button-colors.html b/src/html/includes/code-examples/input-controls/radio-button/radio-button-colors.html
similarity index 100%
rename from src/html/includes/code-examples/components/radio-button/radio-button-colors.html
rename to src/html/includes/code-examples/input-controls/radio-button/radio-button-colors.html
diff --git a/src/html/includes/code-examples/components/radio-button/radio-button-disabled.html b/src/html/includes/code-examples/input-controls/radio-button/radio-button-disabled.html
similarity index 100%
rename from src/html/includes/code-examples/components/radio-button/radio-button-disabled.html
rename to src/html/includes/code-examples/input-controls/radio-button/radio-button-disabled.html
diff --git a/src/html/includes/code-examples/components/radio-button/radio-button-sizes.html b/src/html/includes/code-examples/input-controls/radio-button/radio-button-sizes.html
similarity index 100%
rename from src/html/includes/code-examples/components/radio-button/radio-button-sizes.html
rename to src/html/includes/code-examples/input-controls/radio-button/radio-button-sizes.html
diff --git a/src/html/includes/code-examples/components/toggle-switch/toggle-switch-basic.html b/src/html/includes/code-examples/input-controls/toggle-switch/toggle-switch-basic.html
similarity index 100%
rename from src/html/includes/code-examples/components/toggle-switch/toggle-switch-basic.html
rename to src/html/includes/code-examples/input-controls/toggle-switch/toggle-switch-basic.html
diff --git a/src/html/includes/code-examples/components/toggle-switch/toggle-switch-colors.html b/src/html/includes/code-examples/input-controls/toggle-switch/toggle-switch-colors.html
similarity index 100%
rename from src/html/includes/code-examples/components/toggle-switch/toggle-switch-colors.html
rename to src/html/includes/code-examples/input-controls/toggle-switch/toggle-switch-colors.html
diff --git a/src/html/includes/code-examples/components/toggle-switch/toggle-switch-disabled.html b/src/html/includes/code-examples/input-controls/toggle-switch/toggle-switch-disabled.html
similarity index 100%
rename from src/html/includes/code-examples/components/toggle-switch/toggle-switch-disabled.html
rename to src/html/includes/code-examples/input-controls/toggle-switch/toggle-switch-disabled.html
diff --git a/src/html/includes/code-examples/components/toggle-switch/toggle-switch-sizes.html b/src/html/includes/code-examples/input-controls/toggle-switch/toggle-switch-sizes.html
similarity index 100%
rename from src/html/includes/code-examples/components/toggle-switch/toggle-switch-sizes.html
rename to src/html/includes/code-examples/input-controls/toggle-switch/toggle-switch-sizes.html
diff --git a/src/html/includes/code-examples/components/toggle-switch/toggle-switch-text.html b/src/html/includes/code-examples/input-controls/toggle-switch/toggle-switch-text.html
similarity index 100%
rename from src/html/includes/code-examples/components/toggle-switch/toggle-switch-text.html
rename to src/html/includes/code-examples/input-controls/toggle-switch/toggle-switch-text.html
diff --git a/src/html/includes/code-examples/components/toggle-switch/toggle-switch-transition.html b/src/html/includes/code-examples/input-controls/toggle-switch/toggle-switch-transition.html
similarity index 100%
rename from src/html/includes/code-examples/components/toggle-switch/toggle-switch-transition.html
rename to src/html/includes/code-examples/input-controls/toggle-switch/toggle-switch-transition.html
diff --git a/src/html/includes/code-examples/components/spinner/spinner-basic.html b/src/html/includes/code-examples/layout/spinner/spinner-basic.html
similarity index 100%
rename from src/html/includes/code-examples/components/spinner/spinner-basic.html
rename to src/html/includes/code-examples/layout/spinner/spinner-basic.html
diff --git a/src/html/includes/code-examples/components/spinner/spinner-block.html b/src/html/includes/code-examples/layout/spinner/spinner-block.html
similarity index 100%
rename from src/html/includes/code-examples/components/spinner/spinner-block.html
rename to src/html/includes/code-examples/layout/spinner/spinner-block.html
diff --git a/src/html/includes/code-examples/components/spinner/spinner-block.js b/src/html/includes/code-examples/layout/spinner/spinner-block.js
similarity index 100%
rename from src/html/includes/code-examples/components/spinner/spinner-block.js
rename to src/html/includes/code-examples/layout/spinner/spinner-block.js
diff --git a/src/html/includes/code-examples/components/spinner/spinner-sizes.html b/src/html/includes/code-examples/layout/spinner/spinner-sizes.html
similarity index 100%
rename from src/html/includes/code-examples/components/spinner/spinner-sizes.html
rename to src/html/includes/code-examples/layout/spinner/spinner-sizes.html
diff --git a/src/html/includes/code-examples/components/callout/callout-colors.html b/src/html/includes/code-examples/reference/callout/callout-colors.html
similarity index 100%
rename from src/html/includes/code-examples/components/callout/callout-colors.html
rename to src/html/includes/code-examples/reference/callout/callout-colors.html
diff --git a/src/html/includes/code-examples/reference/code-highlight/code-highlight.css b/src/html/includes/code-examples/reference/code-highlight/code-highlight.css
new file mode 100644
index 00000000..b29402ac
--- /dev/null
+++ b/src/html/includes/code-examples/reference/code-highlight/code-highlight.css
@@ -0,0 +1,9 @@
+@media (min-width: 768px)
+{
+ /* Comment */
+ .example
+ {
+ background: #efefef;
+ width: 100%;
+ }
+}
diff --git a/src/html/includes/code-examples/reference/code-highlight/code-highlight.html b/src/html/includes/code-examples/reference/code-highlight/code-highlight.html
new file mode 100644
index 00000000..826ad683
--- /dev/null
+++ b/src/html/includes/code-examples/reference/code-highlight/code-highlight.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <title>Admin 4B</title>
+ </head>
+ <body>
+ <!-- Comment -->
+ <h1 class="display-5">HTML example</h1>
+ </body>
+</html>
diff --git a/src/html/includes/code-examples/reference/code-highlight/code-highlight.js b/src/html/includes/code-examples/reference/code-highlight/code-highlight.js
new file mode 100644
index 00000000..54ef2459
--- /dev/null
+++ b/src/html/includes/code-examples/reference/code-highlight/code-highlight.js
@@ -0,0 +1,6 @@
+function hello() {
+ var name = 'Admin 4B'; // Comment
+ var vesions = 8;
+
+ return name + ': ' + versions;
+}
diff --git a/src/html/includes/code-examples/reference/code-highlight/code-highlight.json b/src/html/includes/code-examples/reference/code-highlight/code-highlight.json
new file mode 100644
index 00000000..97ee18f9
--- /dev/null
+++ b/src/html/includes/code-examples/reference/code-highlight/code-highlight.json
@@ -0,0 +1,5 @@
+{
+ "name": "Admin 4B",
+ "active": true,
+ "versions": 8
+}
diff --git a/src/html/includes/code-examples/components/code-highlight/how-to-use.html b/src/html/includes/code-examples/reference/code-highlight/how-to-use.html
similarity index 100%
rename from src/html/includes/code-examples/components/code-highlight/how-to-use.html
rename to src/html/includes/code-examples/reference/code-highlight/how-to-use.html
diff --git a/src/html/includes/code-examples/reference/code-highlight/theme-dark.html b/src/html/includes/code-examples/reference/code-highlight/theme-dark.html
new file mode 100644
index 00000000..5ab91b56
--- /dev/null
+++ b/src/html/includes/code-examples/reference/code-highlight/theme-dark.html
@@ -0,0 +1,22 @@
+<div class="source-code dark">
+ <div class="nav nav-tabs">
+ <a href="#html" class="active" data-toggle="tab">HTML</a>
+ <a href="#css" data-toggle="tab">CSS</a>
+ <a href="#js" data-toggle="tab">JavaScript</a>
+ <a href="#json" data-toggle="tab">JSON</a>
+ </div>
+ <div class="tab-content">
+ <div id="html" class="tab-pane active">
+ <pre><code class="html">...</code></pre>
+ </div>
+ <div id="css" class="tab-pane">
+ <pre><code class="css">...</code></pre>
+ </div>
+ <div id="js" class="tab-pane">
+ <pre><code class="js">...</code></pre>
+ </div>
+ <div id="json" class="tab-pane">
+ <pre><code class="json">...</code></pre>
+ </div>
+ </div>
+</div>
diff --git a/src/html/includes/code-examples/reference/code-highlight/theme-light.html b/src/html/includes/code-examples/reference/code-highlight/theme-light.html
new file mode 100644
index 00000000..4fbd30ce
--- /dev/null
+++ b/src/html/includes/code-examples/reference/code-highlight/theme-light.html
@@ -0,0 +1,22 @@
+<div class="source-code">
+ <div class="nav nav-tabs">
+ <a href="#html" class="active" data-toggle="tab">HTML</a>
+ <a href="#css" data-toggle="tab">CSS</a>
+ <a href="#js" data-toggle="tab">JavaScript</a>
+ <a href="#json" data-toggle="tab">JSON</a>
+ </div>
+ <div class="tab-content">
+ <div id="html" class="tab-pane active">
+ <pre><code class="html">...</code></pre>
+ </div>
+ <div id="css" class="tab-pane">
+ <pre><code class="css">...</code></pre>
+ </div>
+ <div id="js" class="tab-pane">
+ <pre><code class="js">...</code></pre>
+ </div>
+ <div id="json" class="tab-pane">
+ <pre><code class="json">...</code></pre>
+ </div>
+ </div>
+</div>
diff --git a/src/html/includes/imports.html b/src/html/includes/imports.html
index a57bb228..d8f99998 100644
--- a/src/html/includes/imports.html
+++ b/src/html/includes/imports.html
@@ -13,6 +13,7 @@
+
diff --git a/src/html/includes/navbar.html b/src/html/includes/navbar.html
index 9e37c966..6788408a 100644
--- a/src/html/includes/navbar.html
+++ b/src/html/includes/navbar.html
@@ -3,7 +3,10 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + John Doe + Administrator +
+
+
+
+
+
+
+
+
+
+ + Code highlight +
++ Code highlight is a feature with predefined styles for HTML, CSS, JavaScript and JSON. + These styles are a customization for the languages supported by the library + highlight.js. +
+
+ You do not need the entire template to work with code highlight.
+ You only need the highlight.js library and
+ the
+ See the basic example:
+ admin4b-highlight.min.css file present in the NPM package.
+
+
+ Source code
+
+
+
+
+ <div class="source-code">
+ <pre><code class="html"></code></pre>
+ <pre><code class="css"></code></pre>
+ <pre><code class="js"></code></pre>
+ <pre><code class="json"></code></pre>
+</div>
++ Themes +
++ Light theme (default): +
+
+
+
+
+
+
+
+ <!doctype html>
+<html lang="en">
+ <head>
+ <title>Admin 4B</title>
+ </head>
+ <body>
+ <!-- Comment -->
+ <h1 class="display-5">HTML example</h1>
+ </body>
+</html>
+
+
+ @media (min-width: 768px)
+{
+ /* Comment */
+ .example
+ {
+ background: #efefef;
+ width: 100%;
+ }
+}
+
+
+ function hello() {
+ var name = 'Admin 4B'; // Comment
+ var vesions = 8;
+
+ return name + ': ' + versions;
+}
+
+
+ {
+ "name": "Admin 4B",
+ "active": true,
+ "versions": 8
+}
+
+
+ Source code
+
+
+
+
+ <div class="source-code">
+ <div class="nav nav-tabs">
+ <a href="#html" class="active" data-toggle="tab">HTML</a>
+ <a href="#css" data-toggle="tab">CSS</a>
+ <a href="#js" data-toggle="tab">JavaScript</a>
+ <a href="#json" data-toggle="tab">JSON</a>
+ </div>
+ <div class="tab-content">
+ <div id="html" class="tab-pane active">
+ <pre><code class="html">...</code></pre>
+ </div>
+ <div id="css" class="tab-pane">
+ <pre><code class="css">...</code></pre>
+ </div>
+ <div id="js" class="tab-pane">
+ <pre><code class="js">...</code></pre>
+ </div>
+ <div id="json" class="tab-pane">
+ <pre><code class="json">...</code></pre>
+ </div>
+ </div>
+</div>
++ Dark theme: +
+
+
+
+
+
+
+
+ <!doctype html>
+<html lang="en">
+ <head>
+ <title>Admin 4B</title>
+ </head>
+ <body>
+ <!-- Comment -->
+ <h1 class="display-5">HTML example</h1>
+ </body>
+</html>
+
+
+ @media (min-width: 768px)
+{
+ /* Comment */
+ .example
+ {
+ background: #efefef;
+ width: 100%;
+ }
+}
+
+
+ function hello() {
+ var name = 'Admin 4B'; // Comment
+ var vesions = 8;
+
+ return name + ': ' + versions;
+}
+
+
+ {
+ "name": "Admin 4B",
+ "active": true,
+ "versions": 8
+}
+
+
+ Source code
+
+
+
+
+ <div class="source-code dark">
+ <div class="nav nav-tabs">
+ <a href="#html" class="active" data-toggle="tab">HTML</a>
+ <a href="#css" data-toggle="tab">CSS</a>
+ <a href="#js" data-toggle="tab">JavaScript</a>
+ <a href="#json" data-toggle="tab">JSON</a>
+ </div>
+ <div class="tab-content">
+ <div id="html" class="tab-pane active">
+ <pre><code class="html">...</code></pre>
+ </div>
+ <div id="css" class="tab-pane">
+ <pre><code class="css">...</code></pre>
+ </div>
+ <div id="js" class="tab-pane">
+ <pre><code class="js">...</code></pre>
+ </div>
+ <div id="json" class="tab-pane">
+ <pre><code class="json">...</code></pre>
+ </div>
+ </div>
+</div>
+
- 
+ 
Also, the template includes the validation class
+
John Doe Administrator @@ -16,33 +16,42 @@ Get started
-
- Components
+
+ Input controls
-
+
diff --git a/src/html/pages/device-controls/camera.html b/src/html/pages/device-controls/camera.html
new file mode 100644
index 00000000..8c01107d
--- /dev/null
+++ b/src/html/pages/device-controls/camera.html
@@ -0,0 +1,185 @@
+
+
+
+
-
+
Layout
-
diff --git a/src/html/pages/components/code-highlight.html b/src/html/pages/components/code-highlight.html
deleted file mode 100644
index ff0b1200..00000000
--- a/src/html/pages/components/code-highlight.html
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
-
diff --git a/src/html/pages/sample-pages/signup.html b/src/html/pages/content/signup.html
similarity index 93%
rename from src/html/pages/sample-pages/signup.html
rename to src/html/pages/content/signup.html
index 5cb10997..1e75b829 100644
--- a/src/html/pages/sample-pages/signup.html
+++ b/src/html/pages/content/signup.html
@@ -6,7 +6,7 @@
Source code
-
-
diff --git a/src/html/pages/sample-pages/blank-page.html b/src/html/pages/content/blank-page.html
similarity index 72%
rename from src/html/pages/sample-pages/blank-page.html
rename to src/html/pages/content/blank-page.html
index 1f9c1d9b..93767777 100644
--- a/src/html/pages/sample-pages/blank-page.html
+++ b/src/html/pages/content/blank-page.html
@@ -2,13 +2,11 @@
- Code highlight -
-- Code highlight is a feature with predefined styles for HTML, CSS, JavaScript and JSON. - These styles are a customization for the languages supported by the library - highlight.js. -
-
- You do not need the entire template to work with code highlight.
- You only need the highlight.js library and
- the
- admin4b-highlight.min.css file present in the NPM package.
-
-
- Source code
-
-
-
-
- @@include('includes/code-examples/components/code-highlight/how-to-use.html')
-
- Blank page
-
+ Content goes here...
diff --git a/src/html/pages/content/chat.html b/src/html/pages/content/chat.html
new file mode 100644
index 00000000..fcc264a0
--- /dev/null
+++ b/src/html/pages/content/chat.html
@@ -0,0 +1,101 @@
+
+
+
+
+
+
diff --git a/src/html/pages/sample-pages/error-page.html b/src/html/pages/content/error-page.html
similarity index 86%
rename from src/html/pages/sample-pages/error-page.html
rename to src/html/pages/content/error-page.html
index a4052415..250c9a80 100644
--- a/src/html/pages/sample-pages/error-page.html
+++ b/src/html/pages/content/error-page.html
@@ -2,7 +2,7 @@
diff --git a/src/html/pages/content/notification.html b/src/html/pages/content/notification.html
new file mode 100644
index 00000000..d2e4b49b
--- /dev/null
+++ b/src/html/pages/content/notification.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ + March 23, 2018 +
+
+
+
+
+
+ Hello, there... I need some help!
+
8:52 AM
+
+ Jane Doe joined the chat +
+
+ 
+
+
+
+ Hi, John. I'm happy to help. What can I do for you today?
+
8:54 AM
+
+
+
+
+
+ I can't seem to pull up my order. Can you help me?
+
9:02 AM
+
+
+
+
+
+ Absolutely. You can find the status of, and trak, your order here: www.app.com/orders
+
9:03 AM
+
+
+
+
+
+ Works great! Thank you!
+
9:07 AM
+
+
+
+
+
+ I'm glad you made it! :)
+
9:08 AM
+
+
+
+
+
+ Please let me know if you have any more questions.
+
9:08 AM
+
+
+
+
+
+ One more thing. Do you want to see the source code?
+
+ Click here and take a look.
+
+
9:10 AM
+
+
+
+ + Ending conversation since you've been inactive too long. +
+
+
+
diff --git a/src/html/pages/content/notifications.html b/src/html/pages/content/notifications.html
new file mode 100644
index 00000000..7e223a30
--- /dev/null
+++ b/src/html/pages/content/notifications.html
@@ -0,0 +1,92 @@
+
+
+
+
+
+ + Lorem ipsum dolor sit amet +
+ + Inbox + +
+
+ 18 April, 2018
+
+
+ + Hello Lorem, +
++ Lorem ipsum dolor sit amet, blandit scelerisque sem, elit est fusce metus pretium cursus vel, volutpat justo sapien ac, ornare + in lacinia leo ornare pede in, tempor quis mattis molestie a massa. Natoque quam nullam. Penatibus vestibulum aenean + sodales eleifend, sed arcu in risus urna et nec. Velit porttitor et, lacus non amet, donec est luctus nisl dis suscipit, + nulla mi dolor, urna suspendisse dolor amet cras. Etiam in sed donec tellus lobortis at, nonummy tellus amet sit vel + mauris, augue nec praesent porta, nullam tortor diam lorem. Tortor in sed donec erat. Enim neque eu ut amet, et pellentesque + tortor dapibus eros ac. Sed dapibus, pulvinar ut, non sed dui nibh. Leo fermentum, integer tortor pede laoreet. +
++ Wisi sed nibh et ac, eget dui odio sem nibh urna ullamcorper, nisl egestas pellentesque metus curabitur in, scelerisque quisque + nullam. Porta ante rhoncus harum proin diam aliquam, felis sem iaculis arcu nunc, nulla mi dignissim vestibulum. Ante + et, pede diam mi. Ullamcorper amet lobortis donec a vel, sit scelerisque nulla, vestibulum est pellentesque ultrices + egestas id. Sapien vitae ultricies tristique quae tristique neque, diam scelerisque, vestibulum pede nulla auctor. Mauris + iaculis turpis eleifend vitae sed facilisis. Interdum orci ut nunc dui, praesent vestibulum elit commodo quisque, sit + feugiat ut donec eu accumsan lacinia, sed justo id libero et dolor, condimentum condimentum quisque vestibulum arcu sem. +
+
+ Regards,
+ Lorem ipsum
+
+
+ Source code
+
+
+
+
+ @@include('includes/code-examples/content/notification.html')
+
+
diff --git a/src/html/pages/sample-pages/settings.html b/src/html/pages/content/settings.html
similarity index 86%
rename from src/html/pages/sample-pages/settings.html
rename to src/html/pages/content/settings.html
index f3656a4c..49fed9a0 100644
--- a/src/html/pages/sample-pages/settings.html
+++ b/src/html/pages/content/settings.html
@@ -2,7 +2,6 @@
diff --git a/src/html/pages/sample-pages/signin.html b/src/html/pages/content/signin.html
similarity index 92%
rename from src/html/pages/sample-pages/signin.html
rename to src/html/pages/content/signin.html
index b06407b3..b21e42d9 100644
--- a/src/html/pages/sample-pages/signin.html
+++ b/src/html/pages/content/signin.html
@@ -6,7 +6,7 @@
Source code
+ 18 April, 2018 +
+
+
+
+
+
+ Lorem ipsum dolor sit amet
+ now ++ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis + nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis... +
+ Unreaded + + +
+
+ Lorem ipsum dolor sit amet
+ 3:30 PM ++ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis + nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis... +
+ + +
+
+ Lorem ipsum dolor sit amet
+ 7:15 AM ++ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis + nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis... +
+ ++ 17 April, 2018 +
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet
+ 4:50 PM ++ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis + nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis... +
+ + +
+
+ Lorem ipsum dolor sit amet
+ 3:30 PM ++ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis + nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis... +
+ + +
+
+ Lorem ipsum dolor sit amet
+ 7:15 AM ++ Lorem ipsum dolor sit amet, habitasse erat arcu auctor orci eleifend. Suspendisse enim, malesuada eu placerat aenean, duis + nulla, suspendisse suscipit fringilla nec feugiat tortor. Ante euismod, mattis... +
+ +
+
+ Source code
+
+
+
+
+ @@include('includes/code-examples/content/notifications.html')
-
@@include('includes/code-examples/sample-pages/signin.html')@@include('includes/code-examples/content/signin.html')
-
@@include('includes/code-examples/sample-pages/signup.html')@@include('includes/code-examples/content/signup.html')
+
+Camera
++ This session introduces methods and events to control and interact with the camera of the device enabling users to take pictures. + See the example below: +
+
+
+
+
+ 
+
+
+ + In this example, the camera is turned on and off according to the events show and hide of the modal. Refer to + bootstrap documentation for more details about the modal plugin. +
+
+
+ Source code
+
+
+
+
+
+
+
+
+
+ @@include('includes/code-examples/device-controls/camera/camera.html')
+
+ @@include('includes/code-examples/device-controls/camera/camera.js')
+
+ Browser compatibility
+
+ IE 11 and below currently does not support getUserMedia.
+ However, there is some polyfills available that you can explore.
+
Options
++ Options can be passed via data attributes: +
+
+
+
+
+
+ | Option | +Type | +Default | +Description | +
|---|---|---|---|
data-size |
+ string | +320x240 | +The size of the picture. Invalid size will be converted to default size. | +
+
+ Source code
+
+
+
+ Methods
++ A few methods are available to control the camera: +
+
+
+
+
+
+ | Method | +Description | +
|---|---|
camera('play') |
+ Starts the camera. Triggers the event camera:play or camera:error. |
+
camera('stop') |
+ Stop the camera. Triggers the event camera:stop. |
+
camera('snapshot') |
+ Take a picture from the camera. Triggers the event camera:snapshot. |
+
+
+ Source code
+
+
+
+ Events
++ Events triggered from the camera can be listened to write custom logic: +
+
+
+
+
+
+ | Event | +Description | +
|---|---|
camera:play |
+ Triggered after the camera starts to play. | +
camera:error |
+ Triggered if any error occur during the start of the camera. | +
camera:notSupported |
+ Triggered if the browser does not support camera. | +
camera:stop |
+ Triggered after the camera stop. | +
camera:snapshot |
+ Triggered after a picture is taken. Blob and data URL are ready. | +
+
+ Source code
+
+
+
+
+
+
diff --git a/src/html/pages/device-controls/file-manager.html b/src/html/pages/device-controls/file-manager.html
new file mode 100644
index 00000000..c2092972
--- /dev/null
+++ b/src/html/pages/device-controls/file-manager.html
@@ -0,0 +1,161 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/html/pages/forms/basic-form.html b/src/html/pages/forms/basic-form.html
index 8852ef53..0879558c 100644
--- a/src/html/pages/forms/basic-form.html
+++ b/src/html/pages/forms/basic-form.html
@@ -16,7 +16,7 @@ File manager
++ The file manager is a component that conect to the device's storage and allow users to select files to submit. + See the example below: +
+
+
+ Only .jpeg and .png and maximum 1MB.
+
+
+
+
+
+ | Filename | +Size | +
|---|---|
|
+ |
+ + + | +
| + No file selected. + | +|
+
+ Source code
+
+
+
+
+
+
+
+
+
+ @@include('includes/code-examples/device-controls/file-manager/file-manager.html')
+
+ @@include('includes/code-examples/device-controls/file-manager/file-manager.js')File validation
++ The file manager has an built-in validation configured by attribute options: +
+
+
+
+
+
+ | Validation | +Description | +
|---|---|
+ data-maxsize
+ |
+ + Validates the size of the file. You can also define the size unit e.g., 1024B, 100KB, 2.4MB, 5GB. + | +
+ data-type
+ |
+
+ Validates the type of the file. You need to use MIME types for validation e.g.,
+ image/png, application/pdf. Use comma for separate multiple MIME types.
+ |
+
+
+ Warranties
+Wrong values for data-maxsize or data-type will result in invalid file after validation.
Events
++ Events can be used by developer to interact with the component and write custom logic. +
+
+
+
+
+
+ | Event | +Who fires | +Description | +
|---|---|---|
file:change |
+ Component | +Triggered when the user selects a file. | +
+ After the file selection a few properties are added to the file by the component: +
+
+
+
+
+
+ | Property | +Description | +
|---|---|
dataURL |
+ Base64 data URL. | +
errors |
+
+ File errors after validation:
+
|
+
+
+ Source code
+
+
+
+
Also, the template includes the validation class .has-error.
- .has-error class is applicable only for .form-group.
+ By design .has-error class is applicable only for .form-group.
Example
diff --git a/src/html/pages/components/checkbox.html b/src/html/pages/input-controls/checkbox.html
similarity index 92%
rename from src/html/pages/components/checkbox.html
rename to src/html/pages/input-controls/checkbox.html
index 7a65f9bb..bac5bb8c 100644
--- a/src/html/pages/components/checkbox.html
+++ b/src/html/pages/input-controls/checkbox.html
@@ -2,7 +2,7 @@
@@ -22,7 +22,7 @@ Checkbox
Source code
- @@include('includes/code-examples/components/checkbox/checkbox-basic.html')
+ @@include('includes/code-examples/input-controls/checkbox/checkbox-basic.html')
.has-error class is applicable only for .form-group.
By design .has-error class is applicable only for .form-group.
Checkbox
Source code
-
@@include('includes/code-examples/components/checkbox/checkbox-basic.html')@@include('includes/code-examples/input-controls/checkbox/checkbox-basic.html')Colors
@@ -64,7 +64,7 @@Colors
Source code
-
@@include('includes/code-examples/components/checkbox/checkbox-colors.html')@@include('includes/code-examples/input-controls/checkbox/checkbox-colors.html')Sizes
@@ -94,7 +94,7 @@Sizes
Source code
-
@@include('includes/code-examples/components/checkbox/checkbox-sizes.html')@@include('includes/code-examples/input-controls/checkbox/checkbox-sizes.html')Disabled state
@@ -112,7 +112,7 @@Disabled state
Source code
-
diff --git a/src/html/pages/input-controls/input-date.html b/src/html/pages/input-controls/input-date.html
new file mode 100644
index 00000000..2252722b
--- /dev/null
+++ b/src/html/pages/input-controls/input-date.html
@@ -0,0 +1,312 @@
+
+
+
+@@include('includes/code-examples/components/checkbox/checkbox-disabled.html')@@include('includes/code-examples/input-controls/checkbox/checkbox-disabled.html')
+
+
diff --git a/src/html/pages/components/input-group.html b/src/html/pages/input-controls/input-group.html
similarity index 96%
rename from src/html/pages/components/input-group.html
rename to src/html/pages/input-controls/input-group.html
index b634c292..70369759 100644
--- a/src/html/pages/components/input-group.html
+++ b/src/html/pages/input-controls/input-group.html
@@ -2,7 +2,7 @@
@@ -61,7 +61,7 @@ Input date
++ Input date is a set of bootstrap components (mainly input-group + and modal) to build a control that allows users to navigate in the + calendar and select a date. See the example below: +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source code
+
+
+
+
+
+
+
+
+
+ @@include('includes/code-examples/input-controls/input-date/input-date.html')
+
+ @@include('includes/code-examples/input-controls/input-date/input-date.js')
+
+ It is possible have only one calendar for the entire application if you want to.
+Calendar
+
+ The calendar is displayed in a bootstrap modal
+ and defined by the class .modal-calendar.
+
+ The navigation of the calendar is placed in the modal header. The modal body contains the current page (.table-calendar)
+ and the calendar links (today and selected date). The buttons for confirm and cancel are placed in the modal footer.
+ See the basic structure below:
+
+
+ Source code
+
+
+
+
+ @@include('includes/code-examples/input-controls/input-date/calendar-modal-empty.html')Calendar header
++ The calendar header contains the navigation that allows the user to go to the next pages or to the previous pages of the calendar. + Also, the user can select a month in the dropdown or type the desired year. See the example below: +
+
+
+ Source code
+
+
+
+
+ @@include('includes/code-examples/input-controls/input-date/calendar-modal-header.html')Calendar body
++ The calendar body contains the current page and allows the user to select the desired date. + In addition, the body contains the links to today's date and to the selected date. +
+
+
+ Source code
+
+
+
+
+ @@include('includes/code-examples/input-controls/input-date/calendar-modal-body.html')Calendar footer
++ The calendar footer contains the buttons to confirm or cancel the selected date. See the example below: +
+
+
+ Source code
+
+
+
+ Options
++ Options can be passed via data attributes: +
+
+
+
+
+
+ | Option | +Type | +Description | +
|---|---|---|
data-calendar-link |
+ string | +Navigates directly to the calendar page: today or selected (selected date). |
+
data-calendar-month |
+ string|number | +The month for which it will be navigated: 0..11 (January to December), previous or next. |
+
+
+ By design these attribute options only work for children of a .modal-calendar.
Methods
++ A few methods are available to control the calendar: +
+
+
+
+
+
+ | Method | +Description | +
|---|---|
calendar('date') |
+ Gets the selected date. | +
calendar('date', myDate) |
+
+ Sets the selected date (automatically queries the selected date).
+ Triggers the events calendar:change and calendar:query.
+ |
+
calendar('query:date') |
+ Gets the queried date (does not reflect the selected date). | +
calendar('query:date', myDate) |
+
+ Sets the queried date (recalculates the calendar page).
+ Triggers the event calendar:query.
+ |
+
calendar('query:nextMonth') |
+ Go to next month. Triggers the event calendar:query. |
+
calendar('query:nextYear') |
+ Go to next year. Triggers the event calendar:query. |
+
calendar('query:previousMonth') |
+ Go to previous month. Triggers the event calendar:query. |
+
calendar('query:previousYear') |
+ Go to previous year. Triggers the event calendar:query. |
+
Events
++ Events triggered from the calendar can be listened to write custom logic: +
+
+
+
+
+
+ | Event | +Description | +
|---|---|
calendar:change |
+ Triggered after select a date. | +
calendar:each |
+ Triggered for each date while loading the calendar page. | +
calendar:query |
+ Triggered after querying the date. | +
+
+ Source code
+
+
+
+
+ @@include('includes/code-examples/input-controls/input-date/calendar-events.js')Component limitations
Source code
-
@@include('includes/code-examples/components/input-group/input-group-basic.html')@@include('includes/code-examples/input-controls/input-group/input-group-basic.html')
@@ -134,7 +134,7 @@
Source code
- @@include('includes/code-examples/components/input-group/input-group-states.html')
+ @@include('includes/code-examples/input-controls/input-group/input-group-states.html')
diff --git a/src/html/pages/components/input-suggestion.html b/src/html/pages/input-controls/input-suggestion.html
similarity index 97%
rename from src/html/pages/components/input-suggestion.html
rename to src/html/pages/input-controls/input-suggestion.html
index 6767d9dd..781ac74d 100644
--- a/src/html/pages/components/input-suggestion.html
+++ b/src/html/pages/input-controls/input-suggestion.html
@@ -2,7 +2,7 @@
@@ -159,7 +159,7 @@ Simple text
Source code
- @@include('includes/code-examples/components/input-suggestion/input-suggestion-basic.html')
+ @@include('includes/code-examples/input-controls/input-suggestion/input-suggestion-basic.html')
Custom template
@@ -246,7 +246,7 @@ Strawberry-kiwi mint
Source code
- @@include('includes/code-examples/components/input-suggestion/input-suggestion-advanced.html')
+ @@include('includes/code-examples/input-controls/input-suggestion/input-suggestion-advanced.html')
Asynchronous
@@ -291,10 +291,10 @@ Asynchronous
- @@include('includes/code-examples/components/input-suggestion/input-suggestion-async.html')
+ @@include('includes/code-examples/input-controls/input-suggestion/input-suggestion-async.html')
- @@include('includes/code-examples/components/input-suggestion/input-suggestion-async.js')
+ @@include('includes/code-examples/input-controls/input-suggestion/input-suggestion-async.js')
diff --git a/src/html/pages/components/label.html b/src/html/pages/input-controls/label.html
similarity index 88%
rename from src/html/pages/components/label.html
rename to src/html/pages/input-controls/label.html
index 5f8afd00..5d2a831f 100644
--- a/src/html/pages/components/label.html
+++ b/src/html/pages/input-controls/label.html
@@ -2,7 +2,7 @@
@@ -27,6 +27,14 @@ Label
+
+
+ Source code
+
+
+ @@include('includes/code-examples/input-controls/label/label.html')
+
+
Warranties
@@ -46,13 +54,9 @@ Warranties
-
-
- Source code
-
-
- @@include('includes/code-examples/components/label/label.html')
+
+ Browser compatibility
+ Floating labels will not work properly on IE11 and older versions.
-
diff --git a/src/html/pages/components/radio-button.html b/src/html/pages/input-controls/radio-button.html
similarity index 92%
rename from src/html/pages/components/radio-button.html
rename to src/html/pages/input-controls/radio-button.html
index 15339386..2d51342e 100644
--- a/src/html/pages/components/radio-button.html
+++ b/src/html/pages/input-controls/radio-button.html
@@ -2,7 +2,7 @@
@@ -34,7 +34,7 @@ Radio button
Source code
@@ -79,7 +79,7 @@ Colors
Source code
Sizes
@@ -109,7 +109,7 @@ Sizes
Source code
Disabled state
@@ -127,7 +127,7 @@ Disabled state
Source code
diff --git a/src/html/pages/components/toggle-switch.html b/src/html/pages/input-controls/toggle-switch.html
similarity index 90%
rename from src/html/pages/components/toggle-switch.html
rename to src/html/pages/input-controls/toggle-switch.html
index fb037122..85a283fe 100644
--- a/src/html/pages/components/toggle-switch.html
+++ b/src/html/pages/input-controls/toggle-switch.html
@@ -2,7 +2,7 @@
@@ -22,7 +22,7 @@ Toggle switch
Source code
- @@include('includes/code-examples/components/toggle-switch/toggle-switch-basic.html')
+ @@include('includes/code-examples/input-controls/toggle-switch/toggle-switch-basic.html')
-
diff --git a/src/html/pages/components/input-suggestion.html b/src/html/pages/input-controls/input-suggestion.html
similarity index 97%
rename from src/html/pages/components/input-suggestion.html
rename to src/html/pages/input-controls/input-suggestion.html
index 6767d9dd..781ac74d 100644
--- a/src/html/pages/components/input-suggestion.html
+++ b/src/html/pages/input-controls/input-suggestion.html
@@ -2,7 +2,7 @@
@@ -159,7 +159,7 @@ @@include('includes/code-examples/components/input-group/input-group-states.html')@@include('includes/code-examples/input-controls/input-group/input-group-states.html')Simple text
Source code
-
@@include('includes/code-examples/components/input-suggestion/input-suggestion-basic.html')@@include('includes/code-examples/input-controls/input-suggestion/input-suggestion-basic.html')Custom template
@@ -246,7 +246,7 @@Strawberry-kiwi mint
Source code
-
@@include('includes/code-examples/components/input-suggestion/input-suggestion-advanced.html')@@include('includes/code-examples/input-controls/input-suggestion/input-suggestion-advanced.html')Asynchronous
@@ -291,10 +291,10 @@Asynchronous
-
@@include('includes/code-examples/components/input-suggestion/input-suggestion-async.html')@@include('includes/code-examples/input-controls/input-suggestion/input-suggestion-async.html')
-
@@include('includes/code-examples/components/input-suggestion/input-suggestion-async.js')@@include('includes/code-examples/input-controls/input-suggestion/input-suggestion-async.js')Label
+
+
+ Source code
+
+
+
+ @@include('includes/code-examples/input-controls/label/label.html')Warranties
-
@@ -46,13 +54,9 @@
Warranties
-
- Source code
-
-
diff --git a/src/html/pages/components/radio-button.html b/src/html/pages/input-controls/radio-button.html
similarity index 92%
rename from src/html/pages/components/radio-button.html
rename to src/html/pages/input-controls/radio-button.html
index 15339386..2d51342e 100644
--- a/src/html/pages/components/radio-button.html
+++ b/src/html/pages/input-controls/radio-button.html
@@ -2,7 +2,7 @@
@@ -34,7 +34,7 @@
-
@@include('includes/code-examples/components/label/label.html')
+
- Browser compatibility
+Floating labels will not work properly on IE11 and older versions.
Radio button
Source code
@@ -79,7 +79,7 @@
Colors
Source codeSizes
@@ -109,7 +109,7 @@Sizes
Source codeDisabled state
@@ -127,7 +127,7 @@Disabled state
Source code diff --git a/src/html/pages/components/toggle-switch.html b/src/html/pages/input-controls/toggle-switch.html similarity index 90% rename from src/html/pages/components/toggle-switch.html rename to src/html/pages/input-controls/toggle-switch.html index fb037122..85a283fe 100644 --- a/src/html/pages/components/toggle-switch.html +++ b/src/html/pages/input-controls/toggle-switch.html @@ -2,7 +2,7 @@ @@ -22,7 +22,7 @@Toggle switch
Source code
-
@@include('includes/code-examples/components/toggle-switch/toggle-switch-basic.html')@@include('includes/code-examples/input-controls/toggle-switch/toggle-switch-basic.html')@@ -41,7 +41,7 @@
Toggle switch
Source code
-
@@include('includes/code-examples/components/toggle-switch/toggle-switch-text.html')@@include('includes/code-examples/input-controls/toggle-switch/toggle-switch-text.html')Colors
@@ -75,7 +75,7 @@Colors
Source code
-
@@include('includes/code-examples/components/toggle-switch/toggle-switch-colors.html')@@include('includes/code-examples/input-controls/toggle-switch/toggle-switch-colors.html')@@ -92,7 +92,7 @@
Colors
Source code
-
@@include('includes/code-examples/components/toggle-switch/toggle-switch-transition.html')@@include('includes/code-examples/input-controls/toggle-switch/toggle-switch-transition.html')Sizes
@@ -118,7 +118,7 @@Sizes
Source code
-
@@include('includes/code-examples/components/toggle-switch/toggle-switch-sizes.html')@@include('includes/code-examples/input-controls/toggle-switch/toggle-switch-sizes.html')Disabled state
@@ -137,7 +137,7 @@Disabled state
Source code
-
diff --git a/src/html/pages/components/spinner.html b/src/html/pages/layout/spinner.html
similarity index 92%
rename from src/html/pages/components/spinner.html
rename to src/html/pages/layout/spinner.html
index 943df63a..bf16a321 100644
--- a/src/html/pages/components/spinner.html
+++ b/src/html/pages/layout/spinner.html
@@ -2,7 +2,7 @@
@@ -24,7 +24,7 @@ @@include('includes/code-examples/components/toggle-switch/toggle-switch-disabled.html')@@include('includes/code-examples/input-controls/toggle-switch/toggle-switch-disabled.html')
Source code
- @@include('includes/code-examples/components/spinner/spinner-basic.html')
+ @@include('includes/code-examples/layout/spinner/spinner-basic.html')
@@ -49,7 +49,7 @@
Source code
- @@include('includes/code-examples/components/spinner/spinner-sizes.html')
+ @@include('includes/code-examples/layout/spinner/spinner-sizes.html')
@@ -95,10 +95,10 @@
- @@include('includes/code-examples/components/spinner/spinner-block.html')
+ @@include('includes/code-examples/layout/spinner/spinner-block.html')
- @@include('includes/code-examples/components/spinner/spinner-block.js')
+ @@include('includes/code-examples/layout/spinner/spinner-block.js')
diff --git a/src/html/pages/components/callout.html b/src/html/pages/reference/callout.html
similarity index 92%
rename from src/html/pages/components/callout.html
rename to src/html/pages/reference/callout.html
index c104ec57..331b4704 100644
--- a/src/html/pages/components/callout.html
+++ b/src/html/pages/reference/callout.html
@@ -2,7 +2,7 @@
@@ -33,7 +33,7 @@ Critital
Source code
- @@include('includes/code-examples/components/callout/callout-colors.html')
+ @@include('includes/code-examples/reference/callout/callout-colors.html')
diff --git a/src/html/pages/reference/code-highlight.html b/src/html/pages/reference/code-highlight.html
new file mode 100644
index 00000000..71ce01df
--- /dev/null
+++ b/src/html/pages/reference/code-highlight.html
@@ -0,0 +1,102 @@
+
+
+
+
+
+ Code highlight
+
+
+ Code highlight is a feature with predefined styles for HTML, CSS, JavaScript and JSON.
+ These styles are a customization for the languages supported by the library
+ highlight.js.
+
+
+ You do not need the entire template to work with code highlight.
+ You only need the highlight.js library and
+ the admin4b-highlight.min.css file present in the NPM package.
+
+ See the basic example:
+
+
+ Source code
+
+
+ @@include('includes/code-examples/reference/code-highlight/how-to-use.html')
+
+
+
+ Themes
+
+
+ Light theme (default):
+
+
+
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.html')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.css')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.js')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.json')
+
+
+
+
+
+ Source code
+
+
+ @@include('includes/code-examples/reference/code-highlight/theme-light.html')
+
+
+
+ Dark theme:
+
+
+
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.html')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.css')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.js')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.json')
+
+
+
+
+
+ Source code
+
+
+ @@include('includes/code-examples/reference/code-highlight/theme-dark.html')
+
+
+
+
diff --git a/src/js/components/calendar.js b/src/js/components/calendar.js
new file mode 100644
index 00000000..b25d6051
--- /dev/null
+++ b/src/js/components/calendar.js
@@ -0,0 +1,30 @@
+(function ($) {
+
+ $.fn.calendar = function (event, date) {
+ var $modalCalendar = $(this);
+
+ if (event === 'date' && !date) {
+ return $modalCalendar.prop('date');
+ }
+
+ if (event === 'query:date' && !date) {
+ return $modalCalendar.prop('query');
+ }
+
+ return this.each(function () {
+ date = date instanceof Date ? date : $modalCalendar.prop('query') || new Date();
+ date.setHours(0, 0, 0, 0);
+
+ switch (event) {
+ case 'date': $.fn.calendar.change.apply(this, [date]); break;
+ case 'query:date': $.fn.calendar.query.apply(this, [date]); break;
+ case 'query:nextMonth': $.fn.calendar.query.apply(this, [date.addMonths(1)]); break;
+ case 'query:nextYear': $.fn.calendar.query.apply(this, [date.addYears(1)]); break;
+ case 'query:previousMonth': $.fn.calendar.query.apply(this, [date.addMonths(-1)]); break;
+ case 'query:previousYear': $.fn.calendar.query.apply(this, [date.addYears(-1)]); break;
+ default: $.fn.calendar.modal.apply(this, [date]); break;
+ }
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/components/calendar/calendar-change.js b/src/js/components/calendar/calendar-change.js
new file mode 100644
index 00000000..77820428
--- /dev/null
+++ b/src/js/components/calendar/calendar-change.js
@@ -0,0 +1,13 @@
+(function ($) {
+
+ $.fn.calendar.change = function (date) {
+ var $modalCalendar = $(this);
+
+ $modalCalendar.prop('date', date);
+
+ $.fn.calendar.query.apply($modalCalendar, [date]);
+
+ $modalCalendar.trigger('calendar:change', date);
+ };
+
+})(jQuery);
diff --git a/src/js/components/calendar/calendar-modal.js b/src/js/components/calendar/calendar-modal.js
new file mode 100644
index 00000000..c2b26d42
--- /dev/null
+++ b/src/js/components/calendar/calendar-modal.js
@@ -0,0 +1,93 @@
+(function ($) {
+
+ $.fn.calendar.modal = function (date) {
+ var $modalCalendar = $(this);
+ var $modalHeader = $modalCalendar.find('.modal-header');
+ var $modalBody = $modalCalendar.find('.modal-body');
+ var $dropdownMonths = $modalHeader.find('.dropdown-toggle');
+ var $months = $modalHeader.find('.dropdown-menu');
+ var $previousMonth = $modalHeader.find('[data-calendar-month=previous]');
+ var $nextMonth = $modalHeader.find('[data-calendar-month=next]');
+ var $year = $modalHeader.find('.form-control');
+ var $goToToday = $modalBody.find('[data-calendar-link=today]');
+ var $goToSelected = $modalBody.find('[data-calendar-link=selected]');
+
+ $modalCalendar.on('calendar:each', function (e, date) {
+ var selectedDate = $modalCalendar.calendar('date');
+ var today = new Date();
+ today.setHours(0, 0, 0, 0);
+
+ $(e.relatedTarget)
+ .toggleClass('active', !!selectedDate && date.getTime() === selectedDate.getTime())
+ .toggleClass('today', date.getTime() === today.getTime())
+ .toggleClass('sunday', date.getDay() === 0);
+ });
+
+ $modalCalendar.on('calendar:query', function (e, date) {
+ var month = date.getMonth();
+ var $month = $($months.find('a').get(month));
+
+ $dropdownMonths.prop('month', date.getMonth()).text($month.text());
+ $year.val(date.getFullYear());
+ });
+
+ $months.find('a').on('click', function (e) {
+ var year = Number($year.val());
+ var month = Number($(this).attr('data-calendar-month'));
+
+ $modalCalendar.calendar('query:date', new Date(year, month, 1));
+
+ e.preventDefault();
+ });
+
+ $nextMonth.on('click', function () {
+ $modalCalendar.calendar('query:nextMonth');
+ });
+
+ $previousMonth.on('click', function () {
+ $modalCalendar.calendar('query:previousMonth');
+ });
+
+ $goToToday.on('click', function () {
+ $modalCalendar.calendar('query:date', new Date());
+ });
+
+ $goToSelected.on('click', function () {
+ var date = $modalCalendar.calendar('date');
+ $modalCalendar.calendar('query:date', date);
+ });
+
+ $year
+ .on('keydown', function (e) {
+ var keyCode = e.keyCode || e.which;
+ var keyPressed = keyboard(keyCode);
+
+ if (keyPressed.isArrowUp) {
+ $modalCalendar.calendar('query:nextYear');
+ }
+
+ if (keyPressed.isArrowDown) {
+ $modalCalendar.calendar('query:previousYear');
+ }
+ })
+ .on('keypress', function (e) {
+ var keyCode = e.keyCode || e.which;
+ var keyPressed = keyboard(keyCode);
+
+ if (!keyPressed.isNumber) {
+ e.preventDefault();
+ }
+ })
+ .on('input', function () {
+ var val = $year.val();
+
+ if (/^\d{4}$/.test(val)) {
+ var year = Number(val);
+ var month = Number($dropdownMonths.prop('month'));
+
+ $modalCalendar.calendar('query:date', new Date(year, month, 1));
+ }
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/components/calendar/calendar-period.js b/src/js/components/calendar/calendar-period.js
new file mode 100644
index 00000000..b604cf3d
--- /dev/null
+++ b/src/js/components/calendar/calendar-period.js
@@ -0,0 +1,21 @@
+(function ($) {
+
+ $.fn.calendar.period = function (year, month) {
+ var firstDateInMonth = new Date(year, month, 1);
+ var lastDateInMonth = new Date(year, month + 1, 0);
+
+ var firstDate = new Date(firstDateInMonth);
+ firstDate.setDate(firstDateInMonth.getDate() - firstDateInMonth.getDay());
+
+ var lastDate = new Date(lastDateInMonth);
+ lastDate.setDate(lastDateInMonth.getDate() + (6 - lastDateInMonth.getDay()));
+
+ return {
+ firstDateInMonth: firstDateInMonth,
+ lastDateInMonth: lastDateInMonth,
+ firstDate: firstDate,
+ lastDate: lastDate
+ };
+ };
+
+})(jQuery);
diff --git a/src/js/components/calendar/calendar-query.js b/src/js/components/calendar/calendar-query.js
new file mode 100644
index 00000000..17b807a2
--- /dev/null
+++ b/src/js/components/calendar/calendar-query.js
@@ -0,0 +1,49 @@
+(function ($) {
+
+ $.fn.calendar.query = function (date) {
+ var $modalCalendar = $(this);
+ var $table = $modalCalendar.find('.table-calendar');
+ var $tbody = $('');
+ var period = $.fn.calendar.period(date.getFullYear(), date.getMonth());
+ var currentDate = period.firstDate;
+
+ while (currentDate <= period.lastDate) {
+ var $tr = $('');
+
+ for (var weekDay = 0; weekDay < 7; weekDay++) {
+ var $td = $('');
+ var calendarEach = $.Event('calendar:each');
+
+ if (currentDate.getMonth() === period.firstDateInMonth.getMonth()) {
+ var $a = $('')
+ .attr('href', '#')
+ .prop('date', currentDate)
+ .text(currentDate.getDate())
+ .on('click', function (e) {
+ $.fn.calendar.change.apply($modalCalendar, [$(this).prop('date')]);
+ e.preventDefault();
+ });
+
+ calendarEach.relatedTarget = $a.get(0);
+
+ $td.append($a);
+ } else {
+ $td.text(currentDate.getDate());
+ }
+
+ $tr.append($td);
+ $modalCalendar.trigger(calendarEach, currentDate);
+
+ currentDate = currentDate.addDays(1);
+ }
+
+ $tbody.append($tr);
+ }
+
+ $table.find('tbody').remove();
+ $table.append($tbody);
+
+ $modalCalendar.prop('query', date).trigger('calendar:query', date)
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera.js b/src/js/components/camera.js
new file mode 100644
index 00000000..679f81c5
--- /dev/null
+++ b/src/js/components/camera.js
@@ -0,0 +1,13 @@
+(function ($) {
+
+ $.fn.camera = function (event) {
+ return this.each(function () {
+ switch (event) {
+ case 'play': $.fn.camera.play.apply(this); break;
+ case 'stop': $.fn.camera.stop.apply(this); break;
+ case 'snapshot': $.fn.camera.snapshot.apply(this); break;
+ }
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-blob.js b/src/js/components/camera/camera-blob.js
new file mode 100644
index 00000000..05781a35
--- /dev/null
+++ b/src/js/components/camera/camera-blob.js
@@ -0,0 +1,22 @@
+(function ($) {
+
+ $.fn.camera.toBlob = function (dataURL) {
+ var byteString;
+
+ if (dataURL.split(',')[0].indexOf('base64') >= 0) {
+ byteString = atob(dataURL.split(',')[1]);
+ } else {
+ byteString = unescape(dataURL.split(',')[1]);
+ }
+
+ var mimeType = dataURL.split(',')[0].split(':')[1].split(';')[0];
+ var uintArray = new Uint8Array(byteString.length);
+
+ for (var i = 0; i < byteString.length; i++) {
+ uintArray[i] = byteString.charCodeAt(i);
+ }
+
+ return new Blob([uintArray], { type: mimeType });
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-link.js b/src/js/components/camera/camera-link.js
new file mode 100644
index 00000000..8e0a8a3c
--- /dev/null
+++ b/src/js/components/camera/camera-link.js
@@ -0,0 +1,14 @@
+(function ($) {
+
+ $.fn.camera.link = function (video, stream) {
+ if ('srcObject' in video) {
+ video.srcObject = stream;
+ } else if (navigator.mozGetUserMedia) {
+ video.mozSrcObject = stream;
+ } else {
+ var windowURL = window.URL || window.webkitURL || window.mozURL || window.msURL;
+ video.src = windowURL.createObjectURL(stream);
+ }
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-media.js b/src/js/components/camera/camera-media.js
new file mode 100644
index 00000000..1097bc82
--- /dev/null
+++ b/src/js/components/camera/camera-media.js
@@ -0,0 +1,17 @@
+(function ($) {
+
+ navigator.getSupportedUserMedia =
+ navigator.getUserMedia ||
+ navigator.webkitGetUserMedia ||
+ navigator.mozGetUserMedia ||
+ navigator.msGetUserMedia;
+
+ $.fn.camera.isSupported = function () {
+ return !!navigator.getSupportedUserMedia;
+ };
+
+ $.fn.camera.getUserMedia = function (mediaConstraint, onSuccess, onFailure) {
+ return navigator.getSupportedUserMedia(mediaConstraint, onSuccess, onFailure);
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-play.js b/src/js/components/camera/camera-play.js
new file mode 100644
index 00000000..8af4ea16
--- /dev/null
+++ b/src/js/components/camera/camera-play.js
@@ -0,0 +1,36 @@
+(function ($) {
+
+ $.fn.camera.play = function () {
+ var $video = $(this);
+
+ if ($video.prop('playing')) {
+ return;
+ }
+
+ var video = $video.get(0);
+
+ var mediaConstraint = { video: true, audio: false };
+
+ var onSuccess = function (stream) {
+ $.fn.camera.link(video, stream);
+
+ video.play();
+
+ $video.prop('stream', stream);
+ $video.prop('playing', true);
+
+ $video.trigger('camera:play');
+ };
+
+ var onFailure = function (error) {
+ $video.trigger('camera:error', error);
+ };
+
+ if ($.fn.camera.isSupported()) {
+ $.fn.camera.getUserMedia(mediaConstraint, onSuccess, onFailure);
+ } else {
+ $video.trigger('camera:notSupported');
+ }
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-snapshot.js b/src/js/components/camera/camera-snapshot.js
new file mode 100644
index 00000000..a69bb619
--- /dev/null
+++ b/src/js/components/camera/camera-snapshot.js
@@ -0,0 +1,43 @@
+(function ($) {
+
+ var regex = /^(\d+)x(\d+)$/gi;
+
+ function getSize(size) {
+ if (!size || !size.match(regex)) {
+ return { width: 320, height: 240 };
+ }
+
+ var matches = regex.exec(size);
+
+ return { width: matches[1], height: matches[2] };
+ }
+
+ $.fn.camera.snapshot = function () {
+ var $video = $(this);
+
+ if (!$video.prop('playing')) {
+ return;
+ }
+
+ var video = $video.get(0);
+
+ var size = getSize($video.attr('data-size'));
+
+ var canvas = document.createElement('canvas');
+ canvas.width = size.width;
+ canvas.height = size.height;
+
+ var context = canvas.getContext('2d');
+ context.translate(size.width, 0); // 'translate' and 'scale' to flip horizontally
+ context.scale(-1, 1);
+ context.drawImage(video, 0, 0, size.width, size.height);
+
+ var dataURL = canvas.toDataURL();
+ var blob = $.fn.camera.toBlob(dataURL);
+
+ blob.dataURL = dataURL;
+
+ $video.trigger('camera:snapshot', blob);
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-stop.js b/src/js/components/camera/camera-stop.js
new file mode 100644
index 00000000..1e75c8bf
--- /dev/null
+++ b/src/js/components/camera/camera-stop.js
@@ -0,0 +1,29 @@
+(function ($) {
+
+ $.fn.camera.stop = function () {
+ var $video = $(this);
+
+ if (!$video.prop('playing')) {
+ return;
+ }
+
+ var stream = $video.prop('stream');
+
+ if (stream.getVideoTracks && typeof stream.getVideoTracks === 'function') {
+ var tracks = stream.getVideoTracks();
+
+ if (tracks && tracks[0] && tracks[0].stop) {
+ tracks[0].stop();
+ }
+ } else if (stream.stop) {
+ // Deprecated, may be removed in the near future
+ stream.stop();
+ }
+
+ $video.prop('playing', false);
+ $video.prop('stream', null);
+
+ $video.trigger('camera:stop');
+ };
+
+})(jQuery);
diff --git a/src/js/components/chat.js b/src/js/components/chat.js
new file mode 100644
index 00000000..4a99ef05
--- /dev/null
+++ b/src/js/components/chat.js
@@ -0,0 +1,28 @@
+(function ($) {
+
+ $.fn.chat = function () {
+ return this.each(function () {
+ var $window = $(window);
+ var $appContent = $('.app-content');
+ var $chat = $(this);
+ var $chatMessages = $chat.find('.chat-messages');
+
+ $window.on('resize', function () {
+ var usedHeight = 0;
+
+ $appContent.children().each(function () {
+ if ($(this).is('.chat')) return;
+ usedHeight += $(this).outerHeight(true); // true = include margins
+ });
+
+ $chat.height($appContent.height() - usedHeight);
+ $chat.addClass('chat-on');
+
+ $chatMessages.scrollToBottom();
+ });
+
+ $window.trigger('resize');
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/components/file-manager.js b/src/js/components/file-manager.js
new file mode 100644
index 00000000..6bc23739
--- /dev/null
+++ b/src/js/components/file-manager.js
@@ -0,0 +1,26 @@
+(function ($) {
+
+ $.fn.fileManager = function () {
+ return this.each(function () {
+ var $element = $(this);
+ var $input = $('').attr('type', 'file');
+
+ $input.on('change', function () {
+ var file = $input.get(0).files[0];
+
+ if (file) {
+ $.fn.fileManager.validate(file, $element);
+
+ $.fn.fileManager.read(file, function () {
+ $element.trigger('file:change', file);
+ });
+ }
+ });
+
+ $element.on('click', function () {
+ $input.trigger('click');
+ });
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/components/file-manager/file-manager-reader.js b/src/js/components/file-manager/file-manager-reader.js
new file mode 100644
index 00000000..fca4908b
--- /dev/null
+++ b/src/js/components/file-manager/file-manager-reader.js
@@ -0,0 +1,14 @@
+(function ($) {
+
+ $.fn.fileManager.read = function (file, callback) {
+ var reader = new FileReader();
+
+ reader.readAsDataURL(file);
+
+ reader.onload = function (e) {
+ file.dataURL = e.target.result;
+ callback();
+ };
+ };
+
+})(jQuery);
diff --git a/src/js/components/file-manager/file-manager-validate.js b/src/js/components/file-manager/file-manager-validate.js
new file mode 100644
index 00000000..d4dd2453
--- /dev/null
+++ b/src/js/components/file-manager/file-manager-validate.js
@@ -0,0 +1,18 @@
+(function ($) {
+
+ $.fn.fileManager.validate = function (file, $settings) {
+ var maxsize = $settings.attr('data-maxsize');
+ var type = $settings.attr('data-type');
+
+ file.errors = [];
+
+ if (!$.fn.fileManager.validate.maxsize(file, maxsize)) {
+ file.errors.push('maxsize');
+ }
+
+ if (!$.fn.fileManager.validate.type(file, type)) {
+ file.errors.push('type');
+ }
+ };
+
+})(jQuery);
diff --git a/src/js/components/file-manager/validators/file-manager-maxsize.js b/src/js/components/file-manager/validators/file-manager-maxsize.js
new file mode 100644
index 00000000..f1b719d3
--- /dev/null
+++ b/src/js/components/file-manager/validators/file-manager-maxsize.js
@@ -0,0 +1,21 @@
+(function ($) {
+
+ var regex = /^(\d*\.?\d+)(B|KB|MB|GB)?$/gi;
+ var exponentOf = { B: 0, KB: 1, MB: 2, GB: 3 };
+
+ function toBytes(size, unit) {
+ return Number(size) * Math.pow(1024, exponentOf[unit]);
+ }
+
+ $.fn.fileManager.validate.maxsize = function (file, maxsize) {
+ if (!maxsize) return true;
+ if (!maxsize.match(regex)) return false;
+
+ var matches = regex.exec(maxsize);
+ var size = matches[1];
+ var unit = matches[2];
+
+ return file.size <= toBytes(size, unit);
+ };
+
+})(jQuery);
diff --git a/src/js/components/file-manager/validators/file-manager-type.js b/src/js/components/file-manager/validators/file-manager-type.js
new file mode 100644
index 00000000..60970fe9
--- /dev/null
+++ b/src/js/components/file-manager/validators/file-manager-type.js
@@ -0,0 +1,10 @@
+(function ($) {
+
+ $.fn.fileManager.validate.type = function (file, type) {
+ if (!type) return true;
+
+ var pattern = '^' + type.replaceAll(',', '|') + '$';
+ return new RegExp(pattern).test(file.type);
+ };
+
+})(jQuery);
diff --git a/src/js/components/input-suggestion/input-suggestion-change.js b/src/js/components/input-suggestion/input-suggestion-change.js
index 166c695d..cecf8e37 100644
--- a/src/js/components/input-suggestion/input-suggestion-change.js
+++ b/src/js/components/input-suggestion/input-suggestion-change.js
@@ -21,7 +21,7 @@
var key = e.keyCode || e.which;
var keyPressed = keyboard(key);
- if (keyPressed.isEnter()) {
+ if (keyPressed.isEnter) {
var $ativeItem = $items.filter('.active');
if ($ativeItem.length) {
diff --git a/src/js/components/input-suggestion/input-suggestion-select.js b/src/js/components/input-suggestion/input-suggestion-select.js
index defc0230..b8396ea2 100644
--- a/src/js/components/input-suggestion/input-suggestion-select.js
+++ b/src/js/components/input-suggestion/input-suggestion-select.js
@@ -29,7 +29,7 @@
var key = e.keyCode || e.which;
var keyPressed = keyboard(key);
- if (keyPressed.isEscape()) {
+ if (keyPressed.isEscape) {
hide();
}
})
@@ -37,7 +37,7 @@
var key = e.keyCode || e.which;
var keyPressed = keyboard(key);
- if (keyPressed.isArrowUp() || keyPressed.isArrowDown()) {
+ if (keyPressed.isArrowUp || keyPressed.isArrowDown) {
e.preventDefault();
if (!$suggestion.is('.open')) {
@@ -47,7 +47,7 @@
var $currentItem = $items.children('.active');
- if (keyPressed.isArrowDown()) {
+ if (keyPressed.isArrowDown) {
if ($currentItem.is(':last-child')) {
return;
}
@@ -60,7 +60,7 @@
}
}
- if (keyPressed.isArrowUp()) {
+ if (keyPressed.isArrowUp) {
if ($currentItem.is(':first-child')) {
return;
}
diff --git a/src/js/events/scroll.js b/src/js/events/scroll.js
new file mode 100644
index 00000000..4b193ee4
--- /dev/null
+++ b/src/js/events/scroll.js
@@ -0,0 +1,12 @@
+(function ($) {
+
+ $.fn.scrollToBottom = function () {
+ return this.each(function () {
+ var $element = $(this);
+ var scrollHeight = $element.prop('scrollHeight');
+
+ $element.scrollTop(scrollHeight);
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/init.js b/src/js/init.js
index c7b1769e..5ec51843 100644
--- a/src/js/init.js
+++ b/src/js/init.js
@@ -1,7 +1,10 @@
$(function () {
$('input').typing();
$('.as-input').asInput();
+ $('.chat').chat();
+ $('.modal-calendar').calendar();
$('[data-toggle="popover"]').popover();
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="suggestion"]').suggestion();
+ $('[data-toggle="file-manager"]').fileManager();
});
diff --git a/src/js/types/date.js b/src/js/types/date.js
new file mode 100644
index 00000000..99d15ff5
--- /dev/null
+++ b/src/js/types/date.js
@@ -0,0 +1,32 @@
+(function () {
+
+ Date.prototype.addDays = function (days) {
+ var date = new Date(this.getTime());
+ date.setDate(this.getDate() + days);
+
+ return date;
+ };
+
+ Date.prototype.addMonths = function (months) {
+ var year = this.getFullYear();
+ var month = this.getMonth() + months;
+ var date = new Date(year, month, 1);
+ var lastDate = new Date(year, month + 1, 0);
+
+ if (this.getDate() > lastDate.getDate()) {
+ date.setDate(lastDate.getDate());
+ } else {
+ date.setDate(this.getDate());
+ }
+
+ return date;
+ };
+
+ Date.prototype.addYears = function (years) {
+ var date = new Date(this.getTime());
+ date.setFullYear(this.getFullYear() + years);
+
+ return date;
+ };
+
+})();
diff --git a/src/js/types/keyboard.js b/src/js/types/keyboard.js
index 8ba592d4..53b69756 100644
--- a/src/js/types/keyboard.js
+++ b/src/js/types/keyboard.js
@@ -1,21 +1,19 @@
-(function() {
- window.keyboard = function(key) {
- this.isArrowDown = function() {
- return key === 40;
- };
+(function () {
+ var numberRegex = /\d/;
+ var letterRegex = /[a-zA-Z]/;
- this.isArrowUp = function() {
- return key === 38;
- };
+ window.keyboard = function (keyCode) {
+ var char = String.fromCharCode(keyCode);
- this.isEnter = function() {
- return key === 13;
+ return {
+ isArrowDown: keyCode === 40,
+ isArrowUp: keyCode === 38,
+ isBackspace: keyCode === 8,
+ isDelete: keyCode === 46 || keyCode === 63272, /* Safari */
+ isEnter: keyCode === 13,
+ isEscape: keyCode === 27,
+ isLetter: letterRegex.test(char),
+ isNumber: numberRegex.test(char)
};
-
- this.isEscape = function() {
- return key === 27;
- };
-
- return this;
};
})();
diff --git a/src/js/types/string.js b/src/js/types/string.js
index 8b9708e6..706467f8 100644
--- a/src/js/types/string.js
+++ b/src/js/types/string.js
@@ -1,11 +1,18 @@
(function () {
- String.prototype.contains = function (str) {
- return new RegExp(str, "i").test(this);
- };
+ if (!String.prototype.startsWith) {
+ String.prototype.startsWith = function (searchString, position) {
+ position = position || 0;
+ return this.indexOf(searchString, position) === position;
+ };
+ }
- String.prototype.replaceAll = function (search, replacement) {
- return this.replace(new RegExp(search, 'g'), replacement);
- };
+ String.prototype.contains = function (str) {
+ return new RegExp(str, "i").test(this);
+ };
+
+ String.prototype.replaceAll = function (search, replacement) {
+ return this.replace(new RegExp(search, 'g'), replacement);
+ };
})();
diff --git a/src/scss/admin4b.scss b/src/scss/admin4b.scss
index 641ead06..1c77889b 100644
--- a/src/scss/admin4b.scss
+++ b/src/scss/admin4b.scss
@@ -17,6 +17,10 @@
@import 'layout/sign/form-sign';
@import 'layout/sign/page-sign';
+@import 'components/breadcrumb';
+@import 'components/calendar';
+@import 'components/camera';
+@import 'components/chat';
@import 'components/label';
@import 'components/callout';
@import 'components/checkbox';
diff --git a/src/scss/components/_breadcrumb.scss b/src/scss/components/_breadcrumb.scss
new file mode 100644
index 00000000..23ed389e
--- /dev/null
+++ b/src/scss/components/_breadcrumb.scss
@@ -0,0 +1,4 @@
+.breadcrumb
+{
+ @include crossbrowser-border-radius(0);
+}
diff --git a/src/scss/components/_calendar.scss b/src/scss/components/_calendar.scss
new file mode 100644
index 00000000..e2d3f85e
--- /dev/null
+++ b/src/scss/components/_calendar.scss
@@ -0,0 +1,137 @@
+.modal.modal-calendar .modal-dialog
+{
+ max-width: 20rem;
+
+ .modal-content
+ {
+ .modal-header,
+ .modal-body,
+ .modal-footer
+ {
+ border-width: 0;
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
+ }
+
+ .modal-header
+ {
+ .input-group
+ {
+ height: auto;
+ width: auto;
+
+ .btn,
+ .form-control
+ {
+ font-size: 14pt;
+ padding: .9375rem .3125rem 0 .3125rem;
+
+ &.btn-link
+ {
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
+ }
+ }
+
+ .form-control
+ {
+ border: none;
+ display: inline-block;
+ text-align: center;
+ width: 3.75rem;
+ @include crossbrowser-box-shadow(none);
+ @include crossbrowser-flex(0 1 auto);
+ }
+
+ .btn.dropdown-toggle
+ {
+ border: none;
+ background: $bscolors-white;
+ color: $bscolors-gray-700;
+ @include crossbrowser-box-shadow(none);
+
+ &::after
+ {
+ display:none
+ }
+ }
+ }
+ }
+
+ .modal-footer
+ {
+ justify-content: center;
+ @include crossbrowser-align-items(center);
+ }
+ }
+}
+
+table.table-calendar
+{
+ margin-bottom: .5rem;
+ text-align: center;
+ width: 100%;
+
+ th
+ {
+ font-weight: normal;
+ padding-bottom: .9375rem;
+
+ &:first-child
+ {
+ color: $bscolors-red;
+ }
+ }
+
+ td
+ {
+ color: $bscolors-gray-500;
+ padding: .3125rem;
+
+ a
+ {
+ color: $bscolors-gray-700;
+ display: block;
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ z-index: 1;
+
+ &::before
+ {
+ border: .0625rem solid $bscolors-blue;
+ content: " ";
+ display: none;
+ position: absolute;
+ top: -.25rem;
+ left: -.0625rem;
+ width: 2rem;
+ height: 2rem;
+ z-index: -1;
+ @include crossbrowser-border-radius(50%);
+ }
+
+ &:hover,
+ &.active
+ {
+ color: $bscolors-white !important;
+
+ &::before
+ {
+ background: $bscolors-blue;
+ display: block;
+ }
+ }
+
+ &.today::before
+ {
+ display: block;
+ }
+
+ &.sunday
+ {
+ color: $bscolors-red;
+ }
+ }
+ }
+}
diff --git a/src/scss/components/_callout.scss b/src/scss/components/_callout.scss
index fde6b204..d4f0c50e 100644
--- a/src/scss/components/_callout.scss
+++ b/src/scss/components/_callout.scss
@@ -1,8 +1,7 @@
.callout
{
padding: 1.25rem;
- margin-top: 1.25rem;
- margin-bottom: 1.25rem;
+ margin-bottom: 1rem;
border: .0625rem solid #eee;
border-left-width: .25rem;
@include crossbrowser-border-radius(.25rem);
diff --git a/src/scss/components/_camera.scss b/src/scss/components/_camera.scss
new file mode 100644
index 00000000..32146fe2
--- /dev/null
+++ b/src/scss/components/_camera.scss
@@ -0,0 +1,7 @@
+.camera
+{
+ display: block;
+ width: 100%;
+ @include crossbrowser-transform(scale(-1, 1));
+ @include crossbrowser-filter(FlipH);
+}
diff --git a/src/scss/components/_chat.scss b/src/scss/components/_chat.scss
new file mode 100644
index 00000000..833e7ece
--- /dev/null
+++ b/src/scss/components/_chat.scss
@@ -0,0 +1,139 @@
+@include crossbrowser-keyframes(ballon)
+{
+ 0%
+ {
+ @include crossbrowser-transform(scale(0));
+ }
+ 100%
+ {
+ @include crossbrowser-transform(scale(1));
+ }
+}
+
+.chat
+{
+ display: none;
+ padding: 0;
+ width: 100%;
+
+ &.chat-on /* Set by JS after calculate the remaining height */
+ {
+ display: table;
+ }
+
+ .chat-body,
+ .chat-footer
+ {
+ display: table-row;
+ }
+
+ .chat-body
+ {
+ height: 100%;
+
+ .chat-content
+ {
+ display: table-cell;
+ height: 100%;
+
+ .chat-messages
+ {
+ height: 100%;
+ position: relative;
+ overflow: auto;
+
+ .container-fluid /* Correct height for IE and Firefox */
+ {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
+
+ .message-sent,
+ .message-reply
+ {
+ margin-bottom: 1rem;
+
+ img
+ {
+ vertical-align: top;
+ width: 3rem;
+ @include crossbrowser-border-radius(50%);
+ }
+
+ p
+ {
+ display: inline-block;
+ margin: 0;
+ padding: .625rem 1.25rem;
+ text-align: left;
+ max-width: 75%;
+ @include crossbrowser-animation(ballon .2s linear);
+ @include crossbrowser-border-radius(1.25rem);
+ }
+ }
+
+ .message-sent
+ {
+ img
+ {
+ margin-right: .375rem;
+ }
+
+ p
+ {
+ background-color: lighten($flatuicolors-midnight-blue, 15%);
+ color: $bscolors-white;
+ transform-origin: top left;
+ }
+
+ small
+ {
+ color: lighten($flatuicolors-midnight-blue, 50%);
+ }
+ }
+
+ .message-reply
+ {
+ text-align: right;
+
+ img
+ {
+ float: right;
+ margin-left: .625rem;
+ }
+
+ p
+ {
+ background-color: $bscolors-gray-400;
+ transform-origin: top right;
+ }
+
+ small
+ {
+ color: $bscolors-gray-600;
+ }
+ }
+ }
+ }
+ }
+
+ .chat-footer
+ {
+ .btn,
+ .form-control
+ {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ @include crossbrowser-border-radius(0);
+ }
+
+ .btn
+ {
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
+ }
+ }
+}
diff --git a/src/scss/components/_checkbox.scss b/src/scss/components/_checkbox.scss
index 220b8488..5c654722 100644
--- a/src/scss/components/_checkbox.scss
+++ b/src/scss/components/_checkbox.scss
@@ -131,8 +131,8 @@ label.checkbox
&:after
{
- left: .5rem;
- top: .25rem;
+ left: .57rem;
+ top: .3rem;
width: .4375rem;
height: .75rem;
border-width: 0 .1875rem .1875rem 0;
diff --git a/src/scss/components/_radio-button.scss b/src/scss/components/_radio-button.scss
index 8fe005e1..26ab6337 100644
--- a/src/scss/components/_radio-button.scss
+++ b/src/scss/components/_radio-button.scss
@@ -36,6 +36,7 @@
label.radio
{
margin-bottom: 0;
+ text-align: left;
@include crossbrowser-align-items(center);
@include crossbrowser-display-inline-flex();
@include crossbrowser-user-select(none);
diff --git a/src/scss/highlight/_css.scss b/src/scss/highlight/_css.scss
index f0db0625..fdbbf545 100644
--- a/src/scss/highlight/_css.scss
+++ b/src/scss/highlight/_css.scss
@@ -1,24 +1,55 @@
-.css .hljs-keyword
+.source-code
{
- color: $highlight-colors-keyword;
-}
+ .css .hljs-keyword
+ {
+ color: $highlight-light-keyword;
+ }
-.css .hljs-selector-class
-{
- color: $highlight-colors-class;
-}
+ .css .hljs-selector-class
+ {
+ color: $highlight-light-class;
+ }
-.css .hljs-attribute
-{
- color: $highlight-colors-attribute;
-}
+ .css .hljs-attribute
+ {
+ color: $highlight-light-attribute;
+ }
-.css .hljs-comment
-{
- color: $highlight-colors-comment;
+ .css .hljs-comment
+ {
+ color: $highlight-light-comment;
+ }
+
+ .css .hljs-number
+ {
+ color: $highlight-light-number;
+ }
}
-.css .hljs-number
+.source-code.dark
{
- color: $highlight-colors-number;
+ .css .hljs-keyword
+ {
+ color: $highlight-dark-keyword;
+ }
+
+ .css .hljs-selector-class
+ {
+ color: $highlight-dark-class;
+ }
+
+ .css .hljs-attribute
+ {
+ color: $highlight-dark-attribute;
+ }
+
+ .css .hljs-comment
+ {
+ color: $highlight-dark-comment;
+ }
+
+ .css .hljs-number
+ {
+ color: $highlight-dark-number;
+ }
}
diff --git a/src/scss/highlight/_html.scss b/src/scss/highlight/_html.scss
index 3478f197..29218f04 100644
--- a/src/scss/highlight/_html.scss
+++ b/src/scss/highlight/_html.scss
@@ -1,25 +1,57 @@
-.html .hljs-meta
+.source-code
{
- color: $highlight-colors-namespace;
-}
+ .html .hljs-meta
+ {
+ color: $highlight-light-namespace;
+ }
-.html .hljs-section,
-.html .hljs-tag
-{
- color: $highlight-colors-keyword;
-}
+ .html .hljs-section,
+ .html .hljs-tag
+ {
+ color: $highlight-light-keyword;
+ }
-.html .hljs-tag .hljs-attr
-{
- color: $highlight-colors-attribute;
-}
+ .html .hljs-tag .hljs-attr
+ {
+ color: $highlight-light-attribute;
+ }
-.html .hljs-tag .hljs-string
-{
- color: $highlight-colors-string;
+ .html .hljs-tag .hljs-string
+ {
+ color: $highlight-light-string;
+ }
+
+ .html .hljs-comment
+ {
+ color: $highlight-light-comment;
+ }
}
-.html .hljs-comment
+.source-code.dark
{
- color: $highlight-colors-comment;
+ .html .hljs-meta
+ {
+ color: $highlight-dark-namespace;
+ }
+
+ .html .hljs-section,
+ .html .hljs-tag
+ {
+ color: $highlight-dark-keyword;
+ }
+
+ .html .hljs-tag .hljs-attr
+ {
+ color: $highlight-dark-attribute;
+ }
+
+ .html .hljs-tag .hljs-string
+ {
+ color: $highlight-dark-string;
+ }
+
+ .html .hljs-comment
+ {
+ color: $highlight-dark-comment;
+ }
}
diff --git a/src/scss/highlight/_js.scss b/src/scss/highlight/_js.scss
index 3ab4b650..a9037852 100644
--- a/src/scss/highlight/_js.scss
+++ b/src/scss/highlight/_js.scss
@@ -1,14 +1,45 @@
-.js .hljs-string
+.source-code
{
- color: $highlight-colors-string;
-}
+ .js .hljs-number
+ {
+ color: $highlight-light-number;
+ }
-.js .hljs-keyword
-{
- color: $highlight-colors-keyword;
+ .js .hljs-string
+ {
+ color: $highlight-light-string;
+ }
+
+ .js .hljs-keyword
+ {
+ color: $highlight-light-keyword;
+ }
+
+ .js .hljs-comment
+ {
+ color: $highlight-light-comment;
+ }
}
-.js .hljs-comment
+.source-code.dark
{
- color: $highlight-colors-comment;
+ .js .hljs-number
+ {
+ color: $highlight-dark-number;
+ }
+
+ .js .hljs-string
+ {
+ color: $highlight-dark-string;
+ }
+
+ .js .hljs-keyword
+ {
+ color: $highlight-dark-keyword;
+ }
+
+ .js .hljs-comment
+ {
+ color: $highlight-dark-comment;
+ }
}
diff --git a/src/scss/highlight/_json.scss b/src/scss/highlight/_json.scss
index 27d70936..b53434ad 100644
--- a/src/scss/highlight/_json.scss
+++ b/src/scss/highlight/_json.scss
@@ -1,19 +1,45 @@
-.json .hljs-attr
+.source-code
{
- color: $highlight-colors-attribute;
-}
+ .json .hljs-attr
+ {
+ color: $highlight-light-attribute;
+ }
-.json .hljs-string
-{
- color: $highlight-colors-string;
-}
+ .json .hljs-string
+ {
+ color: $highlight-light-string;
+ }
-.json .hljs-literal,
-{
- color: $highlight-colors-keyword;
+ .json .hljs-literal,
+ {
+ color: $highlight-light-keyword;
+ }
+
+ .json .hljs-number
+ {
+ color: $highlight-light-number;
+ }
}
-.json .hljs-number
+.source-code.dark
{
- color: $highlight-colors-number;
+ .json .hljs-attr
+ {
+ color: $highlight-dark-attribute;
+ }
+
+ .json .hljs-string
+ {
+ color: $highlight-dark-string;
+ }
+
+ .json .hljs-literal,
+ {
+ color: $highlight-dark-keyword;
+ }
+
+ .json .hljs-number
+ {
+ color: $highlight-dark-number;
+ }
}
diff --git a/src/scss/highlight/_source-code.scss b/src/scss/highlight/_source-code.scss
index 96adac52..95475837 100644
--- a/src/scss/highlight/_source-code.scss
+++ b/src/scss/highlight/_source-code.scss
@@ -1,36 +1,61 @@
.source-code
{
- $bg-color: #222d32;
- $text-color: #fff;
-
margin-bottom: 1rem;
.nav-tabs a
{
- color: darken($text-color, 50%);
+ color: $highlight-light-editor-link;
font-size: .95rem;
text-decoration: none;
padding: .75rem;
+ padding-bottom: 0;
@include crossbrowser-transition(color .2s ease);
&.active,
+ &:active,
&:hover
{
- color: $text-color;
+ color: darken($highlight-light-editor-link, 30%);
}
}
pre,
.nav-tabs
{
- background: $bg-color;
+ background: $highlight-light-editor-bg;
border: none;
}
pre
{
- color: $highlight-colors-literal;
margin: 0;
overflow-x: auto;
+ padding: .75rem;
+ }
+}
+
+.source-code.dark
+{
+ .nav-tabs a
+ {
+ color: darken($highlight-dark-editor-link, 50%);
+
+ &.active,
+ &:active,
+ &:hover
+ {
+ color: $highlight-dark-editor-link;
+ }
+ }
+
+ pre,
+ .nav-tabs
+ {
+ background: $highlight-dark-editor-bg;
+ }
+
+ pre
+ {
+ color: $highlight-dark-literal;
}
}
diff --git a/src/scss/layout/_app.scss b/src/scss/layout/_app.scss
index e7df751f..ecc15003 100644
--- a/src/scss/layout/_app.scss
+++ b/src/scss/layout/_app.scss
@@ -85,3 +85,17 @@ body
}
}
}
+
+@media print
+{
+ .app .app-body
+ {
+ position: relative;
+ height: auto;
+
+ .app-sidebar
+ {
+ display: none;
+ }
+ }
+}
diff --git a/src/scss/layout/sign/_page-sign.scss b/src/scss/layout/sign/_page-sign.scss
index 9fbcbe5c..47a691e5 100644
--- a/src/scss/layout/sign/_page-sign.scss
+++ b/src/scss/layout/sign/_page-sign.scss
@@ -4,5 +4,4 @@
padding-top: 2.45rem;
padding-bottom: 2.45rem;
@include crossbrowser-align-items(center);
- @include crossbrowser-display-flex();
}
diff --git a/src/scss/palette/_highlight-colors.scss b/src/scss/palette/_highlight-colors.scss
index 405f8b21..c509e8d8 100644
--- a/src/scss/palette/_highlight-colors.scss
+++ b/src/scss/palette/_highlight-colors.scss
@@ -1,8 +1,21 @@
-$highlight-colors-attribute: #9cdcfe;
-$highlight-colors-class: #0a8;
-$highlight-colors-comment: #999;
-$highlight-colors-keyword: #569cd6;
-$highlight-colors-literal: #e8e8e8;
-$highlight-colors-namespace: #099;
-$highlight-colors-number: #d7ba7d;
-$highlight-colors-string: #ce9178;
+$highlight-light-attribute: #4f9fcf;
+$highlight-light-editor-bg: #efefef;
+$highlight-light-editor-link: #868e96;
+$highlight-light-class: #0a8;
+$highlight-light-comment: #999;
+$highlight-light-keyword: #2f6f9f;
+$highlight-light-literal: #212529;
+$highlight-light-namespace: #099;
+$highlight-light-number: #f5871f;
+$highlight-light-string: #d44950;
+
+$highlight-dark-attribute: #9cdcfe;
+$highlight-dark-editor-bg: #222d32;
+$highlight-dark-editor-link: #fff;
+$highlight-dark-class: #0a8;
+$highlight-dark-comment: #999;
+$highlight-dark-keyword: #569cd6;
+$highlight-dark-literal: #e8e8e8;
+$highlight-dark-namespace: #099;
+$highlight-dark-number: #d7ba7d;
+$highlight-dark-string: #ce9178;
diff --git a/src/scss/utilities/_cross-browser.scss b/src/scss/utilities/_cross-browser.scss
index 9a06789b..79e3c362 100644
--- a/src/scss/utilities/_cross-browser.scss
+++ b/src/scss/utilities/_cross-browser.scss
@@ -96,6 +96,21 @@
display: inline-flex;
}
+@mixin crossbrowser-filter($filter)
+{
+ -ms-filter: "#{$filter}";
+ filter: $filter;
+}
+
+@mixin crossbrowser-flex($flex...)
+{
+ -webkit-box-flex: $flex;
+ -moz-box-flex: $flex;
+ -webkit-flex: $flex;
+ -ms-flex: $flex;
+ flex: $flex;
+}
+
@mixin crossbrowser-input-placeholder($color)
{
&::-webkit-input-placeholder
@@include('includes/code-examples/components/spinner/spinner-basic.html')@@include('includes/code-examples/layout/spinner/spinner-basic.html')
Source code
- @@include('includes/code-examples/components/spinner/spinner-sizes.html')
+ @@include('includes/code-examples/layout/spinner/spinner-sizes.html')
@@ -95,10 +95,10 @@
- @@include('includes/code-examples/components/spinner/spinner-block.html')
+ @@include('includes/code-examples/layout/spinner/spinner-block.html')
- @@include('includes/code-examples/components/spinner/spinner-block.js')
+ @@include('includes/code-examples/layout/spinner/spinner-block.js')
diff --git a/src/html/pages/components/callout.html b/src/html/pages/reference/callout.html
similarity index 92%
rename from src/html/pages/components/callout.html
rename to src/html/pages/reference/callout.html
index c104ec57..331b4704 100644
--- a/src/html/pages/components/callout.html
+++ b/src/html/pages/reference/callout.html
@@ -2,7 +2,7 @@
@@ -33,7 +33,7 @@ Critital
Source code
- @@include('includes/code-examples/components/callout/callout-colors.html')
+ @@include('includes/code-examples/reference/callout/callout-colors.html')
diff --git a/src/html/pages/reference/code-highlight.html b/src/html/pages/reference/code-highlight.html
new file mode 100644
index 00000000..71ce01df
--- /dev/null
+++ b/src/html/pages/reference/code-highlight.html
@@ -0,0 +1,102 @@
+
+
+
+
+
+ Code highlight
+
+
+ Code highlight is a feature with predefined styles for HTML, CSS, JavaScript and JSON.
+ These styles are a customization for the languages supported by the library
+ highlight.js.
+
+
+ You do not need the entire template to work with code highlight.
+ You only need the highlight.js library and
+ the admin4b-highlight.min.css file present in the NPM package.
+
+ See the basic example:
+
+
+ Source code
+
+
+ @@include('includes/code-examples/reference/code-highlight/how-to-use.html')
+
+
+
+ Themes
+
+
+ Light theme (default):
+
+
+
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.html')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.css')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.js')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.json')
+
+
+
+
+
+ Source code
+
+
+ @@include('includes/code-examples/reference/code-highlight/theme-light.html')
+
+
+
+ Dark theme:
+
+
+
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.html')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.css')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.js')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.json')
+
+
+
+
+
+ Source code
+
+
+ @@include('includes/code-examples/reference/code-highlight/theme-dark.html')
+
+
+
+
diff --git a/src/js/components/calendar.js b/src/js/components/calendar.js
new file mode 100644
index 00000000..b25d6051
--- /dev/null
+++ b/src/js/components/calendar.js
@@ -0,0 +1,30 @@
+(function ($) {
+
+ $.fn.calendar = function (event, date) {
+ var $modalCalendar = $(this);
+
+ if (event === 'date' && !date) {
+ return $modalCalendar.prop('date');
+ }
+
+ if (event === 'query:date' && !date) {
+ return $modalCalendar.prop('query');
+ }
+
+ return this.each(function () {
+ date = date instanceof Date ? date : $modalCalendar.prop('query') || new Date();
+ date.setHours(0, 0, 0, 0);
+
+ switch (event) {
+ case 'date': $.fn.calendar.change.apply(this, [date]); break;
+ case 'query:date': $.fn.calendar.query.apply(this, [date]); break;
+ case 'query:nextMonth': $.fn.calendar.query.apply(this, [date.addMonths(1)]); break;
+ case 'query:nextYear': $.fn.calendar.query.apply(this, [date.addYears(1)]); break;
+ case 'query:previousMonth': $.fn.calendar.query.apply(this, [date.addMonths(-1)]); break;
+ case 'query:previousYear': $.fn.calendar.query.apply(this, [date.addYears(-1)]); break;
+ default: $.fn.calendar.modal.apply(this, [date]); break;
+ }
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/components/calendar/calendar-change.js b/src/js/components/calendar/calendar-change.js
new file mode 100644
index 00000000..77820428
--- /dev/null
+++ b/src/js/components/calendar/calendar-change.js
@@ -0,0 +1,13 @@
+(function ($) {
+
+ $.fn.calendar.change = function (date) {
+ var $modalCalendar = $(this);
+
+ $modalCalendar.prop('date', date);
+
+ $.fn.calendar.query.apply($modalCalendar, [date]);
+
+ $modalCalendar.trigger('calendar:change', date);
+ };
+
+})(jQuery);
diff --git a/src/js/components/calendar/calendar-modal.js b/src/js/components/calendar/calendar-modal.js
new file mode 100644
index 00000000..c2b26d42
--- /dev/null
+++ b/src/js/components/calendar/calendar-modal.js
@@ -0,0 +1,93 @@
+(function ($) {
+
+ $.fn.calendar.modal = function (date) {
+ var $modalCalendar = $(this);
+ var $modalHeader = $modalCalendar.find('.modal-header');
+ var $modalBody = $modalCalendar.find('.modal-body');
+ var $dropdownMonths = $modalHeader.find('.dropdown-toggle');
+ var $months = $modalHeader.find('.dropdown-menu');
+ var $previousMonth = $modalHeader.find('[data-calendar-month=previous]');
+ var $nextMonth = $modalHeader.find('[data-calendar-month=next]');
+ var $year = $modalHeader.find('.form-control');
+ var $goToToday = $modalBody.find('[data-calendar-link=today]');
+ var $goToSelected = $modalBody.find('[data-calendar-link=selected]');
+
+ $modalCalendar.on('calendar:each', function (e, date) {
+ var selectedDate = $modalCalendar.calendar('date');
+ var today = new Date();
+ today.setHours(0, 0, 0, 0);
+
+ $(e.relatedTarget)
+ .toggleClass('active', !!selectedDate && date.getTime() === selectedDate.getTime())
+ .toggleClass('today', date.getTime() === today.getTime())
+ .toggleClass('sunday', date.getDay() === 0);
+ });
+
+ $modalCalendar.on('calendar:query', function (e, date) {
+ var month = date.getMonth();
+ var $month = $($months.find('a').get(month));
+
+ $dropdownMonths.prop('month', date.getMonth()).text($month.text());
+ $year.val(date.getFullYear());
+ });
+
+ $months.find('a').on('click', function (e) {
+ var year = Number($year.val());
+ var month = Number($(this).attr('data-calendar-month'));
+
+ $modalCalendar.calendar('query:date', new Date(year, month, 1));
+
+ e.preventDefault();
+ });
+
+ $nextMonth.on('click', function () {
+ $modalCalendar.calendar('query:nextMonth');
+ });
+
+ $previousMonth.on('click', function () {
+ $modalCalendar.calendar('query:previousMonth');
+ });
+
+ $goToToday.on('click', function () {
+ $modalCalendar.calendar('query:date', new Date());
+ });
+
+ $goToSelected.on('click', function () {
+ var date = $modalCalendar.calendar('date');
+ $modalCalendar.calendar('query:date', date);
+ });
+
+ $year
+ .on('keydown', function (e) {
+ var keyCode = e.keyCode || e.which;
+ var keyPressed = keyboard(keyCode);
+
+ if (keyPressed.isArrowUp) {
+ $modalCalendar.calendar('query:nextYear');
+ }
+
+ if (keyPressed.isArrowDown) {
+ $modalCalendar.calendar('query:previousYear');
+ }
+ })
+ .on('keypress', function (e) {
+ var keyCode = e.keyCode || e.which;
+ var keyPressed = keyboard(keyCode);
+
+ if (!keyPressed.isNumber) {
+ e.preventDefault();
+ }
+ })
+ .on('input', function () {
+ var val = $year.val();
+
+ if (/^\d{4}$/.test(val)) {
+ var year = Number(val);
+ var month = Number($dropdownMonths.prop('month'));
+
+ $modalCalendar.calendar('query:date', new Date(year, month, 1));
+ }
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/components/calendar/calendar-period.js b/src/js/components/calendar/calendar-period.js
new file mode 100644
index 00000000..b604cf3d
--- /dev/null
+++ b/src/js/components/calendar/calendar-period.js
@@ -0,0 +1,21 @@
+(function ($) {
+
+ $.fn.calendar.period = function (year, month) {
+ var firstDateInMonth = new Date(year, month, 1);
+ var lastDateInMonth = new Date(year, month + 1, 0);
+
+ var firstDate = new Date(firstDateInMonth);
+ firstDate.setDate(firstDateInMonth.getDate() - firstDateInMonth.getDay());
+
+ var lastDate = new Date(lastDateInMonth);
+ lastDate.setDate(lastDateInMonth.getDate() + (6 - lastDateInMonth.getDay()));
+
+ return {
+ firstDateInMonth: firstDateInMonth,
+ lastDateInMonth: lastDateInMonth,
+ firstDate: firstDate,
+ lastDate: lastDate
+ };
+ };
+
+})(jQuery);
diff --git a/src/js/components/calendar/calendar-query.js b/src/js/components/calendar/calendar-query.js
new file mode 100644
index 00000000..17b807a2
--- /dev/null
+++ b/src/js/components/calendar/calendar-query.js
@@ -0,0 +1,49 @@
+(function ($) {
+
+ $.fn.calendar.query = function (date) {
+ var $modalCalendar = $(this);
+ var $table = $modalCalendar.find('.table-calendar');
+ var $tbody = $('');
+ var period = $.fn.calendar.period(date.getFullYear(), date.getMonth());
+ var currentDate = period.firstDate;
+
+ while (currentDate <= period.lastDate) {
+ var $tr = $('');
+
+ for (var weekDay = 0; weekDay < 7; weekDay++) {
+ var $td = $('');
+ var calendarEach = $.Event('calendar:each');
+
+ if (currentDate.getMonth() === period.firstDateInMonth.getMonth()) {
+ var $a = $('')
+ .attr('href', '#')
+ .prop('date', currentDate)
+ .text(currentDate.getDate())
+ .on('click', function (e) {
+ $.fn.calendar.change.apply($modalCalendar, [$(this).prop('date')]);
+ e.preventDefault();
+ });
+
+ calendarEach.relatedTarget = $a.get(0);
+
+ $td.append($a);
+ } else {
+ $td.text(currentDate.getDate());
+ }
+
+ $tr.append($td);
+ $modalCalendar.trigger(calendarEach, currentDate);
+
+ currentDate = currentDate.addDays(1);
+ }
+
+ $tbody.append($tr);
+ }
+
+ $table.find('tbody').remove();
+ $table.append($tbody);
+
+ $modalCalendar.prop('query', date).trigger('calendar:query', date)
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera.js b/src/js/components/camera.js
new file mode 100644
index 00000000..679f81c5
--- /dev/null
+++ b/src/js/components/camera.js
@@ -0,0 +1,13 @@
+(function ($) {
+
+ $.fn.camera = function (event) {
+ return this.each(function () {
+ switch (event) {
+ case 'play': $.fn.camera.play.apply(this); break;
+ case 'stop': $.fn.camera.stop.apply(this); break;
+ case 'snapshot': $.fn.camera.snapshot.apply(this); break;
+ }
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-blob.js b/src/js/components/camera/camera-blob.js
new file mode 100644
index 00000000..05781a35
--- /dev/null
+++ b/src/js/components/camera/camera-blob.js
@@ -0,0 +1,22 @@
+(function ($) {
+
+ $.fn.camera.toBlob = function (dataURL) {
+ var byteString;
+
+ if (dataURL.split(',')[0].indexOf('base64') >= 0) {
+ byteString = atob(dataURL.split(',')[1]);
+ } else {
+ byteString = unescape(dataURL.split(',')[1]);
+ }
+
+ var mimeType = dataURL.split(',')[0].split(':')[1].split(';')[0];
+ var uintArray = new Uint8Array(byteString.length);
+
+ for (var i = 0; i < byteString.length; i++) {
+ uintArray[i] = byteString.charCodeAt(i);
+ }
+
+ return new Blob([uintArray], { type: mimeType });
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-link.js b/src/js/components/camera/camera-link.js
new file mode 100644
index 00000000..8e0a8a3c
--- /dev/null
+++ b/src/js/components/camera/camera-link.js
@@ -0,0 +1,14 @@
+(function ($) {
+
+ $.fn.camera.link = function (video, stream) {
+ if ('srcObject' in video) {
+ video.srcObject = stream;
+ } else if (navigator.mozGetUserMedia) {
+ video.mozSrcObject = stream;
+ } else {
+ var windowURL = window.URL || window.webkitURL || window.mozURL || window.msURL;
+ video.src = windowURL.createObjectURL(stream);
+ }
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-media.js b/src/js/components/camera/camera-media.js
new file mode 100644
index 00000000..1097bc82
--- /dev/null
+++ b/src/js/components/camera/camera-media.js
@@ -0,0 +1,17 @@
+(function ($) {
+
+ navigator.getSupportedUserMedia =
+ navigator.getUserMedia ||
+ navigator.webkitGetUserMedia ||
+ navigator.mozGetUserMedia ||
+ navigator.msGetUserMedia;
+
+ $.fn.camera.isSupported = function () {
+ return !!navigator.getSupportedUserMedia;
+ };
+
+ $.fn.camera.getUserMedia = function (mediaConstraint, onSuccess, onFailure) {
+ return navigator.getSupportedUserMedia(mediaConstraint, onSuccess, onFailure);
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-play.js b/src/js/components/camera/camera-play.js
new file mode 100644
index 00000000..8af4ea16
--- /dev/null
+++ b/src/js/components/camera/camera-play.js
@@ -0,0 +1,36 @@
+(function ($) {
+
+ $.fn.camera.play = function () {
+ var $video = $(this);
+
+ if ($video.prop('playing')) {
+ return;
+ }
+
+ var video = $video.get(0);
+
+ var mediaConstraint = { video: true, audio: false };
+
+ var onSuccess = function (stream) {
+ $.fn.camera.link(video, stream);
+
+ video.play();
+
+ $video.prop('stream', stream);
+ $video.prop('playing', true);
+
+ $video.trigger('camera:play');
+ };
+
+ var onFailure = function (error) {
+ $video.trigger('camera:error', error);
+ };
+
+ if ($.fn.camera.isSupported()) {
+ $.fn.camera.getUserMedia(mediaConstraint, onSuccess, onFailure);
+ } else {
+ $video.trigger('camera:notSupported');
+ }
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-snapshot.js b/src/js/components/camera/camera-snapshot.js
new file mode 100644
index 00000000..a69bb619
--- /dev/null
+++ b/src/js/components/camera/camera-snapshot.js
@@ -0,0 +1,43 @@
+(function ($) {
+
+ var regex = /^(\d+)x(\d+)$/gi;
+
+ function getSize(size) {
+ if (!size || !size.match(regex)) {
+ return { width: 320, height: 240 };
+ }
+
+ var matches = regex.exec(size);
+
+ return { width: matches[1], height: matches[2] };
+ }
+
+ $.fn.camera.snapshot = function () {
+ var $video = $(this);
+
+ if (!$video.prop('playing')) {
+ return;
+ }
+
+ var video = $video.get(0);
+
+ var size = getSize($video.attr('data-size'));
+
+ var canvas = document.createElement('canvas');
+ canvas.width = size.width;
+ canvas.height = size.height;
+
+ var context = canvas.getContext('2d');
+ context.translate(size.width, 0); // 'translate' and 'scale' to flip horizontally
+ context.scale(-1, 1);
+ context.drawImage(video, 0, 0, size.width, size.height);
+
+ var dataURL = canvas.toDataURL();
+ var blob = $.fn.camera.toBlob(dataURL);
+
+ blob.dataURL = dataURL;
+
+ $video.trigger('camera:snapshot', blob);
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-stop.js b/src/js/components/camera/camera-stop.js
new file mode 100644
index 00000000..1e75c8bf
--- /dev/null
+++ b/src/js/components/camera/camera-stop.js
@@ -0,0 +1,29 @@
+(function ($) {
+
+ $.fn.camera.stop = function () {
+ var $video = $(this);
+
+ if (!$video.prop('playing')) {
+ return;
+ }
+
+ var stream = $video.prop('stream');
+
+ if (stream.getVideoTracks && typeof stream.getVideoTracks === 'function') {
+ var tracks = stream.getVideoTracks();
+
+ if (tracks && tracks[0] && tracks[0].stop) {
+ tracks[0].stop();
+ }
+ } else if (stream.stop) {
+ // Deprecated, may be removed in the near future
+ stream.stop();
+ }
+
+ $video.prop('playing', false);
+ $video.prop('stream', null);
+
+ $video.trigger('camera:stop');
+ };
+
+})(jQuery);
diff --git a/src/js/components/chat.js b/src/js/components/chat.js
new file mode 100644
index 00000000..4a99ef05
--- /dev/null
+++ b/src/js/components/chat.js
@@ -0,0 +1,28 @@
+(function ($) {
+
+ $.fn.chat = function () {
+ return this.each(function () {
+ var $window = $(window);
+ var $appContent = $('.app-content');
+ var $chat = $(this);
+ var $chatMessages = $chat.find('.chat-messages');
+
+ $window.on('resize', function () {
+ var usedHeight = 0;
+
+ $appContent.children().each(function () {
+ if ($(this).is('.chat')) return;
+ usedHeight += $(this).outerHeight(true); // true = include margins
+ });
+
+ $chat.height($appContent.height() - usedHeight);
+ $chat.addClass('chat-on');
+
+ $chatMessages.scrollToBottom();
+ });
+
+ $window.trigger('resize');
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/components/file-manager.js b/src/js/components/file-manager.js
new file mode 100644
index 00000000..6bc23739
--- /dev/null
+++ b/src/js/components/file-manager.js
@@ -0,0 +1,26 @@
+(function ($) {
+
+ $.fn.fileManager = function () {
+ return this.each(function () {
+ var $element = $(this);
+ var $input = $('').attr('type', 'file');
+
+ $input.on('change', function () {
+ var file = $input.get(0).files[0];
+
+ if (file) {
+ $.fn.fileManager.validate(file, $element);
+
+ $.fn.fileManager.read(file, function () {
+ $element.trigger('file:change', file);
+ });
+ }
+ });
+
+ $element.on('click', function () {
+ $input.trigger('click');
+ });
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/components/file-manager/file-manager-reader.js b/src/js/components/file-manager/file-manager-reader.js
new file mode 100644
index 00000000..fca4908b
--- /dev/null
+++ b/src/js/components/file-manager/file-manager-reader.js
@@ -0,0 +1,14 @@
+(function ($) {
+
+ $.fn.fileManager.read = function (file, callback) {
+ var reader = new FileReader();
+
+ reader.readAsDataURL(file);
+
+ reader.onload = function (e) {
+ file.dataURL = e.target.result;
+ callback();
+ };
+ };
+
+})(jQuery);
diff --git a/src/js/components/file-manager/file-manager-validate.js b/src/js/components/file-manager/file-manager-validate.js
new file mode 100644
index 00000000..d4dd2453
--- /dev/null
+++ b/src/js/components/file-manager/file-manager-validate.js
@@ -0,0 +1,18 @@
+(function ($) {
+
+ $.fn.fileManager.validate = function (file, $settings) {
+ var maxsize = $settings.attr('data-maxsize');
+ var type = $settings.attr('data-type');
+
+ file.errors = [];
+
+ if (!$.fn.fileManager.validate.maxsize(file, maxsize)) {
+ file.errors.push('maxsize');
+ }
+
+ if (!$.fn.fileManager.validate.type(file, type)) {
+ file.errors.push('type');
+ }
+ };
+
+})(jQuery);
diff --git a/src/js/components/file-manager/validators/file-manager-maxsize.js b/src/js/components/file-manager/validators/file-manager-maxsize.js
new file mode 100644
index 00000000..f1b719d3
--- /dev/null
+++ b/src/js/components/file-manager/validators/file-manager-maxsize.js
@@ -0,0 +1,21 @@
+(function ($) {
+
+ var regex = /^(\d*\.?\d+)(B|KB|MB|GB)?$/gi;
+ var exponentOf = { B: 0, KB: 1, MB: 2, GB: 3 };
+
+ function toBytes(size, unit) {
+ return Number(size) * Math.pow(1024, exponentOf[unit]);
+ }
+
+ $.fn.fileManager.validate.maxsize = function (file, maxsize) {
+ if (!maxsize) return true;
+ if (!maxsize.match(regex)) return false;
+
+ var matches = regex.exec(maxsize);
+ var size = matches[1];
+ var unit = matches[2];
+
+ return file.size <= toBytes(size, unit);
+ };
+
+})(jQuery);
diff --git a/src/js/components/file-manager/validators/file-manager-type.js b/src/js/components/file-manager/validators/file-manager-type.js
new file mode 100644
index 00000000..60970fe9
--- /dev/null
+++ b/src/js/components/file-manager/validators/file-manager-type.js
@@ -0,0 +1,10 @@
+(function ($) {
+
+ $.fn.fileManager.validate.type = function (file, type) {
+ if (!type) return true;
+
+ var pattern = '^' + type.replaceAll(',', '|') + '$';
+ return new RegExp(pattern).test(file.type);
+ };
+
+})(jQuery);
diff --git a/src/js/components/input-suggestion/input-suggestion-change.js b/src/js/components/input-suggestion/input-suggestion-change.js
index 166c695d..cecf8e37 100644
--- a/src/js/components/input-suggestion/input-suggestion-change.js
+++ b/src/js/components/input-suggestion/input-suggestion-change.js
@@ -21,7 +21,7 @@
var key = e.keyCode || e.which;
var keyPressed = keyboard(key);
- if (keyPressed.isEnter()) {
+ if (keyPressed.isEnter) {
var $ativeItem = $items.filter('.active');
if ($ativeItem.length) {
diff --git a/src/js/components/input-suggestion/input-suggestion-select.js b/src/js/components/input-suggestion/input-suggestion-select.js
index defc0230..b8396ea2 100644
--- a/src/js/components/input-suggestion/input-suggestion-select.js
+++ b/src/js/components/input-suggestion/input-suggestion-select.js
@@ -29,7 +29,7 @@
var key = e.keyCode || e.which;
var keyPressed = keyboard(key);
- if (keyPressed.isEscape()) {
+ if (keyPressed.isEscape) {
hide();
}
})
@@ -37,7 +37,7 @@
var key = e.keyCode || e.which;
var keyPressed = keyboard(key);
- if (keyPressed.isArrowUp() || keyPressed.isArrowDown()) {
+ if (keyPressed.isArrowUp || keyPressed.isArrowDown) {
e.preventDefault();
if (!$suggestion.is('.open')) {
@@ -47,7 +47,7 @@
var $currentItem = $items.children('.active');
- if (keyPressed.isArrowDown()) {
+ if (keyPressed.isArrowDown) {
if ($currentItem.is(':last-child')) {
return;
}
@@ -60,7 +60,7 @@
}
}
- if (keyPressed.isArrowUp()) {
+ if (keyPressed.isArrowUp) {
if ($currentItem.is(':first-child')) {
return;
}
diff --git a/src/js/events/scroll.js b/src/js/events/scroll.js
new file mode 100644
index 00000000..4b193ee4
--- /dev/null
+++ b/src/js/events/scroll.js
@@ -0,0 +1,12 @@
+(function ($) {
+
+ $.fn.scrollToBottom = function () {
+ return this.each(function () {
+ var $element = $(this);
+ var scrollHeight = $element.prop('scrollHeight');
+
+ $element.scrollTop(scrollHeight);
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/init.js b/src/js/init.js
index c7b1769e..5ec51843 100644
--- a/src/js/init.js
+++ b/src/js/init.js
@@ -1,7 +1,10 @@
$(function () {
$('input').typing();
$('.as-input').asInput();
+ $('.chat').chat();
+ $('.modal-calendar').calendar();
$('[data-toggle="popover"]').popover();
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="suggestion"]').suggestion();
+ $('[data-toggle="file-manager"]').fileManager();
});
diff --git a/src/js/types/date.js b/src/js/types/date.js
new file mode 100644
index 00000000..99d15ff5
--- /dev/null
+++ b/src/js/types/date.js
@@ -0,0 +1,32 @@
+(function () {
+
+ Date.prototype.addDays = function (days) {
+ var date = new Date(this.getTime());
+ date.setDate(this.getDate() + days);
+
+ return date;
+ };
+
+ Date.prototype.addMonths = function (months) {
+ var year = this.getFullYear();
+ var month = this.getMonth() + months;
+ var date = new Date(year, month, 1);
+ var lastDate = new Date(year, month + 1, 0);
+
+ if (this.getDate() > lastDate.getDate()) {
+ date.setDate(lastDate.getDate());
+ } else {
+ date.setDate(this.getDate());
+ }
+
+ return date;
+ };
+
+ Date.prototype.addYears = function (years) {
+ var date = new Date(this.getTime());
+ date.setFullYear(this.getFullYear() + years);
+
+ return date;
+ };
+
+})();
diff --git a/src/js/types/keyboard.js b/src/js/types/keyboard.js
index 8ba592d4..53b69756 100644
--- a/src/js/types/keyboard.js
+++ b/src/js/types/keyboard.js
@@ -1,21 +1,19 @@
-(function() {
- window.keyboard = function(key) {
- this.isArrowDown = function() {
- return key === 40;
- };
+(function () {
+ var numberRegex = /\d/;
+ var letterRegex = /[a-zA-Z]/;
- this.isArrowUp = function() {
- return key === 38;
- };
+ window.keyboard = function (keyCode) {
+ var char = String.fromCharCode(keyCode);
- this.isEnter = function() {
- return key === 13;
+ return {
+ isArrowDown: keyCode === 40,
+ isArrowUp: keyCode === 38,
+ isBackspace: keyCode === 8,
+ isDelete: keyCode === 46 || keyCode === 63272, /* Safari */
+ isEnter: keyCode === 13,
+ isEscape: keyCode === 27,
+ isLetter: letterRegex.test(char),
+ isNumber: numberRegex.test(char)
};
-
- this.isEscape = function() {
- return key === 27;
- };
-
- return this;
};
})();
diff --git a/src/js/types/string.js b/src/js/types/string.js
index 8b9708e6..706467f8 100644
--- a/src/js/types/string.js
+++ b/src/js/types/string.js
@@ -1,11 +1,18 @@
(function () {
- String.prototype.contains = function (str) {
- return new RegExp(str, "i").test(this);
- };
+ if (!String.prototype.startsWith) {
+ String.prototype.startsWith = function (searchString, position) {
+ position = position || 0;
+ return this.indexOf(searchString, position) === position;
+ };
+ }
- String.prototype.replaceAll = function (search, replacement) {
- return this.replace(new RegExp(search, 'g'), replacement);
- };
+ String.prototype.contains = function (str) {
+ return new RegExp(str, "i").test(this);
+ };
+
+ String.prototype.replaceAll = function (search, replacement) {
+ return this.replace(new RegExp(search, 'g'), replacement);
+ };
})();
diff --git a/src/scss/admin4b.scss b/src/scss/admin4b.scss
index 641ead06..1c77889b 100644
--- a/src/scss/admin4b.scss
+++ b/src/scss/admin4b.scss
@@ -17,6 +17,10 @@
@import 'layout/sign/form-sign';
@import 'layout/sign/page-sign';
+@import 'components/breadcrumb';
+@import 'components/calendar';
+@import 'components/camera';
+@import 'components/chat';
@import 'components/label';
@import 'components/callout';
@import 'components/checkbox';
diff --git a/src/scss/components/_breadcrumb.scss b/src/scss/components/_breadcrumb.scss
new file mode 100644
index 00000000..23ed389e
--- /dev/null
+++ b/src/scss/components/_breadcrumb.scss
@@ -0,0 +1,4 @@
+.breadcrumb
+{
+ @include crossbrowser-border-radius(0);
+}
diff --git a/src/scss/components/_calendar.scss b/src/scss/components/_calendar.scss
new file mode 100644
index 00000000..e2d3f85e
--- /dev/null
+++ b/src/scss/components/_calendar.scss
@@ -0,0 +1,137 @@
+.modal.modal-calendar .modal-dialog
+{
+ max-width: 20rem;
+
+ .modal-content
+ {
+ .modal-header,
+ .modal-body,
+ .modal-footer
+ {
+ border-width: 0;
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
+ }
+
+ .modal-header
+ {
+ .input-group
+ {
+ height: auto;
+ width: auto;
+
+ .btn,
+ .form-control
+ {
+ font-size: 14pt;
+ padding: .9375rem .3125rem 0 .3125rem;
+
+ &.btn-link
+ {
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
+ }
+ }
+
+ .form-control
+ {
+ border: none;
+ display: inline-block;
+ text-align: center;
+ width: 3.75rem;
+ @include crossbrowser-box-shadow(none);
+ @include crossbrowser-flex(0 1 auto);
+ }
+
+ .btn.dropdown-toggle
+ {
+ border: none;
+ background: $bscolors-white;
+ color: $bscolors-gray-700;
+ @include crossbrowser-box-shadow(none);
+
+ &::after
+ {
+ display:none
+ }
+ }
+ }
+ }
+
+ .modal-footer
+ {
+ justify-content: center;
+ @include crossbrowser-align-items(center);
+ }
+ }
+}
+
+table.table-calendar
+{
+ margin-bottom: .5rem;
+ text-align: center;
+ width: 100%;
+
+ th
+ {
+ font-weight: normal;
+ padding-bottom: .9375rem;
+
+ &:first-child
+ {
+ color: $bscolors-red;
+ }
+ }
+
+ td
+ {
+ color: $bscolors-gray-500;
+ padding: .3125rem;
+
+ a
+ {
+ color: $bscolors-gray-700;
+ display: block;
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ z-index: 1;
+
+ &::before
+ {
+ border: .0625rem solid $bscolors-blue;
+ content: " ";
+ display: none;
+ position: absolute;
+ top: -.25rem;
+ left: -.0625rem;
+ width: 2rem;
+ height: 2rem;
+ z-index: -1;
+ @include crossbrowser-border-radius(50%);
+ }
+
+ &:hover,
+ &.active
+ {
+ color: $bscolors-white !important;
+
+ &::before
+ {
+ background: $bscolors-blue;
+ display: block;
+ }
+ }
+
+ &.today::before
+ {
+ display: block;
+ }
+
+ &.sunday
+ {
+ color: $bscolors-red;
+ }
+ }
+ }
+}
diff --git a/src/scss/components/_callout.scss b/src/scss/components/_callout.scss
index fde6b204..d4f0c50e 100644
--- a/src/scss/components/_callout.scss
+++ b/src/scss/components/_callout.scss
@@ -1,8 +1,7 @@
.callout
{
padding: 1.25rem;
- margin-top: 1.25rem;
- margin-bottom: 1.25rem;
+ margin-bottom: 1rem;
border: .0625rem solid #eee;
border-left-width: .25rem;
@include crossbrowser-border-radius(.25rem);
diff --git a/src/scss/components/_camera.scss b/src/scss/components/_camera.scss
new file mode 100644
index 00000000..32146fe2
--- /dev/null
+++ b/src/scss/components/_camera.scss
@@ -0,0 +1,7 @@
+.camera
+{
+ display: block;
+ width: 100%;
+ @include crossbrowser-transform(scale(-1, 1));
+ @include crossbrowser-filter(FlipH);
+}
diff --git a/src/scss/components/_chat.scss b/src/scss/components/_chat.scss
new file mode 100644
index 00000000..833e7ece
--- /dev/null
+++ b/src/scss/components/_chat.scss
@@ -0,0 +1,139 @@
+@include crossbrowser-keyframes(ballon)
+{
+ 0%
+ {
+ @include crossbrowser-transform(scale(0));
+ }
+ 100%
+ {
+ @include crossbrowser-transform(scale(1));
+ }
+}
+
+.chat
+{
+ display: none;
+ padding: 0;
+ width: 100%;
+
+ &.chat-on /* Set by JS after calculate the remaining height */
+ {
+ display: table;
+ }
+
+ .chat-body,
+ .chat-footer
+ {
+ display: table-row;
+ }
+
+ .chat-body
+ {
+ height: 100%;
+
+ .chat-content
+ {
+ display: table-cell;
+ height: 100%;
+
+ .chat-messages
+ {
+ height: 100%;
+ position: relative;
+ overflow: auto;
+
+ .container-fluid /* Correct height for IE and Firefox */
+ {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
+
+ .message-sent,
+ .message-reply
+ {
+ margin-bottom: 1rem;
+
+ img
+ {
+ vertical-align: top;
+ width: 3rem;
+ @include crossbrowser-border-radius(50%);
+ }
+
+ p
+ {
+ display: inline-block;
+ margin: 0;
+ padding: .625rem 1.25rem;
+ text-align: left;
+ max-width: 75%;
+ @include crossbrowser-animation(ballon .2s linear);
+ @include crossbrowser-border-radius(1.25rem);
+ }
+ }
+
+ .message-sent
+ {
+ img
+ {
+ margin-right: .375rem;
+ }
+
+ p
+ {
+ background-color: lighten($flatuicolors-midnight-blue, 15%);
+ color: $bscolors-white;
+ transform-origin: top left;
+ }
+
+ small
+ {
+ color: lighten($flatuicolors-midnight-blue, 50%);
+ }
+ }
+
+ .message-reply
+ {
+ text-align: right;
+
+ img
+ {
+ float: right;
+ margin-left: .625rem;
+ }
+
+ p
+ {
+ background-color: $bscolors-gray-400;
+ transform-origin: top right;
+ }
+
+ small
+ {
+ color: $bscolors-gray-600;
+ }
+ }
+ }
+ }
+ }
+
+ .chat-footer
+ {
+ .btn,
+ .form-control
+ {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ @include crossbrowser-border-radius(0);
+ }
+
+ .btn
+ {
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
+ }
+ }
+}
diff --git a/src/scss/components/_checkbox.scss b/src/scss/components/_checkbox.scss
index 220b8488..5c654722 100644
--- a/src/scss/components/_checkbox.scss
+++ b/src/scss/components/_checkbox.scss
@@ -131,8 +131,8 @@ label.checkbox
&:after
{
- left: .5rem;
- top: .25rem;
+ left: .57rem;
+ top: .3rem;
width: .4375rem;
height: .75rem;
border-width: 0 .1875rem .1875rem 0;
diff --git a/src/scss/components/_radio-button.scss b/src/scss/components/_radio-button.scss
index 8fe005e1..26ab6337 100644
--- a/src/scss/components/_radio-button.scss
+++ b/src/scss/components/_radio-button.scss
@@ -36,6 +36,7 @@
label.radio
{
margin-bottom: 0;
+ text-align: left;
@include crossbrowser-align-items(center);
@include crossbrowser-display-inline-flex();
@include crossbrowser-user-select(none);
diff --git a/src/scss/highlight/_css.scss b/src/scss/highlight/_css.scss
index f0db0625..fdbbf545 100644
--- a/src/scss/highlight/_css.scss
+++ b/src/scss/highlight/_css.scss
@@ -1,24 +1,55 @@
-.css .hljs-keyword
+.source-code
{
- color: $highlight-colors-keyword;
-}
+ .css .hljs-keyword
+ {
+ color: $highlight-light-keyword;
+ }
-.css .hljs-selector-class
-{
- color: $highlight-colors-class;
-}
+ .css .hljs-selector-class
+ {
+ color: $highlight-light-class;
+ }
-.css .hljs-attribute
-{
- color: $highlight-colors-attribute;
-}
+ .css .hljs-attribute
+ {
+ color: $highlight-light-attribute;
+ }
-.css .hljs-comment
-{
- color: $highlight-colors-comment;
+ .css .hljs-comment
+ {
+ color: $highlight-light-comment;
+ }
+
+ .css .hljs-number
+ {
+ color: $highlight-light-number;
+ }
}
-.css .hljs-number
+.source-code.dark
{
- color: $highlight-colors-number;
+ .css .hljs-keyword
+ {
+ color: $highlight-dark-keyword;
+ }
+
+ .css .hljs-selector-class
+ {
+ color: $highlight-dark-class;
+ }
+
+ .css .hljs-attribute
+ {
+ color: $highlight-dark-attribute;
+ }
+
+ .css .hljs-comment
+ {
+ color: $highlight-dark-comment;
+ }
+
+ .css .hljs-number
+ {
+ color: $highlight-dark-number;
+ }
}
diff --git a/src/scss/highlight/_html.scss b/src/scss/highlight/_html.scss
index 3478f197..29218f04 100644
--- a/src/scss/highlight/_html.scss
+++ b/src/scss/highlight/_html.scss
@@ -1,25 +1,57 @@
-.html .hljs-meta
+.source-code
{
- color: $highlight-colors-namespace;
-}
+ .html .hljs-meta
+ {
+ color: $highlight-light-namespace;
+ }
-.html .hljs-section,
-.html .hljs-tag
-{
- color: $highlight-colors-keyword;
-}
+ .html .hljs-section,
+ .html .hljs-tag
+ {
+ color: $highlight-light-keyword;
+ }
-.html .hljs-tag .hljs-attr
-{
- color: $highlight-colors-attribute;
-}
+ .html .hljs-tag .hljs-attr
+ {
+ color: $highlight-light-attribute;
+ }
-.html .hljs-tag .hljs-string
-{
- color: $highlight-colors-string;
+ .html .hljs-tag .hljs-string
+ {
+ color: $highlight-light-string;
+ }
+
+ .html .hljs-comment
+ {
+ color: $highlight-light-comment;
+ }
}
-.html .hljs-comment
+.source-code.dark
{
- color: $highlight-colors-comment;
+ .html .hljs-meta
+ {
+ color: $highlight-dark-namespace;
+ }
+
+ .html .hljs-section,
+ .html .hljs-tag
+ {
+ color: $highlight-dark-keyword;
+ }
+
+ .html .hljs-tag .hljs-attr
+ {
+ color: $highlight-dark-attribute;
+ }
+
+ .html .hljs-tag .hljs-string
+ {
+ color: $highlight-dark-string;
+ }
+
+ .html .hljs-comment
+ {
+ color: $highlight-dark-comment;
+ }
}
diff --git a/src/scss/highlight/_js.scss b/src/scss/highlight/_js.scss
index 3ab4b650..a9037852 100644
--- a/src/scss/highlight/_js.scss
+++ b/src/scss/highlight/_js.scss
@@ -1,14 +1,45 @@
-.js .hljs-string
+.source-code
{
- color: $highlight-colors-string;
-}
+ .js .hljs-number
+ {
+ color: $highlight-light-number;
+ }
-.js .hljs-keyword
-{
- color: $highlight-colors-keyword;
+ .js .hljs-string
+ {
+ color: $highlight-light-string;
+ }
+
+ .js .hljs-keyword
+ {
+ color: $highlight-light-keyword;
+ }
+
+ .js .hljs-comment
+ {
+ color: $highlight-light-comment;
+ }
}
-.js .hljs-comment
+.source-code.dark
{
- color: $highlight-colors-comment;
+ .js .hljs-number
+ {
+ color: $highlight-dark-number;
+ }
+
+ .js .hljs-string
+ {
+ color: $highlight-dark-string;
+ }
+
+ .js .hljs-keyword
+ {
+ color: $highlight-dark-keyword;
+ }
+
+ .js .hljs-comment
+ {
+ color: $highlight-dark-comment;
+ }
}
diff --git a/src/scss/highlight/_json.scss b/src/scss/highlight/_json.scss
index 27d70936..b53434ad 100644
--- a/src/scss/highlight/_json.scss
+++ b/src/scss/highlight/_json.scss
@@ -1,19 +1,45 @@
-.json .hljs-attr
+.source-code
{
- color: $highlight-colors-attribute;
-}
+ .json .hljs-attr
+ {
+ color: $highlight-light-attribute;
+ }
-.json .hljs-string
-{
- color: $highlight-colors-string;
-}
+ .json .hljs-string
+ {
+ color: $highlight-light-string;
+ }
-.json .hljs-literal,
-{
- color: $highlight-colors-keyword;
+ .json .hljs-literal,
+ {
+ color: $highlight-light-keyword;
+ }
+
+ .json .hljs-number
+ {
+ color: $highlight-light-number;
+ }
}
-.json .hljs-number
+.source-code.dark
{
- color: $highlight-colors-number;
+ .json .hljs-attr
+ {
+ color: $highlight-dark-attribute;
+ }
+
+ .json .hljs-string
+ {
+ color: $highlight-dark-string;
+ }
+
+ .json .hljs-literal,
+ {
+ color: $highlight-dark-keyword;
+ }
+
+ .json .hljs-number
+ {
+ color: $highlight-dark-number;
+ }
}
diff --git a/src/scss/highlight/_source-code.scss b/src/scss/highlight/_source-code.scss
index 96adac52..95475837 100644
--- a/src/scss/highlight/_source-code.scss
+++ b/src/scss/highlight/_source-code.scss
@@ -1,36 +1,61 @@
.source-code
{
- $bg-color: #222d32;
- $text-color: #fff;
-
margin-bottom: 1rem;
.nav-tabs a
{
- color: darken($text-color, 50%);
+ color: $highlight-light-editor-link;
font-size: .95rem;
text-decoration: none;
padding: .75rem;
+ padding-bottom: 0;
@include crossbrowser-transition(color .2s ease);
&.active,
+ &:active,
&:hover
{
- color: $text-color;
+ color: darken($highlight-light-editor-link, 30%);
}
}
pre,
.nav-tabs
{
- background: $bg-color;
+ background: $highlight-light-editor-bg;
border: none;
}
pre
{
- color: $highlight-colors-literal;
margin: 0;
overflow-x: auto;
+ padding: .75rem;
+ }
+}
+
+.source-code.dark
+{
+ .nav-tabs a
+ {
+ color: darken($highlight-dark-editor-link, 50%);
+
+ &.active,
+ &:active,
+ &:hover
+ {
+ color: $highlight-dark-editor-link;
+ }
+ }
+
+ pre,
+ .nav-tabs
+ {
+ background: $highlight-dark-editor-bg;
+ }
+
+ pre
+ {
+ color: $highlight-dark-literal;
}
}
diff --git a/src/scss/layout/_app.scss b/src/scss/layout/_app.scss
index e7df751f..ecc15003 100644
--- a/src/scss/layout/_app.scss
+++ b/src/scss/layout/_app.scss
@@ -85,3 +85,17 @@ body
}
}
}
+
+@media print
+{
+ .app .app-body
+ {
+ position: relative;
+ height: auto;
+
+ .app-sidebar
+ {
+ display: none;
+ }
+ }
+}
diff --git a/src/scss/layout/sign/_page-sign.scss b/src/scss/layout/sign/_page-sign.scss
index 9fbcbe5c..47a691e5 100644
--- a/src/scss/layout/sign/_page-sign.scss
+++ b/src/scss/layout/sign/_page-sign.scss
@@ -4,5 +4,4 @@
padding-top: 2.45rem;
padding-bottom: 2.45rem;
@include crossbrowser-align-items(center);
- @include crossbrowser-display-flex();
}
diff --git a/src/scss/palette/_highlight-colors.scss b/src/scss/palette/_highlight-colors.scss
index 405f8b21..c509e8d8 100644
--- a/src/scss/palette/_highlight-colors.scss
+++ b/src/scss/palette/_highlight-colors.scss
@@ -1,8 +1,21 @@
-$highlight-colors-attribute: #9cdcfe;
-$highlight-colors-class: #0a8;
-$highlight-colors-comment: #999;
-$highlight-colors-keyword: #569cd6;
-$highlight-colors-literal: #e8e8e8;
-$highlight-colors-namespace: #099;
-$highlight-colors-number: #d7ba7d;
-$highlight-colors-string: #ce9178;
+$highlight-light-attribute: #4f9fcf;
+$highlight-light-editor-bg: #efefef;
+$highlight-light-editor-link: #868e96;
+$highlight-light-class: #0a8;
+$highlight-light-comment: #999;
+$highlight-light-keyword: #2f6f9f;
+$highlight-light-literal: #212529;
+$highlight-light-namespace: #099;
+$highlight-light-number: #f5871f;
+$highlight-light-string: #d44950;
+
+$highlight-dark-attribute: #9cdcfe;
+$highlight-dark-editor-bg: #222d32;
+$highlight-dark-editor-link: #fff;
+$highlight-dark-class: #0a8;
+$highlight-dark-comment: #999;
+$highlight-dark-keyword: #569cd6;
+$highlight-dark-literal: #e8e8e8;
+$highlight-dark-namespace: #099;
+$highlight-dark-number: #d7ba7d;
+$highlight-dark-string: #ce9178;
diff --git a/src/scss/utilities/_cross-browser.scss b/src/scss/utilities/_cross-browser.scss
index 9a06789b..79e3c362 100644
--- a/src/scss/utilities/_cross-browser.scss
+++ b/src/scss/utilities/_cross-browser.scss
@@ -96,6 +96,21 @@
display: inline-flex;
}
+@mixin crossbrowser-filter($filter)
+{
+ -ms-filter: "#{$filter}";
+ filter: $filter;
+}
+
+@mixin crossbrowser-flex($flex...)
+{
+ -webkit-box-flex: $flex;
+ -moz-box-flex: $flex;
+ -webkit-flex: $flex;
+ -ms-flex: $flex;
+ flex: $flex;
+}
+
@mixin crossbrowser-input-placeholder($color)
{
&::-webkit-input-placeholder
@@include('includes/code-examples/components/spinner/spinner-sizes.html')@@include('includes/code-examples/layout/spinner/spinner-sizes.html')
- @@include('includes/code-examples/components/spinner/spinner-block.html')
+ @@include('includes/code-examples/layout/spinner/spinner-block.html')
- @@include('includes/code-examples/components/spinner/spinner-block.js')
+ @@include('includes/code-examples/layout/spinner/spinner-block.js')
diff --git a/src/html/pages/components/callout.html b/src/html/pages/reference/callout.html
similarity index 92%
rename from src/html/pages/components/callout.html
rename to src/html/pages/reference/callout.html
index c104ec57..331b4704 100644
--- a/src/html/pages/components/callout.html
+++ b/src/html/pages/reference/callout.html
@@ -2,7 +2,7 @@
@@ -33,7 +33,7 @@ Critital
Source code
- @@include('includes/code-examples/components/callout/callout-colors.html')
+ @@include('includes/code-examples/reference/callout/callout-colors.html')
diff --git a/src/html/pages/reference/code-highlight.html b/src/html/pages/reference/code-highlight.html
new file mode 100644
index 00000000..71ce01df
--- /dev/null
+++ b/src/html/pages/reference/code-highlight.html
@@ -0,0 +1,102 @@
+
+
+
+
+
+ Code highlight
+
+
+ Code highlight is a feature with predefined styles for HTML, CSS, JavaScript and JSON.
+ These styles are a customization for the languages supported by the library
+ highlight.js.
+
+
+ You do not need the entire template to work with code highlight.
+ You only need the highlight.js library and
+ the admin4b-highlight.min.css file present in the NPM package.
+
+ See the basic example:
+
+
+ Source code
+
+
+ @@include('includes/code-examples/reference/code-highlight/how-to-use.html')
+
+
+
+ Themes
+
+
+ Light theme (default):
+
+
+
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.html')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.css')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.js')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.json')
+
+
+
+
+
+ Source code
+
+
+ @@include('includes/code-examples/reference/code-highlight/theme-light.html')
+
+
+
+ Dark theme:
+
+
+
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.html')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.css')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.js')
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.json')
+
+
+
+
+
+ Source code
+
+
+ @@include('includes/code-examples/reference/code-highlight/theme-dark.html')
+
+
+
+
diff --git a/src/js/components/calendar.js b/src/js/components/calendar.js
new file mode 100644
index 00000000..b25d6051
--- /dev/null
+++ b/src/js/components/calendar.js
@@ -0,0 +1,30 @@
+(function ($) {
+
+ $.fn.calendar = function (event, date) {
+ var $modalCalendar = $(this);
+
+ if (event === 'date' && !date) {
+ return $modalCalendar.prop('date');
+ }
+
+ if (event === 'query:date' && !date) {
+ return $modalCalendar.prop('query');
+ }
+
+ return this.each(function () {
+ date = date instanceof Date ? date : $modalCalendar.prop('query') || new Date();
+ date.setHours(0, 0, 0, 0);
+
+ switch (event) {
+ case 'date': $.fn.calendar.change.apply(this, [date]); break;
+ case 'query:date': $.fn.calendar.query.apply(this, [date]); break;
+ case 'query:nextMonth': $.fn.calendar.query.apply(this, [date.addMonths(1)]); break;
+ case 'query:nextYear': $.fn.calendar.query.apply(this, [date.addYears(1)]); break;
+ case 'query:previousMonth': $.fn.calendar.query.apply(this, [date.addMonths(-1)]); break;
+ case 'query:previousYear': $.fn.calendar.query.apply(this, [date.addYears(-1)]); break;
+ default: $.fn.calendar.modal.apply(this, [date]); break;
+ }
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/components/calendar/calendar-change.js b/src/js/components/calendar/calendar-change.js
new file mode 100644
index 00000000..77820428
--- /dev/null
+++ b/src/js/components/calendar/calendar-change.js
@@ -0,0 +1,13 @@
+(function ($) {
+
+ $.fn.calendar.change = function (date) {
+ var $modalCalendar = $(this);
+
+ $modalCalendar.prop('date', date);
+
+ $.fn.calendar.query.apply($modalCalendar, [date]);
+
+ $modalCalendar.trigger('calendar:change', date);
+ };
+
+})(jQuery);
diff --git a/src/js/components/calendar/calendar-modal.js b/src/js/components/calendar/calendar-modal.js
new file mode 100644
index 00000000..c2b26d42
--- /dev/null
+++ b/src/js/components/calendar/calendar-modal.js
@@ -0,0 +1,93 @@
+(function ($) {
+
+ $.fn.calendar.modal = function (date) {
+ var $modalCalendar = $(this);
+ var $modalHeader = $modalCalendar.find('.modal-header');
+ var $modalBody = $modalCalendar.find('.modal-body');
+ var $dropdownMonths = $modalHeader.find('.dropdown-toggle');
+ var $months = $modalHeader.find('.dropdown-menu');
+ var $previousMonth = $modalHeader.find('[data-calendar-month=previous]');
+ var $nextMonth = $modalHeader.find('[data-calendar-month=next]');
+ var $year = $modalHeader.find('.form-control');
+ var $goToToday = $modalBody.find('[data-calendar-link=today]');
+ var $goToSelected = $modalBody.find('[data-calendar-link=selected]');
+
+ $modalCalendar.on('calendar:each', function (e, date) {
+ var selectedDate = $modalCalendar.calendar('date');
+ var today = new Date();
+ today.setHours(0, 0, 0, 0);
+
+ $(e.relatedTarget)
+ .toggleClass('active', !!selectedDate && date.getTime() === selectedDate.getTime())
+ .toggleClass('today', date.getTime() === today.getTime())
+ .toggleClass('sunday', date.getDay() === 0);
+ });
+
+ $modalCalendar.on('calendar:query', function (e, date) {
+ var month = date.getMonth();
+ var $month = $($months.find('a').get(month));
+
+ $dropdownMonths.prop('month', date.getMonth()).text($month.text());
+ $year.val(date.getFullYear());
+ });
+
+ $months.find('a').on('click', function (e) {
+ var year = Number($year.val());
+ var month = Number($(this).attr('data-calendar-month'));
+
+ $modalCalendar.calendar('query:date', new Date(year, month, 1));
+
+ e.preventDefault();
+ });
+
+ $nextMonth.on('click', function () {
+ $modalCalendar.calendar('query:nextMonth');
+ });
+
+ $previousMonth.on('click', function () {
+ $modalCalendar.calendar('query:previousMonth');
+ });
+
+ $goToToday.on('click', function () {
+ $modalCalendar.calendar('query:date', new Date());
+ });
+
+ $goToSelected.on('click', function () {
+ var date = $modalCalendar.calendar('date');
+ $modalCalendar.calendar('query:date', date);
+ });
+
+ $year
+ .on('keydown', function (e) {
+ var keyCode = e.keyCode || e.which;
+ var keyPressed = keyboard(keyCode);
+
+ if (keyPressed.isArrowUp) {
+ $modalCalendar.calendar('query:nextYear');
+ }
+
+ if (keyPressed.isArrowDown) {
+ $modalCalendar.calendar('query:previousYear');
+ }
+ })
+ .on('keypress', function (e) {
+ var keyCode = e.keyCode || e.which;
+ var keyPressed = keyboard(keyCode);
+
+ if (!keyPressed.isNumber) {
+ e.preventDefault();
+ }
+ })
+ .on('input', function () {
+ var val = $year.val();
+
+ if (/^\d{4}$/.test(val)) {
+ var year = Number(val);
+ var month = Number($dropdownMonths.prop('month'));
+
+ $modalCalendar.calendar('query:date', new Date(year, month, 1));
+ }
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/components/calendar/calendar-period.js b/src/js/components/calendar/calendar-period.js
new file mode 100644
index 00000000..b604cf3d
--- /dev/null
+++ b/src/js/components/calendar/calendar-period.js
@@ -0,0 +1,21 @@
+(function ($) {
+
+ $.fn.calendar.period = function (year, month) {
+ var firstDateInMonth = new Date(year, month, 1);
+ var lastDateInMonth = new Date(year, month + 1, 0);
+
+ var firstDate = new Date(firstDateInMonth);
+ firstDate.setDate(firstDateInMonth.getDate() - firstDateInMonth.getDay());
+
+ var lastDate = new Date(lastDateInMonth);
+ lastDate.setDate(lastDateInMonth.getDate() + (6 - lastDateInMonth.getDay()));
+
+ return {
+ firstDateInMonth: firstDateInMonth,
+ lastDateInMonth: lastDateInMonth,
+ firstDate: firstDate,
+ lastDate: lastDate
+ };
+ };
+
+})(jQuery);
diff --git a/src/js/components/calendar/calendar-query.js b/src/js/components/calendar/calendar-query.js
new file mode 100644
index 00000000..17b807a2
--- /dev/null
+++ b/src/js/components/calendar/calendar-query.js
@@ -0,0 +1,49 @@
+(function ($) {
+
+ $.fn.calendar.query = function (date) {
+ var $modalCalendar = $(this);
+ var $table = $modalCalendar.find('.table-calendar');
+ var $tbody = $('');
+ var period = $.fn.calendar.period(date.getFullYear(), date.getMonth());
+ var currentDate = period.firstDate;
+
+ while (currentDate <= period.lastDate) {
+ var $tr = $('');
+
+ for (var weekDay = 0; weekDay < 7; weekDay++) {
+ var $td = $('');
+ var calendarEach = $.Event('calendar:each');
+
+ if (currentDate.getMonth() === period.firstDateInMonth.getMonth()) {
+ var $a = $('')
+ .attr('href', '#')
+ .prop('date', currentDate)
+ .text(currentDate.getDate())
+ .on('click', function (e) {
+ $.fn.calendar.change.apply($modalCalendar, [$(this).prop('date')]);
+ e.preventDefault();
+ });
+
+ calendarEach.relatedTarget = $a.get(0);
+
+ $td.append($a);
+ } else {
+ $td.text(currentDate.getDate());
+ }
+
+ $tr.append($td);
+ $modalCalendar.trigger(calendarEach, currentDate);
+
+ currentDate = currentDate.addDays(1);
+ }
+
+ $tbody.append($tr);
+ }
+
+ $table.find('tbody').remove();
+ $table.append($tbody);
+
+ $modalCalendar.prop('query', date).trigger('calendar:query', date)
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera.js b/src/js/components/camera.js
new file mode 100644
index 00000000..679f81c5
--- /dev/null
+++ b/src/js/components/camera.js
@@ -0,0 +1,13 @@
+(function ($) {
+
+ $.fn.camera = function (event) {
+ return this.each(function () {
+ switch (event) {
+ case 'play': $.fn.camera.play.apply(this); break;
+ case 'stop': $.fn.camera.stop.apply(this); break;
+ case 'snapshot': $.fn.camera.snapshot.apply(this); break;
+ }
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-blob.js b/src/js/components/camera/camera-blob.js
new file mode 100644
index 00000000..05781a35
--- /dev/null
+++ b/src/js/components/camera/camera-blob.js
@@ -0,0 +1,22 @@
+(function ($) {
+
+ $.fn.camera.toBlob = function (dataURL) {
+ var byteString;
+
+ if (dataURL.split(',')[0].indexOf('base64') >= 0) {
+ byteString = atob(dataURL.split(',')[1]);
+ } else {
+ byteString = unescape(dataURL.split(',')[1]);
+ }
+
+ var mimeType = dataURL.split(',')[0].split(':')[1].split(';')[0];
+ var uintArray = new Uint8Array(byteString.length);
+
+ for (var i = 0; i < byteString.length; i++) {
+ uintArray[i] = byteString.charCodeAt(i);
+ }
+
+ return new Blob([uintArray], { type: mimeType });
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-link.js b/src/js/components/camera/camera-link.js
new file mode 100644
index 00000000..8e0a8a3c
--- /dev/null
+++ b/src/js/components/camera/camera-link.js
@@ -0,0 +1,14 @@
+(function ($) {
+
+ $.fn.camera.link = function (video, stream) {
+ if ('srcObject' in video) {
+ video.srcObject = stream;
+ } else if (navigator.mozGetUserMedia) {
+ video.mozSrcObject = stream;
+ } else {
+ var windowURL = window.URL || window.webkitURL || window.mozURL || window.msURL;
+ video.src = windowURL.createObjectURL(stream);
+ }
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-media.js b/src/js/components/camera/camera-media.js
new file mode 100644
index 00000000..1097bc82
--- /dev/null
+++ b/src/js/components/camera/camera-media.js
@@ -0,0 +1,17 @@
+(function ($) {
+
+ navigator.getSupportedUserMedia =
+ navigator.getUserMedia ||
+ navigator.webkitGetUserMedia ||
+ navigator.mozGetUserMedia ||
+ navigator.msGetUserMedia;
+
+ $.fn.camera.isSupported = function () {
+ return !!navigator.getSupportedUserMedia;
+ };
+
+ $.fn.camera.getUserMedia = function (mediaConstraint, onSuccess, onFailure) {
+ return navigator.getSupportedUserMedia(mediaConstraint, onSuccess, onFailure);
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-play.js b/src/js/components/camera/camera-play.js
new file mode 100644
index 00000000..8af4ea16
--- /dev/null
+++ b/src/js/components/camera/camera-play.js
@@ -0,0 +1,36 @@
+(function ($) {
+
+ $.fn.camera.play = function () {
+ var $video = $(this);
+
+ if ($video.prop('playing')) {
+ return;
+ }
+
+ var video = $video.get(0);
+
+ var mediaConstraint = { video: true, audio: false };
+
+ var onSuccess = function (stream) {
+ $.fn.camera.link(video, stream);
+
+ video.play();
+
+ $video.prop('stream', stream);
+ $video.prop('playing', true);
+
+ $video.trigger('camera:play');
+ };
+
+ var onFailure = function (error) {
+ $video.trigger('camera:error', error);
+ };
+
+ if ($.fn.camera.isSupported()) {
+ $.fn.camera.getUserMedia(mediaConstraint, onSuccess, onFailure);
+ } else {
+ $video.trigger('camera:notSupported');
+ }
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-snapshot.js b/src/js/components/camera/camera-snapshot.js
new file mode 100644
index 00000000..a69bb619
--- /dev/null
+++ b/src/js/components/camera/camera-snapshot.js
@@ -0,0 +1,43 @@
+(function ($) {
+
+ var regex = /^(\d+)x(\d+)$/gi;
+
+ function getSize(size) {
+ if (!size || !size.match(regex)) {
+ return { width: 320, height: 240 };
+ }
+
+ var matches = regex.exec(size);
+
+ return { width: matches[1], height: matches[2] };
+ }
+
+ $.fn.camera.snapshot = function () {
+ var $video = $(this);
+
+ if (!$video.prop('playing')) {
+ return;
+ }
+
+ var video = $video.get(0);
+
+ var size = getSize($video.attr('data-size'));
+
+ var canvas = document.createElement('canvas');
+ canvas.width = size.width;
+ canvas.height = size.height;
+
+ var context = canvas.getContext('2d');
+ context.translate(size.width, 0); // 'translate' and 'scale' to flip horizontally
+ context.scale(-1, 1);
+ context.drawImage(video, 0, 0, size.width, size.height);
+
+ var dataURL = canvas.toDataURL();
+ var blob = $.fn.camera.toBlob(dataURL);
+
+ blob.dataURL = dataURL;
+
+ $video.trigger('camera:snapshot', blob);
+ };
+
+})(jQuery);
diff --git a/src/js/components/camera/camera-stop.js b/src/js/components/camera/camera-stop.js
new file mode 100644
index 00000000..1e75c8bf
--- /dev/null
+++ b/src/js/components/camera/camera-stop.js
@@ -0,0 +1,29 @@
+(function ($) {
+
+ $.fn.camera.stop = function () {
+ var $video = $(this);
+
+ if (!$video.prop('playing')) {
+ return;
+ }
+
+ var stream = $video.prop('stream');
+
+ if (stream.getVideoTracks && typeof stream.getVideoTracks === 'function') {
+ var tracks = stream.getVideoTracks();
+
+ if (tracks && tracks[0] && tracks[0].stop) {
+ tracks[0].stop();
+ }
+ } else if (stream.stop) {
+ // Deprecated, may be removed in the near future
+ stream.stop();
+ }
+
+ $video.prop('playing', false);
+ $video.prop('stream', null);
+
+ $video.trigger('camera:stop');
+ };
+
+})(jQuery);
diff --git a/src/js/components/chat.js b/src/js/components/chat.js
new file mode 100644
index 00000000..4a99ef05
--- /dev/null
+++ b/src/js/components/chat.js
@@ -0,0 +1,28 @@
+(function ($) {
+
+ $.fn.chat = function () {
+ return this.each(function () {
+ var $window = $(window);
+ var $appContent = $('.app-content');
+ var $chat = $(this);
+ var $chatMessages = $chat.find('.chat-messages');
+
+ $window.on('resize', function () {
+ var usedHeight = 0;
+
+ $appContent.children().each(function () {
+ if ($(this).is('.chat')) return;
+ usedHeight += $(this).outerHeight(true); // true = include margins
+ });
+
+ $chat.height($appContent.height() - usedHeight);
+ $chat.addClass('chat-on');
+
+ $chatMessages.scrollToBottom();
+ });
+
+ $window.trigger('resize');
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/components/file-manager.js b/src/js/components/file-manager.js
new file mode 100644
index 00000000..6bc23739
--- /dev/null
+++ b/src/js/components/file-manager.js
@@ -0,0 +1,26 @@
+(function ($) {
+
+ $.fn.fileManager = function () {
+ return this.each(function () {
+ var $element = $(this);
+ var $input = $('').attr('type', 'file');
+
+ $input.on('change', function () {
+ var file = $input.get(0).files[0];
+
+ if (file) {
+ $.fn.fileManager.validate(file, $element);
+
+ $.fn.fileManager.read(file, function () {
+ $element.trigger('file:change', file);
+ });
+ }
+ });
+
+ $element.on('click', function () {
+ $input.trigger('click');
+ });
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/components/file-manager/file-manager-reader.js b/src/js/components/file-manager/file-manager-reader.js
new file mode 100644
index 00000000..fca4908b
--- /dev/null
+++ b/src/js/components/file-manager/file-manager-reader.js
@@ -0,0 +1,14 @@
+(function ($) {
+
+ $.fn.fileManager.read = function (file, callback) {
+ var reader = new FileReader();
+
+ reader.readAsDataURL(file);
+
+ reader.onload = function (e) {
+ file.dataURL = e.target.result;
+ callback();
+ };
+ };
+
+})(jQuery);
diff --git a/src/js/components/file-manager/file-manager-validate.js b/src/js/components/file-manager/file-manager-validate.js
new file mode 100644
index 00000000..d4dd2453
--- /dev/null
+++ b/src/js/components/file-manager/file-manager-validate.js
@@ -0,0 +1,18 @@
+(function ($) {
+
+ $.fn.fileManager.validate = function (file, $settings) {
+ var maxsize = $settings.attr('data-maxsize');
+ var type = $settings.attr('data-type');
+
+ file.errors = [];
+
+ if (!$.fn.fileManager.validate.maxsize(file, maxsize)) {
+ file.errors.push('maxsize');
+ }
+
+ if (!$.fn.fileManager.validate.type(file, type)) {
+ file.errors.push('type');
+ }
+ };
+
+})(jQuery);
diff --git a/src/js/components/file-manager/validators/file-manager-maxsize.js b/src/js/components/file-manager/validators/file-manager-maxsize.js
new file mode 100644
index 00000000..f1b719d3
--- /dev/null
+++ b/src/js/components/file-manager/validators/file-manager-maxsize.js
@@ -0,0 +1,21 @@
+(function ($) {
+
+ var regex = /^(\d*\.?\d+)(B|KB|MB|GB)?$/gi;
+ var exponentOf = { B: 0, KB: 1, MB: 2, GB: 3 };
+
+ function toBytes(size, unit) {
+ return Number(size) * Math.pow(1024, exponentOf[unit]);
+ }
+
+ $.fn.fileManager.validate.maxsize = function (file, maxsize) {
+ if (!maxsize) return true;
+ if (!maxsize.match(regex)) return false;
+
+ var matches = regex.exec(maxsize);
+ var size = matches[1];
+ var unit = matches[2];
+
+ return file.size <= toBytes(size, unit);
+ };
+
+})(jQuery);
diff --git a/src/js/components/file-manager/validators/file-manager-type.js b/src/js/components/file-manager/validators/file-manager-type.js
new file mode 100644
index 00000000..60970fe9
--- /dev/null
+++ b/src/js/components/file-manager/validators/file-manager-type.js
@@ -0,0 +1,10 @@
+(function ($) {
+
+ $.fn.fileManager.validate.type = function (file, type) {
+ if (!type) return true;
+
+ var pattern = '^' + type.replaceAll(',', '|') + '$';
+ return new RegExp(pattern).test(file.type);
+ };
+
+})(jQuery);
diff --git a/src/js/components/input-suggestion/input-suggestion-change.js b/src/js/components/input-suggestion/input-suggestion-change.js
index 166c695d..cecf8e37 100644
--- a/src/js/components/input-suggestion/input-suggestion-change.js
+++ b/src/js/components/input-suggestion/input-suggestion-change.js
@@ -21,7 +21,7 @@
var key = e.keyCode || e.which;
var keyPressed = keyboard(key);
- if (keyPressed.isEnter()) {
+ if (keyPressed.isEnter) {
var $ativeItem = $items.filter('.active');
if ($ativeItem.length) {
diff --git a/src/js/components/input-suggestion/input-suggestion-select.js b/src/js/components/input-suggestion/input-suggestion-select.js
index defc0230..b8396ea2 100644
--- a/src/js/components/input-suggestion/input-suggestion-select.js
+++ b/src/js/components/input-suggestion/input-suggestion-select.js
@@ -29,7 +29,7 @@
var key = e.keyCode || e.which;
var keyPressed = keyboard(key);
- if (keyPressed.isEscape()) {
+ if (keyPressed.isEscape) {
hide();
}
})
@@ -37,7 +37,7 @@
var key = e.keyCode || e.which;
var keyPressed = keyboard(key);
- if (keyPressed.isArrowUp() || keyPressed.isArrowDown()) {
+ if (keyPressed.isArrowUp || keyPressed.isArrowDown) {
e.preventDefault();
if (!$suggestion.is('.open')) {
@@ -47,7 +47,7 @@
var $currentItem = $items.children('.active');
- if (keyPressed.isArrowDown()) {
+ if (keyPressed.isArrowDown) {
if ($currentItem.is(':last-child')) {
return;
}
@@ -60,7 +60,7 @@
}
}
- if (keyPressed.isArrowUp()) {
+ if (keyPressed.isArrowUp) {
if ($currentItem.is(':first-child')) {
return;
}
diff --git a/src/js/events/scroll.js b/src/js/events/scroll.js
new file mode 100644
index 00000000..4b193ee4
--- /dev/null
+++ b/src/js/events/scroll.js
@@ -0,0 +1,12 @@
+(function ($) {
+
+ $.fn.scrollToBottom = function () {
+ return this.each(function () {
+ var $element = $(this);
+ var scrollHeight = $element.prop('scrollHeight');
+
+ $element.scrollTop(scrollHeight);
+ });
+ };
+
+})(jQuery);
diff --git a/src/js/init.js b/src/js/init.js
index c7b1769e..5ec51843 100644
--- a/src/js/init.js
+++ b/src/js/init.js
@@ -1,7 +1,10 @@
$(function () {
$('input').typing();
$('.as-input').asInput();
+ $('.chat').chat();
+ $('.modal-calendar').calendar();
$('[data-toggle="popover"]').popover();
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="suggestion"]').suggestion();
+ $('[data-toggle="file-manager"]').fileManager();
});
diff --git a/src/js/types/date.js b/src/js/types/date.js
new file mode 100644
index 00000000..99d15ff5
--- /dev/null
+++ b/src/js/types/date.js
@@ -0,0 +1,32 @@
+(function () {
+
+ Date.prototype.addDays = function (days) {
+ var date = new Date(this.getTime());
+ date.setDate(this.getDate() + days);
+
+ return date;
+ };
+
+ Date.prototype.addMonths = function (months) {
+ var year = this.getFullYear();
+ var month = this.getMonth() + months;
+ var date = new Date(year, month, 1);
+ var lastDate = new Date(year, month + 1, 0);
+
+ if (this.getDate() > lastDate.getDate()) {
+ date.setDate(lastDate.getDate());
+ } else {
+ date.setDate(this.getDate());
+ }
+
+ return date;
+ };
+
+ Date.prototype.addYears = function (years) {
+ var date = new Date(this.getTime());
+ date.setFullYear(this.getFullYear() + years);
+
+ return date;
+ };
+
+})();
diff --git a/src/js/types/keyboard.js b/src/js/types/keyboard.js
index 8ba592d4..53b69756 100644
--- a/src/js/types/keyboard.js
+++ b/src/js/types/keyboard.js
@@ -1,21 +1,19 @@
-(function() {
- window.keyboard = function(key) {
- this.isArrowDown = function() {
- return key === 40;
- };
+(function () {
+ var numberRegex = /\d/;
+ var letterRegex = /[a-zA-Z]/;
- this.isArrowUp = function() {
- return key === 38;
- };
+ window.keyboard = function (keyCode) {
+ var char = String.fromCharCode(keyCode);
- this.isEnter = function() {
- return key === 13;
+ return {
+ isArrowDown: keyCode === 40,
+ isArrowUp: keyCode === 38,
+ isBackspace: keyCode === 8,
+ isDelete: keyCode === 46 || keyCode === 63272, /* Safari */
+ isEnter: keyCode === 13,
+ isEscape: keyCode === 27,
+ isLetter: letterRegex.test(char),
+ isNumber: numberRegex.test(char)
};
-
- this.isEscape = function() {
- return key === 27;
- };
-
- return this;
};
})();
diff --git a/src/js/types/string.js b/src/js/types/string.js
index 8b9708e6..706467f8 100644
--- a/src/js/types/string.js
+++ b/src/js/types/string.js
@@ -1,11 +1,18 @@
(function () {
- String.prototype.contains = function (str) {
- return new RegExp(str, "i").test(this);
- };
+ if (!String.prototype.startsWith) {
+ String.prototype.startsWith = function (searchString, position) {
+ position = position || 0;
+ return this.indexOf(searchString, position) === position;
+ };
+ }
- String.prototype.replaceAll = function (search, replacement) {
- return this.replace(new RegExp(search, 'g'), replacement);
- };
+ String.prototype.contains = function (str) {
+ return new RegExp(str, "i").test(this);
+ };
+
+ String.prototype.replaceAll = function (search, replacement) {
+ return this.replace(new RegExp(search, 'g'), replacement);
+ };
})();
diff --git a/src/scss/admin4b.scss b/src/scss/admin4b.scss
index 641ead06..1c77889b 100644
--- a/src/scss/admin4b.scss
+++ b/src/scss/admin4b.scss
@@ -17,6 +17,10 @@
@import 'layout/sign/form-sign';
@import 'layout/sign/page-sign';
+@import 'components/breadcrumb';
+@import 'components/calendar';
+@import 'components/camera';
+@import 'components/chat';
@import 'components/label';
@import 'components/callout';
@import 'components/checkbox';
diff --git a/src/scss/components/_breadcrumb.scss b/src/scss/components/_breadcrumb.scss
new file mode 100644
index 00000000..23ed389e
--- /dev/null
+++ b/src/scss/components/_breadcrumb.scss
@@ -0,0 +1,4 @@
+.breadcrumb
+{
+ @include crossbrowser-border-radius(0);
+}
diff --git a/src/scss/components/_calendar.scss b/src/scss/components/_calendar.scss
new file mode 100644
index 00000000..e2d3f85e
--- /dev/null
+++ b/src/scss/components/_calendar.scss
@@ -0,0 +1,137 @@
+.modal.modal-calendar .modal-dialog
+{
+ max-width: 20rem;
+
+ .modal-content
+ {
+ .modal-header,
+ .modal-body,
+ .modal-footer
+ {
+ border-width: 0;
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
+ }
+
+ .modal-header
+ {
+ .input-group
+ {
+ height: auto;
+ width: auto;
+
+ .btn,
+ .form-control
+ {
+ font-size: 14pt;
+ padding: .9375rem .3125rem 0 .3125rem;
+
+ &.btn-link
+ {
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
+ }
+ }
+
+ .form-control
+ {
+ border: none;
+ display: inline-block;
+ text-align: center;
+ width: 3.75rem;
+ @include crossbrowser-box-shadow(none);
+ @include crossbrowser-flex(0 1 auto);
+ }
+
+ .btn.dropdown-toggle
+ {
+ border: none;
+ background: $bscolors-white;
+ color: $bscolors-gray-700;
+ @include crossbrowser-box-shadow(none);
+
+ &::after
+ {
+ display:none
+ }
+ }
+ }
+ }
+
+ .modal-footer
+ {
+ justify-content: center;
+ @include crossbrowser-align-items(center);
+ }
+ }
+}
+
+table.table-calendar
+{
+ margin-bottom: .5rem;
+ text-align: center;
+ width: 100%;
+
+ th
+ {
+ font-weight: normal;
+ padding-bottom: .9375rem;
+
+ &:first-child
+ {
+ color: $bscolors-red;
+ }
+ }
+
+ td
+ {
+ color: $bscolors-gray-500;
+ padding: .3125rem;
+
+ a
+ {
+ color: $bscolors-gray-700;
+ display: block;
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ z-index: 1;
+
+ &::before
+ {
+ border: .0625rem solid $bscolors-blue;
+ content: " ";
+ display: none;
+ position: absolute;
+ top: -.25rem;
+ left: -.0625rem;
+ width: 2rem;
+ height: 2rem;
+ z-index: -1;
+ @include crossbrowser-border-radius(50%);
+ }
+
+ &:hover,
+ &.active
+ {
+ color: $bscolors-white !important;
+
+ &::before
+ {
+ background: $bscolors-blue;
+ display: block;
+ }
+ }
+
+ &.today::before
+ {
+ display: block;
+ }
+
+ &.sunday
+ {
+ color: $bscolors-red;
+ }
+ }
+ }
+}
diff --git a/src/scss/components/_callout.scss b/src/scss/components/_callout.scss
index fde6b204..d4f0c50e 100644
--- a/src/scss/components/_callout.scss
+++ b/src/scss/components/_callout.scss
@@ -1,8 +1,7 @@
.callout
{
padding: 1.25rem;
- margin-top: 1.25rem;
- margin-bottom: 1.25rem;
+ margin-bottom: 1rem;
border: .0625rem solid #eee;
border-left-width: .25rem;
@include crossbrowser-border-radius(.25rem);
diff --git a/src/scss/components/_camera.scss b/src/scss/components/_camera.scss
new file mode 100644
index 00000000..32146fe2
--- /dev/null
+++ b/src/scss/components/_camera.scss
@@ -0,0 +1,7 @@
+.camera
+{
+ display: block;
+ width: 100%;
+ @include crossbrowser-transform(scale(-1, 1));
+ @include crossbrowser-filter(FlipH);
+}
diff --git a/src/scss/components/_chat.scss b/src/scss/components/_chat.scss
new file mode 100644
index 00000000..833e7ece
--- /dev/null
+++ b/src/scss/components/_chat.scss
@@ -0,0 +1,139 @@
+@include crossbrowser-keyframes(ballon)
+{
+ 0%
+ {
+ @include crossbrowser-transform(scale(0));
+ }
+ 100%
+ {
+ @include crossbrowser-transform(scale(1));
+ }
+}
+
+.chat
+{
+ display: none;
+ padding: 0;
+ width: 100%;
+
+ &.chat-on /* Set by JS after calculate the remaining height */
+ {
+ display: table;
+ }
+
+ .chat-body,
+ .chat-footer
+ {
+ display: table-row;
+ }
+
+ .chat-body
+ {
+ height: 100%;
+
+ .chat-content
+ {
+ display: table-cell;
+ height: 100%;
+
+ .chat-messages
+ {
+ height: 100%;
+ position: relative;
+ overflow: auto;
+
+ .container-fluid /* Correct height for IE and Firefox */
+ {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
+
+ .message-sent,
+ .message-reply
+ {
+ margin-bottom: 1rem;
+
+ img
+ {
+ vertical-align: top;
+ width: 3rem;
+ @include crossbrowser-border-radius(50%);
+ }
+
+ p
+ {
+ display: inline-block;
+ margin: 0;
+ padding: .625rem 1.25rem;
+ text-align: left;
+ max-width: 75%;
+ @include crossbrowser-animation(ballon .2s linear);
+ @include crossbrowser-border-radius(1.25rem);
+ }
+ }
+
+ .message-sent
+ {
+ img
+ {
+ margin-right: .375rem;
+ }
+
+ p
+ {
+ background-color: lighten($flatuicolors-midnight-blue, 15%);
+ color: $bscolors-white;
+ transform-origin: top left;
+ }
+
+ small
+ {
+ color: lighten($flatuicolors-midnight-blue, 50%);
+ }
+ }
+
+ .message-reply
+ {
+ text-align: right;
+
+ img
+ {
+ float: right;
+ margin-left: .625rem;
+ }
+
+ p
+ {
+ background-color: $bscolors-gray-400;
+ transform-origin: top right;
+ }
+
+ small
+ {
+ color: $bscolors-gray-600;
+ }
+ }
+ }
+ }
+ }
+
+ .chat-footer
+ {
+ .btn,
+ .form-control
+ {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ @include crossbrowser-border-radius(0);
+ }
+
+ .btn
+ {
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
+ }
+ }
+}
diff --git a/src/scss/components/_checkbox.scss b/src/scss/components/_checkbox.scss
index 220b8488..5c654722 100644
--- a/src/scss/components/_checkbox.scss
+++ b/src/scss/components/_checkbox.scss
@@ -131,8 +131,8 @@ label.checkbox
&:after
{
- left: .5rem;
- top: .25rem;
+ left: .57rem;
+ top: .3rem;
width: .4375rem;
height: .75rem;
border-width: 0 .1875rem .1875rem 0;
diff --git a/src/scss/components/_radio-button.scss b/src/scss/components/_radio-button.scss
index 8fe005e1..26ab6337 100644
--- a/src/scss/components/_radio-button.scss
+++ b/src/scss/components/_radio-button.scss
@@ -36,6 +36,7 @@
label.radio
{
margin-bottom: 0;
+ text-align: left;
@include crossbrowser-align-items(center);
@include crossbrowser-display-inline-flex();
@include crossbrowser-user-select(none);
diff --git a/src/scss/highlight/_css.scss b/src/scss/highlight/_css.scss
index f0db0625..fdbbf545 100644
--- a/src/scss/highlight/_css.scss
+++ b/src/scss/highlight/_css.scss
@@ -1,24 +1,55 @@
-.css .hljs-keyword
+.source-code
{
- color: $highlight-colors-keyword;
-}
+ .css .hljs-keyword
+ {
+ color: $highlight-light-keyword;
+ }
-.css .hljs-selector-class
-{
- color: $highlight-colors-class;
-}
+ .css .hljs-selector-class
+ {
+ color: $highlight-light-class;
+ }
-.css .hljs-attribute
-{
- color: $highlight-colors-attribute;
-}
+ .css .hljs-attribute
+ {
+ color: $highlight-light-attribute;
+ }
-.css .hljs-comment
-{
- color: $highlight-colors-comment;
+ .css .hljs-comment
+ {
+ color: $highlight-light-comment;
+ }
+
+ .css .hljs-number
+ {
+ color: $highlight-light-number;
+ }
}
-.css .hljs-number
+.source-code.dark
{
- color: $highlight-colors-number;
+ .css .hljs-keyword
+ {
+ color: $highlight-dark-keyword;
+ }
+
+ .css .hljs-selector-class
+ {
+ color: $highlight-dark-class;
+ }
+
+ .css .hljs-attribute
+ {
+ color: $highlight-dark-attribute;
+ }
+
+ .css .hljs-comment
+ {
+ color: $highlight-dark-comment;
+ }
+
+ .css .hljs-number
+ {
+ color: $highlight-dark-number;
+ }
}
diff --git a/src/scss/highlight/_html.scss b/src/scss/highlight/_html.scss
index 3478f197..29218f04 100644
--- a/src/scss/highlight/_html.scss
+++ b/src/scss/highlight/_html.scss
@@ -1,25 +1,57 @@
-.html .hljs-meta
+.source-code
{
- color: $highlight-colors-namespace;
-}
+ .html .hljs-meta
+ {
+ color: $highlight-light-namespace;
+ }
-.html .hljs-section,
-.html .hljs-tag
-{
- color: $highlight-colors-keyword;
-}
+ .html .hljs-section,
+ .html .hljs-tag
+ {
+ color: $highlight-light-keyword;
+ }
-.html .hljs-tag .hljs-attr
-{
- color: $highlight-colors-attribute;
-}
+ .html .hljs-tag .hljs-attr
+ {
+ color: $highlight-light-attribute;
+ }
-.html .hljs-tag .hljs-string
-{
- color: $highlight-colors-string;
+ .html .hljs-tag .hljs-string
+ {
+ color: $highlight-light-string;
+ }
+
+ .html .hljs-comment
+ {
+ color: $highlight-light-comment;
+ }
}
-.html .hljs-comment
+.source-code.dark
{
- color: $highlight-colors-comment;
+ .html .hljs-meta
+ {
+ color: $highlight-dark-namespace;
+ }
+
+ .html .hljs-section,
+ .html .hljs-tag
+ {
+ color: $highlight-dark-keyword;
+ }
+
+ .html .hljs-tag .hljs-attr
+ {
+ color: $highlight-dark-attribute;
+ }
+
+ .html .hljs-tag .hljs-string
+ {
+ color: $highlight-dark-string;
+ }
+
+ .html .hljs-comment
+ {
+ color: $highlight-dark-comment;
+ }
}
diff --git a/src/scss/highlight/_js.scss b/src/scss/highlight/_js.scss
index 3ab4b650..a9037852 100644
--- a/src/scss/highlight/_js.scss
+++ b/src/scss/highlight/_js.scss
@@ -1,14 +1,45 @@
-.js .hljs-string
+.source-code
{
- color: $highlight-colors-string;
-}
+ .js .hljs-number
+ {
+ color: $highlight-light-number;
+ }
-.js .hljs-keyword
-{
- color: $highlight-colors-keyword;
+ .js .hljs-string
+ {
+ color: $highlight-light-string;
+ }
+
+ .js .hljs-keyword
+ {
+ color: $highlight-light-keyword;
+ }
+
+ .js .hljs-comment
+ {
+ color: $highlight-light-comment;
+ }
}
-.js .hljs-comment
+.source-code.dark
{
- color: $highlight-colors-comment;
+ .js .hljs-number
+ {
+ color: $highlight-dark-number;
+ }
+
+ .js .hljs-string
+ {
+ color: $highlight-dark-string;
+ }
+
+ .js .hljs-keyword
+ {
+ color: $highlight-dark-keyword;
+ }
+
+ .js .hljs-comment
+ {
+ color: $highlight-dark-comment;
+ }
}
diff --git a/src/scss/highlight/_json.scss b/src/scss/highlight/_json.scss
index 27d70936..b53434ad 100644
--- a/src/scss/highlight/_json.scss
+++ b/src/scss/highlight/_json.scss
@@ -1,19 +1,45 @@
-.json .hljs-attr
+.source-code
{
- color: $highlight-colors-attribute;
-}
+ .json .hljs-attr
+ {
+ color: $highlight-light-attribute;
+ }
-.json .hljs-string
-{
- color: $highlight-colors-string;
-}
+ .json .hljs-string
+ {
+ color: $highlight-light-string;
+ }
-.json .hljs-literal,
-{
- color: $highlight-colors-keyword;
+ .json .hljs-literal,
+ {
+ color: $highlight-light-keyword;
+ }
+
+ .json .hljs-number
+ {
+ color: $highlight-light-number;
+ }
}
-.json .hljs-number
+.source-code.dark
{
- color: $highlight-colors-number;
+ .json .hljs-attr
+ {
+ color: $highlight-dark-attribute;
+ }
+
+ .json .hljs-string
+ {
+ color: $highlight-dark-string;
+ }
+
+ .json .hljs-literal,
+ {
+ color: $highlight-dark-keyword;
+ }
+
+ .json .hljs-number
+ {
+ color: $highlight-dark-number;
+ }
}
diff --git a/src/scss/highlight/_source-code.scss b/src/scss/highlight/_source-code.scss
index 96adac52..95475837 100644
--- a/src/scss/highlight/_source-code.scss
+++ b/src/scss/highlight/_source-code.scss
@@ -1,36 +1,61 @@
.source-code
{
- $bg-color: #222d32;
- $text-color: #fff;
-
margin-bottom: 1rem;
.nav-tabs a
{
- color: darken($text-color, 50%);
+ color: $highlight-light-editor-link;
font-size: .95rem;
text-decoration: none;
padding: .75rem;
+ padding-bottom: 0;
@include crossbrowser-transition(color .2s ease);
&.active,
+ &:active,
&:hover
{
- color: $text-color;
+ color: darken($highlight-light-editor-link, 30%);
}
}
pre,
.nav-tabs
{
- background: $bg-color;
+ background: $highlight-light-editor-bg;
border: none;
}
pre
{
- color: $highlight-colors-literal;
margin: 0;
overflow-x: auto;
+ padding: .75rem;
+ }
+}
+
+.source-code.dark
+{
+ .nav-tabs a
+ {
+ color: darken($highlight-dark-editor-link, 50%);
+
+ &.active,
+ &:active,
+ &:hover
+ {
+ color: $highlight-dark-editor-link;
+ }
+ }
+
+ pre,
+ .nav-tabs
+ {
+ background: $highlight-dark-editor-bg;
+ }
+
+ pre
+ {
+ color: $highlight-dark-literal;
}
}
diff --git a/src/scss/layout/_app.scss b/src/scss/layout/_app.scss
index e7df751f..ecc15003 100644
--- a/src/scss/layout/_app.scss
+++ b/src/scss/layout/_app.scss
@@ -85,3 +85,17 @@ body
}
}
}
+
+@media print
+{
+ .app .app-body
+ {
+ position: relative;
+ height: auto;
+
+ .app-sidebar
+ {
+ display: none;
+ }
+ }
+}
diff --git a/src/scss/layout/sign/_page-sign.scss b/src/scss/layout/sign/_page-sign.scss
index 9fbcbe5c..47a691e5 100644
--- a/src/scss/layout/sign/_page-sign.scss
+++ b/src/scss/layout/sign/_page-sign.scss
@@ -4,5 +4,4 @@
padding-top: 2.45rem;
padding-bottom: 2.45rem;
@include crossbrowser-align-items(center);
- @include crossbrowser-display-flex();
}
diff --git a/src/scss/palette/_highlight-colors.scss b/src/scss/palette/_highlight-colors.scss
index 405f8b21..c509e8d8 100644
--- a/src/scss/palette/_highlight-colors.scss
+++ b/src/scss/palette/_highlight-colors.scss
@@ -1,8 +1,21 @@
-$highlight-colors-attribute: #9cdcfe;
-$highlight-colors-class: #0a8;
-$highlight-colors-comment: #999;
-$highlight-colors-keyword: #569cd6;
-$highlight-colors-literal: #e8e8e8;
-$highlight-colors-namespace: #099;
-$highlight-colors-number: #d7ba7d;
-$highlight-colors-string: #ce9178;
+$highlight-light-attribute: #4f9fcf;
+$highlight-light-editor-bg: #efefef;
+$highlight-light-editor-link: #868e96;
+$highlight-light-class: #0a8;
+$highlight-light-comment: #999;
+$highlight-light-keyword: #2f6f9f;
+$highlight-light-literal: #212529;
+$highlight-light-namespace: #099;
+$highlight-light-number: #f5871f;
+$highlight-light-string: #d44950;
+
+$highlight-dark-attribute: #9cdcfe;
+$highlight-dark-editor-bg: #222d32;
+$highlight-dark-editor-link: #fff;
+$highlight-dark-class: #0a8;
+$highlight-dark-comment: #999;
+$highlight-dark-keyword: #569cd6;
+$highlight-dark-literal: #e8e8e8;
+$highlight-dark-namespace: #099;
+$highlight-dark-number: #d7ba7d;
+$highlight-dark-string: #ce9178;
diff --git a/src/scss/utilities/_cross-browser.scss b/src/scss/utilities/_cross-browser.scss
index 9a06789b..79e3c362 100644
--- a/src/scss/utilities/_cross-browser.scss
+++ b/src/scss/utilities/_cross-browser.scss
@@ -96,6 +96,21 @@
display: inline-flex;
}
+@mixin crossbrowser-filter($filter)
+{
+ -ms-filter: "#{$filter}";
+ filter: $filter;
+}
+
+@mixin crossbrowser-flex($flex...)
+{
+ -webkit-box-flex: $flex;
+ -moz-box-flex: $flex;
+ -webkit-flex: $flex;
+ -ms-flex: $flex;
+ flex: $flex;
+}
+
@mixin crossbrowser-input-placeholder($color)
{
&::-webkit-input-placeholder
-
@@include('includes/code-examples/components/spinner/spinner-block.html')@@include('includes/code-examples/layout/spinner/spinner-block.html')
-
@@include('includes/code-examples/components/spinner/spinner-block.js')@@include('includes/code-examples/layout/spinner/spinner-block.js')@@include('includes/code-examples/components/callout/callout-colors.html')@@include('includes/code-examples/reference/callout/callout-colors.html')+ Code highlight +
++ Code highlight is a feature with predefined styles for HTML, CSS, JavaScript and JSON. + These styles are a customization for the languages supported by the library + highlight.js. +
+
+ You do not need the entire template to work with code highlight.
+ You only need the highlight.js library and
+ the
+ See the basic example:
+ admin4b-highlight.min.css file present in the NPM package.
+
+
+ Source code
+
+
+
+
+ @@include('includes/code-examples/reference/code-highlight/how-to-use.html')+ Themes +
++ Light theme (default): +
+
+
+
+
+
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.html')
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.css')
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.js')
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.json')
+
+ Source code
+
+
+
+
+ @@include('includes/code-examples/reference/code-highlight/theme-light.html')+ Dark theme: +
+
+
+
+
+
+
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.html')
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.css')
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.js')
+
+ @@include('includes/code-examples/reference/code-highlight/code-highlight.json')
+
+ Source code
+
+
+
+
+ @@include('includes/code-examples/reference/code-highlight/theme-dark.html')