Updated to v2

- Rewrote a bunch of stuff
- Added search
- Updated to FontAwesome v4.5.0

README.md

@@ -1,8 +1,8 @@
 # TinyMCE FontAwesome Plugin
 
-###### v1.7.0
+###### v2.0.0
 
-A plugin that lets you insert FontAwesome icons via TinyMCE. Currently uses FontAwesome v4.4.0 and is tested on TinyMCE v4.1.10.
+A plugin that lets you insert FontAwesome icons via TinyMCE. Currently uses FontAwesome v4.5.0 and is tested on TinyMCE v4.3.1.
 
 
 ### Instructions
@@ -17,7 +17,7 @@ A plugin that lets you insert FontAwesome icons via TinyMCE. Currently uses Font
         ...
         extended_valid_elements: 'span[class]'
         ...
-        content_css: '//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css';
+        content_css: '//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';
         ...
         toolbar: 'fontawesome';
         ...

fontawesome.css

@@ -0,0 +1,154 @@
+.mce-fontawesome-panel .mce-container-body > .mce-container, 
+.mce-fontawesome-panel .mce-container-body > .mce-container > .mce-container-body { 
+    height: auto !important;
+    width: 670px;
+}
+
+.mce-fontawesome-panel .mce-container-body > .mce-container {
+    position: static;
+    margin-top: 10px;
+    margin-left: 10px;
+}
+
+.mce-fontawesome-panel-title {
+    font-weight: 700;
+    margin-top: 5px;
+    margin-bottom: 4px;
+    cursor: pointer;
+    padding: 6px;
+    border-bottom: 1px solid transparent;
+}
+
+.mce-fontawesome-panel-title:hover,
+.mce-fontawesome-panel-title:focus {
+    background-color: rgba(0,0,0,.1);
+}
+
+.mce-fontawesome-panel-search .mce-fontawesome-panel-title:hover,
+.mce-fontawesome-panel-search .mce-fontawesome-panel-title:focus {
+    background-color: transparent;
+}
+
+.mce-fontawesome-panel-accordion-open .mce-fontawesome-panel-title {
+    border-bottom-color: 1px solid #eee;
+}
+
+.mce-fontawesome-panel-accordion:first-child .mce-fontawesome-panel-title {
+    margin-top: 0;
+}
+
+.mce-fontawesome-panel-content {
+    transition: .5s height;
+    overflow: hidden;
+}
+
+.mce-fontawesome-panel .mce-icon-cell {
+    position: relative;
+    float: left;
+    width: 29px;
+    height: 29px;
+}
+
+.mce-fontawesome-panel .fa {
+    display: block;
+    line-height: 29px;
+    font-family: FontAwesome;
+    cursor: pointer;
+    text-align: center;
+    border-radius: 3px;
+}
+
+.mce-fontawesome-panel .fa:hover,
+.mce-fontawesome-panel .fa:focus {
+    background-color: rgba(0,0,0,.1);
+}
+
+/* Search */
+.mce-fontawesome-search-container {
+    position: absolute;
+    margin: 10px 0 0 10px;
+}
+
+.mce-fontawesome-search-container::before {
+    font-family: FontAwesome;
+    content: "\f002";
+    position: absolute;
+    top: 0;
+    left: 0;
+    line-height: 30px;
+    color: rgba(0,0,0,.4);
+}
+
+.mce-fontawesome-search-container-clear {
+    position: absolute;
+    display: none;
+    top: 0;
+    right: 0;
+}
+
+.mce-fontawesome-panel-search .mce-fontawesome-search-container-clear {
+    display: block;
+}
+
+.mce-fontawesome-search-container-clear span {
+    line-height: 30px;
+    color: rgba(0,0,0,.4);
+}
+
+.mce-fontawesome-search-container-clear:hover span,
+.mce-fontawesome-search-container-clear:focus span {
+    color: rgba(0,0,0,.8);
+}
+
+.mce-fontawesome-search-container input {
+    display: block;
+    width: 200px;
+    height: 30px;
+    line-height: 30px;
+    margin: 0;
+    padding: 0 25px 0 25px;
+    border: 0 solid;
+    border-bottom: 1px solid rgba(0,0,0,.2);
+    -moz-appearance:    textfield;
+    -webkit-appearance: textfield;
+    appearance: textfield;
+}
+
+.mce-fontawesome-search-container input::-webkit-input-placeholder {
+    color: rgba(0,0,0,.4);
+}
+
+.mce-fontawesome-search-container input::-moz-placeholder {
+    color: rgba(0,0,0,.4);
+}
+
+.mce-fontawesome-search-container input:-ms-input-placeholder {
+    color: rgba(0,0,0,.4);
+}
+
+.mce-fontawesome-search-noresults {
+    text-align: center;
+    color: rgba(0, 0, 0, 0.4);
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: calc(50% - 8px);
+}
+
+/* Toolbar icon */
+.mce-i-flag {
+    display: inline-block;
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    margin-right:1px;
+    position:relative;
+    top:1px;
+}
+
+.mce-i-flag:before {
+    content: "\f024";
+}