diff --git a/core/modules/responsive_preview/config/responsive_preview.device.ipad.yml b/core/modules/responsive_preview/config/responsive_preview.device.ipad.yml index 6795ad8..7a1b498 100644 --- a/core/modules/responsive_preview/config/responsive_preview.device.ipad.yml +++ b/core/modules/responsive_preview/config/responsive_preview.device.ipad.yml @@ -6,5 +6,5 @@ dimensions: dppx: 2 orientation: portrait weight: 5 -status: 0 +status: 1 langcode: en diff --git a/core/modules/responsive_preview/config/responsive_preview.device.iphone5.yml b/core/modules/responsive_preview/config/responsive_preview.device.iphone5.yml index e38d0f0..d44c3a1 100644 --- a/core/modules/responsive_preview/config/responsive_preview.device.iphone5.yml +++ b/core/modules/responsive_preview/config/responsive_preview.device.iphone5.yml @@ -6,5 +6,5 @@ dimensions: dppx: 2 orientation: portrait weight: 3 -status: 0 +status: 1 langcode: en diff --git a/core/modules/responsive_preview/config/responsive_preview.device.medium.yml b/core/modules/responsive_preview/config/responsive_preview.device.medium.yml index 467ba82..d4d7c00 100644 --- a/core/modules/responsive_preview/config/responsive_preview.device.medium.yml +++ b/core/modules/responsive_preview/config/responsive_preview.device.medium.yml @@ -6,5 +6,5 @@ dimensions: dppx: 1.325 orientation: portrait weight: 1 -status: 1 +status: 0 langcode: en diff --git a/core/modules/responsive_preview/config/responsive_preview.device.nexus4.yml b/core/modules/responsive_preview/config/responsive_preview.device.nexus4.yml index 2f90b24..824742b 100644 --- a/core/modules/responsive_preview/config/responsive_preview.device.nexus4.yml +++ b/core/modules/responsive_preview/config/responsive_preview.device.nexus4.yml @@ -6,5 +6,5 @@ dimensions: dppx: 2 orientation: portrait weight: 6 -status: 0 +status: 1 langcode: en diff --git a/core/modules/responsive_preview/config/responsive_preview.device.nexus7.yml b/core/modules/responsive_preview/config/responsive_preview.device.nexus7.yml index 2affe9b..d6138fa 100644 --- a/core/modules/responsive_preview/config/responsive_preview.device.nexus7.yml +++ b/core/modules/responsive_preview/config/responsive_preview.device.nexus7.yml @@ -6,5 +6,5 @@ dimensions: dppx: 1.325 orientation: portrait weight: 7 -status: 0 +status: 1 langcode: en diff --git a/core/modules/responsive_preview/config/responsive_preview.device.small.yml b/core/modules/responsive_preview/config/responsive_preview.device.small.yml index 3e63537..bf44935 100644 --- a/core/modules/responsive_preview/config/responsive_preview.device.small.yml +++ b/core/modules/responsive_preview/config/responsive_preview.device.small.yml @@ -6,5 +6,5 @@ dimensions: dppx: 2 orientation: portrait weight: 0 -status: 1 +status: 0 langcode: en diff --git a/core/modules/responsive_preview/css/responsive-preview.icons.css b/core/modules/responsive_preview/css/responsive-preview.icons.css index 5060d1d..1dd177a 100644 --- a/core/modules/responsive_preview/css/responsive-preview.icons.css +++ b/core/modules/responsive_preview/css/responsive-preview.icons.css @@ -13,9 +13,10 @@ position: absolute; z-index: 1; } -.toolbar .bar .toolbar-tab-responsive-preview .icon:before { +.toolbar .toolbar-bar .toolbar-tab-responsive-preview .icon:before { width: 13px; } +.toolbar-tab-responsive-preview button.icon, .responsive-preview button.icon { background-color: transparent; border: 0; @@ -23,7 +24,7 @@ } /* Toolbar icon. */ -.toolbar .bar .icon.icon-responsive-preview { +.toolbar .toolbar-bar .icon.icon-responsive-preview { margin-left: 0; margin-right: 0; padding-left: 0; @@ -38,47 +39,44 @@ .toolbar-tab-responsive-preview .icon-responsive-preview:hover:before { background-position: center -22px; } -.toolbar .bar .toolbar-tab-responsive-preview .icon-responsive-preview:before { +.toolbar .toolbar-bar .toolbar-tab-responsive-preview .icon-responsive-preview:before { left: 1em; /* LTR */ height: 22px; top: 0.6667em; } -[dir="rtl"] .toolbar .bar .toolbar-tab-responsive-preview .icon-responsive-preview:before { - left: auto; /* LTR */ - right: 1em; +[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab-responsive-preview .icon-responsive-preview:before { + left: auto; + right: 6px; +} +.toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device.icon-active { + padding: 0.5em 1.3333em; + text-indent: 0; + -moz-transition: padding 0.25s; + -webkit-transition: padding 0.25s; + transition: padding 0.25s; +} +.toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device.icon-active.active { + padding-left: 2.25em; /* LTR */ } -.toolbar .toolbar-tab-responsive-preview.tab .options .device.icon-active { - padding-left: 2.25em; +[dir="rtl"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device.icon-active.active { + padding-left: 1.333em; + padding-right: 2.25em; } -.toolbar .toolbar-tab-responsive-preview.tab .options .device.icon-active:before { +.toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device.icon-active:before { background-position: -999px -999px; height: 14px; - left: 3px; /* LTR */ + left: 0.667em; /* LTR */ top: 0.5em; width: 13px; } -[dir="rtl"] .toolbar .toolbar-tab-responsive-preview.tab .options .device.icon-active:before { +[dir="rtl"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device.icon-active:before { left: auto; - right: 6px; + right: 0.667em; } -.toolbar .toolbar-tab-responsive-preview.tab .options .device.icon-active.active:before { +.toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device.icon-active.active:before { background-position: center -116px; } -@media only screen and (min-width: 16.5em) { - .toolbar .toolbar-tab-responsive-preview.tab .options .device.icon-active { - padding: 0.5em 1.3333em 0.5em 2.25em; /* LTR */ - text-indent: 0; - width: auto; - } - [dir="rtl"] .toolbar .toolbar-tab-responsive-preview.tab .options .device.icon-active { - padding: 0.5em 2.25em 0.5em 1.3333em; - text-indent: 0; - width: auto; - } - .toolbar .toolbar-tab-responsive-preview.tab .options .device.icon-active:before { - left: 0.667em; - } -} + /** * Responsive preview controls icons. diff --git a/core/modules/responsive_preview/css/responsive-preview.module.css b/core/modules/responsive_preview/css/responsive-preview.module.css index c26c0be..976c41d 100644 --- a/core/modules/responsive_preview/css/responsive-preview.module.css +++ b/core/modules/responsive_preview/css/responsive-preview.module.css @@ -19,12 +19,12 @@ } /* At narrow screen widths, float the tab to the left so it falls in line with * the rest of the toolbar tabs. */ -.js .toolbar .bar .toolbar-tab-responsive-preview.tab { +.toolbar .toolbar-bar .toolbar-tab-responsive-preview.toolbar-tab { display: block; float: right; /* LTR */ position: relative; } -[dir="rtl"].js .toolbar .bar .toolbar-tab-responsive-preview.tab { +[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab-responsive-preview.toolbar-tab { float: left; } .toolbar-tab-responsive-preview .trigger { @@ -40,8 +40,9 @@ .toolbar-tab-responsive-preview.open .item-list { display: block; } -.js .toolbar-tab-responsive-preview.tab .options li { +.toolbar-tab-responsive-preview.toolbar-tab .options li { float: none; + position: relative; } /** diff --git a/core/modules/responsive_preview/css/responsive-preview.theme.css b/core/modules/responsive_preview/css/responsive-preview.theme.css index 9dfb089..e2e0137 100644 --- a/core/modules/responsive_preview/css/responsive-preview.theme.css +++ b/core/modules/responsive_preview/css/responsive-preview.theme.css @@ -45,22 +45,26 @@ font-size: 1em; padding: 0.5em 1.3333em } -.toolbar .toolbar-tab-responsive-preview.tab .options .device { +.toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device { color: #777; + text-align: left; + width: 100%; } -.toolbar .toolbar-tab-responsive-preview.tab .options .device:hover, -.toolbar .toolbar-tab-responsive-preview.tab .options .device.active { +.toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device:hover, +.toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device.active { color: black; } -.toolbar .toolbar-tab-responsive-preview.tab .options .device[disabled] { +.toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device[disabled] { color: #ccc; cursor: default; } /* Configuration link. */ -.toolbar-tab-responsive-preview.tab .configure { +.toolbar-tab-responsive-preview.toolbar-tab .configure { border-top: 1px solid #000; color: #000; margin-top: 0.5em; + padding-bottom: 0.5em; + padding-top: 0.5em; } /* Toolbar tab triangle toggle. */ @@ -171,9 +175,9 @@ .responsive-preview .device-label { color: #bbbbbb; font-family: sans-serif; - font-size: 0.75em; + font-size: 0.85em; font-weight: normal; - left: 40px; + left: 30px; letter-spacing: 0.25ex; line-height: 2.6667; margin: 0; @@ -181,7 +185,7 @@ position: absolute; right: 40px; text-overflow: ellipsis; - top: 0; + bottom: 3px; white-space: nowrap; width: auto; } diff --git a/core/modules/responsive_preview/js/responsive-preview.js b/core/modules/responsive_preview/js/responsive-preview.js index f5d11d1..8c526f4 100644 --- a/core/modules/responsive_preview/js/responsive-preview.js +++ b/core/modules/responsive_preview/js/responsive-preview.js @@ -244,6 +244,41 @@ Drupal.responsivePreview = Drupal.responsivePreview || { // The dots per pixel of the device to preview. dppx: null } + }, + + /** + * {@inheritdoc} + */ + initialize: function () { + this.on('change:isActive', this.reset, this); + }, + + /** + * Puts the model back into a ready state where no device is active. + * + * @param Backbone.Model model + * This model. + * @param Boolean isActive + * Whether the responsive preview is currently active. + */ + reset: function (model, isActive) { + // Reset the model when it is deactivated. + if (!isActive) { + // Process this model change after any views have had the chance to + // react to the change of isActive. + var that = this; + window.setTimeout(function () { + that.set({ + isRotated: false, + activeDevice: null, + dimensions: { + width: null, + height: null, + dppx: null + } + }, {silent: true}); + }, 0); + } } }), @@ -334,8 +369,8 @@ Drupal.responsivePreview = Drupal.responsivePreview || { * {@inheritdoc} */ render: function () { - var $deviceLink = $(this.model.get('activeDevice')); - var name = $deviceLink.data('responsive-preview-name'); + var name = this.model.get('activeDevice'); + var $deviceLink = $('[data-responsive-preview-name="' + name + '"]', this.$el); var isActive = this.model.get('isActive'); var isDeviceListOpen = this.tabModel.get('isDeviceListOpen'); this.$el @@ -431,8 +466,8 @@ Drupal.responsivePreview = Drupal.responsivePreview || { * {@inheritdoc} */ render: function () { - var $deviceLink = $(this.model.get('activeDevice')); - var name = $deviceLink.data('responsive-preview-name'); + var name = this.model.get('activeDevice'); + var $deviceLink = $('[data-responsive-preview-name="' + name + '"]', this.$el); var isActive = this.model.get('isActive'); this.$el // Render the visibility of the toolbar block. @@ -557,13 +592,7 @@ Drupal.responsivePreview = Drupal.responsivePreview || { */ _build: function () { var offsets = this.envModel.get('offsets'); - var $frameContainer = $(Drupal.theme('responsivePreviewFrameContainer')) - .find('#responsive-preview-close span') - .text(this.strings.close) - .end() - .find('#responsive-preview-orientation span') - .text(this.strings.orientation) - .end() + var $frameContainer = $(Drupal.theme('responsivePreviewFrameContainer', this.strings)) // The padding around the frame must be known in order to position it // correctly, so the style property is defined in JavaScript rather than // CSS. @@ -600,7 +629,8 @@ Drupal.responsivePreview = Drupal.responsivePreview || { */ _refresh: function () { var isRotated = this.model.get('isRotated'); - var $deviceLink = $(this.model.get('activeDevice')); + var $deviceLink = $('[data-responsive-preview-name="' + this.model.get('activeDevice') + '"]').eq(0); + debugger; var $container = this.$el.find('#responsive-preview-frame-container'); var $frame = $container.find('> iframe'); var offsets = this.envModel.get('offsets'); @@ -671,12 +701,12 @@ Drupal.responsivePreview = Drupal.responsivePreview || { // If the width of the preview element is not equivalent to the // configured display width, display the actual width of the preview // in parentheses. - '@width': (displayWidth !== width * dimensions.dppx) ? ' (' + (width * dimensions.dppx) + 'px)' : '', + '@width': (displayWidth !== Math.floor(width * dimensions.dppx)) ? ' (' + (Math.floor(width * dimensions.dppx)) + 'px)' : '', '@displayHeight': displayHeight + 'px', // If the height of the preview element is not equivalent to the // configured display height, display the actual height of the preview // in parentheses. - '@height': (displayHeight !== height * dimensions.dppx) ? ' (' + (height * dimensions.dppx) + 'px)' : '', + '@height': (displayHeight !== Math.floor(height * dimensions.dppx)) ? ' (' + (Math.floor(height * dimensions.dppx)) + 'px)' : '', '@dpi': dimensions.dppx + 'ppx', '@orientation': (isRotated) ? this.strings.landscape : this.strings.portrait })); @@ -872,9 +902,15 @@ function updateDeviceList () { */ function selectDevice (event) { var $link = $(event.target); + var name = $link.data('responsive-preview-name'); + // If the clicked link is already active, then shut down the preview. + if (this.model.get('activeDevice') === name) { + this.model.set('isActive', false); + return; + } // Update the device dimensions. this.model.set({ - 'activeDevice': $link.get(0), + 'activeDevice': name, 'dimensions': { 'width': parseInt($link.data('responsive-preview-width'), 10), 'height': parseInt($link.data('responsive-preview-height'), 10), @@ -904,14 +940,16 @@ $.extend(Drupal.theme, { /** * Theme function for the close button for the preview container. * + * @param Object strings + * A hash of strings to use in the template. * @return * The corresponding HTML. */ - responsivePreviewFrameContainer: function () { + responsivePreviewFrameContainer: function (strings) { return '
' + '' - + '' - + '' + + '' + + '' + '
'; }, diff --git a/core/modules/responsive_preview/lib/Drupal/responsive_preview/Plugin/Block/ResponsivePreviewControlBlock.php b/core/modules/responsive_preview/lib/Drupal/responsive_preview/Plugin/Block/ResponsivePreviewControlBlock.php index 748a8bf..4b46cb1 100644 --- a/core/modules/responsive_preview/lib/Drupal/responsive_preview/Plugin/Block/ResponsivePreviewControlBlock.php +++ b/core/modules/responsive_preview/lib/Drupal/responsive_preview/Plugin/Block/ResponsivePreviewControlBlock.php @@ -25,7 +25,7 @@ class ResponsivePreviewControlBlock extends BlockBase { /** * Implements \Drupal\block\BlockBase::blockBuild(). */ - public function blockBuild() { + public function build() { $block = array( 'device_options' => array( '#theme' => 'item_list',