www

commit 044ecf21577e65563e3abfd9602d20d2f462d535
parent 6ec2f9aaf9637bb6d427fcf7ad7551dff3e8066b
Author: Dan Stillman <dstillman@zotero.org>
Date:   Mon, 26 Dec 2016 13:05:40 -0500

Keep TinyMCE dialogs within frame

This isn't ideal, but it mostly works, and keeps the dialogs vertically
(if not horizontally) moveable. It would be nice if the dialogs
automatically flowed to the available width.

This could be turned off in standalone note windows above a certain
width.

Diffstat:
M
resource/tinymce/css/note-ui.css
 | 
118
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
M
resource/tinymce/note.html
 | 
2
++

2 files changed, 117 insertions(+), 3 deletions(-)
diff --git a/resource/tinymce/css/note-ui.css b/resource/tinymce/css/note-ui.css
@@ -43,12 +43,124 @@ html, body {
 	margin-left: 0;
 }
 
-/* Keep popup windows within frame */
+/*
+ * Keep popups within frame
+ *
+ * Modified from http://stackoverflow.com/a/34627616
+ */
+#mce-modal-block {
+}
+
 .mce-window {
-	max-width: calc(100% - 15px) !important;
-	overflow-x: hidden;
+	width: auto !important;
+	background: none !important;
+}
+
+/* This is unfortunate, but without it the Search/Replace window runs off the left side when the
+   pane is too narrow */
+.mce-window:not([role=alertdialog]) {
+	left: 0 !important;
+}
+
+.mce-window-head {
+	background: #fff !important;
+}
+
+.mce-window-body {
+	background: #fff !important;
+}
+
+.mce-foot {
+}
+
+.mce-foot > .mce-container-body {
+	padding: 10px !important;
+}
+
+.mce-foot button {
+}
+
+.mce-panel {
+	max-width: 100% !important;
+}
+
+.mce-container {
+	max-width: 100% !important;
+	height: auto !important;
+}
+
+.mce-container-body {
+	max-width: 100% !important;
+	height: auto !important;
+}
+
+.mce-form {
+	padding: 10px !important;
+}
+
+.mce-tabs {
+	max-width: 100% !important;
+}
+
+.mce-tabs .mce-tab, .mce-tabs .mce-tab.mce-active {
+}
+
+.mce-formitem {
+	margin: 10px 0 !important;
+}
+
+/* Keep button sizes consistent */
+.mce-window .mce-menubtn {
+	min-width: 150px
+}
+
+.mce-foot .mce-primary {
+
+}
+
+/* Space out buttons */
+.mce-foot .mce-btn {
+  margin-right: 6px;
+	margin-top: 5px;
+	min-width: 75px !important;;
+}
+
+/* Correct for margin on buttons */
+.mce-foot .mce-container-body {
+	margin-top: -5px;
+}
+
+/* Space out alerts (e.g., string not found in search) */
+.mce-floatpanel[role=alertdialog] .mce-window-body .mce-first {
+	padding: 20px 40px 0;
+}
+
+.mce-abs-layout-item {
+	position: static !important;
+	width: auto !important;
+}
+
+.mce-abs-layout-item.mce-label {
+	display: block !important;
+}
+
+.mce-abs-layout-item.mce-textbox {
+	box-sizing: border-box !important;
+	display: block !important;
+	width: 100% !important;
 }
 
+.mce-abs-layout-item.mce-combobox {
+	display: flex !important;
+}
+
+.mce-abs-layout-item.mce-combobox > .mce-textbox {
+	flex: 1 1 auto;
+	height: 29px !important;
+}
+
+
+
 #noScriptWarning {
 	padding: 4px;
 	font-family: sans-serif;
diff --git a/resource/tinymce/note.html b/resource/tinymce/note.html
@@ -29,6 +29,8 @@
 		link_context_toolbar: true,
 		link_assume_external_targets: true,
 		
+		target_list: false,
+		
 		setup: function (ed) {
 			setLocale(ed);