mirror of
https://github.com/nkanaev/yarr.git
synced 2025-05-24 00:33:14 +00:00
175 lines
10 KiB
HTML
175 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title></title>
|
|
<link rel="stylesheet" href="./static/stylesheets/bootstrap.min.css">
|
|
<link rel="stylesheet" href="./static/stylesheets/app.css">
|
|
</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="mx-2 my-2">
|
|
<div class="mb-5">
|
|
<label class="nav-select d-block mb-1" v-for="filter in filters">
|
|
<input type="radio" name="filter" :value="filter.value" v-model="filterSelected">
|
|
<div class="menu-item d-flex align-items-center w-100">
|
|
<img :src="'./static/images/' + filter.icon + '.svg'" alt="" class="nav-icon">
|
|
<span class="flex-fill text-left text-truncate">{{filter.title}}</span>
|
|
<span class="counter text-right"></span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="nav-select d-block mb-1">
|
|
<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 d-block mb-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="{'pl-3': folder.id}">
|
|
<label class="nav-select d-block mb-1"
|
|
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>
|
|
<button class="btn btn-link" @click="settingsShow = true">
|
|
<img src="./static/images/settings.svg" alt="">
|
|
</button>
|
|
</div>
|
|
<div class="vh-100 overflow-auto border-right flex-shrink-0" style="width: 300px">
|
|
<div class="my-2 mx-2">
|
|
<label class="nav-select mb-1" v-for="item in items" :class="{'text-muted': item.status === 'read'}">
|
|
<input type="radio" name="item" :value="item.id" v-model="itemSelected">
|
|
<div class="menu-item p-2">
|
|
<div class="d-flex flex-column ml-4">
|
|
<div style="line-height: 1" class="d-flex">
|
|
<img src="./static/images/circle-full.svg" class="nav-icon ml-n4 mr-2" v-if="item.status === 'unread'">
|
|
<img src="./static/images/circle.svg" class="nav-icon ml-n4 mr-2" v-if="item.status === 'read'">
|
|
<img src="./static/images/star.svg" class="nav-icon ml-n4 mr-2" v-if="item.status === 'starred'">
|
|
<small class="flex-fill text-truncate">{{feedsById[item.feed_id].title}}</small>
|
|
<small class="">{{formatDate(item.date)}}</small>
|
|
</div>
|
|
<span>{{item.title}}</span>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="vh-100 overflow-auto w-100">
|
|
<div v-if="itemSelected" class="mx-3 my-2">
|
|
<h3>{{itemSelectedDetails.title}}</h3>
|
|
<div class="text-muted">
|
|
<div>{{ feedsById[itemSelectedDetails.feed_id].title }}</div>
|
|
<time>{{ formatDate(itemSelectedDetails.date) }}</time>
|
|
</div>
|
|
<hr>
|
|
<div>
|
|
content goes here
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal" :class="{show: settingsShow, 'd-block': settingsShow}" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="card-header px-0">
|
|
<button type="button"
|
|
class="close mr-3"
|
|
@click="settingsShow = false">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<ul class="nav nav-tabs card-header-tabs mx-0 px-3">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" :class="{active: settings=='create'}" @click.prevent="settings='create'">New Feed</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" :class="{active: settings=='manage'}" @click.prevent="settings='manage'">Manage Feeds</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" :class="{active: settings=='import'}" @click.prevent="settings='import'">Import/Export</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div v-if="settings=='create'">
|
|
<label for="feed-url">URL</label>
|
|
<input id="feed-url" type="text" class="form-control">
|
|
<label for="feed-folder" class="mt-3">Folder</label>
|
|
<select class="form-control" id="feed-folder">
|
|
<option value=""></option>
|
|
<option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option>
|
|
</select>
|
|
<button class="btn btn-block btn-outline-secondary mt-3" type="button">Add</button>
|
|
</div>
|
|
<div v-else-if="settings=='manage'">
|
|
<div v-for="folder in foldersWithFeeds">
|
|
<p><strong>{{ folder.title || "Uncategorized" }}</strong></p>
|
|
<div v-for="feed in folder.feeds">
|
|
{{ feed.title }}
|
|
|
|
<div class="dropdown d-inline-block">
|
|
<button class="btn btn-link dropdown-toggle" @click="settingsManageDropdown='feed:'+feed.id">
|
|
<img src="./static/images/folder.svg">
|
|
</button>
|
|
<div class="dropdown-menu show py-0 overflow-hidden"
|
|
style="top: 0; left: 0; position: absolute; transform: translate3d(0px, 38px, 0px);"
|
|
v-if="settingsManageDropdown=='feed:'+feed.id">
|
|
<a href="#" class="dropdown-item px-3"
|
|
@click.prevent="moveFeed(feed, null)" v-if="feed.folder_id">---</a>
|
|
<a href="#" class="dropdown-item px-3"
|
|
v-if="folder.id != feed.folder_id"
|
|
v-for="folder in folders"
|
|
@click.prevent="moveFeed(feed, folder)">
|
|
{{ folder.title }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-link">
|
|
<img src="./static/images/trash-2.svg">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<label for="">New Folder</label>
|
|
<div class="input-group mb-3">
|
|
<input type="text" class="form-control" v-model="newFolderTitle">
|
|
<div class="input-group-append">
|
|
<button class="btn btn-outline-secondary" @click="newFolderCreate()">Add</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="settings=='import'">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="./static/javascripts/vue.min.js"></script>
|
|
<script src="./static/javascripts/app.js"></script>
|
|
</body>
|
|
</html>
|