Skip to content

Commit

Permalink
using modal dialog for adding objects
Browse files Browse the repository at this point in the history
  • Loading branch information
Dr. Frank Hoffmann authored and Dr. Frank Hoffmann committed Jun 16, 2018
1 parent 21d99b9 commit a7bd483
Show file tree
Hide file tree
Showing 8 changed files with 151 additions and 238 deletions.
44 changes: 27 additions & 17 deletions src/App/dtml/manage_navbar.dtml
Expand Up @@ -9,16 +9,6 @@
><a href="#" onclick="javascript:toggle_menu()" target="_parent"
><i class="fa fa-bars">&nbsp;</i></a>
</div>
<script>
function toggle_menu() {
if (document.referrer.endsWith('/manage')) {
window.parent.location.href="manage_main";
} else {
window.parent.location.href="manage";
};
}
</script>

<a class="navbar-brand" href="#" onclick="window.open('http://www.zope.org');">
<span class="product">ZOPE 4.0</span>
</a>
Expand All @@ -35,11 +25,12 @@
data-title-active="Select type to add"
data-title-inactive="STATUS INACTIVE: New Object can only be Added in the List View"
title="Select type to add"
onchange="location.href='<dtml-var "REQUEST.get('URL1','')">/'+this.options[this.selectedIndex].value;this.selectedIndex = 0">
<option value="" selected="selected">Select type to add</option>
onchange="addItem( elm=this, url1='<dtml-var "REQUEST.get('URL1','')">'); this.selectedIndex = 0;"
><option value="" selected="selected">Select type to add</option>
<dtml-if "_.len(filtered_meta_types) > 1"
><dtml-in filtered_meta_types mapping sort=name
><dtml-if action><option value="&dtml.html_quote-action;">&dtml-name;</option></dtml-if
><dtml-if action><option value="&dtml.html_quote-action;">&dtml-name;</option>
</dtml-if
></dtml-in
></dtml-if>
</select>
Expand All @@ -48,11 +39,30 @@
</dtml-if>
</ul>

<a href="manage_zmi_logout" title="Logout"
class="ml-4 d-none d-sm-block">
<i class="fas fa-sign-out-alt"></i>
</a>
<a href="manage_zmi_logout" title="Logout"
class="ml-4 d-none d-sm-block">
<i class="fas fa-sign-out-alt"></i>
</a>

</header>

<!-- ZMI-MODAL DIALOG -->
<div class="modal fade" id="zmi-modal" tabindex="-1" role="dialog" aria-labelledby="#" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
... Loading Form ...
</div>
<div class="modal-footer">
&nbsp;
</div>
</div>
</div>
</div>

</dtml-unless>
87 changes: 2 additions & 85 deletions src/App/dtml/manage_page_footer.dtml
@@ -1,87 +1,4 @@
<dtml-unless "REQUEST.get('zmi_dialog','window')=='modal'">
</body>
<script>
// Wrap form element with fluid-container if missing
$(function() {
if ( $('main.container-fluid').length==0 ) {
$('body>form,body>p').wrap('<main class="container-fluid"></main>');
}
});

// QUICKFIX OBJECT ICONS (as long as not set systematically in the class definitions)
var zmi_icons = {
"User Folder":{ "title":"Access Control List", "class":"fa fa-user-friends" },
"UserFolder":{ "title":"Access Control List", "class":"fa fa-user-friends" },
"PluggableAuthService":{ "title":"Pluggable Auth Service", "class":"fa fa-users-cog" },
"User":{ "title":"User", "class":"fa fa-user" },
"TemporaryFolder":{ "title":"Folder", "class":"far fa-folder" },
"Filesystem Directory View":{ "title":"Filesystem Directory View", "class":"far fa-folder-open" },
"Ordered":{ "title":"Folder (Ordered)", "class":"far fa-folder zmi-icon-folder-ordered" },
"Folder":{ "title":"Folder", "class":"far fa-folder" },
"Script":{ "title":"Script (Python)", "class":"fa fa-terminal" },
"ExternalMethod":{ "title":"External Python Method", "class":"fa fa-external-link-square" },
"DTML Document":{ "title":"DTML Document", "class":"far fa-file-alt" },
"DTML Method":{ "title":"DTML Document", "class":"far fa-file-alt" },
"Page Template":{ "title":"Page Template", "class":"far fa-file-code" },
"File":{ "title":"File Object", "class":"far fa-file-archive" },
"Mail":{ "title":"Mail Folder", "class":"far fa-envelope" },
"Image":{ "title":"Image", "class":"far fa-file-image" },
"Control":{ "title":"Control Panel", "class":"fa fa-cogs" },
"Database":{ "title":"Database", "class":"far fa-database" },
"ZSQLiteDA":{ "title":"Database", "class":"far fa-database" },
"ZMySQLDA":{ "title":"MySQL-Database Adapter", "class":"far fa-database" },
"Product":{ "title":"Installed Product", "class":"fa fa-gift" },
"ZSQL":{ "title":"ZSQL-Method", "class":"far fa-puzzle-piece" },
"Debug Manager":{ "title":"Debug Manager", "class":"fas fa-bug" },
"Site Error Log":{ "title":"Site Error Log", "class":"fas fa-bug" },
"Browser Id Manager":{ "title":"Browser Id Manager", "class":"far fa-id-card" },
"ZMS":{ "title":"ZMS Root", "class":"fas fa-home" },
"ZMSObject.png":{ "title":"ZMS Content", "class":"far fa-file" },
"Monster":{ "title":"Virtual Host Monster", "class":"fa fa-code-branch" },
"ZCatalog":{ "title":"ZCatalog", "class":"far fa-search" },
"Session Data Manager":{ "title":"Session Data Manager", "class":"fas fa-history" },
"Cookie Crumbler":{ "title":"Cookie Crumbler", "class":"far fa-user-circle" },
"Broken object":{ "title":"Broken object", "class":"fas fa-ban text-danger" }
}

