Skip to content
Toggle navigation
Projects
Groups
Snippets
Help
Письменов Дмитрий Иванович
/
yourroomads
This project
Loading...
Sign in
Toggle navigation
Go to a project
Project
Repository
Settings
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit f3b2c8fb
authored
Dec 18, 2019
by
Jonathan Reinink
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Improve dropdown (add auto closing)
1 parent
3992b27e
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
9 additions
and
13 deletions
resources/js/Shared/Dropdown.vue
resources/js/Shared/SearchFilter.vue
resources/js/Shared/Dropdown.vue
View file @
f3b2c8f
<
template
>
<button
type=
"button"
@
click=
"
toggl
e"
>
<button
type=
"button"
@
click=
"
show = tru
e"
>
<slot
/>
<portal
v-if=
"show"
to=
"dropdown"
>
<div>
<div
style=
"position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99998; background: black; opacity: .2"
@
click=
"
toggl
e"
/>
<div
ref=
"dropdown"
style=
"position: absolute; z-index: 99999;"
@
click
.
stop
>
<div
style=
"position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99998; background: black; opacity: .2"
@
click=
"
show = fals
e"
/>
<div
ref=
"dropdown"
style=
"position: absolute; z-index: 99999;"
@
click
.
stop
=
"show = autoClose ? false : true"
>
<slot
name=
"dropdown"
/>
</div>
</div>
...
...
@@ -25,6 +25,10 @@ export default {
type
:
String
,
default
:
'scrollParent'
,
},
autoClose
:
{
type
:
Boolean
,
default
:
true
,
},
},
data
()
{
return
{
...
...
@@ -50,17 +54,9 @@ export default {
mounted
()
{
document
.
addEventListener
(
'keydown'
,
(
e
)
=>
{
if
(
e
.
keyCode
===
27
)
{
this
.
close
()
this
.
show
=
false
}
})
},
methods
:
{
close
()
{
this
.
show
=
false
},
toggle
()
{
this
.
show
=
!
this
.
show
},
},
}
</
script
>
resources/js/Shared/SearchFilter.vue
View file @
f3b2c8f
<
template
>
<div
class=
"flex items-center"
>
<div
class=
"flex w-full bg-white shadow rounded"
>
<dropdown
class=
"px-4 md:px-6 rounded-l border-r hover:bg-grey-lightest focus:border-white focus:shadow-outline focus:z-10"
placement=
"bottom-start"
>
<dropdown
:auto-close=
"false"
class=
"px-4 md:px-6 rounded-l border-r hover:bg-grey-lightest focus:border-white focus:shadow-outline focus:z-10"
placement=
"bottom-start"
>
<div
class=
"flex items-baseline"
>
<span
class=
"text-grey-darkest hidden md:inline"
>
Filter
</span>
<svg
class=
"w-2 h-2 fill-grey-darker md:ml-2"
xmlns=
"http://www.w3.org/2000/svg"
viewBox=
"0 0 961.243 599.998"
>
...
...
Write
Preview
Markdown
is supported
Attach a file
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 post a comment