From 2d074ccc1d432c91b3733c2eeb85d8594e56c4f2 Mon Sep 17 00:00:00 2001 From: Mario See Date: Fri, 15 Feb 2019 12:51:17 -0500 Subject: [PATCH 1/6] initial changes --- app/assets/stylesheets/comments.scss | 69 +++++++++++++++++++++++++++- app/views/comments/_form.html.erb | 39 ++++++++++++++-- 2 files changed, 102 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss index b191589a0b00..418379c240df 100644 --- a/app/assets/stylesheets/comments.scss +++ b/app/assets/stylesheets/comments.scss @@ -208,7 +208,7 @@ a.header-link{ font-size:calc(0.3vw + 16px); color:$medium-gray; } - + } form{ width:104%; @@ -346,6 +346,71 @@ a.header-link{ } } + .markdown-guide-popover { + // all things related to how the thing should look + position: relative; + overflow: scroll; + z-index: 100; + height: 200px; + background: white; + border: 1px solid #dbdbdb; + &.show-popover { + display: block; + } + &.hide-popover { + display: none; + } + &>div { + visibility: visible; + width: 80%; + height: 200px; + position: absolute; + top: 0; + left: 0; + padding: 2em; + color: #333333; + } + } + + // .markdown-guide-modal { + // position: relative; + // height: 200px; + // z-index: 100; + // display: none; + // &:target { + // display: block; + // pointer-events: auto; + // } + // &>div { + // width: 500px; + // position: absolute; + // top: 0; + // left: 0; + // padding: 2em; + // background: black; + // color: #333333; + // } + // p { + // color: white; + // font-weight: bold; + // } + // } + + .modal-close { + color: #aaa; + line-height: 50px; + font-size: 80%; + position: absolute; + right: 0; + text-align: center; + top: 0; + width: 70px; + text-decoration: none; + &:hover { + color: #000; + } + } + details { details { .comment-deep-1,.comment-deep-2 { @@ -379,7 +444,7 @@ a.header-link{ &:not(:active) { box-shadow: 0px 0px 6px $light-medium-gray !important; } - } + } span { display: inline-block; width: calc(100% - 50px); diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb index a69ed7d1379a..57c7aa05684d 100644 --- a/app/views/comments/_form.html.erb +++ b/app/views/comments/_form.html.erb @@ -35,9 +35,12 @@ %>
-
-
- +
+
+ +
@@ -56,8 +59,36 @@ <%= f.submit "SUBMIT", onclick:"validateField(event)", class:"comment-action-button", id: "submit-button" %>
+ <% end %> +
+
+ Close +
+

I AM MARKDOWN GUIDE

+
+
+
+ <% if @comment.persisted? %> -<% end %> \ No newline at end of file +<% end %> From 0a395e2cb6a8525be974f41aad694757bb538a4c Mon Sep 17 00:00:00 2001 From: Mario See Date: Tue, 26 Feb 2019 14:47:29 -0500 Subject: [PATCH 2/6] wip popover and changed content --- app/assets/stylesheets/comments.scss | 39 ++++++++++----------- app/views/comments/_form.html.erb | 51 ++++++++++++++++------------ 2 files changed, 48 insertions(+), 42 deletions(-) diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss index a59309379358..7e1c97147224 100644 --- a/app/assets/stylesheets/comments.scss +++ b/app/assets/stylesheets/comments.scss @@ -357,30 +357,27 @@ a.header-link { } } - .markdown-guide-popover { - // all things related to how the thing should look - position: relative; - overflow: scroll; + .markdown-guide-container { + position: absolute; + width: 90.5%; + left: 4.675%; z-index: 100; - height: 200px; background: white; border: 1px solid #dbdbdb; - &.show-popover { - display: block; - } - &.hide-popover { - display: none; - } - &>div { - visibility: visible; - width: 80%; - height: 200px; - position: absolute; - top: 0; - left: 0; - padding: 2em; - color: #333333; - } + } + + .markdown-guide-container:after { + content: ''; + position: absolute; + top: 0; + left: 5%; + width: 0; + height: 0; + border: 9px solid transparent; + border-bottom-color: #dbdbdb; + border-top: 0; + margin-left: -9px; + margin-top: -9px; } // .markdown-guide-modal { diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb index aa1ac23d1bff..ea1a9ed2bc2d 100644 --- a/app/views/comments/_form.html.erb +++ b/app/views/comments/_form.html.erb @@ -39,7 +39,7 @@ - +
@@ -59,32 +59,41 @@ <%= f.submit "SUBMIT", onclick: "validateField(event)", class: "comment-action-button", id: "submit-button" %>
<% end %> -
-
- Close -
-

I AM MARKDOWN GUIDE

-
+ From cadf49f45a7c55649eebe552a8e674e4d061f856 Mon Sep 17 00:00:00 2001 From: Mario See Date: Tue, 12 Mar 2019 11:53:24 -0400 Subject: [PATCH 3/6] focus hint and wip dropdown --- .../initializeCommentsPage.js.erb | 23 +++++ app/assets/stylesheets/comments.scss | 94 ++++++++++--------- app/views/comments/_form.html.erb | 73 +++++++------- 3 files changed, 110 insertions(+), 80 deletions(-) diff --git a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb index c61807888b47..1301de4d192a 100644 --- a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb +++ b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb @@ -265,9 +265,31 @@ function handleFocus(event) { }, 100); } else { handleSizeChange(event); + showMarkdownHint(); } } +function showMarkdownHint() { + var markdownHint = document.getElementById("markdown-hint"); + markdownHint.style.visibility = "visible"; + markdownHint.style.opacity = 1; + if (window.innerWidth < 425) { + markdownHint.style.height = "27px"; + markdownHint.children[0].style.height = "27px" + } else { + markdownHint.style.height = "14px"; + markdownHint.children[0].style.height = "14px" + } +} + +function hideMarkdownHint() { + var markdownHint = document.getElementById("markdown-hint"); + markdownHint.style.opacity = 0; + markdownHint.style.height = "0px"; + markdownHint.style.visibility = "hidden"; + markdownHint.children[0].style.height = "0px" +} + function handleBlur(event) { setTimeout(function () { var el = document.getElementById('text-area'); @@ -275,6 +297,7 @@ function handleBlur(event) { el.className = ''; } }, 100); + hideMarkdownHint() } function handleKeyUp(event) { diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss index 7e1c97147224..5f5292cf5d57 100644 --- a/app/assets/stylesheets/comments.scss +++ b/app/assets/stylesheets/comments.scss @@ -123,6 +123,32 @@ a.header-link { opacity: 1; } } + #markdown-hint { + margin: 0 15px; + font-size:0.6em; + padding: 0 5px; + width: calc(100% - 40px); + text-align: right; + -webkit-transition: visibility 0.3s ease-in-out, height 0.3s ease-in-out, opacity 0.3s ease-in-out; + -moz-transition: visibility 0.3s ease-in-out, height 0.3s ease-in-out, opacity 0.3s ease-in-out; + -o-transition: visibility 0.3s ease-in-out, height 0.3s ease-in-out, opacity 0.3s ease-in-out; + transition: visibility 0.3s ease-in-out, height 0.3s ease-in-out, opacity 0.3s ease-in-out; + } + #collapsible-markdown { + border: 1px solid #dbdbdb; + background: white; + -webkit-transition: visibility 0.3s, height 0.3s, opacity 0.3s linear; + -moz-transition: visibility 0.3s, height 0.3s, opacity 0.3s linear; + -o-transition: visibility 0.3s, height 0.3s, opacity 0.3s linear; + transition: visibility 0.3s, height 0.3s, opacity 0.3s linear; + span { + font-size: 0.8em; + padding-top: 2px; + padding-left: 1.5%; + padding-right: 1.5%; + padding-bottom: 5px; + } + } .markdown-guide { position: absolute; left: 22px; @@ -357,52 +383,36 @@ a.header-link { } } - .markdown-guide-container { - position: absolute; - width: 90.5%; - left: 4.675%; - z-index: 100; - background: white; - border: 1px solid #dbdbdb; + .tooltip { + display:inline-block; + position:relative; + border-bottom:1px dotted #666; + text-align:left; + + } - .markdown-guide-container:after { - content: ''; - position: absolute; - top: 0; - left: 5%; - width: 0; - height: 0; - border: 9px solid transparent; - border-bottom-color: #dbdbdb; - border-top: 0; - margin-left: -9px; - margin-top: -9px; + .tooltip .bottom { + min-width:300px; + max-width:600px; + top:0px; + left: 10%; + padding:20px; + color:#666666; + background-color:#EEEEEE; + font-weight:normal; + font-size:13px; + border-radius:8px; + position:absolute; + z-index:99999999; + box-sizing:border-box; + box-shadow:0 1px 8px rgba(0,0,0,0.5); + display:none; } - // .markdown-guide-modal { - // position: relative; - // height: 200px; - // z-index: 100; - // display: none; - // &:target { - // display: block; - // pointer-events: auto; - // } - // &>div { - // width: 500px; - // position: absolute; - // top: 0; - // left: 0; - // padding: 2em; - // background: black; - // color: #333333; - // } - // p { - // color: white; - // font-weight: bold; - // } - // } + .tooltip:hover .bottom { + display:block; + } .modal-close { color: #aaa; diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb index ea1a9ed2bc2d..cba8d2c77b2c 100644 --- a/app/views/comments/_form.html.erb +++ b/app/views/comments/_form.html.erb @@ -34,11 +34,14 @@ required: true %>
+
- + + X + @@ -58,45 +61,39 @@ <%= f.submit "SUBMIT", onclick: "validateField(event)", class: "comment-action-button", id: "submit-button" %>
- <% end %> -