Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

feat(ui): added helpbub#970

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
NimRegev merged 11 commits intomasterfromCR-22957
May 27, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 19 additions & 4 deletions_includes/docs-navbar.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,8 +6,8 @@
</div>
<span class="badge cf-badge cf-badge-doc align-middle ml-1">Codefresh Documentation</span>
</a>
{% if page.layout != "home" %}
<div id="searchbar" class="order-2 order-md-2 align-items-center"></div>
<!-- {% if page.layout != "home" %}-->
<!-- <div id="searchbar" class="order-2 order-md-2 align-items-center"></div>-->
<!-- <form class="bd-search {% if page.layout == "docs" %}bd-search-docs {% endif %}d-flex mt-1 mb-1 mt-md-0 order-2 order-md-2 align-items-center">
<input type="search" class="form-control form-control-dark mr-sm-2 doc-search-input" id="navbar-search-input" placeholder="{{ site.data.translations[site.locale].search_placeholder_text }}" aria-label="{{ site.data.translations[site.locale].search_placeholder_text }}" autocomplete="off">
<i class="fa fa-search"></i>
Expand All@@ -17,7 +17,7 @@
</button>
{% endif %}
</form> -->
{% endif %}
<!-- {% endif %}-->
<div class="navbar-nav-scroll order-1 order-md-1 mx-md-auto">
<ul class="navbar-nav flex-row mx-md-auto">

Expand DownExpand Up@@ -93,6 +93,21 @@
</ul>
</div>
- <!-- </div>
<a class="btn btn-primary order-2 order-md-2" href="https://codefresh.io/docs/" style="background-color: #212437; border-color: #212437; color: #5FFFBF; font-weight: 500">View Codefresh Docs</a>
<a class="btn btn-primary order-2 order-md-2" href="https://codefresh.io/docs/" style="background-color: #212437; border-color: #212437; color: #5FFFBF; font-weight: 500">View Codefresh Docs</a>
</div> -->

{% if page.layout != "home" %}
<button
onclick="window.CommandBar.toggleHelpHub()"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Can we also add accessibility attributes to this button?

Copy link
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

sure, you mean aria-labels?

olegt-codefresh reacted with thumbs up emoji
Copy link
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

but it has text inside of it btw

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Just to make sure it's accessibe via keyboard and a screen reader

class="helpbub-toggler helpbub-toggler--small order-2 order-md-2"
aria-label="Search Codefresh Documentation"
type="button"
>
<div class="d-flex align-items-center">
<img src="{{site.baseurl}}/images/icons/search.png" />
<span class="ml-2">Search</span>
</div>
<span class="helpbub-toggler--hotkey">&#8984; + K</span>
</button>
{% endif %}
</header>
43 changes: 30 additions & 13 deletions_includes/scripts.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -34,19 +34,36 @@


<!-- Start of Doc Search Embed Code -->
<!--<script>-->
<!-- docsearch({-->
<!-- // inputSelector: '.doc-search-input',-->
<!-- container: '#searchbar',-->
<!-- typesenseCollectionName: 'project-one-doc-index', // Should match the collection name you mention in the docsearch scraper config.js-->
<!-- typesenseServerConfig: {-->
<!-- nodes: [{-->
<!-- host: 'fxokw93dqyu27pv6p.a1.typesense.net', // For Typesense Cloud use xxx.a1.typesense.net-->
<!-- port: '443', // For Typesense Cloud use 443-->
<!-- protocol: 'https' // For Typesense Cloud use https-->
<!-- }],-->
<!-- apiKey: '5aRIuEbEpw9LTf2B5te4Essx4o4HE4Fl', // Use API Key with only Search permissions-->
<!-- },-->
<!-- });-->
<!--</script>-->
<!-- End of Doc Search Embed Code -->

