diff --git a/core/modules/node/lib/Drupal/node/NodeFormController.php b/core/modules/node/lib/Drupal/node/NodeFormController.php
index 80823229ee5b29d4471b86222b2c5d9b9aaa8394..6e370dc45cbf7cd802955328a41a19e7c56aecba 100644
--- a/core/modules/node/lib/Drupal/node/NodeFormController.php
+++ b/core/modules/node/lib/Drupal/node/NodeFormController.php
@@ -56,6 +56,28 @@ protected function prepareEntity(EntityInterface $node) {
* Overrides Drupal\Core\Entity\EntityFormController::form().
*/
public function form(array $form, array &$form_state, EntityInterface $node) {
+
+ // Visual representation of the node content form depends on following
+ // parameters:
+ // - the current user has access to view the administration theme.
+ // - the current path is an admin path.
+ // - the node/add / edit pages are configured to be represented in the
+ // administration theme.
+ $container_type = 'vertical_tabs';
+ $request = drupal_container()->get('request');
+ $path = $request->attributes->get('system_path');
+ if (user_access('view the administration theme') && path_is_admin($path)) {
+
+ // Set container type to 'container'.
+ $container_type = 'container';
+
+ // Use the two column layout.
+ $form['#theme'] = array('node_edit_form');
+ $form['#attached'] = array(
+ 'css' => array(drupal_get_path('module', 'node') . '/node.edit.admin.css'),
+ );
+ }
+
$user_config = config('user.settings');
// Some special stuff when previewing a node.
if (isset($form_state['node_preview'])) {
@@ -110,10 +132,36 @@ public function form(array $form, array &$form_state, EntityInterface $node) {
);
$form['advanced'] = array(
- '#type' => 'vertical_tabs',
+ '#type' => $container_type,
'#attributes' => array('class' => array('entity-meta')),
'#weight' => 99,
);
+ $form['meta'] = array (
+ '#attributes' => array('class' => array('entity-meta-header')),
+ '#type' => 'container',
+ '#group' => 'advanced',
+ '#weight' => -100,
+ '#access' => $container_type == 'container',
+ // @todo Geez. Any .status is styled as OK icon? Really?
+ 'published' => array(
+ '#type' => 'item',
+ '#wrapper_attributes' => array('class' => array('published')),
+ '#markup' => !empty($node->status) ? t('Published') : t('Not published'),
+ '#access' => !empty($node->nid),
+ ),
+ 'changed' => array(
+ '#type' => 'item',
+ '#wrapper_attributes' => array('class' => array('changed', 'container-inline')),
+ '#title' => t('Last saved'),
+ '#markup' => !$node->isNew() ? format_date($node->changed, 'short') : t('Not saved yet'),
+ ),
+ 'author' => array(
+ '#type' => 'item',
+ '#wrapper_attributes' => array('class' => array('author', 'container-inline')),
+ '#title' => t('Author'),
+ '#markup' => user_format_name(user_load($node->uid)),
+ ),
+ );
// Add a log field if the "Create new revision" option is checked, or if
// the current user has the ability to check that option.
diff --git a/core/modules/node/node.edit.admin.css b/core/modules/node/node.edit.admin.css
new file mode 100644
index 0000000000000000000000000000000000000000..1f92354589cc7bf0322716da2fb9e0d96cd75682
--- /dev/null
+++ b/core/modules/node/node.edit.admin.css
@@ -0,0 +1,69 @@
+/**
+ * @file
+ * Styles for administration pages.
+ */
+
+/**
+ * Node add/edit form layout
+ */
+
+/* Narrow screens */
+.layout-region {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+/* Wide screens */
+@media
+ screen and (min-width: 780px),
+ (orientation: landscape) and (min-device-height: 780px) {
+
+ .layout-region-node-main,
+ .layout-region-node-footer {
+ float: left; /* LTR */
+ width: 65%;
+ padding-right: 2em;
+ }
+
+ .layout-region-node-secondary {
+ float: right; /* LTR */
+ width: 35%;
+ }
+
+ /* @todo File an issue to add a standard class to all text-like inputs */
+ .layout-region-node-secondary .form-autocomplete,
+ .layout-region-node-secondary .form-text,
+ .layout-region-node-secondary .form-tel,
+ .layout-region-node-secondary .form-email,
+ .layout-region-node-secondary .form-url,
+ .layout-region-node-secondary .form-search,
+ .layout-region-node-secondary .form-number,
+ .layout-region-node-secondary .form-color,
+ .layout-region-node-secondary textarea {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 100%;
+ }
+}
+
+/**
+ * The vertical toolbar mode gets triggered for narrow screens, which throws off
+ * the intent of media queries written for the viewport width. When the vertical
+ * toolbar is on, we need to suppress layout for the original media width + the
+ * toolbar width (240px). In this case, 240px + 780px.
+ */
+@media
+ screen and (max-width: 1020px),
+ (orientation: landscape) and (max-device-height: 1020px) {
+
+ .toolbar-vertical .layout-region-node-main,
+ .toolbar-vertical .layout-region-node-footer,
+ .toolbar-vertical .layout-region-node-secondary {
+ float: none;
+ width: auto;
+ padding-right: 0;
+ }
+}
diff --git a/core/modules/node/node.module b/core/modules/node/node.module
index ff073aeff58a4ebb16b11799f2cf38f14ced109f..6c292add7655b74f316cd3630d2ff27c777ba170 100644
--- a/core/modules/node/node.module
+++ b/core/modules/node/node.module
@@ -171,6 +171,11 @@ function node_theme() {
'node_recent_content' => array(
'variables' => array('node' => NULL),
),
+ 'node_edit_form' => array(
+ 'render element' => 'form',
+ 'path' => drupal_get_path('module', 'node') . '/templates',
+ 'template' => 'node-edit-form',
+ ),
);
}
diff --git a/core/modules/node/templates/node-edit-form.tpl.php b/core/modules/node/templates/node-edit-form.tpl.php
new file mode 100644
index 0000000000000000000000000000000000000000..7b766839078b61c053ea7c166f061c8aeb93a508
--- /dev/null
+++ b/core/modules/node/templates/node-edit-form.tpl.php
@@ -0,0 +1,27 @@
+
+
diff --git a/core/modules/overlay/images/close-rtl.png b/core/modules/overlay/images/close-rtl.png
deleted file mode 100644
index ae05d11140b8236de673cdd06bfffcc7f3553cfa..0000000000000000000000000000000000000000
--- a/core/modules/overlay/images/close-rtl.png
+++ /dev/null
@@ -1,5 +0,0 @@
-PNG
-
-
IHDR gAMA |Q QPLTE ooo```ppp000 " tRNS 0/@? IDAT(υ DIAЂMVS܁Q*{>J<)/ߨQųI; x!I9V` `j',>?~|ѧFG g'/ A9aW<㺏eE16ŚcoT"
-Y
-)շ :59] IENDB`
\ No newline at end of file
diff --git a/core/modules/overlay/images/close.png b/core/modules/overlay/images/close.png
index 436985e226fd080768ef3345691da20c72e38942..44d2b6b007d508b220cb06a1ee9d1e5183e6d6c2 100644
--- a/core/modules/overlay/images/close.png
+++ b/core/modules/overlay/images/close.png
@@ -1,4 +1,14 @@
PNG
-
IHDR QPLTE 000oooppp```:q tRNS 0/@? IDATx^}҉ aynkˡnV ?F(Vt}ꌒY)5l7 V 9Yɀf<'_<(0
-nxAh7 25~1 :[+ !p+Py2}6Ґ9\DM)iMJ>-Rja~[N'epv. IENDB`
\ No newline at end of file
+
IHDR JL pHYs
+OiCCPPhotoshop ICC profile xڝSgTS=BKKoR RB&*! J!QEEȠQ,
+!{kּ> H3Q5 B .@
+$p d!s# ~<<+" x M0 B\t8K @zB @F&S `cb P- `' { [! eD h; VE X0 fK9 - 0IWfH 0Q) { `##x FW<+* x<$9E[-qWW. (I+6aa@.y24 x6_-"bbϫp@ t~,/;m%h^ uf@ Wp~<5 j>{-]cK'Xt o(hw?G% fIq ^D$.Tʳ? D*A, `6B$BB
+d r`)B(Ͱ *`/@ 4Qhp.U=pa( Aa!ڈbX#!H$ ɈQ"K5H1RT UH =r9\F; 2G1Q= C7F dt1r=6Ыhڏ>C03l0.B8, c˱" VcϱwE 6wB a AHXLXNH $4 7 Q'"K&b21XH,#/{C7$C2'ITFnR#,4H#dk9, +ȅ3![
+b@qS(RjJ4e2AURݨT5ZBRQ4u9̓IKhhitݕ NWGw
Ljg(gwLӋT071oUX**|
+J&*/Tު UUT^S}FU3S ԖUPSSg;goT?~YYLOCQ_ cx,!k
u5&|v* =9C3J3WRf?qtN (~))4L1e\kXHQG6EYAJ'\'GgSSݧ
+M=:.kDwn^Loy }/TmG X $ <5qo< /QC]@Caaᄑ.ȽJtq]zۯ6iܟ4)Y3sCQ? 0k߬~OCOg#/c/Wװwa>>r><72Y_7ȷOo_C#dz %gA[z|!?:eAAA!h쐭!ΑiP~aa~ 'W?pX15wCsDDDޛg1O9-J5*>.j<74?.fYXXIlK 9.*6nl {/]py.,:@LN8A*%w%
+y g"/6шC\* NH*Mz쑼5y$3,幄'L
Lݛ:v m2=:1qB!Mggfvˬen/ kY-
+BTZ(*geWf͉9+̳ې7ᒶKW- X潬j9(xoʿܔĹdff-[n
ڴ
VE/(ۻCɾUUMfeI?m]Nmq# =TR+G w-
6
U#pDy
:v{ v g /jBFS[b[O>zG 499?rCd&ˮ/~јѡm| x31^Vww O| (hSЧc3- cHRM z% u0 ` : o_F IDATx 0 D5FN;H8\bbIZL(806q:" 4B03Df,3 |3HU"4ݛBVbf6,.)^6fyafhV~&y]u?а
qzG`~A=gU UM3y&J hۻg IENDB`
\ No newline at end of file
diff --git a/core/modules/overlay/overlay-child-rtl.css b/core/modules/overlay/overlay-child-rtl.css
index eeff66cb941380ff60aa210e97807eede1c7fb68..41955304fd12a3f21382a1e2e026619234dede6f 100644
--- a/core/modules/overlay/overlay-child-rtl.css
+++ b/core/modules/overlay/overlay-child-rtl.css
@@ -22,8 +22,16 @@ html {
}
#overlay-close,
#overlay-close:hover {
- background: transparent url(images/close-rtl.png) no-repeat;
+ background: transparent url(images/close.png) no-repeat;
border-top-right-radius: 0;
+
+ -webkit-border-top-left-radius: 12px;
+ -webkit-border-bottom-left-radius: 12px;
+ -moz-border-radius-topleft: 12px;
+ -moz-border-radius-bottomleft: 12px;
+ border-top-left-radius: 12px;
+ border-bottom-left-radius: 12px;
+ background-color: #ffffff;
}
/**
diff --git a/core/modules/overlay/overlay-child.css b/core/modules/overlay/overlay-child.css
index 48f217dda43157a7fe5590eb377b06a98b91fa7f..aa0effc407a90c4160401214efb9ac2e08f65353 100644
--- a/core/modules/overlay/overlay-child.css
+++ b/core/modules/overlay/overlay-child.css
@@ -77,6 +77,14 @@
/* Replace with position:fixed to get a scrolling close button. */
position: absolute;
width: 26px;
+
+ -webkit-border-top-right-radius: 12px;
+ -webkit-border-bottom-right-radius: 12px;
+ -moz-border-radius-topright: 12px;
+ -moz-border-radius-bottomright: 12px;
+ border-top-right-radius: 12px;
+ border-bottom-right-radius: 12px;
+ background-color: #ffffff;
}
/**
diff --git a/core/themes/seven/ie.css b/core/themes/seven/ie.css
index 21252de7101dd9d0dea5e466fffcfd9a843affd3..df7056ebf5c53179934c642dc77ecab7da74e9d7 100644
--- a/core/themes/seven/ie.css
+++ b/core/themes/seven/ie.css
@@ -4,3 +4,35 @@ pre,
kbd {
font-size: 1em;
}
+
+/* Node Add/Edit Page Layout */
+
+.layout-node-form {
+ overflow: hidden;
+}
+
+.overlay .node-actions {
+ margin-bottom: 1em;
+}
+
+.node-main-content,
+.node-actions {
+ padding: 0.5em 1.5em 0 1.5em;
+}
+
+/**
+ * 1. Applies the Position Is Everything technique for equal-height columns;
+ * @see http://www.positioniseverything.net/articles/onetruelayout/equalheight
+ * 2. When animating the height of elements within this region, prevent
+ * vertical jittering of elements further down in the document flow.
+ */
+.node-advanced-settings {
+ margin-bottom: -999em;
+ padding-bottom: 999em;
+ display: table;
+
+ -moz-box-shadow: inset 0.1em -1em 0.6em rgba(100, 100, 100, .1);
+ -webkit-box-shadow: inset 0.1em -1em 0.6em rgba(100, 100, 100, .1);
+ box-shadow: inset 0.1em -1em 0.6em rgba(100, 100, 100, .1);
+ border: none;
+}
\ No newline at end of file
diff --git a/core/themes/seven/style-rtl.css b/core/themes/seven/style-rtl.css
index f31d1d3ae29d0362ce15ddb417354ee934dfbd4e..4b676e023951773dcfdc34381dca6dec252a2118 100644
--- a/core/themes/seven/style-rtl.css
+++ b/core/themes/seven/style-rtl.css
@@ -205,3 +205,22 @@ div.add-or-remove-shortcuts {
}
/* @end */
+
+
+/**
+ * Node Add/Edit Page Layout
+ */
+
+/* Narrow screens */
+/*.overlay .layout-region-secondary {
+ -moz-box-shadow: inset -0.15em 0.3em .5em rgba(0, 0, 0, .1);
+ -webkit-box-shadow: inset -0.15em 0.3em .5em rgba(0, 0, 0, .1);
+ box-shadow: inset -0.15em 0.3em .5em rgba(0, 0, 0, .1);
+}*/
+/* Wide screens */
+@media only screen and (min-width: 780px) {
+ .overlay [id="edit-additional-settings"] {
+ -webkit-box-shadow: inset -3px 3px 5px rgba(0, 0, 0, .15);
+ box-shadow: inset -3px 3px 5px rgba(0, 0, 0, .15);
+ }
+}
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index f29245b3271ef7210a20e905648255f83f1e0dbb..d1a2049de552bbbbcf31f9c6e41af8507ca96775 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -182,9 +182,10 @@ pre {
position: relative;
background-color: #e0e0d8;
}
-#branding .breadcrumb {
+.breadcrumb {
font-size: 0.846em;
- padding-bottom: 5px;
+ line-height: 1em;
+ padding: 0;
}
/**
@@ -674,6 +675,9 @@ input.form-color,
input.form-file,
textarea.form-textarea,
select.form-select {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
padding: 2px;
border: 1px solid #ccc;
border-top-color: #999;
@@ -682,6 +686,7 @@ select.form-select {
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
+ max-width: 100%;
}
input.form-text:focus,
input.form-tel:focus,
@@ -807,6 +812,9 @@ select.form-select:focus {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
#dblog-filter-form .form-actions {
float: none;
@@ -978,6 +986,7 @@ body.in-maintenance #branding .step-indicator {
.overlay #branding {
background-color: #fff;
padding-top: 15px;
+ padding-bottom: 15px;
}
.overlay #branding h1.page-title,
.overlay #left,
@@ -1462,16 +1471,14 @@ details.fieldset-no-legend {
/* @end */
-/* @end */
-
/**
* Entity meta settings.
*/
.entity-meta {
- background-color: #e2e2e2;
+ background-color: #ececec;
border-bottom: 0;
- border-left: 1px solid #a5a5a5;
- border-right: 1px solid #a5a5a5;
+ border-left: 1px solid #bfbfbf;
+ border-right: 1px solid #bfbfbf;
border-top: 0;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
@@ -1480,13 +1487,16 @@ details.fieldset-no-legend {
}
.entity-meta-header,
.entity-meta details {
- background-color: #f2f2f2;
- border-top: 1px solid #a5a5a5;
- border-bottom: 1px solid #a5a5a5;
+ background-color: #f7f7f7;
+ border-top: 1px solid #bfbfbf;
+ border-bottom: 1px solid #bfbfbf;
}
.entity-meta-header {
padding: 1em 1.5em;
}
+.entity-meta-header .form-item {
+ margin: .25em 0;
+}
.entity-meta-header .published {
font-size: 1.231em;
font-weight: bold;
@@ -1498,15 +1508,15 @@ details.fieldset-no-legend {
.entity-meta details {
border-left: 0;
border-right: 0;
- border-top: 1px solid #fff;
+ border-top: 1px solid #ffffff;
margin: 0;
}
.entity-meta details[open] {
background-color: transparent;
- background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .15), transparent 5px);
- background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .15), transparent 5px);
- background-image: -o-linear-gradient(top, rgba(0, 0, 0, .15), transparent 5px);
- background-image: linear-gradient(to bottom, rgba(0, 0, 0, .15), transparent 5px);
+ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .125), transparent 4px);
+ background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .125), transparent 4px);
+ background-image: -o-linear-gradient(top, rgba(0, 0, 0, .125), transparent 4px);
+ background-image: linear-gradient(to bottom, rgba(0, 0, 0, .125), transparent 4px);
border-top-width: 0;
padding-top: 1px;
}
@@ -1523,7 +1533,137 @@ details.fieldset-no-legend {
text-shadow: 0 1px 0 white;
}
.entity-meta details .summary {
- display: none; /* Hide JS summaries. @todo Rethink summaries. */
+ display: none; /* Hide JS summaries. @todo Rethink summaries. */
+}
+.overlay .layout-region-node-footer {
+ padding-bottom: .5em;
+}
+
+/**
+ * Widescreen
+ *
+ * Both of the following media queries must *exactly* match what is in
+ * node.edit.admin.css. This is rather crazy.
+ *
+ * @todo Figure out how to reduce media query duplication across files
+ * and modules. Layout styles only allowed in themes?
+ */
+@media
+ screen and (min-width: 780px),
+ (orientation: landscape) and (min-device-height: 780px) {
+
+ [class*="page-node-add-"] #page,
+ .page-node-edit #page {
+ padding-top: 0;
+ margin-right: 0;
+ }
+
+ [class*="page-node-add-"] #console,
+ .page-node-edit #console {
+ margin-right: 2.5em;
+ }
+
+ .layout-node-form {
+ overflow: hidden;
+ position: relative;
+ }
+ /**
+ * Draw a bottom border on the meta settings region
+ * @todo Better ideas welcome.
+ */
+ .layout-node-form:before {
+ content: '';
+ display: block;
+ height: 0;
+ width: 34.9%;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ border-top: 1px solid #bfbfbf;
+ }
+
+ .layout-region-node-secondary {
+ /**
+ * 1. Applies the Position Is Everything technique for equal-height columns;
+ * @see http://www.positioniseverything.net/articles/onetruelayout/equalheight
+ * 2. When animating the height of elements within this region, prevent
+ * vertical jittering of elements further down in the document flow.
+ */
+ margin-bottom: -999em; /* 1 */
+ padding-bottom: 999em; /* 1 */
+ display: table; /* 2 */
+
+ background-color: #f7f7f7;
+ border-left: 1px solid #bfbfbf;
+ }
+
+ .entity-meta {
+ border-left: 0;
+ border-right: 0;
+ border-bottom: 1px solid #ffffff;
+ }
+ .entity-meta-header {
+ border-top: 0;
+ }
+
+ /* Additional overlay theming */
+
+ /**
+ * These are terrible selectors.
+ * @todo Add a proper class to the overlay for this page.
+ */
+ .overlay[class*="page-node-add-"] #overlay-content,
+ .overlay.page-node-edit #overlay-content {
+ padding: 0;
+ }
+ .overlay[class*="page-node-add-"] #page,
+ .overlay.page-node-edit #page {
+ padding: 0;
+ }
+ .overlay[class*="page-node-add-"] #branding,
+ .overlay.page-node-edit #branding {
+ padding-left: 2em;
+ padding-right: 2em;
+ }
+ .overlay[class*="page-node-add-"] #console,
+ .overlay.page-node-edit #console {
+ margin: 0 2em;
+ }
+ .overlay[class*="page-node-add-"] .messages,
+ .overlay.page-node-edit .messages {
+ margin-bottom: 1em;
+ }
+ .overlay .layout-node-form {
+ border-top: 1px solid #bfbfbf;
+ }
+ .overlay .layout-node-form:before {
+ display: none;
+ }
+ .overlay .layout-region-node-main,
+ .overlay .layout-region-node-footer {
+ padding-left: 2em;
+ }
+ .overlay .layout-region-node-footer {
+ padding-bottom: 1.5em;
+ }
+}
+@media
+ screen and (max-width: 1020px),
+ (orientation: landscape) and (max-device-height: 1020px) {
+
+ .toolbar-vertical .layout-region-node-secondary {
+ margin-bottom: 0;
+ padding-bottom: 0;
+ display: block;
+ }
+ .toolbar-vertical .layout-region-node-secondary {
+ margin-bottom: 0;
+ padding-bottom: 0;
+ display: block;
+ }
+ .toolbar-vertical .layout-node-form:after {
+ display: none;
+ }
}