Bug 1835869: Add skin background image to page header area

- Created an option in Skin customizing where users may select an image
  as their page header
- Reorganised tabs and their titles
- Skin thumbnails display colour/image of header
- drop the old viewbgimg column and add the headingbgimg column

behatnotneeded: to be added later

Change-Id: Ib5bb4714de479e9c10237d24aa653a5ea227a5f7

htdocs/artefact/file/lib.php

@@ -565,7 +565,7 @@ abstract class ArtefactTypeFileBase extends ArtefactType {
                 LEFT OUTER JOIN {artefact} api ON api.parent = a.id AND api.artefacttype = \'profileicon\'
                 LEFT OUTER JOIN {view_artefact} va ON va.artefact = a.id
                 LEFT OUTER JOIN {artefact_attachment} aa ON aa.attachment = a.id
-                LEFT OUTER JOIN {skin} s ON (s.bodybgimg = a.id OR s.viewbgimg = a.id)
+                LEFT OUTER JOIN {skin} s ON (s.bodybgimg = a.id OR s.headingbgimg = a.id)
                 LEFT OUTER JOIN {interaction_forum_post_attachment} fpa ON fpa.attachment = a.id
                 LEFT OUTER JOIN {usr} u ON a.id = u.profileicon AND a.owner = u.id';
 

htdocs/artefact/file/profileicons.json.php

@@ -18,7 +18,7 @@ $result = get_records_sql_array('SELECT a.id, a.title, a.note, (u.profileicon =
     FROM {artefact} a
     LEFT OUTER JOIN {view_artefact} va ON va.artefact = a.id
     LEFT OUTER JOIN {artefact_attachment} aa ON aa.attachment = a.id
-    LEFT OUTER JOIN {skin} s ON (s.bodybgimg = a.id OR s.viewbgimg = a.id)
+    LEFT OUTER JOIN {skin} s ON (s.bodybgimg = a.id OR s.headingbgimg = a.id)
     LEFT OUTER JOIN {interaction_forum_post_attachment} fpa ON fpa.attachment = a.id
     LEFT OUTER JOIN {usr} u ON (u.id = a.owner)
     WHERE artefacttype = \'profileicon\'

htdocs/lang/en.utf8/pieforms.php

@@ -74,6 +74,7 @@ $string['element.select.other'] = 'Other';
 $string['element.select.remove'] = 'Remove "%s"';
 
 $string['element.color.transparent'] = 'Default or ';
+$string['element.font.themedefault'] = 'Use Theme font';
 
 $string['rule.before.before'] = 'This cannot be after the field "%s"';
 

htdocs/lang/en.utf8/skin.php

@@ -16,6 +16,15 @@ $string['pluginname'] = 'Skin';
 $string['myskins'] = 'Skins';
 $string['siteskinmenu'] = 'Skins';
 
+$string['themedefault'] = 'Theme default';
+$string['headerbackgroundcolor'] = 'Header background colour';
+$string['headerbackgroundcolordescription'] = 'Background color for page header - this will not show if a header image has been selected';
+$string['headerbackgroundimage'] = 'Header background image';
+$string['headerbackgroundimagedescription'] = 'Minimum ideal width: 1832px. Minimum ideal height: 232px.';
+$string['bodybackgroundcolour'] = 'Page background colour';
+$string['bodybackgroundimage'] = 'Page background image';
+
+
 $string['deletethisskin'] = 'Delete this skin';
 $string['skindeleted'] = 'Skin deleted';
 $string['cantdeleteskin'] = 'You cannot delete this skin.';

htdocs/lib/db/install.xml

@@ -1140,7 +1140,7 @@
                 <FIELD NAME="type" TYPE="char" LENGTH="10" NOTNULL="true" DEFAULT="private" />
                 <FIELD NAME="viewskin" TYPE="text" LENGTH="big" NOTNULL="true" />
                 <FIELD NAME="bodybgimg" TYPE="int" LENGTH="10" NOTNULL="false" />
-                <FIELD NAME="viewbgimg" TYPE="int" LENGTH="10" NOTNULL="false" />
+                <FIELD NAME="headingbgimg" TYPE="int" LENGTH="10" NOTNULL="false" />
                 <FIELD NAME="ctime" TYPE="datetime" NOTNULL="false" />
                 <FIELD NAME="mtime" TYPE="datetime" NOTNULL="false" />
             </FIELDS>

htdocs/lib/db/upgrade.php

@@ -1459,5 +1459,31 @@ function xmldb_core_upgrade($oldversion=0) {
         }
     }
 
+    if ($oldversion < 2019090901) {
+        log_debug('Update the "skin" table to change where we record background images');
+        $table = new XMLDBTable('skin');
+        if (table_exists($table)) {
+            log_debug('Adding headingbgimg');
+            $field = new XMLDBField('headingbgimg');
+            if (!field_exists($table, $field)) {
+                $field->setAttributes(XMLDB_TYPE_INTEGER, 10);
+                add_field($table, $field);
+            }
+
+            $field = new XMLDBField('viewbgimg');
+            if (field_exists($table, $field)) {
+                log_debug('Removing viewbgimg');
+                if ($records = get_records_sql_array("SELECT viewbgimg AS aid FROM {skin} WHERE viewbgimg > 0")) {
+                    foreach ($records as $record) {
+                        // Need to remove the view bg image
+                        require_once(get_config('libroot') . 'skin.php');
+                        Skin::remove_background($record->aid);
+                    }
+                }
+                drop_field($table, $field);
+            }
+        }
+    }
+
     return $status;
 }

