fix ace fullscreen toggling, fix database icon

Req by DESY
zms-publishing · Nov 21, 2022 · 95f5905 · 95f5905
1 parent 72eb0c5
commit 95f5905
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 40 deletions.
diff --git a/manage_addzmssqldbform.zpt b/manage_addzmssqldbform.zpt
@@ -28,7 +28,7 @@
 							<li>
 								<a href="#" tal:attributes="onclick python:'javascript:$(\'#connection_id\').val(\'%s\')\073$(\'button:first\',$(this).parents(\'.btn-group\')).html($(this).html())'%SQLConnectionID[1]">
 									<span tal:attributes="data-url python:getattr(here,SQLConnectionID[1]).absolute_url()">
-										<img tal:attributes="src python:getattr(here,SQLConnectionID[1]).icon"/>
+										<i class="icon-table fas fa-database"></i>
 										<tal:block tal:content="python:SQLConnectionID[1]">SQLConnectionID</tal:block>
 									</span>
 								</a>

diff --git a/zpt/ZMSSqlDb/manage_properties.zpt b/zpt/ZMSSqlDb/manage_properties.zpt
@@ -22,7 +22,7 @@
 					<button type="button" class="btn btn-default" tal:attributes="onclick python:'var url=$(\'span\',this).attr(\'data-url\')\073if(typeof url!=\'undefined\')window.open(url+\'/manage_main\')'">
 						<tal:block tal:repeat="SQLConnectionID python:filter(lambda x:getattr(here,'connection_id','')==x[1],here.SQLConnectionIDs())">
 							<span tal:attributes="data-url python:getattr(here,SQLConnectionID[1]).absolute_url()">
-								<img tal:attributes="src python:getattr(here,SQLConnectionID[1]).icon"/>
+								<i class="icon-table fas fa-database"></i>
 								<tal:block tal:content="python:SQLConnectionID[1]">SQLConnectionID</tal:block>
 							</span>
 						</tal:block>
@@ -35,7 +35,7 @@
 							<li>
 								<a href="#" tal:attributes="onclick python:'javascript:$(\'#connection_id\').val(\'%s\')\073$(\'button:first\',$(this).parents(\'.btn-group\')).html($(this).html())'%SQLConnectionID[1]">
 									<span tal:attributes="data-url python:getattr(here,SQLConnectionID[1]).absolute_url()">
-										<img tal:attributes="src python:getattr(here,SQLConnectionID[1]).icon"/>
+										<i class="icon-table fas fa-database"></i>
 										<tal:block tal:content="python:SQLConnectionID[1]">SQLConnectionID</tal:block>
 									</span>
 								</a>

diff --git a/zpt/common/zmi_ace_editor.zpt b/zpt/common/zmi_ace_editor.zpt
@@ -5,7 +5,7 @@
 		text python:options.get('text');
 		height python:options.get('height','20em')">
 	<tal:block tal:condition="python:text is None"><tal:block tal:define="global text python:zopeutil.readObject(here,ob.id)"></tal:block></tal:block>
-	<div tal:condition="python:ob is not None" class="form-group" tal:attributes="style python:'height:%s'%(height)">
+	<div id="editor_container" tal:condition="python:ob is not None" class="form-group" tal:attributes="style python:'height:%s'%(height)">
 		<div class="control-label-ace-editor">
 			<a tal:attributes="href python:'%s/manage_main'%ob.absolute_url(); title ob/meta_type" target="_blank">
 				<img tal:attributes="src ob/icon; alt ob/meta_type"/>
@@ -29,41 +29,48 @@
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 -->
 <style>
-  .ace_editor.fullScreen {
-      height: 768px !important;
-      width: 1280px !important;
-      border: 0;
-      margin: 0;
-      position: fixed !important;
-      top: 0;
-      bottom: 0;
-      left: -350px;
-      right: 0;
-      z-index: 10;
-      overflow: hidden;
-  }
+	.ace_editor.fullScreen {
+		position: fixed;
+		height: 100vh !important;
+		width: 100vw !important;
+		left: 0;
+		top: 0;
+		border:0 !important;
+		border-radius:0 !important;
+		z-index:10000;
+	}
+	.zmi.modal-open.fullScreen .modal-dialog {
+		transform:none !important;
+	}
+	#editor_container:after {
+		content:"Please press F10 for full screen view";
+		display:block;
+		margin-top:0;
+		font-size:11px;
+		color:#999;
+		text-align: right;
+	}
 </style>
 <div id="editor" style="height:92%;width:100%;border:1px solid #ccc;border-radius:4px">ace editor text</div>
 <script type="text/javascript" charset="UTF-8" src="/++resource++zms_/ace.ajax.org/ace.js"></script>
 <script type="text/javascript">
 $(function(){
 	if ($("textarea#text").length == 0) {
 		$("#editor").hide();
-	}
-	else {
-    var dom = require("ace/lib/dom");
-    // add command to all new editor instances
-    require("ace/commands/default_commands").commands.push({
-      name: "Toggle Fullscreen",
-      bindKey: "F10",
-      exec: function(editor) {
-        var fullScreen = dom.toggleCssClass(document.body, "fullScreen")
-        dom.setCssClass(editor.container, "fullScreen", fullScreen)
-        editor.setAutoScrollEditorIntoView(!fullScreen)
-        editor.resize()
-      }
-    });
-    // @see https://github.com/ajaxorg/ace/wiki/Embedding---API
+	} else {
+	var dom = require("ace/lib/dom");
+	// add command to all new editor instances
+	require("ace/commands/default_commands").commands.push({
+		name: "Toggle Fullscreen",
+		bindKey: "F10",
+		exec: function(editor) {
+			var fullScreen = dom.toggleCssClass(document.body, "fullScreen")
+			dom.setCssClass(editor.container, "fullScreen", fullScreen)
+			editor.setAutoScrollEditorIntoView(!fullScreen)
+			editor.resize()
+		}
+	});
+	// @see https://github.com/ajaxorg/ace/wiki/Embedding---API
 		$("textarea#text").hide();
 		editor = ace.edit("editor");
 		var value = $("textarea#text").val();
@@ -73,14 +80,11 @@ $(function(){
 			var id = absolute_url.substr(absolute_url.lastIndexOf("/")+1);
 			if (id.endsWith(".css")) {
 				content_type = "text/css";
-			}
-			else if (id.endsWith(".less")) {
+			} else if (id.endsWith(".less")) {
 				content_type = "text/less";
-			}
-			else if (id.endsWith(".js")) {
+			} else if (id.endsWith(".js")) {
 				content_type = "text/javascript";
-			}
-			else {
+			} else {
 				content_type = "text/html";
 			}
 		}
@@ -116,8 +120,8 @@ $(function(){
 		editor.getSession().setMode('ace/mode/'+mode);
 		editor.getSession().setValue(value);
 		editor.getSession().on("change",function() {
-				$("textarea#text").val(editor.getSession().getValue()).change();
-			});
+			$("textarea#text").val(editor.getSession().getValue()).change();
+		});
 	}
 });
 </script>