mirror of
https://github.com/kiwix/kiwix-desktop.git
synced 2025-09-22 03:26:05 -04:00
97 lines
5.0 KiB
HTML
97 lines
5.0 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<script src="qrc:///js/vue.js"></script>
|
|
<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
|
|
<script src="qrc:///js/_contentManager.js"></script>
|
|
<script src="qrc:///js/tools.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="qrc:///css/_contentManager.css"/>
|
|
</head>
|
|
<body onload="init()">
|
|
<div id="app">
|
|
<div id="searchBar">
|
|
<form>
|
|
<input id="searchInput" type="text" :placeholder="gt('search-files')" oninput="setSearch(this.value)"/>
|
|
</form>
|
|
</div>
|
|
<div id="bookTable">
|
|
<div class="header">
|
|
<span class="tablecell cell0"></span>
|
|
<span v-on:click="sortBookBy('title')" :class="{ sortableBold: isActive('title') }" class="tablecell cell1 sortable"><i :class="{ arrowDown: isUpOrDown('title', true), arrowUp: isUpOrDown('title', false) }"></i> {{ gt("title") }}</span>
|
|
<span v-on:click="sortBookBy('size')" :class="{ sortableBold: isActive('size') }" class="tablecell cell2 sortable"><i :class="{ arrowDown: isUpOrDown('size', true), arrowUp: isUpOrDown('size', false) }"></i> {{ gt("size") }} </span>
|
|
<span v-on:click="sortBookBy('date')" :class="{ sortableBold: isActive('date') }" class="tablecell cell3 sortable"><i :class="{ arrowDown: isUpOrDown('date', true), arrowUp: isUpOrDown('date', false) }"></i> {{ gt("date") }} </span>
|
|
<span class="tablecell cell4"> {{ gt("content-type") }} </span>
|
|
<span class="tablecell cell5 tablerow">
|
|
<button v-on:click="resetSort()"> {{ gt("reset-sort") }} </button>
|
|
</span>
|
|
</div>
|
|
<div id="load-icon" class="loader"></div>
|
|
<div id="bookList" onscroll=scrolled(this)>
|
|
<div id="menu" class="menu">
|
|
<ul class="menu-options">
|
|
<li v-on:click="openBook(getBookFromMousePosition())" class="menu-option local-option">{{ gt("open") }}</li>
|
|
<li v-on:click="eraseBook(getBookFromMousePosition())" class="menu-option local-option">{{ gt("delete") }}</li>
|
|
<li v-on:click="downloadBook(getBookFromMousePosition())" class="menu-option download-option">{{ gt("download") }}</li>
|
|
<li v-on:click="resumeBook(getBookFromMousePosition())" class="menu-option resume-option">{{ gt("resume") }}</li>
|
|
<li v-on:click="pauseBook(getBookFromMousePosition())" class="menu-option pause-option">{{ gt("pause") }}</li>
|
|
<li v-on:click="cancelBook(getBookFromMousePosition())" class="menu-option cancel-option">{{ gt("cancel") }}</li>
|
|
</ul>
|
|
</div>
|
|
<details v-for="book in displayedBooks(books, displayedBooksNb)" class="book">
|
|
<summary v-bind:id="book.id" class="tablerow book-summary">
|
|
<span class="tablecell cell0">
|
|
<img v-if="book.faviconUrl" v-bind:src="'https://' + book.faviconUrl" />
|
|
<img v-else-if="book.faviconMimeType" v-bind:src="'zim://' + book.id + '.favicon.meta'" />
|
|
</span>
|
|
<span class="tablecell cell1">
|
|
{{ book.title }}
|
|
</span>
|
|
<span class="tablecell cell2">
|
|
{{ niceBytes(book.size) }}
|
|
</span>
|
|
<span class="tablecell cell3">
|
|
{{ book.date }}
|
|
</span>
|
|
<span class="tablecell cell4">
|
|
{{ book.tags }}
|
|
</span>
|
|
<span class="tablecell cell5">
|
|
<template v-if="downloads[book.id]" class="line">
|
|
<span>
|
|
{{ niceBytes(downloads[book.id].completedLength) }} / {{ niceBytes(downloads[book.id].totalLength) }}
|
|
</span>
|
|
</template>
|
|
<button v-if="book.path" v-on:click="openBook(book)" class="line">Open</button>
|
|
<button v-if="!book.path && !downloads[book.id]" v-on:click="downloadBook(book)" class="">Download</button>
|
|
|
|
<!-- round download progress bar -->
|
|
<template v-if="downloads[book.id]" class="line">
|
|
<div v-on:click.stop.prevent="pauseResumeBook(book)" v-bind:style="{'--download': downloads[book.id].completedLengthInDegree}" class="circle-wrap">
|
|
<div class="circle">
|
|
<div class="mask full">
|
|
<div class="fill"></div>
|
|
</div>
|
|
<div class="mask half">
|
|
<div class="fill"></div>
|
|
</div>
|
|
<div class="inside-circle">
|
|
<img v-if="downloads[book.id] && downloads[book.id].status == 'active'" src="qrc:///icons/pause-button.png">
|
|
<img v-if="downloads[book.id] && downloads[book.id].status == 'paused'" src="qrc:///icons/play-button.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<!-- end -->
|
|
|
|
<img class="cancel-button" v-if="downloads[book.id]" v-on:click.stop.prevent="cancelBook(book)" src="qrc:///icons/cancel-button.png">
|
|
</span>
|
|
</summary>
|
|
<p class="content">
|
|
{{ book.description }}
|
|
</p>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body></html>
|