htdocs/lib/mahara.php

@@ -3484,7 +3484,7 @@ function artefact_in_view($artefact, $view) {
             SELECT s.id
             FROM {view} v INNER JOIN {skin} s
                 ON v.skin = s.id
-            WHERE v.id = ? AND ? in (s.bodybgimg, s.viewbgimg)
+            WHERE v.id = ? AND ? in (s.bodybgimg, s.headingbgimg)
     ";
     $params = array_merge($params, array($view, $artefact->get('id')));
 

htdocs/lib/version.php

@@ -16,7 +16,7 @@ $config = new stdClass();
 // See https://wiki.mahara.org/wiki/Developer_Area/Version_Numbering_Policy
 // For upgrades on stable branches, increment the version by one.  On master, use the date.
 
-$config->version = 2019090900;
+$config->version = 2019090901;
 $config->series = '19.10';
 $config->release = '19.10dev';
 $config->minupgradefrom = 2017031605;

htdocs/skin/design.php

@@ -134,29 +134,68 @@ $elements['viewskin'] = array(
                 ),
         ),
 );
+
+// Page
 $elements['skinbg'] = array(
     'type'   => 'fieldset',
-    'legend' => get_string('skinbackgroundoptions1', 'skin'),
+    'legend' => get_string('view', 'mahara'),
     'class'  => $fieldset != 'skinbg' ? 'collapsed' : '',
     'elements'     => array(
-            'body_background_color' => array(
-                    'type' => 'color',
-                    'title' => get_string('bodybgcolor1', 'skin'),
-                    'defaultvalue' => (!empty($viewskin['body_background_color']) ? $viewskin['body_background_color'] : '#FFFFFF'),
-                    'size' => 7,
-                    'options' => array(
-                        'transparent' => true,
-                    ),
-            )
+        'header_background_color' => array(
+            'type' => 'color',
+            'title' => get_string('headerbackgroundcolor', 'skin'),
+            'description' => get_string('headerbackgroundcolordescription', 'skin'),
+            'defaultvalue' => (!empty($viewskin['header_background_color']) ? $viewskin['header_background_color'] : '#FFFFFF'),
+            'size' => 7,
+            'options' => array(
+                'transparent' => true,
+            ),
+        ),
+        'header_background_image' => array(
+            'type'         => 'filebrowser',
+            'title'        => get_string('headerbackgroundimage', 'skin'),
+            'folder'       => $folder,
+            'highlight'    => $highlight,
+            'description'  => get_string('headerbackgroundimagedescription', 'skin'),
+            'browse'       => $browse,
+            'filters'      => array(
+                'artefacttype' => array('image'),
+            ),
+            'page'         => get_config('wwwroot') . 'skin/design.php?id=' . $id . '&fs=skinbg',
+            'config'       => array(
+                'upload'          => false,
+                'uploadagreement' => get_config_plugin('artefact', 'file', 'uploadagreement'),
+                'resizeonuploaduseroption' => get_config_plugin('artefact', 'file', 'resizeonuploaduseroption'),
+                'resizeonuploaduserdefault' => $USER->get_account_preference('resizeonuploaduserdefault'),
+                'createfolder'    => false,
+                'edit'            => false,
+                'select'          => true,
+                'selectone'       => true,
+            ),
+            'defaultvalue'       => (!empty($viewskin['header_background_image']) ? array(intval($viewskin['header_background_image'])) : array()),
+            'selectlistcallback' => 'artefact_get_records_by_id',
+            // TODO: Make this work so skins can include site files
+            // 'tabs' => true,
+        ),
+        'body_background_color' => array(
+            'type' => 'color',
+            'title' => get_string('bodybackgroundcolour', 'skin'),
+            'defaultvalue' => (!empty($viewskin['body_background_color']) ? $viewskin['body_background_color'] : '#FFFFFF'),
+            'size' => 7,
+            'options' => array(
+                'transparent' => true,
+            ),
+        )
     )
 );
