First step for important traits UI

2 files changed, 47 insertions, 1 deletions

diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js
index 49dfa891c0a..72512bda41e 100644
--- a/src/librustdoc/html/static/main.js
+++ b/src/librustdoc/html/static/main.js
@@ -1624,7 +1624,9 @@
     }
 
     onEach(document.getElementById('main').getElementsByClassName('docblock'), function(e) {
-        e.parentNode.insertBefore(createToggle(), e);
+        if (e.parentNode.id === "main") {
+            e.parentNode.insertBefore(createToggle(), e);
+        }
     });
 
     onEach(document.getElementsByClassName('docblock'), function(e) {
@@ -1711,6 +1713,19 @@
         }
     });
 
+    function showModal(content) {
+        var modal = document.createElement('div');
+        addClass(modal, 'modal');
+        modal.innerHTML = '<div class="modal-content">' + content + "</div>";
+        document.getElementsByTagName('body')[0].appendChild(modal);
+    }
+
+    onEach(document.getElementsByClassName('important-traits'), function(e) {
+        e.onclick = function() {
+            showModal(e.firstElementChild.innerHTML);
+        };
+    });
+
     var search_input = document.getElementsByClassName("search-input")[0];
 
     if (search_input) {
diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css
index 29bec231b84..63792714d47 100644
--- a/src/librustdoc/html/static/rustdoc.css
+++ b/src/librustdoc/html/static/rustdoc.css
@@ -954,3 +954,34 @@ pre.rust {
 	color: #888;
 	font-size: 16px;
 }
+
+h4 > .important-traits {
+	position: absolute;
+	left: -44px;
+	top: 2px;
+	cursor: pointer;
+}
+
+.modal {
+	position: fixed;
+	width: 100vw;
+	height: 100vh;
+	background-color: rgba(0,0,0,0.3);
+	z-index: 10000;
+	top: 0;
+	left: 0;
+}
+
+.modal-content {
+	display: block;
+	max-width: 60%;
+	min-width: 200px;
+	background-color: white;
+	padding: 5px;
+	top: 10%;
+	position: absolute;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	border: 1px solid #999;
+	border-radius: 4px;
+}
\ No newline at end of file