Changeset 8642

Timestamp:

07/17/2014 07:19:23 PM (11 years ago)

Author:

johnjamesjacoby

Message:

UI improvements to admin area XProfile field options, bringing them inline with WordPress core UI sortable elements.

Location:

trunk/src/bp-xprofile/admin

Files:

• css/admin-rtl.css (modified) (6 diffs)
• css/admin.css (modified) (6 diffs)
• js/admin.js (modified) (3 diffs)

trunk/src/bp-xprofile/admin/css/admin-rtl.css

@@ -77 +77 @@
     }
 
+    .bp-option a.delete,
     .field-wrapper a.deletion,
     .tab-toolbar a.deletion {
         color: #f00;
         border-bottom: 1px solid #f00;
-        font-size: 12px;
         text-decoration: none;
         padding: 0;
-        margin: -2px 5px 0 0;
-    }
-
-    div.actions div.delete-button {
+    }
+
+    div.delete-button {
         float: right;
         line-height: 28px;
-    }
-
-    div.tab-toolbar a.button-primary {
-        color: #fff !important; /* Overriding a WP !important */
+        margin: 0 10px 0 0;
     }
 
@@ -106 +102 @@
     .tab-wrapper fieldset {
         position: relative;
-        cursor: default !important;
-        }
+        cursor: default;
+    }
         .tab-wrapper fieldset legend {
             font-weight: bold;
@@ -118 +114 @@
         border: 1px solid #ddd;
         margin: 10px 0;
-        cursor: move !important;
+        cursor: move;
         background: #fafafa;
         padding: 10px 0 0 ;
@@ -156 +152 @@
         display: block;
     }
+    .bp-options-box .ui-sortable-placeholder,
     .field-group fieldset.ui-sortable-placeholder {
         border: 1px dashed #999;
@@ -192 +189 @@
         font-size: 11px;
         color: #555;
-    }
-
-    select.multi-select {
-        width:90%;
-        height:10em !important;
     }
 
@@ -214 +206 @@
 }
 
-div.options-box {
-    margin-right: 20px !important;
-    margin-left: 10px !important;
-    border-right: 4px solid #EAF3FA;
-    padding-right: 15px;
+p.bp-option {
+    background: #fafafa;
+    border: 1px solid #dfdfdf;
+    margin: 10px 0;
+    padding: 10px 5px;
+}
+
+p.bp-option:hover {
+    border: 1px solid #999;
+}
+
+.bp-option-icon {
+    font: normal 20px/1 'dashicons';
+    speak: none;
+    display: inline-block;
+    padding: 0 2px 0 0;
+    top: 5px;
+    position: relative;
+    vertical-align: top;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-decoration: none !important;
+    color: #888;
+}
+
+p.bp-option .grabber:before {
+    content: "\f329";
 }
 

trunk/src/bp-xprofile/admin/css/admin.css

@@ -77 +77 @@
     }
 
+    .bp-option a.delete,
     .field-wrapper a.deletion,
     .tab-toolbar a.deletion {
         color: #f00;
         border-bottom: 1px solid #f00;
-        font-size: 12px;
         text-decoration: none;
         padding: 0;
-        margin: -2px 0 0 5px;
-    }
-
-    div.actions div.delete-button {
+    }
+
+    div.delete-button {
         float: right;
         line-height: 28px;
-    }
-
-    div.tab-toolbar a.button-primary {
-        color: #fff !important; /* Overriding a WP !important */
+        margin: 0 10px 0 0;
     }
 
@@ -106 +102 @@
     .tab-wrapper fieldset {
         position: relative;
-        cursor: default !important;
-        }
+        cursor: default;
+    }
         .tab-wrapper fieldset legend {
             font-weight: bold;
@@ -118 +114 @@
         border: 1px solid #ddd;
         margin: 10px 0;
-        cursor: move !important;
+        cursor: move;
         background: #fafafa;
         padding: 10px 0 0 ;
@@ -156 +152 @@
         display: block;
     }
+    .bp-options-box .ui-sortable-placeholder,
     .field-group fieldset.ui-sortable-placeholder {
         border: 1px dashed #999;
@@ -192 +189 @@
         font-size: 11px;
         color: #555;
-    }
-
-    select.multi-select {
-        width:90%;
-        height:10em !important;
     }
 
@@ -214 +206 @@
 }
 
