From 4e189bc8687ff8891cd08cdf9853c09173d8eccc Mon Sep 17 00:00:00 2001 From: Julian Ospald <hasufell@posteo.de> Date: Tue, 11 Feb 2020 23:26:31 +0100 Subject: [PATCH] Add copy icon wrt #133 --- www/copy.svg | 1 + www/ghcup.css | 90 +++++++++++++++++++++++++++++++++++++++++++++----- www/ghcup.js | 10 ++++++ www/index.html | 10 +++--- 4 files changed, 97 insertions(+), 14 deletions(-) create mode 100644 www/copy.svg diff --git a/www/copy.svg b/www/copy.svg new file mode 100644 index 0000000..f874862 --- /dev/null +++ b/www/copy.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1.66em" height="2em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 14 16"><path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3l3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7c-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2c1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1s-1 .45-1 1s-.45 1-1 1H3c-.55 0-1 .45-1 1z" fill="#626262"/></svg> diff --git a/www/ghcup.css b/www/ghcup.css index c995699..4bb832a 100644 --- a/www/ghcup.css +++ b/www/ghcup.css @@ -63,7 +63,7 @@ body#idx > * { margin-left: auto; margin-right: auto; text-align: center; - width: 31em; + width: 37em; } body#idx > #pitch { @@ -88,31 +88,56 @@ body#idx p.other-help { background-color: rgb(250, 250, 250); margin-left: auto; margin-right: auto; - width: 45rem; - text-align: center; border-radius: 3px; border: 1px solid rgb(204, 204, 204); box-shadow: 0px 1px 4px 0px rgb(204, 204, 204); } .instructions > * { - width: 45rem; + width: 55rem; margin-left: auto; margin-right: auto; } +.instructions div.command-button { + display: flex; +} + +.instructions div.command-button button { + color: white; + /* border: none; */ + background-color: rgb(242, 242, 242); + border-width: 2px; + border-style: solid; + border-radius: 3px; + + margin-left: 1rem; + margin-right: auto; + margin-top: 25px; + margin-bottom: 25px; + text-align: center; +} + +.instructions div.command-button button:hover { + background: rgb(232, 232, 232); +} + +.instructions div.command-button button:focus { + background: rgb(222, 222, 222); +} + hr { margin-top: 2em; margin-bottom: 2em; } -#platform-instructions-linux > pre, -#platform-instructions-mac > pre, -#platform-instructions-freebsd > pre, +#platform-instructions-linux > div > pre, +#platform-instructions-mac > div > pre, +#platform-instructions-freebsd > div > pre, #platform-instructions-win32 > pre, #platform-instructions-win64 > pre, -#platform-instructions-default > div > pre, -#platform-instructions-unknown > div > pre { +#platform-instructions-default > div > div > pre, +#platform-instructions-unknown > div > div > pre { background-color: #515151; color: white; margin-left: auto; @@ -166,3 +191,50 @@ hr { color: #999; content: " $ "; } + + /* Tooltip container */ +.tooltip { + position: relative; + display: inline-block; + /* border-bottom: 1px dotted black; [> If you want dots under the hoverable text <] */ +} + +/* Tooltip text */ +.tooltip .tooltiptext { + visibility: hidden; + width: 120px; + background-color: #555; + color: #fff; + text-align: center; + padding: 5px 0; + border-radius: 6px; + + /* Position the tooltip text */ + position: absolute; + z-index: 1; + bottom: 125%; + left: 50%; + margin-left: -60px; + + /* Fade in tooltip */ + opacity: 0; + transition: opacity 0.3s; +} + +/* Tooltip arrow */ +.tooltip .tooltiptext::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #555 transparent transparent transparent; +} + +/* Show the tooltip text when you mouse over the tooltip container */ +.tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; +} diff --git a/www/ghcup.js b/www/ghcup.js index 6085e54..77dd6d4 100644 --- a/www/ghcup.js +++ b/www/ghcup.js @@ -148,6 +148,16 @@ function fill_in_bug_report_values() { nav_app.textContent = navigator.appVersion; } +function copyToClipboard() { + const text = document.getElementsByClassName("ghcup-command").item(0).innerText; + const el = document.createElement('textarea'); + el.value = text; + document.body.appendChild(el); + el.select(); + document.execCommand('copy'); + document.body.removeChild(el); +} + (function () { adjust_for_platform(); set_up_cycle_button(); diff --git a/www/index.html b/www/index.html index 616105a..4abc7f5 100644 --- a/www/index.html +++ b/www/index.html @@ -26,19 +26,19 @@ <div id="platform-instructions-linux" class="instructions" style="display: none;"> <p>Run the following in your terminal (as a user other than root), then follow the onscreen instructions.</p> - <pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre> + <div class="command-button"><pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre><button class="tooltip" onclick="copyToClipboard()"><img src="copy.svg" alt="" /><span class="tooltiptext">Copy to clipboard</span></button></div> <p class="other-help">If you don't like curl | sh, see <a href="https://gitlab.haskell.org/haskell/ghcup/blob/master/README.md#manual-install">other installation methods</a>.<br/>You appear to be running Linux. If not, <a class="default-platform-button" href="#">display all supported installers</a>.</p> </div> <div id="platform-instructions-mac" class="instructions" style="display: none;"> <p>Run the following in your terminal (as a user other than root), then follow the onscreen instructions.</p> - <pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre> + <div class="command-button"><pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre><button class="tooltip" onclick="copyToClipboard()"><img src="copy.svg" alt="" /><span class="tooltiptext">Copy to clipboard</span></button></div> <p class="other-help">If you don't like curl | sh, see <a href="https://gitlab.haskell.org/haskell/ghcup/blob/master/README.md#manual-install">other installation methods</a>.<br/>You appear to be running macOS. If not, <a class="default-platform-button" href="#">display all supported installers</a>.</p> </div> <div id="platform-instructions-freebsd" class="instructions" style="display: none;"> <p>Run the following in your terminal (as a user other than root), then follow the onscreen instructions.</p> - <pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre> + <div class="command-button"><pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre><button class="tooltip" onclick="copyToClipboard()"><img src="copy.svg" alt="" /><span class="tooltiptext">Copy to clipboard</span></button></div> <p class="other-help">If you don't like curl | sh, see <a href="https://gitlab.haskell.org/haskell/ghcup/blob/master/README.md#manual-install">other installation methods</a>.<br/>You appear to be running FreeBSD. If not, <a class="default-platform-button" href="#">display all supported installers</a>.</p> </div> @@ -78,7 +78,7 @@ <!-- duplicate the default cross-platform instructions --> <div> <p>If you are running Linux, macOS or FreeBSD,<br/>run the following in your terminal (as a user other than root), then follow the onscreen instructions.</p> - <pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre> + <div class="command-button"><pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre><button class="tooltip" onclick="copyToClipboard()"><img src="copy.svg" alt="" /><span class="tooltiptext">Copy to clipboard</span></button></div> <p class="other-help">If you don't like curl | sh, see <a href="https://gitlab.haskell.org/haskell/ghcup/blob/master/README.md#manual-install">other installation methods</a>.</p> </div> @@ -97,7 +97,7 @@ <div> <p>To install Haskell, if you are running Linux, macOS or FreeBSD,<br/>run the following in your terminal (as a user other than root), then follow the onscreen instructions.</p> - <pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre> + <div class="command-button"><pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre><button class="tooltip" onclick="copyToClipboard()"><img src="copy.svg" alt="" /><span class="tooltiptext">Copy to clipboard</span></button></div> <p class="other-help">If you don't like curl | sh, see <a href="https://gitlab.haskell.org/haskell/ghcup/blob/master/README.md#manual-install">other installation methods</a>.</p> </div> -- GitLab