-
Notifications
You must be signed in to change notification settings - Fork 0
/
popup.html
131 lines (117 loc) · 4.97 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
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<html>
<head>
<title>TODOTabs</title>
<link href="css/popup.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome-4.3.0.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main-popup">
<div class="top clearfix">
<h1>TODOTabs</h1>
<!-- actions wrapper -->
<div class="actions-wrapper">
<a href="#" id="createTodo"><i class="fa fa-plus-square fa-2x"></i><span class="sr-only">New Todo List</span></a>
<div id="listActions">
<!-- dropdown -->
<label class="sr-only" for="todoDropdown">Your lists</label>
<select id="todoDropdown" class="todo-dropdown"></select>
<!-- actions -->
<div class="todo-actions">
<a href="#" id="openTodoTabs"><i class="fa fa-external-link fa-lg"></i><span class="sr-only">Open all todo items</span></a>
<a href="#" id="openTodoSettings"><i class="fa fa-cog fa-lg"></i><span class="sr-only">Settings</span></a>
<a href="#" id="deleteTodo"><i class="fa fa-trash fa-lg"></i><span class="sr-only">Delete</span></a>
</div>
</div>
</div>
</div>
<!-- no todos found -->
<div class="no-todos" id="noTodos">
<p><strong>First time user?</strong></p>
<p>Start by opening a few tabs and clicking the red + button.</p>
</div>
<!-- lists -->
<div class="todo-lists" id="todoLists"></div>
<!-- new todo btn -->
<!--<button id="createTodo" class="btn btn-primary">New Todo List</button>-->
</div>
<!-- alerts -->
<div class="alert alert-success hidden"></div>
<div class="alert alert-warn hidden"></div>
<div class="alert alert-error hidden"></div>
<!-- settings -->
<div id="settingsWrapper" class="todo-settings-wrapper hidden">
<div class="todo-settings-inner">
<a href="#" id="closeTodoSettings" class="todo-settings-close"><i class="fa fa-times"></i><span class="sr-only">Close settings</span></a>
<div id="todoSettings" class="todo-settings"></div>
<div><button id="saveTodoSettings" class="todo-settings-save btn btn-primary">Save</button></div>
</div>
</div>
<!-- templates -->
<script id="todoListTemplate" type="x-mustache-template">
{{ #todoLists }}
<div class="todo" id="{{ id }}">
{{ #dueDate }} <div class="pull-right alarm"> {{ formattedDate }} <i class="fa fa-bell"></i><span class="sr-only">Alarm</span> </div> {{ /dueDate }}
<h3>{{ name }}</h3>
<ul>
{{ #items }}
<li id="{{ itemId }}" {{ #complete }} class="complete" {{ /complete }}>
<div class="item-actions">
<a href="#"><span class="sr-only">Remove Item</span><i class="remove fa fa-times-circle-o fa-lg"></i></a>
</div>
<label for="todoStatus" class="sr-only">Todo Status</label>
<input class="todo-item-status" id="todoStatus" type="checkbox" {{ #complete }} checked="checked" {{ /complete }} />
<p class="todo-item-title"><img src="{{ favIconUrl }}" alt=""> <a href="#">{{ title }}</a></p>
<p class="todo-item-url note">{{ domain }}</p>
</li>
{{ /items }}
</ul>
</div>
{{ /todoLists }}
</script>
<script id="todoDropdownTemplate" type="x-mustache-template">
{{ #todoLists }}
<option value="{{ id }}">{{ name }}</option>
{{ /todoLists }}
</script>
<script id="todoSettingsTemplate" type="x-mustache-template">
<div class="settings-name-wrapper">
<label for="todoName" class="sr-only">Todo Name</label>
<input type="text" id="todoName" name="todoName" class="settings-input settings-name" value="{{ name }}" />
</div>
<div>
<label>
<span>Due Date</span>
<input type="date" id="todoDueDate" name="todoDueDate" class="settings-input" value="{{ dueDate }}" style="margin-bottom: 5px;">
</label>
<label>
<span></span>
<input type="time" id="todoDueTime" name="todoDueTime" class="settings-input" value="{{ dueTime }}" />
</label>
</div>
<div>
<label>
<span>Repeat</span>
<select id="todoRepeat" class="settings-input">
<option value="">Never</option>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
<option value="annually">Annually</option>
</select>
</label>
</div>
<div>
<label>
<span>Notes</span>
<textarea id="todoNotes" name="todoNotes" class="settings-input settings-notes">{{ notes }}</textarea>
</label>
</div>
</script>
<script src="js/lib/mustache.min.js"></script>
<script src="js/todolist.js"></script>
<script src="js/view.js"></script>
<script src="js/helpers.js"></script>
<script src="js/init.js"></script>
</body>
</html>