Lookup dialog for WYSIWYG editor icons

See #2596

diff --git a/wcfsetup/install/files/acp/templates/bbcodeAdd.tpl b/wcfsetup/install/files/acp/templates/bbcodeAdd.tpl
index 671bc54b4f5e96f8ea45266741ba2ea2f7c61565..e22b9b1e89eab9d28f9aeb62d21fdcef181b2201 100644 (file)
--- a/wcfsetup/install/files/acp/templates/bbcodeAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/bbcodeAdd.tpl
@@ -189,7 +189,10 @@
                        <dl class="jsButtonSetting{if $errorField == 'wysiwygIcon'} formError{/if}">
                                <dt><label for="wysiwygIcon">{lang}wcf.acp.bbcode.wysiwygIcon{/lang}</label></dt>
                                <dd>
-                                       <input type="text" id="wysiwygIcon" name="wysiwygIcon" value="{$wysiwygIcon}" class="long">
+                                       <div class="inputAddon">
+                                               <input type="text" id="wysiwygIcon" name="wysiwygIcon" value="{$wysiwygIcon}" class="medium">
+                                               <a href="#" class="inputSuffix button jsButtonSearchWysiwygIcon"><span class="icon icon16 fa-search"></span></a>
+                                       </div>
                                        {if $errorField == 'wysiwygIcon'}
                                                <small class="innerError">
                                                        {if $errorType == 'empty'}
@@ -261,4 +264,17 @@
        </div>
 </form>
 
-{include file='footer'}
\ No newline at end of file
+{include file='fontAwesomeJavaScript'}
+<script data-relocate="true">
+       require(['WoltLabSuite/Core/Ui/Style/FontAwesome'], function (UiStyleFontAwesome) {
+               elBySel('.jsButtonSearchWysiwygIcon').addEventListener(WCF_CLICK_EVENT, function(event) {
+                       event.preventDefault();
+                       
+                       UiStyleFontAwesome.open(function(iconName) {
+                               elById('wysiwygIcon').value = 'fa-' + iconName;
+                       });
+               });
+       });
+</script>
+
+{include file='footer'}