-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathpopup.html
80 lines (77 loc) · 3.87 KB
/
popup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!doctype html>
<html>
<head>
<title>Popup</title>
<link rel="stylesheet" href="fonts/fonts.css">
<link href="lib/hint.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="fonts/linearicons/style.css">
<link href="popup.css" rel="stylesheet" type="text/css">
<script src="lib/chrome-promise.js"></script>
<script src="lib/lodash.js"></script>
<script src="main.js"></script>
<script src="lib/moment.min.js"></script>
<script src="lib/vue.min.js"></script>
<script src="popup.js"></script>
</head>
<body v-cloak>
<welcome v-if="!messages.welcome">
<section>
<h1>Welcome!</h1>
<div>When you <strong>stash tabs</strong>, they are closed and saved in this popup.</div>
</section>
<section>
<img src="img/cmd.svg">
<div>You can <strong>cherry-pick</strong> tabs to stash by clicking tab handles while holding the
<key>{{ modifierKey }}</key> key.</div>
</section>
<section>
<img src="img/shift.svg">
<div>Or better yet, use the
<key>Shift</key> key that works in the same way, but selects a <strong>range</strong> of tabs.</div>
</section>
<footer>
<button v-on:click="gotIt" class="button-text">Got it!</button>
</footer>
</welcome>
<main v-else @keydown.up="up" @keydown.down="down">
<header>
<tip v-if="!messages.openStash && !isEmpty(stashes)">
<i class="lnr lnr-pointer-up" aria-hidden="true"></i>
<div class="content">
Your stashes are displayed below. If you click one, it's opened in a new window, and removed from the list in this popup.
</div>
</tip>
<input-row v-if="mode == 'default'">
<input class="new-stash-name" type="text" id="new-stash-name-window" v-model="stashNameWindow" @keydown.enter="stashWindow"
placeholder="Type stash name & hit Enter">
<button v-on:click="stashWindow" tabindex="-1" class="button-text">Stash window</button>
</input-row>
<input-row v-if="mode == 'default' || mode == 'singleTab'">
<input class="new-stash-name" type="text" id="new-stash-name-tab" v-model="stashNameTab" @keydown.enter="stashTab" placeholder="Type stash name & hit Enter">
<button v-on:click="stashTab" tabindex="-1" class="button-text">Stash this tab</button>
</input-row>
<input-row v-if="mode == 'selection'">
<input class="new-stash-name" type="text" id="new-stash-name-tabs" v-model="stathNameTabs" @keydown.enter="stashTabs" placeholder="Type stash name & hit Enter">
<button v-on:click="stashTabs" tabindex="-1" class="button-text">Stash {{ highlightedTabsLenth | tabs }}</button>
</input-row>
</header>
<ul id="stash-list" v-if="!isEmpty(stashes)">
<li role="button" tabindex="0" class="stash" v-for="stash in stashes | order-by 'timestamp' -1" v-on:click="unstash($key, stash)"
@keydown.enter="unstash($key, stash)" @keydown.space="unstash($key, stash)" v-on:focus="handleFocus" v-on:blur="handleBlur">
<span class="stash-primary-content">
<span class="stash-title">{{ stash.name || stashNamePlaceholder }}</span>
<span class="stash-sub-title">{{ stash.tabs.length | tabs }} • {{ stash.timestamp | from-now }}</span>
</span>
<span class="stash-secondary-content">
<button v-on:click.stop="topUp($key)" @keydown.enter.stop @keydown.space.stop class="button-icon hint--top hint--rounded" aria-label="Stash {{ topUpTabsLabel }} here" v-on:focus="handleFocus" v-on:blur="handleBlur">
<i class="lnr lnr-plus-circle"></i>
</button>
<button v-on:click.stop="deleteStash($key)" @keydown.enter.stop @keydown.space.stop class="button-icon hint--top hint--rounded" aria-label="Delete" v-on:focus="handleFocus" v-on:blur="handleBlur">
<i class="lnr lnr-trash"></i>
</button>
</span>
</li>
</ul>
</main>
</body>
</html>