<section>
|
<h1 class="blue" data-id="#changes"><i class="ace-icon fa fa-magic grey"></i> Changes and Updates</h1>
|
<hr />
|
|
<div class="alert alert-danger">
|
<button class="close" data-dismiss="alert"><i class="ace-icon fa fa-times"></i></button>
|
<i class="ace-icon fa fa-exclamation-triangle"></i>
|
Make sure you have a copy of your application files before making changes.
|
</div>
|
|
|
|
<div class="hr hr-double hr32"></div>
|
<h2 class="blue lighter help-title" data-id="#changes.v9">
|
Ace v1.3.3 to v1.3.4 (current version)
|
</h2>
|
<div class="space-4"></div>
|
|
<div class="help-content">
|
<h3 class="info-title smaller">1. New Features / Improvements / Fixes / Updates</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
Ajax has "post" and "reload" methods and new events related to that
|
</li>
|
|
<li>
|
File input element now triggers a <code>file.preview.ace</code> event and passes info about image width and height
|
</li>
|
|
<li>
|
Native scrollbars are used for fixed sidebar on touch devices. This only applies if you are using second style in "JS Builder tool"
|
</li>
|
|
<li>
|
<code>folderSelect</code> option for treeview element is now enabled
|
</li>
|
</ul>
|
</div>
|
|
|
<h3 class="info-title smaller">2. Third Party Changes</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
"TableTools" and "ColVis" extensions for dataTables are deprecated and you should use "buttons" extension instead
|
</li>
|
<li>
|
Autosize plugin for textareas does not depend on jQuery and usage syntax is different now. File name is <code>autosize.js</code> now
|
</li>
|
<li>
|
Bootstrap datepicker CSS file was named <i>datepicker.css</i> and has been renamed to <i>bootstrap-datepicker3.css</i>
|
</li>
|
<li>
|
Datetime picker plugin needs <code>icons</code> option to be specified now
|
</li>
|
<li>
|
In order to display timepicker plugin when the input element receives focus, you should explicitly call a function to display it on input focus
|
</li>
|
<li>
|
Dropzone form element needs <code>.well</code> class for propery styling
|
</li>
|
<li>
|
jqGrid file is renamed to <code>jquery.jqGrid.js</code>
|
</li>
|
</ul>
|
</div>
|
|
</div><!-- /.help-content -->
|
|
|
|
|
<div class="hr hr-double hr32"></div>
|
<h2 class="blue lighter help-title" data-id="#changes.v8">
|
Ace v1.3.2 to v1.3.3
|
</h2>
|
<div class="space-4"></div>
|
|
<div class="help-content">
|
<h3 class="info-title smaller">1. New Features / Improvements / Fixes / Updates</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
Option for larger radio and checkbox size by adding <code>.input-lg</code> class
|
</li>
|
|
<li>
|
Spinner input has now three sizes by specifying <code>.input-sm</code> or <code>.input-lg</code>
|
class for text input element
|
</li>
|
|
<li>
|
New white label options by adding <code>.label-white</code> class
|
</li>
|
|
<li>
|
<code>container</code> option to add content sliders inside another element (for example inside a modal box)
|
</li>
|
|
<li>
|
New <code>.toolbox-vertical</code> class for vertical toolbox inside a widget box
|
</li>
|
|
<li>
|
New ajax method <code>loadAddr</code> and some other options such as <code>loading_overlay</code>
|
</li>
|
|
<li>
|
Option to pass arguments to Ace functions and elements using <code>data-*</code> attributes.
|
<br />
|
Please see <a href="#basics/sidebar.functions">sidebar functions</a>,
|
<a href="#basics/ajax.options">ajax options</a>
|
or custom elements such as file input, scrollbars, content sliders for more info.
|
</li>
|
|
<li>
|
Optional PACE plugin to display page progess bars in ajax pages
|
</li>
|
|
<li>
|
TableTools and ColVis extensions for dataTables plugin
|
</li>
|
</ul>
|
</div>
|
|
|
<h3 class="info-title smaller">2. Ace Changes</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
Moved "dataTables" plugin and its extenstions to a separate <code>assets/js/dataTables</code>
|
folder
|
</li>
|
<li>
|
"Open Sans" font files have been renamed and moved to <code>assets/fonts</code> directory
|
</li>
|
|
<li>
|
<code>.btn-lg</code> is now a bit smaller and <code>.btn-xlg</code> is a slightly larger version
|
</li>
|
|
<li>
|
<code>.btn-xs</code> is now a bit larger and <code>.btn-mini</code> is a slightly smaller version
|
</li>
|
|
<li>
|
In ajax options,
|
<code>loading_icon</code> now defaults to <code>fa fa-spin fa-spinner fa-2x orange</code>.
|
</li>
|
</ul>
|
</div>
|
|
</div><!-- /.help-content -->
|
|
|
|
|
<div class="hr hr-double hr32"></div>
|
<h2 class="blue lighter help-title" data-id="#changes.v7">
|
Ace v1.3.1 to v1.3.2
|
</h2>
|
<div class="space-4"></div>
|
|
<div class="help-content">
|
<h3 class="info-title smaller">1. New Features / Improvements / Fixes / Updates</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
<a href="#custom/content-slider">Content sliders</a> based on Bootstrap modals
|
</li>
|
<li>
|
Navbar dropdowns automatically become modal like on small devices
|
</li>
|
<li>
|
Updated sidebar functions allow for <a href="#basics/sidebar.multiple">multiple sidebars</a>.
|
<br />
|
Make sure to see <a href="#basics/sidebar.functions">sidebar functions</a> and apply the necessary changes
|
</li>
|
<li>
|
Automatic scrollbars for sidebar submenus when needed
|
</li>
|
<li>
|
Delay before hiding submenus in minimized mode or horizontal mode
|
</li>
|
<li>
|
Automatic scrollbars for fullscreen widgets
|
</li>
|
<li>
|
Horizontal menu now has minimized style as well
|
</li>
|
<li>
|
Image preview for file input element
|
</li>
|
<li>
|
New custom scroller option 'hideOnIdle'
|
</li>
|
|
<li>
|
Ajax content loading can now be applied to any element
|
</li>
|
|
<li>New <code>data-auto-hide="true"</code> option for sidebar allows automatic hiding of sidebar in mobile view when users clicks/taps outside of sidebar area</li>
|
|
<li>
|
New <a href="#plugins/misc.rating">star rating</a> plugin
|
</li>
|
<li>
|
New <a href="#plugins/input.duallist">dual listbox</a> plugin
|
</li>
|
<li>
|
New <a href="#plugins/input.multiselect">bootstrap multiselect</a> plugin
|
</li>
|
<li>
|
jQuery mousewheel plugin included but not enabled by default.
|
<br />
|
You can use <code>assets/js/jquery.mobile.custom.js</code> to enable it.
|
</li>
|
|
<li>
|
Updated all scripts and plugins to their latest version
|
</li>
|
<li>
|
Several fixes and improvements
|
</li>
|
</ul>
|
</div>
|
|
<h3 class="info-title smaller">2. Ace Changes</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
Gruntfile.js build file added.
|
<br />
|
Note that you should run <code>npm install</code> and install required node.js packages first if you want to use it.
|
</li>
|
<li>
|
Also node.js modules inside <code>mustache/js</code> and <code>build</code> folders are removed
|
and you should run <code>npm install</code> command to install them or <code>npm update</code> to update.
|
</li>
|
|
|
<li>
|
CSS and JS files inside <code>assets</code> folder are not compressed (non-minified) now
|
and minified files are inside <code>dist</code> folder
|
</li>
|
|
<li>
|
Ace functions used to be like <em>ace.handle_side_menu()</em>, etc ...
|
<br />
|
Now they are wrapped in jQuery functions and need to be initialized by calling the functions.
|
<br />
|
For more info make sure to see <a href="#basics/sidebar.functions">sidebar functions</a> section.
|
</li>
|
|
<li>
|
Sidebar toggle buttons such as collapse/expand button or mobile view menu toggler should have
|
<code>data-target="#sidebar_id"</code> attribute
|
</li>
|
|
<li>
|
<code>.main-content-inner</code> is now necessary and should be inserted immediately
|
inside <code>.main-content</code> as the first and only direct child:
|
<pre data-language="html">
|
<div class="main-content"><div class="main-content-inner">
|
... other elements and content here ...
|
</div></div>
|
</pre>
|
</li>
|
|
<li>
|
Ajax content loading can now be applied to any element and has several changes and new functions.
|
<br />
|
By default <code>.page-content-area</code> element will have ajax enabled if it has
|
<code>data-ajax-content="true"</code> attribute.
|
<br />
|
Also ajax events are triggered for the specific element, which also can still be captured on document level.
|
<br />
|
Please see <a href="#basics/ajax">ajax section</a> for more info.
|
</li>
|
|
<li>
|
You should now add <code>.ace-main-stylesheet</code> class to your main stylesheet which
|
is "ace.css" in demo pages.
|
<pre data-language="html">
|
<link href="path/to/ace.min.css" rel="stylesheet" class="ace-main-stylesheet" />
|
<!--[if lte IE 9]>
|
<link href="path/to/ace-part2.min.css" rel="stylesheet" class="ace-main-stylesheet" />
|
<![endif]-->
|
</pre>
|
</li>
|
|
<li>
|
If you've been using functions such as:
|
<br />
|
<code>ace.settings.sidebar_fixed</code>
|
<code>ace.settings.sidebar_collapsed</code>
|
<code>ace.settings.navbar_fixed</code>
|
<br />
|
now there is an extra first argument which is either null
|
or reference to element to be changed:
|
<pre data-language="javascript">
|
ace.settings.sidebar_fixed(null, true|false, true|false);//first element is null or reference to sidebar element
|
//or
|
ace.settings.sidebar_fixed(document.getElementById('sidebar'), true|false, true|false);
|
</pre>
|
</li>
|
|
</ul>
|
</div>
|
|
|
|
<h3 class="info-title smaller">3. Third Party Changes</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
There are some changes for FuelUX plugin which has been updated from v2.x to v3.x.
|
<br />
|
Please see
|
<a href="#plugins/fuelux">FuelUX</a> for more info.
|
</li>
|
|
<li>
|
<a href="#plugins/date-time.fullcalendar">Fullcalendar</a> plugin doesn't need jQuery UI for dragging and resizing now
|
and moment.js is used for date processing and should be included.
|
<br />
|
It's available at:
|
<code>assets/js/date-time/moment.js</code>
|
<br />
|
Also it seems in its latest update, only events with
|
"yyyy-mm-dd" format can be resized (not sure though)
|
</li>
|
|
<li>
|
jQuery UI has had several changes. For example anchors (<code>A</code> tags) are not used in menu items any more.
|
<br />
|
If you see your jQuery UI code is not working as expected, you should refer its documentation
|
to resolve the issue as a result of recent changes.
|
</li>
|
|
<li>
|
If you are using internationalization features of date/time plugins date depend on
|
<b>moment.js</b> library, note that <code>lang</code> is deprecated now and
|
you should use <code>locale</code> instead.
|
<br />
|
Please see momentjs docs for more info.
|
</li>
|
|
<li>
|
<code>respond.src.js</code> has been renamed to <code>respond.js</code>
|
</li>
|
<li>
|
<code>jquery.colorbox-min.js</code> has been renamed to <code>jquery.colorbox.min.js</code>
|
</li>
|
<li>
|
jQuery form validation plugin doesn't validate hidden elements by default.
|
<br />
|
You should use <code>ignore</code> option to perform validation for a hidden element.
|
<br />
|
See <a href="#plugins/misc.jquery-validate">validation plugin</a> for more info.
|
</li>
|
|
<!--
|
<li>
|
Spin.js plugin (the imageless spinner) has now more options and you may
|
need to specify <code>left</code> <code>top</code> options if you want to use it.
|
</li>
|
-->
|
|
<li>
|
<a href="#plugins/input.select2">Select2</a> has now an optional tag input styling as well.
|
</li>
|
|
<li>
|
<a href="#plugins/input.chosen">Chosen</a> does not support touch devices.
|
</li>
|
</ul>
|
</div>
|
|
</div><!-- /.help-content -->
|
|
|
|
<div class="hr hr-double hr32"></div>
|
<h2 class="blue lighter help-title" data-id="#changes.v6">
|
Ace v1.3.0 to v1.3.1
|
</h2>
|
<div class="space-4"></div>
|
|
<div class="help-content">
|
<h3 class="info-title smaller">1. New Features / Improvements / Fixes / Updates</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
Added <a href="#basics/ajax">Ajax version</a>
|
</li>
|
<li>
|
Added <a href="#pages/email">Email templates</a>
|
and an <a href="../build/email.html">email tool</a> which converts normal Bootstrap syntax to email friendly table layout
|
</li>
|
<li>
|
<a href="#custom/onpage-help">Onpage Help</a> feature is now available for use in your application to provide help and instructions to users.
|
</li>
|
<li>
|
Option to remove sidebar (previously sidebar was almost mandatory)
|
</li>
|
<li>
|
Improved and fixed <a href="../build/css.html">CSS builder</a>
|
</li>
|
<li>
|
<code>.hover</code> submenus and <code>.compact</code> sidebar is now available only on larger devices.
|
</li>
|
<li>
|
Added <a href="#plugins/bootstrap">typeahead.js</a> plugin
|
</li>
|
<li>
|
Updated all scripts to their latest version
|
</li>
|
<li>
|
Fixed several bugs and issues
|
</li>
|
</ul>
|
</div>
|
|
|
<h3 class="info-title smaller">2. Ace Changes</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
In this version, <a href="#plugins/bootstrap.typeahead-js">typeahead.js</a>
|
plugin has been included.
|
<br />
|
The older Bootstrap (v2.x) typeahead plugin is still included with the template
|
as it's a lightweight alternative used by demo search box and tag input plugin.
|
<br />
|
However the latter (old plugin) has been renamed to <code>bs_typeahead</code>
|
<br />
|
For more info please see <a href="#plugins/bootstrap.typeahead">its section</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
In case you modified some of Ace's functions arguments,
|
please note that options used to be passed as separate paramaterers but now are passed
|
as a JSON object:
|
<pre data-language="javascript">
|
ace.sidebar_scroll(jQuery, {
|
{
|
'scroll_to_active': true,
|
'include_shortcuts': true,
|
'include_toggle': false,
|
'smooth_scroll': 200,
|
'outside': false
|
}
|
});
|
</pre>
|
</li>
|
</ul>
|
</div>
|
|
|
|
<h3 class="info-title smaller">3. Third Party Changes</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
dataTables plugin has been updated to latest version 1.10.0 and there
|
may be a few changes you need to make because of some API changes.
|
<br />
|
If your current tables are somehow messed up after script update, you may need
|
to consult plugin's documentation for more info.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Markdown editor now accepts more options and to use FontAwesome fonts
|
you need to specify <code>data-iconlibrary="fa"</code> attribute.
|
</li>
|
</ul>
|
</div>
|
|
|
</div><!-- /.help-content -->
|
|
|
|
|
|
<div class="hr hr-double hr32"></div>
|
<h2 class="blue lighter help-title" data-id="#changes.v5">
|
Ace v1.2.0 to v1.3.0
|
</h2>
|
<div class="space-4"></div>
|
|
<div class="help-content">
|
<h3 class="info-title smaller">1. New Features / Improvements / Fixes</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
<a href="#custom/scrollbar" class="help-more">Custom scrollbar plugin</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Automatic scrollbars for fixed sidebar
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
<a href="#basics/sidebar.horizontal" class="help-more">Horizontal Menu</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
3 Different mobile menu styles.
|
<a href="#basics/sidebar.mobile" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
New mobile navbar user buttons style.
|
<a href="#basics/navbar.mobile" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
New submenu style displayed on mouse hover.
|
<a href="#basics/sidebar.hover" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
<a href="#basics/sidebar.compact" class="help-more">Compact sidebar style</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Alternative active menu item style.
|
<a href="#basics/sidebar.highlight" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
<a href="#files/css.skins" class="help-more">LESS skin files</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
In-browser CSS & JS file builder to make your own minimal files
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Enhanced widget box functions and events.
|
<a href="#custom/widget-box" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
On-page help which lets you pick any element and see how it works
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
<code>nativeUI</code> option for custom editable addons.
|
<a href="#custom/inline-editable" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Date addon for inline editable plugin.
|
<a href="#custom/inline-editable.date" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Added Bootstrap datetime picker plugin.
|
<a href="#plugins/date-time.datetimepicker" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Tabbed user dropdowns inside navbar.
|
<a href="#basics/navbar.tabbed" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
New classes for navbar user dropdowns:
|
<code>.dropdown-content</code> &
|
<code>.dropdown-footer</code>
|
which allows addings scrollbars to <code>.dropdown-content</code>.
|
<br />
|
<a href="#basics/navbar.dropdown-content" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
New white button styles.
|
<a href="#elements.button.white" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
ASP.net friendly checkboxes and radio buttons.
|
<br />
|
You need to build your own custom CSS via the builder and choose
|
<a href="#custom/checkbox.notes" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Add data attribute <code>data-position='auto'</code> to dropdown elements
|
so they become a <b>dropup</b> when appropriate.
|
<a href="#elements.dropdown.options" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
New <code>.ace-icon</code>(changeable) & <code>.menu-icon</code>
|
classes which help with switching between different font icon libraries.
|
<a href="#changes.fontawesome" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
File input <b>whitelist</b> & <b>blacklist</b> options and other fixes & enchancements.
|
<a href="#custom/file-input" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Custom color picker enhancements.
|
<a href="#custom/colorpicker" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Light and blurred background for login page.
|
<br />
|
<a href="#pages/login" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Some browser fixes. Now compatible with almost all desktop and mobile browsers.
|
</li>
|
|
</ul>
|
</div>
|
|
<h3 class="info-title smaller">2. Changes to Ace</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
You should now add <code>.ace-icon</code> class name to (almost) all icons
|
but you can rename or remove it.
|
<br />
|
For more info and the reason for this,
|
see <a href="#changes.fontawesome" class="help-more">Updating Fontawesome</a> section.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Sidebar icons now have a <code>.menu-icon</code> class name.
|
<a class="help-more" href="#basics/sidebar.layout.item">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Default mobile view sidebar should have <code>.responsive</code> class name now.
|
<br />
|
<a href="#basics/sidebar.mobile" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Default mobile menu toggle button has been moved to <code>.navbar</code>
|
but you can still use old style toggle button:
|
<div class="space-4"></div>
|
<div>
|
<span class="thumbnail inline">
|
<img src="images/old-toggle.png" />
|
</span>
|
<span class="middle inline">
|
<i class="fa fa-long-arrow-left blue"></i>
|
<i class="fa fa-long-arrow-right blue"></i>
|
</span>
|
<span class="thumbnail inline no-margin-bottom">
|
<img src="images/new-toggle.png" />
|
</span>
|
</div>
|
<br />
|
If you want to use old style toggle button, note that the <code>.menu-text</code> element inside it has been renamed to <code>.toggler-text</code>
|
<br />
|
For more info plese see <a href="#basics/sidebar.mobile.toggle" class="help-more">Toggle Buttons</a> section or use the on-page help of demo files.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Navbar has a few markup changes. Please see <a href="#basics/navbar" class="help-more">Navbar section</a>.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
For default skin, you should add <code>.no-skin</code> class name to body element now.
|
<br />
|
For more info see <a href="#settings.skins" class="help-more">Skins</a> section.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
<code>label</code> and <code>.lbl</code> elements had <code>vertical-align:middle</code>
|
CSS rule which is removed now.
|
<br />
|
You should add <code>.middle</code> class to those elements that are out of place now.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
<code>.sidebar-collapse</code> element is now <code>.sidebar-toggle .sidebar-collapse</code>.
|
<br />
|
This is because, there is now <code>.sidebar-toggle .sidebar-expand</code> for 2nd mobile menu style.
|
<br />
|
<a href="#basics/sidebar.layout.minimize" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
If you are using settings box it should now be put right after
|
<code>.page-content</code> element's opening tag.
|
<br />
|
It also has a slightly different HTML markup.
|
<a href="#settings.box" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
No need for <code>.main-container-inner</code> element any more.
|
<br />
|
<a href="#basics/layout" class="help-more">More info</a>
|
</li>
|
|
<li>
|
Treeview element had two special icons <code>.icon-plus</code> and <code>.icon-minus</code>
|
which have been renamed to <code>.tree-plus</code> and <code>.tree-minus</code>
|
<br />
|
<a href="#plugins/fuleux.treeview" class="help-more">More info</a>
|
</li>
|
|
<li>
|
Widget box title should now have <code>.widget-title</code> class and also widget color options
|
are now applied to the box, not header.
|
<br />
|
For example <code>.widget-header.header-color-blue</code> becomes
|
<code>.widget-box.widget-color-blue</code>
|
<br />
|
<a href="#custom/widget-box" class="help-more">More info</a>
|
</li>
|
|
<li>
|
Login page links such as "forgot password", etc should now have a
|
<code>data-target</code> attribute.
|
<br />
|
<a href="#pages/login" class="help-more">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
<b>ace-ie.css</b> or <b>ace-ie.min.css</b>
|
was included only for <i>IE 8</i> and below. Now it should be included for <i>IE 9</i> as well, thus:
|
<div class="space-4"></div>
|
<pre class="light-green">
|
<!--[if lte IE <span class="light-red bolder">9</span>>
|
<link rel="stylesheet" href="<span class="purple bolder">path/to/assets/<span class="light-blue">ace-ie.min.css</span></span>" />
|
<![endif]-->
|
</pre>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
When building CSS files using the in-browser builder tool, you may be notified that output CSS file is large for IE9 and below.
|
<br />
|
In that case, make sure to include the extra CSS file <code>ace-part2.css</code> using the provided instructions.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Version number has been removed from jQuery file name for easier updates.
|
Therefore:
|
<br />
|
<code>jquery.2.1.9.min.js</code> becomes <code>jquery.min.js</code>
|
<br />
|
<code>jquery-1.x.min.js</code> becomes <code>jquery1x.min.js</code> (which is used for IE9 and below)
|
<br />
|
Same applies to jQuery UI:
|
<br />
|
<code>jquery-ui.min.js</code>
|
<br />
|
<code>jquery-ui.custom.min.js</code>
|
<br />
|
<code>jquery-ui.min.css</code>
|
<br />
|
<code>jquery-ui.custom.min.css</code>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
If you have used custom mobile view spacing element that add some space only in specific device widths,
|
the naming has changed a bit.
|
<br />
|
For example <code>.vspace-xs-16</code> has been changed to <code>.vspace-16-xs</code>.
|
<br />
|
This helps reduce number of CSS selectors.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
If you've used Mustache templates, some files and data have been renamed:
|
<ol>
|
<li><code>sidenav_navList</code> <i class="fa fa-double-angle-right"></i> <code>sidebar_items</code></li>
|
<li><code>topbar*</code> <i class="fa fa-double-angle-right"></i> <code>navbar*</code></li>
|
<li><code>sidenav*</code> <i class="fa fa-double-angle-right"></i> <code>sidebar*</code></li>
|
</ol>
|
</li>
|
</ul>
|
</div><!-- /.info-section -->
|
|
|
<h3 class="info-title smaller">3. Changes to Bootstrap</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
<i class="ace-icon fa fa-warning red"></i>
|
The included Bootstrap CSS file has been modified and is slightly different from original Bootstrap files.
|
<br />
|
You can still use original Bootstrap files but you should re-compile Ace LESS files with new variables.
|
<br />
|
See <a class="help-more" href="#files/css">CSS/LESS files</a> for more info on this.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
There is not much to about Bootstrap when updating from <b>v3.0</b> to <b>v3.1</b>
|
<br />
|
You can read more about it here:<br />
|
<span class="text-info">http://blog.getbootstrap.com/2014/01/30/bootstrap-3-1-0-released/</span>
|
or
|
<span class="text-info">https://github.com/twbs/bootstrap/issues/11734</span>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
With dropdown menus, use <code>.dropdown-menu-right</code> instead of <code>.pull-right</code>.
|
This includes <u class="dotted">navbar's user info dropdowns</u>.
|
</li>
|
</ul>
|
</div>
|
|
|
<h3 class="info-title smaller">4. Third Party Changes</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
If you are using Colorbox(slideshow) plugin, the latest version requires
|
<code>rel</code> parameter to work properly, for example <code>rel: 'colorbox'</code>.
|
<a class="help-more" href="#plugins/misc.colorbox">More info</a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Latest inline editable plugin doesn't come with datepicker option.
|
<br />
|
I added a custom addon for it.
|
<a class="help-more" href="#custom/inline-editable.date"><b>More info</b></a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Easy pie chart plugin's file has been renamed to <code>easypiechart.js</code>.
|
It was <code>easy-pie-chart.js</code>.
|
<br />
|
Also Android's default browser has a problem with latest version of easy pie chart, not rendering properly.
|
<br />
|
<span class="text-info">https://github.com/rendro/easy-pie-chart/issues/81</span>
|
<br />
|
You can use an older version of the plugin <code>jquery.easy-pie-chart-older.js</code>
|
and the problem does not exist.
|
</li>
|
|
<li>
|
I have also changed/customized a few things with some plugins including:
|
<ol>
|
<li><code>nextIcon</code> and <code>prevIcon</code> options for daterangepicker plugin</li>
|
<li>Added <code>function.bind</code> for IE in html5shiv (used by easypiechart)</li>
|
<li>Added bootboxes to markdown editor</li>
|
|
<li>And modified/customized a few things with FuelUX plugins</li>
|
</ol>
|
</li>
|
</ul>
|
</div>
|
|
|
</div><!-- /.help-content -->
|
|
|
<div class="hr hr-double hr32"></div>
|
<h2 class="blue lighter" data-id="#changes.v4">
|
Ace v1.1.3 to v1.2.0
|
</h2>
|
<div class="space-4"></div>
|
|
<div class="help-content">
|
<h3 class="info-title smaller">1. Updating to Bootstrap 3</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
The major change is upgrading your application to Bootstrap 3.
|
<br />
|
So you may want to take a look at the following guide for migrating to BS3:
|
<br />
|
<a href="http://bootply.com/bootstrap-3-migration-guide">http://bootply.com/bootstrap-3-migration-guide</a>
|
<br />
|
or Bootstrap's documentation:
|
<br />
|
<a href="http://getbootstrap.com/getting-started">http://getbootstrap.com/getting-started</a>
|
</li>
|
<li>
|
Here are a few quick tips:
|
<div class="space-4"></div>
|
<ul class="list-unstyled info-list">
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Use <code>.row</code> instead of <code>.row-fluid</code>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Use
|
<code>.col-xs-*</code>
|
<code>.col-sm-*</code>
|
<code>.col-md-*</code>
|
<code>.col-lg-*</code>
|
instead of
|
<code>.span*</code>
|
|
<div class="space-2"></div>
|
<div class="alert alert-danger">
|
<i class="ace-icon fa fa-warning"></i>
|
With Bootstrap 2.x it was alright to randomly have <code>.row-fluid</code> elements
|
without <code>.span*</code> children.
|
<br />
|
But with Bootstrap 3, you should remove those unused <code>.row</code> (<small>previously</small> <code>.row-fluid</code>)
|
elements that don't need/contain <code>.col-*-*</code> (<small>previously</small> <code>.span*</code>)
|
inside them and use <code>.clearfix</code> class if it has floating children or use no class at all.
|
</div>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Use <code>.btn-xs</code> <code>.btn-sm</code> <code>.btn-lg</code> instead of
|
<code>.btn-mini</code> <code>.btn-small</code> <code>.btn-large</code>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Use <code>.well-sm</code> <code>.well-lg</code> instead of
|
<code>.well-small</code> <code>.well-large</code>
|
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Use <code>.input-group</code> instead of
|
<code>.input-append</code> and <code>.input-prepend</code>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Update Bootstrap's modal dialog HTML code:
|
<br />
|
Now it needs <code>.modal-dialog</code> <code>.modal-content</code> classes
|
and the <code>.modal</code> doesn't need <code>.hide</code> class.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Bootstrap event names have been namespaced, so for example instead of
|
<code>$('#myModal').on('shown' , ...)</code> we now have <code>$('#myModal').on('shown.bs.modal' , ...)</code>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
No need for <b>bootstrap-responsive.css</b> or <b>ace-responsive.css</b> now.
|
<br />
|
They have been integrated with main CSS files.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
No need for
|
<code><span class="divider"><i class="arrow-icon"></i></span></code>
|
as breadcrumbs divider.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Images were responsive by default, i.e. they were limited to their container's size.
|
Now you should use <code>.img-responsive</code> class.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Use <code>.dropdown-header</code> instead of <code>.nav-header</code>.
|
This applies to user dropdown menus inside navbar.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-hand-o-right blue"></i>
|
Default typeahead plugin in Bootstrap 2 has been remove in BS3. <br />
|
I've included that in Ace's Javascript file.<br />
|
It is used in search box and also <b>Tag Input</b> plugin.
|
<br />
|
If you don't need it, you can build a custom Javascript without it.
|
</li>
|
|
<li>
|
<div class="alert alert-danger">
|
<i class="ace-icon fa fa-warning"></i>
|
Bootstrap 3 is now setting the CSS rule <code>box-sizing:border-box</code> on all HTML elements.
|
<br />
|
It means that if you had custom elements with specific dimensions, paddings and borders that relied on default browser value of
|
<code>box-sizing:contet-box</code>
|
you may now want to recalculate those values.
|
<br />
|
Also many third party plugins rely on the default browser value <b>content-box</b>.
|
<br />
|
Some of them are reset in <code>assets/css/less/bs3-reset.less</code>
|
<br />
|
See this for more info:
|
<span class="text-primary">http://getbootstrap.com/getting-started/#third-box-sizing</span>
|
</div>
|
</li>
|
</ul>
|
</li>
|
</ul>
|
</div><!-- /.info-section -->
|
|
|
<h3 class="info-title smaller">2. Changes to Ace</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Navbar structure and classes are now slightly different. Please see:
|
<code data-open-file="html" class="open-file">mustache/app/views/layouts/partials/_shared/navbar.mustache</code>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Document structure and classes are now slightly different.
|
Please see <code data-open-file="html" class="open-file">mustache/app/views/layouts/default.mustache</code>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Use <code>data-icon-show</code> <code>data-icon-hide</code> attributes inside <code>.accordion-toggle</code> elements
|
to specify icons used when toggling panels.
|
<br />
|
<a class="help-more" href="#elements.accordion.icon"><b>More info</b></a>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-hand-o-right blue"></i>
|
Some changes should be made to form elements inside <code>.form-horizontal</code>.
|
<br />
|
An example could be like this:
|
<pre data-language="html">
|
<div class="form-group">
|
<label for="id-username" class="col-sm-3 control-label no-padding-right">
|
Text Field
|
</label>
|
<div class="col-sm-9">
|
<input type="text" class="col-xs-10 col-sm-5" placeholder="Username" id="id-username">
|
</div>
|
</div>
|
</pre>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-hand-o-right blue"></i>
|
The wizard steps container doesn't need <code>.hide</code> class
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-hand-o-right blue"></i>
|
Gallery tags should be wrapped inside <code>.label-holder</code>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-hand-o-right blue"></i>
|
Use <code>.dropdown-only-icon</code>
|
instead of
|
<code>.dropdown-icon-only</code>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-hand-o-right blue"></i>
|
Use <code>.vspace-*-xs</code>
|
<code>.vspace-*-sm</code>
|
<code>.vspace-*-md</code>
|
<code>.vspace-*-lg</code>
|
instead of <code>.vspace-*</code>
|
for spacing that is visible only on specific sizes.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-hand-o-right blue"></i>
|
RTL styles has now been separated into <b>ace-rtl.css</b> file.
|
<br />
|
You can add or remove it as needed.
|
</li>
|
|
</ul>
|
</div><!-- /.info-section -->
|
</div><!-- /.help-content -->
|
|
|
<div class="hr hr-double hr32"></div>
|
<h2 class="blue lighter" data-id="#changes.v3">
|
Ace v1.1.2 to v1.1.3
|
</h2>
|
<div class="space-4"></div>
|
|
<div class="help-content">
|
<h3 class="info-title smaller">Changes to Ace</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
You should now add <code>.ace</code> class name to checkbox and radio buttons to style them.
|
<br />
|
Previously, browser checkboxes and radio buttons were hidden by default
|
and you needed to insert an <code>.lbl</code> element after them to be displayed correctly.
|
<br />
|
This caused some issues with environments or libraries that created checkboxes
|
automatically or differently
|
and wasn't easy to put <code>.lbl</code> after them.
|
<br />
|
So now, default checkboxes are shown without change
|
and you can style them by adding <code>.ace</code> class
|
to checkboxes and inserting an <code>.lbl</code> element after them.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
To have sidebar fixed by default you now should add
|
<code>.sidebar-fixed</code> class to <code>.sidebar</code> element
|
and to fix breadcrumbs you should add <code>.breadcrumbs-fixed</code>
|
class to <code>.breadcrumbs</code> element.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
You should now use <code>assets/js/ace-extra.js</code> inside <code>head</code> element
|
to dynamically enable/save/retrieve some user settings using Javascript, such as
|
fixing navbar/sidebar/breadcrumbs and sidebar collapse/expand.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
The <code>#sidebar-collapse</code> element's icon has two attributes <code>data-icon1</code> and
|
<code>data-icon2</code> which determine the button's icon in expanded/collapsed state.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
<code>#ace-settings-header</code> has been changed to <code>#ace-settings-navbar</code>
|
(i.e. the checkbox element inside settings box that fixes/unfixes navbar)
|
</li>
|
</ul>
|
</div><!-- /.info-section -->
|
|
|
|
<h3 class="info-title smaller">Third Party Changes</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Chosen plugin now uses <b>chosen-</b> prefix rather than <b>chzn-</b> for its classes.
|
<br />
|
If you have defined custom CSS rules or used <b>chzn-*</b> selectors inside your scripts, you may need to modify them accordingly.
|
</li>
|
</ul>
|
</div><!-- /.info-section -->
|
|
</div><!-- /.help-content -->
|
|
|
|
<div class="hr hr-double hr32"></div>
|
<h2 class="blue lighter" data-id="#changes.v2">
|
Ace v1.1.2
|
</h2>
|
<div class="space-4"></div>
|
<div class="help-content">
|
<h3 class="info-title smaller">Changes to Ace</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
CSS "ID"s have been replaced with classes.
|
<p>
|
So for example in CSS files where we had:
|
<br />
|
<code>
|
#main-content {
|
...
|
}
|
</code>
|
</p>
|
<p>
|
It has been changed to:
|
<br />
|
<code>
|
.main-content {
|
...
|
}
|
</code>
|
<p>
|
The element in HTML code still keeps the ID attribute, so previous Javascript code should work as expected.
|
</p>
|
<pre data-language="html">
|
<div class="main-container" id="main-container">
|
...
|
</div>
|
|
...
|
|
<a class="menu-toggler" id="menu-toggler">
|
<span class="toggler-text"></span>
|
</a>
|
</pre>
|
Basically you just need to add a class with the same ID value to HTML elements.
|
The specific changes are:
|
<ul>
|
<li><code>#user_info</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.user-info</code> (Topright user menu)</li>
|
<li><code>#user_menu</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.user-menu</code></li>
|
|
<li class="hr hr-8 dotted"></li>
|
|
<li><code>#menu-toggler</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.menu-toggler</code></li>
|
<li><code>#sidebar</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.sidebar</code></li>
|
<li><code>#sidebar-shortcuts</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.sidebar-shortcuts</code></li>
|
<li><code>#sidebar-shortcuts-large</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.sidebar-shortcuts-large</code></li>
|
<li><code>#sidebar-shortcuts-mini</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.sidebar-shortcuts-mini</code></li>
|
<li><code>#sidebar-collapse</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.sidebar-collapse</code></li>
|
|
<li class="hr hr-8 dotted"></li>
|
|
<li><code>#main-container</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.main-container</code></li>
|
<li><code>#main-content</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.main-content</code></li>
|
<li><code>#page-content</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.page-content</code></li>
|
|
<li class="hr hr-8 dotted"></li>
|
|
<li><code>#breadcrumbs</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.breadcrumbs</code></li>
|
<li><code>#nav-search</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.nav-search</code></li>
|
<li><code>#nav-search-input</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.nav-search-input</code></li>
|
<li><code>#nav-search-icon</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.nav-search-icon</code></li>
|
|
<li class="hr hr-8 dotted"></li>
|
|
<li><code>#ace-settings-container</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.ace-settings-container</code></li>
|
<li><code>#ace-settings-btn</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.ace-settings-btn</code></li>
|
<li><code>#ace-settings-box</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.ace-settings-box</code></li>
|
<li><code>#btn-scroll-up</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.btn-scroll-up</code></li>
|
</ul>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
The text on first level links of side navigation which was <code>SPAN</code> element, should now have <code>.menu-text</code> class:
|
<pre data-language="html">
|
<li>
|
<a href="index.html">
|
<i class="ace-icon fa fa-tachometer"></i>
|
<span class="menu-text">Dashboard</span>
|
</a>
|
</li></pre>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Similar things applies to <code>#menu-toggler</code> element.
|
<br />
|
You should add <code>.toggler-text</code> class name to its <code>SPAN</code> child:
|
<pre data-language="html">
|
<a href="#" class="menu-toggler" id="menu-toggler">
|
<span class="toggler-text"></span>
|
</li></pre>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
The default size of icons inside buttons have been removed.
|
<br />
|
You may specify icon sizes using <code>.bigger-110</code> ... <code>.bigger-300</code> as described later.
|
<pre data-language="html">
|
<a href="#" class="btn btn-app btn-primary">
|
<i class="ace-icon fa fa-envelope bigger-200"></i>
|
Email
|
</li></pre>
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Add <code>.home-icon</code> to the first breadcrumbs icon (the one indicating homepage).
|
</li>
|
|
</ul>
|
</div><!-- /.info-section -->
|
</div><!-- /.help-content -->
|
|
|
|
<div class="hr hr-double hr32"></div>
|
<h2 class="blue lighter">FontAwesome & Icons</h2>
|
<div class="space-4"></div>
|
|
<div class="help-content">
|
<h3 class="info-title smaller" data-id="#changes.fontawesome">Updating Fontawesome 3.x to 4.x</h3>
|
<div class="info-section">
|
<ul class="list-unstyled info-list">
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
Because there are multiple Font icon libraries which you can use and each one has a different naming convention,
|
I added a custom icon class name to be used with all fonts without the need to change CSS or JS code.
|
<div class="space-6"></div>
|
I have added <code>.ace-icon</code> class to be used on all icons except for those that don't any special styling.
|
<br />
|
Also <code>.menu-icon</code> should be used for sidebar icons.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
You can choose a different name other than <code>.ace-icon</code> by modifying
|
<code>@icon</code> variable inside <code>assets/css/less/variables.less</code>
|
and re-compiling LESS files.
|
<br />
|
Also inside:
|
<br />
|
<code>assets/js/ace.js</code>
|
<br />
|
or <code>dist/js/ace.min.js</code>
|
<br />
|
or
|
<code>assets/js/ace/ace.js</code>,
|
<div class="space-4"></div>
|
and
|
<div class="space-4"></div>
|
<code>assets/js/ace-extra.js</code>,
|
<br />
|
or
|
<code>dist/js/ace-extra.min.js</code>
|
<br />
|
|
you should change <code>ace.vars['icon']</code> and <code>ace.vars['.icon']</code>
|
to new values.
|
</li>
|
|
<li>
|
<i class="ace-icon fa fa-check"></i>
|
I have included a Javascript file which helps you to update all your files to use new icon names.
|
<br />
|
You can find it here
|
<code>build/icon.js</code>
|
and use it with Node.js like this:
|
<code>node icon.js --path=".../html/myfile.html"</code>
|
or
|
<code>node icon.js --path=".../mydir/"</code>
|
<br />
|
Options include:
|
<ol>
|
<li>
|
<b>path</b>: Path to the folder or file you want to update.
|
</li>
|
<li>
|
<b>ext</b>: if specified only this extensions will be updated.
|
</li>
|
</ol>
|
Example:
|
<br />
|
<code>node icon.js --path="path/to/file-or-folder"</code>
|
<br />
|
<code>node icon.js --path="path/to/file-or-folder" --ext="html|php|js"</code>
|
</li>
|
|
<li>
|
<div class="alert alert-danger">
|
If you want to use the <b>icon.js</b> script to update icon names,
|
make sure you have a copy of your files first.
|
<br />
|
Also if you want to use another name other than <code>.ace-icon</code> you should modify
|
<code>var ace_icon</code> variable inside the script.
|
</div>
|
</li>
|
</ul>
|
</div><!-- /.info-section -->
|
</div><!-- /.help-content -->
|
|
|
|
</section>
|
