zmi: added header-navbar

zopefoundation · Jun 14, 2018 · 21d99b9 · icemac · Jun 21, 2018 · dwt
1 parent 828756f
commit 21d99b9
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 72 deletions.
diff --git a/src/App/Management.py b/src/App/Management.py
@@ -171,6 +171,9 @@ def manage_page_header(self, *args, **kw):
             self._get_zmi_additionals('zmi_additional_js_paths'))
         return self._manage_page_header(*args, **kw)
 
+    security.declareProtected(view_management_screens, 'manage_navbar')
+    manage_navbar = DTMLFile('dtml/manage_navbar', globals())
+
     security.declarePublic('manage_zmi_logout')
     def manage_zmi_logout(self, REQUEST, RESPONSE):
         """Logout current user"""

diff --git a/src/App/dtml/manage_navbar.dtml b/src/App/dtml/manage_navbar.dtml
@@ -0,0 +1,58 @@
+<dtml-unless "'manage_menu' in REQUEST['URL']">
+
+<header class="navbar navbar-nav navbar-expand navbar-dark flex-column flex-sm-row bd-navbar">
+
+	<div id="toggle_menu" class="desktop"
+		data-title-active = "Show/Hide Tree Menu of the Navigation Context"
+		data-title-inactive = "STATUS INACTIVE: Tree Menu Button only be Active on List Views"
+		title="Show/Hide Tree Menu of the Navigation Context"
+	><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>
+
+	<ul class="navbar-nav flex-row ml-sm-auto d-none d-sm-flex">
+		<li class="form-inline zmi-authenticated_user">
+			<span>&dtml-AUTHENTICATED_USER;</span>
+		</li>
+		<dtml-if filtered_meta_types>
+			<li class="form-inline zmi-addItemSelect">
+				<form method="get" class="form-group">
+						<label for="addItemSelect" class="ml-2 sr-only">Select type to add</label>
+						<select id="addItemSelect" class="form-control-sm" name=":action" 
+							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>
+							<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-in
+							></dtml-if>
+						</select>
+				</form>
+			</li>
+		</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>
+
+</header>
+
+</dtml-unless>
diff --git a/src/App/dtml/manage_page_footer.dtml b/src/App/dtml/manage_page_footer.dtml
@@ -3,7 +3,7 @@
 // Wrap form element with fluid-container if missing
 	$(function() {
 		if ( $('main.container-fluid').length==0 ) {
-			$('form,p').wrap('<main class="container-fluid"></main>');
+			$('body>form,body>p').wrap('<main class="container-fluid"></main>');
 		}
 	});
 
