mirror of
https://github.com/nkanaev/yarr.git
synced 2025-05-24 00:33:14 +00:00
241 lines
14 KiB
HTML
241 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>YARR</title>
|
|
<link rel="stylesheet" href="./static/stylesheets/bootstrap.min.css">
|
|
<link rel="stylesheet" href="./static/stylesheets/app.css">
|
|
<link rel="icon shortcut" href="./static/images/anchor.png">
|
|
</head>
|
|
<body>
|
|
<div class="wrapper d-flex vh-100" id="app" v-cloak>
|
|
<div class="vh-100 overflow-auto border-right flex-shrink-0" style="width: 300px">
|
|
<div class="p-2">
|
|
<div class="mb-5">
|
|
<label class="nav-select">
|
|
<input type="radio" name="filter" value="" v-model="filterSelected">
|
|
<div class="menu-item d-flex align-items-center w-100">
|
|
<img src="./static/images/circle-full.svg" alt="" class="nav-icon">
|
|
<span class="flex-fill text-left text-truncate">All</span>
|
|
<span class="counter text-right"></span>
|
|
</div>
|
|
</label>
|
|
<label class="nav-select">
|
|
<input type="radio" name="filter" value="unread" v-model="filterSelected">
|
|
<div class="menu-item d-flex align-items-center w-100">
|
|
<img src="./static/images/circle.svg" alt="" class="nav-icon">
|
|
<span class="flex-fill text-left text-truncate">Unread</span>
|
|
<span class="counter text-right"></span>
|
|
</div>
|
|
</label>
|
|
<label class="nav-select">
|
|
<input type="radio" name="filter" value="starred" v-model="filterSelected">
|
|
<div class="menu-item d-flex align-items-center w-100">
|
|
<img src="./static/images/star.svg" alt="" class="nav-icon">
|
|
<span class="flex-fill text-left text-truncate">Starred</span>
|
|
<span class="counter text-right"></span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<label class="nav-select">
|
|
<input type="radio" name="feed" :value="null" v-model="feedSelected">
|
|
<div class="menu-item d-flex align-items-center w-100">
|
|
<img src="./static/images/layers.svg" alt="" class="nav-icon">
|
|
<span class="flex-fill text-left text-truncate">All Feeds</span>
|
|
<span class="counter text-right"></span>
|
|
</div>
|
|
</label>
|
|
<div v-for="folder in foldersWithFeeds">
|
|
<label class="nav-select mt-1">
|
|
<input type="radio" name="feed" :value="'folder:'+folder.id" v-model="feedSelected">
|
|
<div class="menu-item d-flex align-items-center w-100" v-if="folder.id">
|
|
<img src="./static/images/chevron-right.svg"
|
|
class="nav-icon"
|
|
:class="{expanded: folder.is_expanded}"
|
|
@click.prevent="toggleFolderExpanded(folder)">
|
|
<span class="flex-fill text-left text-truncate">{{ folder.title }}</span>
|
|
<span class="counter text-right"></span>
|
|
</div>
|
|
</label>
|
|
<div v-show="!folder.id || folder.is_expanded" class="mt-1" :class="{'pl-3': folder.id}">
|
|
<label class="nav-select"
|
|
v-for="feed in folder.feeds">
|
|
<input type="radio" name="feed" :value="'feed:'+feed.id" v-model="feedSelected">
|
|
<div class="menu-item d-flex align-items-center w-100">
|
|
<img src="./static/images/rss.svg" alt="" class="nav-icon">
|
|
<span class="flex-fill text-left text-truncate">{{ feed.title }}</span>
|
|
<span class="counter text-right"></span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="vh-100 d-flex flex-column border-right flex-shrink-0" style="width: 300px">
|
|
<div class="p-2 border-bottom" v-if="filterSelected != 'starred'">
|
|
<button class="btn btn-outline-secondary p-0" @click="markItemsRead()">
|
|
<img src="./static/images/check.svg" alt="" style="width: 20px; height: 20px;">
|
|
</button>
|
|
</div>
|
|
<div class="p-2 overflow-auto">
|
|
<label v-for="item in items" :key="item.id"
|
|
class="nav-select mb-1"
|
|
:class="{'text-muted' : filterSelected=='all' && item.status=='read',
|
|
'text-primary': filterSelected=='all' && item.status=='starred'}">
|
|
<input type="radio" name="item" :value="item.id" v-model="itemSelected">
|
|
<div class="menu-item p-2">
|
|
<div class="d-flex flex-column">
|
|
<div style="line-height: 1" class="d-flex text-muted">
|
|
<small class="flex-fill text-truncate mr-1">{{feedsById[item.feed_id].title}}</small>
|
|
<small class="flex-shrink-0">{{formatDate(item.date)}}</small>
|
|
</div>
|
|
<span>{{item.title}}</span>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="vh-100 d-flex flex-column w-100">
|
|
<div class="p-2 d-flex">
|
|
<div class="flex-grow-1">
|
|
<div v-if="itemSelected">
|
|
<button class="btn btn-link p-0" style="line-height: 1" @click="toggleItemStarred(itemSelectedDetails)">
|
|
<img v-if="itemSelectedDetails.status=='starred'" src="./static/images/star-full.svg" alt="" style="width: 20px; height: 20px;">
|
|
<img v-else-if="itemSelectedDetails.status!='starred'" src="./static/images/star.svg" alt="" style="width: 20px; height: 20px;">
|
|
</button>
|
|
<button class="btn btn-link p-0"
|
|
style="line-height: 1"
|
|
:disabled="itemSelectedDetails.status=='starred'"
|
|
@click="toggleItemRead(itemSelectedDetails)">
|
|
<img v-if="itemSelectedDetails.status=='unread'" src="./static/images/circle-full.svg" alt="" style="width: 20px; height: 20px;">
|
|
<img v-if="itemSelectedDetails.status!='unread'" src="./static/images/circle.svg" alt="" style="width: 20px; height: 20px;">
|
|
</button>
|
|
<a class="btn btn-link p-0" :href="itemSelectedDetails.link" target="_blank" style="line-height: 1">
|
|
<img src="./static/images/external-link.svg" alt="" style="width: 20px; height: 20px;">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-link p-0" v-b-modal.settings-modal style="line-height: 1">
|
|
<img src="./static/images/settings.svg" alt="" style="width: 20px; height: 20px;">
|
|
</button>
|
|
</div>
|
|
<div v-if="itemSelected" class="px-3 pt-3 pb-5 border-top overflow-auto">
|
|
<h3>{{itemSelectedDetails.title}}</h3>
|
|
<div class="text-muted">
|
|
<div>{{ feedsById[itemSelectedDetails.feed_id].title }}</div>
|
|
<time>{{ formatDate(itemSelectedDetails.date) }}</time>
|
|
</div>
|
|
<hr>
|
|
<div class="content">
|
|
<div v-html="itemSelectedDetails.content" v-if="itemSelectedDetails.content"></div>
|
|
<div v-html="itemSelectedDetails.description" v-else-if="itemSelectedDetails.description"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<b-modal id="settings-modal" hide-header hide-footer lazy>
|
|
<ul class="nav nav-tabs mx-n3 px-3 mb-3 mt-n3 pt-2 bg-light rounded-top">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" :class="{active: settings=='create'}" @click.prevent="settings='create'">
|
|
<img src="./static/images/plus-square.svg" alt="" class="tab-icon">
|
|
New Feed
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" :class="{active: settings=='manage'}" @click.prevent="settings='manage'">
|
|
<img src="./static/images/list.svg" alt="" class="tab-icon">
|
|
Manage Feeds
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" :class="{active: settings=='import'}" @click.prevent="settings='import'">
|
|
<img src="./static/images/upload.svg" alt="" class="tab-icon">
|
|
Import/Export
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div v-if="settings=='create'">
|
|
<form action="" @submit.prevent="createFeed(event)">
|
|
<label for="feed-url">URL</label>
|
|
<input id="feed-url" name="url" type="url" class="form-control" required autocomplete="off">
|
|
<label for="feed-folder" class="mt-3">Folder</label>
|
|
<select class="form-control" id="feed-folder" name="folder_id">
|
|
<option value=""></option>
|
|
<option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option>
|
|
</select>
|
|
<button class="btn btn-block btn-default mt-3" :class="{loading: loading.newfeed}" type="submit">Add</button>
|
|
</form>
|
|
</div>
|
|
<div v-else-if="settings=='manage'">
|
|
<div v-for="folder in foldersWithFeeds" class="mb-4" :key="folder.id">
|
|
<div class="d-flex align-items-center">
|
|
<div class="w-100" v-if="folder.id"><b>{{ folder.title }}</b></div>
|
|
<div class="flex-shrink-0" v-if="folder.id">
|
|
<b-dropdown right no-caret lazy="true" variant="link" class="settings-dropdown" toggle-class="text-decoration-none">
|
|
<template v-slot:button-content>
|
|
<img src="./static/images/more-vertical.svg">
|
|
</template>
|
|
<b-dropdown-item @click.prevent="renameFolder(folder)">Rename</b-dropdown-item>
|
|
<b-dropdown-divider></b-dropdown-divider>
|
|
<b-dropdown-item class="dropdown-danger"
|
|
@click.prevent="deleteFolder(folder)">
|
|
Delete
|
|
</b-dropdown-item>
|
|
</b-dropdown>
|
|
</div>
|
|
</div>
|
|
<div v-for="feed in folder.feeds" class="d-flex align-items-center" :key="feed.id">
|
|
<div class="w-100">
|
|
{{ feed.title }}
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<b-dropdown right no-caret lazy="true" variant="link" class="settings-dropdown" toggle-class="text-decoration-none">
|
|
<template v-slot:button-content>
|
|
<img src="./static/images/more-vertical.svg">
|
|
</template>
|
|
<b-dropdown-item @click.prevent="renameFeed(feed)">Rename</b-dropdown-item>
|
|
<b-dropdown-divider v-if="folders.length"></b-dropdown-divider>
|
|
<b-dropdown-header v-if="folders.length">Move to...</b-dropdown-header>
|
|
<b-dropdown-item
|
|
v-if="folder.id != feed.folder_id"
|
|
v-for="folder in folders"
|
|
@click.prevent="moveFeed(feed, folder)">
|
|
{{ folder.title }}
|
|
</b-dropdown-item>
|
|
<b-dropdown-item
|
|
@click.prevent="moveFeed(feed, null)" v-if="feed.folder_id">
|
|
Uncategorized
|
|
</b-dropdown-item>
|
|
<b-dropdown-divider></b-dropdown-divider>
|
|
<b-dropdown-item class="dropdown-danger"
|
|
@click.prevent="deleteFeed(feed)">
|
|
Delete
|
|
</b-dropdown-item>
|
|
</b-dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-5">
|
|
<form action="" @submit.prevent="createFolder(event)">
|
|
<label for="settings-new-folder">New Folder</label>
|
|
<div class="input-group">
|
|
<input id="settings-new-folder" type="text" class="form-control" name="title" required autocomplete="off">
|
|
<div class="input-group-append">
|
|
<button class="btn btn-default" type="submit">Add</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="settings=='import'">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="./static/javascripts/vue.min.js"></script>
|
|
<script src="./static/javascripts/popper.min.js"></script>
|
|
<!-- <script src="./static/javascripts/bootstrap.min.js"></script> -->
|
|
<script src="./static/javascripts/bootstrap-vue.min.js"></script>
|
|
<script src="./static/javascripts/api.js"></script>
|
|
<script src="./static/javascripts/app.js"></script>
|
|
</body>
|
|
</html>
|