Commit 3506077c authored by alexpott's avatar alexpott

Issue #1337554 by LewisNyman, Bojhan, YesCT, Cottser, jenlampton, Xano,...

Issue #1337554 by LewisNyman, Bojhan, YesCT, Cottser, jenlampton, Xano, David_Rothstein, larowlan, nilnullvoid: Develop and use separate branding for the installer.
parent d97d1aae
......@@ -936,7 +936,7 @@ function install_display_output($output, $install_state) {
// Let the theming function know when every step of the installation has
// been completed.
$active_task = $install_state['installation_finished'] ? NULL : $install_state['active_task'];
drupal_add_region_content('sidebar_first', theme('task_list', array('items' => install_tasks_to_display($install_state), 'active' => $active_task)));
drupal_add_region_content('sidebar_first', theme('task_list', array('items' => install_tasks_to_display($install_state), 'active' => $active_task, 'variant' => 'install')));
}
print theme('install_page', array('content' => $output));
exit;
......
......@@ -95,7 +95,7 @@ function drupal_install_profile_distribution_name() {
// installation state (it might not be saved anywhere yet).
if (drupal_installation_attempted()) {
global $install_state;
return $install_state['profile_info']['distribution_name'];
return isset($install_state['profile_info']['distribution_name']) ? $install_state['profile_info']['distribution_name'] : 'Drupal';
}
// At all other times, we load the profile via standard methods.
else {
......
......@@ -3003,6 +3003,40 @@ function template_process_maintenance_page(&$variables) {
$variables['scripts'] = drupal_get_js();
}
/**
* Prepares variables for install page templates.
*
* Default template: install-page.html.twig.
*
* The variables array generated here is a mirror of
* template_preprocess_page(). This preprocessor will run its course when
* theme_install_page() is invoked.
*
* @param array $variables
* An associative array containing:
* - content - An array of page content.
*
* @see template_preprocess_maintenance_page()
*
*/
function template_preprocess_install_page(&$variables) {
template_preprocess_maintenance_page($variables);
// Override the site name that is displayed on the page, since Drupal is
// still in the process of being installed.
$variables['site_name'] = drupal_install_profile_distribution_name();
}
/**
* Preprocess variables for install-page.html.twig.
*
* @see install-page.html.twig
* @see template_process_html()
*
*/
function template_process_install_page(&$variables) {
template_process_maintenance_page($variables);
}
/**
* Preprocess variables for region.tpl.php
*
......@@ -3106,10 +3140,11 @@ function drupal_common_theme() {
'template' => 'maintenance-page',
),
'install_page' => array(
'variables' => array('content' => NULL),
'variables' => array('content' => NULL, 'show_messages' => TRUE),
'template' => 'install-page',
),
'task_list' => array(
'variables' => array('items' => NULL, 'active' => NULL),
'variables' => array('items' => NULL, 'active' => NULL, 'variant' => NULL),
),
'authorize_message' => array(
'variables' => array('message' => NULL, 'success' => TRUE),
......
......@@ -115,16 +115,23 @@ function _theme_load_offline_registry($theme, $base_theme = NULL, $theme_engine
* An associative array containing:
* - items: An associative array of maintenance tasks.
* - active: The key for the currently active maintenance task.
* - variant: A variant name to be used for a CSS class.
*
* @ingroup themeable
*/
function theme_task_list($variables) {
$items = $variables['items'];
$active = $variables['active'];
if (isset($variables['variant'])) {
$class = $variables['variant'] . '-task-list';
}
else {
$class = 'task-list';
}
$done = isset($items[$active]) || $active == NULL;
$output = '<h2 class="visually-hidden">Installation tasks</h2>';
$output .= '<ol class="task-list">';
$output .= '<ol class="' . $class . '">';
foreach ($items as $k => $item) {
if ($active == $k) {
......@@ -146,20 +153,6 @@ function theme_task_list($variables) {
return $output;
}
/**
* Returns HTML for the installation page.
*
* Note: this function is not themeable.
*
* @param $variables
* An associative array containing:
* - content: The page content to show.
*/
function theme_install_page($variables) {
drupal_add_http_header('Content-Type', 'text/html; charset=utf-8');
return theme('maintenance_page', $variables);
}
/**
* Returns HTML for a results report of an operation run by authorize.php.
*
......
......@@ -43,10 +43,3 @@
#edit-connection-settings-change-connection-type {
margin: 2.6em 0.5em 0 1em;
}
/**
* Installation task list
*/
.task-list li.active {
font-weight: bold;
}
{#
/**
* @file
* Default theme implementation to display a Drupal installation page.
*
* All the available variables are mirrored in html.html.twig and
* page.html.twig. Some may be blank but they are provided for consistency.
*
* @see template_preprocess_install_page()
*
* @ingroup themeable
*/
#}
<!DOCTYPE html>
<html lang="{{ language.langcode }}" dir="{{ language.dir }}" class="install-background">
<head>
<title>{{ head_title }}</title>
{{ head }}
{{ styles }}
{{ scripts }}
</head>
<body class="install-page">
<div class="vertically-centered">
<div class="vertically-centered__inner">
<div id="page">
<div id="header">
{% if site_name %}
<h1 id="site-name">
<span>{{ site_name }}</span>
</h1>
{% endif %}
{% if site_slogan %}
<div id="site-slogan">{{ site_slogan }}</div>
{% endif %}
{% if header %}
<div id="header-region">
{{ header }}
</div>
{% endif %}
</div> <!-- /header -->
<div id="container" class="clearfix">
{% if sidebar_first %}
<div id="sidebar-first" class="column sidebar">
{{ sidebar_first }}
</div> <!-- /sidebar-first -->
{% endif %}
<div id="content" class="column">
{% if title %}<h1 class="title" id="page-title">{{ title }}</h1>{% endif %}
{% if messages %}{{ messages }}{% endif %}
<div id="content-content" class="clearfix">
{{ content }}
</div> <!-- /content -->
{% if sidebar_second %}
<div id="sidebar-second" class="column sidebar">
{{ sidebar_second }}
</div> <!-- /sidebar-second -->
{% endif %}
</div> <!-- /container -->
<div id="footer-wrapper">
<div id="footer">
{% if footer %}{{ footer }}{% endif %}
</div> <!-- /footer -->
</div> <!-- /footer-wrapper -->
</div> <!-- /page -->
</div>
</div>
</body>
</html>
/**
* @file
* Right-to-left styles for installation.
*/
body.install-page #page {
padding: 1em 0 1em 2em;
}
body.install-page #content {
padding-left: 0;
padding-right: 30px;
}
body.install-page #site-name {
margin: 0.75em 50px 0.75em 0;
}
.install-task-list {
margin-right: 0;
padding-right: 0;
}
.install-task-list li {
padding: 0.5em 20px 0.5em 1em;
}
.install-task-list li.active:after {
left: auto;
right: 100%;
border-left-color: transparent;
border-right-color: #ebeae4;
}
.step-indicator {
left: 40px;
right: auto;
}
/**
* @file
* Installation styling.
*
* Unfortunately we have to make our styling quite strong, to override the
* .in-maintenance styling.
*/
.install-background {
background-color: #1275b2;
background-image:
url('images/noise-low.png'),
-webkit-radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
background-image:
url('images/noise-low.png'),
-moz-radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
background-image:
url('images/noise-low.png'),
-o-radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
background-image:
url('images/noise-low.png'),
radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
background-repeat: repeat;
background-position: left top, 50% 50%;
min-height: 100%;
}
body.install-page {
background: none;
}
@media all and (min-width: 48em) { /* 768px */
html, body {
height: 100%;
margin: 0;
}
.vertically-centered {
min-height: 100%;
display: table;
width: 100%;
}
.vertically-centered__inner {
display: table-cell;
padding: 70px 0;
width: 100%;
vertical-align: middle;
}
body.install-page #page {
border-radius: 5px;
width: 75%;
margin: 0 auto;
max-width: 770px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
padding: 1em 2em 1em 0; /* LTR */
}
body.install-page #content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
clear: none;
float: left;
padding-left: 30px; /* LTR */
width: 65%;
}
body.install-page #sidebar-first {
float: left;
width: 35%;
}
}
body.install-page #site-name {
font-size: 2em;
line-height: 1.2em;
color: #0074bd;
margin: 0.75em 0 0.75em 50px; /* LTR */
}
body.install-page #page-title {
background: transparent;
padding-top: 0;
}
@media all and (max-width: 48em) { /* 768px */
body.install-page #site-name {
margin-left: 0;
}
body.install-page {
padding: 0;
}
body.install-page #page {
width: auto;
padding: 10px 20px 0;
}
}
.install-task-list {
margin-left: 0; /* LTR */
list-style-type: none;
list-style-image: none;
padding-left: 0; /* LTR */
padding-bottom: 1em;
}
.install-task-list li {
padding: 0.5em 1em 0.5em 50px; /* LTR */
color: #1a1a1a;
}
.install-task-list li.active {
background: #ebeae4;
position: relative;
font-weight: normal;
}
.install-task-list li.active:after {
left: 100%; /* LTR */
border: solid transparent;
border-color: rgba(235, 234, 228, 0);
border-left-color: #ebeae4; /* LTR */
border-width: 17px;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
top: 50%;
margin-top: -17px;
}
.install-task-list li.done {
color: #adadad;
}
.step-indicator {
display: none;
}
@media all and (max-width: 48em) { /* 768px */
.install-task-list {
display: none;
}
body.in-maintenance #branding h1 {
float: left; /* LTR */
width: auto;
}
.step-indicator {
display: block;
font-size: 1.385em;
position: absolute;
top: 1.9em;
right: 40px;
}
}
.install-page .password-parent {
width: auto;
}
.install-page div.form-item div.password-suggestions {
float: none;
width: auto;
}
@media all and (max-width: 975px) and (min-width: 48em) {
.install-page .password-strength,
.install-page .confirm-parent,
.install-page div.password-confirm {
float: none;
width: auto;
}
}
......@@ -16,13 +16,13 @@
}
function installStepsSetup () {
var steps = document.querySelectorAll('.task-list li');
var steps = document.querySelectorAll('.install-task-list li');
if (steps.length) {
var branding = document.querySelector('#branding');
var header = document.querySelector('#header');
var stepIndicator = document.createElement('div');
stepIndicator.className = 'step-indicator';
stepIndicator.innerHTML = findActiveStep(steps) + '/' + steps.length;
branding.appendChild(stepIndicator);
header.appendChild(stepIndicator);
}
}
......
......@@ -143,6 +143,7 @@ function seven_tablesort_indicator($variables) {
*/
function seven_preprocess_install_page(&$variables) {
drupal_add_js(drupal_get_path('theme', 'seven') . '/js/mobile.install.js');
drupal_add_css(drupal_get_path('theme', 'seven') . '/install-page.css', array('group' => CSS_AGGREGATE_THEME));
}
/**
......
......@@ -914,7 +914,6 @@ body.in-maintenance #sidebar-first {
}
body.in-maintenance #content {
float: right; /* LTR */
max-width: 550px;
clear: none;
width: 72%;
}
......@@ -953,41 +952,25 @@ body.in-maintenance #logo {
width: auto;
}
}
ol.task-list {
.task-list {
margin-left: 0; /* LTR */
list-style-type: none;
list-style-image: none;
}
ol.task-list li {
.task-list li {
padding: 0.5em 1em 0.5em 20px; /* LTR */
color: #adadad;
}
ol.task-list li.active {
.task-list li.active {
background: transparent url(images/task-item.png) no-repeat 3px 50%; /* LTR */
padding: 0.5em 1em 0.5em 20px; /* LTR */
color: #000;
}
ol.task-list li.done {
.task-list li.done {
background: transparent url(images/task-check.png) no-repeat 0 50%;
color: green;
}
body.in-maintenance #branding .step-indicator {
display: none;
}
@media all and (max-width: 768px) {
ol.task-list,
body.in-maintenance #logo {
display: none;
}
body.in-maintenance #branding h1 {
float: left;
width: auto;
}
body.in-maintenance #branding .step-indicator {
display: block;
float: right;
}
}
/* Overlay theming */
.overlay #branding {
......@@ -1656,7 +1639,6 @@ details.fieldset-no-legend {
}
}
/**
* Node form dropbuttons.
*/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment