Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-26 04:54:40 +04:00
Code Issues Projects Releases Wiki Activity

tabler customize

Browse Source
This commit is contained in:
codecalm
2020-02-09 16:49:37 +01:00
parent f13ac7db49
commit 738eff385d
34 changed files with 324 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_includes/cards/company-employees.html
+1 -1
View File
@@ -12,7 +12,7 @@
{% for person in site.data.people limit: 5 offset: 20 %}
<tr>
<td class="w-1p">{% include ui/avatar.html src=person.photo %}</td>
<td class="w-1">{% include ui/avatar.html src=person.photo %}</td>
<td><a href="#" class="text-reset">{{ person.full_name }}</a></td>
<td>{{ person.department }}</td>
<td class="w-1 pr-0">{{ forloop.index | random_number: 30, 90 }}%</td>
pages/_includes/cards/development-activity.html
+5 -5
View File
@@ -12,7 +12,7 @@
</thead>
<tbody>
<tr>
<td class="w-1p">
<td class="w-1">
{% include ui/avatar.html person-id=10 %}
</td>
<td>{{ site.data.people[10].full_name }}</td>
@@ -20,7 +20,7 @@
<td class="text-nowrap text-muted">May 6, 2019</td>
</tr>
<tr>
<td class="w-1p">
<td class="w-1">
{% include ui/avatar.html person-id=17 %}
</td>
<td>{{ site.data.people[17].full_name }}</td>
@@ -28,7 +28,7 @@
<td class="text-nowrap text-muted">April 22, 2019</td>
</tr>
<tr>
<td class="w-1p">
<td class="w-1">
{% include ui/avatar.html person-id=16 %}
</td>
<td>{{ site.data.people[16].full_name }}</td>
@@ -36,7 +36,7 @@
<td class="text-nowrap text-muted">April 15, 2019</td>
</tr>
<tr>
<td class="w-1p">
<td class="w-1">
{% include ui/avatar.html person-id=12 %}
</td>
<td>{{ site.data.people[12].full_name }}</td>
@@ -44,7 +44,7 @@
<td class="text-nowrap text-muted">April 8, 2019</td>
</tr>
<tr>
<td class="w-1p">
<td class="w-1">
{% include ui/avatar.html person-id=19 %}
</td>
<td>{{ site.data.people[19].full_name }}</td>
pages/_includes/cards/invoices.html
+2 -2
View File
@@ -26,8 +26,8 @@
<table class="table card-table table-vcenter text-nowrap datatable">
<thead>
<tr>
<th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
<th class="w-1p">No. {% include ui/icon.html icon="chevron-up" class="icon-sm text-dark icon-thick" %}</th>
<th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
<th class="w-1">No. {% include ui/icon.html icon="chevron-up" class="icon-sm text-dark icon-thick" %}</th>
<th>Invoice Subject {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th>Client {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th>VAT No. {% include ui/icon.html icon="code" class="icon-sm" %}</th>
pages/_includes/cards/table-users.html
+2 -2
View File
@@ -7,7 +7,7 @@
<th>Usage</th>
<th class="text-center">Payment</th>
<th>Activity</th>
<th class="w-1p">Satisfaction</th>
<th class="w-1">Satisfaction</th>
</tr>
</thead>
<tbody>
@@ -19,7 +19,7 @@
{% assign percentage_color = percentage | number_color %}
<tr>
<td class="text-center w-1p">
<td class="text-center w-1">
{% include ui/avatar.html person-id=person.id %}
</td>
<td>
pages/_includes/forms/form-elements-4.html
+3 -3
View File
@@ -6,7 +6,7 @@
<div class="mb-3">
<label class="form-label">Buttons group</label>
<div class="btn-group w-100p">
<div class="btn-group w-100">
<button type="button" class="btn btn-secondary">1 min</button>
<button type="button" class="btn btn-secondary active">5 min</button>
<button type="button" class="btn btn-secondary">10 min</button>
@@ -16,7 +16,7 @@
<div class="mb-3">
<label class="form-label">Buttons group with dropdown</label>
<div class="btn-group w-100p">
<div class="btn-group w-100">
<button type="button" class="btn btn-secondary">Option 1</button>
<button type="button" class="btn btn-secondary">Option 2</button>
<button type="button" class="btn btn-secondary active">Option 3</button>
@@ -41,7 +41,7 @@
<div class="mb-3">
<label class="form-label">Toolbar</label>
<div class="btn-group w-100p">
<div class="btn-group w-100">
{% assign icons = "bold,italic,underline,copy,scissors,file-plus,file-minus" | split: ',' %}
{% for icon in icons %}
{% include ui/button.html color="secondary" icon=icon icon-only=true %}
pages/_includes/layout/customize.html
-79
View File
@@ -1,79 +0,0 @@
<div class="row row-cards">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="btn-list">
<a href="#" class="btn btn-secondary" data-theme-toggle="primary-vertical">Toggle sidebar</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="primary-vertical-narrow">Sidebar narrow</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="primary-right">Sidebar left/right</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="primary-color">Sidebar color</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="secondary-color">Secondary color</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="secondary-visible">Toggle secondary</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="dark-mode">Dark mode</a>
</div>
</div>
</div>
</div>
</div>
{% capture_global scripts %}
<script>
(function () {
var navbarPrimary = document.getElementById('navbar-primary'),
navbarSecondary = document.getElementById('navbar-secondary');
var events = {
'primary-vertical': function () {
navbarPrimary.classList.toggle('navbar-vertical');
},
'primary-right': function () {
navbarPrimary.classList.toggle('navbar-right');
},
'primary-vertical-narrow': function () {
navbarPrimary.classList.toggle('navbar-vertical-narrow');
},
'dark-mode': function () {
document.body.classList.toggle('theme-dark');
},
'primary-color': function () {
var classList = navbarPrimary.classList;
if (classList.contains('navbar-light')) {
classList.add('navbar-dark');
classList.remove('navbar-light');
} else {
classList.add('navbar-light');
classList.remove('navbar-dark');
}
},
'secondary-color': function () {
var classList = navbarSecondary.classList;
if (classList.contains('navbar-light')) {
classList.add('navbar-dark');
classList.remove('navbar-light');
} else {
classList.add('navbar-light');
classList.remove('navbar-dark');
}
},
'secondary-visible': function () {
navbarSecondary.classList.toggle('d-none');
},
};
for (var name in events) {
var event = events[name];
(function(event){
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
event.call();
e.preventDefault();
return false;
});
})(event);
}
})();
</script>
{% endcapture_global %}
pages/_includes/layout/footer.html
+20 -22
View File
@@ -1,26 +1,24 @@
<div class="mb-n3 mt-3">
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
<div class="col-auto ml-lg-auto">
<div class="row align-items-center">
<div class="col-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="{{ site.base }}/docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="{{ site.base }}/faq.html" class="link-secondary">FAQ</a></li>
</ul>
</div>
<div class="col-auto">
{% include ui/button.html color="secondary" size="sm" text="Source code" href=site.github_url external=true %}
</div>
<footer class="footer footer-transparent">
<div class="container">
<div class="row align-items-center flex-row-reverse">
<div class="col-auto ml-lg-auto">
<div class="row align-items-center">
<div class="col-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="{{ site.base }}/docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="{{ site.base }}/faq.html" class="link-secondary">FAQ</a></li>
</ul>
</div>
<div class="col-auto">
{% include ui/button.html color="secondary" size="sm" text="Source code" href=site.github_url external=true %}
</div>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
Copyright © {{ site.time | date: '%Y' }}
<a href="{{ site.base }}" class="link-secondary">{{ site.title }}</a>.
All rights reserved.
</div>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
Copyright © {{ site.time | date: '%Y' }}
<a href="{{ site.base }}" class="link-secondary">{{ site.title }}</a>.
All rights reserved.
</div>
</div>
</footer>
</div>
</div>
</footer>
pages/_includes/layout/homepage.html
-2
View File
@@ -1,5 +1,3 @@
{% include layout/customize.html %}
<div class="row row-deck row-cards">
<div class="col-sm-6 col-lg-3">
{% include cards/charts/sales.html %}
pages/_includes/layout/js.html
-1
View File
@@ -10,4 +10,3 @@
<!-- Tabler Core -->
<script src="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/js/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
<script src="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/js/tabler-range-sliders{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
pages/_includes/layout/navbar-menu.html
+2 -2
View File
@@ -32,8 +32,8 @@
</li>
{% endfor %}
<li class="nav-item d-none-navbar-vertical" title="Soon" data-toggle="tooltip">
<a href="#" class="nav-link disabled">
<li class="nav-item d-none-navbar-vertical">
<a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
<span class="nav-link-icon">{% include ui/icon.html icon="sliders" %}</span>
<span class="nav-link-title">Customize</span>
</a>
pages/_includes/layout/navbar-primary.html
+4 -3
View File
@@ -9,9 +9,10 @@
<h6 class="navbar-heading mt-4">Tools</h6>
<div class="navbar-side d-none-navbar-vertical-narrow">
{% include layout/navbar-search.html %}
{% include ui/button.html text="Customize" icon="sliders" color="primary" block=true class="d-none-navbar-horizontal" %}
<div class="navbar-side">
{% include layout/navbar-search.html class="d-none-navbar-vertical-narrow" %}
{% include ui/button.html text="Customize" icon="sliders" color="primary" block=true modal-id="customize" class="d-none-navbar-horizontal d-none-navbar-vertical-narrow" %}
{% include ui/button.html icon="sliders" icon-only=true color="primary" block=true modal-id="customize" class="d-none-navbar-horizontal d-none-navbar-vertical-wide" %}
</div>
</div>
</div>
pages/_includes/layout/navbar-search.html
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="d-none d-xl-block ml-auto">
<div class="d-none d-xl-block ml-auto{% if include.class %} {{ include.class }}{% endif %}">
<form action="." method="get">
{% include ui/form/input-icon.html prepend=true %}
</form>
pages/_includes/parts/modals/customize.html
+205
View File
@@ -0,0 +1,205 @@
{% include ui/modal/header.html title="Customize Tabler" %}
<div class="modal-body pt-0">
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
<div class="mb-3">
<label class="form-label">Color scheme</label>
<div class="form-hint">Light or dark presentation.</div>
<div class="btn-group w-100">
<button class="btn btn-secondary" data-theme-toggle="theme:light">{% include ui/icon.html icon="sun" %} Light</button>
<button class="btn btn-secondary" data-theme-toggle="theme:dark">{% include ui/icon.html icon="moon" %} Dark</button>
</div>
</div>
<div class="mb-4 text-muted">
You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
</div>
<div class="mb-3">
<label class="form-label">Navigation position</label>
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
<div class="btn-group w-100">
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
</div>
</div>
<div class="mb-3">
<label class="form-label">Sidebar size</label>
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
<div class="btn-group w-100">
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
</div>
</div>
<div class="mb-3">
<label class="form-label">Sidebar position</label>
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
<div class="btn-group w-100">
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
</div>
</div>
<div>
<label class="form-label">Navigation color</label>
<div class="form-hint">Light or dark version of the sidebar </div>
<div class="btn-group w-100">
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
</div>
</div>
</div>
{% capture_global scripts %}
<script>
(function() {
var navbarPrimary = document.getElementById('navbar-primary'),
navbarSecondary = document.getElementById('navbar-secondary');
var defaults = {
theme: 'light',
'navbar-position': 'horizontal',
'navbar-size': 'wide',
'navbar-side': 'left',
'navbar-color': 'light',
};
var eventsClean = {
'theme': function () {
document.body.classList.remove('theme-dark');
},
'navbar-position': function () {
navbarPrimary.classList.remove('navbar-vertical');
navbarSecondary.classList.remove('d-none');
},
'navbar-size': function () {
navbarPrimary.classList.remove('navbar-vertical-narrow');
},
'navbar-side': function () {
navbarPrimary.classList.remove('navbar-right');
},
'navbar-color': function () {
navbarPrimary.classList.remove('navbar-dark');
navbarPrimary.classList.add('navbar-light');
},
};
var events = {
'theme:light': function () {
},
'theme:dark': function () {
document.body.classList.add('theme-dark');
},
'navbar-position:vertical': function () {
navbarPrimary.classList.add('navbar-vertical');
navbarSecondary.classList.add('d-none');
},
'navbar-position:horizontal': function () {
},
'navbar-position:both': function () {
navbarPrimary.classList.add('navbar-vertical');
},
'navbar-size:wide': function () {
},
'navbar-size:narrow': function () {
navbarPrimary.classList.add('navbar-vertical-narrow');
},
'navbar-side:left': function () {
},
'navbar-side:right': function () {
navbarPrimary.classList.add('navbar-right');
},
'navbar-color:light': function () {
},
'navbar-color:dark': function () {
navbarPrimary.classList.add('navbar-dark');
navbarPrimary.classList.remove('navbar-light');
},
};
var updateThemeConfig = function (name) {
var key, value;
if (name) {
[key, value] = name.split(':');
setConfig(key, value);
}
applyConfig();
};
var disableTransitions = function () {
document.body.classList.add('no-transitions');
setTimeout(function () {
document.body.classList.remove('no-transitions');
}, 300);
};
var getConfig = function () {
var config = {};
for (var key in defaults) {
config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
}
return config;
};
var setConfig = function (key, value) {
localStorage.setItem('tabler-' + key, value);
};
var applyConfig = function () {
disableTransitions();
var config = getConfig();
console.log('config', config);
for (var key in config) {
var value = config[key];
eventsClean[key] && eventsClean[key].call();
events[key + ':' + value] && events[key + ':' + value].call();
([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
activeTrigger.classList.remove('active')
});
document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
}
};
applyConfig();
for (var name in events) {
var event = events[name];
(function (event, name) {
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
updateThemeConfig(name);
event.call();
e.preventDefault();
return false;
});
})(event, name);
}
})();
</script>
{% endcapture_global %}
pages/_includes/parts/modals/simple.html
+1 -6
View File
@@ -1,9 +1,4 @@
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
{% include ui/icon.html icon="x" %}
</button>
</div>
{% include ui/modal/header.html %}
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
</div>
pages/_includes/ui/modal.html
+1 -1
View File
@@ -2,7 +2,7 @@
{% capture_global modals %}
<div class="modal modal-blur fade" id="modal-{{ modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-dialog{% unless include.top %} modal-dialog-centered{% endunless %}" role="document">
<div class="modal-content">
{% include parts/modals/{{ modal-id }}.html %}
</div>
pages/_includes/ui/modal/header.html
+6
View File
@@ -0,0 +1,6 @@
<div class="modal-header">
<h5 class="modal-title">{{ include.title | default: 'Modal title' }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
{% include ui/icon.html icon="x" %}
</button>
</div>