james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-05-24 00:33:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

dropdown tweaks + use dropdown instead of popover

Browse Source
This commit is contained in:
Nazar Kanaev 2021-03-28 21:38:12 +01:00
parent b3ba912566
commit 0b3d7faf9f
2 changed files with 37 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/assets/index.html
View File

@ -35,7 +35,7 @@
<span class="icon">{% inline "assorted.svg" %}</span>
</button>
<div class="flex-grow-1"></div>
<dropdown class="settings-dropdown" toggle-class="btn btn-link toolbar-item px-2" ref="menuDropdown">
<dropdown class="settings-dropdown" toggle-class="btn btn-link toolbar-item px-2" ref="menuDropdown" drop="right">
<template v-slot:button>
<span class="icon">{% inline "more-horizontal.svg" %}</span>
</template>
@ -210,20 +210,11 @@
<span class="icon" v-if="itemSelectedDetails.status=='unread'">{% inline "circle-full.svg" %}</span>
<span class="icon" v-if="itemSelectedDetails.status!='unread'">{% inline "circle.svg" %}</span>
</button>
<a class="toolbar-item" id="content-appearance" v-b-tooltip.hover.bottom="'Appearance'" tabindex="0">
<dropdown toggle-class="toolbar-item" drop="center">
<template v-slot:button>
<span class="icon">{% inline "sliders.svg" %}</span>
</a>
<button class="toolbar-item"
:class="{active: itemSelectedReadability}"
@click="getReadable(itemSelectedDetails)"
v-b-tooltip.hover.bottom="'Read Here'">
<span class="icon" :class="{'icon-loading': loading.readability}">{% inline "book-open.svg" %}</span>
</button>
<a class="toolbar-item" :href="itemSelectedDetails.link" target="_blank" v-b-tooltip.hover.bottom="'Open Link'">
<span class="icon">{% inline "external-link.svg" %}</span>
</a>
<b-popover target="content-appearance" triggers="focus" placement="bottom">
<div class="p-1" style="width: 200px;">
</template>
<div class="px-2" style="width: 200px;">
<div class="d-flex">
<label class="themepicker">
<input type="radio" name="settingsTheme" value="light" v-model="theme.name">
@ -259,7 +250,16 @@
style="font-size: 1.2rem" @click="incrFont(1)">A</button>
</div>
</div>
</b-popover>
</dropdown>
<button class="toolbar-item"
:class="{active: itemSelectedReadability}"
@click="getReadable(itemSelectedDetails)"
v-b-tooltip.hover.bottom="'Read Here'">
<span class="icon" :class="{'icon-loading': loading.readability}">{% inline "book-open.svg" %}</span>
</button>
<a class="toolbar-item" :href="itemSelectedDetails.link" target="_blank" v-b-tooltip.hover.bottom="'Open Link'">
<span class="icon">{% inline "external-link.svg" %}</span>
</a>
<div class="flex-grow-1"></div>
<button class="toolbar-item" @click="itemSelected=null" v-b-tooltip.hover.bottom="'Close Article'">
<span class="icon">{% inline "x.svg" %}</span>
@ -322,7 +322,7 @@
{{ folder.title }}
</div>
<div class="flex-shrink-0" v-if="folder.id">
<dropdown class="settings-dropdown" toggle-class="btn btn-link text-decoration-none">
<dropdown class="settings-dropdown" toggle-class="btn btn-link text-decoration-none" drop="right">
<template v-slot:button>
<span class="icon">{% inline "more-vertical.svg" %}</span>
</template>
@ -348,7 +348,7 @@
{% inline "alert-circle.svg" %}
</span>
<div class="flex-shrink-0">
<dropdown class="settings-dropdown" toggle-class="btn btn-link text-decoration-none">
<dropdown class="settings-dropdown" toggle-class="btn btn-link text-decoration-none" drop="right">
<template v-slot:button>
<span class="icon">{% inline "more-vertical.svg" %}</span>
</template>

28
src/assets/javascripts/app.js
View File

@ -84,22 +84,21 @@ Vue.component('drag', {
})
Vue.component('dropdown', {
props: ['class', 'toggle-class', 'ref'],
props: ['class', 'toggle-class', 'ref', 'drop'],
data: function() {
return {open: false, openClass: ''}
return {open: false}
},
template: `
<div class="dropdown" :class="$attrs.class">
<button ref="btn" @click="toggle" :class="btnToggleClass"
class="dropdown-toggle-no-caret dropdown-toggle"><slot name="button"></slot></button>
<div ref="menu" class="dropdown-menu" :class="openClass"><slot v-if="open"></slot></div>
<button ref="btn" @click="toggle" :class="btnToggleClass"><slot name="button"></slot></button>
<div ref="menu" class="dropdown-menu" :class="{show: open}"><slot v-if="open"></slot></div>
</div>
`,
computed: {
btnToggleClass: function() {
var c = this.$props.toggleClass || ''
c += ' dropdown-toggle dropdown-toggle-no-caret'
c += this.open ? ' open' : ''
c += this.open ? ' show' : ''
return c.trim()
}
},
@ -114,15 +113,24 @@ Vue.component('dropdown', {
},
show: function(e) {
this.open = true
this.openClass = ' show'
this.$refs.menu.style.right = '0'
this.$refs.menu.style.top = this.$refs.btn.offsetHeight + 'px'
var drop = this.$props.drop
if (drop === 'right') {
this.$refs.menu.style.left = 'auto'
this.$refs.menu.style.top = (this.$refs.btn.offsetHeight) + 'px'
this.$refs.menu.style.right = '0'
} else if (drop === 'center') {
this.$nextTick(function() {
var btnWidth = this.$refs.btn.getBoundingClientRect().width
var menuWidth = this.$refs.menu.getBoundingClientRect().width
this.$refs.menu.style.left = '-' + ((menuWidth - btnWidth) / 2) + 'px'
}.bind(this))
}
document.addEventListener('click', this.clickHandler)
},
hide: function() {
this.open = false
this.openClass = ''
document.removeEventListener('click', this.clickHandler)
},
clickHandler: function(e) {