diff --git a/core/includes/form.inc b/core/includes/form.inc index 0ef70f8..4a312f1 100644 --- a/core/includes/form.inc +++ b/core/includes/form.inc @@ -2831,10 +2831,15 @@ function theme_fieldset($variables) { $element['#attributes']['aria-describedby'] = $description_id; } + $legend_attributes = array(); + if (isset($element['#title_display']) && $element['#title_display'] == 'invisible') { + $legend_attributes['class'][] = 'element-invisible'; + } + $output = ''; if (!empty($element['#title'])) { // Always wrap fieldset legends in a SPAN for CSS positioning. - $output .= '' . $element['#title'] . ''; + $output .= '' . $element['#title'] . ''; } $output .= '
'; if (!empty($element['#description'])) { diff --git a/core/modules/node/lib/Drupal/node/NodeFormController.php b/core/modules/node/lib/Drupal/node/NodeFormController.php index bd8a2cb..6a54d0d 100644 --- a/core/modules/node/lib/Drupal/node/NodeFormController.php +++ b/core/modules/node/lib/Drupal/node/NodeFormController.php @@ -108,20 +108,44 @@ public function form(array $form, array &$form_state, EntityInterface $node) { '#access' => isset($language_configuration['language_hidden']) && !$language_configuration['language_hidden'], ); - $form['additional_settings'] = array( - '#type' => 'vertical_tabs', - '#weight' => 99, + // Build variables for use in the node settings header. + $publish_state = ''; + $last_saved = ''; + $author = ''; + if (!$node->isNew()) { + $publish_state = (isset($node->status) && $node->status == 1) ? t('Published') : t('Not published'); + $last_saved = '' . t('Last saved') . ': ' . format_date($node->changed); + $author = '' . t('Author') . ': ' . user_format_name(user_load($node->uid)); + } + else { + $publish_state = t('Not published'); + $last_saved = t('Not saved yet'); + } + // Create the node settings header that appears (by default) at the top + // of the settings region. Always contains publish state, date/time last + // saved, and author. + $form['settings_header'] = array ( + '#type' => 'fieldset', + 'publish_state' => array( + '#type' => 'item', + '#markup' => $publish_state, + ), + 'last_saved' => array( + '#type' => 'item', + '#markup' => $last_saved, + ), + 'author' => array( + '#type' => 'item', + '#markup' => $author, + ), ); // Add a log field if the "Create new revision" option is checked, or if the // current user has the ability to check that option. - $form['revision_information'] = array( - '#type' => 'details', + $form['settings_header']['revision_information'] = array( + '#type' => 'fieldset', '#title' => t('Revision information'), - '#collapsible' => TRUE, - // Collapsed by default when "Create new revision" is unchecked. - '#collapsed' => !$node->isNewRevision(), - '#group' => 'additional_settings', + '#title_display' => 'invisible', '#attributes' => array( 'class' => array('node-form-revision-information'), ), @@ -132,30 +156,37 @@ public function form(array $form, array &$form_state, EntityInterface $node) { '#access' => $node->isNewRevision() || user_access('administer nodes'), ); - $form['revision_information']['revision'] = array( + $form['settings_header']['revision_information']['revision'] = array( '#type' => 'checkbox', '#title' => t('Create new revision'), '#default_value' => $node->isNewRevision(), '#access' => user_access('administer nodes'), ); - // Check the revision log checkbox when the log textarea is filled in. - // This must not happen if "Create new revision" is enabled by default, - // since the state would auto-disable the checkbox otherwise. - if (!$node->isNewRevision()) { - $form['revision_information']['revision']['#states'] = array( - 'checked' => array( - 'textarea[name="log"]' => array('empty' => FALSE), - ), - ); - } - - $form['revision_information']['log'] = array( + $form['settings_header']['revision_information']['log'] = array( '#type' => 'textarea', '#title' => t('Revision log message'), '#rows' => 4, '#default_value' => !empty($node->log) ? $node->log : '', '#description' => t('Briefly describe the changes you have made.'), + '#attributes' => array('name' => 'log'), + '#states' => array( + 'visible' => array( + ':input[name="revision"]' => array('checked' => TRUE), + ), + ), + ); + + /** + * Create the wrapper for additional node settings. Elements are added here + * by various modules using the `#group` Form API property. + * + * @todo Change this to a simple container (not `#type` details) once the + * `#group` property works for non-details elements. + */ + $form['additional_settings'] = array( + '#type' => 'details', + '#weight' => 99, ); // Node author information for administrators. diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css index 9c4fff4..8c06ef5 100644 --- a/core/themes/seven/style.css +++ b/core/themes/seven/style.css @@ -503,8 +503,7 @@ details { line-height: 1.295em; } details summary { - padding-top: 0.5em; - padding-bottom: 0.5em; + padding: 0.923em 1.231em; } details details { background-color: #fff; @@ -1406,3 +1405,117 @@ details.fieldset-no-legend { /* @end */ /* @end */ + +/** + * Node add/edit screen + */ +[id="edit-settings-header"] { + background-color: #f2f2f2; + border: 1px solid #a5a5a5; + margin-bottom: 0; + overflow: hidden; + padding: 0; +} +[id="edit-settings-header"] > .fieldset-wrapper { + padding: 1.231em; +} +[id="edit-settings-header"] .label { + font-weight: bold; +} +[id="edit-settings-header"] .form-item { + font-size: 1em; + margin: 0; + padding: 0; +} +[id="edit-settings-header"] .form-item-log { + margin-top: 0.5em; +} +#edit-publish-state { + font-size: 1.231em; + font-weight: bold; + margin-bottom: 0; + margin-top: 0.25em; + text-shadow: 0 1px 0 white; +} +[id="edit-last-saved"] { + font-style: italic; + margin-bottom: 0.5em; +} +[id="edit-last-saved"] .label { + font-weight: normal; +} +.node-form-revision-information { + background: transparent; + border: 0; + margin-bottom: 0.5em; + padding: 0; +} +.node-form-revision-information > .details-wrapper { + padding: 0; +} + +[id="edit-additional-settings"] { + background-color: #e2e2e2; + border-bottom: 0; + border-left: 1px solid #a5a5a5; + border-right: 1px solid #a5a5a5; + 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); + margin-top: 0; + padding-top: 0; +} +[id="edit-additional-settings"] > .details-wrapper { + padding: 0; +} +/* Details elements; default styling is for the open state */ +[id="edit-additional-settings"] details { + background-color: transparent; + border-bottom: 1px solid #959595; + border-left: 0; + border-right: 0; + border-top: 1px solid white; + margin: 0; + padding-top: 0; +} +[id="edit-additional-settings"] details > summary { + padding: 0.846em 1.231em 0.923em 1.231em; + text-shadow: 0 1px 0 white; +} +[id="edit-additional-settings"] details > .details-wrapper { + padding-top: 0; +} +/* JS-driven summary */ +[id="edit-additional-settings"] details .summary { + display: none; +} +/** + * Add a top inset shadow to all open details elements that don't follow another + * open details element. + */ +[id="edit-additional-settings"] details:first-child, +[id="edit-additional-settings"] .collapsed + details, +[id="edit-additional-settings"] details:not([open]) + details { + 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); + border-top: 0 none; + padding-top: 1px; +} +/* Ensure closed details elements appear closed. */ +#edit-additional-settings .collapsed, +#edit-additional-settings details:not([open]) { + background-color: #f2f2f2; + background-image: none; + border-bottom: 1px solid #a5a5a5; + border-top: 1px solid white; + padding-top: 0; +} +[id="edit-additional-settings"] details a { + color: #005e99; +} +[id="edit-additional-settings"] .collapsed a, +[id="edit-additional-settings"] details:not([open]) a { + color: #0074bd; +}