core/includes/menu.inc | 6 +++
core/misc/edit.png | 3 ++
core/modules/contextual/contextual.js | 47 +++++++++++++++---
core/modules/contextual/contextual.theme.css | 33 +++++++------
core/modules/edit/css/edit.css | 50 +++++++++++++++++---
core/modules/edit/images/icon-edit-active.png | 7 ++-
core/modules/edit/images/icon-edit.png | 5 --
.../editingWidgets/drupalcontenteditablewidget.js | 8 +---
.../edit/js/createjs/editingWidgets/formwidget.js | 10 +---
core/modules/edit/js/views/menu-view.js | 6 +++
.../edit/js/views/propertyeditordecoration-view.js | 2 -
core/modules/edit/js/views/toolbar-view.js | 46 ++++++++++++++++--
.../node/lib/Drupal/node/NodeRenderController.php | 6 +--
core/modules/node/node.module | 1 +
14 files changed, 169 insertions(+), 61 deletions(-)
diff --git a/core/includes/menu.inc b/core/includes/menu.inc
index e6810b8..2fda940 100644
--- a/core/includes/menu.inc
+++ b/core/includes/menu.inc
@@ -7,6 +7,7 @@
use Drupal\Core\Cache\CacheBackendInterface;
use Drupal\Core\Template\Attribute;
+use Drupal\node\Plugin\Core\Entity\Node;
/**
* @defgroup menu Menu system
@@ -2240,6 +2241,11 @@ function menu_local_tabs() {
function theme_menu_local_tasks(&$variables) {
$output = '';
+ $object = menu_get_object();
+ if ($object instanceof Node) {
+ return '';
+ }
+
if (!empty($variables['primary'])) {
$variables['primary']['#prefix'] = '' . t('Primary tabs') . '
';
$variables['primary']['#prefix'] .= '';
diff --git a/core/misc/edit.png b/core/misc/edit.png
new file mode 100644
index 0000000..d176245
--- /dev/null
+++ b/core/misc/edit.png
@@ -0,0 +1,3 @@
+PNG
+
+
IHDR !- #IDATxڵ́@EєKH)%XHDDĀ(Fl,ᗐۻ0BI>80LҿfPԠȾjpŰG.E4 ־kdpa:Ǐǣ7 9Bp08O TYv;C n8!C fcp(#=^Uu% _V9 T{l\Vy/X,
E{n>Zwf5x@EQ
t:C [L&9jȳ/$UW5 IENDB`
\ No newline at end of file
diff --git a/core/modules/contextual/contextual.js b/core/modules/contextual/contextual.js
index dee63e6..67a333e 100644
--- a/core/modules/contextual/contextual.js
+++ b/core/modules/contextual/contextual.js
@@ -7,6 +7,8 @@
"use strict";
+var contextuals = [];
+
/**
* Attaches outline behavior for regions associated with contextual links.
*/
@@ -14,7 +16,14 @@ Drupal.behaviors.contextual = {
attach: function (context) {
$('ul.contextual-links', context).once('contextual', function () {
var $this = $(this);
- $this.data('drupal-contextual', new Drupal.contextual($this, $this.closest('.contextual-region')));
+ var contextual = new Drupal.contextual($this, $this.closest('.contextual-region'));
+ contextuals.push(contextual);
+ $this.data('drupal-contextual', contextual);
+ });
+ // Bind to global edit mode changes
+ $('body').once('contextual', function (index, element) {
+ $(document)
+ .on('drupalEditMode.contextual', toggleEditMode);
});
}
};
@@ -54,15 +63,32 @@ Drupal.contextual.prototype.init = function() {
.attr('aria-pressed', false)
.prependTo(this.$wrapper);
- // Bind behaviors through delegation.
- var highlightRegion = $.proxy(this.highlightRegion, this);
+ // The trigger behaviors are never detached or mutated.
this.$region
.on('click.contextual', '.contextual .trigger', $.proxy(this.triggerClickHandler, this))
- .on('mouseenter.contextual', {highlight: true}, highlightRegion)
- .on('mouseleave.contextual', {highlight: false}, highlightRegion)
.on('mouseleave.contextual', '.contextual', {show: false}, $.proxy(this.triggerLeaveHandler, this))
- .on('focus.contextual', '.contextual-links a, .contextual .trigger', {highlight: true}, highlightRegion)
- .on('blur.contextual', '.contextual-links a, .contextual .trigger', {highlight: false}, highlightRegion);
+ // Attach highlight behaviors.
+ this.attachHighlightBehaviors();
+};
+
+/**
+ *
+ */
+Drupal.contextual.prototype.attachHighlightBehaviors = function () {
+ // Bind behaviors through delegation.
+ var highlightRegion = $.proxy(this.highlightRegion, this);
+ this.$region
+ .on('mouseenter.contextual.highlight', {highlight: true}, highlightRegion)
+ .on('mouseleave.contextual.highlight', {highlight: false}, highlightRegion)
+ .on('focus.contextual.highlight', '.contextual-links a, .contextual .trigger', {highlight: true}, highlightRegion)
+ .on('blur.contextual.highlight', '.contextual-links a, .contextual .trigger', {highlight: false}, highlightRegion);
+};
+
+/**
+ *
+ */
+Drupal.contextual.prototype.detachHighlightBehaviors = function () {
+ this.$region.off('.contextual.highlight');
};
/**
@@ -138,6 +164,13 @@ Drupal.contextual.prototype.showLinks = function(show) {
};
+function toggleEditMode (event, data) {
+ for (var i = contextuals.length - 1; i >= 0; i--) {
+ contextuals[i][(data.editable) ? 'detachHighlightBehaviors' : 'attachHighlightBehaviors']();
+ contextuals[i].$region.toggleClass('contextual-region-active', data.editable);
+ };
+}
+
/**
* Wraps contextual links.
*
diff --git a/core/modules/contextual/contextual.theme.css b/core/modules/contextual/contextual.theme.css
index aca019c..ac6a1c4 100644
--- a/core/modules/contextual/contextual.theme.css
+++ b/core/modules/contextual/contextual.theme.css
@@ -21,28 +21,31 @@
* Contextual trigger.
*/
.contextual .trigger {
- background: transparent url("images/gear-select.png") no-repeat 2px 0;
- border: 1px solid transparent;
- border-radius: 4px 4px 0 0;
+ background-attachment: scroll;
+ background-color: #ffffff;
+ background-image: url("../../misc/edit.png");
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: 16px 16px;
+ border: 1px solid #dddddd;
+ border-radius: 13px;
+ box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
/* Override the .element-focusable height: auto */
- height: 18px !important;
+ height: 28px !important;
float: right; /* LTR */
margin: 0;
overflow: hidden;
padding: 0 2px;
position: relative;
- width: 34px;
+ right: 2px;
+ width: 28px;
text-indent: -9999px;
z-index: 2;
}
-.no-touch .contextual .trigger:hover,
.contextual-links-active .trigger {
- background-position: 2px -18px;
-}
-.contextual-links-active .trigger {
- background-color: #fff;
- border-bottom: none;
- border-color: #d6d6d6;
+ border-bottom-color: transparent;
+ border-radius: 13px 13px 0 0;
+ box-shadow: none;
}
/**
@@ -52,7 +55,7 @@
*/
.contextual-region .contextual .contextual-links {
background-color: #fff;
- border: 1px solid #d6d6d6;
+ border: 1px solid #dddddd;
border-radius: 4px 0 4px 4px; /* LTR */
clear: both;
float: right; /* LTR */
@@ -90,5 +93,7 @@
text-decoration: none;
}
.no-touch .contextual-region .contextual .contextual-links li a:hover {
- background-color: #bfdcee;
+ color: white;
+ background-image: -webkit-linear-gradient(rgb(78,159,234) 0%,rgb(65,126,210) 100%);
+ background-image: linear-gradient(rgb(78,159,234) 0%,rgb(65,126,210) 100%);
}
diff --git a/core/modules/edit/css/edit.css b/core/modules/edit/css/edit.css
index 37e10eb..436e024 100644
--- a/core/modules/edit/css/edit.css
+++ b/core/modules/edit/css/edit.css
@@ -1,4 +1,32 @@
/**
+ * Pencil icon.
+ */
+.edit-toolbar-container .pencil {
+ background: #fff url(../../../misc/edit.png) no-repeat center center;
+ background-size: 16px 16px;
+ border: 1px solid #ddd;
+ border-radius: 13px;
+ -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+ -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+ box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+ height: 26px;
+ width: 26px;
+ margin: 0;
+ outline: none;
+ overflow: hidden;
+ padding:0;
+ text-indent: 34px;
+ position: absolute;
+ right: 2px; /* LTR */
+ top: 2px;
+}
+
+.edit-toolbar-container.edit-editing .pencil {
+ display: none;
+}
+
+
+/**
* Animations.
*/
.edit-animate-invisible {
@@ -75,10 +103,10 @@
* Toolbar.
*/
.icon-edit:before {
- background-image: url("../images/icon-edit.png");
+ background-image: url("../../../misc/edit.png");
}
.icon-edit:active:before,
-.active .icon-edit:before {
+.active.icon-edit:before {
background-image: url("../images/icon-edit-active.png");
}
.toolbar .tray.edit.active {
@@ -103,11 +131,10 @@
#edit_overlay {
position: fixed;
- z-index: 250;
+ /* @todo remove edit-overlay, not needed in this model */
+ z-index: -200000;
width: 100%;
height: 100%;
- background-color: #fff;
- background-color: rgba(255,255,255,.5);
top: 0;
left: 0;
}
@@ -122,11 +149,18 @@
}
.edit-field.edit-editable,
.edit-field .edit-editable {
- box-shadow: 0 0 1px 1px #4d9de9;
+ /**
+ * In the latest design, there's no need to indicate candidates, since they
+ * now use pencil icons.
+ * This will probably be necessary again before release.
+ */
}
/* Highlighted (hovered) editable. */
.edit-editable.edit-highlighted {
+ z-index: 305;
+}
+.edit-editable.edit-highlighted {
min-width: 200px;
}
.edit-field.edit-editable.edit-highlighted,
@@ -279,6 +313,10 @@
bottom: 1px;
box-shadow: 0 0 1px 1px #0199ff, 0 0 3px 3px rgba(153, 153, 153, .5);
background: #fff;
+ display: none;
+}
+.edit-highlighted .edit-toolbar-heightfaker {
+ display: block;
}
/* The toolbar; these are not necessarily visible. */
diff --git a/core/modules/edit/images/icon-edit-active.png b/core/modules/edit/images/icon-edit-active.png
index ad84761..a9143aa 100644
--- a/core/modules/edit/images/icon-edit-active.png
+++ b/core/modules/edit/images/icon-edit-active.png
@@ -1,3 +1,8 @@
PNG
-
IHDR j `PLTE [ tRNS@ P00p`ϟ Dƙ IDATxe DQ8Ϩ/BDU9xV+D\?x@qWcF8wicS B}?v;Vf.V$JgX=Kضp 0X S"iRw\:LL\~;Z5wu 5E)L IENDB`
\ No newline at end of file
+
IHDR !- IDATxڭmP]@ )(%P GܕHX@ JH<( 4p|O%}y Y~
+tu&0h A+\l'Sv'`^+yX
+)DsqV+9%FaHrTCͦs"6
+sPa%"y{{Soր=!_\Ay }O` |l0GE+! &hdY0'/M`NR!C2Nh~CR˂sW9yiH. "D0G\Od2Q
+R> Hq.APa`0.h߹#.~_az&.w&Ha *ѿ
+⹆ M0Gia MHn0GCNs n+Cժ a"B O+}37 IENDB`
\ No newline at end of file
diff --git a/core/modules/edit/images/icon-edit.png b/core/modules/edit/images/icon-edit.png
deleted file mode 100644
index 4f0dcc2..0000000
--- a/core/modules/edit/images/icon-edit.png
+++ /dev/null
@@ -1,5 +0,0 @@
-PNG
-
-
IHDR j PLTE̻ʪ̡̜ˠ̣̽¼Ƿ ʨªZ(e +tRNSϟ `π@`0p0p`0Pϟϟ c IDATxeW0 {W
-H"ʵ,y {Hpyo?mf,RBRxB vL;&LPJaRb\(Tbn(1wϔJ)ԈkS
-58 ä T^4 P6c}[i <ާ'-+HP>K IENDB`
\ No newline at end of file
diff --git a/core/modules/edit/js/createjs/editingWidgets/drupalcontenteditablewidget.js b/core/modules/edit/js/createjs/editingWidgets/drupalcontenteditablewidget.js
index 5671f39..caac604 100644
--- a/core/modules/edit/js/createjs/editingWidgets/drupalcontenteditablewidget.js
+++ b/core/modules/edit/js/createjs/editingWidgets/drupalcontenteditablewidget.js
@@ -29,13 +29,6 @@
_initialize: function() {
var that = this;
- // Sets the state to 'activated' upon clicking the element.
- this.element.on("click.edit", function(event) {
- event.stopPropagation();
- event.preventDefault();
- that.options.activated();
- });
-
// Sets the state to 'changed' whenever the content has changed.
var before = jQuery.trim(this.element.text());
this.element.on('keyup paste', function (event) {
@@ -68,6 +61,7 @@
case 'highlighted':
break;
case 'activating':
+ this.options.activated();
break;
case 'active':
// Sets the "contenteditable" attribute to "true".
diff --git a/core/modules/edit/js/createjs/editingWidgets/formwidget.js b/core/modules/edit/js/createjs/editingWidgets/formwidget.js
index 3238566..ac89857 100644
--- a/core/modules/edit/js/createjs/editingWidgets/formwidget.js
+++ b/core/modules/edit/js/createjs/editingWidgets/formwidget.js
@@ -29,15 +29,7 @@
/**
* Implements Create's _initialize() method.
*/
- _initialize: function() {
- // Sets the state to 'activating' upon clicking the element.
- var that = this;
- this.element.on("click.edit", function(event) {
- event.stopPropagation();
- event.preventDefault();
- that.options.activating();
- });
- },
+ _initialize: function() {},
/**
* Makes this PropertyEditor widget react to state changes.
diff --git a/core/modules/edit/js/views/menu-view.js b/core/modules/edit/js/views/menu-view.js
index ac7c4e4..47e2955 100644
--- a/core/modules/edit/js/views/menu-view.js
+++ b/core/modules/edit/js/views/menu-view.js
@@ -34,6 +34,10 @@ Drupal.edit.views.MenuView = Backbone.View.extend({
$('#toolbar-administration').on('click.edit', '.bar a:not(#toolbar-tab-edit)', _.bind(function (event) {
this.model.set('isViewing', true);
}, this));
+
+ // Add quick edit links to all contextual menus where editing the full node is possible.
+ $('ul.contextual-links li.node-edit').before('- ' + Drupal.t('Quick edit') + '
');
+
// We have to call stateChange() here because URL fragments are not passed
// to the server, thus the wrong anchor may be marked as active.
this.stateChange();
@@ -64,6 +68,8 @@ Drupal.edit.views.MenuView = Backbone.View.extend({
Drupal.toolbar.setHeight();
}
}
+ // Let other modules respond to the edit mode change.
+ $(document).trigger('drupalEditMode', {'editable': !isViewing});
},
/**
* Handles clicks on the edit tab of the toolbar.
diff --git a/core/modules/edit/js/views/propertyeditordecoration-view.js b/core/modules/edit/js/views/propertyeditordecoration-view.js
index 0eb4e45..aabd72c 100644
--- a/core/modules/edit/js/views/propertyeditordecoration-view.js
+++ b/core/modules/edit/js/views/propertyeditordecoration-view.js
@@ -17,8 +17,6 @@ Drupal.edit.views.PropertyEditorDecorationView = Backbone.View.extend({
_widthAttributeIsEmpty: null,
events: {
- 'mouseenter.edit' : 'onMouseEnter',
- 'mouseleave.edit' : 'onMouseLeave',
'tabIn.edit': 'onMouseEnter',
'tabOut.edit': 'onMouseLeave'
},
diff --git a/core/modules/edit/js/views/toolbar-view.js b/core/modules/edit/js/views/toolbar-view.js
index 90f5db7..41e15ad 100644
--- a/core/modules/edit/js/views/toolbar-view.js
+++ b/core/modules/edit/js/views/toolbar-view.js
@@ -29,7 +29,10 @@ Drupal.edit.views.ToolbarView = Backbone.View.extend({
'click.edit button.label': 'onClickInfoLabel',
'mouseleave.edit': 'onMouseLeave',
'click.edit button.field-save': 'onClickSave',
- 'click.edit button.field-close': 'onClickClose'
+ 'click.edit button.field-close': 'onClickClose',
+ 'mouseenter .pencil': 'onPencilMouseEnter',
+ 'mouseleave .pencil': 'onPencilMouseLeave',
+ 'click .pencil': 'onPencilClick'
},
/**
@@ -66,19 +69,26 @@ Drupal.edit.views.ToolbarView = Backbone.View.extend({
stateChange: function(from, to) {
switch (to) {
case 'inactive':
- // Nothing happens in this stage.
+ if (from) {
+ this.remove();
+ }
break;
case 'candidate':
- if (from !== 'inactive') {
+ if (from === 'inactive') {
+ this.render();
+ }
+ else {
+ // Remove all toolgroups; they're no longer necessary.
+ this.$el
+ .removeClass('edit-highlighted edit-editing')
+ .find('.edit-toolbar .edit-toolgroup').remove();
if (from !== 'highlighted' && this.getEditUISetting('padding')) {
this._unpad();
}
- this.remove();
}
break;
case 'highlighted':
// As soon as we highlight, make sure we have a toolbar in the DOM (with at least a title).
- this.render();
this.startHighlight();
break;
case 'activating':
@@ -275,6 +285,7 @@ Drupal.edit.views.ToolbarView = Backbone.View.extend({
}
this.$el
+ .addClass('edit-highlighted')
.find('.edit-toolbar')
// Append the "info" toolgroup into the toolbar.
.append(Drupal.theme('editToolgroup', {
@@ -395,6 +406,10 @@ Drupal.edit.views.ToolbarView = Backbone.View.extend({
this.$el.insertBefore(this.editor.element);
}
+ // @todo: replace "Edit" with a proper (ARIA-like) string.
+ // @todo: ->