Changeset 301

Timestamp:

01/21/2014 12:31:09 AM (13 years ago)

Author:

nacin

Message:

Trac: Add initial support for 'focuses'. These are a cross between a component and a keyword. Disabled for now - see #287.

Location:

sites/trunk/wordpress.org/public_html/style/trac

Files:

• wp-trac.css (modified) (2 diffs)
• wp-trac.js (modified) (6 diffs)

sites/trunk/wordpress.org/public_html/style/trac/wp-trac.css

@@ -1101 +1101 @@
 }
 #edit-keywords {
-        float: right;
         cursor: pointer;
         font-size: 8px;
         color: #999;
-        margin: 6px 6px 0 0;
+        margin: 6px 6px 0 6px;
 }
 #keyword-bin span a:hover {
@@ -1120 +1119 @@
         padding: 5px 6px 5px 0;
         text-align: right;
+}
+
+/* =Focuses */
+#properties table td#focuses {
+        padding: .6em 0 .3em;
+        height: 66px;
+}
+#focuses span {
+        float: left;
+}
+#focuses ul {
+        float: left;
+        width: 356px;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+}
+#focuses li {
+        font-size: 12px;
+        display: inline-block;
+        float: left;
+        margin: 0 0 6px 6px;
+        border-radius: 3px;
+        background: #eee;
+        color: #aaa;
+}
+#focuses a {
+        display: inline-block;
+        padding: 4px 7px;
+        color: inherit;
+        border-radius: 3px;
+        background: inherit;
+        text-decoration: none;
+        border-bottom: none;
+}
+#focuses li:hover,
+#focuses a:focus {
+        color: #000;
+        cursor: pointer;
+}
+#focuses li.active,
+#focuses li.active a:focus {
+        background: #666;
+        color: #fff;
 }
 

sites/trunk/wordpress.org/public_html/style/trac/wp-trac.js

@@ -1 @@
-var wpTrac, coreKeywordList, gardenerKeywordList;
+var wpTrac, coreKeywordList, gardenerKeywordList, coreFocusesList;
 
 (function($){
@@ -27 +27 @@
         };
 
+        coreFocusesList = {
+                'ui' : 'UI or design related.',
+                'javascript' : 'Heavy JavaScript focus.',
+                // 'accessibility' : 'Accessibility focus.',
+                'unit tests' : 'PHP or JS unit tests.',
+                'docs' : 'Documentation focus.',
+                'rtl' : 'Right-to-left languages.',
+                'administration' : 'Dashboard related, but assigned a more specifc component.',
+                'template' : 'Relating to theme template functions, but assigned a more specific component.',
+                'performance' : 'Performance or caching (but not the Cache API component).',
+                // 'multisite' : 'Relating to multisite, but assigned a more specific component.'
+        };
+
         gardenerKeywordList = [ 'commit', 'early', 'i18n-change' ];
 
@@ -357 +370 @@
                                         $('#field-owner').parents('tr').remove();
 
-                                        html = '<a id="edit-keywords">manual</a>';
-                                        html += '<div><label id="keyword-label" for="keyword-add" style="width:' + labelWidth + 'px">Workflow Keywords:</label>';
-                                        html += '<select id="keyword-add"><option value=""> - Add - </option></select></div>';
+                                        html = '<div><label id="keyword-label" for="keyword-add" style="width:' + labelWidth + 'px">Workflow Keywords:</label>';
+                                        html += '<select id="keyword-add"><option value=""> - Add - </option></select> <a id="edit-keywords">manual</a></div>';
                                         html += '<div id="keyword-bin"></div>';
                                         container.prepend( html );
@@ -380 +392 @@
 
                                         // Replace commas, collapse spaces, trim, then split by space.
-                                        keywords = $.trim( elements.hiddenEl.val().replace(',', ' ').replace(/ +/g, ' ') ).split(' ');
+                                        keywords = $.trim( elements.hiddenEl.val().replace(/,/g, ' ').replace(/ +/g, ' ') ).split(' ');
 
                                         // Put our cleaned up version back into the hidden field.
@@ -397 +409 @@
                                         // Populate the dropdown.
                                         if ( elements.add ) {
-                                                elements.add.empty();
+                                                elements.add.children().not('[value=""]').remove();
                                         } else {
                                                 elements.add = $('#keyword-add');
@@ -476 +488 @@
                                 }
                         }
+                }()),
+
+                focuses: (function() {
+                        var field, container, focuses, originalFocuses;
+
+                        function init() {
+                                var ul, classes;
+                                if ( typeof coreFocusesList === 'undefined' ) {
+                                        return;
+                                }
+
+                                field = $( '#field-focuses' );
+                                if ( field.length === 0 ) {
+                                        return;
+                                }
+                                $('label[for="field-focuses"]').parent().remove();
+                                field.parent().attr({ colspan: 2, id: 'focuses' });
+                                field.hide();
+
+                                focuses = $.trim( field.val().replace(/,/g, ' ').replace(/ +/g, ' ') );
+                                if ( focuses.length === 0 ) {
+                                        focuses = [];
+                                } else {
+                                        focuses = focuses.split( ' ' );
+                                }
+                                originalFocuses = $.merge( [], focuses );
+
+                                container = $( '#focuses' );
+                                container.append( '<span>Focuses:</span>' );
+                                ul = $( '<ul />' );
+                                $.each( coreFocusesList, function( focus, description ) {
+                                        classes = focus.replace( ' ', '-' );
+                                        if ( -1 !== $.inArray( focus, focuses ) ) {
+                                                classes += ' active';
+                                        }
+                                        ul.append( $( '<li />', {
+                                                'data-focus' : focus,
+                                                title: description,
+                                                class: classes
+                                        } ).html( '<a href="#">' + focus + '</a>' ) );
+                                });
+                                ul.appendTo( container );
+
+                                container.on( 'click', 'a', addRemove );
+                                container.closest( 'form' ).on( 'submit', submit );
+                        }
+
+                        function addRemove() {
+                                var focus = $( this ).parent();
+                                if ( focus.hasClass( 'active' ) ) {
+                                        remove( focus );
+                                } else {
+                                        add( focus );
+                                }
+                                return false;
+                        }
+
+                        function add( focus ) {
+                                focus.addClass( 'active' );
+                                focuses.push( focus.data( 'focus' ) );
+                                updateField();
+                        }
+
+                        function remove( focus ) {
+                                focus.removeClass( 'active' );
+                                var remove = focus.data( 'focus' );
+                                focuses = $.grep( focuses, function( value ) {
+                                        return value != remove;
+                                } );
+                                updateField();
+                        }
+
+                        function updateField() {
+                                var orderedFocuses = [];
+                                $.each( coreFocusesList, function( focus ) {
+                                        if ( -1 !== $.inArray( focus, focuses ) ) {
+                                                orderedFocuses.push( focus );
+                                        }
+                                });     
+                                field.val( orderedFocuses.join( ', ' ) );
+                        }
+
+                        function submit() {
+                                if ( focuses.length !== originalFocuses.length )
+                                        return;
+                                var testFocuses = $.grep( focuses, function(v) {
+                                        return -1 === $.inArray( v, originalFocuses );
+                                });
+                                // If the difference has no length, then restore to the original order.
+                                if ( ! testFocuses.length ) {
+                                        field.val( originalFocuses.join( ', ' ) );
+                                }
+                        }
+
+                        return {
+                                init: init
+                        };
                 }()),