Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Teams
Engagement
Websites
GNOME HIG CSS Library
Commits
9910f070
Commit
9910f070
authored
Apr 02, 2021
by
Pranjay Pathak
Browse files
added collapsable-search in jekyll documentation
parent
b747ec7b
Changes
2
Hide whitespace changes
Inline
Side-by-side
documentation/components/inputs.md
View file @
9910f070
...
...
@@ -260,53 +260,84 @@ Refers to enabling or disabling options.
}
</script>
~~~
### Collapsable search
### CollapsableSearch

~~~
html
<label
for=
"search"
class=
"mt-8"
>
Collapsed search
</label>
<div
id=
"search"
class=
"search mr-6 mb-8"
>
<input
type=
"search"
id=
"collapsable-search"
onfocus=
"addBlueToCollapsableSearchIcon('collapsable-search-icon')"
onfocusout=
"removeBlueFromCollapsableSearchIcon('collapsable-search-icon')"
class=
"w-52"
placeholder=
"Search for content"
>
<svg
class=
"search-icon cursor-pointer ml-2"
id=
"collapsable-search-icon"
onclick=
"toggleSearchInputDisplay('collapsable-search')"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
fill=
"none"
stroke=
"currentColor"
stroke-width=
"2"
stroke-linecap=
"round"
stroke-linejoin=
"round"
class=
"feather feather-search"
>
<div
id=
"search"
class=
"search"
>
<svg id="collapse-search-icon" class="feather feather-search search-icon cursor-pointer z-10"
onclick="toggleSearchInputOpacity('collapsable-search')"
xmlns="http://www.w3.org/2000/svg"
width="24" height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<circle
cx=
"11"
cy=
"11"
r=
"8"
></circle>
<line
x1=
"21"
y1=
"21"
x2=
"16.65"
y2=
"16.65"
></line>
</svg>
<input type="search" id="collapsable-search" class="static w-50"
disabled="true"
onfocus="addBlueToCollapsableSearchIcon('collapsable-search-icon')"
onfocusout="removeBlueFromCollapsableSearchIcon('collapsable-search-icon')"
placeholder="Search for content">
</div>
<script>
function
toggleSearchInput
Displa
y
(
id
)
{
function toggleSearchInput
Opacit
y(id) {
let collapsableSearch = document.getElementById(id);
console
.
log
(
collapsableSearch
.
style
.
display
);
if
(
collapsableSearch
.
style
.
display
===
"
block
"
)
{
hideSearchInput
(
id
)
;
if
(collapsableSearch.style.
opacity == 1) {
collapsableSearch.
disabled = true;
collapsableSearch.style.opacity = 0
;
} else {
co
nsole
.
log
(
"
displaying
"
)
;
collapsableSearch
.
style
.
display
=
"
block
"
;
co
llapsableSearch.disabled = false
;
collapsableSearch.style.
opacity = 1
;
collapsableSearch.focus();
addBlueToCollapsableSearchIcon
(
id
+
"
-icon
"
);
}
}
function
hideSearchInput
(
id
)
{
let
collapsableSearch
=
document
.
getElementById
(
id
);
removeBlueFromCollapsableSearchIcon
(
id
+
"
-icon
"
);
if
(
!
collapsableSearch
.
value
)
{
collapsableSearch
.
style
.
display
=
"
none
"
;
}
function addBlueToCollapsableSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.add("text-gnome-blue-500");
}
function
togg
leSearchIcon
Color
(
id
)
{
function
removeBlueFromCollapsab
leSearchIcon(id) {
let searchIcon = document.getElementById(id);
if
(
searchIcon
.
classList
.
contains
(
"
text-gnome-blue-500
"
))
{
removeBlueFromCollapsableSearchIcon
(
id
);
searchIcon.classList.remove("text-gnome-blue-500");
}
</script>
~~~
html
<div
id=
"search"
class=
"search"
>
<svg
id=
"collapse-search-icon"
class=
"feather feather-search search-icon cursor-pointer z-10"
onclick=
"toggleSearchInputOpacity('collapsable-search')"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
fill=
"none"
stroke=
"currentColor"
stroke-width=
"2"
stroke-linecap=
"round"
stroke-linejoin=
"round"
>
<circle
cx=
"11"
cy=
"11"
r=
"8"
></circle>
<line
x1=
"21"
y1=
"21"
x2=
"16.65"
y2=
"16.65"
></line>
</svg>
<input
type=
"search"
id=
"collapsable-search"
class=
"static w-50"
disabled=
"true"
onfocus=
"addBlueToCollapsableSearchIcon('collapsable-search-icon')"
onfocusout=
"removeBlueFromCollapsableSearchIcon('collapsable-search-icon')"
placeholder=
"Search for content"
>
</div>
<script>
function
toggleSearchInputOpacity
(
id
)
{
let
collapsableSearch
=
document
.
getElementById
(
id
);
if
(
collapsableSearch
.
style
.
opacity
==
1
)
{
collapsableSearch
.
disabled
=
true
;
collapsableSearch
.
style
.
opacity
=
0
;
}
else
{
addBlueToCollapsableSearchIcon
(
id
);
collapsableSearch
.
disabled
=
false
;
collapsableSearch
.
style
.
opacity
=
1
;
collapsableSearch
.
focus
();
}
}
...
...
src/components/input.pcss
View file @
9910f070
...
...
@@ -67,5 +67,5 @@ input[type=search] {
}
#collapsable-search {
@apply
hidden
;
@apply
opacity-0 transition-opacity duration-300
;
}
\ No newline at end of file
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment