Commit 84119067 authored by Cecilia Vela Gurovic's avatar Cecilia Vela Gurovic

Bug 1668888: Use more core functionality to unify screens

Bring title, layout and skins into the same
"Settings" screen and display them in panels.

Still to do:
- Fix existing Behat tests where needed
- Remove code that is not needed anymore

behatnotneeded

Change-Id: I0da607187f1e2b7b03fc1ebbbbe205ca1d3e87c2
parent 49b6c74e
This diff is collapsed.
......@@ -11,14 +11,16 @@
defined('INTERNAL') || die();
$string['basics'] = 'Basics';
$string['createview'] = 'Create page';
$string['edittitle'] = 'Edit title';
$string['edittitleanddescription'] = 'Edit title and description';
$string['editcontent'] = 'Edit content';
$string['editcontent1'] = 'Edit';
$string['editcontentandlayout'] = 'Edit content and layout';
$string['editlayout'] = 'Edit layout';
$string['editaccess'] = 'Edit access';
$string['editaccessfor'] = 'Edit access (ID %s)';
$string['layout'] = 'Layout';
$string['manageaccess'] = 'Manage access';
$string['manageaccessfor'] = 'Manage access for "%s"';
$string['managekeys'] = 'Manage secret URLs';
......@@ -32,9 +34,12 @@ $string['viewurl'] = 'Page URL';
$string['viewurldescription'] = 'A readable URL for your page. This field must be between 3 and 100 characters long.';
$string['userviewurltaken'] = 'This URL is already taken. Please choose another one.';
$string['description'] = 'Page description';
$string['settings'] = 'Settings';
$string['startdate'] = 'Access start date/time';
$string['stopdate'] = 'Access end date/time';
$string['skin'] = 'Skin';
$string['overrideconflict'] = 'One or more access permissions are in conflict with the overriding dates. These access permissions will not be valid outside the overriding dates.';
$string['pagepartofcollection'] = 'Your page is part of the collection \'%s\'. The permissions you set on this page will be applied to the entire collection.';
$string['stopdatecannotbeinpast1'] = '"To" date cannot be in the past';
$string['startdatemustbebeforestopdate'] = 'Start date must be before stop date';
$string['newstopdatecannotbeinpast'] = 'The end date for \'%s\' access cannot be in the past.';
......@@ -176,8 +181,8 @@ $string['defaultaccesslistmessage'] = 'Nobody besides you can view your selected
$string['sharewithmygroups'] = 'Share with my groups';
$string['sharewithmyinstitutions'] = 'Share with my institutions';
$string['sharewithusers'] = 'Share with users';
$string['shareview'] = 'Share page';
$string['otherusersandgroups'] = 'Share with other users and groups';
$string['shareview1'] = 'Share';
$string['sharedwithothers'] = 'Share with others';
$string['moreoptions'] = 'Advanced options';
$string['moreinstitutions'] = 'More institutions';
$string['allviews'] = 'All pages';
......@@ -318,7 +323,6 @@ $string['advancedoptions'] = 'Advanced options';
$string['viewcolumnspagedescription'] = 'First, select the number of columns in your page. In the next step, you will be able to change the widths of the columns.';
$string['viewlayoutpagedescription'] = 'Select how you would like your page to be laid out.';
$string['changeviewlayout'] = 'Change my page\'s column layout';
$string['viewlayoutchanged'] = 'Page layout changed';
$string['numberofcolumns'] = 'Number of columns';
$string['changecolumnlayoutfailed'] = 'Could not change the column layout. Someone else may have been editing the layout at the same time. Please try again later.';
$string['changerowlayoutfailed'] = 'Could not change the row layout. Someone else may have been editing the layout at the same time. Please try again later.';
......
<?php
/**
*
* @package mahara
* @subpackage form-element
* @author Catalyst IT Ltd
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL version 3 or later
* @copyright For copyright information on Mahara, please see the README file distributed with this software.
*
*/
/**
* Provides
* - radio button input field to select from all page layouts`
* - custom layout creation field
*
* @param Pieform $form The form to render the element for
* @param array $element The element to render
* @return string The HTML for the element
*/
function pieform_element_layout(Pieform $form, $element) {
$output = '<div id="' . $form->get_property('name') . '_advancedlayoutselect_container" class="advancedlayoutselect">';
for ($row = 0; $row < $element['maxrows']; $row++) {
$output .= '<h4 class="title">' . ($row + 1) . ' ';
$output .= get_string('row', 'view');
$output .= '</h4>';
$output .= '<div class="layoutoptions-container" id="' . $form->get_property('name') . '_advancedlayoutselect_row' . ($row + 1) . '">';
foreach ($element['options'] as $value => $data) {
if ($data['rows'] == $row+1) {
$description = (isset($data['description'])) ? $data['description'] : '';
$text = Pieform::hsc($data['columns']);
$output .= '<div class="layoutoption"><div class="thumbnail text-center">'
. '<label class="accessible-hidden sr-only" for="advancedlayout_' . Pieform::hsc($value) . '">' . $text . '</label>'
. ($description != '' ? '<div class="radio-description">' . $description . '</div>' : '')
. '<div class="layoutthumb">' . $data['layout'] . '</div>'
. '<input type="radio" name="advancedlayoutselect" id="advancedlayout_' . Pieform::hsc($value) . '"'
. ' value="' . Pieform::hsc($value) . '"'
. (($element['currentlayout'] == $value) ? ' checked="checked"' : '') . '>'
. '</div></div>';
}
}
$output .= '</div>';
}
$output .= '</div>';
//******** Custom layout
$output .= '<div id="' . $form->get_property('name') . '_createcustomlayout_container" class="createcustomlayout">';
// custom layout design options
if (!isset($element['clnumcolumnsoptions']) || !is_array($element['clnumcolumnsoptions']) || count($element['clnumcolumnsoptions']) < 1 || !isset($element['columnlayoutoptions']) || !is_array($element['columnlayoutoptions']) || count($element['columnlayoutoptions']) < 1) {
throw new PieformException('Custom layouts need a set of possible layout options.');
}
$output .= '<h4 class="title">';
$output .= get_string('createcustomlayout', 'view');
$output .= '</h4>';
$output .= '<div id="createcustomlayoutpane" class="row col-static">'
. '<div class="col-xs-12 col-sm-2">'
. '<div class="user-icon layoutthumb preview"><div id="custompreview">' . $element['customlayout'] . '</div><p class="metadata text-center">' . get_string('layoutpreview', 'view') .'</p></div>'
. '</div>'
. '<div id="customrows" class="col-xs-12 col-sm-10">'
. '<div id="customrow_1" class="customrow form-group five-across multi-label clearfix" style="border-bottom: 0px !important;">'
. '<div class="customrowtitle pull-left field"><strong>' . get_string('Row', 'view') . ' 1</strong></div>'
. '<div class="pull-left field field-selectnumcols">'
. '<label for="selectnumcolsrow_1">' . get_string('numberofcolumns', 'view') . '</label>'
. '<select name="selectnumcols" id="selectnumcolsrow_1" class="selectnumcols input-sm" onchange="CustomLayoutManager.customlayout_change_numcolumns(\'' . $form->get_property('name') . '\', this)">';
foreach ($element['clnumcolumnsoptions'] as $value => $data) {
$output .= '<option value="' . $value . '" ' . (($element['clnumcolumnsdefault'] == $value)? 'selected="selected"' : '') . '>' . $data . '</option>';
}
$output .= '</select></div>'
. '<div class="pull-left field">'
. '<label for="selectcollayoutrow_1">' . get_string('columnlayout', 'view') . '</label>'
. '<select name="selectcollayout" id="selectcollayoutrow_1" class="selectcollayout input-sm" onchange="CustomLayoutManager.customlayout_change_column_layout(\'' . $form->get_property('name') . '\')">';
foreach ($element['columnlayoutoptions'] as $value => $data) {
$numcols = count(explode('-', $data));
$selectionstring = 'disabled';
if ($value == $element['customlayoutid']) {
$selectionstring = 'selected="selected"';
}
else if ($numcols == $element['clnumcolumnsdefault']) {
$selectionstring = '';
}
$output .= '<option value="' . $value . '" ' . $selectionstring . '>' . $data . '</option>';
}
$output .= '</select>'
. '</div>'
. '</div>'; //closing customrow_1
// 'Add row' button
$output .='<button type="button" name="addrow" class="btn btn-sm btn-default" id="addrow" onclick="CustomLayoutManager.customlayout_add_row(\'' . $form->get_property('name') . '\')">'
.'<span class="icon icon-lg icon-plus-circle left" role="presentation" aria-hidden="true"></span>'
. get_string('addarow', 'view')
.'</button>'
. '</div>';// closing customrows
// close 'createcustomlayoutpane'
$output .= '</div>';
// preview pane
$output .= '<div id="previewcustomlayoutpane">'
. '<button type="button" name="submitlayout" id="addlayout" class="btn btn-default" onclick="CustomLayoutManager.customlayout_submit_layout(\'' . $form->get_property('name') . '\')">'
. '<span class="icon icon-lg icon-check left" role="presentation" aria-hidden="true"></span>'
. get_string('createnewlayout', 'view')
. '</button>'
. '</div>';
// close 'createcustomlayout_container' container
$output .= '</div>';
$output .= '<script type="application/javascript">
$( window ).on( "load", function() {
init(\'' . $form->get_property('name') . '\');
});</script>';
return $output;
}
function pieform_element_layout_get_headdata($element) {
$result = '<script src="' . get_config('wwwroot') . 'js/customlayout.js?v=' . get_config('cacheversion', 0) . '" type="application/javascript">';
return array($result);
}
......@@ -62,17 +62,19 @@ function pieform_element_calendar(Pieform $form, $element) {
$result = '<span class="hasDatepickerwrapper"><input type="text"'
. $form->element_attributes($element)
. ' value="' . $value . '"></span>';
$result .= '<script type="application/javascript">
var input = jQuery("input#' . $id . '");';
$result .= '
<script type="application/javascript">
var input_' . $id . ' = jQuery("input#' . $id . '");
';
if (!empty($options['showsTime'])) {
$result .= 'input.datetimepicker({';
$result .= 'input_' . $id . '.datetimepicker({';
}
else {
$result .= 'input.datepicker({';
$result .= 'input_' . $id . '.datepicker({';
}
$result .= ' onSelect: function(date) {
if (typeof formchangemanager !== \'undefined\') {
var form = input.closest(\'form\')[0];
var form = input_' . $id . '.closest(\'form\')[0];
formchangemanager.setFormState(form, FORM_CHANGED);
}
},';
......
......@@ -312,8 +312,9 @@ class Skin {
/**
* Returns data about available skins. Tightly coupled with view/skin.php, which uses it to
* display the skins picker
* Returns data about available skins.
* Tightly coupled with get_skin_elements() function in view/editlayout.php,
* which uses it to display the skins picker
* @param int $limit
* @param int $offset
* @param string $filter Should be: all, public, user, or site
......
......@@ -2690,7 +2690,7 @@ class View {
if ($dbcolumns != 0) {
db_rollback();
$SESSION->add_error_msg(get_string('changecolumnlayoutfailed', 'view'));
redirect(get_config('wwwroot') . 'view/layout.php?id=' . $this->get('id') . ($new ? '&new=1' : ''));
redirect(get_config('wwwroot') . 'view/editlayout.php?id=' . $this->get('id') . ($new ? '&new=1' : ''));
}
$this->set('numrows', $this->get('numrows') - 1);
......@@ -3892,11 +3892,7 @@ class View {
$ua->accessibilityname = get_string('manageaccessfor', 'view', $data['vtitle']);
$ua->accesstype = 'managesharing';
$uk = new stdClass();
$uk->displayname = get_string('managekeys', 'view');
$uk->accessibilityname = get_string('managekeysfor', 'view', $data['vtitle']);
$uk->accesstype = 'managekeys';
$data['manageaccess'] = array($ua, $uk);
$data['manageaccess'] = array($ua);
if ($accesslist = get_records_sql_array('
SELECT va.*, g.name AS groupname, g.grouptype, i.displayname AS institutionname
......
......@@ -209,7 +209,7 @@ abstract class PluginSearch extends Plugin implements IPluginSearch {
'_default' => $wwwroot . 'view/view.php?id=' . $result['id'],
// TODO: these are certainly broken!
get_string('editviewinformation') => $wwwroot . 'view/editmetadata.php?viewid=' . $result['id'],
get_string('editview') => $wwwroot . 'view/edit.php?viewid=' . $result['id'],
get_string('editview') => $wwwroot . 'view/editlyout.php?viewid=' . $result['id'],
get_string('editaccess') => $wwwroot . 'view/editaccess.php?viewid=' . $result['id'],
);
break;
......
This diff is collapsed.
......@@ -38,6 +38,10 @@
}
}
.wysiwyg.view-description {
width: 70%;
}
.toolbar-affix.affix {
position: fixed;
top: 70px;
......@@ -437,7 +441,7 @@
}
}
}
#manage-skins-btn {
.manage-skins-btn {
margin-top: 10px;
margin-bottom: 20px;
}
......@@ -446,6 +450,11 @@
width: 90%;
}
.defaultskin {
margin-top: 10px;
margin-bottom: 20px;
}
.authInstance .authitem {
padding:5px;
&.inactive {
......@@ -501,78 +510,7 @@
/***********************************
SIDEBLOCKS
***********************************/
#sb-switchtheme form{
padding:20px;
}
#sb-switchtheme .submit.btn.btn-primary{
display:block;
margin:0 auto;
margin-top:15px;
}
#viewtheme-select {
display:block;
margin:0 auto;
}
/* Boutons institutions*/
.list-group-item.bouton-instit-theme {
border: 0px !important;
width: 100%;
text-align: left;
}
#sb-switchtheme form {
padding: 0 !important;
width: 100% !important;
}
/* Pages */
.col-md-12.lesboutons {
z-index: 999;
}
.theorder1866 > img {
width: 10%;
}
.btn-group.btn-toolbar {
.editviews {
img {
width: 16px;
}
}
}
.col-md-12.lesboutons {
margin-bottom: 10px;
margin-top: 10px;
padding: 0;
}
.col-md-12.lesboutons .col-collapse-offset.col-with-collapse, .col-md-12.lesboutons #enregistrer {
margin-left: 0;
padding-left: 0;
}
.col-md-12.lesboutons #afficher {
margin-right: 0;
padding-right: 0;
}
.accessurl-title {
padding-top: 30px !important;
}
.pageshare.editthepage .btn-group.btn-toolbar.btn-group-top.col-md-12 {
margin-top: -30px;
}
.modifiertoutensemble {
padding-bottom: 20px;
}
.modifiertoutensemble > label {
display: block;
padding-top: 20px;
}
.modifiertoutensemble .mce-tinymce {
width: 100% !important;
}
.modifiertoutensemble .select2.select2-container.select2-container--default {
margin-top: 20px;
}
#dialoginst {
padding: 5px;
z-index: 9999;
}
......@@ -39,6 +39,7 @@
.customrow + .btn {
margin-top: 10px;
margin-bottom: 5px;
}
// Used on pending friends page
......
......@@ -40,7 +40,7 @@
// use to override relative positioning on bootstrap cols
.col-static {
position: relative;
min-height: 200px;
min-height: 165px;
> [class^="col-"] {
position: static;
}
......
......@@ -121,8 +121,8 @@ jQuery(function($) {
// does not work properly on Microsoft Edge
// This is a workaround
// It will check if the required select is not empty and remove the attribute 'required'
$j('#editaccess_submit').click(function(e) {
$j('#editaccess select:required').each(function() {
$j('#{{$formname}}_submit').click(function(e) {
$j('#{{$formname}} select:required').each(function() {
if ($j(this).val()) {
$j(this).prop("required", false);
}
......@@ -162,7 +162,7 @@ jQuery(function($) {
settarget.datetimepicker( "option", "maxDate", selectedDate);
}
if ((setmin !== undefined || setmax !== undefined ) && selectedDate !== "") {
formchangemanager.setFormStateById('editaccess', FORM_CHANGED);
formchangemanager.setFormStateById('{{$formname}}', FORM_CHANGED);
}
}
});
......@@ -189,7 +189,7 @@ jQuery(function($) {
function formatSelect2Selected (data) {
if (data._resultId !== undefined) {
formchangemanager.setFormStateById('editaccess', FORM_CHANGED);
formchangemanager.setFormStateById('{{$formname}}', FORM_CHANGED);
}
if (data.grouptype !== undefined) {
return '<span data-grouptype="'+ data.grouptype + '">'+ data.name + '</span>';
......@@ -269,7 +269,7 @@ jQuery(function($) {
if($(self).attr('data-roles').length > 0) {
showRoleSelect(e, self);
}
formchangemanager.setFormStateById('editaccess', FORM_CHANGED);
formchangemanager.setFormStateById('{{$formname}}', FORM_CHANGED);
});
}
......@@ -340,7 +340,7 @@ jQuery(function($) {
e.preventDefault();
if (!$(this).hasClass('icon-placeholder')) {
clearRow(this);
formchangemanager.setFormStateById('editaccess', FORM_CHANGED);
formchangemanager.setFormStateById('{{$formname}}', FORM_CHANGED);
}
});
}
......@@ -358,7 +358,7 @@ jQuery(function($) {
row.find('.js-hide-empty').removeClass('hidden');
addNewRow(shareoptions, {empty: true});
}
formchangemanager.setFormStateById('editaccess', FORM_CHANGED);
formchangemanager.setFormStateById('{{$formname}}', FORM_CHANGED);
});
}
......@@ -533,7 +533,7 @@ jQuery(function($) {
}
function attachCommentEvents(newrow) {
if ($('#editaccess_allowcomments').prop('checked') === true) {
if ($('#{{$formname}}_allowcomments').prop('checked') === true) {
// Hide the per row comment options
newrow.find('.commentcolumn').addClass('hidden');
}
......
{include file="header.tpl"}
{include file="view/editviewtabs.tpl" selected='share' new=$new issiteview=$issiteview}
<div id="accessurl-container">
<br/>
<h2 class="accessurl-title">{str tag=secreturls section=view}</h2>
<!-- Url -->
<div class="btn-top-right btn-group">
{$newform|safe}
</div>
<div class="view-container">
{if !$allownew}
<div class="message info">
{if $onprobation}
{str tag=publicaccessnotallowedforprobation section=view}
{else}
{str tag=publicaccessnotallowed section=view}
{/if}
</div>
{/if}
{if $editurls}
<div class="panel panel-default">
<h2 class="panel-heading">
{str tag=secreturls section=view}
</h2>
<div class="secreturls list-group">
{foreach from=$editurls item=item name=urls}
<div class="{cycle values='r0,r1' advance=false} list-group-item">
<div class="row">
<div class="col-xs-12 col-sm-9">
<strong class="secret-url">{$item.url}</strong>
</div>
<div class="col-xs-12 col-sm-3">
<div class="btn-action-list">
<div class="btn-top-right btn-group btn-group-top">
<a id="copytoclipboard-{$item.id}" data-clipboard-text="{$item.url}" class="url-copytoclipboardbutton btn btn-default btn-xs" title="{str tag=copytoclipboard}" href="#">
<span class="icon icon-files-o icon-lg" role="presentation" aria-hidden="true"></span>
<span class="sr-only">{str tag=copytoclipboard}</span>
</a>
<a id="edit-{$item.id}" class="url-open-editform nojs-hidden-inline btn btn-default closed" title="{str tag=edit}" href="">
<span class="icon icon-pencil icon-lg" role="presentation" aria-hidden="true"></span>
<span class="icon icon-chevron-down right" role="presentation" aria-hidden="true"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
{$item.deleteform|safe}
</div>
</div>
</div>
</div>
</div>
<div class="editrow {cycle} url-editform js-hidden list-group-item" id="edit-{$item.id}-form">
{$item.editform|safe}
</div>
{/foreach}
</div>
</div>
{/if}
</div>
<div class="pageshare">
<h2 class="access-title">{str tag=otherusersandgroups section=view}</h2>
<!-- Access -->
{$form|safe}
</div>
</div>
{include file="footer.tpl"}
{include file="header.tpl"}
{include file="view/editviewtabs.tpl" selected='share' new=$new issiteview=$issiteview}
<div id="accessurl-container">
{if $collectionid}
<label>{str tag=pagepartofcollection section=view arg1=$collectiontitle}</label>
{/if}
<h2 class="accessurl-title">{str tag=secreturls section=view}</h2>
<!-- Url -->
<div class="btn-top-right btn-group">
{$newform|safe}
</div>
<div class="view-container">
{if !$allownew}
<div class="message info">
{if $onprobation}
{str tag=publicaccessnotallowedforprobation section=view}
{else}
{str tag=publicaccessnotallowed section=view}
{/if}
</div>
{/if}
{if $editurls}
<div class="panel panel-default">
<h2 class="panel-heading">
{str tag=secreturls section=view}
</h2>
<div class="secreturls list-group">
{foreach from=$editurls item=item name=urls}
<div class="{cycle values='r0,r1' advance=false} list-group-item">
<div class="row">
<div class="col-xs-12 col-sm-9">
<strong class="secret-url">{$item.url}</strong>
</div>
<div class="col-xs-12 col-sm-3">
<div class="btn-action-list">
<div class="btn-top-right btn-group btn-group-top">
<a id="copytoclipboard-{$item.id}" data-clipboard-text="{$item.url}" class="url-copytoclipboardbutton btn btn-default btn-xs" title="{str tag=copytoclipboard}" href="#">
<span class="icon icon-files-o icon-lg" role="presentation" aria-hidden="true"></span>
<span class="sr-only">{str tag=copytoclipboard}</span>
</a>
<a id="edit-{$item.id}" class="url-open-editform nojs-hidden-inline btn btn-default closed" title="{str tag=edit}" href="">
<span class="icon icon-pencil icon-lg" role="presentation" aria-hidden="true"></span>
<span class="icon icon-chevron-down right" role="presentation" aria-hidden="true"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
{$item.deleteform|safe}
</div>
</div>
</div>
</div>
</div>
<div class="editrow {cycle} url-editform js-hidden list-group-item" id="edit-{$item.id}-form">
{$item.editform|safe}
</div>
{/foreach}
</div>
</div>
{/if}
</div>
<div class="pageshare">
<h2 class="access-title">{str tag=sharedwithothers section=view}</h2>
<!-- Access -->
{$form|safe}
</div>
</div>
{include file="footer.tpl"}
<div class="btn-group btn-toolbar btn-group-top">
{if $edittitle}
<a class="btn btn-default editviews editlayout {if $selected == 'layout'}active{/if}" href="{$WWWROOT}view/editlayout.php?id={$viewid}{if $new}&new=1{/if}" title="{str tag=edittitleanddescription section=view}">
<span class="theorder1866"><img src="{$WWWROOT}theme/raw/images/number-one-in-a-circle-grey.png"></span>
<span class="btn-title">{str tag=edittitleanddescription section=view}</span>
{if !$issitetemplate && can_use_skins(null, false, $issiteview)}
+ {str tag=chooseskin section=skin}
{/if}
<div id="toolbar-buttons" class="btn-group btn-toolbar btn-group-top">
<a class="btn btn-default editviews editlayout {if $selected == 'layout'}active{/if}"
href="{$WWWROOT}view/editlayout.php?id={$viewid}{if $new}&new=1{/if}"
title="{if $edittitle}{str tag=settings section=view}{else}{str tag=editlayout section=view}{/if}">
<span class="icon icon-lg icon-cogs"></span>
<span class="btn-title">{str tag=settings section=view}</span>
</a>
{else}
<a class="btn btn-default editviews editlayout {if $selected == 'layout'}active{/if}" href="{$WWWROOT}view/layout.php?id={$viewid}{if $new}&new=1{/if}" title="{str tag=editlayout section=view}">
<span class="theorder1866"><img src="{$WWWROOT}theme/raw/images/number-one-in-a-circle-grey.png"></span>
<span class="btn-title">{str tag=editlayout section=view}</span>
</a>
{/if}
<a class="btn btn-default editviews editcontent {if $selected == 'content'}active{/if}" href="{$WWWROOT}view/blocks.php?id={$viewid}{if $new}&new=1{/if}" title="{str tag=editcontent section=view}">
<span class="theorder1866"><img src="{$WWWROOT}theme/raw/images/number-two-in-a-circle-grey.png"></span>
<span class="btn-title">{str tag=editcontent section=view}</span>
<span class="icon icon-lg icon-pencil" aria-hidden="true" role="presentation"></span>
<span class="btn-title">{str tag=editcontent1 section=view}</span>
</a>
{if $edittitle <