-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
118 lines (111 loc) · 4.64 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html class="">
<head>
<title>Tree Swipe</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css" />
<link rel="stylesheet" href="styles.css" />
</head>
<body class="pa3 bg-black white w-rem-24 h-rem-20 flex flex-column f5">
<section id="setupSection" class="">
<div class="pb2">
<div>
<div class="dib mr2">Skip already reviewed emails:</div>
<div id="skip-toggle" class="relative dib">
<input title="Click to toggle skipping of reviewed emails on/off" id="skipping" class="absolute z-5 w-100 h-100 o-0 pointer checkbox" type="checkbox">
<div class="relative z-4 dib w2 h1 bg-mid-gray overflow-hidden br4 v-mid bg-animate checkbox-wrapper mb05">
<div class="absolute right-auto left-0 w1 h1 br4 bg-silver shadow-4 t-cb bg-animate checkbox-toggle"></div>
</div>
</div>
</div>
</div>
<div class="pb2">Please choose how many email threads to review:</div>
<div class="dib">
<button title="Review 5 email threads" id="five" class="f6 link dim pointer br2 bn ph3 pv2 dib white bg-dark-green">
5
</button>
</div>
<div class="dib">
<button title="Review 10 email threads" id="ten" class="f6 link dim pointer br2 bn ph3 pv2 dib white bg-green">
10
</button>
</div>
<div class="dib">
<button title="Review 20 email threads" id="twenty" class="f6 link dim pointer br2 bn ph3 pv2 dib white bg-dark-green">
20
</button>
</div>
<div class="dib">
<button title="Review 50 email threads" id="fifty" class="f6 link dim pointer br2 bn ph3 pv2 dib white bg-dark-green">
50
</button>
</div>
<div class="dib">
<button
title="Clear 'Tree Swipe' labels from threads"
id="clearAllLabels"
class="f6 link dim pointer br2 bn ph2 pv2 dib white bg-gray">
Clear Labels
</button>
</div>
<div class="dib">
<button title="Refresh the session state back to its initial values" id="reset" class="f6 link dim pointer br2 bn ph2 pv2 dib white bg-dark-pink">
Reset State
</button>
</div>
<div id="setupMsg" class="pt2"></div>
</section>
<!--flex flex-column justify-between-->
<section id="reviewSection" class="dn h-100">
<section id="reviewTop">
<section id="reviewDevButtons" class="pb2">
<button title="Finish the review session early w/o applying any labels" id="quit" class="f6 link dim pointer br2 bn ph2 pv2 dib white bg-dark-blue">
Quit
</button>
<button title="Apply 'reviewed' label & go to next thread" id="next" class="f6 link dim pointer br2 bn ph2 pv2 dib white bg-dark-green">
Next
</button>
<button title="Go to next thread w/o applying 'reviewed' label" id="skip" class="f6 link pointer dim br2 bn ph2 pv2 dib white bg-hot-pink">
Skip
</button>
</section>
<section id="reviewTexts">
<!--<span id="instructions" class="">Please click 'Refresh' to get started</span>-->
<div id="reviewCount" class="pb2"></div>
<div id="from" class="clamp-text pb2"></div>
<div id="subject" class="clamp-text pb2"></div>
<div id="body" class="clamp-text pb2"></div>
<div id="msg" class=""></div>
</section>
</section>
<section id="questionAndReviewButtons">
<div id="question" class="pb2 f4 fw6 tc">What if labeling your emails was <em>BLAZINGLY</em> fast? 🚀🚀🚀</div>
<div id="noYesBtns" class="tc">
<button id="noBtn" class="f6 link dim pointer br2 bn w3 pv2 dib white bg-dark-red">
No
</button>
<button id="yesBtn" class="f6 link dim pointer br2 bn w3 pv2 dib white bg-dark-green">
Yes
</button>
<div id="labelBtnsDiv" class="dn">
<button id="applyLabelBtn" class="dib f6 link dim pointer br2 bn w4 pv2 white bg-red">
Label & Next
</button>
<button id="applyLabelsAndFinishBtn" class="dn f6 link dim pointer br2 bn w4 pv2 white bg-blue">
Label & Finish
</button>
</div>
<button id="redoBtn" class="dn f6 link dim pointer br2 bn w4 pv2 white bg-dark-green">
Redo Question
</button>
</div>
</section>
</section>
<section id="spinnerSection">
<div>
<!--a spinner for showing when actions are taking time to complete-->
<span title="Please wait momentarily..." id="spinner" class="dn spinner white f3 w2 h2 bt--blue ba br-100 b--dark-gray bw3"></span>
</div>
</section>
<script type="module" src="popup.js"></script>
</body>
</html>