<script>
docsearch({
// inputSelector: '.doc-search-input',
container: '#searchbar',
typesenseCollectionName: 'project-one-doc-index', // Should match the collection name you mention in the docsearch scraper config.js
typesenseServerConfig: {
nodes: [{
host: 'fxokw93dqyu27pv6p.a1.typesense.net', // For Typesense Cloud use xxx.a1.typesense.net
port: '443', // For Typesense Cloud use 443
protocol: 'https' // For Typesense Cloud use https
}],
apiKey: '5aRIuEbEpw9LTf2B5te4Essx4o4HE4Fl', // Use API Key with only Search permissions
},
var o="3033bf7f",n=["Object.assign","Symbol","Symbol.for"].join("%2C"),a=window;function r(o,n){void 0===n&&(n=!1),"complete"!==document.readyState&&window.addEventListener("load",r.bind(null,o,n),{capture:!1,once:!0});var a=document.createElement("script");a.type="text/javascript",a.async=n,a.src=o,document.head.appendChild(a)}function t(){var n;if(void 0===a.CommandBar){delete a.__CommandBarBootstrap__;var t=Symbol.for("CommandBar::configuration"),e=Symbol.for("CommandBar::orgConfig"),i=Symbol.for("CommandBar::disposed"),c=Symbol.for("CommandBar::isProxy"),m=Symbol.for("CommandBar::queue"),d=Symbol.for("CommandBar::unwrap"),l=Symbol.for("CommandBar::eventSubscriptions"),s=[],u=localStorage.getItem("commandbar.lc"),f=u&&u.includes("local")?"http://localhost:8000":"https://api.commandbar.com",p=Object.assign(((n={})[t]={uuid:o},n[e]={},n[i]=!1,n[c]=!0,n[m]=new Array,n[d]=function(){return p},n[l]=void 0,n),a.CommandBar),b=["addCommand","boot","addEventSubscriber","addRecordAction","setFormFactor"],y=p;Object.assign(p,{shareCallbacks:function(){return{}},shareContext:function(){return{}}}),a.CommandBar=new Proxy(p,{get:function(o,n){return n in y?p[n]:"then"!==n?b.includes(n)?function(){var o=Array.prototype.slice.call(arguments);return new Promise((function(a,r){o.unshift(n,a,r),p[m].push(o)}))}:function(){var o=Array.prototype.slice.call(arguments);o.unshift(n),p[m].push(o)}:void 0}}),null!==u&&s.push("lc=".concat(u)),s.push("version=2"),r("".concat(f,"/latest/").concat(o,"?").concat(s.join("&")),!0)}}void 0===Object.assign||"undefined"==typeof Symbol||void 0===Symbol.for?(a.__CommandBarBootstrap__=t,r("https://polyfill.io/v3/polyfill.min.js?version=3.101.0&callback=__CommandBarBootstrap__&features="+n)):t();
window.CommandBar.boot(
"",
{},
{ canOpenEditor: false, products: ["help_hub"] }
);

document.addEventListener("keydown", function (event) {
if (event.metaKey && event.key === "k") {
window.CommandBar.toggleHelpHub();
}
});
</script>
<!-- End of Doc Search Embed Code -->


2 changes: 1 addition & 1 deletionassets/css/docs.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletionassets/css/docs.min.css.map
View file
Open in desktop

Large diffs are not rendered by default.

29 changes: 29 additions & 0 deletionsassets/scss/_helpbub.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
.helpbub-toggler {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;

width: 100%;
padding: 4px 12px 4px 8px;

color: $helpbub-text-color;
cursor: pointer;
background-color: $helpbub-bg;

border: 1px solid $helpbub-border;
border-radius: 16px;

.helpbub-toggler--hotkey {
color: $bd-doc-content-bg;
}

&:focus {
outline: 1px solid $cf-bright-green;
box-shadow: 0 0 0 5px rgba(95, 255, 191, .24);
}
}

.helpbub-toggler--small {
max-width: 275px;
}
5 changes: 5 additions & 0 deletionsassets/scss/_variables.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -77,6 +77,11 @@ $bd-doc-content-border: #dadada;
$bd-link-color: $bd-topaz-main !default;
$bd-link-hover-color: darken($bd-link-color, 15%) !default;

// Helphub
$helpbub-bg: #3f4255;
$helpbub-text-color: #b0c4e7;
$helpbub-border: #35384b;

// Fonts
// stylelint-disable value-keyword-case
$font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
Expand Down
1 change: 1 addition & 0 deletionsassets/scss/docs.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -47,3 +47,4 @@
@import "anchor";
@import "links";
@import "algolia";
@import "helpbub";
Binary file addedimages/icons/search.png
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 13 additions & 1 deletionindex.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,19 @@ <h2 class="mb-3 bd-text-white text-uppercase">
Instantly build, test, and deploy Docker images.<br>
Realize your true DevOps potential with the premier enterprise Argo software delivery solution.
</p>
<div id="searchbar"></div>
<!-- <div id="searchbar"></div>-->
<button
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

accessibility attributes for the button

onclick="window.CommandBar.toggleHelpHub()"
class="helpbub-toggler mb-3"
aria-label="Search Codefresh Documentation"
type="button"
>
<div class="d-flex align-items-center">
<img src="{{site.baseurl}}/images/icons/search.png" />
<span class="ml-2">Search</span>
</div>
<span class="helpbub-toggler--hotkey">&#8984; + K</span>
</button>
<!-- <div>
<form class="bd-search bd-search--home d-flex mt-1 mb-3 mt-md-0 order-2 order-md-2 align-items-center">
<input type="search" class="form-control form-control-dark mr-sm-2 doc-search-input" id="navbar-search-input" placeholder="{{ site.data.translations[site.locale].search_placeholder_text }}" aria-label="{{ site.data.translations[site.locale].search_placeholder_text }}" autocomplete="off">
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp