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

ditch v-b-tooltip

Browse Source
This commit is contained in:
Nazar Kanaev 2021-03-29 11:09:28 +01:00
parent a9b450db03
commit 430f300140
2 changed files with 37 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/assets/index.html
View File

@ -18,24 +18,24 @@
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>
<button class="toolbar-item" <button class="toolbar-item"
:class="{active: filterSelected == 'unread'}" :class="{active: filterSelected == 'unread'}"
v-b-tooltip.hover.bottom="'Unread'" title="Unread"
@click="filterSelected = 'unread'"> @click="filterSelected = 'unread'">
<span class="icon">{% inline "circle-full.svg" %}</span> <span class="icon">{% inline "circle-full.svg" %}</span>
</button> </button>
<button class="toolbar-item" <button class="toolbar-item"
:class="{active: filterSelected == 'starred'}" :class="{active: filterSelected == 'starred'}"
v-b-tooltip.hover.bottom="'Starred'" title="Starred"
@click="filterSelected = 'starred'"> @click="filterSelected = 'starred'">
<span class="icon">{% inline "star-full.svg" %}</span> <span class="icon">{% inline "star-full.svg" %}</span>
</button> </button>
<button class="toolbar-item" <button class="toolbar-item"
:class="{active: filterSelected == ''}" :class="{active: filterSelected == ''}"
v-b-tooltip.hover.bottom="'All'" title="All"
@click="filterSelected = ''"> @click="filterSelected = ''">
<span class="icon">{% inline "assorted.svg" %}</span> <span class="icon">{% inline "assorted.svg" %}</span>
</button> </button>
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>
<dropdown class="settings-dropdown" toggle-class="btn btn-link toolbar-item px-2" ref="menuDropdown" drop="right"> <dropdown class="settings-dropdown" toggle-class="btn btn-link toolbar-item px-2" ref="menuDropdown" drop="right" title="Settings">
<template v-slot:button> <template v-slot:button>
<span class="icon">{% inline "more-horizontal.svg" %}</span> <span class="icon">{% inline "more-horizontal.svg" %}</span>
</template> </template>
@ -157,7 +157,7 @@
<div class="px-2 toolbar d-flex align-items-center"> <div class="px-2 toolbar d-flex align-items-center">
<button class="toolbar-item mr-2 d-block d-md-none" <button class="toolbar-item mr-2 d-block d-md-none"
@click="feedSelected = null" @click="feedSelected = null"
v-b-tooltip.hover.bottom="'Show Feeds'"> title="Show Feeds">
<span class="icon">{% inline "chevron-left.svg" %}</span> <span class="icon">{% inline "chevron-left.svg" %}</span>
</button> </button>
<div class="input-icon flex-grow-1"> <div class="input-icon flex-grow-1">
@ -168,7 +168,7 @@
<button class="toolbar-item ml-2" <button class="toolbar-item ml-2"
@click="markItemsRead()" @click="markItemsRead()"
v-if="filterSelected == 'unread'" v-if="filterSelected == 'unread'"
v-b-tooltip.hover.bottom="'Mark All Read'"> title="Mark All Read">
<span class="icon">{% inline "check.svg" %}</span> <span class="icon">{% inline "check.svg" %}</span>
</button> </button>
</div> </div>
@ -198,17 +198,17 @@
<div class="toolbar px-2 d-flex align-items-center" v-if="itemSelected"> <div class="toolbar px-2 d-flex align-items-center" v-if="itemSelected">
<button class="toolbar-item" <button class="toolbar-item"
@click="toggleItemStarred(itemSelectedDetails)" @click="toggleItemStarred(itemSelectedDetails)"
v-b-tooltip.hover.bottom="'Mark Starred'"> title="Mark Starred">
<span class="icon" v-if="itemSelectedDetails.status=='starred'" >{% inline "star-full.svg" %}</span> <span class="icon" v-if="itemSelectedDetails.status=='starred'" >{% inline "star-full.svg" %}</span>
<span class="icon" v-else-if="itemSelectedDetails.status!='starred'" >{% inline "star.svg" %}</span> <span class="icon" v-else-if="itemSelectedDetails.status!='starred'" >{% inline "star.svg" %}</span>
</button> </button>
<button class="toolbar-item" <button class="toolbar-item"
v-b-tooltip.hover.bottom="'Mark Unread'" title="Mark Unread"
@click="toggleItemRead(itemSelectedDetails)"> @click="toggleItemRead(itemSelectedDetails)">
<span class="icon" v-if="itemSelectedDetails.status=='unread'">{% inline "circle-full.svg" %}</span> <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> <span class="icon" v-if="itemSelectedDetails.status!='unread'">{% inline "circle.svg" %}</span>
</button> </button>
<dropdown class="settings-dropdown" toggle-class="toolbar-item px-2" drop="center"> <dropdown class="settings-dropdown" toggle-class="toolbar-item px-2" drop="center" title="Appearance">
<template v-slot:button> <template v-slot:button>
<span class="icon">{% inline "sliders.svg" %}</span> <span class="icon">{% inline "sliders.svg" %}</span>
</template> </template>
@ -234,14 +234,14 @@
<button class="toolbar-item" <button class="toolbar-item"
:class="{active: itemSelectedReadability}" :class="{active: itemSelectedReadability}"
@click="getReadable(itemSelectedDetails)" @click="getReadable(itemSelectedDetails)"
v-b-tooltip.hover.bottom="'Read Here'"> title="Read Here">
<span class="icon" :class="{'icon-loading': loading.readability}">{% inline "book-open.svg" %}</span> <span class="icon" :class="{'icon-loading': loading.readability}">{% inline "book-open.svg" %}</span>
</button> </button>
<a class="toolbar-item" :href="itemSelectedDetails.link" target="_blank" v-b-tooltip.hover.bottom="'Open Link'"> <a class="toolbar-item" :href="itemSelectedDetails.link" target="_blank" title="Open Link">
<span class="icon">{% inline "external-link.svg" %}</span> <span class="icon">{% inline "external-link.svg" %}</span>
</a> </a>
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>
<button class="toolbar-item" @click="itemSelected=null" v-b-tooltip.hover.bottom="'Close Article'"> <button class="toolbar-item" @click="itemSelected=null" title="Close Article">
<span class="icon">{% inline "x.svg" %}</span> <span class="icon">{% inline "x.svg" %}</span>
</button> </button>
</div> </div>
@ -322,8 +322,8 @@
<span class="icon mr-2" v-else><img v-lazy="'./api/feeds/'+feed.id+'/icon'" alt=""></span> <span class="icon mr-2" v-else><img v-lazy="'./api/feeds/'+feed.id+'/icon'" alt=""></span>
{{ feed.title }} {{ feed.title }}
</div> </div>
<span class="icon flex-shrink-0 mx-2" <span class="icon flex-shrink-0 mx-2 info"
v-b-tooltip.hover.top="feed_errors[feed.id]" :data-info="feed_errors[feed.id]"
v-if="feed_errors[feed.id]"> v-if="feed_errors[feed.id]">
{% inline "alert-circle.svg" %} {% inline "alert-circle.svg" %}
</span> </span>

23
src/assets/stylesheets/app.css
View File

@ -140,6 +140,29 @@ select.form-control:not([multiple]):not([size]) {
height: .6rem; height: .6rem;
} }
.info {
position: relative;
}
.info::after {
visibility: hidden;
position: absolute;
right: -0.5rem;
left: auto;
bottom: 1.5rem;
content: attr(data-info);
color: #fff;
background-color: rgba(0, 0, 0, 0.8);
padding: 0.5rem;
border-radius: 3px;
min-width: 16rem;
z-index: 1000;
}
.info:hover::after {
visibility: visible;
}
.feed-icon { .feed-icon {
width: 16px; width: 16px;
height: 16px; height: 16px;