Changeset 37174

Timestamp:

04/11/2016 03:11:32 PM (8 years ago)

Author:

ocean90

Message:

TinyMCE, inline link: Make styles for the autocomplete results available on front end.

Also, replace the generic .alignright class with a more specific class to avoid styling issues with themes which have padding/margin attached to .alignright.

Props azaozz, imath.
Fixes #36461.

Location:

trunk/src/wp-includes

Files:

• css/editor.css (modified) (1 diff)
• js/tinymce/plugins/wplink/plugin.js (modified) (1 diff)

trunk/src/wp-includes/css/editor.css

@@ -1784 +1784 @@
     max-height: 200px;
     overflow-y: auto;
-}
-
-.wplink-autocomplete li {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    position: absolute;
+    border: 1px solid #5b9dd9;
+    -webkit-box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
+    box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
+    background-color: #fff;
+}
+
+.ui-autocomplete.wplink-autocomplete li {
+    margin-bottom: 0;
+    padding: 4px 10px;
     clear: both;
     white-space: normal;
+    text-align: left;
+}
+
+.ui-autocomplete.wplink-autocomplete li .wp-editor-float-right {
+    float: right;
+}
+
+.ui-autocomplete.wplink-autocomplete li.ui-state-focus {
+    background-color: #ddd;
+    cursor: pointer;
 }
 

trunk/src/wp-includes/js/tinymce/plugins/wplink/plugin.js

@@ -421 +421 @@
                     } ).autocomplete( 'instance' )._renderItem = function( ul, item ) {
                         return $( '<li role="option" id="mce-wp-autocomplete-' + item.ID + '">' )
-                        .append( '<span>' + item.title + '</span>&nbsp;<span class="alignright">' + item.info + '</span>' )
+                        .append( '<span>' + item.title + '</span>&nbsp;<span class="wp-editor-float-right">' + item.info + '</span>' )
                         .appendTo( ul );
                     };