-div.options-box {
-    margin-left: 20px !important;
-    margin-right: 10px !important;
-    border-left: 4px solid #EAF3FA;
-    padding-left: 15px;
+p.bp-option {
+    background: #fafafa;
+    border: 1px solid #dfdfdf;
+    margin: 10px 0;
+    padding: 10px 5px;
+}
+
+p.bp-option:hover {
+    border: 1px solid #999;
+}
+
+.bp-option-icon {
+    font: normal 20px/1 'dashicons';
+    speak: none;
+    display: inline-block;
+    padding: 0 0 0 2px;
+    top: 5px;
+    position: relative;
+    vertical-align: top;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-decoration: none !important;
+    color: #888;
+}
+
+p.bp-option .grabber:before {
+    content: "\f329";
 }
 

trunk/src/bp-xprofile/admin/js/admin.js

@@ -12 +12 @@
         theId        = document.getElementById(forWhat + '_option_number').value,
         newDiv       = document.createElement('p'),
-        newOption    = document.createElement('input'),
-        span         = document.createElement( 'span' ),
-        txt          = document.createTextNode( '\u00A0\u039E\u00A0' ),
+        grabber      = document.createElement( 'span' ),
+        newOption    = document.createElement( 'input' ),
+        label        = document.createElement( 'label' ),
         isDefault    = document.createElement( 'input' ),
-        span1        = document.createElement( 'span' ),
-        txt1         = document.createTextNode( ' Default Value ' ),
-
-        toDelete     = document.createElement( 'a' ),
-        toDeleteText = document.createTextNode( '[x]' );
+        txt1         = document.createTextNode( 'Default Value' ),
+        toDeleteText = document.createTextNode( 'Delete' ),
+        toDeleteWrap = document.createElement( 'div' );
+        toDelete     = document.createElement( 'a' );
 
     newDiv.setAttribute('id', forWhat + '_div' + theId);
-    newDiv.setAttribute('class', 'sortable');
+    newDiv.setAttribute('class', 'bp-option sortable');
+
+    grabber.setAttribute( 'class', 'bp-option-icon grabber');
 
     newOption.setAttribute( 'type', 'text' );
     newOption.setAttribute( 'name', forWhat + '_option[' + theId + ']' );
     newOption.setAttribute( 'id', forWhat + '_option' + theId );
-
-    span.appendChild( txt );
 
     if ( forWhat === 'checkbox' || forWhat === 'multiselectbox' ) {
@@ -41 +40 @@
     isDefault.setAttribute( 'value', theId );
 
-    span1.appendChild( txt1 );
-
     toDelete.setAttribute( 'href', 'javascript:hide("' + forWhat + '_div' + theId + '")' );
     toDelete.setAttribute( 'class', 'delete' );
     toDelete.appendChild( toDeleteText );
 
-    newDiv.appendChild( span );
+    toDeleteWrap.setAttribute( 'class', 'delete-button' );
+    toDeleteWrap.appendChild( toDelete );
+
+    label.appendChild( document.createTextNode( ' ' ) );
+    label.appendChild( isDefault );
+    label.appendChild( document.createTextNode( ' ' ) );
+    label.appendChild( txt1 );
+    label.appendChild( document.createTextNode( ' ' ) );
+
+    newDiv.appendChild( grabber );
+    newDiv.appendChild( document.createTextNode( ' ' ) );
     newDiv.appendChild( newOption );
-    newDiv.appendChild( document.createTextNode( ' ' ) );
-    newDiv.appendChild( isDefault );
-    newDiv.appendChild( span1 );
-    newDiv.appendChild( toDelete );
+    newDiv.appendChild( label );
+    newDiv.appendChild( toDeleteWrap );
     holder.appendChild( newDiv );
 
@@ -100 +105 @@
 
 function enableSortableFieldOptions( forWhat ) {
-    if ( jQuery( '#' + forWhat + ' p.sortable' ).length > 1 ) {
-        jQuery( '.bp-options-box' ).sortable( {
-            items: 'p.sortable',
-            tolerance: 'pointer',
-            axis: 'y',
-            handle: 'span'
-        });
-
-        jQuery( '.sortable span' ).css( 'cursor', 'move' );
-    }
+    jQuery( '.bp-options-box' ).sortable( {
+        cursor: 'move',
+        items: 'p.sortable',
+        tolerance: 'intersect',
+        axis: 'y'
+    });
+
+    jQuery( '.sortable, .sortable span' ).css( 'cursor', 'move' );
 }
 
 function destroySortableFieldOptions() {
     jQuery( '.bp-options-box' ).sortable( 'destroy' );
-    jQuery( '.sortable span' ).css( 'cursor', 'default' );
+    jQuery( '.sortable, .sortable span' ).css( 'cursor', 'default' );
 }