// EXECUTE: Process ZMI Icons
for ( i in zmi_icons ) {
var i_name = i;
var i_title =zmi_icons[i].title;
var i_class =zmi_icons[i].class;
if ( $('i[title*="'+i_name+'"]').hasClass('icon-broken') ) {
i_class += ' zmi-icon-broken'
};
$('i[title*="'+i_name+'"]').replaceWith('<i data-title="'+i_title+'" class="'+i_class+'"></i>');
}


// OTHER ICONS
$('i[title*="/p_/pl"]').replaceWith('<i data-title="Expand..." class="far fa-plus-square"></i>');
$('i[title*="/p_/mi"]').replaceWith('<i data-title="Collapse..." class="far fa-minus-square"></i>');
$('i[title*="/p_/davlocked"]').replaceWith('<i data-title="WebDAV" class="fa fa-retweet"></i>');
$('img[src*="misc_"]').replaceWith('<i class="fa fa-circle-blank"></i>');
$('img[src*="zms_"]').replaceWith('<i class="fa fa-circle-blank"></i>');

$('#menu_tree td[width="16"] a:contains("+")').html(('<i title="Expand..." class="fas fa-caret-right text-muted"></i>'));
$('#menu_tree td[width="16"] a:contains("-")').html(('<i title="Collapse..." class="fas fa-caret-down text-muted"></i>'));

// SHOW SOME MENUS ONLY ON LIST PAGES AS ACTIVE
if ($('.nav a[href="manage_findForm"]').length > 0 ) {
$('#addItemSelect, #toggle_menu').css('opacity',1);
$('#addItemSelect').removeAttr('disabled');
$('#addItemSelect').attr( 'title', $('#addItemSelect').attr('data-title-active') );
$('#toggle_menu').attr( 'title', $('#toggle_menu').attr('data-title-active') );
} else {
$('#addItemSelect, #toggle_menu').css('opacity',.5);
$('#addItemSelect').attr('disabled','disabled');
$('#addItemSelect').attr( 'title', $('#addItemSelect').attr('data-title-inactive') );
$('#toggle_menu').attr( 'title', $('#toggle_menu').attr('data-title-inactive') );
}

// HELP ICON
$('a[href*="HelpSys"]').empty()
.append('<i class="fa fa-question-sign"></i>')
.css('border-color','transparent');

</script>
</html>
</dtml-unless>
3 changes: 2 additions & 1 deletion src/App/dtml/manage_page_header.dtml
@@ -1,3 +1,4 @@
<dtml-unless "REQUEST.get('zmi_dialog','window')=='modal'">
<!doctype html>
<html lang="en">
<head>
Expand All @@ -20,4 +21,4 @@
</head>
<!-- REFACT what is a better way to get the last part of the current URL? -->
<body id="nodeid-<dtml-var "getId()">" class="zmi zmi-<dtml-var "this().meta_type.replace(' ', '-')"> zmi-<dtml-var "URL0[_.len(URL1)+1:]">">

</dtml-unless>
74 changes: 29 additions & 45 deletions src/OFS/dtml/addOrderedFolder.dtml
Expand Up @@ -6,51 +6,35 @@

<main class="container-fluid">

<p class="form-help">
An ordered Folder contains other objects. Use Folders to organize your
web objects in to logical groups. The <em>create public interface</em>
option creates an index document inside the Folder to give the
Folder a default HTML representation. The <em>create user folder</em>
option creates a User Folder inside the Folder to hold authorization
information for the Folder.
</p>

<form action="manage_addOrderedFolder" method="post" class="zmi-orderedfolder">

<table cellspacing="0" cellpadding="2" border="0">
<tr>
<td align="left" valign="top">
<label for="id" class="form-label">
Id
</label>
</td>
<td align="left" valign="top">
<input type="text" class="form-control" name="id" id="id" size="40" />
</td>
</tr>

