diff --git a/core/modules/display/config/display.bound.admin_master.yml b/core/modules/display/config/display.bound.admin_master.yml new file mode 100644 index 0000000..65aaf23 --- /dev/null +++ b/core/modules/display/config/display.bound.admin_master.yml @@ -0,0 +1,5 @@ +id: admin_master +label: Default admin layout +layout: static_layout:layout__two-col +layoutSettings: { } +blockInfo: diff --git a/core/modules/display/config/display.bound.front_master.yml b/core/modules/display/config/display.bound.front_master.yml new file mode 100644 index 0000000..54cf310 --- /dev/null +++ b/core/modules/display/config/display.bound.front_master.yml @@ -0,0 +1,5 @@ +id: front_master +label: Default layout +layout: static_layout:layout__two-col +layoutSettings: { } +blockInfo: diff --git a/core/modules/display/display.admin.css b/core/modules/display/display.admin.css new file mode 100644 index 0000000..d039ed3 --- /dev/null +++ b/core/modules/display/display.admin.css @@ -0,0 +1,305 @@ +z#display-blocks { + background-color:#fff; + -moz-box-shadow:0px 0px 1px 1px rgba(0,0,0,0.1); + -webkit-box-shadow:0px 0px 1px 1px rgba(0,0,0,0.1); + box-shadow:0px 0px 1px 1px rgba(0,0,0,0.1); +} + +z#display-blocks .layout-display { + border: 1px solid #ddd; + padding: 27px; +} + +/** + * Begions. + */ + +#display-blocks .layout-region .region-wrapper { + clear:both; + margin-top: 5px; + padding: 5px 15px 15px 15px; + background-color:rgb(255,255,255); + border-color:rgb(204,204,204); + border-width:1px; + border-style:solid; + -moz-box-shadow:0px 0px 1px 1px rgba(0,0,0,0.1); + -webkit-box-shadow:0px 0px 1px 1px rgba(0,0,0,0.1); + box-shadow:0px 0px 1px 1px rgba(0,0,0,0.1); +} + +#display-blocks .region-information { + clear:both; + display: block; + width: 100%; + text-align:right; + padding-bottom: 3px; + margin:0; + overflow: hidden; +} + +#display-blocks .region-label { + font-size:11px; + text-transform: uppercase; + letter-spacing:.1em; + margin-right: -.1em; + color: #666; +} + +#display-blocks .region-table { + clear:both; + display: table; + width: 100%; + table-layout:fixed; +} + +/** + * Blocks. + */ + +#display-blocks .region-blocks { + display: table-row; +} + +#display-blocks .block { + clear:both; + display: table-cell; + padding-right:15px; + height: 60px; + overflow: hidden; +} + +#display-blocks .master-block { + position: relative; + display: inline-block; + width: 100%; + height:100%; + background-image:-moz-linear-gradient(rgb(102,149,168) 0%,rgb(92,133,150) 99%,rgb(92,133,150) 100%); + background-image:-webkit-gradient(linear,color-stop(0, rgb(102,149,168)),color-stop(0.99, rgb(92,133,150)),color-stop(1, rgb(92,133,150))); + background-image:-webkit-linear-gradient(rgb(102,149,168) 0%,rgb(92,133,150) 99%,rgb(92,133,150) 100%); + background-image:linear-gradient(rgb(102,149,168) 0%,rgb(92,133,150) 99%,rgb(92,133,150) 100%); +} + +z#display-blocks .layout-block { + position: relative; + display: inline-block; + width: 100%; + height:100%; + background-image:-moz-linear-gradient(rgb(123,194,170) 0%,rgb(114,179,156) 99%,rgb(114,179,156) 100%); + background-image:-webkit-gradient(linear,color-stop(0, rgb(123,194,170)),color-stop(0.99, rgb(114,179,156)),color-stop(1, rgb(114,179,156))); + background-image:-webkit-linear-gradient(rgb(123,194,170) 0%,rgb(114,179,156) 99%,rgb(114,179,156) 100%); + background-image:linear-gradient(rgb(123,194,170) 0%,rgb(114,179,156) 99%,rgb(114,179,156) 100%); +} + +z#display-blocks .page-block { + position: relative; + display: inline-block; + width: 100%; + height:100%; + background-image:-moz-linear-gradient(rgb(137,211,124) 0%,rgb(128,198,117) 99%,rgb(128,198,117) 100%); + background-image:-webkit-gradient(linear,color-stop(0, rgb(137,211,124)),color-stop(0.99, rgb(128,198,117)),color-stop(1, rgb(128,198,117))); + background-image:-webkit-linear-gradient(rgb(137,211,124) 0%,rgb(128,198,117) 99%,rgb(128,198,117) 100%); + background-image:linear-gradient(rgb(137,211,124) 0%,rgb(128,198,117) 99%,rgb(128,198,117) 100%); +} + +#display-blocks .add-block { + display: table-cell; + border: 1px solid #ddd; + width: 60px !important; + height: 60px; + background-image:-moz-linear-gradient(rgb(254,254,254) 0%,rgb(225,225,225) 100%); + background-image:-webkit-gradient(linear,color-stop(0, rgb(254,254,254)),color-stop(1, rgb(225,225,225))); + background-image:-webkit-linear-gradient(rgb(254,254,254) 0%,rgb(225,225,225) 100%); + background-image:linear-gradient(rgb(254,254,254) 0%,rgb(225,225,225) 100%); +} + +#display-blocks .add-block:hover { + border: 1px solid #ccc; + -moz-box-shadow:0px 0px 1px 1px rgba(0,0,0,0.1); + -webkit-box-shadow:0px 0px 1px 1px rgba(0,0,0,0.1); + box-shadow:0px 0px 1px 1px rgba(0,0,0,0.1); +} + +#display-blocks .add-block-press { + border: 1px solid #c5c5c5; + background-image:-moz-linear-gradient(rgb(245,245,245) 0%,rgb(221,221,221) 100%); + background-image:-webkit-gradient(linear,color-stop(0, rgb(245,245,245)),color-stop(1, rgb(221,221,221))); + background-image:-webkit-linear-gradient(rgb(245,245,245) 0%,rgb(221,221,221) 100%); + background-image:linear-gradient(rgb(245,245,245) 0%,rgb(221,221,221) 100%); +} + +#display-blocks .plus-icon { + display: inline-block; + width: 100%; + height: 100%; + background-image:url(plus.png); + background-position:center; + background-repeat:no-repeat; +} + +z#display-blocks .rowspan { + width: 100%; + position: relative; +} + +z#display-blocks .column-left { + position:relative; + float: left; + width: 69.7%; + margin-bottom: 5px; +} + +z#display-blocks .column-right { + float: right; + width: 30%; + margin-bottom: 5px; +} + +/** + * Block information. + */ + +#display-blocks .block-information { + position: relative; + float: left; +} + +#display-blocks .block-type-indicator { + position: absolute; + left:0; + top:0; + width: 22px; + height: 22px; + border-right: 1px solid #fff; + border-bottom: 1px solid #fff; + text-align: center; + vertical-align:middle; + line-height: 200%; + font-size:11px; + font-weight:bold; +} + +#display-blocks .block-label { + position: absolute; + left: 27px; + top:2px; + font-size:14px; + font-weight:bold; + color:rgb(255,255,255); + text-align:left; + margin-left:3px; +} + +z#display-blocks .pb-text { + color: #555; +} + +z#display-blocks .lb-text { + color: #555; +} + +#display-blocks .mb-text { + color: #fff; +} + +/** + * Block operations. + */ + +#display-blocks .mb-block-operations { + position: absolute; + opacity:0; + left: 0; + top: 23px; + width: 100%; + height: 100%; + text-align: center; + background-color: transparent; + -webkit-transition: all 0.3s; + -webkit-transition-property: all; + -webkit-transition-duration: 0.3s; + -webkit-transition-delay: initial; +} + +#display-blocks .mb-block-operations:hover { + opacity:1; +} + +z#display-blocks .lb-block-operations { + position: absolute; + opacity:0; + left: 0; + top: 23px; + width: 100%; + height: 100%; + text-align: center; + background-color: transparent; + -webkit-transition: all 0.3s; + -webkit-transition-property: all; + -webkit-transition-duration: 0.3s; + -webkit-transition-delay: initial; +} + +z#display-blocks .lb-block-operations:hover { + opacity:1; +} + +z#display-blocks .pb-block-operations { + position: absolute; + opacity:0; + left: 0; + top: 23px; + width: 100%; + height: 100%; + text-align: center; + background-color: transparent; + -webkit-transition: all 0.3s; + -webkit-transition-property: all; + -webkit-transition-duration: 0.3s; + -webkit-transition-delay: initial; +} + +z#display-blocks .pb-block-operations:hover { + opacity:1; +} + +z#display-blocks .drag { + display:inline-block; + width: 25px; + height: 20px; + background-position:center; + background-repeat:no-repeat; +} + +#display-blocks .gear { + display:inline-block; + width:25px; + height:20px; + background-position:center; + background-repeat:no-repeat; +} + +#display-blocks .mb-gear { + background-image:url(gear_fff.png); +} + +z#display-blocks .mb-drag { + background-image:url(drag_fff.png); +} + +z#display-blocks .pb-gear { + background-image:url(gear_555.png); +} + +z#display-blocks .pb-drag { + background-image:url(drag_555.png); +} + +z#display-blocks .lb-gear { + background-image:url(gear_555.png); +} + +z#display-blocks .lb-drag { + background-image:url(drag_555.png); +} + + diff --git a/core/modules/display/display.admin.inc b/core/modules/display/display.admin.inc new file mode 100644 index 0000000..830d734 --- /dev/null +++ b/core/modules/display/display.admin.inc @@ -0,0 +1,28 @@ +render(); +} + +/** + * Page callback: Presents the display editing form. + * + * @see display_menu() + */ +function display_page_edit(Display $display) { + drupal_set_title(t('Edit layout @label', array('@label' => $display->label())), PASS_THROUGH); + return entity_get_form($display); +} diff --git a/core/modules/display/display.admin.js b/core/modules/display/display.admin.js new file mode 100644 index 0000000..aea15c1 --- /dev/null +++ b/core/modules/display/display.admin.js @@ -0,0 +1,67 @@ +(function ($, window) { + +"use strict"; + +/** + * Attach display editor functionality. + */ +Drupal.behaviors.displayEditor = { + attach: function (context) { + + function serializeBlocks() { + var regionBlocks = {}; + $('.layout-region', context).each(function() { + var pattern = new RegExp('layout-region-.+'); + var classes = $(this).attr('class').split(' '); + + // Look for the class with the region name. + for (var i = 0; i < classes.length; i++) { + if (pattern.test(classes[i])) { + // Store the block order for this region. + var regionName = classes[i].replace('layout-region-', ''); + regionBlocks[regionName] = []; + var blocks = $(this).find('.region-blocks').sortable('toArray'); + for (var j = 0; j < blocks.length; j++) { + regionBlocks[regionName].push(blocks[j].replace('block-', '')); + }; + break; + } + }; + }); + $('#edit-regions', context).val(JSON.stringify(regionBlocks)); + } + + // Attach click handler to add block button. + $('.region-table .add-block', context).once('display-add-block', function() { + $(this).click(function () { + // Generate a random block title until we can fire blocks as plugins + // in a modal that will give us a machine name and a title to place. + var chars = "abcdefghiklmnopqrstuvwxyz"; + var randomString = ''; + for (var i=0; i < 8; i++) { + var rnum = Math.floor(Math.random() * chars.length); + randomString += chars.substring(rnum,rnum+1); + } + + // Add HTML code for block demonstration. + var block = '