+
 // Currently site files don't work properly with site skins. And since site files are the only files that would make
 // sense with site skins, we're going to just hide background images entirely for site skins for the time being.
 if (!$designsiteskin) {
     $elements['skinbg']['elements'] = array_merge($elements['skinbg']['elements'], array(
         'body_background_image' => array(
                 'type'         => 'filebrowser',
-                'title'        => get_string('bodybgimage1', 'skin'),
+                'title'        => get_string('bodybackgroundimage', 'skin'),
                 'folder'       => $folder,
                 'highlight'    => $highlight,
                 'browse'       => $browse,
@@ -209,24 +248,45 @@ if (!$designsiteskin) {
         )
     ));
 }
+
+// Add option for theme font
+$themefontoption = array ('' => get_string('themedefault', 'skin'));
+$headerfontoptions = Skin::get_all_font_options();
+$fontoptions = Skin::get_textonly_font_options();
+
+// Add theme font element to list of fonts
+$headerfontoptions = $themefontoption + $headerfontoptions;
+$fontoptions = $themefontoption + $fontoptions;
+
+// Text
 $elements['viewcontent'] = array(
         'type'   => 'fieldset',
-        'legend' => get_string('viewcontentoptions1', 'skin'),
+        'legend' => get_string('sampletext', 'skin'),
         'class'  => $fieldset != 'viewcontent' ? 'collapsed' : '',
         'elements'     => array(
                 'view_heading_font_family' => array(
                         'type' => 'select',
                         'title' => get_string('headingfontfamily', 'skin'),
-                        'defaultvalue' => (!empty($viewskin['view_heading_font_family']) ? $viewskin['view_heading_font_family'] : 'Arial'),
+                        'defaultvalue' => (!empty($viewskin['view_heading_font_family']) ? $viewskin['view_heading_font_family'] : '' ),
                         'width' => 144,
-                        'options' => Skin::get_all_font_options(),
+                        'options' => $headerfontoptions
+                ),
+                'view_text_heading_color' => array(
+                        'type' => 'color',
+                        'title' => get_string('headingcolor', 'skin'),
+                        'description' => get_string('headingcolordescription', 'skin'),
+                        'defaultvalue' => (!empty($viewskin['view_text_heading_color']) ? $viewskin['view_text_heading_color'] : '#000000'),
+                        'size' => 7,
+                        'options' => array(
+                            'transparent' => true,
+                        ),
                 ),
                 'view_text_font_family' => array(
                         'type' => 'select',
                         'title' => get_string('textfontfamily', 'skin'),
-                        'defaultvalue' => (!empty($viewskin['view_text_font_family']) ? $viewskin['view_text_font_family'] : 'Arial'),
+                        'defaultvalue' => (!empty($viewskin['view_text_font_family']) ? $viewskin['view_text_font_family'] : ''),
                         'width' => 144,
-                        'options' => Skin::get_textonly_font_options(),
+                        'options' => $fontoptions
                 ),
                 'view_text_font_size' => array(
                         'type' => 'select',
@@ -253,16 +313,6 @@ $elements['viewcontent'] = array(
                             'transparent' => true,
                         ),
                 ),
-                'view_text_heading_color' => array(
-                        'type' => 'color',
-                        'title' => get_string('headingcolor', 'skin'),
-                        'description' => get_string('headingcolordescription', 'skin'),
-                        'defaultvalue' => (!empty($viewskin['view_text_heading_color']) ? $viewskin['view_text_heading_color'] : '#000000'),
-                        'size' => 7,
-                        'options' => array(
-                            'transparent' => true,
-                        ),
-                ),
                 'view_text_emphasized_color' => array(
                         'type' => 'color',
                         'title' => get_string('emphasizedcolor', 'skin'),
@@ -315,7 +365,7 @@ $elements['viewadvanced'] = array(
                         'style' => 'font-family:monospace',
                         'resizable' => true,
                         'fullwidth' => true,
-                        'title' => get_string('skincustomcss','skin'),
+                        'title' => get_string('skincustomcss', 'skin'),
                         'description' => get_string('skincustomcssdescription', 'skin'),
                         'defaultvalue' => ((!empty($viewskin['view_custom_css'])) ? $viewskin['view_custom_css'] : null),
                 ),
@@ -420,6 +470,8 @@ function designskinform_submit(Pieform $form, $values) {
     $skin['view_text_font_size'] = $values['view_text_font_size'];
     $skin['view_text_font_color'] = $values['view_text_font_color'];
     $skin['view_text_heading_color'] = $values['view_text_heading_color'];
+    $skin['header_background_color'] = $values['header_background_color'];
+    $skin['header_background_image'] = $values['header_background_image'];
     $skin['view_text_emphasized_color'] = $values['view_text_emphasized_color'];
     $skin['view_link_normal_color'] = $values['view_link_normal_color'];
     $skin['view_link_normal_underline'] = $values['view_link_normal_underline'];

htdocs/skin/style.php

@@ -63,7 +63,21 @@ $smarty->assign('body_background_attachment', (!empty($body_background_image)) ?
 $smarty->assign('body_background_position', (!empty($body_background_image)) ? Skin::background_position_number_to_value($skin->viewskin['body_background_position']) : '');
 
 // HEADER
-$smarty->assign('header_background_color', $skin->viewskin['header_background_color']); // TODO remove this
+$smarty->assign('header_background_color', $skin->viewskin['header_background_color']);
+
+if (empty($skin->viewskin['header_background_image'])) {
+    $header_background_image = '';
+}
+else {
+    $header_background_image = 'url(\'' . get_config('wwwroot') . 'artefact/file/download.php?file=' . $skin->viewskin['header_background_image'];
+    if ($viewid) {
+        $header_background_image .= "&view={$viewid}";
+    }
+    $header_background_image .= '\')';
+}
+
+$smarty->assign('header_background_image', $header_background_image);
+
 $smarty->assign('header_text_font_color', $skin->viewskin['header_text_font_color']); // TODO remove this
 $smarty->assign('header_link_normal_color', $skin->viewskin['header_link_normal_color']); // TODO remove this
 $smarty->assign('header_link_normal_underline', ($skin->viewskin['header_link_normal_underline'] == true ? 'underline' : 'none')); // TODO remove this
@@ -90,10 +104,10 @@ $smarty->assign('view_background_width', $skin->viewskin['view_background_width'
 
 // TEXT
 $smarty->assign('view_text_font_face', Skin::get_css_font_face_from_font_name($skin->viewskin['view_text_font_family']));
-$smarty->assign('view_text_font_family', Skin::get_css_font_family_from_font_name($skin->viewskin['view_text_font_family']));
+$smarty->assign('view_text_font_family', Skin::get_css_font_family_from_font_name($skin->viewskin['view_text_font_family'], 'text'));
 $smarty->assign('tabs_height', Skin::get_tabs_height_from_font_name($skin->viewskin['view_text_font_family']));  // TODO remove this
 $smarty->assign('view_heading_font_face', Skin::get_css_font_face_from_font_name($skin->viewskin['view_heading_font_family']));
-$smarty->assign('view_heading_font_family', Skin::get_css_font_family_from_font_name($skin->viewskin['view_heading_font_family']));
+$smarty->assign('view_heading_font_family', Skin::get_css_font_family_from_font_name($skin->viewskin['view_heading_font_family'], 'heading'));
 $smarty->assign('view_text_font_size', $skin->viewskin['view_text_font_size']);
 $smarty->assign('view_text_font_color', $skin->viewskin['view_text_font_color']);
 $smarty->assign('view_text_heading_color', $skin->viewskin['view_text_heading_color']);

htdocs/theme/raw/templates/skin/style.tpl

@@ -30,7 +30,14 @@ body > .main-content > .row {
 }
 
 
-/** all other custom settings should be scoped to be within .user-page-content **/
+/* Heading background customizations */
+.pageheader {
+    background-color: {$header_background_color};
+    background: {$header_background_image|safe} ;
+    background-size: 100%;
+}
+
+/* All other custom settings should be scoped to be within .user-page-content */
 /* with the exception of the page title and page description */
 
 /* page settings (also page description) */
@@ -131,6 +138,6 @@ body > .main-content > .row {
 }
 
 
-/** advanced: custom css **/
+/* advanced: custom css */
 
 {$view_custom_css|safe}