kanbanqube 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +201 -0
- package/README.md +287 -0
- package/demo_board.json +321 -0
- package/package.json +46 -0
- package/promo.jpg +0 -0
- package/public/about.jpg +0 -0
- package/public/app.js +2897 -0
- package/public/favicon.svg +11 -0
- package/public/icon_3d.png +0 -0
- package/public/icon_flat.png +0 -0
- package/public/index.html +318 -0
- package/public/styles.css +1554 -0
- package/screenshot.png +0 -0
- package/server.js +1347 -0
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
2
|
+
<defs>
|
|
3
|
+
<linearGradient id="bg" x1="12" y1="8" x2="52" y2="56" gradientUnits="userSpaceOnUse">
|
|
4
|
+
<stop stop-color="#3d4654"/>
|
|
5
|
+
<stop offset="1" stop-color="#1f2430"/>
|
|
6
|
+
</linearGradient>
|
|
7
|
+
</defs>
|
|
8
|
+
<rect x="4" y="4" width="56" height="56" rx="16" fill="url(#bg)"/>
|
|
9
|
+
<rect x="4.5" y="4.5" width="55" height="55" rx="15.5" fill="none" stroke="#ffffff" stroke-opacity="0.16"/>
|
|
10
|
+
<text x="32" y="41" text-anchor="middle" font-family="Hiragino Mincho ProN, Yu Mincho, Noto Serif CJK JP, serif" font-size="32" font-weight="800" fill="#eef4ff">看</text>
|
|
11
|
+
</svg>
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,318 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>KanbanQube</title>
|
|
7
|
+
<link id="faviconLink" rel="icon" type="image/png" href="/icon_3d.png" />
|
|
8
|
+
<link rel="stylesheet" href="/styles.css" />
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div class="app-shell">
|
|
12
|
+
<header class="topbar">
|
|
13
|
+
<div class="brand">
|
|
14
|
+
<button id="aboutButton" class="brand-mark" type="button" aria-label="About KanbanQube">
|
|
15
|
+
<img src="/icon_3d.png" alt="" />
|
|
16
|
+
</button>
|
|
17
|
+
<div class="brand-copy">
|
|
18
|
+
<strong>KanbanQube</strong>
|
|
19
|
+
<button id="saveStatus" class="save-status-button" type="button">Loading board…</button>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<label class="search-shell" for="searchInput">
|
|
24
|
+
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
25
|
+
<path d="M10.5 4a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm0-2a8.5 8.5 0 1 0 5.31 15.13l4.03 4.04 1.41-1.41-4.04-4.03A8.5 8.5 0 0 0 10.5 2Z"/>
|
|
26
|
+
</svg>
|
|
27
|
+
<input id="searchInput" type="search" placeholder="Search cards" autocomplete="off" />
|
|
28
|
+
</label>
|
|
29
|
+
|
|
30
|
+
<div class="topbar-actions">
|
|
31
|
+
<button id="syncButton" class="primary-button" type="button">Sync</button>
|
|
32
|
+
<button id="archiveButton" class="ghost-button" type="button">Archive</button>
|
|
33
|
+
<button id="settingsButton" class="ghost-button" type="button">Settings</button>
|
|
34
|
+
</div>
|
|
35
|
+
</header>
|
|
36
|
+
|
|
37
|
+
<section class="board-header">
|
|
38
|
+
<div>
|
|
39
|
+
<p class="eyebrow">Git-synced board</p>
|
|
40
|
+
<div class="board-title-shell">
|
|
41
|
+
<h1 id="boardTitle">KanbanQube Board</h1>
|
|
42
|
+
<input id="boardTitleInlineInput" class="inline-title-input board-title-inline-input" type="text" maxlength="200" hidden />
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="board-meta">
|
|
46
|
+
<span id="userBadge" class="meta-badge">Guest</span>
|
|
47
|
+
</div>
|
|
48
|
+
</section>
|
|
49
|
+
|
|
50
|
+
<main id="boardScroller" class="board-scroller" aria-label="Kanban board"></main>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<dialog id="cardDialog" class="modal modal-large">
|
|
54
|
+
<form method="dialog" class="modal-card">
|
|
55
|
+
<header class="modal-header">
|
|
56
|
+
<div>
|
|
57
|
+
<p class="modal-label">Card details</p>
|
|
58
|
+
<input id="cardTitleInput" class="title-input" type="text" maxlength="200" placeholder="Task" />
|
|
59
|
+
</div>
|
|
60
|
+
<button id="closeCardButton" type="button" class="icon-button" aria-label="Close card dialog">✕</button>
|
|
61
|
+
</header>
|
|
62
|
+
|
|
63
|
+
<div id="archivedCardBanner" class="archived-card-banner" hidden>This is an archived card.</div>
|
|
64
|
+
<div id="cardDetailsCover" class="card-details-cover" hidden>
|
|
65
|
+
<button id="removeCoverButton" class="cover-remove-button" type="button" aria-label="Remove cover image">×</button>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<div class="modal-grid">
|
|
69
|
+
<section class="modal-main">
|
|
70
|
+
<section class="sidebar-panel">
|
|
71
|
+
<div class="panel-header">
|
|
72
|
+
<h2>Description</h2>
|
|
73
|
+
<button id="editDescriptionButton" class="ghost-button" type="button">Edit</button>
|
|
74
|
+
</div>
|
|
75
|
+
<div id="cardDescriptionDisplay" class="description-display"></div>
|
|
76
|
+
<textarea id="cardDescriptionInput" class="description-editor" rows="8" placeholder="Add a description" hidden></textarea>
|
|
77
|
+
</section>
|
|
78
|
+
|
|
79
|
+
<section class="attachments-panel">
|
|
80
|
+
<div class="panel-header">
|
|
81
|
+
<h2>Attachments</h2>
|
|
82
|
+
<button id="addAttachmentButton" class="ghost-button" type="button">Add files</button>
|
|
83
|
+
</div>
|
|
84
|
+
<input id="attachmentInput" type="file" multiple hidden />
|
|
85
|
+
<div id="attachmentDropZone" class="attachment-drop-zone">Drop files here</div>
|
|
86
|
+
<div id="attachmentsContainer" class="attachments-list"></div>
|
|
87
|
+
</section>
|
|
88
|
+
|
|
89
|
+
<section class="checklists-panel">
|
|
90
|
+
<div class="panel-header">
|
|
91
|
+
<h2>Checklists</h2>
|
|
92
|
+
<button id="addChecklistButton" class="ghost-button" type="button">Add checklist</button>
|
|
93
|
+
</div>
|
|
94
|
+
<div id="checklistsContainer" class="checklists-container"></div>
|
|
95
|
+
</section>
|
|
96
|
+
</section>
|
|
97
|
+
|
|
98
|
+
<aside class="modal-sidebar">
|
|
99
|
+
<section class="sidebar-panel">
|
|
100
|
+
<div class="panel-header">
|
|
101
|
+
<h2>Labels</h2>
|
|
102
|
+
<button id="addLabelButton" class="icon-button" type="button" aria-label="Open labels panel">+</button>
|
|
103
|
+
</div>
|
|
104
|
+
<div id="cardLabels" class="label-cloud"></div>
|
|
105
|
+
<div id="labelEditorContainer"></div>
|
|
106
|
+
</section>
|
|
107
|
+
|
|
108
|
+
<section class="sidebar-panel">
|
|
109
|
+
<div class="panel-header">
|
|
110
|
+
<h2>Activity</h2>
|
|
111
|
+
</div>
|
|
112
|
+
<div class="comment-composer">
|
|
113
|
+
<textarea id="commentInput" rows="3" placeholder="Write a comment"></textarea>
|
|
114
|
+
<button id="addCommentButton" class="primary-button" type="button">Add comment</button>
|
|
115
|
+
</div>
|
|
116
|
+
<div id="activityList" class="activity-list"></div>
|
|
117
|
+
</section>
|
|
118
|
+
|
|
119
|
+
<button id="deleteCardButton" type="button" class="danger-button">Delete card</button>
|
|
120
|
+
</aside>
|
|
121
|
+
</div>
|
|
122
|
+
</form>
|
|
123
|
+
</dialog>
|
|
124
|
+
|
|
125
|
+
<dialog id="settingsDialog" class="modal">
|
|
126
|
+
<form method="dialog" class="modal-card modal-small">
|
|
127
|
+
<header class="modal-header">
|
|
128
|
+
<div>
|
|
129
|
+
<p class="modal-label">Settings</p>
|
|
130
|
+
<h2>Board preferences</h2>
|
|
131
|
+
</div>
|
|
132
|
+
<button id="closeSettingsButton" type="button" class="icon-button" aria-label="Close settings">✕</button>
|
|
133
|
+
</header>
|
|
134
|
+
|
|
135
|
+
<label class="field">
|
|
136
|
+
<span>Your name</span>
|
|
137
|
+
<input id="settingsUserName" type="text" maxlength="120" readonly />
|
|
138
|
+
</label>
|
|
139
|
+
|
|
140
|
+
<label class="field">
|
|
141
|
+
<span>Your email</span>
|
|
142
|
+
<input id="settingsUserEmail" type="email" maxlength="200" readonly />
|
|
143
|
+
</label>
|
|
144
|
+
|
|
145
|
+
<fieldset class="field icon-choice-field">
|
|
146
|
+
<legend>App icon</legend>
|
|
147
|
+
<label>
|
|
148
|
+
<input type="radio" name="settingsIconStyle" value="3d" />
|
|
149
|
+
<img src="/icon_3d.png" alt="" />
|
|
150
|
+
<span>3D</span>
|
|
151
|
+
</label>
|
|
152
|
+
<label>
|
|
153
|
+
<input type="radio" name="settingsIconStyle" value="flat" />
|
|
154
|
+
<img src="/icon_flat.png" alt="" />
|
|
155
|
+
<span>Flat</span>
|
|
156
|
+
</label>
|
|
157
|
+
</fieldset>
|
|
158
|
+
|
|
159
|
+
<label class="checkbox-field">
|
|
160
|
+
<input id="settingsShowCardDescriptions" type="checkbox" />
|
|
161
|
+
<span>Show card descriptions in board lanes</span>
|
|
162
|
+
</label>
|
|
163
|
+
|
|
164
|
+
<label class="checkbox-field">
|
|
165
|
+
<input id="settingsInlineCardTitleEdit" type="checkbox" />
|
|
166
|
+
<span>Edit card titles from board lanes</span>
|
|
167
|
+
</label>
|
|
168
|
+
|
|
169
|
+
<label class="checkbox-field">
|
|
170
|
+
<input id="settingsGitSyncInBackground" type="checkbox" />
|
|
171
|
+
<span>Run Git sync in the background (no dialog)</span>
|
|
172
|
+
</label>
|
|
173
|
+
|
|
174
|
+
<section class="settings-import-panel">
|
|
175
|
+
<div>
|
|
176
|
+
<h3>Import board JSON</h3>
|
|
177
|
+
<p id="settingsImportHelp">Available only while the board has no cards.</p>
|
|
178
|
+
</div>
|
|
179
|
+
<input id="importBoardInput" type="file" accept="application/json,.json" hidden />
|
|
180
|
+
<button id="importBoardButton" type="button" class="ghost-button">Import JSON</button>
|
|
181
|
+
</section>
|
|
182
|
+
|
|
183
|
+
<div class="settings-meta">
|
|
184
|
+
<span id="settingsBoardFile"></span>
|
|
185
|
+
<span id="settingsRemote"></span>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
<footer class="modal-footer">
|
|
189
|
+
<button id="saveSettingsButton" type="button" class="primary-button">Save settings</button>
|
|
190
|
+
</footer>
|
|
191
|
+
</form>
|
|
192
|
+
</dialog>
|
|
193
|
+
|
|
194
|
+
<dialog id="syncLogDialog" class="modal">
|
|
195
|
+
<form method="dialog" class="modal-card modal-sync-log">
|
|
196
|
+
<header class="modal-header">
|
|
197
|
+
<div>
|
|
198
|
+
<p class="modal-label">Git sync</p>
|
|
199
|
+
<h2>Sync log</h2>
|
|
200
|
+
<p id="syncLogTimestamp" class="modal-subtitle"></p>
|
|
201
|
+
</div>
|
|
202
|
+
<button id="closeSyncLogButton" type="button" class="icon-button" aria-label="Close sync log">✕</button>
|
|
203
|
+
</header>
|
|
204
|
+
<pre id="syncLogContent" class="sync-log-content"></pre>
|
|
205
|
+
<footer class="modal-footer sync-log-footer">
|
|
206
|
+
<button id="syncLogCloseButton" type="button" class="primary-button">Close</button>
|
|
207
|
+
</footer>
|
|
208
|
+
</form>
|
|
209
|
+
</dialog>
|
|
210
|
+
|
|
211
|
+
<dialog id="archiveDialog" class="modal">
|
|
212
|
+
<form method="dialog" class="modal-card modal-archive">
|
|
213
|
+
<header class="modal-header">
|
|
214
|
+
<div>
|
|
215
|
+
<p class="modal-label">Archive</p>
|
|
216
|
+
<h2>Archived cards</h2>
|
|
217
|
+
</div>
|
|
218
|
+
<button id="closeArchiveButton" type="button" class="icon-button" aria-label="Close archive">✕</button>
|
|
219
|
+
</header>
|
|
220
|
+
<div id="archiveList" class="archive-list"></div>
|
|
221
|
+
</form>
|
|
222
|
+
</dialog>
|
|
223
|
+
|
|
224
|
+
<dialog id="promptDialog" class="modal">
|
|
225
|
+
<form method="dialog" class="modal-card modal-small">
|
|
226
|
+
<header class="modal-header">
|
|
227
|
+
<div>
|
|
228
|
+
<p class="modal-label" id="promptLabel">Update</p>
|
|
229
|
+
<h2 id="promptTitle">Enter a value</h2>
|
|
230
|
+
</div>
|
|
231
|
+
</header>
|
|
232
|
+
|
|
233
|
+
<label class="field">
|
|
234
|
+
<span id="promptInputLabel">Name</span>
|
|
235
|
+
<input id="promptInput" type="text" maxlength="200" />
|
|
236
|
+
</label>
|
|
237
|
+
|
|
238
|
+
<footer class="modal-footer">
|
|
239
|
+
<button id="promptCancelButton" type="button" class="ghost-button">Cancel</button>
|
|
240
|
+
<button id="promptConfirmButton" type="submit" class="primary-button">Save</button>
|
|
241
|
+
</footer>
|
|
242
|
+
</form>
|
|
243
|
+
</dialog>
|
|
244
|
+
|
|
245
|
+
<dialog id="appDialog" class="modal">
|
|
246
|
+
<form method="dialog" class="modal-card modal-app-dialog">
|
|
247
|
+
<header class="modal-header">
|
|
248
|
+
<div>
|
|
249
|
+
<p class="modal-label" id="appDialogLabel">Confirm</p>
|
|
250
|
+
<h2 id="appDialogTitle">Are you sure?</h2>
|
|
251
|
+
</div>
|
|
252
|
+
<button id="appDialogCloseButton" type="button" class="icon-button" aria-label="Close dialog">✕</button>
|
|
253
|
+
</header>
|
|
254
|
+
|
|
255
|
+
<p id="appDialogMessage" class="app-dialog-message"></p>
|
|
256
|
+
|
|
257
|
+
<footer class="modal-footer app-dialog-footer">
|
|
258
|
+
<button id="appDialogCancelButton" type="button" class="ghost-button">Cancel</button>
|
|
259
|
+
<button id="appDialogConfirmButton" type="submit" class="primary-button" value="confirm">Confirm</button>
|
|
260
|
+
</footer>
|
|
261
|
+
</form>
|
|
262
|
+
</dialog>
|
|
263
|
+
|
|
264
|
+
<dialog id="aboutDialog" class="about-dialog">
|
|
265
|
+
<figure class="about-figure">
|
|
266
|
+
<img id="aboutImage" src="/about.jpg" alt="KanbanQube" />
|
|
267
|
+
<figcaption>
|
|
268
|
+
<span>KanbanQube • © Mathias Conradt • Apache 2.0 License</span>
|
|
269
|
+
<a href="https://github.com/mathiasconradt/kanbanqube" target="_blank" rel="noopener noreferrer">https://github.com/mathiasconradt/kanbanqube</a>
|
|
270
|
+
</figcaption>
|
|
271
|
+
</figure>
|
|
272
|
+
</dialog>
|
|
273
|
+
|
|
274
|
+
<template id="laneTemplate">
|
|
275
|
+
<section class="lane" draggable="true">
|
|
276
|
+
<header class="lane-header">
|
|
277
|
+
<div class="lane-title-row">
|
|
278
|
+
<h2 class="lane-title">Lane</h2>
|
|
279
|
+
<input class="inline-title-input lane-title-inline-input" type="text" maxlength="200" hidden />
|
|
280
|
+
<span class="lane-count"></span>
|
|
281
|
+
</div>
|
|
282
|
+
<div class="lane-actions">
|
|
283
|
+
<button class="icon-button delete-lane-button" type="button" aria-label="Delete lane">
|
|
284
|
+
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
285
|
+
<path d="M3 6h18m-2 0-.9 13.15A2 2 0 0 1 16.1 21H7.9a2 2 0 0 1-2-1.85L5 6m3 0V4.5A1.5 1.5 0 0 1 9.5 3h5A1.5 1.5 0 0 1 16 4.5V6m-6 4v7m4-7v7" />
|
|
286
|
+
</svg>
|
|
287
|
+
</button>
|
|
288
|
+
</div>
|
|
289
|
+
</header>
|
|
290
|
+
<div class="card-list"></div>
|
|
291
|
+
<button class="add-card-button" type="button">+ Add a card</button>
|
|
292
|
+
</section>
|
|
293
|
+
</template>
|
|
294
|
+
|
|
295
|
+
<template id="cardTemplate">
|
|
296
|
+
<article class="card" draggable="true">
|
|
297
|
+
<div class="card-label-strip"></div>
|
|
298
|
+
<div class="card-cover"></div>
|
|
299
|
+
<div class="card-title-row">
|
|
300
|
+
<div class="card-title-main">
|
|
301
|
+
<button class="card-done-toggle" type="button" aria-label="Mark task done"></button>
|
|
302
|
+
<h3 class="card-title">Task</h3>
|
|
303
|
+
<input class="inline-title-input card-title-inline-input" type="text" maxlength="200" placeholder="Task" hidden />
|
|
304
|
+
</div>
|
|
305
|
+
<button class="card-archive-button" type="button" aria-label="Archive card" data-tooltip="Archive">
|
|
306
|
+
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
307
|
+
<path d="M20.25 7.5v10.125c0 1.036-.84 1.875-1.875 1.875H5.625A1.875 1.875 0 0 1 3.75 17.625V7.5m16.5 0V5.625c0-1.036-.84-1.875-1.875-1.875H5.625A1.875 1.875 0 0 0 3.75 5.625V7.5m16.5 0h-16.5m8.25 4.5v3m0 0 1.5-1.5M12 15l-1.5-1.5" />
|
|
308
|
+
</svg>
|
|
309
|
+
</button>
|
|
310
|
+
</div>
|
|
311
|
+
<p class="card-description"></p>
|
|
312
|
+
<footer class="card-footer"></footer>
|
|
313
|
+
</article>
|
|
314
|
+
</template>
|
|
315
|
+
|
|
316
|
+
<script type="module" src="/app.js"></script>
|
|
317
|
+
</body>
|
|
318
|
+
</html>
|