<tr>
<td align="left" valign="top">
<label for="title" class="form-label">
Title
</label>
</td>
<td align="left" valign="top">
<input type="text" class="form-control" name="title" id="title" size="40" />
</td>
</tr>

<tr>
<td align="left" valign="top">
</td>
<td align="left" valign="top">
<div class="controls">
<input class="btn btn-primary" type="submit" name="submit"
value="Add" />
</div>
</td>
</tr>
</table>
<p class="form-help">
An ordered Folder contains other objects. Use Folders to organize your
web objects in to logical groups. The <em>create public interface</em>
option creates an index document inside the Folder to give the
Folder a default HTML representation. The <em>create user folder</em>
option creates a User Folder inside the Folder to hold authorization
information for the Folder.
</p>

<form action="manage_addOrderedFolder" method="post" class="zmi-orderedfolder">

<div class="form-group row">
<label for="id" class="form-label col-sm-3 col-md-2">Id</label>
<div class=" col-sm-9 col-md-10">
<input id="id" class="form-control" type="text" name="id" />
</div>
</div>

<div class="form-group row">
<label for="title" class="form-label col-sm-3 col-md-2">Title</label>
<div class=" col-sm-9 col-md-10">
<input id="type" class="form-control" type="text" name="title" />
</div>
</div>

<div class="zmi-controls">
<input class="btn btn-primary" type="submit" name="submit" value=" Add " />
</div>

</form>

</main>
Expand Down
6 changes: 3 additions & 3 deletions src/OFS/dtml/fileEdit.dtml
Expand Up @@ -18,23 +18,23 @@
<label for="title" class="form-label col-sm-3 col-md-2">Title</label>
<div class="col-sm-9 col-md-10">
<input id="title" class="form-control" type="text" name="title"
value="<dtml-if title>&dtml-title;</dtml-if>">
value="<dtml-if title>&dtml-title;</dtml-if>" />
</div>
</div>

<div class="form-group row">
<label for="contenttype" class="form-label col-sm-3 col-md-2">Content Type</label>
<div class="col-sm-9 col-md-10">
<input id="contenttype" class="form-control" type="text" name="content_type:required"
value="<dtml-if content_type>&dtml-content_type;</dtml-if>">
value="<dtml-if content_type>&dtml-content_type;</dtml-if>" />
</div>
</div>

<div class="form-group row">
<label for="precondition" class="form-label col-sm-3 col-md-2">Precondition</label>
<div class="col-sm-9 col-md-10">
<input id="precondition" class="form-control" type="text" name="precondition"
value="<dtml-if precondition>&dtml-precondition;</dtml-if>">
value="<dtml-if precondition>&dtml-precondition;</dtml-if>" />
</div>
</div>

Expand Down
76 changes: 30 additions & 46 deletions src/OFS/dtml/folderAdd.dtml
Expand Up @@ -6,52 +6,36 @@

<main class="container-fluid">

<p class="form-help">
A Folder contains other objects. Use Folders to organize your
web objects in to logical groups. The <em>create public interface</em>
option creates an index document inside the Folder to give the
Folder a default HTML representation. The <em>create user folder</em>
option creates a User Folder inside the Folder to hold authorization
information for the Folder.
</p>

<FORM ACTION="manage_addFolder" METHOD="POST" class="zmi-folder">

<table cellspacing="0" cellpadding="2" border="0">
<tr>
<td align="left" valign="top">
<label for="id" class="form-label">
Id
</label>
</td>
<td align="left" valign="top">
<input type="text" class="form-control" name="id" id="id" size="40" />
</td>
</tr>

<tr>
<td align="left" valign="top">
<label for="title" class="form-label">
Title
</label>
</td>
<td align="left" valign="top">
<input type="text" class="form-control" name="title" id="title" size="40" />
</td>
</tr>

<tr>
<td align="left" valign="top">
</td>
<td align="left" valign="top">
<div class="controls">
<input class="btn btn-primary" type="submit" name="submit"
value="Add" />
</div>
</td>
</tr>
</table>
</form>
<p class="form-help">
A Folder contains other objects. Use Folders to organize your
web objects in to logical groups. The <em>create public interface</em>
option creates an index document inside the Folder to give the
Folder a default HTML representation. The <em>create user folder</em>
option creates a User Folder inside the Folder to hold authorization
information for the Folder.
</p>

<form action="manage_addFolder" method="post" class="zmi-folder">

<div class="form-group row">
<label for="id" class="form-label col-sm-3 col-md-2">Id</label>
<div class="col-sm-9 col-md-10">
<input id="id" class="form-control" type="text" name="id" value="" />
</div>
</div>

<div class="form-group row">
<label for="title" class="form-label col-sm-3 col-md-2">Title</label>
<div class="col-sm-9 col-md-10">
<input id="title" class="form-control" type="text" name="title" value="" />
</div>
</div>

<div class="zmi-controls">
<input class="btn btn-primary" type="submit" name="submit" value=" Add " />
</div>

</form>

</main>

Expand Down

0 comments on commit a7bd483

Please sign in to comment.