Skip to content

Commit 6ae149a

Browse files
ThisIs-DeveloperThisIs-Developer
authored
Merge pull request #49 from ThisIs-Developer/copilot/enhance-github-import-file-browser
Set GitHub Import modal to 60% viewport width on desktop/tablet
2 parents 6142e6a + dce38f2 commit 6ae149a

7 files changed

Lines changed: 2402 additions & 62 deletions

File tree

‎desktop-app/resources/index.html‎

Lines changed: 119 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@
3232
<!-- Updated libraries to latest versions -->
3333
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
3434
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.3.0/github-markdown.min.css">
35-
<link rel="stylesheet" id="highlight-theme" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
3635
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
3736
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emoji-toolkit@9.0.1/extras/css/joypixels.min.css">
3837
<link rel="stylesheet" href="/styles.css">
@@ -54,6 +53,7 @@
5453

5554
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
5655
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
56+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js" integrity="sha384-rNlaE5fs9dGIjmxWDALQh/RBAaGRYT5ChrzHo6tRfgrZ36iRFAiquP5g41Jsv+0j" crossorigin="anonymous"></script>
5757
</head>
5858
<body>
5959
<div class="app-container">
@@ -102,9 +102,15 @@ <h1 class="h4 mb-0 me-2">Markdown Viewer</h1>
102102
<button id="toggle-sync" class="tool-button sync-enabled border-primary" title="Toggle Sync Scrolling">
103103
<i class="bi bi-link"></i> Sync Off
104104
</button>
105-
<button id="import-button" class="tool-button" title="Import Markdown">
106-
<i class="bi bi-upload"></i> Import
107-
</button>
105+
<div class="dropdown">
106+
<button class="tool-button dropdown-toggle" type="button" id="importDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Import Markdown">
107+
<i class="bi bi-upload"></i> Import
108+
</button>
109+
<ul class="dropdown-menu" aria-labelledby="importDropdown">
110+
<li><a class="dropdown-item" href="#" id="import-from-file">From files</a></li>
111+
<li><a class="dropdown-item" href="#" id="import-from-github">From GitHub</a></li>
112+
</ul>
113+
</div>
108114
<input type="file" id="file-input" class="file-input" accept=".md,.markdown,text/markdown">
109115

110116
<div class="dropdown">
@@ -122,6 +128,10 @@ <h1 class="h4 mb-0 me-2">Markdown Viewer</h1>
122128
<i class="bi bi-clipboard"></i> Copy
123129
</button>
124130

131+
<button id="share-button" class="tool-button" title="Share via URL">
132+
<i class="bi bi-share"></i> Share
133+
</button>
134+
125135
<button id="theme-toggle" class="tool-button" title="Toggle Dark Mode">
126136
<i class="bi bi-moon"></i>
127137
</button>
@@ -141,6 +151,22 @@ <h5>Menu</h5>
141151
</button>
142152
</div>
143153

154+
<!-- Mobile Document Tabs Section -->
155+
<div class="mobile-tabs-section mb-3">
156+
<div class="mobile-tabs-header">
157+
<span class="mobile-tabs-label"><i class="bi bi-files me-1"></i> Documents</span>
158+
<button id="mobile-new-tab-btn" class="mobile-new-tab-btn" title="New document" aria-label="New document">
159+
<i class="bi bi-plus-lg"></i>
160+
</button>
161+
</div>
162+
<div id="mobile-tab-list" class="mobile-tab-list" role="tablist" aria-label="Document tabs">
163+
<!-- Dynamically populated by JavaScript -->
164+
</div>
165+
<button id="mobile-tab-reset-btn" class="tab-reset-btn mt-2 w-100" title="Reset all files" aria-label="Reset all files">
166+
<i class="bi bi-arrow-counterclockwise"></i> Reset all files
167+
</button>
168+
</div>
169+
144170
<!-- Story 1.4: Mobile View Mode Buttons -->
145171
<div class="mobile-view-mode-group mb-3" role="group" aria-label="View mode">
146172
<button class="mobile-view-mode-btn" data-mode="editor" aria-pressed="false" title="Editor only">
@@ -174,8 +200,12 @@ <h5>Menu</h5>
174200
<i class="bi bi-link"></i> Sync Off
175201
</button>
176202

177-
<button id="mobile-import-button" class="mobile-menu-item" title="Import Markdown">
178-
<i class="bi bi-upload me-2"></i> Import Markdown
203+
<button id="mobile-import-button" class="mobile-menu-item" title="Import from files">
204+
<i class="bi bi-upload me-2"></i> Import from files
205+
</button>
206+
207+
<button id="mobile-import-github-button" class="mobile-menu-item" title="Import from GitHub">
208+
<i class="bi bi-github me-2"></i> Import from GitHub
179209
</button>
180210

181211
<button id="mobile-export-md" class="mobile-menu-item" title="Export as Markdown">
@@ -194,6 +224,10 @@ <h5>Menu</h5>
194224
<i class="bi bi-clipboard me-2"></i> Copy
195225
</button>
196226

