Commit f00b472c authored by Alain Takoudjou's avatar Alain Takoudjou

WIP: show important message in a box

parent 72cacb28
.message {
position: fixed;
top: 60pt;
}
.alert {
position: relative;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: .25rem;
}
.alert-pointer {
cursor: pointer;
}
.alert-info {
color: #0c5460;
background-color: #d1ecf1;
border-color: #bee5eb;
}
.alert-warning {
color: #856404;
background-color: #fff3cd;
border-color: #ffeeba;
}
.alert-danger {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
.alert-closable .close, .alert-closable .close {
position: relative;
top: -2px;
right: -15px;
color: inherit;
}
.close {
float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
.close:focus, .close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
}
.alert > h2 {
font-weight: bold;
margin-bottom: 10px;
}
.alert p {
white-space: pre-wrap;
display: block;
word-wrap: break-word;
}
.alert-question-btn {
margin-top: 15px;
text-align: center;
}
.alert-question-btn button:first-child {
margin-right: 10px;
}
.alert-btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.275rem .75rem;
font-size: 1rem;
line-height: 1.1;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.alert-btn-accept {
color: #28a745;
background-color: transparent;
background-image: none;
border-color: #28a745;
}
.alert-btn-accept:hover {
color: #fff;
background-color: #28a745;
background-image: none;
border-color: #28a745;
text-decoration: none;
}
.alert-btn-accept:focus {
box-shadow: 0 0 0 0.2rem rgba(40,167,69,.5);
}
.alert-btn-reject {
color: #dc3545;
background-color: transparent;
background-image: none;
border-color: #dc3545;
}
.alert-btn-reject:hover {
color: #fff;
background-color: #dc3545;
border-color: #dc3545;
text-decoration: none;
}
.alert-btn-reject:focus{
box-shadow: 0 0 0 0.2rem rgba(220,53,69,.5);
}
\ No newline at end of file
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="Web Style" module="erp5.portal_type"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_Access_contents_information_Permission</string> </key>
<value>
<tuple>
<string>Anonymous</string>
<string>Assignee</string>
<string>Assignor</string>
<string>Associate</string>
<string>Auditor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Add_portal_content_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Change_local_roles_Permission</string> </key>
<value>
<tuple>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Modify_portal_content_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_View_Permission</string> </key>
<value>
<tuple>
<string>Anonymous</string>
<string>Assignee</string>
<string>Assignor</string>
<string>Associate</string>
<string>Auditor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>content_md5</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/css</string> </value>
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>gadget_erp5_message_alert.css</string> </value>
</item>
<item>
<key> <string>description</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>gadget_erp5_message_alert_css</string> </value>
</item>
<item>
<key> <string>language</string> </key>
<value> <string>en</string> </value>
</item>
<item>
<key> <string>portal_type</string> </key>
<value> <string>Web Style</string> </value>
</item>
<item>
<key> <string>short_title</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string>Gadget ERP5 Message Alert</string> </value>
</item>
<item>
<key> <string>version</string> </key>
<value> <string>001</string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Message Alert</title>
<script src="rsvp.js"></script>
<script src="renderjs.js"></script>
<script src="handlebars.js"></script>
<script src="gadget_erp5_message_alert.js"></script>
<link href="gadget_erp5_message_alert.css" rel="stylesheet" type="text/css"/>
<script id="alert-message-template" type="text/x-handlebars-template">
<div class="alert alert-{{type}} {{#if clickable}}alert-pointer{{/if}} {{#if closable}}alert-closable{{/if}}">
{{#if closable}}
<span href="#" class="close">&times;</span>
{{/if}}
{{#if title}}
<h2>{{title}}</h2>
{{/if}}
<p>{{message}}</p>
{{#if question}}
<div class="alert-question-btn">
<button type="button" class="alert-btn alert-btn-accept">Accept</button>
<button type="button" class="alert-btn alert-btn-reject">Reject</button>
</div>
{{/if}}
</div>
</script>
</head>
<body>
</body>
</html>
\ No newline at end of file
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="Web Page" module="erp5.portal_type"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_Access_contents_information_Permission</string> </key>
<value>
<tuple>
<string>Anonymous</string>
<string>Assignee</string>
<string>Assignor</string>
<string>Associate</string>
<string>Auditor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Add_portal_content_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Change_local_roles_Permission</string> </key>
<value>
<tuple>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Copy_or_Move_Permission</string> </key>
<value>
<list>
<string>Manager</string>
<string>Authenticated</string>
<string>Developer</string>
<string>Owner</string>
</list>
</value>
</item>
<item>
<key> <string>_Modify_portal_content_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_View_Permission</string> </key>
<value>
<tuple>
<string>Anonymous</string>
<string>Assignee</string>
<string>Assignor</string>
<string>Associate</string>
<string>Auditor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>content_md5</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/html</string> </value>
</item>
<item>
<key> <string>creators</string> </key>
<value>
<tuple>
<string>zope</string>
</tuple>
</value>
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>gadget_erp5_message_alert.html</string> </value>
</item>
<item>
<key> <string>description</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>gadget_erp5_message_alert_html</string> </value>
</item>
<item>
<key> <string>language</string> </key>
<value> <string>en</string> </value>
</item>
<item>
<key> <string>modification_date</string> </key>
<value>
<object>
<klass>
<global name="DateTime" module="DateTime.DateTime"/>
</klass>
<tuple>
<none/>
</tuple>
<state>
<tuple>
<float>1523884657.03</float>
<string>UTC</string>
</tuple>
</state>
</object>
</value>
</item>
<item>
<key> <string>portal_type</string> </key>
<value> <string>Web Page</string> </value>
</item>
<item>
<key> <string>short_title</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string>Gadget ERP5 Message Alert</string> </value>
</item>
<item>
<key> <string>version</string> </key>
<value> <string>001</string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
/*globals console, CustomEvent, document, window, rJS, RSVP, Handlebars, loopEventListener*/
/*jslint indent: 2, nomen: true, maxlen: 80*/
(function (CustomEvent, document, window, rJS, RSVP, Handlebars,
loopEventListener) {
"use strict";
var gadget_klass = rJS(window),
alert_message_content = gadget_klass.__template_element
.getElementById("alert-message-template")
.innerHTML,
alert_message_template = Handlebars.compile(alert_message_content);
function close_click(target, gadget) {
var master_parent = target.parentElement.parentElement;
rejectEvent(master_parent);
if (master_parent.dataset.autoclose === "true") {
master_parent.remove();
}
}
function reject_click(target, gadget) {
var master_parent = target.parentElement.parentElement.parentElement;
rejectEvent(master_parent);
if (master_parent.dataset.autoclose === "true") {
master_parent.remove();
}
}
function accept_click(target, gadget) {
var master_parent = target.parentElement.parentElement.parentElement;
acceptEvent(master_parent);
if (master_parent.dataset.autoclose === "true") {
master_parent.remove();
}
}
function message_click(target, gadget) {
console.log(target);
}
function acceptEvent(target) {
var accept_event = new CustomEvent('accepted', {
detail: {
jio_key: target.dataset.key,
id: target.id
},
bubbles: true,
cancelable: false
});
target.dispatchEvent(accept_event);
}
function rejectEvent(target) {
var reject_event = new CustomEvent('rejected', {
detail: {
jio_key: target.dataset.key,
id: target.id
},
bubbles: true,
cancelable: false
});
target.dispatchEvent(reject_event);
}
gadget_klass
.declareMethod("render", function (options) {
var gadget = this,
html_message,
message_content = document.createElement('div'),
closable = options.can_close || false,
id = "alert" + new Date().getTime();
message_content.id = id;
message_content.setAttribute("data-key", options.key || "");
message_content.setAttribute("data-autoclose",
options.auto_close || false);
html_message = alert_message_template({
message: options.message,
title: options.title || "",
type: options.type || "danger",
closable: closable,
question: options.with_question || false
});
return gadget.changeState({
html_message: html_message,
type: options.type,
element: message_content,
gadget_element: options.element || gadget.element
});
})
.onStateChange(function () {
var gadget = this;
if (gadget.state.gadget_element.firstChild === null) {
gadget.state.gadget_element.appendChild(gadget.state.element);
} else {
gadget.state.gadget_element.insertBefore(
gadget.state.element,
gadget.state.gadget_element.firstChild
);
}
gadget.state.element.innerHTML = gadget.state.html_message;
return gadget.eventService();
})
.declareMethod("closeAlertMessage", function (id) {
var alert_box;
if (id.startsWith('alert')) {
alert_box = document.getElementById(id);
if (alert_box !== null) {
return alert_box.remove();
}
}
})
.declareJob("eventService", function () {
var gadget = this,
i,
close_btn_list = gadget.state.element
.querySelectorAll('.alert span.close'),
reject_btn_list = gadget.state.element
.querySelectorAll('.alert button.alert-btn-reject'),
accept_btn_list = gadget.state.element
.querySelectorAll('.alert button.alert-btn-accept'),
box = gadget.state.element.querySelector('.alert');
for (i = 0; i < close_btn_list.length; i += 1) {
loopEventListener(
close_btn_list[i],
'click',
false,
close_click.bind(gadget, close_btn_list[i], gadget),
true
);
}
for (i = 0; i < reject_btn_list.length; i += 1) {
loopEventListener(
reject_btn_list[i],
'click',
false,
reject_click.bind(gadget, reject_btn_list[i], gadget),
true
);
}
for (i = 0; i < accept_btn_list.length; i += 1) {
loopEventListener(
accept_btn_list[i],
'click',
false,
accept_click.bind(gadget, accept_btn_list[i], gadget),
true
);
}
});
}(CustomEvent, document, window, rJS, RSVP, Handlebars, loopEventListener));
\ No newline at end of file
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="Web Script" module="erp5.portal_type"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_Access_contents_information_Permission</string> </key>
<value>
<tuple>
<string>Anonymous</string>
<string>Assignee</string>
<string>Assignor</string>
<string>Associate</string>
<string>Auditor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Add_portal_content_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Change_local_roles_Permission</string> </key>
<value>
<tuple>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Modify_portal_content_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_View_Permission</string> </key>
<value>
<tuple>
<string>Anonymous</string>
<string>Assignee</string>
<string>Assignor</string>
<string>Associate</string>
<string>Auditor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>content_md5</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>creators</string> </key>
<value>
<tuple>
<string>zope</string>
</tuple>
</value>
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>gadget_erp5_message_alert.js</string> </value>
</item>
<item>
<key> <string>description</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>gadget_erp5_message_alert_js</string> </value>
</item>
<item>
<key> <string>language</string> </key>
<value> <string>en</string> </value>
</item>
<item>
<key> <string>modification_date</string> </key>
<value>
<object>
<klass>
<global name="DateTime" module="DateTime.DateTime"/>
</klass>
<tuple>
<none/>
</tuple>
<state>
<tuple>
<float>1523884657.06</float>
<string>UTC</string>
</tuple>
</state>
</object>
</value>
</item>
<item>
<key> <string>portal_type</string> </key>
<value> <string>Web Script</string> </value>
</item>
<item>
<key> <string>short_title</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string>Gadget ERP5 Message Alert JS</string> </value>
</item>
<item>
<key> <string>version</string> </key>
<value> <string>001</string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
image_module/gadget_slapos_panel_png
web_page_module/gadget_erp5_message_alert_*
web_page_module/gadget_erp5_page_slap_reject_upgrade_decision_html
web_page_module/gadget_erp5_page_slap_reject_upgrade_decision_js
web_page_module/rjs_gadget_erp5_page_map_css
......
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