Commit f2405a5f authored by Damyon Wiese's avatar Damyon Wiese
Browse files

MDL-56242 theme_boost: Fix styling for confirm boxes (js and in page)

They should be left aligned with a header, content and footer (right aligned with the buttons).

There should be a primary continue button and a secondary cancel button.
parent 0b8e0c37
......@@ -648,52 +648,57 @@ class single_button implements renderable {
/**
* @var moodle_url Target url
*/
var $url;
public $url;
/**
* @var string Button label
*/
var $label;
public $label;
/**
* @var string Form submit method post or get
*/
var $method = 'post';
public $method = 'post';
/**
* @var string Wrapping div class
*/
var $class = 'singlebutton';
public $class = 'singlebutton';
/**
* @var bool True if button is primary button. Used for styling.
*/
public $primary = false;
/**
* @var bool True if button disabled, false if normal
*/
var $disabled = false;
public $disabled = false;
/**
* @var string Button tooltip
*/
var $tooltip = null;
public $tooltip = null;
/**
* @var string Form id
*/
var $formid;
public $formid;
/**
* @var array List of attached actions
*/
var $actions = array();
public $actions = array();
/**
* @var array $params URL Params
*/
var $params;
public $params;
/**
* @var string Action id
*/
var $actionid;
public $actionid;
/**
* Constructor
......@@ -701,10 +706,11 @@ class single_button implements renderable {
* @param string $label button text
* @param string $method get or post submit method
*/
public function __construct(moodle_url $url, $label, $method='post') {
public function __construct(moodle_url $url, $label, $method='post', $primary=false) {
$this->url = clone($url);
$this->label = $label;
$this->method = $method;
$this->primary = $primary;
}
/**
......@@ -743,6 +749,7 @@ class single_button implements renderable {
$data->classes = $this->class;
$data->disabled = $this->disabled;
$data->tooltip = $this->tooltip;
$data->primary = $this->primary;
// Form parameters.
$params = $this->url->params();
......
......@@ -1707,10 +1707,11 @@ class core_renderer extends renderer_base {
public function confirm($message, $continue, $cancel) {
if ($continue instanceof single_button) {
// ok
$continue->primary = true;
} else if (is_string($continue)) {
$continue = new single_button(new moodle_url($continue), get_string('continue'), 'post');
$continue = new single_button(new moodle_url($continue), get_string('continue'), 'post', true);
} else if ($continue instanceof moodle_url) {
$continue = new single_button($continue, get_string('continue'), 'post');
$continue = new single_button($continue, get_string('continue'), 'post', true);
} else {
throw new coding_exception('The continue param to $OUTPUT->confirm() must be either a URL (string/moodle_url) or a single_button instance.');
}
......@@ -1725,10 +1726,19 @@ class core_renderer extends renderer_base {
throw new coding_exception('The cancel param to $OUTPUT->confirm() must be either a URL (string/moodle_url) or a single_button instance.');
}
$output = $this->box_start('generalbox', 'notice');
$output = $this->box_start('generalbox modal modal-dialog modal-in-page show', 'notice');
$output .= $this->box_start('modal-content', 'modal-content');
$output .= $this->box_start('modal-header', 'modal-header');
$output .= html_writer::tag('h4', get_string('confirm'));
$output .= $this->box_end();
$output .= $this->box_start('modal-body', 'modal-body');
$output .= html_writer::tag('p', $message);
$output .= $this->box_end();
$output .= $this->box_start('modal-footer', 'modal-footer');
$output .= html_writer::tag('div', $this->render($continue) . $this->render($cancel), array('class' => 'buttons'));
$output .= $this->box_end();
$output .= $this->box_end();
$output .= $this->box_end();
return $output;
}
......
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
......@@ -63,14 +63,14 @@ Y.extend(CONFIRM, M.core.notification.info, {
this.publish('complete');
this.publish('complete-yes');
this.publish('complete-no');
this._yesButton = Y.Node.create('<input type="button" class="btn btn-primary" id="id_yuiconfirmyes-' +
this._yesButton = Y.Node.create('<input type="button" class="btn btn-primary m-r-1" id="id_yuiconfirmyes-' +
this.get('COUNT') + '" value="' + this.get(CONFIRMYES) + '" />');
this._noButton = Y.Node.create('<input type="button" class="btn btn-secondary m-l-1" id="id_yuiconfirmno-' +
this._noButton = Y.Node.create('<input type="button" class="btn btn-secondary m-r-1" id="id_yuiconfirmno-' +
this.get('COUNT') + '" value="' + this.get(CONFIRMNO) + '" />');
this._question = Y.Node.create('<div class="confirmation-message">' + this.get(QUESTION) + '</div>');
var content = Y.Node.create('<div class="confirmation-dialogue"></div>')
.append(this._question)
.append(Y.Node.create('<div class="confirmation-buttons form-inline text-xs-right"></div>')
.append(Y.Node.create('<div class="confirmation-buttons form-inline"></div>')
.append(this._yesButton)
.append(this._noButton));
this.get(BASE).addClass('moodle-dialogue-confirm');
......
......@@ -180,17 +180,6 @@
text-align: left;
}
#notice {
width: 60%;
min-width: 220px;
margin: auto;
text-align: center;
.buttons {
padding: 0;
}
}
#page-admin-index .releasenoteslink,
#page-admin-index .adminwarning,
#page-admin-index .adminerror {
......@@ -804,3 +793,7 @@
#adminsettings .form-overridden {
@extend .form-control-feedback;
}
.modal.modal-in-page {
z-index: 0;
}
......@@ -1340,6 +1340,9 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
.moodle-dialogue-confirm .confirmation-message {
margin: 0.5em 1em;
}
.moodle-dialogue-confirm .confirmation-buttons {
text-align: right;
}
.moodle-dialogue-confirm .confirmation-dialogue input {
min-width: 80px;
......@@ -1434,7 +1437,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
/* Center the submit buttons within the area */
.choosercontainer #chooseform .submitbuttons {
padding: 0.7em 0;
text-align: center;
text-align: right;
}
/* Fixed for safari browser on iPhone4S with ios7@mixin */
......
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template core/single_button
Moodle template for a single button submit form.
Classes required for JS:
* none
Data attributes required for JS:
* none
Context variables required for this template:
* classes - a list of classes to wrap the form.
* method - get or post
* url - the action url to submit to
* formid - optional id value for the form
* params - array of params with name and value attributes
* primary - true if this is a primary action button
* id - id for the element
* tooltip - tooltip text for the button
* disabled - true if this element is disabled
* label - text to show on the button
Example context (json):
{ "method" : "get",
"url" : "#",
"primary" : true,
"tooltip" : "This is a tooltip",
"label" : "This is a the button text"
}
}}
<div class="{{classes}}">
<form method="{{method}}" action="{{url}}" {{#formid}}id="{{formid}}"{{/formid}}>
{{#params}}
<input type="hidden" name="{{name}}" value="{{value}}">
{{/params}}
<button type="submit" class="btn btn-secondary"
<button type="submit" class="btn {{#primary}}btn-primary{{/primary}}{{^primary}}btn-secondary{{/primary}}"
id="{{id}}"
title={{#quote}}{{tooltip}}{{/quote}}
{{#disabled}}disabled{{/disabled}}>{{label}}</button>
......
......@@ -200,12 +200,11 @@ img.iconsmall {
text-align: left;
}
#notice {
// Would like the use the alert stuff below for this,
// but the way buttons are used makes it tricky.
width: 60%;
min-width: 220px;
margin: auto;
// Allow in-page modals like bootstrap 4.
.modal.modal-in-page {
position: static;
z-index: 0;
margin: 0;
}
#page-admin-index .releasenoteslink,
......
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
Supports Markdown
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