move loading indicator to bottom

This commit is contained in:
Nazar Kanaev 2020-09-09 21:12:16 +01:00
parent de68096ec7
commit c72c0678a9
2 changed files with 25 additions and 26 deletions

View File

@ -12,32 +12,27 @@
<!-- feed list --> <!-- feed list -->
<div class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0" :style="{width: feedListWidth+'px'}"> <div class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0" :style="{width: feedListWidth+'px'}">
<drag :width="feedListWidth" @resize="resizeFeedList"></drag> <drag :width="feedListWidth" @resize="resizeFeedList"></drag>
<div class="p-2 toolbar d-flex align-items-center" style="padding-bottom: 1px;"> <div class="p-2 toolbar d-flex align-items-center">
<div class="icon mx-2" :class="{'icon-loading': loading.feeds}">{% inline "anchor.svg" %}</div> <div class="icon mx-2">{% inline "anchor.svg" %}</div>
<div class="text-truncate cursor-default noselect">
<span v-if="loading.feeds">Refreshing ({{loading.feeds}} left)</span>
</div>
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>
<div class="noselect" :class="{'d-none': loading.feeds}"> <button class="toolbar-item"
<button class="toolbar-item" :class="{active: filterSelected == 'unread'}"
:class="{active: filterSelected == 'unread'}" v-b-tooltip.hover.bottom="'Unread'"
v-b-tooltip.hover.bottom="'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'"
v-b-tooltip.hover.bottom="'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'"
v-b-tooltip.hover.bottom="'All'" @click="filterSelected = ''">
@click="filterSelected = ''"> <span class="icon">{% inline "assorted.svg" %}</span>
<span class="icon">{% inline "assorted.svg" %}</span> </button>
</button>
</div>
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>
<b-dropdown <b-dropdown
right no-caret lazy variant="link" right no-caret lazy variant="link"
@ -133,6 +128,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="p-2 toolbar d-flex align-items-center border-top flex-shrink-0" v-if="loading.feeds">
<span class="icon loading mx-2"></span>
<span class="text-truncate cursor-default noselect">Refreshing ({{loading.feeds}} left)</span>
</div>
</div> </div>
<!-- item list --> <!-- item list -->
<div class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0" :style="{width: itemListWidth+'px'}"> <div class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0" :style="{width: itemListWidth+'px'}">

View File

@ -153,7 +153,7 @@ var vm = new Vue({
'settings': 'create', 'settings': 'create',
'loading': { 'loading': {
'feeds': false, 'feeds': 0,
'newfeed': false, 'newfeed': false,
'items': false, 'items': false,
'readability': false, 'readability': false,