81 lines
3.7 KiB
Text
81 lines
3.7 KiB
Text
|
[%# components/icon-browser.tt
|
||
|
|
|
||
|
|
Icon browser modal skeleton
|
||
|
|
|
||
|
|
Authors:
|
||
|
|
Afuna <coder.dw@afunamatata.com>
|
||
|
|
|
||
|
|
Copyright (c) 2015 by Dreamwidth Studios, LLC.
|
||
|
|
|
||
|
|
This program is free software; you may redistribute it and/or modify it under
|
||
|
|
the same terms as Perl itself. For a copy of the license, please reference
|
||
|
|
'perldoc perlartistic' or 'perldoc perlgpl'.
|
||
|
|
%]
|
||
|
|
|
||
|
|
[%- IF remote && remote.can_use_userpic_select -%]
|
||
|
|
|
||
|
|
[%- dw.need_res( { group => "foundation" },
|
||
|
|
"js/components/jquery.icon-browser.js"
|
||
|
|
"stc/css/components/icon-browser.css"
|
||
|
|
); -%]
|
||
|
|
|
||
|
|
[%- WRAPPER components/modal.tt id="js-icon-browser" class="icon-browser hide-icon-browser" options="animation:'fade'" -%]
|
||
|
|
<div class="icon-browser-flex-wrapper">
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="columns top-controls">
|
||
|
|
<button type="button" id="icon-browser-options-visibility" aria-label="Show or hide icon browser display options">
|
||
|
|
<img alt="" src="[% site.imgroot %]/collapse.svg" style="border: 0; width: 1em; padding: 0.2em; box-sizing: content-box; vertical-align: text-bottom;">
|
||
|
|
<span class="icon-browser-options-summary-large">Large</span>
|
||
|
|
<span class="icon-browser-options-summary-small">Small</span>
|
||
|
|
/
|
||
|
|
<span class="icon-browser-options-summary-meta">Text</span>
|
||
|
|
<span class="icon-browser-options-summary-no-meta">No text</span>
|
||
|
|
/
|
||
|
|
<span class="icon-browser-options-summary-date">By date</span>
|
||
|
|
<span class="icon-browser-options-summary-keyword">By keyword</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<fieldset class="icon-browser-options" id="js-icon-browser-order-option">
|
||
|
|
<legend>Order by</legend>
|
||
|
|
|
||
|
|
<input type="radio" name="js-icon-browser-order" value="date" id="js-icon-browser-order-date">
|
||
|
|
<label for="js-icon-browser-order-date">Date</label>
|
||
|
|
|
||
|
|
<input type="radio" name="js-icon-browser-order" value="keyword" id="js-icon-browser-order-keyword">
|
||
|
|
<label for="js-icon-browser-order-keyword">Keyword</label>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<fieldset class="icon-browser-options" id="js-icon-browser-meta-option">
|
||
|
|
<legend>Icon keywords</legend>
|
||
|
|
|
||
|
|
<input type="radio" name="js-icon-browser-meta" value="text" id="js-icon-browser-meta-text">
|
||
|
|
<label for="js-icon-browser-meta-text">Show</label>
|
||
|
|
|
||
|
|
<input type="radio" name="js-icon-browser-meta" value="no-text" id="js-icon-browser-meta-no-text">
|
||
|
|
<label for="js-icon-browser-meta-no-text">Hide</label>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<fieldset class="icon-browser-options" id="js-icon-browser-size-option">
|
||
|
|
<legend>Size</legend>
|
||
|
|
|
||
|
|
<input type="radio" name="js-icon-browser-size" value="small" id="js-icon-browser-size-small">
|
||
|
|
<label for="js-icon-browser-size-small">Small</label>
|
||
|
|
|
||
|
|
<input type="radio" name="js-icon-browser-size" value="large" id="js-icon-browser-size-large">
|
||
|
|
<label for="js-icon-browser-size-large">Large</label>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<label class='invisible' for='js-icon-browser-search'>Search</label>
|
||
|
|
<input type='search' id='js-icon-browser-search' placeholder='Search' />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="js-icon-browser-content" class="icon-browser-content">
|
||
|
|
<span class="icon-browser-status">Loading...</span>
|
||
|
|
<ul class="js-icon-browser-icon-grid"></ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
[%- END -%]
|
||
|
|
[%- END -%]
|