Widgets: move the chooser inside the selected widget so it inherits the width, add some keyboard shortcuts: tab to select, enter to append and escape to cancel. Props shaunandrews, see #25821

Built from https://develop.svn.wordpress.org/trunk@26271


git-svn-id: http://core.svn.wordpress.org/trunk@26176 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz
2013-11-19 18:03:09 +00:00
parent 8321cdd567
commit c19660468b
7 changed files with 112 additions and 63 deletions

View File

@@ -10190,8 +10190,8 @@ div#widgets-left .widget-holder {
#available-widgets .widget .widget-description {
display: block;
padding: 10px 16px;
font-size: 12px;
padding: 10px 16px;
font-size: 12px;
}
/* Inactive Sidebars */
@@ -10495,10 +10495,10 @@ div#widgets-right .widgets-sortables:before {
}
/* Widgets Area Chooser merge */
/* Widgets Area Chooser */
.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
transition: opacity 0.2s ease-in-out;
transition: opacity 0.1s linear;
}
.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
@@ -10523,56 +10523,71 @@ div#widgets-right .widgets-sortables:before {
#widgets-chooser {
clear: both;
display: none;
margin: auto;
padding-bottom: 10px;
max-width: 400px;
}
#widgets-chooser h3 {
font-size: 14px;
margin: 15px 0;
font-size: 12px;
padding: 15px 0 12px 35px;
margin: 0;
border-top: 1px solid #ccc;
background: rgba(0,0,0,0.6);
color: #fff;
}
#widgets-chooser ul.widgets-chooser-sidebars {
margin: 0 0 20px 0;
margin: 0;
list-style-type: none;
max-height: 300px;
overflow: auto;
}
#widgets-chooser ul.widgets-chooser-sidebars li {
#widgets-chooser li {
padding: 10px 15px 10px 35px;
background: #fff;
border: 1px solid #ccc;
border-bottom: none;
border-bottom: 1px solid #ccc;
margin: 0;
cursor: pointer;
outline: none;
position: relative;
transition: background: 0.2s ease-in-out;
}
#widgets-chooser ul.widgets-chooser-sidebars li:hover {
#widgets-chooser li:hover,
#widgets-chooser li:focus {
background: rgba(255,255,255,0.7);
}
#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected {
background: #1075a0;
color: #fff;
position: relative;
}
#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected:before {
#widgets-chooser li:focus:before {
content: '\f147';
display: block;
-webkit-font-smoothing: antialiased;
font: normal 26px/1 'dashicons';
color: #999;
position: absolute;
top: 7px;
left: 5px;
}
#widgets-chooser ul.widgets-chooser-sidebars li:last-child {
border-bottom: 1px solid #ccc;
#widgets-chooser li.widgets-chooser-selected {
background: #1075a0;
color: #fff;
}
#widgets-chooser li.widgets-chooser-selected:before,
#widgets-chooser li.widgets-chooser-selected:focus:before {
content: '\f147';
display: block;
-webkit-font-smoothing: antialiased;
font: normal 26px/1 'dashicons';
color: #fff;
position: absolute;
top: 7px;
left: 5px;
}
#widgets-chooser .widgets-chooser-actions {
clear: both;
padding: 10px 0 12px 0;
text-align: center;
}
@@ -12368,4 +12383,4 @@ li#wp-admin-bar-toggle-button {
height: 100%;
z-index: 400;
}
}
}