Skip to content
This repository was archived by the owner on Dec 15, 2022. It is now read-only.

Commit b592868

Browse files
author
Ronan Levesque
committed
Add loadingIndicator into SearchBox, update themes
1 parent d584375 commit b592868

File tree

3 files changed

+112
-5
lines changed

3 files changed

+112
-5
lines changed

‎content/widgets/search-box.md

Lines changed: 83 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,30 @@ html: |
1414
<path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"></path>
1515
</svg>
1616
</button>
17-
<button class="ais-SearchBox-reset" type="reset" title="Clear the search query." style="display:none;">
17+
<button class="ais-SearchBox-reset" type="reset" title="Clear the search query." hidden>
1818
<svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="10" height="10">
1919
<path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"></path>
2020
</svg>
2121
</button>
22+
<span class="ais-SearchBox-loadingIndicator" hidden>
23+
<svg width="18" height="18" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon">
24+
<g fill="none" fillRule="evenodd">
25+
<g transform="translate(1 1)" strokeWidth="2">
26+
<circle strokeOpacity=".5" cx="18" cy="18" r="18" />
27+
<path d="M36 18c0-9.94-8.06-18-18-18">
28+
<animateTransform
29+
attributeName="transform"
30+
type="rotate"
31+
from="0 18 18"
32+
to="360 18 18"
33+
dur="1s"
34+
repeatCount="indefinite"
35+
/>
36+
</path>
37+
</g>
38+
</g>
39+
</svg>
40+
</span>
2241
</form>
2342
</div>
2443
<div class="ais-SearchBox-footer ais-footer">
@@ -44,6 +63,69 @@ althtml1: |
4463
<path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"></path>
4564
</svg>
4665
</button>
66+
<span class="ais-SearchBox-loadingIndicator" hidden>
67+
<svg width="18" height="18" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon">
68+
<g fill="none" fillRule="evenodd">
69+
<g transform="translate(1 1)" strokeWidth="2">
70+
<circle strokeOpacity=".5" cx="18" cy="18" r="18" />
71+
<path d="M36 18c0-9.94-8.06-18-18-18">
72+
<animateTransform
73+
attributeName="transform"
74+
type="rotate"
75+
from="0 18 18"
76+
to="360 18 18"
77+
dur="1s"
78+
repeatCount="indefinite"
79+
/>
80+
</path>
81+
</g>
82+
</g>
83+
</svg>
84+
</span>
85+
</form>
86+
</div>
87+
<div class="ais-SearchBox-footer ais-footer">
88+
Footer info
89+
</div>
90+
</div>
91+
alt2: Showing the loading indicator
92+
althtml2: |
93+
<div class="ais-SearchBox">
94+
<div class="ais-SearchBox-header ais-header">
95+
Search box
96+
</div>
97+
<div class="ais-SearchBox-body ais-body">
98+
<form class="ais-SearchBox-form" novalidate>
99+
<input class="ais-SearchBox-input" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search for products" spellcheck="false" maxlength="512" type="search" value="Typing text..." />
100+
<button class="ais-SearchBox-submit" type="submit" title="Submit the search query.">
101+
<svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 40 40">
102+
<path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"></path>
103+
</svg>
104+
</button>
105+
<button class="ais-SearchBox-reset" type="reset" title="Clear the search query." hidden>
106+
<svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="10" height="10">
107+
<path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"></path>
108+
</svg>
109+
</button>
110+
<span class="ais-SearchBox-loadingIndicator">
111+
<svg width="18" height="18" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon">
112+
<g fill="none" fillRule="evenodd">
113+
<g transform="translate(1 1)" strokeWidth="2">
114+
<circle strokeOpacity=".5" cx="18" cy="18" r="18" />
115+
<path d="M36 18c0-9.94-8.06-18-18-18">
116+
<animateTransform
117+
attributeName="transform"
118+
type="rotate"
119+
from="0 18 18"
120+
to="360 18 18"
121+
dur="1s"
122+
repeatCount="indefinite"
123+
/>
124+
</path>
125+
</g>
126+
</g>
127+
</svg>
128+
</span>
47129
</form>
48130
</div>
49131
<div class="ais-SearchBox-footer ais-footer">

‎layouts/widget/single.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ <h3>Widget example</h3>
1919
<div class="code-wrapper-tabs">
2020
<button class="code-wrapper-tab selected" data-html="1">Default</button>
2121
<button class="code-wrapper-tab" data-html="2">{{ .Params.alt1 }}</button>
22+
{{ if .Params.alt2 }}<button class="code-wrapper-tab" data-html="3">{{ .Params.alt2 }}</button>{{ end }}
2223
</div>
2324
{{ end }}
2425
<div class="code-wrapper-contents">
@@ -30,6 +31,11 @@ <h3>Widget example</h3>
3031
{{ .Params.althtml1 | safeHTML }}
3132
</div>
3233
{{ end }}
34+
{{ if .Params.alt2 }}
35+
<div class="code-wrapper-content" style="display:none" data-html="3">
36+
{{ .Params.althtml2 | safeHTML }}
37+
</div>
38+
{{ end }}
3339
</div>
3440
</div>
3541

@@ -38,6 +44,7 @@ <h3>HTML output</h3>
3844
<div id="js-pre">
3945
<pre class="code-output" data-html="1"><code>{{ .Params.html }}</code></pre>
4046
{{ if .Params.althtml1 }}<pre class="code-output" style="display:none" data-html="2"><code>{{ .Params.althtml1 }}</code></pre>{{ end }}
47+
{{ if .Params.althtml2 }}<pre class="code-output" style="display:none" data-html="3"><code>{{ .Params.althtml2 }}</code></pre>{{ end }}
4148
</div>
4249

4350
<h3>Classes list</h3>

‎src/scss/themes/algolia.scss

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -439,7 +439,8 @@ div.ais-RatingMenu-link {
439439
}
440440

441441
.ais-SearchBox-submit,
442-
.ais-SearchBox-reset {
442+
.ais-SearchBox-reset,
443+
.ais-SearchBox-loadingIndicator {
443444
appearance: none;
444445
position: absolute;
445446
z-index: 1;
@@ -459,15 +460,32 @@ div.ais-RatingMenu-link {
459460
}
460461

461462
.ais-SearchBox-submitIcon,
462-
.ais-SearchBox-reseticon {
463-
width: 14px;
464-
height: 14px;
463+
.ais-SearchBox-resetIcon,
464+
.ais-SearchBox-loadingIcon {
465465
position: absolute;
466466
top: 50%;
467467
left: 50%;
468468
transform: translateX(-50%) translateY(-50%);
469+
}
469470

471+
.ais-SearchBox-submitIcon,
472+
.ais-SearchBox-resetIcon {
470473
path {
471474
fill: $east-bay;
472475
}
473476
}
477+
478+
.ais-SearchBox-submitIcon {
479+
width: 14px;
480+
height: 14px;
481+
}
482+
483+
.ais-SearchBox-resetIcon {
484+
width: 12px;
485+
height: 12px;
486+
}
487+
488+
.ais-SearchBox-loadingIcon {
489+
width: 16px;
490+
height: 16px;
491+
}

0 commit comments

Comments
 (0)