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
c39690a8
Commit
c39690a8
authored
Apr 10, 2021
by
Pooja Patel
💻
Browse files
Fixed duplicate search code
parent
5a74348b
Changes
1
Hide whitespace changes
Inline
Side-by-side
documentation/components/inputs.md
View file @
c39690a8
...
...
@@ -248,31 +248,6 @@ Refers to enabling or disabling options.
onfocusout=
"removeBlueFromSearchIcon('search-icon')"
class=
"w-52"
placeholder=
"Search for content"
>
</div>
<script>
function
addBlueToSearchIcon
(
id
)
{
let
searchIcon
=
document
.
getElementById
(
id
);
searchIcon
.
classList
.
add
(
"
text-gnome-blue-500
"
);
}
function
removeBlueFromSearchIcon
(
id
)
{
let
searchIcon
=
document
.
getElementById
(
id
);
searchIcon
.
classList
.
remove
(
"
text-gnome-blue-500
"
);
}
</script>
~~~
html
<div
id=
"search"
class=
"search"
>
<svg id="search-icon-input" class="search-input-icon feather feather-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" class="static w-50"
onfocus="addBlueToSearchIcon('search-icon-input')"
onfocusout="removeBlueFromSearchIcon('search-icon-input')"
placeholder="Search for content">
</div>
<script>
function
addBlueToSearchIcon
(
id
)
{
let
searchIcon
=
document
.
getElementById
(
id
);
...
...
@@ -298,7 +273,7 @@ Refers to enabling or disabling options.
</span>
<input type="search" id="collapsable-search" onfocus="addBlueToCollapsableSearchIcon('collapsable-search-icon')"
onfocusout="removeBlueFromCollapsableSearchIcon('collapsable-search-icon')" class="w-52"
placeholder="Search for content">
placeholder="Search for content"
style="display: none;"
>
</div>
<script>
...
...
@@ -344,6 +319,7 @@ Refers to enabling or disabling options.
</script>
<br>
~~~
html
<h3
class=
"mt-8 mb-4"
>
Collapsable Search
</h3>
<div
id=
"search"
class=
"search mr-6 mb-2"
>
<span
class=
"absolute inset-y-1 left-0 flex items-center px-1"
>
<svg
class=
"search-icon cursor-pointer"
id=
"collapsable-search-icon"
...
...
@@ -356,61 +332,37 @@ Refers to enabling or disabling options.
</span>
<input
type=
"search"
id=
"collapsable-search"
onfocus=
"addBlueToCollapsableSearchIcon('collapsable-search-icon')"
onfocusout=
"removeBlueFromCollapsableSearchIcon('collapsable-search-icon')"
class=
"w-52"
placeholder="Search for content">
placeholder=
"Search for content"
style=
"display: none;"
>
</div>
<script>
function addBlueToCollapsableSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.add("text-gnome-blue-500");
}
function removeBlueFromCollapsableSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.remove("text-gnome-blue-500");
}
function toggleSearchInputOpacity(id) {
function
toggleSearchInputDisplay
(
id
)
{
let
collapsableSearch
=
document
.
getElementById
(
id
);
if
(collapsableSearch.style.
opacity == 1) {
collapsableSearch.
disabled = true;
collapsableSearch.style.opacity = 0
;
console
.
log
(
collapsableSearch
.
style
.
display
);
if
(
collapsableSearch
.
style
.
display
===
"
block
"
)
{
hideSearchInput
(
id
)
;
}
else
{
co
llapsableSearch.disabled = false
;
collapsableSearch.style.
opacity = 1
;
co
nsole
.
log
(
"
displaying
"
)
;
collapsableSearch
.
style
.
display
=
"
block
"
;
collapsableSearch
.
focus
();
addBlueToCollapsableSearchIcon
(
id
+
"
-icon
"
);
}
}
</script>
~~~
html
<div
id=
"search"
class=
"search"
>
<svg
id=
"collapsable-search-icon"
class=
"feather feather-search search-input-icon cursor-pointer z-10"
onclick=
"toggleSearchInputOpacity('collapsable-search-input')"
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-input"
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
)
{
function
hideSearchInput
(
id
)
{
let
collapsableSearch
=
document
.
getElementById
(
id
);
if
(
collapsableSearch
.
style
.
opacity
==
1
)
{
collapsableSearch
.
disabled
=
true
;
collapsableSearch
.
style
.
opacity
=
0
;
removeBlueFromCollapsableSearchIcon
(
id
+
"
-icon
"
);
if
(
!
collapsableSearch
.
value
)
{
collapsableSearch
.
style
.
display
=
"
none
"
;
}
}
function
toggleSearchIconColor
(
id
)
{
let
searchIcon
=
document
.
getElementById
(
id
);
if
(
searchIcon
.
classList
.
contains
(
"
text-gnome-blue-500
"
))
{
removeBlueFromCollapsableSearchIcon
(
id
);
}
else
{
collapsableSearch
.
disabled
=
false
;
collapsableSearch
.
style
.
opacity
=
1
;
collapsableSearch
.
focus
();
addBlueToCollapsableSearchIcon
(
id
);
}
}
...
...
@@ -424,4 +376,4 @@ Refers to enabling or disabling options.
searchIcon
.
classList
.
remove
(
"
text-gnome-blue-500
"
);
}
</script>
~~~
~~~
\ 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