Added help icon in dev tools

digitallyinduced · Oct 7, 2021 · 7e81bfb · 7e81bfb
1 parent d9c443c
commit 7e81bfb
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 1 deletion.
diff --git a/IHP/IDE/ToolServer/Layout.hs b/IHP/IDE/ToolServer/Layout.hs
@@ -41,6 +41,7 @@ toolServerLayout inner = H.docTypeHtml ! A.lang "en" $ [hsx|
     <script src="/vendor/src-min/ext-language_tools.js"></script>
     <script src="/IDE/ihp-schemadesigner.js"></script>
     <script src="/IDE/ihp-codegen.js"></script>
+    <script src="/IDE/ihp-help.js"></script>
 
 
     <title>IHP IDE</title>
@@ -59,6 +60,7 @@ toolServerLayout inner = H.docTypeHtml ! A.lang "en" $ [hsx|
         {deploy}
         {docu}
 
+        {help}
         <a href="https://www.digitallyinduced.com/" id="nav-copyright" target="_blank" title={"IHP Version: " <> Version.ihpVersion}>©<br />digitally induced GmbH</a>
     </div>
     <div id="content">
@@ -84,6 +86,34 @@ toolServerLayout inner = H.docTypeHtml ! A.lang "en" $ [hsx|
                     || isActiveController @EnumsController
                     || isActiveController @EnumValuesController )
 
+        help :: Html
+        help = [hsx|
+            <a
+                href="#"
+                class="nav-item"
+                data-container="body"
+                data-toggle="popover"
+                data-placement="right"
+                data-title="Questions, or need help with Haskell type errors?"
+                data-trigger="focus"
+                id="nav-help"
+            >
+                {helpIcon}
+            </a>
+            <div id="help-content" style="display: none">
+                <a class="btn btn-primary btn-block mb-1" href="https://github.com/digitallyinduced/ihp/discussions" target="_blank">
+                    → GitHub Discussions
+                </a>
+                <a class="btn btn-light border btn-block mb-1" href="https://stackoverflow.com/questions/tagged/ihp" target="_blank">
+                    → StackOverflow
+                </a>
+
+                <p class="text-muted email-support">
+                    If you're using <a href="https://ihp.digitallyinduced.com/Pricing" target="_blank">IHP Business</a>, you can also <a href="mailto:support@digitallyinduced.com">reach out to the digitally induced email support</a>.
+                </p>
+            </div>
+        |]
+
         appNavItem :: Text -> Html
         appNavItem "Web" = navItem "APP" fileIcon (appUrl <> "/") False
         appNavItem name = navItem (toUpper name) fileIcon (appUrl <> "/" <> (toLower name) <> "/") False
@@ -132,3 +162,6 @@ fileIcon = preEscapedToHtml [plain|<svg viewBox="0 0 1792 1792" xmlns="http://ww
 
 -- | https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/white/svg/cogs.svg
 cogsIcon = preEscapedToHtml [plain|<svg viewBox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg"><path d="M960 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm768 512q0-52-38-90t-90-38-90 38-38 90q0 53 37.5 90.5t90.5 37.5 90.5-37.5 37.5-90.5zm0-1024q0-52-38-90t-90-38-90 38-38 90q0 53 37.5 90.5t90.5 37.5 90.5-37.5 37.5-90.5zm-384 421v185q0 10-7 19.5t-16 10.5l-155 24q-11 35-32 76 34 48 90 115 7 11 7 20 0 12-7 19-23 30-82.5 89.5t-78.5 59.5q-11 0-21-7l-115-90q-37 19-77 31-11 108-23 155-7 24-30 24h-186q-11 0-20-7.5t-10-17.5l-23-153q-34-10-75-31l-118 89q-7 7-20 7-11 0-21-8-144-133-144-160 0-9 7-19 10-14 41-53t47-61q-23-44-35-82l-152-24q-10-1-17-9.5t-7-19.5v-185q0-10 7-19.5t16-10.5l155-24q11-35 32-76-34-48-90-115-7-11-7-20 0-12 7-20 22-30 82-89t79-59q11 0 21 7l115 90q34-18 77-32 11-108 23-154 7-24 30-24h186q11 0 20 7.5t10 17.5l23 153q34 10 75 31l118-89q8-7 20-7 11 0 21 8 144 133 144 160 0 8-7 19-12 16-42 54t-45 60q23 48 34 82l152 23q10 2 17 10.5t7 19.5zm640 533v140q0 16-149 31-12 27-30 52 51 113 51 138 0 4-4 7-122 71-124 71-8 0-46-47t-52-68q-20 2-30 2t-30-2q-14 21-52 68t-46 47q-2 0-124-71-4-3-4-7 0-25 51-138-18-25-30-52-149-15-149-31v-140q0-16 149-31 13-29 30-52-51-113-51-138 0-4 4-7 4-2 35-20t59-34 30-16q8 0 46 46.5t52 67.5q20-2 30-2t30 2q51-71 92-112l6-2q4 0 124 70 4 3 4 7 0 25-51 138 17 23 30 52 149 15 149 31zm0-1024v140q0 16-149 31-12 27-30 52 51 113 51 138 0 4-4 7-122 71-124 71-8 0-46-47t-52-68q-20 2-30 2t-30-2q-14 21-52 68t-46 47q-2 0-124-71-4-3-4-7 0-25 51-138-18-25-30-52-149-15-149-31v-140q0-16 149-31 13-29 30-52-51-113-51-138 0-4 4-7 4-2 35-20t59-34 30-16q8 0 46 46.5t52 67.5q20-2 30-2t30 2q51-71 92-112l6-2q4 0 124 70 4 3 4 7 0 25-51 138 17 23 30 52 149 15 149 31z" fill="#fff"/></svg>|]
+
+-- | https://github.com/Rush/Font-Awesome-SVG-PNG/blob/master/black/svg/question-circle.svg
+helpIcon  = preEscapedToHtml [plain|<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>|]
diff --git a/lib/IHP/static/IDE/ihp-help.js b/lib/IHP/static/IDE/ihp-help.js
@@ -0,0 +1,11 @@
+$(function () {
+    $('#nav-help').popover({
+        container: '#content',
+        html: true,
+        content: document.getElementById('help-content').innerHTML,
+    });
+
+    document.getElementById('nav-help').addEventListener('click', event => {
+        event.preventDefault();
+    })
+})
diff --git a/lib/IHP/static/IDE/ihp-toolserver-layout.css b/lib/IHP/static/IDE/ihp-toolserver-layout.css
@@ -216,4 +216,42 @@ body {
 
 .data-rows-table [data-fieldname$="id"] { font-size: 8px }
 .data-rows-table [data-fieldname="created_at"] { font-size: 8px }
-.data-rows-table [data-fieldname="password_hash"] { font-size: 8px }
+.data-rows-table [data-fieldname="password_hash"] { font-size: 8px }
+
+#nav-help {
+    margin-top: auto;
+}
+
+.email-support a {
+    color:  rgba(13, 99, 120, 0.8);
+}
+
+.popover {
+    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
+}
+
+.popover-header {
+    background-color: rgba(2, 19, 23, 0.04);
+}
+
+.btn-primary {
+    background-color:  hsla(192, 81%, 26%, 1);
+    border: 1px solid hsla(192, 81%, 19%, 0.1);
+    font-weight: 500;
+    border-radius: 8px;
+}
+
+.btn-primary:hover {
+    background-color: hsla(192, 81%, 26%, 0.8);
+    border: 1px solid hsla(192, 81%, 19%, 0.1);
+}
+
+.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
+    background-color: hsla(192, 81%, 26%, 0.8);
+    border: 1px solid hsla(192, 81%, 19%, 0.1);
+}
+
+.btn-primary:focus {
+    background-color:  hsla(192, 81%, 36%, 1);
+    border: 1px solid hsla(192, 81%, 19%, 0.1);
+}