Add copy icon wrt #133

This commit is contained in:
Julian Ospald 2020-02-11 23:26:31 +01:00
parent 46441d00fc
commit 46da6f3d6d
4 changed files with 101 additions and 14 deletions

5
www/copy.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>copy</title>
<path d="M20 8v-8h-14l-6 6v18h12v8h20v-24h-12zM6 2.828v3.172h-3.172l3.172-3.172zM2 22v-14h6v-6h10v6l-6 6v8h-10zM18 10.828v3.172h-3.172l3.172-3.172zM30 30h-16v-14h6v-6h10v20z"></path>
</svg>

After

Width:  |  Height:  |  Size: 341 B

View File

@ -63,7 +63,7 @@ body#idx > * {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
text-align: center; text-align: center;
width: 31em; width: 37em;
} }
body#idx > #pitch { body#idx > #pitch {
@ -88,31 +88,56 @@ body#idx p.other-help {
background-color: rgb(250, 250, 250); background-color: rgb(250, 250, 250);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 45rem;
text-align: center;
border-radius: 3px; border-radius: 3px;
border: 1px solid rgb(204, 204, 204); border: 1px solid rgb(204, 204, 204);
box-shadow: 0px 1px 4px 0px rgb(204, 204, 204); box-shadow: 0px 1px 4px 0px rgb(204, 204, 204);
} }
.instructions > * { .instructions > * {
width: 45rem; width: 55rem;
margin-left: auto; margin-left: auto;
margin-right: 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 { hr {
margin-top: 2em; margin-top: 2em;
margin-bottom: 2em; margin-bottom: 2em;
} }
#platform-instructions-linux > pre, #platform-instructions-linux > div > pre,
#platform-instructions-mac > pre, #platform-instructions-mac > div > pre,
#platform-instructions-freebsd > pre, #platform-instructions-freebsd > div > pre,
#platform-instructions-win32 > pre, #platform-instructions-win32 > pre,
#platform-instructions-win64 > pre, #platform-instructions-win64 > pre,
#platform-instructions-default > div > pre, #platform-instructions-default > div > div > pre,
#platform-instructions-unknown > div > pre { #platform-instructions-unknown > div > div > pre {
background-color: #515151; background-color: #515151;
color: white; color: white;
margin-left: auto; margin-left: auto;
@ -166,3 +191,50 @@ hr {
color: #999; color: #999;
content: " $ "; 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;
}

View File

@ -148,6 +148,16 @@ function fill_in_bug_report_values() {
nav_app.textContent = navigator.appVersion; 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 () { (function () {
adjust_for_platform(); adjust_for_platform();
set_up_cycle_button(); set_up_cycle_button();

View File

@ -26,19 +26,19 @@
<div id="platform-instructions-linux" class="instructions" style="display: none;"> <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> <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> <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>
<div id="platform-instructions-mac" class="instructions" style="display: none;"> <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> <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> <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>
<div id="platform-instructions-freebsd" class="instructions" style="display: none;"> <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> <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> <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> </div>
@ -78,7 +78,7 @@
<!-- duplicate the default cross-platform instructions --> <!-- duplicate the default cross-platform instructions -->
<div> <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> <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> <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> </div>
@ -97,7 +97,7 @@
<div> <div>
<p>To install Haskell, if you are running Linux, macOS or FreeBSD,<br/>run the following <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> 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> <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> </div>