diff --git a/core/modules/contextual/contextual.js b/core/modules/contextual/contextual.js index b5ad030..0759515 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); }); } }; @@ -45,15 +54,32 @@ Drupal.contextual.prototype.init = function() { .text(Drupal.t('@action configuration options', {'@action': action})) .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'); }; /** @@ -121,6 +147,16 @@ 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. * * @return {String} diff --git a/core/modules/contextual/contextual.theme.css b/core/modules/contextual/contextual.theme.css index 2855dca..122234c 100644 --- a/core/modules/contextual/contextual.theme.css +++ b/core/modules/contextual/contextual.theme.css @@ -13,7 +13,7 @@ z-index: 999; } .contextual-region-active { - outline: 1px dashed #d6d6d6; + outline: 1px solid #007fff; outline-offset: 1px; } @@ -21,28 +21,27 @@ * 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: #ffffff url("../../misc/edit.png") no-repeat center center; + background-size: 16px 16px; + border: 1px solid #ddd; + 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-radius: 14px 14px 0 0; + border-bottom: 1px solid transparent; + box-shadow: 2px 0 0 rgba(0,0,0,0.15); } /** @@ -50,13 +49,15 @@ */ .contextual .contextual-links { background-color: #fff; - border: 1px solid #d6d6d6; - border-radius: 4px 0 4px 4px; /* LTR */ + border: 1px solid #ddd; + border-radius: 10px 0 10px 10px; /* LTR */ + box-shadow: 1px 1px 2px rgba(0,0,0,0.3); clear: both; float: right; /* LTR */ margin: 0; padding: 0.25em 0; position: relative; + right: 2px; text-align: left; /* LTR */ top: -1px; white-space: nowrap; @@ -73,10 +74,11 @@ line-height: 100%; } .contextual-region .contextual .contextual-links a { + color: black !important; display: block; font-family: sans-serif; font-size: small; - line-height: 0.8em; + line-height: 1.8em; margin: 0.25em 0; padding: 0.4em 0.6em; } @@ -89,5 +91,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..ce3d19e 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 { @@ -106,8 +134,6 @@ z-index: 250; width: 100%; height: 100%; - background-color: #fff; - background-color: rgba(255,255,255,.5); top: 0; left: 0; } @@ -122,11 +148,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 +312,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 ad847612de18d0d60e59026155697d0288313803..a9143aa98c3711973865fe8b538eab31258a2b3e 100644 GIT binary patch literal 515 zcmV+e0{s1nP)DS;9w!6i@t7f0NcNLWA;gt!c%0ZK>#JnRxEfez;UmK-#2e27n! zC4G|F_MWAAAedSB%6`9p3crxk>2!6CswOaK_>UY82SElaT#()rY`5Ddm{YlgtpyQw zC%xHVy`QMFJ}kA(aalCTL_?rZ6WjO<+!h1X8JhA%X})GM!Ep=4gHnLxcoU zsesFZ2y>Fx*H?u(d1(U@NTmWU2_mdS^78VcFh>KaT)>4-*aOLAGEtbLl?wQ<27?ebt~ zZ(qND{pr)E7cX7_MSyIe90$^~C#CeJ?-ymO|4Q}4`AhmXFR@vPRq%sMP>xn9_D zmAzg~={t8u*naokcVk;u!A2Q_2)Tyt;HgTPQ-jtpmJ7u!vug3#_58Qb=C+vE%j#ag nYqb`S5;tWme^)wH;T5;3tLB#pJ|7!^E@kj^^>bP0l+XkKE~LX> diff --git a/core/modules/edit/images/icon-edit.png b/core/modules/edit/images/icon-edit.png deleted file mode 100644 index 4f0dcc2367e114713beec8b8357fd54b558a9e22..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 498 zcmeAS@N?(olHy`uVBq!ia0vp^Vj#@H3?x5i&EW)62LgOTTn`*Luy*a*9XocMIdf+B z?%lIz&pvhP)T&jhfZT-(7XrySbLIdQtXZ>W#flY6mo7bh`t$-Y07~uMyBA0${oKmWXd0K=TW$(MoJwt2cZhE&{2JrT~-WFWwB@kVv{8V)XxO-e!=um8S(YO4<0 z%>9)-|6Yq!OL`Pkc7GMRb0&X-{kB|zGyxW!bwRV7W&|Cp*mjuBiKoox>S1fOBR&t` zeY_oTpno&JSK_>VL452 ->