From abbdd81476b8f28eaa5e40bdbeaaa1149c388f34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?"J.=20Rene=CC=81e=20Beach"?= Date: Fri, 1 Feb 2013 14:41:09 -0500 Subject: [PATCH] 1874664-56 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: J. Renée Beach --- core/misc/edit.png | 3 ++ core/modules/contextual/contextual.js | 47 +++++++++++++++++--- core/modules/contextual/contextual.theme.css | 33 ++++++++------ core/modules/edit/css/edit.css | 47 +++++++++++++++++--- 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 | 2 + .../edit/js/views/propertyeditordecoration-view.js | 2 - core/modules/edit/js/views/toolbar-view.js | 46 ++++++++++++++++--- 11 files changed, 155 insertions(+), 55 deletions(-) create mode 100644 core/misc/edit.png delete mode 100644 core/modules/edit/images/icon-edit.png 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:Ǐǣ79Bp08OTYv;C n8!C fcp(#=^Uu%_V9T{l\Vy/X, E{n>Zwf5x@EQ  t:C[L&9jȳ/$UW5IENDB` \ 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..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 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  - IHDRj `PLTE[tRNS@ P00p`ϟDƙIDATxe DQ8Ϩ/BDU9xV+D\?x@qWcF8wicS B}?v;Vf.V$JgX=Kضp0XS"iRw\:LL\~;Z5wu 5E)LIENDB` \ No newline at end of file + IHDR!-IDATxڭmP]”@ )(%PGܕHX@ JH<(4p|O%}y Y~ +tu&0hA+\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 MHn0GCNsn+Cժ a"BO+}37IENDB` \ 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 - - IHDRj PLTE̻ʪ̡̜ˠ̣̽¼ǷʨªZ(e+tRNSϟ `π@`0p0p`0PϟϟcIDATxeW0{W -H"ʵ,y {Hpyo?mf,RBRxB vL;&LPJaRb\(Tbn(1wϔJ)ԈkS -58äT^4P6c}[i <ާ'-+HP>KIENDB` \ 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..0f9ecc8 100644 --- a/core/modules/edit/js/views/menu-view.js +++ b/core/modules/edit/js/views/menu-view.js @@ -64,6 +64,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: ->