@@ -65,12 +65,19 @@
 	$('#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 MENU TOGGLE ONLY ON LIST PAGES
+// SHOW SOME MENUS ONLY ON LIST PAGES AS ACTIVE
 	if ($('.nav a[href="manage_findForm"]').length > 0 ) {
-		$('#toggle_menu').show();
+		$('#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 {
-		$('#toggle_menu').hide();
+		$('#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>')

diff --git a/src/App/dtml/manage_page_header.dtml b/src/App/dtml/manage_page_header.dtml
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 <dtml-unless management_page_charset
-    ><dtml-call "REQUEST.set('management_page_charset','utf-8')"
+	><dtml-call "REQUEST.set('management_page_charset','utf-8')"
 ></dtml-unless>
 
 <meta http-equiv="content-type" content="text/html;charset=&dtml-management_page_charset;" />
@@ -11,7 +11,7 @@
 
 <title><dtml-if title_or_id><dtml-var title_or_id><dtml-else>Zope</dtml-if></title>
 <dtml-in css_urls>
-  <link rel="stylesheet" type="text/css" href="&dtml-sequence-item;" />
+	<link rel="stylesheet" type="text/css" href="&dtml-sequence-item;" />
 </dtml-in>
 <dtml-in js_urls>
   <script type="text/javascript" src="&dtml-sequence-item;"></script>
@@ -20,20 +20,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 "'manage_menu' in REQUEST['URL']">
-<!--  EXPERIMENTAL: TOGGLE FRAMED TREE MENU -->
-	<div id="toggle_menu" class="desktop">
-		<a href="#" onclick="javascript:toggle_menu()" target="_parent"
-			><i class="fa fa-bars"
-				title="Show/Hide Tree Menu of the Navigation Context">&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>
-</dtml-unless>
+
diff --git a/src/App/dtml/manage_tabs.dtml b/src/App/dtml/manage_tabs.dtml
@@ -1,3 +1,5 @@
+<dtml-var manage_navbar>
+
 <dtml-with "_(manage_options=filtered_manage_options())"
 	><dtml-if manage_options
 		><dtml-call "REQUEST.set('n_', _.len(manage_options)-1)"
@@ -67,7 +69,7 @@
 	<dtml-if manage_tabs_message
 		><div class="alert alert-success" role="alert">
 			<dtml-var manage_tabs_message newline_to_br html_quote
-			>(<dtml-var ZopeTime fmt="%Y-%m-%d %H:%M">)
+			> (<dtml-var ZopeTime fmt="%Y-%m-%d %H:%M">)
 		</div>
 	</dtml-if>
 

diff --git a/src/App/dtml/menu.dtml b/src/App/dtml/menu.dtml
@@ -1,9 +1,14 @@
 <dtml-var manage_page_header>
 
 <div class="dropdown" id="menu_buttons">
-	<button title="Logged in as" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-		<span class="caret"></span>Login: &dtml-AUTHENTICATED_USER; 
-	</button>
+	<a href="#" class="dropdown-toggle" 
+		data-toggle="dropdown" 
+		id="dropdownMenu1" 
+		title="Menu-Options"
+		aria-haspopup="true" 
+		aria-expanded="true"
+		><i class="fa fa-cog"></i>
+	</a>
 	<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
 		<li><a id="menu_refresh" href="manage_menu">Refresh</a></li>
 		<li><a id="menu_save" href="manage_menu?save_layout=1">Save layout</a></li>

diff --git a/src/OFS/dtml/access.dtml b/src/OFS/dtml/access.dtml
@@ -1,7 +1,7 @@
 <dtml-var manage_page_header>
 <dtml-with "_(management_view='Security')">
 	<dtml-if	manage_tabs>
-	<dtml-var manage_tabs>
+		<dtml-var manage_tabs>
 	</dtml-if>
 </dtml-with>
 

diff --git a/src/OFS/dtml/documentAdd.dtml b/src/OFS/dtml/documentAdd.dtml
@@ -6,47 +6,47 @@
            form_title='Add DTML Document'
            )">
 
-<p class="form-help">
-A DTML Document is used to hold text content. It can contain
-HTML, XML, plain text, structured-text, etcetera.
-A DTML document can contain DTML scripting tags.
-A DTML Document differs from a DTML Method in that it has properties
-and does not call methods on its container object.
-</p>
-
-<p class="form-help">
-You may create a new DTML Document using the form below.
-You may also choose to upload an existing html file from your
-local computer by clicking the <I>Browse</I> button.
-</p>
-
-<form action="addDTMLDocument" method="post" enctype="multipart/form-data" class="zmi-dtml">
-<div class="form-group row">
-    <label for="id" class="form-label col-sm-3 col-md-2">
-    Id
-    </label>
-    <input id="id" class="form-control col-sm-9 col-md-6" type="text" name="id" size="40" />
-</div>
-<div class="form-group row">
-    <label for="title" class="form-label col-sm-3 col-md-2">
-    Title
-    </label>
-    <input id="type" class="form-control col-sm-9 col-md-6" type="text" name="title" size="40" />
-</div>
-<div class="form-group row">
-    <label for="file-data" class="form-label col-sm-3 col-md-2">
-    File
-    </label>
-    <input id="file-data" class="form-control-file col-sm-9 col-md-6" type="file" name="file:string" size="25" value="" />
-</div>
-<div class="controls">
-    <input class="btn btn-primary" type="submit" name="submit"
-     value=" Add " />
-    <input class="btn btn-primary" type="submit" name="submit"
-     value=" Add and Edit " />
-</div>
-
-</form>
+	<p class="form-help mb-4">
+		A DTML Document is used to hold text content. It can contain
+		HTML, XML, plain text, structured-text, etcetera.
+		A DTML document can contain DTML scripting tags.
+		A DTML Document differs from a DTML Method in that it has properties
+		and does not call methods on its container object.
+		<br />
+		You may create a new DTML Document using the form below.
+		You may also choose to upload an existing html file from your
+		local computer by clicking the <I>Browse</I> button.
+	</p>
+
+	<form action="addDTMLDocument" method="post" enctype="multipart/form-data" class="zmi-dtml">
+	
+		<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="form-group row">
+			<label for="file-data" class="form-label col-sm-3 col-md-2">File</label>
+			<div class=" col-sm-9 col-md-10">
+				<input id="file-data" class="form-control form-control-file" type="file" name="file:string" value="" />
+			</div>
+		</div>
+	
+		<div class="zmi-controls">
+			<input class="btn btn-primary" type="submit" name="submit" value=" Add " />
+			<input class="btn btn-primary" type="submit" name="submit" value=" Add and Edit " />
+		</div>
+
+	</form>
 
 </main>
 

diff --git a/src/OFS/dtml/documentEdit.dtml b/src/OFS/dtml/documentEdit.dtml
@@ -13,7 +13,7 @@
 
 		<dtml-with keyword_args mapping>
 			<div class="form-group row">
-				<label for="title" class="form-label col-sm-2 col-md-3">Title</label>
+				<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>" />

diff --git a/src/OFS/zpt/main.zpt b/src/OFS/zpt/main.zpt
@@ -1,8 +1,10 @@
 <tal:header replace="structure here/manage_page_header" />
+
 <tal:tabs replace="structure here/manage_tabs" />
 
-<!-- Add object widget -->
-<form class="form-inline float-right mb-2 addItemSelect"
+<!-- Add object widget // DEACTIVATED!! -->
+<form tal:replace="nothing"
+	class="form-inline float-right mb-2 addItemSelect"
 	method="get"
 	tal:condition="here/filtered_meta_types"
 	tal:attributes="action string:${request/URL1}/" >