227+
<button id="mobile-share-button" class="mobile-menu-item" title="Share via URL">
228+
<i class="bi bi-share me-2"></i> Share
229+
</button>
230+
197231
<button id="mobile-theme-toggle" class="mobile-menu-item" title="Toggle Dark Mode">
198232
<i class="bi bi-moon me-2"></i> Dark Mode
199233
</button>
@@ -205,6 +239,51 @@ <h5>Menu</h5>
205239
</div>
206240
</header>
207241

242+
<!-- Tab Bar -->
243+
<div class="tab-bar" id="tab-bar" role="tablist" aria-label="Document tabs">
244+
<div class="tab-list" id="tab-list"></div>
245+
<button class="tab-reset-btn" id="tab-reset-btn" title="Reset all files" aria-label="Reset all files">
246+
<i class="bi bi-arrow-counterclockwise"></i> Reset
247+
</button>
248+
</div>
249+
250+
<!-- Reset Confirmation Modal -->
251+
<div id="reset-confirm-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="reset-modal-title" style="display:none;">
252+
<div class="reset-modal-box">
253+
<p id="reset-modal-title" class="reset-modal-message">Are you sure you want to delete all files?</p>
254+
<div class="reset-modal-actions">
255+
<button class="reset-modal-btn reset-modal-cancel" id="reset-modal-cancel">Cancel</button>
256+
<button class="reset-modal-btn reset-modal-confirm" id="reset-modal-confirm">Delete All</button>
257+
</div>
258+
</div>
259+
</div>
260+
261+
<!-- Rename Modal -->
262+
<div id="rename-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="rename-modal-title" style="display:none;">
263+
<div class="reset-modal-box">
264+
<p id="rename-modal-title" class="reset-modal-message">Rename file</p>
265+
<input type="text" id="rename-modal-input" class="rename-modal-input" placeholder="File name" />
266+
<div class="reset-modal-actions">
267+
<button class="reset-modal-btn reset-modal-cancel" id="rename-modal-cancel">Cancel</button>
268+
<button class="reset-modal-btn reset-modal-confirm" id="rename-modal-confirm">Rename</button>
269+
</div>
270+
</div>
271+
</div>
272+
273+
<!-- GitHub Import Modal -->
274+
<div id="github-import-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="github-import-title" style="display:none;">
275+
<div class="reset-modal-box">
276+
<p id="github-import-title" class="reset-modal-message">Import Markdown from GitHub</p>
277+
<input type="url" id="github-import-url" class="rename-modal-input" placeholder="https://github.com/owner/repo/blob/main/README.md" />
278+
<select id="github-import-file-select" class="rename-modal-input" style="display:none;"></select>
279+
<p id="github-import-error" class="github-import-error" style="display:none;"></p>
280+
<div class="reset-modal-actions">
281+
<button class="reset-modal-btn reset-modal-cancel" id="github-import-cancel">Cancel</button>
282+
<button class="reset-modal-btn" id="github-import-submit">Import</button>
283+
</div>
284+
</div>
285+
</div>
286+
208287
<div id="dropzone" class="dropzone container-fluid mt-2">
209288
<button id="close-dropzone" class="close-btn" title="Close dropzone">
210289
<i class="bi bi-x-lg"></i>
@@ -226,9 +305,42 @@ <h5>Menu</h5>
226305
</div>
227306
</div>
228307

308+
<!-- Mermaid Zoom Modal -->
309+
<div id="mermaid-zoom-modal" role="dialog" aria-modal="true" aria-label="Diagram zoom view">
310+
<div class="mermaid-modal-content">
311+
<div class="mermaid-modal-header">
312+
<span>Diagram</span>
313+
<button class="mermaid-modal-close" id="mermaid-modal-close" title="Close" aria-label="Close diagram modal">
314+
<i class="bi bi-x-lg"></i>
315+
</button>
316+
</div>
317+
<div class="mermaid-modal-diagram" id="mermaid-modal-diagram"></div>
318+
<div class="mermaid-modal-controls">
319+
<button class="mermaid-toolbar-btn" id="mermaid-modal-zoom-in" title="Zoom in">
320+
<i class="bi bi-zoom-in"></i> Zoom In
321+
</button>
322+
<button class="mermaid-toolbar-btn" id="mermaid-modal-zoom-out" title="Zoom out">
323+
<i class="bi bi-zoom-out"></i> Zoom Out
324+
</button>
325+
<button class="mermaid-toolbar-btn" id="mermaid-modal-zoom-reset" title="Reset zoom">
326+
<i class="bi bi-arrows-angle-contract"></i> Reset
327+
</button>
328+
<button class="mermaid-toolbar-btn" id="mermaid-modal-copy" title="Copy image">
329+
<i class="bi bi-clipboard-image"></i> Copy
330+
</button>
331+
<button class="mermaid-toolbar-btn" id="mermaid-modal-download-png" title="Download PNG">
332+
<i class="bi bi-file-image"></i> PNG
333+
</button>
334+
<button class="mermaid-toolbar-btn" id="mermaid-modal-download-svg" title="Download SVG">
335+
<i class="bi bi-filetype-svg"></i> SVG
336+
</button>
337+
</div>
338+
</div>
339+
</div>
340+
229341
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
230342
<script src="/js/neutralino.js"></script>
231343
<script src="/js/main.js"></script>
232344
<script src="/js/script.js"></script>
233345
</body>
234-
</html>
346+
</html>

0 commit comments

Comments
 (0)