Merge pull request #48958 from apoorvapendse/main
web: Improve UX for copyCode animationpull/48258/head
commit
e628bdf427
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1947,7 +1947,9 @@ body.td-search #search {
|
|||
|
||||
.code-sample > .copy-code-icon {
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
gap:1rem;
|
||||
justify-content: right;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
|
@ -1955,6 +1957,14 @@ body.td-search #search {
|
|||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#toast-container > *{
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
.toast-success {
|
||||
background-color: $primary !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
// handle main page features on narrow viewports
|
||||
@media screen and (max-width: 768px) {
|
||||
|
|
|
@ -18,6 +18,9 @@ other = "Show More Posts..."
|
|||
[banner_acknowledgement]
|
||||
other = "Hide this notice"
|
||||
|
||||
[browser_clipboard_support_warning]
|
||||
other = "Sorry, your browser doesn't support copying this example to your clipboard."
|
||||
|
||||
[case_study_prefix]
|
||||
other = "Case study:"
|
||||
|
||||
|
@ -158,6 +161,9 @@ other = "Environment variables"
|
|||
[error_404_were_you_looking_for]
|
||||
other = "Were you looking for:"
|
||||
|
||||
[error_copy_to_clipboard]
|
||||
other = "Error"
|
||||
|
||||
[examples_heading]
|
||||
other = "Examples"
|
||||
|
||||
|
@ -603,6 +609,9 @@ other = "Toggle section navigation"
|
|||
[subscribe_button]
|
||||
other = "Subscribe"
|
||||
|
||||
[success_copy_to_clipboard]
|
||||
other = "Success"
|
||||
|
||||
[synopsis_heading]
|
||||
other = "Synopsis"
|
||||
|
||||
|
@ -621,6 +630,12 @@ other = """<p>Items on this page refer to third party products or projects that
|
|||
[thirdparty_message_vendor]
|
||||
other = """Items on this page refer to vendors external to Kubernetes. The Kubernetes project authors aren't responsible for those third-party products or projects. To add a vendor, product or project to this list, read the <a href="/docs/contribute/style/content-guide/#third-party-content">content guide</a> before submitting a change. <a href="#third-party-content-disclaimer">More information.</a>"""
|
||||
|
||||
[toast_failure_copycode]
|
||||
other="Failed to copy to clipboard: "
|
||||
|
||||
[toast_success_copycode]
|
||||
other = "Copied to clipboard: "
|
||||
|
||||
[translated_by]
|
||||
other = "Translated By"
|
||||
|
||||
|
@ -642,7 +657,8 @@ other = "Versions"
|
|||
[warning]
|
||||
other = "Warning:"
|
||||
|
||||
[warning_copy_to_clipboard]
|
||||
other = "Warning"
|
||||
|
||||
[whatsnext_heading]
|
||||
other = "What's next"
|
||||
|
||||
|
||||
|
|
|
@ -6,29 +6,54 @@
|
|||
{{ end }}
|
||||
{{/* copy-and-paste helper for codenew shortcode */}}
|
||||
{{- if or (.HasShortcode "code_sample") (.HasShortcode "code") (.HasShortcode "codenew") -}}
|
||||
{{- $toastrJs := resources.Get "js/toastr-2.1.4.min.js" | minify | fingerprint -}}
|
||||
{{- if hugo.IsProduction -}}
|
||||
{{- $sweetAlert := resources.Get "js/sweetalert-2.1.2.min.js" | minify | fingerprint -}}
|
||||
<script async src="{{ $sweetAlert.RelPermalink }}" integrity="{{ $sweetAlert.Data.Integrity }}" crossorigin="anonymous"></script>
|
||||
<script async src="{{ $toastrJs.RelPermalink }}"></script>
|
||||
{{- else -}}
|
||||
{{- $sweetAlert := resources.Get "js/sweetalert-2.1.2.min.js" -}}
|
||||
<script async src="{{ $sweetAlert.RelPermalink }}"></script>
|
||||
<script async src="{{ $toastrJs.RelPermalink }}"></script>
|
||||
{{- end -}}
|
||||
|
||||
<script type="text/javascript">
|
||||
function copyCode(elem) {
|
||||
if (document.getElementById(elem)) {
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(document.getElementById(elem).textContent).then(
|
||||
function () {
|
||||
swal("Copied to clipboard: ",elem);
|
||||
toastr.options = {
|
||||
closeButton: true,
|
||||
progressBar: true,
|
||||
positionClass: "toast-bottom-center",
|
||||
timeOut: 2000,
|
||||
preventDuplicates: true,
|
||||
newestOnTop: true
|
||||
};
|
||||
toastr.success("{{i18n "toast_success_copycode"}}" + elem, "{{i18n "success_copy_to_clipboard"}}");
|
||||
},
|
||||
function () {
|
||||
swal("Oh, no…","Failed to copy to clipboard: ",elem);
|
||||
},
|
||||
toastr.options = {
|
||||
closeButton: true,
|
||||
progressBar: true,
|
||||
positionClass: "toast-bottom-center",
|
||||
timeOut: 2000,
|
||||
preventDuplicates: true,
|
||||
newestOnTop: true
|
||||
};
|
||||
toastr.error("{{i18n "toast_failure_copycode"}}" + elem, "{{i18n "error_copy_to_clipboard"}}");
|
||||
}
|
||||
);
|
||||
} else {
|
||||
swal("Oh, no…","Sorry, your browser doesn't support copying this example to your clipboard.");
|
||||
toastr.options = {
|
||||
closeButton: true,
|
||||
progressBar: true,
|
||||
positionClass: "toast-bottom-center",
|
||||
timeOut: 2000,
|
||||
preventDuplicates: true,
|
||||
newestOnTop: true
|
||||
};
|
||||
toastr.warning("{{i18n "browser_clipboard_support_warning"}}", "{{i18n "warning_copy_to_clipboard"}}");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{{- end -}}
|
||||
|
|
|
@ -61,3 +61,7 @@
|
|||
{{- $bannerDismissJs := resources.Get "js/banner-dismiss.js" -}}
|
||||
<script defer src="{{ $bannerDismissJs.RelPermalink }}"></script>
|
||||
{{- end -}}
|
||||
|
||||
{{- if or (.HasShortcode "code_sample") (.HasShortcode "code") (.HasShortcode "codenew") -}}
|
||||
<link rel="stylesheet" href="/css/toastr-2.1.4.min.css">
|
||||
{{- end -}}
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue